/* USGSL — US Glass field forms.
   Tokens ported verbatim from the design system's tokens/*.css. Colour means
   status here, never decoration: green pass, amber caution, red fail, blue
   informational or selected. Dark is the default; light activates on
   [data-theme="light"] and both are complete. */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg-0:#0a0d12; --bg-1:#0f141b; --bg-2:#141a23; --bg-3:#1a212c; --bg-inset:#0c1016;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --tx-hi:#eef2f8; --tx-mid:#98a3b3; --tx-lo:#5b6573;
  --accent:#3b82f6; --accent-deep:#2563eb;
  --accent-soft:rgba(59,130,246,.14); --accent-line:rgba(59,130,246,.40);
  --good:#34d27b; --good-soft:rgba(52,210,123,.13); --good-line:rgba(52,210,123,.38);
  --warn:#f5b133; --warn-soft:rgba(245,177,51,.13); --warn-line:rgba(245,177,51,.40);
  --crit:#fb5b5b; --crit-soft:rgba(251,91,91,.13);  --crit-line:rgba(251,91,91,.42);
  --shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 8px 24px -12px rgba(0,0,0,.7);

  --radius-chip:4px; --radius-sm:6px; --radius-md:8px; --radius-btn:9px;
  --radius-inset:11px; --radius-card:14px; --radius-pill:999px;
  --transition:.14s ease;

  --font-ui:'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-num:'Space Grotesk', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

[data-theme="light"] {
  --bg-0:#eef0f4; --bg-1:#f7f8fa; --bg-2:#ffffff; --bg-3:#f1f3f7; --bg-inset:#f4f6f9;
  --line:rgba(15,23,42,.09); --line-2:rgba(15,23,42,.16);
  --tx-hi:#0d1521; --tx-mid:#586374; --tx-lo:#8a93a3;
  --accent:#2563eb; --accent-deep:#1d4ed8;
  --accent-soft:rgba(37,99,235,.10); --accent-line:rgba(37,99,235,.32);
  --good:#15a35b; --good-soft:rgba(21,163,91,.10); --good-line:rgba(21,163,91,.34);
  --warn:#c87f0a; --warn-soft:rgba(200,127,10,.11); --warn-line:rgba(200,127,10,.34);
  --crit:#dc3a3a; --crit-soft:rgba(220,58,58,.09);  --crit-line:rgba(220,58,58,.34);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 26px -16px rgba(15,23,42,.28);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0; background: var(--bg-0); color: var(--tx-mid);
  font-family: var(--font-ui); font-size: 15px; line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}
h1, h2, h3 { color: var(--tx-hi); font-weight: 600; margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--tx-hi); }

.eyebrow {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--tx-lo);
}

/* ---------- chrome ---------- */

.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 12px 20px; background: var(--bg-1);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20;
}
.topbar .brand { display: flex; align-items: center; gap: 10px; color: var(--tx-hi);
                 font-weight: 700; letter-spacing: -.01em; }
.topbar .brand img { height: 22px; width: auto; }
.topbar nav { display: flex; gap: 4px; margin-left: 8px; }
.topbar nav a {
  padding: 6px 12px; border-radius: var(--radius-btn); color: var(--tx-mid);
  font-size: 14px; transition: background var(--transition), color var(--transition);
}
.topbar nav a:hover { background: var(--bg-3); color: var(--tx-hi); }
.topbar nav a[aria-current] { background: var(--accent-soft); color: var(--accent);
                              box-shadow: inset 0 0 0 1px var(--accent-line); }
.topbar .spacer { flex: 1; }
.topbar .who { font-size: 13px; color: var(--tx-lo); }

.wrap { max-width: 1120px; margin: 0 auto; padding: 24px 20px 64px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.page-head .spacer { flex: 1; }

/* ---------- controls ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 16px; border-radius: var(--radius-btn);
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--tx-hi);
  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.btn:hover { background: var(--bg-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-deep); }
.btn.ghost { background: transparent; }
.btn:disabled { opacity: .5; cursor: not-allowed; }

input[type=text], input[type=email], input[type=password], input[type=date],
input[type=search], textarea, select {
  width: 100%; padding: 9px 11px; background: var(--bg-inset);
  border: 1px solid var(--line-2); border-radius: var(--radius-md);
  color: var(--tx-hi); font: inherit; font-size: 14px;
  transition: border-color var(--transition);
}
input::placeholder, textarea::placeholder { color: var(--tx-lo); opacity: 1; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
label.fl { display: block; font-size: 13px; color: var(--tx-mid); margin-bottom: 6px; }
label.fl .req { color: var(--crit); }

.card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius-card); box-shadow: var(--shadow);
}

.flash { padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: 16px;
         font-size: 14px; }
.flash.error { background: var(--crit-soft); border: 1px solid var(--crit-line); color: var(--crit); }
.flash.ok    { background: var(--good-soft); border: 1px solid var(--good-line); color: var(--good); }

.empty { padding: 40px 20px; text-align: center; color: var(--tx-lo); }

/* ---------- login ---------- */

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 380px; padding: 28px; }
.login-card img.mark { height: 34px; margin-bottom: 20px; }
.login-card h1 { font-size: 20px; margin-bottom: 4px; }
.login-card p.sub { font-size: 14px; margin: 0 0 22px; }
.login-card .field { margin-bottom: 14px; }
.login-card .btn { width: 100%; margin-top: 6px; }

