/* T4GC design system — SMA Builders (BRAND-SMA.md; board C234 approved, Erik
   taste word fact 3579439). Client brand governs: #2B5797 / #1B3A5C / #4A90C4.
   Field rules: thumb-first, sunlight contrast, 44px tap targets (gloved hands),
   nothing under 13px, visible focus everywhere. Amber Sign dock KEPT by ruling:
   the signature action on a legal artifact earns the palette break. */

:root{
  --blue:#2B5797; --navy:#1B3A5C; --steel:#4A90C4;
  --ink:#14181D; --paper:#FFFFFF; --site:#F2F5F9; --line:#DFE6EE;
  --mute:#5B6B7C;                 /* 4.9:1 on white — AA at all sizes */
  --ok:#176B42; --ok-bg:#E7F4EC;   /* 5.5:1 on ok-bg — AA at 13px bold (axe caught 4.41 at #1E7F4F) */
  --miss:#C0392B; --miss-bg:#FBEAE7;
  --warn-bg:#FFF4DC; --warn-ink:#7A5600;
  --sign:#FFB020; --sign-ink:#231A05;   /* amber dock: 10.9:1 ink-on-amber */
  --tint:#EDF3FA; --paper-tint:#FAFCFE;
  --radius:14px; --radius-s:9px;
  --shadow:0 1px 2px rgba(20,24,29,.06),0 4px 16px rgba(27,58,92,.08);
  --display:"Avenir Next Condensed","Avenir Next",-apple-system,"Helvetica Neue",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",sans-serif;
  --fs-xs:13px; --fs-s:14px; --fs-m:16px; --fs-l:19px; --fs-xl:24px; --fs-stat:34px;
  --tap:44px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--body);font-size:var(--fs-m);color:var(--ink);background:var(--site);
     line-height:1.45;-webkit-font-smoothing:antialiased;min-height:100vh}
img{display:block;max-width:100%}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--steel);outline-offset:2px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:99;border-radius:0 0 8px 0}
.skip:focus{left:0}

/* ── shell ─────────────────────────────────────────────────────────── */
.topbar{background:var(--navy);color:#fff;
  display:flex;align-items:center;gap:14px;padding:14px 18px;position:sticky;top:0;z-index:20}
.topbar .logo{width:40px;height:40px;border-radius:9px;background:#fff;padding:4px;flex:0 0 auto}
.topbar .who{min-width:0}
.topbar .who b{font-family:var(--display);font-size:var(--fs-l);letter-spacing:.03em;display:block;white-space:nowrap}
.topbar .who span{font-size:var(--fs-xs);color:rgba(255,255,255,.93)}
.topbar nav{margin-left:auto;display:none;gap:6px}
.topbar nav a{color:#fff;text-decoration:none;font-size:var(--fs-s);font-weight:600;
  padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;min-height:var(--tap)}
.topbar nav a[aria-current="page"]{background:rgba(255,255,255,.22)}
.topbar nav a:hover{background:rgba(255,255,255,.12)}
.topbar .signout{margin-left:6px}
main{max-width:1180px;margin:0 auto;padding:20px 16px 108px}
@media(min-width:900px){ .topbar nav{display:flex} main{padding:28px 28px 48px} .tabbar{display:none} }

/* mobile tab bar */
.tabbar{position:fixed;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid var(--line);
  display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  min-height:56px;text-decoration:none;color:var(--mute);font-size:var(--fs-xs);font-weight:600}
.tabbar a[aria-current="page"]{color:var(--blue)}
.tabbar svg{width:22px;height:22px}
@media(min-width:900px){.tabbar{display:none}} /* after the base rule so it actually wins (D10) */

/* ── primitives ────────────────────────────────────────────────────── */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px;margin-bottom:16px}
.card h2{font-family:var(--display);font-size:var(--fs-l);letter-spacing:.02em;margin-bottom:12px}
.h-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.h-row .aside{margin-left:auto;font-size:var(--fs-s);color:var(--mute)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--tap);
  padding:0 20px;border-radius:12px;border:0;font:inherit;font-size:var(--fs-m);font-weight:700;
  cursor:pointer;text-decoration:none;background:var(--blue);color:#fff}
