:root {
  color-scheme: light;
  --ink: #1f2a36;
  --muted: #5b6673;
  --line: #d5dae0;
  --bg: #f3f5f7;
  --card: #ffffff;
  --field: #ffffff;
  --paper: #ffffff; /* signature pads stay paper-white in both themes */
  --paper-line: #d5dae0;
  --accent: #1d5fa8;
  --accent-ink: #ffffff;
  --ok: #1c7a3e;
  --warn: #9a5b00;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #e4e8ed;
    --muted: #9aa5b1;
    --line: #36414d;
    --bg: #12171d;
    --card: #1b222a;
    --field: #141a21;
    --accent: #6aa5ea;
    --accent-ink: #0c1622;
    --ok: #5cc98a;
    --warn: #e2a64c;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e4e8ed;
  --muted: #9aa5b1;
  --line: #36414d;
  --bg: #12171d;
  --card: #1b222a;
  --field: #141a21;
  --accent: #6aa5ea;
  --accent-ink: #0c1622;
  --ok: #5cc98a;
  --warn: #e2a64c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--card); border-bottom: 1px solid var(--line);
}
.topbar-logo { width: 56px; height: auto; padding: 2px; border-radius: 8px; background: var(--paper); }
.topbar h1 { margin: 0; font-size: 1.25rem; letter-spacing: 0.02em; }
.topbar p { margin: 0; color: var(--muted); font-size: 0.85rem; }
.topbar-title { flex: 1; }
.lock-btn, .theme-btn {
  font: inherit; font-size: 0.9rem; padding: 8px 14px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--field); color: var(--ink);
}
.theme-btn { display: grid; place-items: center; width: 40px; height: 38px; padding: 0; }
.theme-btn svg { width: 20px; height: 20px; }
[hidden] { display: none !important; }

.lock { max-width: 420px; margin: 40px auto; padding: 0 16px; }
.lock-card button[type=submit] {
  width: 100%; font: inherit; font-weight: 600; padding: 12px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); margin: 6px 0 10px;
}
.remember { display: flex; align-items: center; gap: 8px; margin: 4px 0 10px; }
.remember input { width: 20px; height: 20px; accent-color: var(--accent); }

form { max-width: 1100px; margin: 0 auto; padding: 16px 16px 40px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px 16px; margin-bottom: 14px;
}
.card h2 { margin: 0 0 10px; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.04em; }
.card h2 small, .field small { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted); }

.field { display: block; margin-bottom: 10px; }
.field > span { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 3px; }
input:not([type=checkbox]):not([type=radio]), textarea, select {
  width: 100%; font: inherit; color: inherit; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--field);
}
input:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { resize: vertical; }
select { appearance: auto; min-height: 42px; }

/* ---- Paper-form layout -------------------------------------------- */
/* The report is laid out like the printed form: two pages, inline labels,
   answers written on underlined blanks and ruled lines. */
.sheet {
  --rule: var(--line);
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 32px 24px; margin-bottom: 18px; box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}
@media (max-width: 600px) { .sheet { padding: 18px 16px; } }

.doc-head { margin-bottom: 18px; }
.doc-title {
  margin: 0 0 6px; font-size: 1.4rem; font-weight: 700; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px;
}
.doc-subtitle { margin: 0; font-size: 1.2rem; text-transform: uppercase; }
.sec { margin: 26px 0 10px; font-size: 1.25rem; }
.sec.first { margin-top: 0; }

/* A row of inline label + blank pairs that wraps on narrow screens. */
.line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 46px; }
.sep { color: var(--muted); }
.blank, .t { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.blank.grow { flex: 1 1 260px; min-width: 0; }
.stack { display: block; margin: 8px 0 4px; }

/* Blanks: just an underline, like the paper form. */
.sheet input:not([type=checkbox]):not([type=radio]), .sheet select {
  width: auto; height: 40px; padding: 4px 6px; border: 0; border-bottom: 1.5px solid var(--muted);
  border-radius: 0; background: transparent; color: var(--accent);
}
.sheet .stack > input:not([type=checkbox]) { display: block; width: 100%; margin-top: 2px; }
.sheet .blank.grow input { flex: 1; min-width: 0; }
.sheet .blank.short input { width: 5.5rem; }
.sheet input:focus, .sheet select:focus, .sheet textarea:focus { outline: none; border-bottom-color: var(--accent); }
.sheet input:focus-visible, .sheet select:focus-visible { box-shadow: 0 2px 0 var(--accent); }
.sheet select { min-width: 6.5rem; }

/* Comments and journal are written on ruled lines. */
.sheet textarea.ruled {
  --lh: 26px; /* iPad Safari draws the caret as tall as the line */
  display: block; width: 100%; height: calc(var(--lines) * var(--lh) + 2px);
  padding: 0 6px; border: 0; border-radius: 0; resize: none; line-height: var(--lh);
  color: var(--accent); background: transparent
    linear-gradient(transparent calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px), var(--rule) var(--lh), transparent var(--lh))
    0 0 / 100% var(--lh) local;
}
.sheet textarea.ruled:focus { box-shadow: inset 3px 0 0 var(--accent); }