/* ---------- form browser ---------- */

.browse { display: grid; grid-template-columns: 210px 1fr; gap: 24px; align-items: start; }
.rail { position: sticky; top: 78px; display: grid; gap: 2px; }
.rail a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 12px; border-radius: var(--radius-md); color: var(--tx-mid);
  font-size: 14px; transition: background var(--transition), color var(--transition);
}
.rail a:hover { background: var(--bg-2); color: var(--tx-hi); }
.rail a[aria-current] { background: var(--accent-soft); color: var(--accent); }
.rail a .n { font-family: var(--font-num); font-size: 12px; color: var(--tx-lo); }
.rail a[aria-current] .n { color: var(--accent); }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.fcard { padding: 16px; display: flex; flex-direction: column; gap: 8px;
         transition: border-color var(--transition), background var(--transition); }
.fcard:hover { background: var(--bg-3); border-color: var(--line-2); }
.fcard h3 { font-size: 15px; line-height: 1.35; }
.fcard .code { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx-lo); }
.fcard .row { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; }
.fcard .n { font-family: var(--font-num); font-size: 12px; color: var(--tx-lo); }

.tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
       text-transform: uppercase; padding: 3px 7px; border-radius: var(--radius-chip);
       background: var(--bg-inset); color: var(--tx-lo); border: 1px solid var(--line); }
.tag.field_qc { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
.tag.safety   { background: var(--warn-soft);   color: var(--warn);   border-color: var(--warn-line); }
.tag.soon     { background: var(--bg-inset); color: var(--tx-lo); }

/* ---------- the form ---------- */

.formhead { padding: 18px 20px; margin-bottom: 16px; }
.formhead h1 { font-size: 21px; }
.formhead .note { font-size: 14px; line-height: 1.55; margin: 10px 0 0;
                  color: var(--tx-mid); border-left: 2px solid var(--accent-line);
                  padding-left: 12px; }
.formhead .code { font-family: var(--font-mono); font-size: 10.5px; color: var(--tx-lo);
                  margin-top: 10px; }

.hdrgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
           gap: 14px; padding: 18px 20px; margin-bottom: 16px; }

.section-title { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; }
.section-title h2 { font-size: 15px; }
.section-title .hint { font-size: 12.5px; color: var(--tx-lo); }

.items { display: grid; gap: 1px; background: var(--line); overflow: hidden;
         border-radius: var(--radius-card); border: 1px solid var(--line); }
.item { background: var(--bg-2); padding: 12px 16px; display: grid;
        grid-template-columns: 1fr auto; gap: 10px 16px; align-items: center; }
.item .lbl { color: var(--tx-hi); font-size: 14.5px; }
.item .cmt { grid-column: 1 / -1; }
.item .cmt input { background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
                   border-radius: 0; padding: 5px 2px; font-size: 13.5px; }
.item .cmt input:focus { border-bottom-color: var(--accent); }
.item.answered-no { background: var(--crit-soft); }
.item.answered-na { background: var(--bg-1); }

/* Tri-state: big targets, because this is filled with gloves on a tablet. */
.tri { display: inline-flex; gap: 4px; padding: 3px; background: var(--bg-inset);
       border: 1px solid var(--line); border-radius: var(--radius-pill); }
.tri label { position: relative; }
.tri input { position: absolute; opacity: 0; width: 0; height: 0; }
.tri span {
  display: block; min-width: 52px; padding: 8px 12px; text-align: center;
  border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
  color: var(--tx-mid); cursor: pointer; user-select: none;
  transition: background var(--transition), color var(--transition);
}
.tri span:hover { color: var(--tx-hi); }
.tri input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tri input[value=yes]:checked + span { background: var(--good-soft); color: var(--good);
                                       box-shadow: inset 0 0 0 1px var(--good-line); }
