/* BATTAG JHA Builder — B2 builder flow styles.
   Loaded AFTER /styles.css (shared tokens: --bg, --surface, --fg, --muted,
   --accent, --ok, --warn, --down, --radius). iOS-first: inputs >=16px (no
   focus zoom), 44px touch targets, safe-area padding, one-thumb bottom bar.
   Scales up to iPad/laptop via max-width columns. */

body.builder {
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}

/* --- Chrome ---------------------------------------------------------------- */

.b-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.b-header h1 {
  font-size: 17px;
  margin: 0;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btn-back {
  min-width: 44px;
  min-height: 44px;
  background: transparent;
  color: var(--accent-text);
  font-size: 16px;
  font-weight: 600;
  border: 0;
  padding: 0 8px;
}
.chip.ok { color: var(--ok); }
.chip.warn { color: var(--warn); }
#syncChip {
  font-size: 12px;
  font-weight: 700;
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 10px;
}

.dots {
  display: flex;
  gap: 5px;
  justify-content: center;
  padding: 8px 0 0;
}
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.dot.done { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.dot.on { background: var(--accent); }

.banner {
  margin: 10px 16px 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  color: var(--fg);
  font-size: 14px;
}

.b-main {
  max-width: 640px;
  margin: 0 auto;
  padding: 12px 16px 24px;
}

/* Sticky bottom action bar — primary CTA in thumb reach. */
.bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bottom-bar > * {
  flex: 1;
}
.btn-primary {
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
}
.btn-primary:disabled {
  opacity: 0.45;
}
.btn-secondary {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  background: var(--surface);
  color: var(--fg);
  font-size: 16px;
  font-weight: 600;
}
.btn-mini {
  min-height: 44px;
  min-width: 64px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}
a.btn-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  text-decoration: none;
  font-size: 15px;
}
.btn-secondary.wide { width: 100%; margin-top: 8px; }

/* --- Shared bits ----------------------------------------------------------- */

.hint {
  color: var(--muted);
  font-size: 14px;
  margin: 8px 2px 12px;
}
.hint.ok { color: var(--ok); }
.hint.warn { color: var(--warn); }
.meta {
  color: var(--muted);
  font-size: 13px;
  margin: 2px 0 8px;
}
.meta.small { font-size: 12px; }
h4 {
  font-size: 14px;
  margin: 16px 0 6px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ti {
  width: 100%;
  min-height: 44px;
  font-size: 16px; /* prevents iOS focus zoom */
  color: var(--fg);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0 12px;
}
.ti.wide { margin: 6px 0; }
.fld {
  display: block;
  margin: 10px 0;
}
.fld span {
  display: block;
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 4px;
}
.add-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.add-row .ti { flex: 1; }

.actions {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.actions > button { flex: 1; min-width: 140px; }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--fg);
}
.chip-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}
button.chip { min-height: 40px; }
.chip.permit {
  background: color-mix(in srgb, var(--down) 22%, transparent);
  border-color: color-mix(in srgb, var(--down) 45%, transparent);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 8px;
}
.chip.risk-low { border-color: var(--ok); color: var(--ok); }
.chip.risk-medium { border-color: var(--warn); color: var(--warn); }
.chip.risk-high { border-color: var(--down); color: var(--down); font-weight: 700; }
.chip.risk-none { color: var(--muted); }
.chip.ctrl { color: var(--muted); }
.chip.ppe { background: rgba(255, 255, 255, 0.05); }
/* Library defaults — not interactive on morning Confirm hazards */
.chip.chip-readonly {
  cursor: default;
  opacity: 0.88;
  pointer-events: none;
  font-size: 12px;
  padding: 4px 10px;
  min-height: 0;
}
.hz-chips-meta {
  opacity: 0.9;
}
.hz-mits > summary {
  cursor: pointer;
  font-weight: 600;
  padding: 6px 0;
}
.task-other-trades {
  opacity: 0.75;
  font-size: 13px;
}

/* GC: associated other-trade library (task → hazard → mitigations) */
.gc-assoc-browser { margin-top: 12px; }
.gc-assoc-head h3 { margin-bottom: 4px; }
.gc-trade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}
.gc-assoc-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.gc-assoc-task {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 4px 10px 8px;
  background: rgba(255, 255, 255, 0.03);
}
.gc-assoc-task.on { border-color: var(--accent); }
.gc-assoc-task > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  font-weight: 600;
}
.gc-assoc-task > summary::-webkit-details-marker { display: none; }
.gc-assoc-task-title { font-size: 15px; }
.gc-assoc-body { padding: 4px 0 8px; }
.gc-assoc-hz {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 8px 0;
}
.gc-assoc-hz-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.gc-assoc-mits {
  margin: 0;
  padding-left: 1.2em;
  font-size: 13px;
  color: var(--muted);
}
.gc-assoc-mits li { margin: 2px 0; }
.task-row.other-trade { border-style: dashed; }

