/* BATTAG JHA Builder — iOS-hardened base styles. */
:root {
  color-scheme: light dark;
  /* BATT_RED — the Battaglia logo red (matches BATT_RED in build-fillable-permit.ts). */
  --accent: #db0d17;
  /* Brighter red for SMALL TEXT on the dark background (contrast ≥4.5:1);
     buttons/bars keep pure BATT_RED with white text. */
  --accent-text: #ff4046;
  --bg: #0f1216;
  --surface: #171c22;
  --fg: #f4f6f8;
  --muted: #9aa4af;
  --ok: #35c26b;
  --warn: #e8b21e;
  --down: #e8524e;
  --radius: 14px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  /* dodge the iOS 100vh / dynamic address-bar bug */
  min-height: -webkit-fill-available;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.45;
  /* keep content clear of the notch / home indicator */
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}

.app {
  max-width: 640px;
  margin: 0 auto;
  padding: 20px 16px 40px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}
.brand img {
  border-radius: 10px;
}
h1 {
  font-size: 20px;
  margin: 0;
}
.tag {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 16px;
  margin: 14px 0;
}
.card h2 {
  font-size: 16px;
  margin: 0 0 6px;
}
.card p {
  color: var(--muted);
  margin: 0 0 10px;
  font-size: 14px;
}

.status {
  list-style: none;
  margin: 0;
  padding: 0;
}
.status li {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
}
.status li:first-child {
  border-top: 0;
}
.badge {
  font-weight: 600;
}
.badge.ok {
  color: var(--ok);
}
.badge.warn {
  color: var(--warn);
}
.badge.down {
  color: var(--down);
}

/* Inputs/buttons: >=16px prevents iOS focus auto-zoom; 44px min touch target. */
input,
select,
textarea,
button {
  font-size: 16px;
  font-family: inherit;
}
button {
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  padding: 0 16px;
}

/* ==========================================================================
   .home-* — foreman home (index.html) scoped additive block.
   ========================================================================== */
.home-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.home-who {
  color: var(--muted);
  font-size: 13px;
}
.home-btn-secondary {
  background: #2a323b;
  color: var(--fg);
}
.home-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  margin: 14px 0;
}
.home-offline {
  background: rgba(232, 178, 30, 0.12);
  border: 1px solid var(--warn);
  color: var(--fg);
  padding: 12px;
  border-radius: 10px;
  margin: 12px 0;
  font-size: 14px;
}

/* ==========================================================================
   Login page — Battaglia brand treatment.
   The stripe is the logo's own mark: a BATT_RED band between black bars.
   ========================================================================== */
.brand-stripe {
  height: 10px;
  background: linear-gradient(
    to bottom,
    #000 0 20%,
    var(--accent) 20% 80%,
    #000 80% 100%
  );
}
.login-mast {
  text-align: center;
  padding: 16px 0 2px;
}
.login-logo {
  display: inline-block;
  margin: 0;
  background: #fff;
  border-radius: 14px;
  padding: 14px 18px 10px;
}
.login-logo img {
  display: block;
  width: 220px;
  max-width: 60vw;
  height: auto;
}
.login-app {
  margin: 12px 0 0;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.34em;
  text-indent: 0.34em; /* visually re-centers letterspaced caps */
  color: var(--fg);
}
.login-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}
.login-strip .login-photo {
  margin: 0;
}
.login-strip img {
  height: 92px;
  object-fit: cover;
  border-bottom-width: 3px;
}
/* "Serious About Safety" — a white section like battag.com/safety itself,
   BATT_RED bar on the heading (same mark the fillable permits use). */
.sas-card {
  background: #fff;
}
.sas-card h2 {
  color: #14181d;
  border-left: 4px solid var(--accent);
  padding-left: 10px;
}
.sas-card h3 {
  color: #14181d;
  font-size: 15px;
  margin: 14px 0 4px;
}
.sas-card p {
  color: #3a434c;
}
.sas-lead {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 16px;
}
.sas-badges {
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  margin: 12px auto 4px;
}

.login-motto {
  margin: 22px 0 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.login-motto::before,
.login-motto::after {
  content: "";
  height: 1px;
  width: 44px;
  background: rgba(255, 255, 255, 0.22);
}
.login-photo {
  margin: 14px 0;
}
.login-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border-bottom: 4px solid var(--accent);
}
.login-photo figcaption {
  color: var(--muted);
  font-size: 13px;
  margin-top: 8px;
}
.login-forgot {
  /* no display override here — it would defeat the [hidden] attribute */
  margin-top: 10px;
}