.tri input[value=no]:checked  + span { background: var(--crit-soft); color: var(--crit);
                                       box-shadow: inset 0 0 0 1px var(--crit-line); }
.tri input[value=na]:checked  + span { background: var(--bg-3); color: var(--tx-mid);
                                       box-shadow: inset 0 0 0 1px var(--line-2); }

.decision { padding: 18px 20px; margin-top: 16px; }
.decision .choices { display: flex; gap: 10px; margin: 10px 0 18px; flex-wrap: wrap; }
.decision .choices label { position: relative; }
.decision .choices input { position: absolute; opacity: 0; width: 0; height: 0; }
.decision .choices span {
  display: block; padding: 10px 20px; border-radius: var(--radius-btn);
  border: 1px solid var(--line-2); background: var(--bg-inset);
  font-size: 14px; font-weight: 600; color: var(--tx-mid); cursor: pointer;
  transition: all var(--transition);
}
.decision .choices input[value=accepted]:checked + span {
  background: var(--good-soft); color: var(--good); border-color: var(--good-line); }
.decision .choices input[value=rejected]:checked + span {
  background: var(--crit-soft); color: var(--crit); border-color: var(--crit-line); }
.decision .choices input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- signature ---------- */

.sig { padding: 18px 20px; margin-top: 16px; }
.sig .pad {
  position: relative; margin-top: 10px; background: var(--bg-inset);
  border: 1px dashed var(--line-2); border-radius: var(--radius-inset);
  height: 170px; overflow: hidden;
}
.sig .pad canvas { display: block; width: 100%; height: 100%; touch-action: none;
                   cursor: crosshair; }
.sig .pad .hint { position: absolute; inset: 0; display: grid; place-items: center;
                  pointer-events: none; color: var(--tx-lo); font-size: 13.5px; }
.sig .pad.inked .hint { display: none; }
.sig .pad .baseline { position: absolute; left: 24px; right: 24px; bottom: 34px;
                      border-bottom: 1px solid var(--line-2); pointer-events: none; }
.sig .bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.sig .bar .spacer { flex: 1; }

/* ---------- submit bar ---------- */