.x {
  min-width: 36px;
  min-height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 0;
}
.x.edit { font-size: 14px; }

.custom { font-style: italic; }
.custom::after {
  content: " •";
  color: var(--accent-text);
}

/* --- Job screen ------------------------------------------------------------ */

.job-card h3 { margin-bottom: 2px; }

/* --- Division picker ------------------------------------------------------- */

.pick {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 14px;
  text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--fg);
  font: inherit;
  min-height: 64px;
}
.pick.on { border-color: var(--accent); }
.pick-code {
  flex: 0 0 auto;
  font-weight: 800;
  font-size: 15px;
  color: var(--accent-text);
  min-width: 44px;
}
.pick-body { display: flex; flex-direction: column; gap: 2px; }
.pick-body b { font-size: 16px; }
.pick-body small { color: var(--muted); }

/* --- GC gate --------------------------------------------------------------- */

.seg {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.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;
}
.seg-btn.on {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --- Day-type packs + task picker ------------------------------------------ */

.section-label {
  margin: 14px 0 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.pack-list { margin: 4px 0 12px; }
/* C6: trade header rows inside the pack list / task list (GC + other-trades) */
.trade-head {
  margin: 16px 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 3px;
}
.pack-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 2px 12px;
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  color: var(--fg);
  font: inherit;
  min-height: 64px;
  padding: 12px 14px;
  margin-bottom: 8px;
}
.pack-card b {
  grid-column: 1;
  grid-row: 1;
  font-size: 16px;
}
.pack-card small {
  grid-column: 1;
  grid-row: 2;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.3;
}
.pack-card .pack-count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
}
.pack-card.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}
.pack-card.on .pack-count {
  background: var(--accent);
  color: #fff;
}

.task-list { margin: 10px 0; }
.task-row {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  text-align: left;
  background: var(--surface);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  color: var(--fg);
  font: inherit;
  min-height: 56px;
  padding: 8px 12px;
  margin-bottom: 8px;
}
.task-row.on { border-color: var(--accent); }
.task-row.pack-fit.on { border-color: color-mix(in srgb, var(--accent) 70%, var(--ok)); }
.chip.chip-sup {
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  font-weight: 600;
}
.tick {
  flex: 0 0 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
}
.task-row.on .tick {
  background: var(--accent);
  border-color: var(--accent);
}
.task-row-body { display: flex; flex-direction: column; gap: 2px; }
.task-row-body small { color: var(--muted); }

/* --- Confirm screen -------------------------------------------------------- */

.task-card { padding: 12px; }
.task-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.task-head h3 { flex: 1; margin: 0; font-size: 16px; }

.hz-row {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 10px 0;
}
.hz-row.off { opacity: 0.45; }
.hz-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.hz-cb {
  width: 24px;
  height: 24px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.hz-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.hz-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0 34px;
}
.hz-row details {
  margin: 8px 0 0 34px;
}
.hz-row summary {
  color: var(--muted);
  font-size: 14px;
  min-height: 32px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.hz-row summary.warn-empty { color: var(--warn); font-weight: 700; }
.mit-list { padding: 4px 0 0; }
.mit-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
}
.mit-row input[type="checkbox"] {
  width: 22px;
  height: 22px;
  margin-top: 1px;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.mit-text {
  flex: 1;
  font-size: 14px;
  line-height: 1.4;
}

/* --- Read-off -------------------------------------------------------------- */

.readoff-host {
  background: #fff;
  border-radius: 12px;
  overflow-x: auto;
  margin-bottom: 14px;
}

.permit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  padding: 10px 0;
}
.permit-name { flex: 1; }
.permit-row .seg { flex: 0 0 150px; margin-top: 0; }

/* --- Sign & submit step ----------------------------------------------------- */

.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;
}
.sig-block { margin-top: 10px; }
.sig-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 6px;
}
.sign-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.sign-ok {
  color: var(--ok);
  font-weight: 600;
}
/* V2-1d: sign-out control next to "Signed ✓" + the amendments card */
.sign-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.sign-out-ok {
  color: var(--muted);
  font-weight: 600;
}
.amend-box {
  width: 100%;
  min-height: 64px;
  resize: vertical;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: #0f1216;
  color: var(--fg);
}
.amend-item {
  border-left: 3px solid var(--accent);
  padding: 4px 10px;
  margin: 8px 0;
}
.amend-item p {
  margin: 0 0 2px;
}

/* D3: Daily Log opt-in row on the export card */
label.export-daily-log {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 4px;
  color: var(--muted);
  font-size: 14px;
  min-height: 44px;
}
label.export-daily-log input {
  width: 22px;
  height: 22px;
  min-height: 0;
  flex: none;
  accent-color: var(--accent);
}

/* --- Wider screens (iPad / laptop) ----------------------------------------- */