.box { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.box input { width: 22px; height: 22px; margin: 0; accent-color: var(--accent); }

/* ---- Security rounds: two columns, as on the paper form ----------- */
.zones { display: grid; gap: 22px 36px; }
@media (min-width: 700px) { .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.area { container-type: inline-size; }
.area h3 { margin: 0 0 4px; font-size: 1.02rem; }
.area .sites { font-weight: 700; }
.area h4 { margin: 14px 0 0; font-size: 1rem; }
.facility { margin: 6px 0 4px; }

/* Check point name, then "1: [time] 2: [time]"; the name moves onto the
   same line when the column is wide enough (landscape iPad, desktop). */
.round { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; align-items: center; padding: 2px 0; }
.round-name { grid-column: 1 / -1; padding-top: 6px; }
@container (min-width: 470px) {
  .round { grid-template-columns: 8.6rem minmax(0, 1fr) minmax(0, 1fr); }
  .round-name { grid-column: auto; padding-top: 0; }
}
/* The time drops under a long label ("Block 21:") when the column is narrow. */
.t { min-width: 0; flex-wrap: wrap; white-space: normal; }
.t > span:first-child { color: var(--muted); }
.t.above > span:first-child { flex-basis: 100%; }
.t > .time-wrap { display: flex; gap: 4px; flex: 1 1 7rem; min-width: 0; align-items: center; }
.time-wrap input { flex: 1; min-width: 0; }
.sheet input[type=time] { width: 100%; padding-inline: 2px; }
/* Chrome's clock icon crowds the time; the Now button and typing cover it. */
.sheet input[type=time]::-webkit-calendar-picker-indicator { display: none; }
.now-btn {
  font: inherit; font-size: 0.78rem; height: 32px; padding: 0 7px; border-radius: 16px; cursor: pointer;
  border: 1px solid var(--line); background: var(--field); color: var(--accent);
}

/* ---- End of shift -------------------------------------------------- */
.indent { padding-left: 2rem; }
@media (max-width: 600px) { .indent { padding-left: 0.75rem; } }
.indent > .box { display: flex; }
.turn-in { margin: 4px 0 0; }
.sig { margin-top: 22px; }
.sig > span { display: block; margin-bottom: 6px; }
.sig small { color: var(--muted); }
.now-btn {
  font: inherit; font-size: 0.85rem; padding: 0 10px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: var(--field); color: var(--accent);
}

.hint { font-size: 0.85rem; color: var(--muted); margin: 0 0 10px; }
.hint.ok { color: var(--ok); }
.hint.warn { color: var(--warn); }
.center { text-align: center; }

/* ---- Actions ------------------------------------------------------ */
.actions { display: flex; gap: 12px; justify-content: flex-end; position: sticky; bottom: 0;
  padding: 12px 0; background: linear-gradient(transparent, var(--bg) 30%); }
.actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
.pdf-result { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 10px; }
.pdf-result[hidden], .pdf-result [hidden] { display: none; }
.actions button, .pdf-result button, .button {
  font: inherit; font-weight: 600; padding: 12px 20px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
}
.actions button.secondary, .button.secondary { background: var(--field); color: var(--accent); }
.stale .pdf-action { opacity: 0.6; }
.button { display: inline-block; text-decoration: none; }

/* ---- Signature pad ------------------------------------------------ */
.sig-pad {
  display: block; width: 100%; height: 130px; touch-action: none; cursor: crosshair;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper) linear-gradient(transparent 74%, var(--paper-line) 74%, var(--paper-line) calc(74% + 1px), transparent calc(74% + 1px));
}
.link-btn {
  font: inherit; font-size: 0.85rem; padding: 6px 0; border: 0; background: none;
  color: var(--accent); cursor: pointer; text-decoration: underline;
}