/* FCSC — one stylesheet.
   Base: the intake flow's design system (David's palette and type, the
   sidebar/stepper/rail layout). The board used to carry its own copy of the
   tokens, which is how two screens in one product end up looking like two
   products: same colours, different everything else, and a font the intake
   flow declared but never loaded.
   Board-specific rules are appended below, not duplicated above. */
:root{
   --bg:#fbf9f4;--panel:#ffffff;--line:#e2ded3;--row:#ecebe3;--head:#f6f4ec;--chip:#f1efe6;
   --field:#ffffff;--fieldbd:#cdd5d1;
   --fg:#16323a;--muted:#4a6068;--stageoff:#6b7f86;
   --accent:#007a68;--accentfg:#ffffff;--accentsoft:#e2f4f0;--accentline:#9fd9cc;
   --brand:#00a991;--brandnight:#073b34;
   --risk:#a63a2b;--riskdeep:#8a2f22;--riskline:#e8cfc6;--riskpanel:#fdf6f3;--riskdash:#efd9d1;
   --ok:#1f6b45;--okline:#bfe0cb;--okbg:#e3f4ea;
   --yesbg:#fbe3dc;--yesfg:#8a2f22;--yesline:#d17a63;--nobg:#e3f4ea;--nofg:#1f6b45;--noline:#6fae88;
   --waitbg:#ffe2a3;--waitfg:#6b4a00;--waitline:#f5ab00;--waitpanel:#fff7e4;
   --practice:#f0ebf6;--practicefg:#5b4a7a;--practiceline:#cbbfe0;
   --shadow:0 6px 30px rgba(7,59,52,.08);--shadowpop:0 12px 32px rgba(7,59,52,.18);--focus:0 0 0 3px rgba(0,169,145,.35);
   --r-sm:8px;--r-md:12px;--r-lg:18px;
   --fontd:"Fraunces",Georgia,"Times New Roman",serif;
   --fontb:"Public Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
   --fontm:ui-monospace,Menlo,Consolas,monospace}
 :root[data-theme="dark"]{
   --bg:#0e1917;--panel:#15221f;--line:#27403b;--row:#22362f;--head:#1a2926;--chip:#22362f;
   --field:#101c1a;--fieldbd:#34524b;
   --fg:#eef3f0;--muted:#a4b9b3;--stageoff:#7f958f;
   --accent:#3fd0b4;--accentfg:#052a24;--accentsoft:#1b3b36;--accentline:#2f6f63;
   --brand:#3fd0b4;--brandnight:#eef3f0;
   --risk:#f08d74;--riskdeep:#f5a58f;--riskline:#4a2c24;--riskpanel:#2a1c18;--riskdash:#3d2822;
   --ok:#7fd39c;--okline:#2c4a36;--okbg:#17301f;
   --yesbg:#3a241d;--yesfg:#f5a58f;--yesline:#a63a2b;--nobg:#17301f;--nofg:#7fd39c;--noline:#3f6b4d;
   --waitbg:#34290f;--waitfg:#f0cc7a;--waitline:#8a6a1a;--waitpanel:#241d0e;
   --practice:#241f30;--practicefg:#c3b3e6;--practiceline:#443868;
   --shadow:none;--shadowpop:0 12px 32px rgba(0,0,0,.5);--focus:0 0 0 3px rgba(63,208,180,.4)}
 *{box-sizing:border-box}
 html{-webkit-text-size-adjust:100%}
 body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.5 var(--fontb);
   -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:"tnum" 1}
 a{color:var(--accent);text-decoration:none}
 a:hover{color:var(--brandnight);text-decoration:underline;text-underline-offset:2px}
 .nav a:hover,.btn:hover,.navitem:hover,.stagebar a:hover,.row a:hover,.gsearchout a:hover{text-decoration:none}
 .serif{font-family:var(--fontd);font-variation-settings:"SOFT" 30;letter-spacing:-.01em}
 .cap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.4}
 .sub{color:var(--muted);font-size:12.5px;line-height:1.45}
 .say{font-family:var(--fontd);font-variation-settings:"SOFT" 30;font-size:17px;line-height:1.6;color:var(--fg)}
 .say .sayp{margin:0 0 .55em}
 .say .sayp:last-child{margin-bottom:0}
 .say .saylist{margin:0 0 .55em;padding-left:1.15em;display:flex;flex-direction:column;gap:.2em}
 .say .saylist:last-child{margin-bottom:0}
 .say .saylist li{padding-left:.1em}
 .mono{font-family:var(--fontm);font-size:13px;line-height:1.6}
 .h1{font-size:22px;font-weight:600;line-height:1.2;color:var(--brandnight)}
 .h2{font-size:20px;font-weight:600;line-height:1.25;margin-bottom:4px}
 .ptitle{font-size:15px;font-weight:700;line-height:1.3}
 .risktext{color:var(--riskdeep)}
 .waittext{color:var(--waitfg)}
 .num{font-size:26px;font-weight:600;line-height:1.1;font-feature-settings:"tnum" 1}
 .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30ch;flex-shrink:0}
 .chip.status{background:var(--chip);color:var(--fg);border-color:var(--line)}
 /* buttons */
 .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:8px 14px;
   border:1px solid var(--fieldbd);background:var(--field);color:var(--fg);border-radius:var(--r-sm);
   font:inherit;font-weight:600;font-size:13.5px;line-height:1.2;cursor:pointer;white-space:nowrap;
   transition:background .12s,border-color .12s,box-shadow .12s;text-decoration:none}
 .btn:hover{border-color:var(--accent);color:var(--accent);background:var(--panel)}
 .btn:active{transform:translateY(1px)}
 .btn:focus-visible{outline:none;box-shadow:var(--focus)}
 .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accentfg)}
 .btn.primary:hover{background:var(--brandnight);border-color:var(--brandnight);color:var(--accentfg)}
 .btn.risk{background:var(--risk);border-color:var(--riskdeep);color:#fff;font-weight:700}
 .btn.risk:hover{background:var(--riskdeep);border-color:var(--riskdeep);color:#fff}
 :root[data-theme="dark"] .btn.risk,:root[data-theme="dark"] .btn.risk:hover{color:#1a0c08}
 .btn.ok{background:var(--okbg);border-color:var(--okline);color:var(--ok)}
 .btn.ok:hover{background:var(--ok);border-color:var(--ok);color:#fff}
 .btn.ghost{background:transparent;border-color:var(--line)}
 .btn.ghost:hover{background:var(--chip);border-color:var(--fieldbd);color:var(--fg)}
 .btn.link{background:none;border-color:transparent;color:var(--accent);padding-left:6px;padding-right:6px}
 .btn.link:hover{text-decoration:underline;background:none}
 .btn.small{min-height:32px;padding:6px 12px;font-size:13px}
 .btn.on{background:var(--accentsoft);border-color:var(--accent);color:var(--accent);font-weight:700}
 .btn[disabled]{opacity:.5;cursor:default;pointer-events:none}
 /* panels */
 .panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow)}
 .panel.flat{box-shadow:none}
 .panel.tint{background:var(--head)}
 .panel.risk{border-color:var(--riskline)}
 .panel.wait{border-color:var(--waitline);background:var(--waitpanel)}
 .panel.sel{border-color:var(--accent);background:var(--accentsoft);box-shadow:0 0 0 1px var(--accent) inset}
 .phead{display:flex;align-items:center;gap:10px;padding:14px 20px;border-bottom:1px solid var(--row);background:var(--head);
   border-radius:var(--r-md) var(--r-md) 0 0}
 .phead .cap{margin:0}
 .phead.risk{background:var(--riskpanel);color:var(--riskdeep);border-color:var(--riskdash)}
 .pbody{padding:18px 20px}
 /* chips */
 .chip{border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600;line-height:1.3;border:1px solid transparent;
   white-space:nowrap;display:inline-flex;align-items:center;gap:6px;min-height:24px}
 .chip.open{background:var(--waitbg);color:var(--waitfg);border-color:var(--waitline)}
 .chip.waiting{background:var(--waitbg);color:var(--waitfg);border-color:var(--waitline)}
 .chip.call_done{background:var(--accentsoft);color:var(--accent);border-color:var(--accentline)}
 .chip.mine{background:var(--okbg);color:var(--ok);border-color:var(--okline)}
 .chip.handed_off{background:var(--chip);color:var(--fg);border-color:var(--line)}
 .chip.dropped,.chip.screened_out{background:var(--chip);color:var(--muted);border-color:var(--line)}
 .chip.code{background:var(--brandnight);color:#fff;font-weight:700;font-family:var(--fontd);font-size:13px;letter-spacing:.02em}
 :root[data-theme="dark"] .chip.code{color:#052a24}
 .chip.practice{background:var(--practice);color:var(--practicefg);border:1px dashed var(--practiceline)}
 .chip .arrow{opacity:.55;font-size:10px}
 button.chip{cursor:pointer;min-height:32px;padding:6px 12px;font:inherit;font-size:12.5px;font-weight:600}
 button.chip:hover{border-color:var(--accent)}
 .chip.filter{background:var(--field);color:var(--fg);border-color:var(--fieldbd)}
 .chip.filter .n{font-weight:700;color:var(--muted)}
 .chip.filter.on{background:var(--accent);color:var(--accentfg);border-color:var(--accent)}
 .chip.filter.on .n{color:var(--accentfg)}
 /* fields */
 input,select,textarea{font:inherit;color:var(--fg);background:var(--field);border:1px solid var(--fieldbd);
   border-radius:var(--r-sm);padding:8px 11px;min-height:36px;line-height:1.4}
 input::placeholder,textarea::placeholder{color:var(--stageoff)}
 input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
 input[type=checkbox]{width:18px;height:18px;min-height:0;accent-color:var(--accent);margin:0}
 input[type=date]{font-feature-settings:"tnum" 1}
 textarea{width:100%;resize:vertical;min-height:5.2rem}
 /* The opening two sections are lines he reads out, so their note box is optional and
    is pushed back visually rather than removed: he can still record something. */
 textarea.optnote{background:transparent;border-style:dashed;border-color:var(--row);opacity:.62}
 textarea.optnote:hover,textarea.optnote:focus{opacity:1;background:var(--field);border-style:solid}
 label.fld{display:flex;flex-direction:column;gap:5px}
 label.fld span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
 label:has(>input[type=checkbox]){display:inline-flex;gap:8px;min-height:32px;align-items:center;cursor:pointer}
 :focus-visible{outline:none;box-shadow:var(--focus);border-radius:4px}
 a:focus-visible{box-shadow:var(--focus)}
 /* topbar, stage bar, layout */
 header.topbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:10px 32px;
   min-height:64px;background:color-mix(in srgb,var(--panel) 92%,transparent);backdrop-filter:saturate(1.2) blur(8px);
   -webkit-backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid var(--line)}
 header.topbar .btn{white-space:nowrap}
 header.topbar .vr{width:1px;height:24px;background:var(--line);flex-shrink:0}
 header.topbar .back{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;white-space:nowrap;min-height:32px}
 header.topbar .back:hover{color:var(--accent);text-decoration:none}
 .stagebar{display:flex;align-items:center;gap:8px;padding:8px 32px 12px;font-size:13px;font-weight:600;
   color:var(--stageoff);background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:var(--topbarh,64px);z-index:4}
 .stagebar>*{display:inline-flex;align-items:center;min-height:28px;padding:0 4px;border-radius:6px}
 .stagebar .on{color:var(--accent)}
 .stagebar a.on:hover{background:var(--accentsoft)}
 .stagebar .here{color:var(--brandnight);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
 .stagebar .bar{width:22px;height:2px;padding:0;min-height:0;background:var(--line)}
 .stagebar .bar.on{background:var(--accent)}
 .stagebar a{color:inherit}
 .stagebar a:hover{color:var(--accent)}
 main{padding:24px 32px 64px;max-width:1760px}
 .row2{display:flex;gap:24px;align-items:flex-start}
 .grow{flex:1 1 auto;min-width:0}
 .rail{width:340px;flex-shrink:0;display:flex;flex-direction:column;gap:14px;position:sticky;top:var(--stickyh,112px);
   max-height:calc(100vh - var(--stickyh,112px) - 24px);overflow:auto;scrollbar-width:thin}
 .pane{flex:1 1 auto;min-width:0}
 @media (max-width:1180px){.row2{flex-wrap:wrap}.rail{width:100%;position:static;max-height:none}}
 /* A call section is a fixed 300px script column beside the answer column. Below about
    1000px of PANE width (a split-screened window, which is how the risk ladder is
    actually used: script on one side, notes on the other) that answer column squeezes
    to a few characters wide and the Yes/No pills wrap into a stack. Stack the two
    columns instead. */
 .secgrid{display:grid;grid-template-columns:300px 1fr;gap:22px;padding:14px 20px 20px;align-items:start}
 @media (max-width:1000px){.secgrid{grid-template-columns:1fr;gap:14px}}

 /* search */
 .gsearch{position:relative;flex-shrink:0;margin-left:auto}
 .gsearch input{width:290px;min-height:36px;padding:7px 14px 7px 34px;font-size:13.5px;border-radius:999px;
   background:var(--field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234a6068' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") 12px center no-repeat}
 .gsearch input:focus{width:360px}
 .gsearchout{position:absolute;right:0;top:44px;width:440px;z-index:20;overflow-y:auto;max-height:70vh;
   background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadowpop)}
 .gsearchout a{display:block;padding:10px 14px;color:var(--fg);border-bottom:1px solid var(--row);min-height:40px}
 .gsearchout a:last-child{border-bottom:none}
 .gsearchout a:hover{background:var(--head)}
 .gsearchout .none{padding:12px 14px;color:var(--muted);font-size:13px}
 /* An answer in the dropdown is the WHOLE answer. He is on the phone: a truncated
    line he has to click to finish is worse than no answer at all. */
 .gsearchout .faqhit{padding:10px 14px;border-bottom:1px solid var(--row);cursor:default}
 .gsearchout .faqhit:last-child{border-bottom:none}
 .gsearchout .faqhit .q{font-weight:600;font-size:13.5px;margin-bottom:2px}
 .gsearchout .faqhit .a{font-size:13.5px;line-height:1.55;color:var(--fg)}
 .gsearchout .cap{padding:10px 14px 4px;border-bottom:none}
 .gsearchout a.sub{min-height:0;padding:8px 14px}
 /* Jumping from the section rail landed just BELOW the section title: the scroll margin
    counted the top bar but not the STAGE BAR, which is a second sticky strip underneath
    it. Both are measured (--stickyh), because the top bar wraps to two lines on a
    crowded record. */
 main .panel[id^="sec-"]{scroll-margin-top:calc(var(--stickyh,112px) + 14px)}
 .panel.flash{box-shadow:0 0 0 3px var(--accent);transition:box-shadow .3s}
 .faqgroup{position:sticky;top:var(--topbarh,64px);background:var(--panel);padding:14px 0 8px;margin:0 0 4px;z-index:1;border-bottom:1px solid var(--row)}
 .faqrow{padding:12px 0;border-bottom:1px solid var(--row)}
 .faqrow:last-child{border-bottom:none}
 .faqrow .q{font-weight:600;margin-bottom:3px;font-size:14.5px}
 .faqrow .a{color:var(--fg);font-size:14.5px;line-height:1.6}
 /* left nav */
 #app{display:flex;align-items:stretch;min-height:100vh}
 .nav{width:216px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);
   position:sticky;top:0;height:100vh;padding:18px 14px 14px;display:flex;flex-direction:column;gap:2px;overflow:hidden auto}
 .nav .brand{display:flex;align-items:center;gap:10px;padding:2px 8px 16px;line-height:1.2}
 .nav .brand .mark{width:30px;height:30px;flex-shrink:0;border-radius:50%;background:
   conic-gradient(from 200deg,#4a90d9 0 120deg,#00a991 120deg 240deg,#f5ab00 240deg 360deg);
   -webkit-mask:radial-gradient(circle at center,transparent 44%,#000 46%);mask:radial-gradient(circle at center,transparent 44%,#000 46%)}
 .nav .brand .word{font-size:20px;font-weight:600;color:var(--brandnight)}
 .nav .brand .org{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.3;margin-top:2px}
 .nav .cta{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
 .navitem{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;min-height:36px;
   border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--fg);position:relative}
 .navitem:hover{background:var(--chip);color:var(--fg)}
 .navitem.on{background:var(--accentsoft);color:var(--accent);font-weight:600}
 .navitem.on::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:2px;background:var(--accent)}
 .navitem .n{font-size:11.5px;font-weight:700;color:var(--accentfg);background:var(--accent);border-radius:999px;min-width:20px;height:20px;
   display:inline-flex;align-items:center;justify-content:center;padding:0 6px}
 .navitem.on .n{color:var(--accentfg)}
 .nav .cap{padding:0 10px 6px}
 .nav hr{border:0;border-top:1px solid var(--row);margin:12px 4px 10px}
 .nav .outgroup{border-top:1px solid var(--line);margin:10px 0 0;padding-top:10px}
 .nav .outgroup .cap{padding:0 10px 5px}
 .navitem.out{color:var(--muted);font-size:13px;justify-content:flex-start;gap:7px;min-height:32px;padding:6px 10px}
 .navitem.out .arrow{font-size:11px;opacity:.7}
 .navitem.out:hover{color:var(--accent)}
 .nav .themeslot{padding:8px 4px 0}
 #theme{position:static;width:100%;border-color:transparent;background:transparent;color:var(--muted);font-weight:500;justify-content:flex-start;padding:6px 10px;min-height:32px}
 #theme:hover{background:var(--chip);color:var(--fg)}
 #theme::before{content:"\25D1";margin-right:2px;font-size:12px}
 .chiprow{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
 /* tables and rows */
 .row{transition:background .12s}
 .row.clickrow{cursor:pointer;position:relative}
 .row.clickrow:hover{background:var(--head)}
 .row.clickrow:hover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
 .row.clickrow:focus-within{background:var(--head)}
 .thead{background:var(--head);border-bottom:1px solid var(--row)}
 .thead .cap{color:var(--muted)}
 .logpanel{background:var(--head)}
 /* key / value rows */
 .kv{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:6px 0;font-size:13.5px;border-bottom:1px solid var(--row)}
 .kv:last-child{border-bottom:none}
 .kv .k{color:var(--muted)}
 .kv .v{font-weight:600;text-align:right;font-feature-settings:"tnum" 1}
 .kv .v.ok{color:var(--ok)}
 .kv .v.bad{color:var(--riskdeep)}
 .kv .v.quiet{color:var(--muted);font-weight:500}
 .empty{color:var(--muted);padding:32px 24px;text-align:left;display:flex;flex-direction:column;gap:4px}
 .empty .ptitle{color:var(--fg)}
 .toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,8px);background:var(--brandnight);color:#fff;padding:10px 16px;
   border-radius:999px;font-size:13.5px;font-weight:500;opacity:0;transition:opacity .18s,transform .18s;pointer-events:none;z-index:60;
   box-shadow:var(--shadowpop);max-width:min(560px,90vw);text-align:center}
 .toast.show{opacity:1;transform:translate(-50%,0)}
 :root[data-theme="dark"] .toast{background:#eef3f0;color:#052a24}
 /* call page */
 .callrail{position:sticky;top:var(--stickyh,112px);max-height:calc(100vh - var(--stickyh,112px) - 28px);overflow:auto;scrollbar-width:thin}
 .railitem{min-height:34px;cursor:pointer}
 .railitem:hover{background:var(--chip)}
 .railitem .tick{transition:background .15s,border-color .15s}
 .sechead{display:flex;align-items:center;gap:11px;padding:14px 20px 0}
 /* This used to be position:sticky under the top bar. On a short viewport, and on every
    split screen, it floated over the script text underneath it and covered the question he
    was reading out. It scrolls with its own section now. */
 .sechead.risk{background:var(--riskpanel);border-bottom:1px solid var(--riskdash);padding:14px 20px;
   border-radius:var(--r-md) var(--r-md) 0 0}
 .pill{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-height:32px;min-width:56px;padding:0 14px;
   border-radius:999px;font-size:13px;font-weight:600;border:1.5px solid var(--fieldbd);background:var(--field);color:var(--muted);user-select:none}
 .pill:hover{border-color:var(--muted);color:var(--fg)}
 .pill:focus-visible,.codecard:focus-visible,.chkbox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
 .pill.yes.on{background:var(--yesbg);border-color:var(--yesline);color:var(--yesfg);font-weight:700}
 .pill.no.on{background:var(--nobg);border-color:var(--noline);color:var(--nofg);font-weight:700}
 /* The ladder's Yes is the alarming answer, so .yes is red and .no is green. Consent
    runs the other way: agreeing is the good outcome. .good/.bad carry the meaning so a
    consent Yes never renders as a warning. */
 .pill.good.on{background:var(--nobg);border-color:var(--noline);color:var(--nofg);font-weight:700}
 .pill.bad.on{background:var(--yesbg);border-color:var(--yesline);color:var(--yesfg);font-weight:700}
 .rq{border-bottom:1px dashed var(--riskdash)}
 .crisis{border-top:1px solid var(--riskdash);padding-top:10px;margin-top:12px;font-size:13.5px;color:var(--fg);line-height:1.6}
 /* Reference material on the risk screen. Closed until the assessment finds something,
    because a 500-word wall of crisis lines, police rules and consultation fields is
    noise while he is still asking the ladder, and the ladder is the job. */
 .fold{border:1px solid var(--fieldbd);border-radius:8px;background:var(--panel)}
 .fold>summary{list-style:none;cursor:pointer;padding:9px 12px;display:flex;align-items:center;gap:8px}
 .fold>summary::-webkit-details-marker{display:none}
 .fold>summary::after{content:'+';margin-left:auto;font-size:15px;color:var(--muted);line-height:1}
 .fold[open]>summary::after{content:'\2212'}
 .fold>summary .cap{padding:0}
 .fold>summary .sub{font-weight:400}
 .fold>.foldbody{padding:0 12px 11px}
 .fold.hot{border:1.5px solid var(--riskline);background:var(--riskpanel)}
 .fold.hot>summary .cap{color:var(--riskdeep)}
 .crisis strong{font-feature-settings:"tnum" 1;letter-spacing:.02em}
 .savebar{font-size:12.5px;color:var(--fg);display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
 .savebar::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ok)}
 /* decision */
 .codecard{min-height:104px;transition:border-color .12s,box-shadow .12s;position:relative;overflow:hidden}
 .codecard:hover{border-color:var(--accent)}
 .codecard.hint{border-color:var(--accentline)}
 .codecard.hint::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand)}
 .codecard.sel{border-color:var(--accent);background:var(--accentsoft);box-shadow:0 0 0 1px var(--accent) inset}
 .codecard .num{margin-bottom:2px}
 .codecard:focus-visible{outline:none;box-shadow:var(--focus)}
 .callout{border-left:3px solid var(--brand);background:var(--accentsoft);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:10px 14px;font-size:13.5px;line-height:1.5;color:var(--fg)}
 /* follow */
 .chkbox{width:24px;height:24px;flex-shrink:0;border-radius:7px;border:1.6px solid var(--fieldbd);cursor:pointer;background:var(--field);
   display:flex;align-items:center;justify-content:center;font-size:13px;margin-top:-2px}
 .chkbox:hover{border-color:var(--accent)}
 .chkbox.done{background:var(--accent);border-color:var(--accent);color:var(--accentfg)}
 .chkbox:focus-visible{outline:none;box-shadow:var(--focus)}
 /* home, queue */
 .counter{cursor:pointer;border-radius:var(--r-sm);padding:6px 10px;margin:-6px -10px;border:1px solid transparent}
 .counter:hover{border-color:var(--line);background:var(--head)}
 .qactions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;min-width:0}

/* ---- additions for this page only ---- */
.panewrap{max-width:1180px;margin:0 auto;padding:0 26px 60px}
.steps{display:flex;gap:8px;align-items:center;padding:14px 0 18px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;font-size:13px;font-weight:600;
      border:1px solid var(--fieldbd);background:var(--field);color:var(--muted);cursor:pointer}
.step.on{background:var(--accent);border-color:var(--accent);color:var(--accentfg)}
.step.done{background:var(--accentsoft);border-color:var(--accentline);color:var(--accent)}
.step .dot{width:19px;height:19px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
           font-size:11px;font-weight:700;background:rgba(0,0,0,.08)}
.step.on .dot{background:rgba(255,255,255,.22)}
.notebox{font-family:var(--fontm);font-size:12.5px;line-height:1.65;white-space:pre-wrap;background:var(--field);
         border:1px solid var(--fieldbd);border-radius:var(--r-sm);padding:16px 18px;max-height:440px;overflow:auto}
.chk{display:flex;gap:12px;padding:13px 4px;border-bottom:1px solid var(--row);align-items:flex-start}
.chk:last-child{border-bottom:none}
.chk input{margin-top:3px;width:17px;height:17px;flex-shrink:0;accent-color:var(--accent)}
.chk .t{font-weight:600;font-size:14px}
.secbox{scroll-margin-top:20px}
/* Script left, what they say right. On a call you read the left column and
   type into the right one, so they sit side by side rather than stacked —
   stacked meant scrolling away from the prompt to record the answer. */
.sectwo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:start}
.sectwo .colcap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
                font-weight:700;padding-bottom:7px}