/* ==========================================================================
   .qr-* — gangbox tag pool (admin console) scoped additive block.
   White tag cards: print/scan contrast for the laminated tags.
   ========================================================================== */
.qr-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 12px;
}
.qr-tag {
  margin: 0;
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  text-align: center;
}
.qr-tag img {
  display: block;
}
.qr-tag figcaption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
  color: #0f1216;
  font-size: 12px;
}
.qr-tag code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* Login-page photo rotation (admin card) — shares the .qr-pool flex grid. */
.gallery-thumb {
  margin: 0;
  width: 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gallery-thumb img {
  display: block;
  width: 100%;
  height: 94px;
  object-fit: cover;
  border-radius: 8px;
}
.gallery-thumb button {
  min-height: 34px;
  font-size: 13px;
  padding: 0 10px;
}

/* ==========================================================================
   .form-* — Wave 1 / A1 (Auth & Admin) scoped additive block.
   Owned by A1 per CONTRACTS. All selectors are namespaced under `form-` so
   they cannot collide with other owners' styles. Login + admin console only.
   ========================================================================== */
.form-view {
  margin: 0;
}
.form-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.form-topbar .form-who {
  color: var(--muted);
  font-size: 13px;
}
.form-brand-inline {
  margin-bottom: 0;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.form-label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f1216;
  color: var(--fg);
  /* font-size:16px inherited from the base input rule — no iOS focus zoom */
}
.form-textarea {
  min-height: 68px;
  resize: vertical;
}
.form-hint {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}
/* Password show/hide toggle — button injected by login.js (CSP-safe). Overrides
   the global accent-button look so it sits quietly inside the input's edge. */
.password-wrap {
  position: relative;
  display: block;
}
.password-wrap .form-input {
  padding-right: 72px;
}
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  min-height: 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
  border-radius: 0 10px 10px 0;
}
.password-toggle:hover,
.password-toggle:focus-visible {
  color: var(--fg);
}
.form-checkbox {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.form-checkbox input {
  width: auto;
  min-height: 0;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.form-btn-secondary {
  background: #2a323b;
  color: var(--fg);
}
.form-btn-danger {
  background: var(--down);
}
.form-btn-ghost {
  background: transparent;
  color: var(--accent-text);
  border: 1px solid rgba(255, 255, 255, 0.16);
}

.form-error {
  color: var(--down);
  font-size: 14px;
  margin: 8px 0 0;
  min-height: 1.2em;
  word-break: break-word;
}
.form-notice {
  background: rgba(53, 194, 107, 0.12);
  border: 1px solid var(--ok);
  color: var(--fg);
  padding: 12px;
  border-radius: 10px;
  margin: 12px 0;
  font-size: 14px;
  word-break: break-word;
}
.form-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 700;
  color: var(--accent-text);
  font-size: 16px;
  user-select: all;
}

.form-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.form-item {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 12px 0;
}
.form-item:first-child {
  border-top: 0;
}
.form-item-title {
  font-weight: 600;
  font-size: 15px;
}
.form-item-sub {
  color: var(--muted);
  font-size: 13px;
  margin-top: 3px;
  word-break: break-word;
}
.form-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2a323b;
  color: var(--muted);
  margin-left: 6px;
  vertical-align: middle;
}
.form-pill.form-active {
  color: var(--ok);
}
.form-pill.form-inactive {
  color: var(--down);
}
.form-row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.form-row-actions button {
  font-size: 14px;
  padding: 0 14px;
}
.form-edit {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
}
.form-empty {
  color: var(--muted);
  font-size: 14px;
  padding: 8px 0;
}
.form-busy {
  opacity: 0.55;
  pointer-events: none;
}

/* ==========================================================================
   .co-* — daily closeout page (P3 #2 / V2 wave). Additive, namespaced.
   ========================================================================== */
.co-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.co-row .co-company,
.co-row .co-trade {
  flex: 3;
  min-width: 0;
}
.co-row .co-headcount {
  flex: 1;
  min-width: 64px;
}
.co-remove {
  min-height: 44px;
  padding: 0 12px;
  flex: 0 0 auto;
}
/* secondary home CTA — the end-of-day closeout link under My JHAs */
.home-cta-secondary {
  background: #2a323b;
  min-height: 48px;
  font-size: 15px;
}

