/* ===========================================================================
 * portal.css — shell + page styles for the portal hub (portal.html) and the
 * per-type library (library.html). Portal Phase 1, Task 6.
 *
 * DELIBERATE DUPLICATION — TRACKED DEBT, NOT AN ACCIDENT.
 * index.html (the live intake wizard) is FROZEN this phase: "not one byte"
 * (plan Global Constraints). Its <style> block therefore cannot be extracted
 * into a shared stylesheet. The SHELL RULES section below is copied from
 * index.html's <style> block:
 *
 *   - index.html lines 9-49  — :root palette, box-sizing reset, html/body,
 *     .toprule, header (logo + .tag), main, .stage, .step enter animation,
 *     and the type scale (.qnum, h1, .help)
 *   - index.html line 89     — the mobile media query, trimmed to its shell
 *     parts only (h1 size, .stage padding; the wizard-only .grid2 rule is
 *     NOT copied)
 *   - index.html lines 187-191 — footer
 *
 * The wizard's field/step/progress/upload styles are deliberately NOT here.
 * These copies must stay visually identical to index.html's shell; if the
 * wizard shell ever changes, re-copy — never edit index.html from this file.
 * Consolidation into one shared file is deferred to a phase permitted to
 * touch index.html (Phase 3+ per the plan).
 *
 * Everything under the PORTAL-SPECIFIC marker is NEW (cards, library rows,
 * scope toggle, badges, notices) — written for these pages, not duplicated.
 * =========================================================================== */