.sectwo .respcol{border-left:1px solid var(--row);padding-left:22px}
@media(max-width:1150px){
  .sectwo{grid-template-columns:1fr;gap:14px}
  .sectwo .respcol{border-left:none;padding-left:0;border-top:1px solid var(--row);padding-top:14px}
}
.say{background:var(--accentsoft);border-left:3px solid var(--accentline);padding:10px 14px;border-radius:0 8px 8px 0;
     font-size:13.5px;white-space:pre-wrap;margin-bottom:11px}
textarea,input[type=text]{width:100%;font:inherit;font-size:13.5px;padding:9px 11px;border:1px solid var(--fieldbd);
     border-radius:var(--r-sm);background:var(--field);color:var(--fg);resize:vertical}
textarea:focus,input:focus{outline:none;box-shadow:var(--focus);border-color:var(--accent)}
label.fld{display:block;margin-bottom:10px}
label.fld .cap{padding:0 0 4px}
.savedpill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;font-size:12.5px;
     font-weight:600;background:var(--okbg);border:1px solid var(--okline);color:var(--ok)}
@media(max-width:860px){.row2{flex-direction:column}.callrail{display:none}.rail{width:auto}}


/* ── Board and portal screens ───────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;
  display:flex;flex-direction:column;gap:9px;box-shadow:var(--shadow)}
.card .cid{font-family:var(--fontm);font-size:13.5px;font-weight:600;color:var(--brandnight)}
.card .cardtop{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.card .facts{font-size:13px;color:var(--fg)}
.card .prefs{font-size:12.5px;color:var(--muted)}
.card .cardsum{font-size:12.5px;line-height:1.5;color:var(--fg);background:var(--head);
  border:1px solid var(--row);border-radius:var(--r-sm);padding:9px 11px}
.card .cardact{display:flex;justify-content:flex-end}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip.rematch{background:var(--practice);color:var(--practicefg);border-color:var(--practiceline)}
.chip.risk{background:var(--yesbg);color:var(--yesfg);border-color:var(--yesline)}
.chip.unknown{background:var(--waitbg);color:var(--waitfg);border-color:var(--waitline)}
.chip.ok{background:var(--okbg);color:var(--ok);border-color:var(--okline)}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin:0 0 18px}
.filters label{display:flex;flex-direction:column;gap:4px;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);font-weight:600}
/* One row per facet: a label, then the chips for that facet. */
.facet{display:flex;align-items:flex-start;gap:12px;padding:5px 0;flex-wrap:wrap}
.facet .cap{width:96px;flex-shrink:0;padding-top:9px}
.facet .chiprow{flex:1 1 auto}
.facetform{margin:0 0 14px}
.note{border-left:3px solid var(--accentline);background:var(--accentsoft);padding:12px 14px;
  border-radius:0 var(--r-sm) var(--r-sm) 0;font-size:13px;margin:0 0 18px}