/* --- V2-1c injury sign-out (closeout page + home re-prompt) ---------------- */
.co-injury-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.co-injury-row .co-person {
  flex: 1;
  min-width: 0;
}
.co-injury-answer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  white-space: nowrap;
}
.co-injury-answer input {
  width: auto;
  min-height: 0;
  accent-color: var(--down);
}
/* The YES alert + home banner: unmissable, bordered like form-notice but red. */
#injuryAlert,
#injuryBanner {
  background: rgba(229, 77, 66, 0.14);
  border: 1px solid var(--down);
  color: var(--fg);
  padding: 12px;
  border-radius: 10px;
  margin: 12px 0 0;
  font-size: 14px;
  font-weight: 600;
  word-break: break-word;
}

/* Home: job folders → crew sub-folders (V3-2 A4) */
#jsaList .home-folder,
#jsaList .home-crew {
  display: block;
  padding: 0;
}
.home-folder-btn,
.home-crew-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.home-crew-btn {
  min-height: 44px;
  font-size: 14px;
}
.home-folder-btn:active,
.home-crew-btn:active {
  background: rgba(255, 255, 255, 0.06);
}
.home-folder-name {
  font-weight: 600;
}
.home-folder-btn .sub,
.home-crew-btn .sub,
.home-folder-list .sub {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
  font-weight: 400;
}
.home-folder-chev {
  color: var(--muted);
  transition: transform 0.15s ease;
}
.home-folder-btn[aria-expanded="true"] .home-folder-chev,
.home-crew-btn[aria-expanded="true"] .home-folder-chev {
  transform: rotate(90deg);
}
.home-folder-list,
.home-crew-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px 16px;
}

/* Home: job folders -> crew sub-folders (V3-2 A4) */
#jsaList .home-folder,
#jsaList .home-crew {
  display: block;
  padding: 0;
}
.home-folder-btn,
.home-crew-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 10px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 10px;
}
.home-crew-btn {
  min-height: 44px;
  font-size: 14px;
}
.home-folder-btn:active,
.home-crew-btn:active {
  background: rgba(255, 255, 255, 0.06);
}
.home-folder-name {
  font-weight: 600;
}
.home-folder-btn .sub,
.home-crew-btn .sub,
.home-folder-list .sub {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-top: 2px;
  font-weight: 400;
}
.home-folder-chev {
  color: var(--muted);
  transition: transform 0.15s ease;
}
.home-folder-btn[aria-expanded="true"] .home-folder-chev,
.home-crew-btn[aria-expanded="true"] .home-folder-chev {
  transform: rotate(90deg);
}
.home-folder-list,
.home-crew-list {
  list-style: none;
  margin: 0;
  padding: 0 0 6px 16px;
}

