/* Visual language adapted from the mockup the client supplied
   (bubo-procurement-command), rebuilt as plain CSS for Django templates.
   Same palette and layout; the data and the workflow are ours.

   TYPE SCALE -- nothing below 11.5px. The mockup used 8.5-10px for labels, which
   is not readable on a real monitor. Sizes are named rather than sprinkled so
   they stay consistent.

   CONTRAST -- every text colour here clears WCAG AA (4.5:1) against the
   background, measured, not estimated:
     --muted      #9db0c4   7.9:1
     --muted-dim  #8199ae   6.0:1
     --text-soft  #b6c6d6  10.1:1
   The three colours this replaced (#5d7893 3.8:1, #66829c 4.4:1, #47627c 2.8:1)
   all failed. Do not reintroduce them. */

:root{
  --ink:#f5f8fc;
  --text-soft:#b6c6d6;      /* body copy that is not a heading */
  --muted:#9db0c4;          /* labels, secondary text */
  --muted-dim:#8199ae;      /* the least important text; still AA */
  --line:rgba(145,178,210,.2);
  --blue:#54a5ff; --navy:#041323; --amber:#ffc247; --green:#8ade87; --red:#ff8b85;

  --fs-xs:11.5px;   /* uppercase eyebrows and tags only */
  --fs-sm:12.5px;   /* counts, timestamps */
  --fs-base:14.5px; /* default readable size */
  --fs-md:15.5px;   /* card titles */
  --fs-lg:18px;
}
*{box-sizing:border-box}
/* The document never scrolls. The topbar is fixed height and the three columns
   below each scroll independently, so scrolling the detail panel cannot move the
   rail or the queue. Reverted to normal page scrolling in the stacked layout at
   the bottom of this file. */