/* ---------- SHELL RULES duplicated from index.html (frozen) ---------- */
:root{
  --navy:#0A3255; --navy-deep:#072540; --yellow:#F3C317; --green:#10614B;
  --blue:#2556A6; --ink:#212121; --gray:#F5F5F5; --line:#DCE4EC; --muted:#5B7186;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%}
body{
  font-family:'Barlow',Arial,sans-serif; color:var(--ink);
  background:linear-gradient(180deg,#FBFCFE 0%,#F1F5F9 100%);
  display:flex; flex-direction:column;
}
.toprule{height:4px; background:var(--yellow); flex:none}
header{
  background:#fff; border-bottom:1px solid var(--line); flex:none;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 28px;
}
header img{height:40px}
header .tag{
  font-family:'Barlow Condensed'; font-weight:700; letter-spacing:.14em;
  color:var(--navy); font-size:14px; text-transform:uppercase;
}
header .tag span{color:var(--muted); font-weight:500; letter-spacing:.06em; text-transform:none; display:block; font-size:12.5px}
main{flex:1; display:flex; justify-content:center; overflow-y:auto}
.stage{width:100%; max-width:760px; padding:56px 32px 120px}

/* WIDE MODE — the census step, and any other screen that is a grid rather than
   prose. Shawn, 2026-09-02: "the input screen is currently skinny with a bar to
   move over, I want it expandable to the window size that's open".

   ⚠️ THE CAP ABOVE IS NOT A STYLE CHOICE TO BE RELAXED GLOBALLY. Eleven reading
   steps depend on it, and their copy is separately held to 60ch/62ch. Widening
   all of them would reverse a readability decision that is still open on its own
   merits. Wide is opt-in per step (`wide: true`), never the default.

   `max-width:none` rather than a bigger number, because the ask was literally
   "the window size that's open". */
.stage.wide{max-width:none}

/* At the shared cap the census could not fit AT ANY GROUP SIZE: 760px of stage
   minus 64px of padding is 696px of content, against `.grid`'s own 760px floor
   below. Every census ever rendered carried a horizontal scrollbar, including a
   one-person one-line group. In wide mode the floor is what the columns need. */
.stage.wide .grid{min-width:0}

/* Selects size to their longest OPTION under `table-layout:auto`, and this grid
   carries some long ones ("Waived (offered, said no)", "Employee plus children").
   The 96px floor below is there to stop a squeezed box; in wide mode the table
   is no longer fighting for room, so the floor only inflates every column. */
.stage.wide .grid input,.stage.wide .grid select{min-width:0}

/* Headers wrap instead of forcing their column to a single line. A two-line
   header costs one row of height once; `nowrap` costs width on every row. */
.stage.wide .grid th{white-space:normal}

/* WHOSE ROW IS THIS? A wide grid still scrolls sideways on a six-line group, and
   the failure that makes is silent: the agent reads a rate against the wrong
   person. The name column stays put. Paired with the scroll preservation in the
   roster wiring, this is what makes a wide grid usable rather than merely large. */
.stage.wide .grid th:first-child,.stage.wide .grid td:first-child{
  position:sticky; left:0; z-index:2; background:#fff;
}
.stage.wide .grid th:first-child{background:var(--gray)}
.stage.wide .grid tr.termed td:first-child{background:var(--gray)}
.step{animation:enter .45s cubic-bezier(.2,.7,.3,1)}
@keyframes enter{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
.qnum{
  font-family:'Barlow Condensed'; font-weight:700; color:var(--blue);
  font-size:15px; letter-spacing:.18em; text-transform:uppercase; margin-bottom:10px;
}
.qnum b{color:var(--navy)}
h1{
  font-family:'Barlow Condensed'; font-weight:700; color:var(--navy);
  font-size:38px; line-height:1.08; margin-bottom:10px;
}
.help{color:var(--muted); font-size:16px; line-height:1.5; margin-bottom:30px; max-width:60ch}
/* Hub tagline. Sits between the h1 and .help, so it reads as part of the
   masthead rather than as body copy. Yellow rule ties it to .toprule and the
   footer rule; navy text keeps it at brand weight without shouting. */
.tagline{
  font-family:'Barlow Condensed',Arial,sans-serif; font-weight:600;
  color:var(--navy); font-size:19px; line-height:1.35;
  margin:-8px 0 22px; padding-left:12px; border-left:4px solid var(--yellow);
  max-width:46ch;
}
/* Leaderboard pointer. Deliberately below the form-type cards and quiet: the
   tools are the job on this page, the scoreboard is the reminder. */
.scoreboard{
  margin-top:28px; padding-top:16px; border-top:1px solid var(--line);
  color:var(--muted); font-size:13.5px; letter-spacing:.02em;
}
.scoreboard a{color:var(--blue); font-weight:600; text-decoration:none}
.scoreboard a:hover{text-decoration:underline}

/* ---------- The scorecard ----------
   Sits ABOVE the tool cards (Shawn, 2026-09-17: the first thing people see).
   Calm by default: tiles borrow .card's surface so the panel reads as part of
   the hub, not a dashboard bolted on. Navy is this week, the pale bar colour
   is every other week; nothing else is coloured. Red is NOT used: this
   stylesheet spends red on broken (.notice.err, .badge.noreopen), and a slow
   week is not broken. Amber appears only on the badge and the note, with the
   meaning .notice.warn already carries: read this, it changes what you see.

   .sc-tile.off is the dashed "not here yet" vocabulary (.badge.draft,
   .row.new, .card.soon): an untracked or unconnected metric shows a dash and
   a sentence, never a zero that reads as "you did nothing". */
.stage.sc-wide{max-width:1180px}
.scorecard{margin:-6px 0 30px}
.scorecard[hidden]{display:none}
.sc-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px}
.sc-head h2{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:28px; letter-spacing:.01em; color:var(--navy); margin:0}
.sc-badge{
  display:inline-block; background:#FDF3D0; color:#7A6203; border:1px solid var(--yellow); border-radius:6px;
  font-size:12px; font-weight:700; letter-spacing:.06em; padding:3px 9px; text-transform:uppercase;
}
.sc-badge[hidden]{display:none}
.sc-band{margin-top:16px; padding-top:12px; border-top:1px solid var(--line)}
.sc-band-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:10px; flex-wrap:wrap}
.sc-band-head h3{font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; letter-spacing:.02em; color:var(--navy); margin:0}
.sc-asof{color:var(--muted); font-size:12.5px}
.sc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.sc-tile{
  display:flex; flex-direction:column; gap:4px; min-width:0;
  background:#fff; border:1.5px solid var(--line); border-radius:12px; padding:13px 14px 11px;
}
.sc-lbl{font-size:11.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600; min-height:28px; display:flex; justify-content:space-between; gap:6px}
.sc-rank{color:var(--blue); font-weight:700; white-space:nowrap}
.sc-nums{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.sc-num{font-family:'Barlow Condensed',sans-serif; font-weight:700; line-height:1; color:var(--navy)}
.sc-num.wtd{font-size:40px}
.sc-num.qtd{font-size:22px; color:#3E5A78}
.sc-cap{font-size:10.5px; letter-spacing:.06em; color:var(--muted); font-weight:600}
.sc-sub{font-size:12px; color:var(--muted); min-height:16px; line-height:1.35}
.sc-tile svg{display:block; width:100%; height:44px; margin-top:6px}
.sc-tile svg rect.bar{fill:#C9D6E3}
.sc-tile svg rect.now{fill:var(--navy)}
.sc-tile svg line{stroke:var(--line)}
.sc-foot{font-size:10.5px; color:var(--muted); display:flex; justify-content:space-between; margin-top:2px}
.sc-tile.off{background:var(--gray); border-style:dashed; border-color:#B9C6D2}
.sc-tile.off .sc-num{color:var(--muted)}
.sc-tile.off svg rect.now{fill:#B9C6D2}
.sc-legend{margin-top:14px; font-size:12.5px; color:var(--muted); display:flex; gap:22px; align-items:center; flex-wrap:wrap}
.sc-sw{display:inline-block; width:12px; height:12px; border-radius:2px; vertical-align:-2px; margin-right:6px}
.sc-sw.bar{background:#C9D6E3}
.sc-sw.now{background:var(--navy)}
.sc-note{margin:12px 0 0}
@media (max-width:640px){ h1{font-size:30px} .stage{padding-top:36px} }
footer{
  flex:none; background:var(--green); color:#fff; text-align:right;
  font-style:italic; font-size:13px; padding:9px 28px;
}
footer::before{content:""; display:block; position:relative; top:-13px; left:-28px; width:calc(100% + 56px); height:3px; background:var(--yellow); margin-bottom:-9px}

/* ---------- PORTAL-SPECIFIC (new — not duplicated from index.html) ---------- */

.qnum a{color:inherit; text-decoration:none}
.qnum a:hover{text-decoration:underline}

/* notices: info by default, .warn for degraded/incomplete states */
.notice{
  background:#F2F7FC; border:1.5px solid var(--blue); border-radius:12px;
  color:var(--navy); font-size:15px; line-height:1.5; padding:13px 18px; margin-bottom:22px;
}
.notice.warn{background:#FDF3D0; border-color:var(--yellow); color:#7A6203}
.notice.err{background:#FBECEA; border-color:#C0392B; color:#7A2318}
/* Success. Green is otherwise only used for .badge.delivered, which is the
   same meaning (it reached someone), so the vocabulary stays consistent. */
.notice.ok{background:#EFF6F3; border-color:var(--green); color:#1E6B4F}
.notice[hidden]{display:none}

.whoami{color:var(--muted); font-size:14px; margin:-18px 0 24px}

/* hub cards */
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.card{
  display:flex; flex-direction:column; gap:6px; text-decoration:none;
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:20px 22px; transition:border-color .15s, box-shadow .15s;
}
.card:hover{border-color:var(--navy); box-shadow:0 4px 14px rgba(10,50,85,.08)}
.card-label{
  font-family:'Barlow Condensed'; font-weight:700; color:var(--navy);
  font-size:22px; letter-spacing:.03em;
}
.card-blurb{color:var(--muted); font-size:14.5px; line-height:1.45}
.card-cta{color:var(--blue); font-size:14px; font-weight:600; margin-top:6px}

/* Not-yet-built tiles (registry comingSoon). Reads as a shelf item rather
   than a dead link: flat grey ground, no hover lift, default cursor. The
   dashed border matches .badge.draft and .row.new — this stylesheet's
   established "in progress, not finished" signal. Muted label keeps it
   clearly subordinate to the live cards without hiding it. */
.card.soon{
  background:var(--gray); border-style:dashed; border-color:#B9C6D2;
  cursor:default;
}
.card.soon:hover{border-color:#B9C6D2; box-shadow:none}
.card.soon .card-label{color:var(--muted)}
.card.soon .card-cta{margin-top:8px}

/* portal-styled action button (sign-in etc.) */
.pbtn{
  display:inline-block; text-decoration:none; font-family:'Barlow Condensed';
  font-weight:700; font-size:19px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--navy); background:var(--yellow); border:none; cursor:pointer;
  border-radius:10px; padding:14px 34px; box-shadow:0 4px 14px rgba(243,195,23,.35);
}
.pbtn:hover{background:#E0B310}

/* library toolbar + scope toggle */
.toolbar{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:22px; flex-wrap:wrap}
.scope-toggle{display:inline-flex; border:1.5px solid var(--line); border-radius:999px; background:#fff; overflow:hidden}
.scope-btn{
  font:inherit; font-size:14.5px; font-weight:600; color:var(--muted);
  background:none; border:none; cursor:pointer; padding:8px 20px;
}
.scope-btn.on{background:var(--navy); color:#fff}
.scope-btn:disabled{cursor:wait; opacity:.7}
.searchnote{color:var(--muted); font-size:13.5px}

/* library rows */
.list{display:flex; flex-direction:column; gap:12px}
.list h2{
  font-family:'Barlow Condensed'; font-weight:700; color:var(--navy);
  font-size:19px; letter-spacing:.08em; text-transform:uppercase; margin:14px 0 0;
}
.row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:#fff; border:1.5px solid var(--line); border-radius:12px;
  padding:15px 18px; text-decoration:none; color:inherit;
  transition:border-color .15s, box-shadow .15s;
}
a.row:hover{border-color:var(--navy); box-shadow:0 4px 14px rgba(10,50,85,.08)}
.row-main{min-width:0}
.row-title{display:block; color:var(--navy); font-weight:600; font-size:17px}
.row-sub{display:block; color:var(--muted); font-size:14px; margin-top:2px}
.row-meta{display:flex; align-items:center; gap:10px; flex:none; flex-wrap:wrap; justify-content:flex-end}
.versions{color:var(--muted); font-size:13.5px; white-space:nowrap}
.row.new{
  border:2.5px dashed #B9C6D2; background:transparent; justify-content:flex-start;
}
.row.new:hover{border-color:var(--blue); background:#F2F7FC}
.row.new .row-title{font-family:'Barlow Condensed'; font-weight:700; font-size:20px; letter-spacing:.03em}
.row.noreopen{background:var(--gray)}
.row.noreopen .row-title{color:var(--muted)}

/* P9 R1 — the per-row Active toggle.
   .row-wrap exists so the button is a SIBLING of the row rather than a child:
   a <button> inside an <a> is invalid HTML and browsers disagree about whether
   the click toggles or navigates. The wrapper keeps the anchor intact and the
   two share a row visually. `.row-wrap > .row` must stay flex:1 or the anchor
   collapses to its content width and the whole list looks ragged. */
.row-wrap{display:flex; align-items:stretch; gap:10px}
.row-wrap > .row{flex:1; min-width:0}
.row-actions{display:flex; align-items:center; flex:none}
.activebtn{
  font:inherit; font-size:13px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; cursor:pointer; white-space:nowrap;
  border-radius:10px; padding:10px 14px; min-width:92px;
  /* Default (OFF) reads as deliberately parked, not broken: muted and dashed,
     matching .badge.draft's vocabulary. Red is NOT used anywhere here — this
     stylesheet already spends red on broken (.notice.err, .badge.noreopen), so
     a red control would read to staff as "this summary is in trouble" when it
     only means "switched off". */
  background:#F7F8F6; color:var(--muted); border:1.5px dashed #9FB0BF;
}
.activebtn.on{background:#EFF6F3; color:var(--green); border:1.5px solid var(--green)}
.activebtn:hover:not(:disabled){border-style:solid; border-color:var(--navy); color:var(--navy)}
.activebtn:disabled{cursor:wait; opacity:.65}

/* status + state badges */
.badge{
  display:inline-block; border-radius:999px; padding:3px 12px;
  font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  white-space:nowrap;
}
.badge.delivered{background:#EFF6F3; color:var(--green); border:1px solid var(--green)}
.badge.updated{background:#F2F7FC; color:var(--blue); border:1px solid var(--blue)}
.badge.submitted{background:#EDF1F6; color:var(--navy); border:1px solid #B9C6D2}
/* draft = not yet submitted (Phase 2 Task 6): muted/neutral, dashed border so
   it reads as in-progress — never a success or warning colour. */
.badge.draft{background:#F7F8F6; color:var(--muted); border:1px dashed #9FB0BF}
.badge.other{background:#EDF1F6; color:var(--muted); border:1px solid #B9C6D2}
.badge.unfiled{background:#FDF3D0; color:#7A6203; border:1px solid var(--yellow)}
.badge.noreopen{background:#FBECEA; color:#C0392B; border:1px solid #C0392B}
/* Hub shelf pills. Two tiers, and the colours carry the difference: blue =
   actively being built, amber = queued behind it. Neither is red on purpose —
   red is spent in here on broken (.notice.err, .badge.noreopen), so a red
   "Coming Soon" would read to staff as an outage and generate the exact
   question these tiles exist to pre-empt. */
.badge.indev{background:#F2F7FC; color:var(--blue); border:1px dashed var(--blue)}
.badge.soon{background:#FDF3D0; color:#7A6203; border:1px dashed var(--yellow)}
/* IN TESTING — a LIVE tool that is not yet proven on real client work.
   Distinct from .indev ("being built, cannot be opened") and .soon ("queued").
   SOLID border, not dashed: dashed is this stylesheet's vocabulary for "not
   here yet", and this one genuinely opens. Amber rather than red, because red
   is spent on broken (.notice.err, .badge.noreopen) and this is not broken. */
.badge.testing{background:#FDF3D0; color:#7A6203; border:1px solid var(--yellow); font-weight:700}
/* NOT READY — a tool that OPENS but must not be relied on for client work.
   RED, deliberately, and it is the one place red is right on a working tile.
   This stylesheet spends red on broken (.notice.err, .badge.noreopen), and
   "NOT READY" is that same meaning: do not trust this yet. The colour and the
   words agree, which is exactly what .badge.testing could not claim.
   Solid and filled rather than outlined, so it reads at a glance across a
   grid of otherwise calm tiles. */
.badge.notready{
  background:#C0392B; color:#fff; border:1px solid #8E2A1F;
  font-weight:800; letter-spacing:.06em;
}

/* A live card carrying a badge. The badge sits beside the LABEL, so the CTA
   still reads "Open the library" — the tile is a real link and must not look
   like a disabled one. */
.card-label .badge{margin-left:10px; vertical-align:middle}
.card.flagged{border-color:var(--yellow)}
.card.flagged:hover{border-color:#C9A227}

/* empty states + load more */
.empty{
  background:#fff; border:1.5px dashed var(--line); border-radius:12px;
  color:var(--muted); font-size:15px; line-height:1.5; padding:22px; text-align:center;
}
.empty .linklike{
  background:none; border:none; cursor:pointer; font:inherit; font-weight:600;
  color:var(--blue); text-decoration:underline; padding:0;
}
.morebtn{
  font:inherit; font-size:15px; font-weight:600; color:var(--navy);
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  cursor:pointer; padding:11px 22px; margin-top:2px;
}
.morebtn:hover{border-color:var(--navy)}
.muted{color:var(--muted); font-size:15px}

/* ---------------------------------------------------------------------------
   Deduction Summary — the census grid (deduction.html, P9 step 3).
   Scoped to that page's own classes; nothing here restyles the library or the
   hub, both of which ship unchanged.
   --------------------------------------------------------------------------- */

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

/* Dashed, matching .row.new and .badge.draft — this stylesheet's vocabulary for
   "nothing here yet, put something in". */
.dropzone{
  background:#fff; border:2.5px dashed #B9C6D2; border-radius:12px;
  cursor:pointer; padding:44px 22px; text-align:center;
  transition:border-color .15s, background .15s;
}
.dropzone:hover,.dropzone:focus-visible,.dropzone.over{
  border-color:var(--blue); background:#F2F7FC; outline:none;
}
.dz-main{
  font-family:'Barlow Condensed'; font-weight:700; font-size:22px;
  letter-spacing:.03em; color:var(--navy); margin:0;
}
.dz-sub{color:var(--muted); font-size:14.5px; margin:6px 0 0}

.summaryline{color:var(--muted); font-size:14.5px; margin:2px 0 12px}
.summaryline strong{color:var(--navy); font-size:16px}
.summaryline .dirty{color:#7A6203; font-weight:600}

/* The table scrolls INSIDE this wrapper. Without it a wide grid pushes the
   whole page sideways, and the horizontal scrollbar ends up at the bottom of
   the document where nobody finds it. */
.tablewrap{
  overflow-x:auto; background:#fff;
  border:1.5px solid var(--line); border-radius:12px;
}
.grid{border-collapse:collapse; width:100%; min-width:760px}
.grid th{
  font-family:'Barlow Condensed'; font-weight:700; font-size:13.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--navy);
  text-align:left; padding:12px 14px; border-bottom:1.5px solid var(--line);
  background:var(--gray); white-space:nowrap;
}
.grid td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.grid tr:last-child td{border-bottom:none}
.grid input,.grid select{
  font:inherit; font-size:14.5px; width:100%; min-width:96px;
  padding:7px 9px; border:1.5px solid var(--line); border-radius:8px; background:#fff;
}
.grid input:focus,.grid select:focus{border-color:var(--blue); outline:none}

/* A terminated row stays VISIBLE and legible, just recessed. The engine keeps
   termed staff on the sheet at $0 rather than deleting them so payroll can see
   the change; hiding them here would contradict the document. */
.grid tr.termed{background:var(--gray)}
.grid tr.termed input,.grid tr.termed select{color:var(--muted)}

.rowbtns{white-space:nowrap; text-align:right}
.rowbtns .linklike{
  background:none; border:none; cursor:pointer; font:inherit; font-size:13.5px;
  font-weight:600; color:var(--blue); text-decoration:underline;
  padding:4px 6px; margin-left:2px;
}
/* Remove is the only DESTRUCTIVE control on the page, and the only place this
   page spends red. Terminate is not red: it is the normal monthly action. */
.rowbtns .linklike.danger{color:#A32020}

.gridactions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px}
.gridactions .spacer{flex:1}
.grid td.empty{
  color:var(--muted); font-size:15px; padding:22px; text-align:center; border-bottom:none;
}