/* Tappable JHA rows -> read-off viewer (V3-2 A5) */
.home-jsa-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.home-jsa-link {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  color: inherit;
  text-decoration: none;
}
.home-jsa-delete {
  flex: 0 0 auto;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid var(--down, #b91c1c);
  border-radius: 8px;
  background: transparent;
  color: var(--down, #b91c1c);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.home-jsa-delete:active {
  opacity: 0.85;
}

/* Admin tab strip (V3-2 A6) */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin: 4px 0 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.admin-tabs [role="tab"] {
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  padding: 12px 16px;
  min-height: 48px;
  cursor: pointer;
  white-space: nowrap;
}
.admin-tabs [role="tab"][aria-selected="true"] {
  color: var(--fg);
  border-bottom-color: var(--accent);
}

/* In-app notifications strip (V3-2 A9) */
.home-notifs {
  border-left: 3px solid var(--accent);
}
.home-notif {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 48px;
  padding: 8px 0;
  color: inherit;
  text-decoration: none;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 14px;
}
.home-notif:first-of-type {
  border-top: 0;
}

/* Month calendar with JHA dots (V3-2 A10). --other-crew: dots for a colleague's
   JHA on one of my jobs (distinct from BATT_RED = my own crew). */
:root {
  --other-crew: #4da3ff;
}
.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cal-head h2 {
  margin: 0;
  font-size: 16px;
}
.cal-head button {
  min-width: 44px;
  min-height: 44px;
  background: none;
  border: 0;
  color: var(--fg);
  font-size: 22px;
  cursor: pointer;
  border-radius: 10px;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-top: 8px;
}
.cal-dow {
  text-align: center;
  color: var(--muted);
  font-size: 11px;
  padding: 4px 0;
}
.cal-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  background: none;
  border: 0;
  border-radius: 8px;
  color: inherit;
  font: inherit;
  font-size: 14px;
  padding: 2px 0;
}
.cal-cell:not(:disabled) {
  cursor: pointer;
  background: rgba(255, 255, 255, 0.04);
}
.cal-empty {
  visibility: hidden;
}
.cal-dots {
  display: flex;
  gap: 3px;
  margin-top: 2px;
  min-height: 6px;
}
.cal-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.cal-dot-own {
  background: var(--accent);
}
.cal-dot-others {
  background: var(--other-crew);
}

/* Inspection-report banner (V3-4 C3) — informational, not an emergency red */
.home-inspection {
  display: flex;
  align-items: center;
  min-height: 48px;
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
}

/* Per-JHA sync chips + Sync now (V4-D1) */
.sync-chip {
  color: var(--warn);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  margin-right: 8px;
}
.sync-now {
  min-height: 44px;
  padding: 0 14px;
}

/* Flag-and-follow-up (D2): home strip + the shared flags card */
.home-flags {
  border-left: 3px solid var(--warn);
}
.flag-item {
  border-left: 3px solid var(--warn);
  padding: 6px 10px;
  margin: 8px 0;
}
.flag-item.flag-closed {
  border-left-color: var(--ok);
  opacity: 0.75;
}
.flag-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.flag-who {
  font-weight: 600;
}
.flag-tag {
  font-size: 12px;
  white-space: nowrap;
}
.flag-tag-open {
  color: var(--warn);
  font-weight: 700;
}
.flag-tag-closed {
  color: var(--ok);
}
.flag-ref {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.flag-note {
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.flag-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}
.flag-box {
  width: 100%;
  margin-top: 8px;
  min-height: 60px;
  font-size: 16px;
}

/* ==========================================================================
   D4 touch-target audit — additive overrides only. Floor: 44px hit area on
   every tappable; ~2cm (60–64px) on the daily primaries. Same look, bigger
   targets.
   ========================================================================== */
/* Start JHA: the day's primary — ~2cm. The closeout CTA stays visually
   secondary but rides taller too (two-class selector so it wins). */
.home-cta {
  min-height: 64px;
}
.home-cta.home-cta-secondary {
  min-height: 56px;
}
/* Job-folder headers are all-day navigation primaries. */
.home-folder-btn {
  min-height: 60px;
}
.home-crew-btn {
  min-height: 48px;
}
/* Sign in / set-password: the entry primaries — taller, full width. */
#loginSubmit,
#changeSubmit {
  min-height: 56px;
  flex: 1;
}
/* Closeout "Close out the day": end-of-day primary — ~2cm, full width. */
#closeoutForm #submitBtn {
  min-height: 64px;
  flex: 1;
  font-size: 17px;
}
/* Admin gallery Remove sat at 34px — back to the 44px floor. */
.gallery-thumb button {
  min-height: 44px;
}
/* Closeout row-remove ✕ was ~39px wide (padding 0 12px) — square it up. */
.co-remove {
  min-width: 44px;
}
/* Injury Yes/No: bigger radios inside a 44px-tall label (the input is nested
   in the label, so the whole pill toggles it). */
.co-injury-answer {
  min-height: 44px;
  padding: 0 4px;
}
.co-injury-answer input {
  width: 24px;
  height: 24px;
}
/* Admin "Active" checkbox: 26px control inside a 44px-tall label row
   (admin.js nests the input in the label so the text toggles it too). */
.form-checkbox .form-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.form-checkbox input {
  width: 26px;
  height: 26px;
  accent-color: var(--accent);
}

/* ==========================================================================
   D5 dictation hint — passive discoverability line under long prose fields.
   Not a button: no handlers, no audio APIs; the iOS keyboard mic does the
   work. Markup is static in closeout.html and built by dictationHint() in
   builder.js.
   ========================================================================== */
.dictation-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.dictation-mic {
  font-size: 13px;
  line-height: 1;
}