@media (min-width: 760px) {
  .b-main { max-width: 720px; }
  .bottom-bar {
    max-width: 720px;
    margin: 0 auto;
    border-radius: 14px 14px 0 0;
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* ==========================================================================
   D4 touch-target audit — additive overrides only (see styles.css block).
   ========================================================================== */
/* Bottom-bar primaries (Submit JHA, End shift — export PDF, step CTAs): ~2cm.
   Secondaries in the same bar stretch to match (default flex align). */
.bottom-bar .btn-primary {
  min-height: 64px;
}
/* Taller bar → keep scrolled content clear of it. */
body.builder {
  padding-bottom: calc(112px + env(safe-area-inset-bottom));
}
/* The sync chip is tappable (V4-D1 Sync now) — 44px floor. */
#syncChip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
}
/* × / ✎ mini-affordances: 36px visible circle in a 44px hit box — the
   transparent border is part of the tap target (background-clip keeps the
   circle at 36px) and -4px margins keep the layout unchanged. */
.x {
  min-width: 44px;
  min-height: 44px;
  border: 4px solid transparent;
  background-clip: padding-box;
  margin: -4px;
}
/* Tappable chips (risk/control cycling) join the 44px floor. */
button.chip {
  min-height: 44px;
}
/* Confirm hazards — hierarchy of controls legend (labels match Control chips) */
.control-legend h3 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 800;
}
.control-legend-list {
  list-style: none;
  margin: 10px 0 6px;
  padding: 0;
  counter-reset: none;
}
.control-legend-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-left: 5px solid #999;
  background: var(--surface-2, #f4f6f8);
  border-radius: 0 8px 8px 0;
}
.control-legend-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.control-legend-rank {
  font-size: 12px;
  font-weight: 800;
  color: #111;
  min-width: 1.75rem;
}
.control-legend-chip {
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid currentColor;
  background: #fff;
}
.control-legend-where {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #333;
}
.control-legend-means {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.35;
}
.control-legend-example {
  font-size: 13px;
  color: var(--muted, #555);
  line-height: 1.35;
}
.control-legend-item.ctrl-elimination {
  border-left-color: #14532d;
}
.control-legend-item.ctrl-elimination .control-legend-chip {
  color: #14532d;
}
.control-legend-item.ctrl-substitution {
  border-left-color: #166534;
}
.control-legend-item.ctrl-substitution .control-legend-chip {
  color: #166534;
}
.control-legend-item.ctrl-engineering {
  border-left-color: #1d4ed8;
}
.control-legend-item.ctrl-engineering .control-legend-chip {
  color: #1d4ed8;
}
.control-legend-item.ctrl-administrative {
  border-left-color: #a16207;
}
.control-legend-item.ctrl-administrative .control-legend-chip {
  color: #a16207;
}
.control-legend-item.ctrl-ppe {
  border-left-color: #9a3412;
}
.control-legend-item.ctrl-ppe .control-legend-chip {
  color: #9a3412;
}
button.chip.ctrl-elimination { border-color: #14532d; color: #14532d; }
button.chip.ctrl-substitution { border-color: #166534; color: #166534; }
button.chip.ctrl-engineering { border-color: #1d4ed8; color: #1d4ed8; }
button.chip.ctrl-administrative { border-color: #a16207; color: #a16207; }
button.chip.ctrl-ppe { border-color: #9a3412; color: #9a3412; }

/* Corner bubble after first 5 JHAs (or when tip is dismissed) */
.control-legend-fab {
  position: fixed;
  right: 12px;
  bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  z-index: 40;
  min-height: 48px;
  min-width: 48px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 2px solid #1d4ed8;
  background: #1d4ed8;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}
.control-legend-fab:active {
  transform: scale(0.98);
}
.control-legend-tip {
  border: 2px solid #1d4ed8;
}
.control-legend-panel {
  border: 2px solid #1d4ed8;
}
/* Mitigations expander row. */
.hz-row summary {
  min-height: 44px;
}
/* Hazard/mitigation checkboxes: bigger controls, centered rows, 44px-tall
   labels (control + label are one hit area via for=/id). */
.hz-head {
  align-items: center;
}
.hz-cb {
  width: 28px;
  height: 28px;
  margin-top: 0;
}
.hz-title {
  min-height: 44px;
}
.hz-chips,
.hz-row details {
  margin-left: 38px; /* track the 28px checkbox + 10px gap */
}
.mit-row {
  align-items: center;
}
.mit-row input[type="checkbox"] {
  width: 26px;
  height: 26px;
  margin-top: 0;
}
.mit-text {
  display: flex;
  align-items: center;
  min-height: 44px;
}
/* "Save signature" / "Save sign-in": the Sign primaries — ~2cm. */
.btn-sign-save {
  min-height: 60px;
  flex: 1;
  font-size: 17px;
}