.note.warn{border-color:var(--waitline);background:var(--waitpanel)}
.note.stop{border-color:var(--riskline);background:var(--riskpanel);color:var(--riskdeep)}
.tablewrap{overflow-x:auto}
.count{display:flex;gap:20px;flex-wrap:wrap;margin:0 0 16px;font-size:13px;color:var(--muted)}
.count b{color:var(--fg);font-size:16px;font-weight:600}
.banner{background:var(--riskpanel);border-bottom:1px solid var(--riskline);color:var(--riskdeep);
  font-size:12px;font-weight:600;text-align:center;padding:7px 20px}
.pagehead{display:flex;align-items:center;gap:12px;padding:20px 0 2px;flex-wrap:wrap}
.pagehead .h2{margin:0}
.dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:13.5px}
.dl dt{color:var(--muted)}
.dl dd{margin:0}
/* My cases: one row per case, the whole row is the link. */
.caserow{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid var(--row);
  color:var(--fg);flex-wrap:wrap}
.caserow:last-child{border-bottom:none}
.caserow:hover{background:var(--head);text-decoration:none}
.caserow .cid{font-family:var(--fontm);font-weight:600;color:var(--brandnight)}
.caserow .next{color:var(--accent);font-weight:600;font-size:13px}
.panel.pad0{padding:0}
.m0{margin:0}
.tightp{margin:2px 0 0}
.mt2{margin-top:2px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt18{margin-top:18px}.mt20{margin-top:20px}
.hr{border:0;border-top:1px solid var(--line);margin:18px 0}

/* ── Intake flow components ─────────────────────────────────────────────── */
/* Every rule below replaces an inline style="" that used to be written into
   the markup. CSP stays default-src 'none' with style-src 'self', so an
   inline style is not a tidiness question — the browser drops it and the
   screen renders wrong. */
.pad-sm{padding:13px 15px}
.pad-md{padding:16px 19px}
.pad{padding:18px 20px}
.pad-lg{padding:20px 22px}
.pad0{padding:0}
.dashed{border-style:dashed}
.bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bar.wide{gap:15px}
.stack{display:flex;flex-direction:column;gap:16px}
.full{width:100%}
.center{text-align:center}
.loose{line-height:1.55}
.looser{line-height:1.6}
.ital{font-style:italic}
/* The script's vertical rhythm is irregular by design — a spacing scale would
   flatten the difference between "next line of the same thought" and "next
   thing". These carry the prototype's own numbers. */
.mb0{margin-bottom:0}.mb2{margin-bottom:2px}.mb3{margin-bottom:3px}.mb4{margin-bottom:4px}
.mb6{margin-bottom:6px}.mb8{margin-bottom:8px}.mb9{margin-bottom:9px}.mb10{margin-bottom:10px}
.mb11{margin-bottom:11px}.mb12{margin-bottom:12px}.mb14{margin-bottom:14px}.mb16{margin-bottom:16px}
.mb20{margin-bottom:20px}
.mt3{margin-top:3px}.mt6{margin-top:6px}.mt9{margin-top:9px}.mt14{margin-top:14px}.mt16{margin-top:16px}
.pt4{padding-top:4px}.pt8{padding-top:8px}.pt9{padding-top:9px}
.cap.read{padding:8px 0 2px}
.cap.aside{padding:6px 0 4px}
.cap.group{padding:0 0 5px}
.cap.tight{padding:2px 0 4px}
.ptitle.sm{font-size:14px}
.ptitle.lg{font-size:15.5px}
.ptitle.on{color:var(--accent)}
.ptitle.risktext{color:var(--riskdeep)}
/* "Not read aloud — for you" bullets. */
.doitem{display:flex;gap:9px;font-size:13.5px;padding:3px 0;line-height:1.55}
.doitem .b{font-weight:700;color:var(--accent)}
.doitem.warn .b{color:var(--risk)}
/* A labelled box inside the risk panel. */
.qbox{border:1px solid var(--fieldbd);border-radius:8px;background:var(--panel);padding:10px 12px;margin-bottom:11px}
/* Chip-shaped checkboxes: the concern picker and the funding picker. */
.chipwrap{display:flex;flex-wrap:wrap;gap:6px}
.chipbox{cursor:pointer;border-radius:999px;padding:5px 13px;font-size:12.5px;line-height:1.5;
  border:1px solid var(--fieldbd);background:var(--field);color:var(--muted);display:inline-flex;align-items:center}
.chipbox:hover{border-color:var(--accent)}
.chipbox input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.chipbox.on{border-color:var(--accent);background:var(--accent);color:var(--accentfg)}
.chipbox:focus-within{box-shadow:var(--focus)}
/* Consent acknowledgement, and the stop-the-call block under a refusal. */
.askbox{border:1px solid var(--fieldbd);border-radius:9px;background:var(--field);padding:11px 13px;margin-bottom:11px}
.askbox .ask{font-size:13.5px;font-weight:600;margin-bottom:8px}
.pillrow{display:flex;gap:7px;flex-wrap:wrap}
.stopbox{border:1.5px solid var(--riskline);background:var(--riskpanel);border-radius:9px;padding:11px 13px;margin-top:10px}
.stopbox .t{font-weight:700;color:var(--riskdeep);font-size:13.5px;margin-bottom:5px}
.stopbox .sub{padding:3px 0;line-height:1.55}
.identbox{border:1px solid var(--accentline);background:var(--accentsoft);border-radius:9px;
  padding:11px 13px;margin-bottom:11px}
.identbox .ask{font-size:13.5px;font-weight:600;margin-bottom:8px}
/* Referral option cards: only the branch that applies is lit. */
.optgrid{display:grid;gap:11px}
.optcard.hot{border-color:var(--accentline);background:var(--accentsoft)}
.optcard.cold{opacity:.72}
.fundblock{border-top:1px solid var(--row);margin-top:14px;padding-top:14px}
/* Risk. */
.riskbox{border:1px solid var(--riskline);background:var(--riskpanel);border-radius:10px;padding:13px 15px}
.rq{display:grid;grid-template-columns:1fr auto;gap:4px 14px;align-items:center;padding:9px 0;
  border-bottom:1px dashed var(--riskdash)}
.rq .q{font-size:13.5px}
.rq .pills{display:flex;gap:5px}
.rq .det{grid-column:1/-1}
.domains{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:2px 14px}
.cbx{display:flex;align-items:center;gap:8px;font-size:13px;padding:2px 0}
.cbxrow{display:flex;gap:18px;flex-wrap:wrap;margin-bottom:11px}
.doclink{display:inline-flex;padding:4px 9px;border:1px solid var(--fieldbd);border-radius:999px;margin:0 6px 6px 0}
.chip.wait{background:var(--waitbg);color:var(--waitfg);border-color:var(--waitline)}
.crisis strong.n{color:var(--risk)}
/* The section rail on the call screen. */
.callrail{width:262px;flex-shrink:0;padding:14px 12px;display:flex;flex-direction:column;gap:2px}
.callrail>.cap{padding:2px 10px 8px}
.railitem{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;font-size:13.5px;
  cursor:pointer;color:var(--muted)}
.railitem.risk{background:var(--riskpanel);color:var(--riskdeep);font-weight:700}
.railitem .tick{width:16px;height:16px;flex-shrink:0;border-radius:50%;border:1.5px solid var(--fieldbd);
  display:inline-flex;align-items:center;justify-content:center;font-size:10px;color:var(--accentfg)}
.railitem .tick.on{background:var(--accent);border-color:var(--accent)}
.progwrap{border-top:1px solid var(--row);margin:9px 4px 0;padding-top:11px}
.progwrap .sub{padding:0 6px}
.progtrack{height:5px;border-radius:3px;background:var(--chip);overflow:hidden;margin:6px 6px 0}
.progbar{height:100%;background:var(--accent);width:0;transition:width .2s}
/* Field grids inside a section's answer column. */
.fldgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:11px}
.fldcol{display:grid;gap:10px;margin-bottom:11px}
textarea.short{min-height:52px;opacity:.75}
textarea.short:focus{opacity:1}
textarea.tall{min-height:92px}
textarea.taller{min-height:96px}
/* Decision and follow-through. */
.choicegrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
@media(max-width:760px){.choicegrid{grid-template-columns:1fr}}
.routegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}
.codecard{cursor:pointer}
.codecard.sel .ptitle{color:var(--accent)}
.callout.risk{border-left-color:var(--risk);background:var(--riskpanel)}
.callout.risk strong{color:var(--riskdeep)}
.notebox.short{max-height:170px}
.sub.cap-gap{padding:2px 0 4px}
.sub.optlabel{padding:6px 0}
.panel.riskpanel{border-color:var(--riskline);background:var(--riskpanel)}
.panel.lit{border-color:var(--accentline)}
.card.compact{gap:7px}
.card.compact .facts,.card.compact .prefs{font-size:12.5px}
.panel.sel .ptitle{color:var(--brandnight)}
.sub.risktext{color:var(--riskdeep)}
.riskbox .chk{border-bottom:none;padding:8px 2px}
.riskbox .qbox .chk:first-child{padding-top:0}
.panel.risk .fld{margin-bottom:12px}
.fold>summary .sub{margin-left:auto;padding-right:8px}
.chk .savedpill{margin-top:6px}
.chk .fld{margin-bottom:0}
/* ── Reference pages ────────────────────────────────────────────────────── */
.scriptcol .colcap{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding-bottom:7px}
.navitem.formlink{align-items:flex-start;min-height:0;padding:10px;gap:9px}
.navitem.formlink .t{font-weight:600;font-size:13.5px}
.navitem.formlink .sub{white-space:normal;font-weight:400}
.navitem.formlink .arrow{padding-top:3px}
.choicegrid.mb0{margin-bottom:0}
.rail .navitem{min-height:32px;font-size:13px}
.gsearchout[hidden]{display:none}
.faqrow .a{white-space:normal}