.btn:hover{background:#24497F}
.btn.secondary{background:#EDF3FA;color:var(--navy)}
.btn.secondary:hover{background:#DFE9F5}
.btn.danger{background:var(--miss-bg);color:var(--miss)}
.btn.sign{background:var(--sign);color:var(--sign-ink);min-height:52px;font-size:var(--fs-l);width:100%}
.btn.sign:hover{background:#F0A518}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;font-size:var(--fs-xs);font-weight:700;border-radius:999px;padding:5px 12px}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.miss{background:var(--miss-bg);color:var(--miss)}
.chip.warn{background:var(--warn-bg);color:var(--warn-ink)}
.chip.mute{background:#EEF1F5;color:var(--mute)}
.field{display:block;margin-bottom:14px}
.field span{display:block;font-size:var(--fs-s);font-weight:600;margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;min-height:var(--tap);font:inherit;font-size:var(--fs-m);
  padding:10px 14px;border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--ink)}
.field input:focus,.field textarea:focus{border-color:var(--steel)}
.err{background:var(--miss-bg);color:var(--miss);border-radius:10px;padding:12px 16px;font-size:var(--fs-s);font-weight:600;margin-bottom:14px}
.ok-note{background:var(--ok-bg);color:var(--ok);border-radius:10px;padding:12px 16px;font-size:var(--fs-s);font-weight:600;margin-bottom:14px}
.note{background:#F4F8FC;border-left:3px solid var(--steel);padding:10px 14px;border-radius:0 8px 8px 0;font-size:var(--fs-s)}

/* stats */
.stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
@media(min-width:900px){.stats{grid-template-columns:repeat(4,1fr)}}
.stat{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow)}
.stat b{font-family:var(--display);font-size:var(--fs-stat);display:block;line-height:1.1}
.stat span{font-size:var(--fs-s);color:var(--mute)}
/* Flat navy, not a gradient: amber-on-gradient measured 6.36:1 at the navy end
   but 3.94:1 at the blue end — an AA failure axe could only report as
   "incomplete" (review N-3). A single background makes the ratio provable. */
.stat.hero{background:var(--navy);border:0;color:#fff}
.stat.hero span{color:rgba(255,255,255,.92)}
.stat.hero .sub a{color:var(--sign);font-weight:700;font-size:var(--fs-s);text-decoration:underline}
.stat.hero .sub a:hover{text-decoration:none}
.stat .empty-hint{font-size:var(--fs-xs);color:var(--mute);margin-top:6px;line-height:1.4}

/* tables */
table{width:100%;border-collapse:collapse;font-size:var(--fs-s)}
th{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
  text-align:left;padding:8px 10px;border-bottom:2px solid var(--navy)}
th.n,td.n{text-align:right;font-variant-numeric:tabular-nums}
td{padding:12px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
tr.absent td{color:var(--mute);background:#F7F9FB;font-style:italic}
tr.total td{border-bottom:0;border-top:2px solid var(--navy);font-weight:700;background:#EDF3FA}
tr.total td.n{font-family:var(--display);font-size:var(--fs-l)}

/* Work-log table goes card-per-row under 700px — a 4-column table clipped
   man-hours (the one load-bearing number) right off a 390px screen (D1). */
@media(max-width:699px){
  table.loglog thead{position:absolute;left:-9999px}
  table.loglog, table.loglog tbody{display:block}
  table.loglog tr{display:grid;grid-template-columns:1fr auto;gap:2px 14px;
    padding:12px 2px;border-bottom:1px solid var(--line)}
  table.loglog td{display:block;border:0;padding:0}
  table.loglog td:first-child{grid-column:1 / -1}
  table.loglog td.n{text-align:left;display:inline-flex;gap:6px;align-items:baseline;font-size:var(--fs-s)}
  table.loglog td.n::before{content:attr(data-label);font-size:var(--fs-xs);font-weight:700;
    letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
  table.loglog td.n[data-label=""]::before{content:none}
  table.loglog tr.total{grid-template-columns:1fr;background:#EDF3FA;border-radius:10px;padding:12px}
  table.loglog tr.total td{display:block}
  table.loglog tr.total td.n{display:inline-flex;margin-right:16px}
}

/* attention list (missed dailies) */
.attn{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px dotted var(--line)}
.attn:last-child{border-bottom:0}
.attn .flag{width:38px;height:38px;border-radius:10px;background:var(--miss-bg);color:var(--miss);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:18px}
.attn .t b{display:block;font-size:var(--fs-s)}
.attn .t span{font-size:var(--fs-xs);color:var(--mute)}
.attn .go{margin-left:auto;white-space:nowrap}
/* gallery fallback for a file the browser can't render (D4) */
.gal figure.broken img{display:none}
.gal figure.broken::before{content:"Photo unavailable - the original is still safe in storage";
  display:flex;align-items:center;justify-content:center;height:110px;padding:10px;text-align:center;
  font-size:var(--fs-xs);color:var(--mute);background:#F7F9FB}

/* report feed */
.feed-card{display:block;text-decoration:none;color:inherit;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;margin-bottom:12px}
.feed-card:hover{border-color:var(--steel)}
.feed-card .top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.feed-card .top b{font-family:var(--display);font-size:var(--fs-l)}
.feed-card .nums{display:flex;gap:18px;margin-top:8px;font-size:var(--fs-s);color:var(--mute)}
.feed-card .nums b{color:var(--ink);font-variant-numeric:tabular-nums}
.thumbs{display:flex;gap:8px;margin-top:12px;overflow-x:auto}
.thumbs img{width:96px;height:72px;object-fit:cover;border-radius:8px;flex:0 0 auto}

/* work-log steppers */
.pair{display:flex;align-items:center;gap:8px}
.pair button{width:var(--tap);height:var(--tap);border-radius:10px;border:1.5px solid var(--line);
  background:#fff;font-size:22px;font-weight:700;color:var(--navy);cursor:pointer;flex:0 0 auto}
.pair button:hover{border-color:var(--steel)}
.pair input{width:64px;min-height:var(--tap);text-align:center;font:inherit;font-size:var(--fs-l);
  font-weight:700;border:1.5px solid var(--line);border-radius:10px}
.auto-cell{background:#EDF3FA;border-radius:8px;padding:8px 12px;font-family:var(--display);
  font-size:var(--fs-l);font-weight:700;text-align:right;position:relative}
.auto-cell small{display:block;font-family:var(--body);font-size:var(--fs-xs);font-weight:600;color:var(--mute);letter-spacing:.06em}

/* survey */
.svq{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px dotted var(--line);flex-wrap:wrap}
.svq .q{font-size:var(--fs-m);flex:1;min-width:200px}
.seg{display:inline-flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{min-width:64px;min-height:var(--tap);border:0;background:#fff;font:inherit;font-size:var(--fs-s);
  font-weight:700;color:var(--mute);cursor:pointer}
.seg button+button{border-left:1.5px solid var(--line)}
.seg button[aria-pressed="true"].v-no{background:var(--ok-bg);color:var(--ok)}
.seg button[aria-pressed="true"].v-yes{background:var(--miss-bg);color:var(--miss)}
.seg button[aria-pressed="true"].v-na{background:#EEF1F5;color:var(--ink)}
.sv-note{width:100%}

/* gallery */
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.gal figure{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;margin:0}
.gal img{width:100%;height:110px;object-fit:cover}
.gal figcaption{font-size:var(--fs-xs);color:var(--mute);padding:7px 9px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.counters{display:flex;gap:14px;font-size:var(--fs-s);color:var(--mute);margin-bottom:12px}
.counters b{color:var(--ink)}

/* sign dock — THE day's verb (amber kept by ruling) */
.sign-dock{position:sticky;bottom:64px;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--radius);box-shadow:0 -2px 24px rgba(27,58,92,.14);padding:14px 16px;margin-top:18px}
@media(min-width:900px){.sign-dock{bottom:12px}}
.sign-dock .why{font-size:var(--fs-xs);color:var(--mute);margin-bottom:10px;text-align:center}
.signed-banner{display:flex;align-items:center;gap:12px;background:var(--ok-bg);color:var(--ok);
  border-radius:var(--radius);padding:14px 18px;font-weight:700}
.signed-banner .lock{font-size:20px}
.signed-banner .sub{display:block;font-size:var(--fs-xs);font-weight:600;color:#2A6A4C}

/* modal (sign confirm) */
dialog{border:0;border-radius:var(--radius);box-shadow:0 12px 60px rgba(20,24,29,.35);
  padding:24px;max-width:420px;width:calc(100vw - 40px)}
dialog::backdrop{background:rgba(20,24,29,.5)}
dialog h3{font-family:var(--display);font-size:var(--fs-xl);margin-bottom:10px}
dialog p{font-size:var(--fs-s);margin-bottom:18px;line-height:1.5}
dialog .row{display:flex;gap:10px}
dialog .row .btn{flex:1}

/* calendar strip */
.cal{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px}
.cal a{flex:0 0 auto;width:52px;min-height:64px;border-radius:10px;border:1.5px solid var(--line);
  background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:var(--ink);font-size:var(--fs-xs);font-weight:600}
.cal a b{font-size:var(--fs-m)}
.cal a .dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.cal a.done .dot{background:var(--ok)}
.cal a.missed{border-color:#E8C9C3}
.cal a.missed .dot{background:var(--miss)}
.cal a[aria-current="date"]{border-color:var(--blue);border-width:2px}

/* directory */
.person{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.person:last-child{border-bottom:0}
.person .av{width:var(--tap);height:var(--tap);border-radius:50%;background:#EDF3FA;color:var(--navy);
  display:flex;align-items:center;justify-content:center;font-weight:700;flex:0 0 auto}
.person .t b{display:block;font-size:var(--fs-m)}
.person .t span{font-size:var(--fs-xs);color:var(--mute)}
.person .chip{margin-left:auto}

/* empty states — designed, plain words, never dev-speak */
.empty{text-align:center;padding:34px 20px;color:var(--mute)}
.empty .ic{font-size:34px;margin-bottom:10px}
.empty b{display:block;color:var(--ink);font-size:var(--fs-m);margin-bottom:6px}
.empty p{font-size:var(--fs-s);max-width:340px;margin:0 auto}

/* login */
.login-wrap{min-height:100vh;display:flex;flex-direction:column;background:var(--navy)}
.login-card{background:var(--paper);border-radius:18px 18px 0 0;padding:30px 24px calc(30px + env(safe-area-inset-bottom));margin-top:auto}
@media(min-width:900px){.login-wrap{align-items:center;justify-content:center}
  .login-card{border-radius:18px;max-width:420px;width:100%;margin:0;box-shadow:0 18px 70px rgba(10,20,35,.45)}}
.login-brand{display:flex;flex-direction:column;align-items:center;gap:14px;padding:56px 20px 40px;color:#fff;text-align:center}
.login-brand img{width:104px;height:104px;border-radius:20px;background:#fff;padding:10px}
.login-brand h1{font-family:var(--display);font-size:30px;letter-spacing:.06em}
.login-brand p{font-size:var(--fs-s);color:rgba(255,255,255,.93);letter-spacing:.04em}
.empty .ic{color:var(--steel);display:flex;justify-content:center}
.signed-banner.pending{background:var(--warn-bg);color:var(--warn-ink)}
.signed-banner.pending .sub{color:var(--warn-ink)}

.btn.secondary:focus-within{outline:3px solid var(--steel);outline-offset:2px}

/* The report frame is a keyboard stop; its own outline would be clipped by the
   scroll container, so the wrapper carries a real, visible ring. */
.pdf-frame{height:640px;overflow:hidden;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
.pdf-frame:focus-within{outline:3px solid var(--steel);outline-offset:2px}
.pair button svg{pointer-events:none}