/* Admin Activity tab count cards (D6) */
.activity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.activity-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 12px 14px;
}
.activity-count {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
}
.activity-label {
  color: var(--muted);
  font-size: 13px;
}
.activity-sub {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* Inspection checklist completion UI on the safety page (D7) */
.insp-item {
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.insp-item:first-child {
  border-top: 0;
}
.insp-text {
  font-size: 15px;
  margin-bottom: 6px;
}
.insp-cat {
  color: var(--muted);
  font-size: 12px;
  margin-left: 6px;
}
.insp-choices {
  display: flex;
  gap: 8px;
}
.insp-btn {
  min-height: 44px;
  min-width: 64px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: none;
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.insp-btn-on[data-val="pass"] {
  background: var(--ok);
  border-color: var(--ok);
  color: #08130c;
}
.insp-btn-on[data-val="fail"] {
  background: var(--down);
  border-color: var(--down);
  color: #fff;
}
.insp-btn-on[data-val="na"] {
  background: rgba(255, 255, 255, 0.25);
  border-color: transparent;
}
.insp-note {
  margin-top: 8px;
  width: 100%;
}
.insp-overdue {
  color: var(--warn);
  font-weight: 600;
  white-space: nowrap;
}

/* ==========================================================================
   V5 B7 — "END today's JHA": end-of-day Yes/No questions + drawn sign-off.
   Append-only, namespaced .co-* (closeout.html loads styles.css only —
   builder.css's .seg pair is mirrored here rather than imported).
   ========================================================================== */
.co-seg {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.co-seg-btn {
  flex: 1;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.co-seg-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.co-seg-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.co-q-note {
  margin-top: 10px;
}
/* Drawn foreman sign-off — white pad so the exported PNG prints cleanly. */
.co-sig-canvas {
  display: block;
  width: 100%;
  height: 160px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.16);
  margin: 8px 0;
}
.co-finish-report {
  min-height: 44px;
}

/* ==========================================================================
   V5 B5 — Job File page (/job.html) + home "Open job file" row. APPEND-ONLY.
   Reuses tokens (--accent, --muted, --line) and the home folder classes;
   44px+ touch targets throughout (D4 discipline).
   ========================================================================== */
/* Home: the deep-link row at the top of every expanded job folder. */
.home-jobfile {
  padding-left: 4px;
  padding-right: 4px;
  font-weight: 600;
  color: var(--accent-text);
}
/* Job file: header + folder cards. */
.jf-header h2 {
  margin: 0 0 4px;
  font-size: 20px;
}
.jf-header-actions {
  margin-top: 10px;
}
/* Primary CTA links (Create New JHA / Resume) — anchor styled as a button. */
.jf-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}
.jf-cta.jf-cta-secondary {
  background: transparent;
  border: 1px solid var(--line, #2a2f37);
  color: inherit;
  font-weight: 600;
}
/* Folder cards: the collapsible header IS the card row (48px+ via
   .home-folder-btn); tighten the card padding around it. */
.jf-folder.card {
  padding: 4px 6px;
}
.jf-crew .jf-crew-body {
  padding: 0 0 6px 10px;
}
/* Non-link list items (daily-log rows) mirror .home-jsa-link's box. */
.jf-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 44px;
  padding: 4px 0;
}
/* Custom-folder notes render as text blocks, not links. */
.jf-note {
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.jf-note-text {
  margin: 2px 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.jf-doclist,
.jf-customs {
  padding-left: 0;
}
.jf-customs-btn {
  min-height: 48px;
}
.jf-file {
  display: block;
  margin-top: 10px;
}
.jf-file span {
  display: block;
  color: var(--muted);
  font-size: 13px;
  margin-bottom: 4px;
}
/* Header buttons on job.html (builder.css is not loaded here): give the
   back/logout controls a full 44px touch box, pm-page style. */
body.job .btn-back,
body.job .btn-secondary {
  min-height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 1px solid var(--line, #2a2f37);
  border-radius: 10px;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* Forms library rows: title left, Open/Print button right */
.form-row-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.form-row-split .form-item-title { flex: 1; }

/* --- Admin: content review (full library, approve/deny per item) ----------- */
.cr-group {
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 4px 10px;
}
.cr-group > summary {
  cursor: pointer;
  font-weight: 700;
  padding: 8px 2px;
}
.cr-task {
  margin: 6px 0 6px 6px;
  border-left: 2px solid rgba(255, 255, 255, 0.12);
  padding-left: 10px;
}
.cr-task > summary {
  cursor: pointer;
  list-style-position: outside;
}
.cr-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.cr-hazard {
  margin: 4px 0 10px 14px;
  padding-left: 10px;
  border-left: 2px solid rgba(255, 255, 255, 0.08);
}
.cr-mitigation {
  margin-left: 14px;
  font-size: 14px;
  color: var(--muted);
}
.cr-mitigation .cr-mtext {
  flex: 1;
  min-width: 200px;
}
.cr-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.cr-actions .form-btn {
  min-height: 30px;
  padding: 2px 10px;
  font-size: 13px;
}
.cr-approve { border-color: var(--ok); }
.cr-deny { border-color: var(--down); }
.cr-tree { font-size: 12px; }
.cr-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 2px 8px;
}
.cr-badge.cr-approved {
  color: var(--ok);
  border-color: var(--ok);
}
.cr-badge.cr-approved.cr-eng-pending {
  border-style: dashed;
  opacity: 0.95;
}
.cr-badge.cr-denied {
  color: var(--down);
  border-color: var(--down);
}
.cr-noref { color: var(--warn); }
.cr-proposed-ref { color: var(--accent-text, #7eb8ff); font-weight: 600; }
.cr-has-ref { color: var(--ok); }