/* ---- board as a list (Jenny, 15 Sep): one filter row, one table, Take on every row ---- */
.filterbar{align-items:flex-end;gap:14px;margin:0 0 14px}
.filterbar select{min-width:170px}
.filterbar label.check{flex-direction:row;align-items:center;gap:8px;font-size:13px;letter-spacing:0;
  text-transform:none;color:var(--fg);padding-bottom:9px;cursor:pointer}
.boardbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 12px}
.boardbar .count{margin:0}
.boardlist{width:100%;border-collapse:collapse;font-size:13.5px}
.boardlist th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:10px 12px;background:var(--head);border-bottom:1px solid var(--row);white-space:nowrap}
.boardlist td{padding:11px 12px;border-top:1px solid var(--row);vertical-align:middle}
.boardlist tbody tr:first-child td{border-top:0}
.boardlist tr.sumrow td{border-top:0;padding-top:0;color:var(--muted);font-size:12.5px;line-height:1.5}
.boardlist td.tick,.boardlist th.tick{width:34px;padding-right:0}
.boardlist td.act{text-align:right;white-space:nowrap}
.boardlist tbody tr:not(.sumrow):hover td{background:var(--head)}
.boardlist input[type=checkbox]{width:17px;height:17px;accent-color:var(--accent);cursor:pointer}
.chip.stage.intake{background:var(--waitbg);color:var(--waitfg);border-color:var(--waitline)}
.chip.stage.finding{background:var(--practice);color:var(--practicefg);border-color:var(--practiceline)}

/* ---- case page (Jenny, 15 Sep): work on the left, the unchanging facts on the right ---- */
.contactcard .dl{gap:7px 14px}
.contactcard .cid{font-family:var(--fontm);font-size:14px;font-weight:600;color:var(--brandnight)}
.copyline{display:inline-flex;align-items:center;gap:6px;max-width:100%}
.copyline .val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.copybtn{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:6px;
  border:1px solid var(--fieldbd);background:var(--field);color:var(--muted);cursor:pointer;padding:0;flex-shrink:0}