html,body{margin:0;height:100%;overflow:hidden;background:var(--navy)}
body{
  color:var(--ink);
  font-size:var(--fs-base);
  line-height:1.5;
  font-family:system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  background:
    radial-gradient(circle at 70% 0%,rgba(25,91,147,.18),transparent 38%),
    linear-gradient(135deg,#03111e 0%,#061a2d 58%,#041321 100%);
  background-attachment:fixed;
}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- top bar ---------- */
.topbar{height:74px;display:flex;align-items:center;gap:18px;padding:0 28px;
  border-bottom:1px solid var(--line);background:rgba(2,13,24,.68);backdrop-filter:blur(18px)}
.brand-mark{width:38px;height:38px;display:grid;place-items:center;color:#8fc6ff;
  border:2px solid #6ca9e9;border-radius:12px 12px 16px 16px;transform:rotate(45deg)}
.brand-mark span{font-size:16px;font-weight:800;transform:rotate(-45deg)}
.brand-name{font-size:16px;font-weight:750;letter-spacing:.16em}
.vdivider{height:28px;width:1px;background:rgba(255,255,255,.24)}
.product-name{font-size:18px;font-weight:620;color:#eaf1f9}
.topbar .spacer{margin-left:auto}
.rule{font-size:var(--fs-sm);color:var(--muted)}

/* ---------- 3-column shell: filters | list | detail ---------- */
.shell{display:grid;grid-template-columns:262px 356px minmax(0,1fr);
  height:calc(100vh - 74px);overflow:hidden;transition:grid-template-columns .18s ease}
.shell.detail-only{grid-template-columns:262px minmax(0,1fr)}

/* Queue column collapsed: a 44px strip keeps the expand affordance visible
   rather than hiding the control along with the panel. */
.shell.list-collapsed{grid-template-columns:262px 44px minmax(0,1fr)}
.shell.list-collapsed .list-panel{padding:18px 0;overflow:hidden}
.shell.list-collapsed .panel-heading{flex-direction:column;align-items:center;gap:12px;padding:0}
.shell.list-collapsed .panel-heading .heading-text,
.shell.list-collapsed .opportunity-list,
.shell.list-collapsed .pager{display:none}
.shell.list-collapsed .collapse-toggle{transform:rotate(180deg)}

/* Sticky full-height rail: the filters scroll internally, the account block
   stays pinned to the bottom, so the rail is an unchanging frame on every page. */
.filter-rail{border-right:1px solid var(--line);background:rgba(2,12,22,.5);
  height:100%;min-height:0;overflow:hidden;
  display:flex;flex-direction:column;padding:26px 10px 16px 22px}
/* padding-right on the scroller, not the rail, so the scrollbar sits in the
   gutter instead of overlapping the filter rows. */
.rail-scroll{flex:1;min-height:0;overflow-y:auto;padding-right:12px}

/* One scrollbar treatment, applied to every independently-scrolling column. */
.rail-scroll,.list-panel,.detail{scrollbar-width:thin;scrollbar-color:#33587d transparent}
.rail-scroll::-webkit-scrollbar,
.list-panel::-webkit-scrollbar,
.detail::-webkit-scrollbar{width:10px}
.rail-scroll::-webkit-scrollbar-track,
.list-panel::-webkit-scrollbar-track,
.detail::-webkit-scrollbar-track{background:transparent}
.rail-scroll::-webkit-scrollbar-thumb,
.list-panel::-webkit-scrollbar-thumb,
.detail::-webkit-scrollbar-thumb{background:#33587d;border-radius:5px;
  border:2px solid transparent;background-clip:content-box}
.rail-scroll::-webkit-scrollbar-thumb:hover,
.list-panel::-webkit-scrollbar-thumb:hover,
.detail::-webkit-scrollbar-thumb:hover{background:#4b7ba6;background-clip:content-box}
.rail-user{margin-top:auto;margin-right:12px;padding-top:17px;
  border-top:1px solid var(--line);display:flex;align-items:center;gap:11px}
.rail-avatar{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:#12314d;border:1px solid #4d7396;color:#d7e6f5;
  font-size:var(--fs-sm);font-weight:700}
.rail-user .who{flex:1;min-width:0}
.rail-user .who strong{display:block;font-size:var(--fs-base);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.rail-user .who span{font-size:var(--fs-xs);letter-spacing:.09em;color:var(--muted);
  text-transform:uppercase}
.rail-actions{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none}
.rail-actions a,.rail-actions button{font-size:var(--fs-sm);color:var(--muted)}
.rail-actions a:hover,.rail-actions button:hover{color:var(--blue)}
.rail-actions form{margin:0}
.rail-actions button{background:none;border:none;padding:0;cursor:pointer}

.filter-group{margin-bottom:30px}
.filter-group h3{margin:0 0 12px;font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;
  color:var(--muted)}
.filter-link{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;
  margin-bottom:3px;font-size:var(--fs-base);color:var(--text-soft);cursor:pointer;
  line-height:1.35}
.filter-link:hover{background:rgba(30,72,110,.45);color:#fff}
.filter-link.selected{background:linear-gradient(135deg,rgba(22,74,116,.98),rgba(11,46,78,.9));
  color:#fff;box-shadow:inset 0 0 0 1px rgba(96,175,250,.55)}
.filter-link .n{margin-left:auto;font-size:var(--fs-sm);color:var(--muted);
  font-variant-numeric:tabular-nums}
.filter-link.future{opacity:.62}
.filter-link .soon{font-size:10.5px;letter-spacing:.06em;color:var(--muted-dim);
  border:1px solid #3d648a;border-radius:4px;padding:1px 5px}
.filter-search{width:100%;padding:10px 12px;border-radius:9px;border:1px solid #2c5075;
  background:rgba(6,22,38,.85);color:var(--ink);font-size:var(--fs-base)}
.filter-search::placeholder{color:var(--muted-dim)}
.clear-filters{display:block;margin-top:9px;font-size:var(--fs-sm);color:var(--muted)}
.clear-filters:hover{color:var(--blue)}

/* ---------- opportunity list ---------- */
.list-panel{padding:26px 14px 26px 20px;border-right:1px solid var(--line);overflow-x:hidden;
  background:rgba(3,16,29,.58);height:100%;min-height:0;overflow-y:auto}
.panel-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;
  padding:0 4px 18px}
.panel-heading .heading-text{flex:1;min-width:0}
.collapse-toggle{flex:none;width:28px;height:28px;display:grid;place-items:center;
  border-radius:8px;border:1px solid #2c5075;background:rgba(6,22,38,.7);
  color:var(--muted);cursor:pointer;font-size:13px;line-height:1;
  transition:transform .18s ease,color .15s,border-color .15s}
.collapse-toggle:hover{color:var(--ink);border-color:#4b7ba6}
.eyebrow{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:800;letter-spacing:.16em}
.panel-heading h1{margin:7px 0 0;font-size:23px;letter-spacing:-.02em}
.count{display:grid;place-items:center;min-width:28px;height:28px;padding:0 8px;border-radius:8px;
  background:#143756;color:#cfe3f6;font-size:var(--fs-sm)}
.opportunity-list{display:grid;gap:10px}
.opportunity-card{display:block;width:100%;min-width:0;overflow:hidden;text-align:left;padding:15px;border:1px solid transparent;
  border-radius:14px;background:rgba(11,32,52,.68);cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s}
.opportunity-card:hover{transform:translateY(-1px);border-color:rgba(96,175,250,.45)}
.opportunity-card.selected{background:linear-gradient(135deg,rgba(22,74,116,.98),rgba(11,46,78,.9));
  border-color:rgba(96,175,250,.6)}
.card-topline,.card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.opp-id{color:var(--muted);font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.current-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 12px var(--blue);flex:none}
.opportunity-card strong{display:block;margin-top:11px;font-size:var(--fs-md);line-height:1.35;
  /* A subject is one attacker-supplied string and may contain a URL or an
     unbroken RFP reference with no space to break at. Without this it widens
     the card, and because the panel scrolls vertically the browser gives it a
     HORIZONTAL scrollbar rather than wrapping. */
  overflow-wrap:anywhere;word-break:break-word}
.opportunity-card .agency{overflow-wrap:anywhere;word-break:break-word}
.agency{display:block;margin-top:5px;color:var(--text-soft);font-size:13px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-footer{margin-top:13px;color:var(--muted);font-size:var(--fs-sm)}
.needs-action{color:var(--amber)} .at-risk{color:var(--red)} .on-track{color:var(--green)}
.score-pill{font-variant-numeric:tabular-nums;font-weight:700;font-size:var(--fs-base)}

/* ---------- detail ---------- */
.detail{padding:30px 34px 60px 40px;height:100%;min-height:0;overflow-y:auto;overflow-x:hidden}
.detail-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  margin:16px 0 26px}
.heading-meta{display:flex;align-items:center;gap:10px;margin-bottom:9px;color:var(--muted);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.meta-dot{width:4px;height:4px;border-radius:50%;background:var(--muted-dim)}
.detail-heading > div:first-child{flex:1;min-width:0}
.detail-heading h2{margin:0;font-size:clamp(24px,2.4vw,33px);line-height:1.15;
  letter-spacing:-.025em;overflow-wrap:anywhere;word-break:break-word}
.step-count{text-align:right;color:var(--muted);font-size:var(--fs-xs);letter-spacing:.1em;
  white-space:nowrap}
.step-count strong{display:block;font-size:28px;color:var(--ink);letter-spacing:0}

.card-panel{background:rgba(8,26,44,.6);border:1px solid var(--line);border-radius:16px;
  padding:19px 22px;margin-bottom:16px}
.section-label{display:flex;justify-content:space-between;gap:12px;color:var(--muted);
  font-size:var(--fs-xs);font-weight:800;letter-spacing:.14em;margin-bottom:15px}

/* stage tracker */
.stage-track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px}
.stage{text-align:center;font-size:var(--fs-sm);color:var(--muted)}
.stage-number{width:30px;height:30px;margin:0 auto 7px;border-radius:50%;display:grid;
  place-items:center;font-size:var(--fs-sm);font-weight:700;border:1px solid #34597a;
  background:rgba(6,22,38,.7)}
.stage.complete .stage-number{background:var(--green);color:#04250f;border-color:transparent}
.stage.current .stage-number{background:var(--blue);color:#04182b;border-color:transparent;
  box-shadow:0 0 14px rgba(84,165,255,.55)}
.stage.current{color:var(--ink);font-weight:600}
.stage.future{opacity:.68}
.stage .soon{display:block;margin-top:2px;font-size:10.5px;letter-spacing:.05em;color:var(--muted-dim)}

/* action / gate card */
.action-card{display:flex;gap:17px;align-items:flex-start;background:rgba(14,44,72,.66);
  border:1px solid rgba(96,175,250,.34);border-radius:16px;padding:19px 22px;margin-bottom:16px}
.action-card.pending{border-color:rgba(255,194,71,.45)}
/* Last panel on the page, after the evidence. The rule and extra top margin mark
   it as the end of the review rather than one more card in the stack. */
.action-card.decision{margin-top:26px;padding-top:22px;border-top-width:2px}
.action-icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:rgba(84,165,255,.18);color:#8cc3ff;font-size:18px}
.action-copy{flex:1}
.action-label{display:block;color:var(--muted);font-size:var(--fs-xs);font-weight:800;
  letter-spacing:.14em}
.action-copy h3{margin:7px 0 5px;font-size:var(--fs-lg)}
.action-copy p{margin:0;color:var(--text-soft);font-size:var(--fs-base);line-height:1.55}
.action-buttons{display:flex;gap:9px;flex:none;align-items:center}
.primary-action,.secondary-action{border-radius:9px;padding:10px 18px;cursor:pointer;
  font-weight:600;font-size:var(--fs-base)}
.primary-action{background:var(--green);color:#04250f;border:none}
.secondary-action{background:transparent;color:var(--ink);border:1px solid #4d7396}
.primary-action[disabled],.secondary-action[disabled]{opacity:.5;cursor:not-allowed}
.not-built-note{margin-top:8px !important;color:var(--muted);font-size:var(--fs-sm)}
.not-implemented{font-size:13px;color:var(--muted);border:1px dashed #3d648a;border-radius:8px;
  padding:8px 12px;white-space:nowrap}

/* scores */
.score-row{display:flex;align-items:center;gap:13px;margin-bottom:10px;font-size:var(--fs-base)}
.score-row .label{width:186px;color:var(--text-soft);flex:none}
.score-row .note{color:var(--muted-dim);font-size:var(--fs-sm)}
.meter{flex:1;height:6px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden;min-width:60px}
.meter i{display:block;height:100%;background:var(--blue)}
.score-row .val{width:40px;text-align:right;font-variant-numeric:tabular-nums;color:var(--ink);flex:none}
.headline-score{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:16px}
.headline-score b{font-size:34px;letter-spacing:-.02em}
.headline-score span{color:var(--muted);font-size:var(--fs-base)}

.chip{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.04em;
  padding:4px 10px;border-radius:5px;text-transform:uppercase}
.chip.pursue{color:var(--green);background:rgba(138,222,135,.16)}
.chip.decline{color:var(--red);background:rgba(255,139,133,.16)}
.chip.review{color:var(--amber);background:rgba(255,194,71,.16)}
.flags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
/* max-width/word-break because flags are unvalidated model output: the form
   drops absurd ones but a merely long flag must wrap inside the card rather than
   stretching it. Truncating the VALUE belongs nowhere; clipping the DISPLAY
   belongs here. */
.flag{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:var(--fs-sm);padding:4px 8px;
  border-radius:5px;color:var(--amber);background:rgba(255,194,71,.12);
  border:1px solid rgba(255,194,71,.38);
  max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.flag.authority{color:var(--red);background:rgba(255,139,133,.12);border-color:rgba(255,139,133,.42)}
.kv{display:grid;grid-template-columns:170px 1fr;gap:9px 16px;font-size:var(--fs-base)}
.kv dt{color:var(--muted)}
.kv dd{margin:0;color:var(--text-soft);word-break:break-word}
.draft{white-space:pre-wrap;font-size:var(--fs-base);line-height:1.65;color:var(--ink)}
.draft-subject{font-weight:600;margin-bottom:9px}
.attachment{display:flex;align-items:center;gap:10px;font-size:var(--fs-base);color:var(--text-soft);
  padding:6px 0}
.attachment .size{color:var(--muted);font-size:var(--fs-sm)}
.empty{border:1px dashed var(--line);border-radius:14px;padding:28px;text-align:center;
  color:var(--muted);font-size:var(--fs-base);line-height:1.6}
.back-link{font-size:var(--fs-base);color:var(--muted)}
.back-link:hover{color:var(--blue)}
.pager{margin-top:16px;font-size:var(--fs-base);color:var(--muted);display:flex;gap:12px}
.pager a:hover{color:var(--blue)}

/* action feedback. Fixed rather than in-flow so it cannot shift the three
   scroll columns when it appears after a redirect. */
.messages{position:fixed;top:86px;right:22px;z-index:20;margin:0;padding:0;list-style:none;
  display:grid;gap:8px;max-width:min(420px,calc(100vw - 44px))}
.msg{padding:11px 15px;border-radius:10px;font-size:var(--fs-base);
  background:rgba(12,38,62,.97);border:1px solid var(--line);color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
.msg.success{border-color:rgba(138,222,135,.55)}
.msg.error{border-color:rgba(255,139,133,.6)}

/* login */
.login-wrap{display:grid;place-items:center;min-height:calc(100vh - 74px)}
form.login{background:rgba(8,26,44,.75);border:1px solid var(--line);border-radius:16px;
  padding:28px;width:350px}
form.login h1{margin:0 0 18px;font-size:21px}
form.login p{margin:0 0 14px}
form.login input{width:100%;padding:10px;border-radius:8px;border:1px solid #2c5075;
  background:rgba(6,22,38,.85);color:var(--ink);font-size:var(--fs-base)}
form.login label{display:block;font-size:var(--fs-base);color:var(--text-soft);margin-bottom:5px}
form.login button{width:100%;margin-top:8px;background:var(--blue);color:#04182b;border:none;
  border-radius:9px;padding:11px;font-weight:700;font-size:var(--fs-base);cursor:pointer}
.error{color:var(--red);font-size:var(--fs-base)}

@media(max-width:1280px){
  .shell{grid-template-columns:222px 320px minmax(0,1fr)}
}
@media(max-width:1040px){
  /* Stacked: the page scrolls normally again and no column pins. */
  html,body{height:auto;overflow:auto}
  .shell,.shell.detail-only{grid-template-columns:1fr;height:auto;overflow:visible}
  .filter-rail,.list-panel{border-right:none;border-bottom:1px solid var(--line)}
  .filter-rail,.list-panel,.detail{height:auto;overflow:visible}
  .rail-scroll{overflow:visible;padding-right:0}
  .detail{padding:24px 20px 36px}
  /* 6 stages will not fit side by side on a narrow screen. */
  .stage-track{grid-auto-flow:row;grid-auto-columns:auto;
    grid-template-columns:repeat(3,1fr);gap:14px 8px}
}

/* ---------- gate 2: the strategy panel ----------
   Reuses the existing tokens throughout; no new colours are introduced. The two
   additions worth naming are `.cite`, which must read as a reference rather than
   a link (it is not clickable, and styling it blue would promise otherwise), and
   `.warn-note`, which carries amber because everything it says is a reason to
   slow down rather than a failure. */

.sub-label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.14em;color:var(--muted);
  margin:20px 0 10px;padding-top:14px;border-top:1px solid var(--line)}
.card-panel .kv + .sub-label{margin-top:18px}

.empty-note{color:var(--muted);font-size:var(--fs-base);line-height:1.6}

.warn-note{margin:12px 0;padding:11px 14px;border-radius:10px;font-size:var(--fs-base);
  line-height:1.6;color:var(--amber);background:rgba(255,194,71,.1);
  border:1px solid rgba(255,194,71,.34)}
.warn-note strong{font-weight:750}
.warn-note em{font-style:normal;text-decoration:underline;text-underline-offset:2px}
/* A No-bid recommendation contradicts a human decision, so it reads red rather
   than amber -- it is not a caveat, it is a disagreement. */
.warn-note.contradiction{color:var(--red);background:rgba(255,139,133,.1);
  border-color:rgba(255,139,133,.38)}

/* key dates: raw_text is the authority, so it gets the emphasis. An unparsed one
   is dimmed but never hidden -- "30 days after award" is real information. */
.date-list{display:flex;flex-direction:column;gap:7px}
.date-row{display:grid;grid-template-columns:132px minmax(0,1fr) auto auto;gap:12px;
  align-items:baseline;font-size:var(--fs-base);padding:7px 0;border-bottom:1px solid var(--line)}
.date-row:last-child{border-bottom:none}
.date-kind{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase}
.date-label{color:var(--text-soft);min-width:0;overflow-wrap:anywhere}
.date-raw{color:var(--ink);font-weight:620;white-space:nowrap}
.date-row.unparsed .date-raw{color:var(--muted);font-weight:500}
.date-note{font-size:var(--fs-xs);color:var(--muted-dim);white-space:nowrap}

/* a claim plus the passage it came from */
.claim{padding:10px 0;border-bottom:1px solid var(--line)}
.claim:last-of-type{border-bottom:none}
.claim p{margin:0 0 6px;color:var(--text-soft);line-height:1.6}
.cite{display:inline-block;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:var(--fs-sm);color:var(--muted);background:rgba(145,178,210,.1);
  border:1px solid var(--line);border-radius:6px;padding:3px 8px;overflow-wrap:anywhere}
/* An uncited claim is the failure this agent exists to prevent, so it is marked
   rather than left looking the same as a grounded one. */
.cite.uncited{color:var(--amber);background:rgba(255,194,71,.1);
  border-color:rgba(255,194,71,.3)}

.plain-list{margin:0;padding-left:20px;color:var(--text-soft);line-height:1.65}
.plain-list li{margin-bottom:7px}
.plain-list li::marker{color:var(--muted-dim)}
.plain-list.gaps li::marker{color:var(--red)}
.plain-list.questions li::marker{color:var(--blue)}

.recommendation{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.rec-meta{font-size:var(--fs-sm);color:var(--muted)}
.rec-body{margin:0 0 10px;color:var(--text-soft);line-height:1.6}
.rec-body.muted{color:var(--muted);font-size:var(--fs-sm)}

.strategy-foot{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);
  font-size:var(--fs-sm);color:var(--muted-dim)}

/* the gate card's note box, shown only for actions whose note is the point */
.gate-form{display:flex;flex-direction:column;gap:11px;align-items:flex-end;flex:none}
.gate-note{display:flex;flex-direction:column;gap:5px;width:100%;min-width:260px}
.gate-note span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase}
.gate-note textarea{width:100%;resize:vertical;border-radius:9px;padding:9px 11px;
  color:var(--ink);background:rgba(4,19,35,.6);border:1px solid var(--line);
  font-size:var(--fs-base);line-height:1.5}
.gate-note textarea::placeholder{color:var(--muted-dim)}
.gate-note textarea:focus{outline:2px solid var(--blue);outline-offset:1px;
  border-color:transparent}

/* Three buttons no longer fit beside the copy on a narrow detail column. */
@media (max-width:1180px){
  .date-row{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
  .date-kind{grid-column:1/-1}
  .action-card.decision{flex-wrap:wrap}
  .gate-form{width:100%;align-items:stretch}
  .action-buttons{justify-content:flex-end}
}

/* ---------- gate 3: editing the drafted reply ----------
   The panel is a form rather than a read/edit toggle. A reviewer at this gate is
   here to change the words, so making them click "edit" first buys nothing. The
   inputs are styled as the draft itself, not as a form on top of one. */

.draft-form{display:flex;flex-direction:column;gap:14px}
.draft-field{display:flex;flex-direction:column;gap:6px}
.draft-field > span{font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;
  color:var(--muted)}
.draft-field input,
.draft-field textarea{
  width:100%;border-radius:9px;padding:11px 13px;color:var(--ink);
  background:rgba(4,19,35,.6);border:1px solid var(--line);
  font-family:inherit;font-size:var(--fs-base);line-height:1.65;
}
/* The subject reads as a heading, because that is what it is. */
.draft-field input{font-size:var(--fs-md);font-weight:620}
.draft-field textarea{resize:vertical;min-height:220px}
.draft-field input:focus,
.draft-field textarea:focus{outline:2px solid var(--blue);outline-offset:1px;
  border-color:transparent}

.draft-actions{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.draft-hint{font-size:var(--fs-sm);color:var(--muted-dim);margin-right:auto}

/* ---------- collapsible panels ----------
   <details>/<summary> rather than JS: keyboard operation and the disclosure
   role come from the browser, and the open state the server rendered is the
   same state the markup carries. Current browsers also expand a closed panel
   on find-in-page, which is worth re-checking before relying on it. Which panels start open
   is decided in reviews.panels, per stage -- NOT remembered in localStorage the
   way the queue width is. Panel state belongs to the opportunity; column width
   belongs to the person. */
details.card-panel > summary{cursor:pointer;align-items:center;list-style:none}
/* Both are needed: the pseudo-element for WebKit, list-style for Firefox. */
details.card-panel > summary::-webkit-details-marker{display:none}
details.card-panel > summary:hover{color:var(--ink)}
details.card-panel > summary:focus-visible{outline:2px solid #4b7ba6;outline-offset:4px;
  border-radius:6px}
/* Chevron sits last in the flex row and turns to point down when open. */
details.card-panel > summary::after{content:"";flex:none;width:7px;height:7px;
  margin-left:4px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(-45deg);transition:transform .15s ease}
details.card-panel[open] > summary::after{transform:translateY(-2px) rotate(45deg)}
@media (prefers-reduced-motion:reduce){
  details.card-panel > summary::after{transition:none}
}
/* Closed, the card is only its header, so the label's bottom margin would read
   as unexplained padding. */
details.card-panel:not([open]) > summary{margin-bottom:0}

/* The collapsed one-liner. It carries ordinary sentences -- a recommendation, a
   sender -- rather than the uppercase counts .section-label was spaced for, so
   it drops most of the tracking to stay readable. */
.panel-gist{letter-spacing:.05em;font-weight:650;text-align:right;overflow-wrap:anywhere}
/* A warning keeps its panel open by DEFAULT, but a reviewer can still collapse
   it by hand -- so the warning has to survive in the header. Same colours as the
   notes inside: amber slows you down, red disagrees with you. */
.panel-gist .alert{color:var(--red)}
.panel-gist .caution{color:var(--amber)}

/* The budget form reuses .draft-form wholesale; only the total differs. It is a
   number a reviewer checks against a spreadsheet, so it gets tabular figures and
   room to be read, rather than the body text the draft fields carry. */
.budget-form input[type="number"]{font-variant-numeric:tabular-nums;font-size:19px;
  letter-spacing:.01em}
/* Chrome and Safari put spinners on number inputs. They invite click-stepping a
   dollar total, which is never what anyone means. */
.budget-form input[type="number"]::-webkit-outer-spin-button,
.budget-form input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.budget-form input[type="number"]{-moz-appearance:textfield;appearance:textfield}

/* ---------- the compliance checklist (gate 5) ----------
   A grid rather than a table: nine rows with a label, a status and a note, and
   the note has to be an input a reviewer can type into. Collapses to stacked
   rows on a narrow screen, where a table would scroll sideways. */
.check-row{display:grid;grid-template-columns:minmax(0,1.1fr) 150px minmax(0,1.4fr);
  gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.check-row:first-of-type{border-top:none}
.check-label{font-size:var(--fs-base);color:var(--text-soft)}
/* A blocking line is the reason the gate is shut, so it reads as one. The bar
   rather than a background keeps nine rows from becoming a wall of red. */
.check-row.blocking{border-left:2px solid var(--red);padding-left:10px;margin-left:-12px}
.check-row.blocking .check-label{color:var(--ink)}
.check-row select,
.check-row input[type="text"]{width:100%;background:rgba(3,15,28,.72);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:7px 9px;font:inherit;
  font-size:var(--fs-base)}
.check-row select:focus,
.check-row input[type="text"]:focus{outline:2px solid #4b7ba6;outline-offset:1px;
  border-color:#4b7ba6}
.check-status{font-size:var(--fs-sm);color:var(--muted)}
.check-note{font-size:var(--fs-sm);color:var(--muted);overflow-wrap:anywhere}
.compliance-form .draft-actions{margin-top:14px}
@media (max-width:820px){
  .check-row{grid-template-columns:minmax(0,1fr);gap:6px}
  .check-row.blocking{margin-left:0}
}