.submitbar {
  position: sticky; bottom: 0; margin-top: 20px; padding: 14px 20px;
  background: var(--bg-1); border: 1px solid var(--line);
  border-radius: var(--radius-card); display: flex; align-items: center; gap: 14px;
  box-shadow: var(--shadow);
}
.submitbar .spacer { flex: 1; }
.submitbar .status { font-size: 13px; color: var(--tx-lo); font-family: var(--font-mono);
                     font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.submitbar .status.saving { color: var(--accent); }
.submitbar .status.saved  { color: var(--good); }
.submitbar .status.failed { color: var(--crit); }

/* ---------- lists ---------- */

table.rows { width: 100%; border-collapse: collapse; font-size: 14px; }
table.rows th { text-align: left; font-family: var(--font-mono); font-size: 10px;
                letter-spacing: .1em; text-transform: uppercase; color: var(--tx-lo);
                padding: 10px 14px; background: var(--bg-inset);
                border-bottom: 1px solid var(--line); }
table.rows td { padding: 12px 14px; border-bottom: 1px solid var(--line);
                color: var(--tx-mid); }
table.rows tr:last-child td { border-bottom: 0; }
table.rows tr:hover td { background: var(--bg-3); }
table.rows td.name { color: var(--tx-hi); font-weight: 500; }
table.rows td.when { font-family: var(--font-mono); font-size: 11.5px; color: var(--tx-lo);
                     white-space: nowrap; }

/* ---------- read-only submission ---------- */

.pdfframe { width: 100%; height: 78vh; border: 1px solid var(--line);
            border-radius: var(--radius-card); background: var(--bg-2); }

/* ---------- phone ---------- */

@media (max-width: 760px) {
  .browse { grid-template-columns: 1fr; }
  .rail { position: static; grid-auto-flow: column; overflow-x: auto;
          padding-bottom: 4px; }
  .rail a { white-space: nowrap; }
  .item { grid-template-columns: 1fr; }
  .item .tri { justify-self: stretch; }
  .item .tri label { flex: 1; }
  .item .tri span { min-width: 0; padding: 12px 8px; }
  .topbar nav a { padding: 6px 9px; }
  .wrap { padding: 16px 14px 64px; }
}

/* ---------- grouped items, write-ins, registers ---------- */

.group-head { display: flex; align-items: center; gap: 12px;
              margin: 18px 0 8px; }
.group-head h3 { font-size: 13px; color: var(--tx-mid); font-weight: 600;
                 letter-spacing: .01em; }
.group-head:first-of-type { margin-top: 10px; }

/* A write-in row's label is data: the paper printed a blank line here. */
.item .writein { background: transparent; border: 0;
                 border-bottom: 1px solid var(--line-2); border-radius: 0;
                 padding: 5px 2px; font-size: 14.5px; color: var(--tx-hi); }
.item .writein:focus { border-bottom-color: var(--accent); }

.regwrap { overflow-x: auto; }
table.register { width: 100%; border-collapse: collapse; font-size: 14px;
                 min-width: 520px; }
table.register th { text-align: left; font-family: var(--font-mono); font-size: 10px;
                    letter-spacing: .1em; text-transform: uppercase; color: var(--tx-lo);
                    padding: 10px 12px; background: var(--bg-inset);
                    border-bottom: 1px solid var(--line); white-space: nowrap; }
table.register td { padding: 0; border-bottom: 1px solid var(--line);
                    border-right: 1px solid var(--line); }
table.register td:last-child { border-right: 0; }
table.register tr:last-child td { border-bottom: 0; }
table.register input { background: transparent; border: 0; border-radius: 0;
                       padding: 11px 12px; font-size: 14px; }
table.register input:focus { background: var(--accent-soft); }

.hdrgrid .wide { grid-column: 1 / -1; }
.bodyfields textarea { min-height: 110px; }

.sigfields { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
             gap: 12px; margin-top: 12px; }

.card.sig .eyebrow { margin-top: 2px; }

/* ---------- Family A numbering and inline blanks ---------- */

.group-head .n { color: var(--tx-lo); font-family: var(--font-num); }
.item .lbl .ltr { color: var(--tx-lo); font-family: var(--font-num);
                  margin-right: 2px; }

/* The paper prints a blank line after the question; keep it reading as one
   sentence rather than becoming a separate field. */
.item .inline-write {
  display: inline-block; width: auto; min-width: 200px; max-width: 100%;
  background: transparent; border: 0; border-bottom: 1px solid var(--line-2);
  border-radius: 0; padding: 2px 4px; margin-left: 8px;
  font-size: 14px; color: var(--tx-hi);
}
.item .inline-write:focus { border-bottom-color: var(--accent); }

@media (max-width: 760px) {
  .item .inline-write { display: block; margin: 8px 0 0; width: 100%; }
}

/* ---------- agenda steps, pick lists, attendance ---------- */

.items.steps .item { grid-template-columns: 1fr auto; align-items: center; }
.item.step .lbl .n { color: var(--tx-lo); font-family: var(--font-num);
                     margin-right: 4px; }
.item.step.sub .lbl { padding-left: 22px; }
/* A step that only heads its sub-items takes no initial on the paper. */
.item.step.heading { background: var(--bg-1); }
.item.step.heading .lbl { color: var(--tx-mid); font-weight: 600; }

.tick { position: relative; display: inline-flex; }
.tick input { position: absolute; opacity: 0; width: 0; height: 0; }
.tick span {
  display: block; padding: 9px 16px; border-radius: var(--radius-pill);
  background: var(--bg-inset); border: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--tx-lo);
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.tick span:hover { color: var(--tx-hi); }
.tick input:checked + span { background: var(--good-soft); color: var(--good);
                             box-shadow: inset 0 0 0 1px var(--good-line); }
.tick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.tick.inline span { padding: 6px 12px; font-size: 12px; }

.picklist { padding: 14px 16px; display: grid;
            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px; }
.pick { position: relative; }
.pick input { position: absolute; opacity: 0; width: 0; height: 0; }
.pick span { display: block; padding: 9px 12px; border-radius: var(--radius-md);
             font-size: 14px; color: var(--tx-mid); cursor: pointer;
             transition: background var(--transition), color var(--transition); }
.pick span:hover { background: var(--bg-3); color: var(--tx-hi); }
.pick input:checked + span { background: var(--accent-soft); color: var(--accent);
                             box-shadow: inset 0 0 0 1px var(--accent-line); }
.pick input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.fixedrole { display: block; padding: 11px 12px; font-size: 14px;
             color: var(--tx-hi); font-weight: 500; }

/* ---------- notes and choice fields ---------- */

.fnote { font-size: 12px; color: var(--tx-lo); margin: -2px 0 6px; font-style: italic; }
.tri.choice { margin-top: 2px; }
.tri.choice input[value="Yes"]:checked + span { background: var(--good-soft);
  color: var(--good); box-shadow: inset 0 0 0 1px var(--good-line); }
.tri.choice input[value="No"]:checked + span { background: var(--crit-soft);
  color: var(--crit); box-shadow: inset 0 0 0 1px var(--crit-line); }