.copybtn:hover{border-color:var(--accent);color:var(--accent)}
.copybtn svg{width:14px;height:14px}
.btn.block{display:flex;width:100%}
.tpl{border:1px solid var(--line);border-radius:10px;background:var(--field);margin-top:12px;overflow:hidden}
.tpl .tplhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;background:var(--head);border-bottom:1px solid var(--row)}
.tpl .tplhead form{margin:0}
.tpl pre{margin:0;padding:14px 16px;font:13px/1.6 var(--fontb);white-space:pre-wrap;color:var(--fg);max-height:none;border:0;border-radius:0;background:transparent}
.chip.sent{background:var(--okbg);color:var(--ok);border-color:var(--okline)}
.whenrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px}
.whenrow label{flex-direction:row;align-items:center;gap:6px;letter-spacing:0;text-transform:none;font-size:13px;color:var(--fg)}
.whenrow input[type=datetime-local]{min-height:34px}
.whenrow input[type=datetime-local]:disabled{opacity:.45}

/* ---- board filters as checkbox dropdowns ---- */
.filterbar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.ddown{position:relative}
.ddown>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:36px;padding:6px 12px;
  border:1px solid var(--fieldbd);border-radius:var(--r-sm);background:var(--field);font-size:13.5px;min-width:190px}
.ddown>summary::-webkit-details-marker{display:none}
.ddown>summary::after{content:'\25BE';margin-left:auto;color:var(--muted);font-size:12px}
.ddown>summary .cap{padding:0}
.ddown>summary .val{font-weight:600}
.ddown.on>summary{border-color:var(--accent);background:var(--accentsoft)}
.ddown .ddlist{position:absolute;z-index:30;top:calc(100% + 6px);left:0;min-width:240px;max-height:320px;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadowpop);padding:8px}
.ddown .ddlist label{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:6px;font-size:13.5px;cursor:pointer}
.ddown .ddlist label:hover{background:var(--head)}
.ddown .ddlist input{width:16px;height:16px;accent-color:var(--accent);margin:0}
.ddown .ddlist .n{margin-left:auto;color:var(--muted);font-size:12px}
/* The case page keeps its two columns down to a laptop-width pane; the
   contact card is the reference the student reads while doing the work. */
@media (min-width:900px){.row2.casewrap{flex-wrap:nowrap}.casewrap .rail{width:320px;position:sticky;top:20px;max-height:none}.casewrap>.grow{min-width:0}}
.contactcard .dl dd{min-width:0}
.contactcard .copyline{width:100%}

/* ---- My cases: KPI tiles and stage column ---- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 16px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px}
.kpi .num{font-size:26px}
.kpi .cap{padding:0 0 4px}
.caserow .stage{display:flex;flex-direction:column;gap:2px;min-width:200px}
.caserow .stage .sub{font-size:12px}
.chip.st-before{background:var(--waitbg);color:var(--waitfg);border-color:var(--waitline)}
.chip.st-intake{background:var(--accentsoft);color:var(--accent);border-color:var(--accentline)}
.chip.st-after{background:var(--practice);color:var(--practicefg);border-color:var(--practiceline)}
.chip.st-counselling{background:var(--okbg);color:var(--ok);border-color:var(--okline)}
.chip.st-closed{background:var(--chip);color:var(--muted);border-color:var(--line)}
/* ---- outreach templates: collapsed to a preview, expand to read ---- */
.tplfold>summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:13px;color:var(--fg);display:flex;gap:10px;align-items:baseline}
.tplfold>summary::-webkit-details-marker{display:none}
.tplfold>summary .peek{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.tplfold>summary .more{color:var(--accent);font-weight:600;white-space:nowrap}
.tplfold[open]>summary .peek{display:none}
.tplfold[open]>summary .more::after{content:' — hide'}
.tpl .tplhead .whenrow input[type=datetime-local]{min-height:32px;font-size:12.5px}
/* ---- contact log ---- */
.logtable td{vertical-align:top}
.lognote>summary{list-style:none;cursor:pointer;color:var(--fg)}
.lognote>summary::-webkit-details-marker{display:none}
.lognote>summary .peek{display:inline-block;max-width:32ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}
.lognote>summary .more{color:var(--accent);font-size:12px;margin-left:6px}
.lognote pre{margin:6px 0 0;font:12.5px/1.55 var(--fontb);white-space:pre-wrap;color:var(--muted)}
.logedit>summary{list-style:none;cursor:pointer;color:var(--accent);font-size:12.5px;font-weight:600}
.logedit>summary::-webkit-details-marker{display:none}
.logedit .filters{margin:10px 0 0;padding:12px;border:1px dashed var(--line);border-radius:var(--r-sm);background:var(--head)}
.releasebox textarea{min-height:76px}
.tpl .tplfoot{border-top:1px solid var(--row);border-bottom:0}
.caserow .next{white-space:normal;text-align:right;max-width:34ch}

/* ---- David's client tab, on our record (Jenny, 15 Sep) ---- */
.recordbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.recordbar .back{color:var(--muted);font-size:13px;white-space:nowrap}
.recordbar .back:hover{color:var(--accent);text-decoration:none}
.recordbar .vr{width:1px;height:24px;background:var(--line)}
.recordbar .who{font-family:var(--fontd);font-size:22px;font-weight:600;color:var(--brandnight)}
.stagebar.inpage{position:static;padding:8px 0 14px;background:transparent;border-bottom:1px solid var(--line);margin:0 0 18px}
.stagebar .here{color:var(--brandnight);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.stagebar .bar{width:22px;height:2px;padding:0;min-height:0;background:var(--line)}
.stagebar .bar.on{background:var(--accent)}
.numcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px}
.numcards .panel .serif.num{font-size:26px}
.numcards .panel.hot{background:var(--riskpanel);border-color:var(--riskline)}
.numcards .panel.hot .cap,.numcards .panel.hot .num{color:var(--riskdeep)}
@media(max-width:700px){.numcards{grid-template-columns:1fr}}
.activity .row{display:grid;grid-template-columns:150px 200px 1fr;gap:16px;padding:11px 20px;border-top:1px solid var(--row);font-size:13.5px}
.activity .row .what{font-weight:600}
.stagemenu{position:relative}
.stagemenu>summary{list-style:none;cursor:pointer}
.stagemenu>summary::-webkit-details-marker{display:none}
.stagemenu .menu{position:absolute;right:0;top:40px;z-index:30;width:290px;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;box-shadow:var(--shadowpop);padding:12px 14px}
.stagemenu .menu form{margin:0 0 6px}
.stagemenu .menu button{width:100%;text-align:left}
/* ledger */
.ledger{display:grid;grid-template-columns:230px 130px 96px 1fr;gap:14px;align-items:center;padding:13px 20px;border-top:1px solid var(--row);font-size:13.5px}
.ledger.head{background:var(--head);border-top:0;padding:10px 20px}
.ledger .who{font-weight:600}
.ledger .sub{font-size:12.5px}
.ledger .next{font-weight:600;color:var(--riskdeep)}
.ledger .next.quiet{color:var(--muted);font-weight:500}
.ledger .lastc{display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.ledger .lastc .chip{background:var(--chip);border-color:var(--line);color:var(--fg);font-weight:500}
@media(max-width:1000px){.ledger{grid-template-columns:1fr 1fr;row-gap:6px}.ledger.head{display:none}}
.showrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.activity .head{padding:16px 20px 14px}
.activity .empty{padding:0 20px 18px}
.numcards .panel .serif.num{font-size:22px;line-height:1.15}
@media(max-width:1250px){.numcards{grid-template-columns:repeat(3,minmax(0,1fr))}.numcards .panel .serif.num{font-size:19px}}

/* ---- Reaching them: David's attempt log ---- */
.reaching .head{padding:16px 20px 14px;align-items:baseline}
.attempt{display:grid;grid-template-columns:130px 150px 110px 1fr auto;gap:14px;align-items:start;padding:12px 20px;border-top:1px solid var(--row);font-size:13.5px}
.attempt.head{background:var(--head);padding:9px 20px}
.attempt .how{font-weight:600}
.attempt .when{font-family:var(--fontm);font-size:12.5px}
.attempt .logedit{grid-column:5}
.attempt .logedit .logform{grid-column:1/-1}
.attempt:has(details[open]){grid-template-columns:130px 150px 110px 1fr auto}
.attempt details[open].logedit{grid-column:1/-1}
.logfoot{border-top:1px solid var(--row);padding:16px 20px 18px;background:var(--head)}
.typerow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.logform input.wide{width:100%}
.logform .whenrow label{display:inline-flex;align-items:center;gap:6px;font-size:13px}
.logform .whenrow select{min-height:32px;font-size:13px}
.reaching .empty{padding:14px 20px;border-top:1px solid var(--row)}
@media(max-width:900px){.attempt{grid-template-columns:1fr 1fr}.attempt.head{display:none}}
/* ---- Release dialog ---- */
.btn.risk-outline{background:transparent;border-color:var(--riskline);color:var(--riskdeep)}
.btn.risk-outline:hover{background:var(--riskpanel);border-color:var(--risk);color:var(--riskdeep)}
dialog.modal{border:1px solid var(--line);border-radius:var(--r-md);padding:22px 24px;width:min(520px,92vw);background:var(--panel);color:var(--fg);box-shadow:var(--shadowpop)}
dialog.modal::backdrop{background:rgba(7,59,52,.35)}
dialog.modal textarea{width:100%;min-height:76px}
dialog.modal label.fld{display:flex;flex-direction:column;gap:4px}

/* ---- Intake call in David's format (Jenny, 15 Sep): big script, script
   column beside the answers, no Say/Their response captions ---- */
.say{background:transparent;border-left:0;padding:0;border-radius:0;font-size:17px;line-height:1.6;margin-bottom:0;
  font-family:var(--fontd);font-variation-settings:"SOFT" 30;color:var(--fg);white-space:normal}
.say .sayp{margin:0 0 .6em}
.say .sayp:last-child{margin-bottom:0}
.sectwo{grid-template-columns:minmax(240px,300px) minmax(0,1fr);gap:24px}
.sectwo .colcap,.scriptcol .colcap{display:none}
.sectwo .respcol{border-left:0;padding-left:0}
/* Below a wide laptop the script sits above the answers; a 200px answer column is unusable mid-call. */
@media(max-width:1250px){.sectwo{grid-template-columns:1fr}}
@media(min-width:900px){.row2.callwrap{flex-wrap:nowrap}.callwrap .callrail{position:sticky;top:20px}}
.fab{position:fixed;right:28px;bottom:28px;z-index:40;background:var(--risk);color:#fff;border:1px solid var(--riskdeep);
  border-radius:999px;padding:12px 20px;font:600 13.5px var(--fontb);box-shadow:var(--shadowpop);cursor:pointer}
.fab:hover{background:var(--riskdeep)}
#intakeStage .stagebar.inpage{margin-bottom:14px}
.say{white-space:pre-wrap}
.say .sayp{white-space:normal}

/* ---- Activity as the one log (Jenny, 16 Sep) ---- */
.activity .row{grid-template-columns:150px 190px 1fr auto;align-items:start}
.activity .row.headrow{background:var(--head);padding:9px 20px}
.activity .row .when{font-family:var(--fontm);font-size:12.5px}
.activity .row .edit{justify-self:end}
.activity .row .logedit .logform{margin-top:8px}
.activity .row:has(details[open].logedit){grid-template-columns:150px 190px 1fr auto}
.activity .row details[open].logedit{grid-column:1/-1;justify-self:stretch}
.activity .head .sub{margin-left:6px}
@media(max-width:900px){.activity .row{grid-template-columns:1fr 1fr}.activity .row.headrow{display:none}}
.actions .btn.block{justify-content:center}
.ledger{grid-template-columns:28px 210px 130px 96px 1fr}
.ledger .tick{display:flex;align-items:center}
.ledger .tick input{width:17px;height:17px;accent-color:var(--accent)}
dialog.modal .whenrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;font-size:13px}
dialog.modal .whenrow label{display:inline-flex;align-items:center;gap:6px}
dialog.modal select,dialog.modal input[type=text]{width:100%}
dialog.modal .whenrow select{width:auto}

/* Outreach box, reveal buttons, Remove in Activity (Jenny, 16 Sep) */
.outbox .clock{font-family:var(--fontm);font-feature-settings:"tnum" 1}
.actions.inline{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.actions.inline form{display:contents}
.autonote{color:var(--muted);line-height:1.5}
.autonote em{font-style:normal;color:var(--riskdeep)}
.sub.small{font-size:12.5px}
.btn.reveal{padding:2px 10px;font-size:12px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:12.5px;font-weight:600;color:var(--accent);cursor:pointer}
.linkbtn.risk{color:var(--riskdeep)}
.linkbtn:hover{text-decoration:underline}
.activity .row .edit{display:flex;gap:12px;align-items:baseline}
.activity .row:has(details[open].logedit) .edit{grid-column:1/-1;justify-self:stretch;flex-direction:column;align-items:stretch}
.activity .row:has(details[open].logedit) .edit .linkbtn{align-self:flex-end}
[hidden]{display:none!important}
/* Activity rows fold to two columns when the panel itself is narrow */
.activity{container-type:inline-size}
@container (max-width:680px){
  .activity .row{grid-template-columns:120px 1fr}
  .activity .row.headrow{display:none}
  .activity .row > :nth-child(n+3){grid-column:2}
  .activity .row .edit{justify-self:start}
  .activity .row:has(details[open].logedit) .edit{grid-column:1/-1}
}

/* The record as four step boxes (Jenny, 17 Sep) */
.stepbox{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:12px}
.stepbox>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:14px 18px}
.stepbox>summary::-webkit-details-marker{display:none}
.stepbox .num{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;background:var(--head);color:var(--muted);flex-shrink:0}
.stepbox .ttl{font-weight:700;font-size:15px}
.stepbox .sum{color:var(--muted);font-size:13px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stepbox .state{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  padding:3px 9px;border-radius:999px;background:var(--head)}
.stepbox.now{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent)}
.stepbox.now .num{background:var(--accent);color:#fff}
.stepbox.now .state{background:var(--accent);color:#fff}
.stepbox.done .num{background:var(--ok);color:#fff}
.stepbox.done .state{color:var(--ok)}
.stepbox.todo{opacity:.72}
.stepbox>.body{padding:0 18px 18px}
.stepbox[open]>summary{border-bottom:1px solid var(--row);margin-bottom:14px}
@media(max-width:640px){.stepbox .sum{display:none}}
.dots{display:flex;gap:6px;flex-wrap:wrap}
.dots span{width:22px;height:10px;border-radius:5px;background:var(--row);border:1px solid var(--line)}
.dots span.on{background:var(--accent);border-color:var(--accent)}
dialog.modal.wide{width:min(760px,92vw)}
pre.csv{font-family:var(--fontm);font-size:12.5px;white-space:pre-wrap;word-break:break-word;background:var(--head);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;max-height:60vh;overflow:auto;margin:0}
/* Risk section as three boxes in priority order (Jenny, 17 Sep) */
.riskstep{border:1px solid var(--riskline);border-radius:10px;background:var(--panel);padding:12px 14px;margin-bottom:12px}
.riskstep .rh{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.riskstep .rh .n{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;background:var(--risk);color:#fff;flex-shrink:0}
.riskstep .rh .t{font-weight:700;font-size:14.5px}
.riskstep.hot{border-width:2px;border-color:var(--risk)}
.riskstep.quiet{opacity:.82;background:var(--head)}
.riskstep.quiet .rh .n{background:var(--muted)}
.riskstep .stopbox{margin-top:0}
.riskstep .say{font-size:15.5px;background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:10px 12px}
.secbox.paused{opacity:.9}
.cbxrow .sub{margin-right:6px}
/* Funding details with room to breathe (Jenny, 17 Sep) */
.fundform{padding:14px 16px;margin-bottom:14px}
.fundform .fld{margin-bottom:14px}
.fundform .fld:last-child{margin-bottom:0}
.fundform .row2col{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.fundform .row2col .fld{margin-bottom:0}
.fundform input,.fundform select{width:100%;min-height:38px}
@media(max-width:640px){.fundform .row2col{grid-template-columns:1fr}}
.fundblock .pillrow{margin-bottom:14px}
/* External volunteers queue (Jenny, 17 Sep) */
.ledger.ext{grid-template-columns:1.3fr 1fr 1.3fr .7fr 2fr 1fr}

/* Joseph, 18 Sep: the two observations stacked in one column */
.cbxcol{display:flex;flex-direction:column;gap:6px;margin:10px 0 4px}
.cbxcol .sub{margin-bottom:2px}

/* How it works — David's flow-chart shape (Jenny, 18 Sep) */
.flowwrap{max-width:900px}
.flowbox{padding:14px 16px}
.flowbox .cap{margin-bottom:6px}
.flowbox .body{margin-top:5px;line-height:1.55}
.flowbox .foot{margin-top:10px}
.flowbox.risk{background:var(--riskpanel);border-color:var(--riskline)}
.flowarrow{display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0}
.flowarrow .lbl{font-size:11.5px}
.flowarrow .stem{width:1px;height:13px;background:var(--fieldbd)}
.flowarrow .head{color:var(--fieldbd);font-size:10px;line-height:0}
.flowcol{display:flex;flex-direction:column}
.flowcol>.cap{text-align:center;padding-bottom:7px}
.flowgrid{display:grid;gap:16px;margin:14px 0}
.flowgrid.two{grid-template-columns:1fr 1fr}
.flowgrid.three{grid-template-columns:1fr 1fr 1fr}
@media(max-width:900px){.flowgrid.two,.flowgrid.three{grid-template-columns:1fr}}
.sub.loose{line-height:1.6}

/* Call script: the safety flow, and the practicum page (Jenny, 19 Sep) */
.lvlrow{display:grid;grid-template-columns:190px 1fr;gap:12px;align-items:start;padding:9px 0;border-top:1px solid var(--row)}
.lvlrow .chip{justify-self:start}
.riskbox .say{font-size:15px}
.hourslog .row{display:grid;grid-template-columns:150px 1fr auto;gap:16px;padding:11px 20px;border-top:1px solid var(--row);font-size:13.5px}
.hourslog .row.headrow{background:var(--head);padding:9px 20px}
.hourslog .row .when{font-family:var(--fontm);font-size:12.5px}

/* Feedback button, welcome form, feedback inbox (Jenny, 19 Sep) */
.fbbtn{position:fixed;right:28px;bottom:28px;z-index:39;background:var(--panel);color:var(--muted);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.fbbtn:hover{color:var(--accent);border-color:var(--accent)}
.fab{bottom:76px}
.welcome{max-width:640px}
.welcome .fld input{width:100%;min-height:38px}
.fbrow{padding:14px 20px;border-top:1px solid var(--row)}
.fbrow.new{background:var(--waitpanel)}
.fbrow .fbtext{margin-top:8px;white-space:pre-wrap;line-height:1.55}
.nav .navitem .n{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;text-align:center;margin-left:6px}

/* Board: rows taken since the page loaded */
.boardlist tr.gone{opacity:.45}
.boardlist tr.gone .btn{visibility:hidden}
#boardStale{display:flex;align-items:center;gap:12px}

/* Sign-in and accounts (Jenny, 19 Sep) */
.signin{max-width:520px}
.signin .fld input,.welcome .fld input{width:100%;min-height:38px}
.issued code.tmp{font-family:var(--fontm);font-size:15px;font-weight:700;background:var(--panel);padding:3px 8px;border-radius:6px;border:1px solid var(--line)}
td.actions{display:flex;gap:6px;flex-wrap:wrap}

/* Feedback button, made visible (Jenny, 19 Sep) */
.fbbtn{background:linear-gradient(135deg,var(--accent),var(--brandnight));color:#fff;border:0;font-size:13.5px;font-weight:700;
  padding:11px 18px 11px 16px;box-shadow:0 6px 18px rgba(0,0,0,.18);letter-spacing:.01em}
.fbbtn::before{content:"\2709\00a0\00a0"}
.fbbtn:hover{color:#fff;filter:brightness(1.08);transform:translateY(-1px)}
.fbbtn:focus-visible{outline:3px solid var(--wait)}
.fab{bottom:84px}

/* LinkUp brand with the FCSC logo (Jenny, 19 Sep) */
.nav .brand .logo{width:44px;height:auto;flex-shrink:0}
.nav .brand .word{font-size:19px}
.signinhead{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.signinhead .logo{width:64px;height:auto}
.signinhead h1{margin:0}

/* Front door (Jenny, 19 Sep) */
.authwrap{min-height:calc(100vh - 120px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:24px 0}
.authcard{display:grid;grid-template-columns:1.05fr 1fr;width:min(920px,100%);background:var(--panel);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:0 18px 50px rgba(20,40,50,.10)}
.authbrand{padding:40px 38px;background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 10%,var(--panel)),color-mix(in srgb,var(--wait) 14%,var(--panel)));
  border-right:1px solid var(--line);display:flex;flex-direction:column}
.authbrand .logo{width:88px;height:auto;margin-bottom:18px}
.authbrand .name{font-size:34px;font-weight:600;color:var(--brandnight);line-height:1.1}
.authbrand .tag{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700;margin:6px 0 18px}
.authbrand .lead{font-size:14px;line-height:1.6;margin:0 0 18px}
.authpoints{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px;font-size:13px;color:var(--muted)}
.authpoints li{padding-left:18px;position:relative}
.authpoints li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.authpane{padding:40px 38px}
.authform{display:flex;flex-direction:column;gap:14px}
.authform .fld input{width:100%;min-height:42px;font-size:15px}
.authform .btn.block{width:100%;justify-content:center;min-height:42px;margin-top:4px}
.authalt{margin-top:18px;padding-top:16px;border-top:1px solid var(--row);display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.authalt.dev{display:block}
.authfoot{font-size:12px}
@media(max-width:820px){.authcard{grid-template-columns:1fr}.authbrand{border-right:0;border-bottom:1px solid var(--line);padding:28px}.authpane{padding:28px}}
.pwrules{margin:6px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;font-size:13px;color:var(--muted)}
.pwrules li{padding-left:20px;position:relative}
.pwrules li::before{content:"○";position:absolute;left:0}
.pwrules li.ok{color:var(--ok)}
.pwrules li.ok::before{content:"✓"}

/* Consultation states, the current-pattern alert (20 Sep) */
.cstates{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px}
.cstate{padding:3px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:var(--panel)}
.cstate.done{border-color:var(--ok);color:var(--ok)}
.cstate.now{background:var(--risk);border-color:var(--riskdeep);color:#fff;font-weight:700}
.cstates .sep{color:var(--muted)}
.stopbox.alert{border-width:2px;background:var(--riskpanel)}
.stopbox.alert .t{font-size:15px}

/* Consent gate and draft stamp (20 Sep) */
.secbox.gated{opacity:.55;background:var(--head)}
#draftStamp{font-size:12px;white-space:nowrap}

/* Contact pop-up, disabled step-2 buttons (20 Sep) */
.contactdlg{width:min(420px,92vw)}
.contactval{font-family:var(--fontm);font-size:20px;font-weight:600;padding:12px 0 4px;word-break:break-all;user-select:all}
.btn.disabled{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Safety carousel, plain-language supervisor box, neutral pills (20 Sep) */
.pill.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700}
.ladderdone{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--row);font-size:13px}
.ladderdone .q{flex:1}
.ladderdone .ans{font-weight:700;padding:1px 9px;border-radius:999px;font-size:12px}
.ladderdone .ans.yes{background:var(--yesbg);color:var(--yesfg)}
.ladderdone .ans.no{background:var(--nobg);color:var(--nofg)}
.ladderdone .det{max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcard{border:2px solid var(--accent);border-radius:12px;padding:16px 18px;margin:12px 0;background:var(--panel)}
.qcard .ask{font-size:18px;line-height:1.45;margin:8px 0 12px}
.qcard .pills{display:flex;gap:8px}
.qcard .pills .pill{min-height:40px;min-width:88px;font-size:15px}
.consult .rightnow{font-size:15px;line-height:1.5;margin:4px 0 8px}
.consult.hot{border-color:var(--riskline);background:var(--riskpanel)}
.cstatus{font-size:12.5px;font-weight:700;color:var(--muted)}
.cstatus.decided{color:var(--ok)}
.cstatus.needed,.cstatus.asked,.cstatus.answered{color:var(--riskdeep)}
/* Funding details: one flat panel, fields in two clear columns (20 Sep) */
.fundblock .fundform{padding:0;margin:14px 0 0;border:0;background:none}
.fundblock .fundform .cap.group{margin-bottom:8px}
.fundblock .fundform .fld{margin-bottom:12px}
.fundblock .row2col{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
.fundblock .fld input,.fundblock .fld select{width:100%;min-height:38px;box-sizing:border-box}
.fundblock .pillrow{margin:8px 0 14px}
.fundblock .say{margin-bottom:8px}

/* Safety section: full width, one card, one action screen (20 Sep) */
.secbox.riskfull .riskbox{padding:0;border:0;background:none}
.qcard .ask{font-size:20px}
.qcard .pills.small .pill{min-height:32px;min-width:64px;font-size:13px}
.subq{border-top:1px solid var(--row);padding-top:10px}
.actscreen{border:2px solid var(--line);border-radius:12px;padding:16px 18px;background:var(--panel)}
.actscreen.hot{border-color:var(--risk)}
.actblock{padding:14px 16px;border-radius:10px;background:var(--head);margin-bottom:12px}
.actblock.hot{background:var(--riskpanel);border:1px solid var(--riskline)}
.actblock .big{font-size:18px;line-height:1.45;margin:4px 0 6px}
.actblock .say.big{font-size:19px;background:none;border:0;padding:0}
.alertline{margin-top:8px;padding:8px 10px;border-radius:8px;background:var(--riskpanel);border:1px solid var(--riskline);color:var(--riskdeep);font-weight:600;font-size:13.5px}
.recordfold{margin-top:12px}

/* Protective card, time pickers, plan questions (20 Sep) */
.ladderdone .det.wide{max-width:60%}
.timerow{display:flex;gap:8px;align-items:center}
.timerow input[type=time]{flex:1;min-height:36px}
.planq .ask{font-family:var(--fonts, Georgia, serif);font-size:15px;line-height:1.45;margin:2px 0 6px}
.timerow input[type=datetime-local]{flex:1;min-height:36px;min-width:0}

/* First sign-in: the form alone, centred (20 Sep) */
.onboardwrap{min-height:calc(100vh - 120px);display:flex;align-items:center;justify-content:center;padding:24px 0}
.onboardwrap .welcome{width:min(640px,100%);box-shadow:0 18px 50px rgba(20,40,50,.10)}

/* Step 2 count-down (20 Sep) */
.countdown{display:flex;align-items:center;gap:16px;padding:12px 16px;border:1px solid var(--line);border-radius:12px;background:var(--head)}
.countdown .num{font-family:var(--fonts, Georgia, serif);font-size:40px;font-weight:600;line-height:1;color:var(--brandnight);min-width:56px;text-align:center}
.countdown .lbl{flex:1;font-size:14px;line-height:1.45}
.countdown.elapsed{border-color:var(--riskline);background:var(--riskpanel)}
.countdown.elapsed .num{color:var(--riskdeep)}
.countdown.booked{border-color:var(--accent)}
.countdown.booked .num{font-size:22px;color:var(--accent)}

/* Step 2: the count-down as a plain line (20 Sep) */
.cd{font-size:15px;line-height:1.5}
.cd .num{color:var(--brandnight)}
.cd.elapsed{display:flex;align-items:center;gap:14px;flex-wrap:wrap;color:var(--riskdeep)}
.cd.elapsed .num{color:var(--riskdeep)}
.cd.elapsed>span{flex:1 1 240px;min-width:0}
.cd.elapsed .btn{flex:0 0 auto}

/* Step 2 count-down: big number, small qualifier (20 Sep) */
.cd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.cd .cdnum{font-family:var(--fonts, Georgia, serif);font-size:28px;font-weight:600;color:var(--brandnight);line-height:1.1}
.cd .cdsub{font-size:13px;color:var(--muted)}
.cd.elapsed .cdnum,.cd.elapsed .cdsub{color:var(--riskdeep)}
.cd.elapsed .btn{margin-left:auto}

/* Handover and funding state (21 Sep) */
.handover .obs{font-size:17px;line-height:1.55;white-space:pre-wrap}
.handover summary{cursor:pointer;list-style:none}
.handover summary::-webkit-details-marker{display:none}
.handover .rail{min-width:260px}
.handnote .obs{font-size:16px;line-height:1.55;white-space:pre-wrap}
.fundline{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:10px;margin-bottom:12px;border:1px solid var(--line);background:var(--bg)}
.fundline .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted)}
.fundline.ok .dot{background:var(--accent)}
.fundline.ok{border-color:var(--accent)}
.fundline.pending .dot{background:#d9a300}
.fundline.warn .dot{background:#d9a300}
.fundline.stop .dot{background:var(--risk,#b3261e)}
.boardlist td.fund{font-size:12.5px}
.boardlist td.fund.none{color:var(--muted)}
.tzsel{margin-left:8px;max-width:190px}
.whenrow .tzsel{flex:none}
.chip.recurring{background:var(--yesbg,#e8f3ec);color:var(--yesfg,#1c5b36);font-weight:700}

/* Joseph's six (21 Sep) */
.exclbox .exrow{border-top:1px solid var(--line);padding:10px 0}
.exclbox .exrow:first-of-type{border-top:none}
.exclbox .exrow.on{background:var(--riskpanel,#fdf3f2);margin:0 -12px;padding:10px 12px;border-radius:8px}
.exclbox .ask.sm{font-size:14px;margin:4px 0 2px;padding-left:26px;color:var(--ink)}
.exclbox .exhint{font-size:12.5px;padding-left:26px;color:var(--accent);font-weight:600;margin-top:3px}
.exclbox .sub.loose,.exclbox .sub.quiet{padding-left:26px}

.exclbox .exmode{padding-left:26px;margin:3px 0 2px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.exclbox .exmode .tag{font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
padding:1px 7px;border-radius:999px;border:1px solid currentColor}
.exclbox .exmode .sub{font-size:12.5px}
.exclbox .mode-ask .tag{color:var(--accent)}
.exclbox .mode-careful .tag{color:#b45309}
.exclbox .mode-watch .tag{color:#1d4ed8}
.exclbox .mode-observe .tag{color:#7c2d92}

.exclbox.unanswered{border-color:var(--riskline)}
.exclbox .exrow.dim{opacity:.45}
.exclbox .exrow.none{border-top:1px solid var(--line);margin-top:6px;padding-top:12px}
.exclbox .okline{background:var(--yesbg,#e8f3ec);color:var(--yesfg,#1c5b36);font-weight:600;
padding:9px 12px;border-radius:8px;font-size:13.5px}
.qcard.judge{border-color:#1d4ed8}
.qcard.judge .pills .pill{white-space:normal;text-align:left}

/* Concerns as one column (21 Sep) */
.ckcol{display:block}
.ckgroup{margin-bottom:12px}
.ckgroup .cap.group{margin-bottom:5px}
.ckcol .cbx{display:flex;align-items:flex-start;gap:8px;padding:4px 0;font-size:14px;line-height:1.45;cursor:pointer}
.ckcol .cbx input{margin-top:2px;flex:none}

/* Finished safety questions open to show what was asked (21 Sep) */
details.ladderdone{padding:0}
details.ladderdone>summary{display:flex;align-items:center;gap:10px;cursor:pointer;padding:9px 0;list-style:none}
details.ladderdone>summary::-webkit-details-marker{display:none}
details.ladderdone>summary::after{content:'▸';margin-left:auto;color:var(--muted);font-size:12px}
details.ladderdone[open]>summary::after{content:'▾'}
details.ladderdone .askback{padding:0 0 11px 2px}
details.ladderdone .ask.sm{font-size:14.5px;margin-bottom:6px}
.stopbox.loud .t{font-size:17px;line-height:1.35}
.stopbox.loud{border-width:2px;padding:14px 16px}
.janebox .kv{padding:5px 0}
.janebox .kv .k{min-width:130px}

/* The printable intake note (21 Sep) */
.noteprint{max-width:820px;margin:0 auto}
.printhead{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.printhead .logo{width:52px;height:auto}
.notepaper{white-space:pre-wrap;font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;
background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 22px}
.printfoot{margin-top:14px}
@media print{
  body.printmode .nav,body.printmode .banner,body.printmode .pagehead,
  body.printmode .fbbtn,body.printmode .screenonly,body.printmode .recordbar{display:none !important}
  body.printmode{background:#fff}
  body.printmode .pane,body.printmode .panewrap{padding:0;margin:0;max-width:none}
  .notepaper{border:none;padding:0;font-size:11.5px}
}

.callstart input[type=datetime-local]{max-width:210px}
.janebox .janerow{display:flex;align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--line)}
.janebox .janerow:first-of-type{border-top:none}
.janebox .janerow .k{min-width:120px;font-size:12.5px;color:var(--muted);font-weight:600}
.janebox .janerow .v{flex:1;font-weight:600;word-break:break-word}

.offboard .obstep{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.offboard .obstep:first-of-type{border-top:none}
.offboard .obstep .n{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;
font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center}
.offboard .ptitle.sm{font-size:14.5px}

.notedit{width:100%;min-height:340px;resize:vertical;font:12.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace}
.savedpill.sm{font-size:12px;padding:3px 10px}
.offboard .tplhead{flex-wrap:wrap;gap:8px}

/* The case board is a different place from My cases (21 Sep) */
body.boardpage{--bg:#f2f6f7}
body.boardpage .boardlist thead th{background:#e7eff1}
body.boardpage .panel{border-color:#d7e2e5}
.livedot{display:inline-flex;align-items:center;gap:6px;margin-left:14px;font-size:12px;color:var(--muted)}
.livedot .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
box-shadow:0 0 0 0 rgba(0,169,145,.55);animation:livepulse 2.4s infinite}
.livedot.stalecheck .dot{background:var(--muted);animation:none}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgba(0,169,145,.5)}70%{box-shadow:0 0 0 7px rgba(0,169,145,0)}100%{box-shadow:0 0 0 0 rgba(0,169,145,0)}}
.boardlist tr.gone{opacity:.5}
.boardlist tr.gone td{text-decoration:line-through}
.boardlist tr.gone td.act{text-decoration:none}
.chip.taken{background:var(--waitbg);color:var(--waitfg);font-weight:700}

/* The board in blue, plainly not My cases (21 Sep) */
body.boardpage{--bg:#eef4f9;--panel:#ffffff;--line:#cfdde9;--row:#e3edf5;--head:#dceaf4;--chip:#e3edf5;
  --accent:#1a5f96;--accentsoft:#dcebf6;--accentline:#9cc4e0;--brand:#1a5f96;--brandnight:#0c3555;
  --shadow:0 6px 30px rgba(12,53,85,.09);--focus:0 0 0 3px rgba(26,95,150,.3)}
body.boardpage .boardlist thead th{background:var(--head);color:#2a5772}
body.boardpage .nav{background:var(--panel)}
.livedot .dot{background:var(--accent)}
.boardlist tr.watched{background:#fff7e4}

/* Jenny, 22 Sep: somebody else is on this case. It sits beside the case
   number, small enough to read in passing. The eyes glance every few
   seconds; anyone who has asked their machine to stop moving things gets a
   still pair. */
.peek{display:inline-flex;align-items:center;gap:5px;margin-left:8px;vertical-align:middle;
  font-family:var(--fontb);font-size:11.5px;font-weight:700;line-height:1.4;letter-spacing:.01em;
  padding:2px 9px 2px 7px;border-radius:999px;white-space:nowrap;cursor:help;
  background:#fff1cd;color:#7d5f00;border:1px solid #e6cb8c}
.peek .eyes{font-size:12.5px;line-height:1;animation:peekglance 4s ease-in-out infinite}
@keyframes peekglance{0%,72%,100%{transform:translateX(0)}
  78%{transform:translateX(2px)}86%{transform:translateX(-2px)}92%{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.peek .eyes{animation:none}}
.boardlist tr.gone .peek{display:none}

/* Your own account, top right (21 Sep) */
.acctmenu{position:relative;margin-left:12px}
.acctmenu>summary{display:flex;align-items:center;gap:6px;cursor:pointer;list-style:none;
padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel);
font-size:13px;font-weight:600;white-space:nowrap}
.acctmenu>summary::-webkit-details-marker{display:none}
.acctmenu>summary:hover{border-color:var(--accentline)}
.acctmenu .caret{color:var(--muted);font-size:11px}
.acctmenu .acctlist{position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:240px;
background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadowpop);padding:8px}
.acctmenu .accthead{padding:8px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:6px}
.acctmenu .accthead .nm{font-weight:700}
.acctmenu .acctlist .navitem{display:block;padding:8px 12px;border-radius:8px}
.acctmenu .acctlist .navitem:hover{background:var(--row)}

.practice .ladderdone.plain{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.practice .ladderdone.plain .q{flex:1}

.authcard.one{grid-template-columns:1fr;max-width:520px}
.authcard.one .authpane{padding:34px 38px}
.authpane .logo.sm{width:54px;height:auto;margin-bottom:14px}
/* The forgotten-password card: label above its box, boxes full width. */
.authcard.one label.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.authcard.one label.fld input{width:100%}

/* Password box with its Show button (22 Sep) */
.pwfield{position:relative;display:block}
.pwfield input{width:100%;padding-right:66px}
.pwtoggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
border:0;background:none;color:var(--accent);font:inherit;font-size:12px;font-weight:700;
letter-spacing:.03em;cursor:pointer;padding:4px 8px;border-radius:6px}
.pwtoggle:hover{background:var(--accentsoft)}
.pwtoggle:focus-visible{outline:none;box-shadow:var(--focus)}

/* The confirmation page (22 Sep) */
.donecard{position:relative}
.donetick{width:44px;height:44px;border-radius:50%;background:var(--okbg);color:var(--ok);
display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;margin-bottom:12px}
.donecard .panel.tint{background:var(--chip);border:1px solid var(--line)}

/* The intake-note pop-up: the note first, then only what was answered. */
.modal .notepaper{max-height:46vh;overflow:auto;margin-bottom:14px}
.notefields{max-height:28vh;overflow:auto;border-top:1px solid var(--line);padding-top:10px}
.notefields .kv{padding:5px 0;align-items:flex-start}
.notefields .kv .k{min-width:190px}
.notefields .kv .v{white-space:pre-wrap}

/* My cases in green, so the two lists are never confused (22 Sep) */
body.minepage{--bg:#eff6f1;--line:#cfe3d6;--row:#e4f0e9;--head:#dcece3;--chip:#e4f0e9}
body.minepage .ledger.head{background:var(--head)}

/* Find a case is always the board's blue, on every page. */
.btn.findcase{background:#1a5f96;color:#fff;border-color:#1a5f96;font-weight:700}
.btn.findcase:hover{background:#14527f;border-color:#14527f;color:#fff}
.btn.findcase:focus-visible{box-shadow:0 0 0 3px rgba(26,95,150,.35)}

/* The typed-in supervisor, shown only when the list does not have them. */
.supother{display:grid;gap:12px;margin-top:4px;padding:12px;border:1px dashed var(--line);
  border-radius:10px;background:var(--field,transparent)}
.supother[hidden]{display:none}

/* Supervisor screens (Jenny, 22 Sep): a warm neutral, neither the board's
   blue nor My cases' green, so a supervisor always knows whose list this is. */
body.superpage{--bg:#f6f3ee;--line:#e2dacd;--row:#efe9df;--head:#e9e1d4;--chip:#efe9df}
.boardlist td.num,.boardlist th.num{text-align:right;font-variant-numeric:tabular-nums}
.boardlist tr.total td{font-weight:700;border-top:2px solid var(--line);background:var(--head)}

/* Student progress (Jenny, 22 Sep): plain numbers, bold names, a quiet total. */
.boardlist.progress th.num{white-space:normal;line-height:1.3;min-width:96px}
.boardlist.progress td.num{font-size:15px;font-weight:600}
.boardlist.progress tr.total td{font-size:14px}

/* Maintenance window on the sign-in page (Jenny, 22 Sep). */
.authfoot.maint{margin-top:6px;color:#7d5f00}

/* Test cases (Jenny, 23 Sep): a badge beside the T- case number, in a colour
   nothing else on the board uses, so a test row can never pass for a client. */
.chip.test{background:#6b21a8;color:#fff;border-color:#6b21a8;font-size:10.5px;padding:1px 7px;
  letter-spacing:.06em;vertical-align:middle;margin-left:6px}
.chip.test:hover{background:#581c87}