/* Fox: the one look of the website and the app. Light is the default; a visitor can pick Dark (data-mode="dark", set before the page draws).
   Every text color is 4.5:1 or more on the surface it sits on, in both modes. */
/* The font is served from this site (public/fonts; SIL Open Font License, public/fonts/OFL.txt): no request goes to another company.
   One variable file per character set holds the weights 400 to 800. */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-v12-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/plus-jakarta-sans-v12-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme:light;
  --display:'Plus Jakarta Sans',system-ui,sans-serif; --sans:'Plus Jakarta Sans',system-ui,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --bg:#FFFFFF; --work:#ECF8FF; --surface:#FFFFFF; --bg-card:#FFFFFF; --bg-card-2:#F0F3F6;
  --border:#E2E7EC; --border-lit:#CDD4DB;
  --text:#0B1B3F; --text-muted:#3F4E6B; --text-dim:#56668A;
  --accent:#1D5BF0; --accent-dim:#FFFFFF; --on-accent:#FFFFFF; --btn:#1D5BF0;
  --go:#166534; --go-dim:#DCFCE7;
  --warn:#92400E; --warn-dim:#FEF3C7;
  --red:#B91C1C; --red-dim:#FEE2E2;
  --avatar:#FFFFFF; --nav-ink:#1E2B4A; --nav-icon:#24407A; --ring-track:#E3E8ED;
  --sky-green:#22C55E; --check-green:#16A34A;
}
/* Fox Dark: the same layout on deep navy. The page is the darkest, the work area a step up, cards a step more. Print always uses the light colors. */
@media screen{
  [data-mode="dark"]{
    color-scheme:dark;
    --bg:#0B111D; --work:#0F1828; --surface:#152035; --bg-card:#152035; --bg-card-2:#1B2840;
    --border:#233049; --border-lit:#34445F;
    --text:#EEF2F8; --text-muted:#BAC5D8; --text-dim:#97A4BC;
    --accent:#7EAAFF; --accent-dim:#1B2840; --on-accent:#0B111D; --btn:#1D5BF0;
    --go:#4ADE80; --go-dim:rgba(74,222,128,.14);
    --warn:#FBBF24; --warn-dim:rgba(251,191,36,.14);
    --red:#F87171; --red-dim:rgba(248,113,113,.14);
    --avatar:#1B2840; --nav-ink:#D6DFEE; --nav-icon:#9DBBF5; --ring-track:#26344F;
  }
}
*{margin:0;padding:0;box-sizing:border-box}
/* The parts the browser draws: selection, caret, scrollbar, check marks. They take the theme colors too. */
html{scrollbar-color:var(--border-lit) transparent;accent-color:var(--accent)}
::selection{background:var(--accent);color:var(--on-accent)}
input,textarea{caret-color:var(--accent)}
body{font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none;text-underline-offset:3px} a:hover{text-decoration:underline}
/* A link inside a sentence is underlined, so it does not show by color alone (WCAG 1.4.1). Links that stand alone (menus, buttons, tabs, list heads) stay plain. */
:is(p,li:not(.sky-step),figcaption,label) a:not(.btn):not(.tab){text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 55%,transparent)}
:is(p,li:not(.sky-step),figcaption,label) a:not(.btn):not(.tab):hover{text-decoration-color:currentColor}
.mono,code{font-family:var(--mono);font-variant-numeric:tabular-nums}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.15;letter-spacing:-.3px}
h1{font-size:clamp(30px,4.6vw,48px)} h2{font-size:clamp(22px,3vw,30px)} h3{font-size:19px}
h1,h2,h3{text-wrap:balance} p{text-wrap:pretty}
h1 em{color:var(--accent);font-style:normal}
h4{font-size:14px;font-weight:700}
/* The app: one h1 per page, the size of a page title; every section and card head is an h2 in one of two looks. */
main.app h1{font-size:clamp(22px,3vw,30px)} main.app h1:focus{outline:none}
h2.sec,h1.sec{font-size:19px}   /* h1.sec: the one heading of a sign-in type page, in the section look */
/* Read by screen readers, not shown (a label for a column of buttons, for example). */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h2.sub{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:0;line-height:1.4}
/* Priority is not a verdict: strong ink, no color. */
.prio{font-size:12.5px;font-weight:700;color:var(--text);white-space:nowrap}
.prio-2{font-weight:600;color:var(--text-muted)} .prio-3{font-weight:400;color:var(--text-dim)}
/* A box that is not a stored record (a form, an explanation, a chat): on the page, with a hairline. The navy locker is for records. */
.panel{background:var(--bg);border:1px solid var(--border-lit);border-radius:14px;padding:20px 22px}
/* The remediation plan: one row per fix; a click opens the details. */
.fix-list{border:1px solid var(--border-lit);border-radius:12px;margin-top:10px;overflow:hidden}
.ev-del{margin-left:auto}
[data-theme="fox"] .sky-pill-row{margin-top:14px;gap:12px;align-items:center}
/* Plus Jakarta Sans sets more letters per ch than IBM Plex: a narrower measure keeps lines under about 80 characters. */
[data-theme="fox"] main.app p{max-width:56ch}
.ctl-area[hidden],.tbl-controls tr[hidden]{display:none!important}   /* the phone list layout gives rows a display of their own */
.dash-top{align-items:start}
.find-box{position:relative;display:inline-block;width:100%;max-width:320px} .find-box input{max-width:none}
.find-box kbd{position:absolute;right:10px;top:50%;transform:translateY(-50%);font:12px var(--mono);line-height:18px;padding:0 6px;border:1px solid var(--border-lit);border-radius:5px;color:var(--text-dim);pointer-events:none}
.find-box input:focus+kbd,.find-box input:not(:placeholder-shown)+kbd{display:none}
@media (pointer:coarse){.find-box kbd{display:none}}
.ctl-find{gap:10px 16px;margin:14px 0 2px;flex-wrap:wrap;align-items:center} .ctl-find input[type=search]{max-width:320px}
.ctl-crit{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;cursor:pointer;margin:0} .ctl-crit input{width:auto;margin:0;accent-color:var(--accent)}
/* Prose keeps a reading measure even when the column is wide. */
main.app p{max-width:65ch}
/* The one destructive button. A fixed dark red with white text (6.5:1), the same in every theme and inside cards, where --red is too light. */
.btn.danger,[data-theme] .btn.danger{background:#B91C1C;border-color:#B91C1C;color:#FFFFFF;filter:none}
.btn.danger:hover,[data-theme] .btn.danger:hover{background:#991B1B;border-color:#991B1B;filter:none}
.ai-archive summary{cursor:pointer;font-weight:600} .ai-archive[open] summary{margin-bottom:6px}
/* The full upload rules, behind one line under the drop zone (the drop zone itself says only the essentials). */
.file-rules summary{cursor:pointer;color:var(--text-dim);width:max-content;padding:4px 0} .file-rules p{color:var(--text-dim);margin-top:4px;font-size:14px;line-height:1.55}
@media(pointer:coarse){ .file-rules summary{padding:12px 0} }
.ai-past{border-top:1px solid var(--border);padding-top:12px;margin-top:12px} .ai-past p{margin-top:6px}
/* The client's "History & files": the record of a control, folded under the steps. */
.hist summary{cursor:pointer;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .hist summary .sub{margin:0;font-family:var(--sans);font-size:16px;font-weight:700}
@media(pointer:coarse){ .hist summary{padding:6px 0} }
.hist-sec{border-top:1px solid var(--border);padding-top:14px;margin-top:14px} .hist-sec>p{margin-top:6px} .hist-sec .ticks{margin-top:4px}
.hist-sec h3.sub{margin:0;font-family:var(--sans);font-size:14.5px;font-weight:700;line-height:1.4} .hist .ai-label{font-size:14px;color:var(--text-dim);margin-top:2px}
.ev-confirm{margin-top:10px}
.fix-group{margin-top:24px} .fix-group+p{margin-top:4px}
.fix-row+.fix-row{border-top:1px solid var(--border)}
.fix-row summary{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 18px;padding:14px 16px 14px 36px;cursor:pointer;list-style:none;position:relative}
.fix-row summary::-webkit-details-marker{display:none}
.fix-row summary::before{content:"";position:absolute;left:16px;top:50%;width:7px;height:7px;border-right:2px solid var(--text-dim);border-bottom:2px solid var(--text-dim);transform:translateY(-70%) rotate(-45deg);transition:transform .15s ease-out}
.fix-row[open] summary::before{transform:translateY(-70%) rotate(45deg)}
.fix-row summary:hover{background:var(--bg-card-2)} .fix-row summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fix-title{font-weight:600;color:var(--text)}
.fix-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px 14px;font-size:13.5px;color:var(--text-muted)}
.who-foot{display:none}
.fix-body{padding:4px 16px 18px 36px} .fix-ctls{list-style:none} .fix-ctls li{padding:3px 0}
/* The critical controls at the top of the broker report: one row each, the status tag, the control, who accepted it. The columns line up
   across the rows (subgrid). On a phone a row stacks; on paper the list may run over pages, a row never breaks. */
.crit-list{list-style:none;display:grid;grid-template-columns:max-content minmax(0,1fr) auto;column-gap:14px}
.crit-list li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:9px 0;border-top:1px solid var(--border)}
.crit-list li:first-child{border-top:none}
.crit-list .tag{justify-self:start}
.crit-t{font-weight:600;min-width:0;overflow-wrap:anywhere}
.crit-by{color:var(--text-muted);text-align:right}
@media (max-width:560px){
  .crit-list{grid-template-columns:minmax(0,1fr)}
  .crit-list li{grid-template-columns:minmax(0,1fr);row-gap:4px}
  .crit-by{text-align:left}
}
@media print{ .card.crit-card{break-inside:auto} .crit-list li{break-inside:avoid;border-top-color:#bbb} .crit-by{color:#333} }
/* The "More" group of the menu folds. */
.nav-more summary{cursor:pointer;list-style:none} .nav-more summary::-webkit-details-marker{display:none}
.nav-more summary::after{content:" +";color:var(--text-dim)} .nav-more[open] summary::after{content:" \2212"}
/* Skip link: out of sight until a keyboard reaches it. */
.skip{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 14px;border-radius:9px;border:0;background:var(--accent);color:var(--on-accent);font:600 14px var(--sans);cursor:pointer}
.skip:focus{top:12px}
.tab-n{font-weight:400;font-variant-numeric:tabular-nums;margin-left:.35em}   /* the lighter weight sets the count apart; no fading, so it keeps 4.5:1 */
.score-how summary{cursor:pointer;color:var(--text-muted)} .score-how p{margin-top:6px}
p{color:var(--text-muted);font-size:15px}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--accent);margin-bottom:12px}
/* A section label that is also the section heading (h2): the label look, not the h2 look, in every theme. */
h2.eyebrow,[data-theme] h2.eyebrow{font:400 11px/1.5 var(--mono);letter-spacing:2px}
.muted{color:var(--text-muted)} .dim{color:var(--text-dim)} .small{font-size:13px}

/* buttons: filled primary + outline ghost only */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 14px var(--sans);padding:10px 18px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;text-decoration:none}
.btn{transition:filter .12s ease-out,border-color .12s ease-out,transform .12s ease-out}
.btn:hover{filter:brightness(1.08);text-decoration:none}
.btn:active{transform:translateY(1px)}
/* A form disables its buttons while the request runs, so the disabled look is also the "working" look. */
.btn:disabled{opacity:.55;cursor:progress;filter:none;transform:none}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--border-lit)}
.btn.ghost:hover{border-color:var(--accent)}
.btn-link{background:none;border:0;padding:0;font:inherit;color:var(--accent);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.btn.sm{padding:6px 12px;font-size:13px}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px 22px}
/* A card head on the website (h3) keeps a little air above its text. */
.card>h3+p{margin-top:6px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* A grid cell must be able to get narrower than its content (a table inside it scrolls sideways then, and the page does not). */
.grid2>*,.grid3>*{min-width:0}
.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.spread{justify-content:space-between}
.stack>*+*{margin-top:14px}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim);margin-bottom:6px}

.tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.4px;padding:2px 9px;border-radius:20px;white-space:nowrap}
.tag>.ico{width:12px;height:12px;vertical-align:-2px;margin-right:5px}   /* a glyph inside a tag (the client queue), in the color of the words */
.t-accent{background:var(--accent-dim);color:var(--accent)} .t-go{background:var(--go-dim);color:var(--go)}
.t-warn{background:var(--warn-dim);color:var(--warn)} .t-red{background:var(--red-dim);color:var(--red)}
.t-slate{background:var(--bg-card-2);color:var(--text-muted)}

label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
input,select,textarea{width:100%;font:15px var(--sans);color:var(--text);background:var(--bg);border:1px solid var(--border-lit);border-radius:9px;padding:10px 12px}
input,select,textarea{transition:border-color .12s ease-out}
input:hover,select:hover,textarea:hover{border-color:var(--text-dim)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
::placeholder{color:var(--text-dim);opacity:1}
select{cursor:pointer} input[type=file]{padding:8px;cursor:pointer}
/* A field the server sent back: a red edge, and the message right under it (fail() in app.js). */
[aria-invalid="true"]{border-color:var(--red)} [aria-invalid="true"]:focus{border-color:var(--red)}
.field-err{color:var(--red);font-size:14px;margin-top:6px;line-height:1.45}
.pw-hint{font-size:13.5px;color:var(--text-dim);margin-top:6px}
textarea{min-height:76px;resize:vertical}
.field+.field{margin-top:12px}

.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:12px}
table{width:100%;border-collapse:collapse;min-width:520px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
thead th{background:var(--bg-card-2);color:var(--text-muted);font-size:12px;white-space:nowrap}
.nowrap{white-space:nowrap}
.only-phone{display:none}
/* A table with many columns: less space between the columns, so it fits with no sideways scroll. */
.tbl-tight th,.tbl-tight td{padding-left:10px;padding-right:10px}
/* Buttons of one table row stand side by side and never break their words. */
.acts{display:flex;gap:6px;flex-wrap:nowrap} .btn{white-space:nowrap}
.acts.acts-col{flex-direction:column;align-items:flex-start;gap:4px}   /* a state over its button (a message marked done), so the cell stays narrow */
/* A small form inside a table cell: the select and its button share one line. */
form.inline{display:flex;gap:8px;align-items:center;flex-wrap:nowrap} form.inline select{width:auto;min-width:128px;padding:6px 10px;font-size:13px}
/* The read-only box of a link to copy (a report share link, a survey link). */
input.link-box{font-size:13px}
tbody tr:last-child td{border-bottom:none}
tr.click{cursor:pointer;transition:background .12s ease-out} tr.click:hover{background:var(--accent-dim)}
/* The controls tables stand one below the other, so their columns must line up from table to table. */
/* The name of a control in a table, and in a list of the dashboard (a.c-row), is in the text color; the glyph or the icon of its
   area before it keeps the accent. The name is still a link:
   it takes the accent and a line under it when the pointer is on it or the keyboard is. */
[data-theme] main.app a.c-row{color:var(--text);text-decoration:none} [data-theme] main.app a.c-row:hover>span:last-child,[data-theme] main.app a.c-row:focus-visible>span:last-child{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
[data-theme] main.app .fix-ctls li>a{color:var(--text)} [data-theme] main.app .fix-ctls li>a:hover,[data-theme] main.app .fix-ctls li>a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
[data-theme] main.app .tbl-controls td>a,[data-theme] main.app .tbl-queue td>a{color:var(--text)} [data-theme] main.app .tbl-controls td>a:hover,[data-theme] main.app .tbl-controls td>a:focus-visible,[data-theme] main.app .tbl-queue td>a:hover,[data-theme] main.app .tbl-queue td>a:focus-visible{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.tbl-controls{table-layout:fixed} .tbl-controls th:nth-child(2){width:130px} .tbl-controls th:nth-child(3){width:110px} .tbl-controls th:nth-child(4){width:164px}
td.empty{color:var(--text-dim);text-align:center;padding:26px 14px}

.bar{height:8px;background:var(--bg-card-2);border-radius:6px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:6px}
.note{border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);background:var(--accent-dim);border-radius:10px;padding:12px 16px}
.note.warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-dim)}
.note.ok{border-color:color-mix(in srgb,var(--go) 40%,transparent);background:var(--go-dim)}
/* Sign-up framework boxes: a full-height row to tap on a touch screen. */
@media(pointer:coarse){ .fw-pick{min-height:44px} .fw-pick input{width:22px!important;height:22px!important} }
.note p{font-size:14px} .note ul{padding-left:20px;margin-top:6px;font-size:14px}
/* A training-scenario answer, after it is checked: the picked option turns green or red; a wrong pick also shows the right one in green. */
.opt-right{background:var(--go-dim);border-radius:8px;padding:6px 8px;margin-left:-8px;margin-right:-8px}
.opt-wrong{background:var(--red-dim);border-radius:8px;padding:6px 8px;margin-left:-8px;margin-right:-8px}

.theme-toggle{position:fixed;bottom:14px;right:14px;z-index:50;font:11px var(--mono);text-transform:uppercase;color:var(--text-muted);background:var(--bg-card);border:1px solid var(--border-lit);border-radius:999px;padding:7px 13px;cursor:pointer}

/* The footer of the public pages: the name and the plain disclaimer, four labelled link columns, the operator line.
   The links are quiet ink, not blue: nothing in a footer is the main action. The bottom padding clears the floating Theme button. */
footer.foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 48px;padding:40px 0 90px;border-top:1px solid var(--border);font-size:14px}
.foot-brand{max-width:30ch}
.foot-name{font-weight:700;font-size:15px;color:var(--text)} .foot-name:hover{text-decoration:none}
.foot-brand p{font-size:14px;color:var(--text-dim);margin-top:6px}
.foot-nav{display:grid;grid-template-columns:repeat(4,auto);gap:24px 40px}
.foot-h{font:400 11px/1.5 var(--mono);letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);margin-bottom:10px}
.foot-nav ul{list-style:none;display:grid;gap:6px}
.foot-nav a{color:var(--text-muted)} .foot-nav a:hover{color:var(--text)}
.foot a[aria-current="page"]{color:var(--text);font-weight:600}
.foot-base{grid-column:1/-1;padding-top:18px;border-top:1px solid var(--border);font-size:13px;color:var(--text-dim)}
/* Under 1000px the name and the four columns no longer fit side by side: the name goes above them. */
@media(max-width:1000px){ footer.foot{grid-template-columns:minmax(0,1fr)} .foot-nav{justify-content:start} }
@media(max-width:860px){ footer.foot{padding-bottom:8px} }   /* the Theme button sits under the footer here */
@media(max-width:560px){ .foot-nav{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media print{ footer.foot{display:none} }

/* ---- app shell ---- */
/* minmax(0,1fr), not 1fr: a 1fr track cannot shrink below its content, so one wide table pushed the whole page past a phone screen. */
.shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
.side{border-right:1px solid var(--border);padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:20px;margin-bottom:4px;color:var(--text)}
.brand:hover{text-decoration:none}
.mark{width:30px;height:30px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;flex-shrink:0}
.mark svg{width:17px;height:17px}
.nav{margin-top:22px}
.nav a{display:block;color:var(--text-muted);font-size:14px;padding:8px 10px;border-radius:8px;transition:background .12s ease-out,color .12s ease-out}
.nav a:hover{background:var(--bg-card);color:var(--text);text-decoration:none}
.nav a.on{background:var(--accent-dim);color:var(--accent);font-weight:600}
/* Menu groups of a client: the daily work, then the company settings. The label is plain text, not a heading. */
.nav-group+.nav-group{margin-top:18px}
.nav-h{font-size:12px;font-weight:600;color:var(--text-dim);padding:0 10px 6px}
/* Tabs (framework, report kind, plan filter) look like the current menu item. A filled blue button stays the one action of a page. */
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px}
@media(max-width:640px){ .tabs-fill{display:grid;grid-auto-flow:column;grid-auto-columns:1fr} .tabs-fill .tab{text-align:center;padding:8px 4px} .tabs-fill .tab>.ico{display:block;margin:0 auto 3px} }
/* An icon in a tab or in a button stands before the words, in the color of the words. */
.tab>.ico,.btn>.ico{width:16px;height:16px;flex:none} .tab>.ico{vertical-align:-3px;margin-right:7px}   /* a button spaces its icon with its own gap */
.tab{padding:6px 12px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-muted);transition:background .12s ease-out,color .12s ease-out}
.tab:hover{background:var(--bg-card-2);color:var(--text);text-decoration:none}
.tab[aria-current="page"]{background:var(--accent-dim);color:var(--accent)}
/* The dashboard's one next step: the same status panel as the control page, with its one action. */
/* ---------- Settings ----------
   The overview is one card per group, one line per settings page. Above a settings page stands the chooser: back to the overview,
   and each page as a pill. */
.set-card{padding:4px 22px} .set-list{list-style:none;margin:0;padding:0}
[data-theme] main.app a.s-line{text-decoration:none}
.s-line{display:grid;grid-template-columns:auto minmax(0,1.25fr) minmax(0,1fr) auto;gap:6px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border);color:var(--text)}
.set-list li:last-child .s-line{border-bottom:0}
.s-name{display:grid;gap:2px} .s-name strong{font-weight:600;font-size:16px} .s-name .small{color:var(--text-muted)}
.s-now{color:var(--text)}
.s-go{color:var(--text-dim);display:grid;place-items:center} .s-go .ico{width:18px;height:18px}
a.s-line:hover .s-name strong,a.s-line:hover .s-go{color:var(--accent)}
.set-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:22px}
[data-theme] main.app .set-strip a{text-decoration:none}
.set-all{font-weight:600;color:var(--text);padding:8px 14px 8px 0;margin-right:6px;border-right:1px solid var(--border-lit)} .set-all:hover{color:var(--accent)}
.set-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--border);border-radius:20px;background:var(--surface);color:var(--text-muted);font-size:14px;font-weight:600;transition:border-color .12s ease-out,color .12s ease-out}
.set-pill .ico{width:16px;height:16px} .set-pill:hover{border-color:var(--accent);color:var(--accent)}
.set-pill[aria-current="page"]{background:var(--btn);border-color:var(--btn);color:#fff}
@media(max-width:860px){ .s-line{grid-template-columns:auto minmax(0,1fr) auto} .s-now{grid-column:2;grid-row:2} .s-go{grid-row:1/span 2;grid-column:3} .s-line>.b-ico{grid-row:1/span 2;align-self:start} }
@media(pointer:coarse){ .set-pill,.set-all{min-height:44px} .set-all{display:inline-flex;align-items:center} }
/* A control always shows the icon of its area: in a box where the control is a line of a list, a title, or the name of an area
   (.b-ico in .c-row or h1.c-h), and as a bare glyph in a table cell or a short line (.c-gl). */
.b-ico{flex:none;width:38px;height:38px;border-radius:10px;background:var(--work);color:var(--accent);display:grid;place-items:center} .b-ico .ico{width:20px;height:20px}
.c-row{display:flex;align-items:center;gap:12px;min-width:0} .c-row>span,.c-row>div{min-width:0} .next-step .c-row{align-items:flex-start}
h2.c-row .b-ico{background:var(--surface);border:1px solid var(--border)}
.c-gl{display:inline-grid;place-items:center;flex:none;font-style:normal;color:var(--accent);margin-right:8px;vertical-align:-3px} .c-gl .ico{width:17px;height:17px}
h1.c-h{display:flex;align-items:flex-start;gap:14px} h1.c-h>span{min-width:0}
h1.c-h .b-ico{width:46px;height:46px;border-radius:12px;margin-top:.02em;background:var(--surface);border:1px solid var(--border)} h1.c-h .b-ico .ico{width:24px;height:24px}
@media(max-width:640px){ h1.c-h{gap:11px} h1.c-h .b-ico{width:38px;height:38px;border-radius:10px} h1.c-h .b-ico .ico{width:20px;height:20px} }
@media print{ .c-gl{color:#000} .b-ico{background:none;border:1px solid #999;color:#000} }
.ctl-now.next-step{grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:14px} .next-step .btn{justify-self:end}
.next-step .next-h{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;color:var(--text-dim);margin-bottom:4px}
.next-step p{font-size:16px}
.dash-lists{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr);gap:14px} .dash-lists>.card{margin-top:0!important}   /* planCard carries its own top margin for other pages; the gap spaces the cards; minmax(0,…) keeps a long word from widening the column */
/* A long owner name, an email as a name, or a long title breaks inside its card on a phone instead of pushing past it. */
.plan-line>span,.plan-line a,.dash-lists .row.spread>a:not(.small),.next-step p,.sky-step-note{overflow-wrap:anywhere} .dash-lists .row.spread>a:not(.small){min-width:0}
.dash-lists:empty{display:none}
.dash-top>.card{margin-top:0!important}
/* The owner's renewal date form on the dashboard: one line, on the page (not a navy card: it is a question, not a record). */
.renewal-line{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px;padding:14px 20px}
/* Policy Center forms: a tick box or a radio button sits before its words, at its own size. */
.pc input[type=checkbox],.pc input[type=radio]{width:auto;flex:none} .pc label.row{flex-wrap:nowrap;font-weight:400;margin-bottom:0}
/* A group of questions: its heading stands clear of the group before it and close to its own fields. A question with choices reads like a field label. */
.pc fieldset{border:0;padding:0;min-width:0} .pc legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0} .pc fieldset label.row+label.row{margin-top:6px}
/* Touch screens: each choice is a row of 44px with a larger box. */
/* The Policy center's Build page (viewPolicy; docs/design-archive/control-and-policy.html, "Policy center"): a rail of three steps,
   one panel at a time. The other pages are in a quiet "More" menu beside the title. */
.pc-menu{position:relative}
.pc-menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--border);border-radius:9px;font-size:13.5px;font-weight:600;color:var(--text-muted)}
.pc-menu>summary::-webkit-details-marker{display:none} .pc-menu>summary:hover{color:var(--text)}
.pc-menu nav{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:190px;display:flex;flex-direction:column;padding:6px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;box-shadow:0 10px 30px rgba(16,24,40,.12)}
.pc-menu nav a{padding:9px 10px;border-radius:7px;color:var(--text);font-size:14px} .pc-menu nav a:hover{background:var(--bg-card-2);text-decoration:none}
.pc-menu nav a[aria-current]{font-weight:700}
.pc-back{margin:0 0 6px;font-size:14px}
.steps-rail{display:flex;gap:6px;margin-bottom:16px;max-width:720px}
.srail{flex:1;text-align:center;font-size:12.5px;font-weight:600;color:var(--text-dim);padding:9px 4px;border-radius:9px;background:var(--bg-card);border:1px solid var(--border);text-decoration:none}
a.srail:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}
.srail.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.srail.done{color:var(--go);border-color:var(--go);background:var(--go-dim)}
.pc-step{max-width:720px;padding:22px 24px}
.pc-h{font:800 17px/1.3 var(--sans);margin:0 0 4px;letter-spacing:0} .pc-sub{font-size:13.5px;color:var(--text-muted);margin:0 0 16px} .pc-step>p.small{margin:10px 0 0}
.pc-step .field{margin-bottom:14px} .pc-step .field>label,.pc-step legend{display:block;font-size:13px;font-weight:700;margin-bottom:6px;color:var(--text)}
.pc-step fieldset{border:0;padding:0;margin-left:0;margin-right:0;min-width:0}
.yn{display:flex;gap:8px;flex-wrap:wrap}
.yn label{position:relative;margin:0}
.yn input{position:absolute;opacity:0;width:1px;height:1px}
.yn span{display:inline-block;font-size:13px;font-weight:600;padding:9px 18px;border-radius:9px;border:1px solid var(--border);background:var(--bg-card);color:var(--text-muted);cursor:pointer}
.yn input:checked+span{background:var(--accent);color:#fff;border-color:var(--accent)}
.yn input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.yn input:disabled+span{cursor:default;opacity:.7}
.pc-moreq{margin:4px 0 6px} .pc-moreq>summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--accent);padding:6px 0;margin-bottom:8px}
.wizard-nav{display:flex;justify-content:space-between;gap:10px;margin-top:16px}
.wizard-nav .btn{width:auto;margin:0;padding:12px 22px}
.pc-step .btn.sec,.pc-step .pc-read>summary.btn{display:flex;width:100%;justify-content:center}
.pc-step .btn.sec{background:transparent;color:var(--accent);border:1px solid var(--border);font-weight:600;font-size:13.5px;padding:11px;box-shadow:none;margin-top:10px}
.pc-step .btn.sec:hover{background:var(--bg-card-2);text-decoration:none}
.mod{display:grid;grid-template-columns:22px minmax(0,1fr);gap:0 11px;align-items:start;border:1px solid var(--border);border-radius:10px;margin-bottom:9px;padding:12px 14px;background:var(--bg-card)}
.mod-check{width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.mod-check.locked{display:grid;place-items:center;border-radius:6px;background:var(--text-dim);color:var(--bg-card);cursor:default} .mod-check.locked .ico{width:13px;height:13px}
.mod details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px} .mod details>summary::-webkit-details-marker{display:none}
.mod-title{font-weight:700;font-size:14px;flex:1}
.mod-tag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.t-always{background:var(--bg-card-2);color:var(--text-dim)} .t-rec{background:var(--go-dim);color:var(--go)}
.mod-detail{margin:8px 0 0;font-size:12.5px;color:var(--text-muted)}
.review-sec{border:1px solid var(--border);border-radius:9px;padding:12px 14px;margin-bottom:12px;background:var(--bg-card)}
.review-sec .rs-h{font-weight:700;font-size:13.5px;display:flex;justify-content:space-between;gap:10px}
.review-sec .rs-b{font-size:12.5px;color:var(--text-dim);margin-top:4px}
.pc-read>summary{list-style:none;cursor:pointer;padding:14px;font-size:15px} .pc-read>summary::-webkit-details-marker{display:none}
.pc-doc{margin-top:12px;padding:14px 16px;border:1px solid var(--border);border-radius:9px;max-height:60vh;overflow:auto}
.pc-doc h3{font:700 16px/1.3 var(--sans);margin:0 0 8px} .pc-doc h4{font:700 14px/1.3 var(--sans);margin:14px 0 6px} .pc-doc p{font-size:14px;margin:0 0 8px}
.pc-disc{margin-top:14px;border-top:1px dashed var(--border)}
.pc-disc>details{border-bottom:1px solid var(--border)}
.pc-disc>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 2px;font-size:14px;font-weight:600}
.pc-disc>details>summary::-webkit-details-marker{display:none} .pc-disc .chev{color:var(--text-dim)} .pc-disc details[open]>summary .chev{transform:rotate(180deg)}
.pc-disc .disc-body{padding:2px 2px 16px;font-size:13.5px;color:var(--text-muted)} .pc-disc .disc-body ul{margin:6px 0 0;padding-left:18px}
@media(max-width:640px){ .pc-step{padding:18px 16px} .srail{font-size:11.5px} }
@media(pointer:coarse){ .mod details>summary,.pc-disc>details>summary{min-height:44px} }
.cd-task .upload-card>h2.sub:first-child{display:none}   /* the button above already names it */
/* The client's control page (clientControl in app.js; docs/design-archive/control-and-policy.html, "Control detail"): one column.
   A badge and a plain title, the reason and the next step, one primary button and a quiet one, then three folded rows. */
.cd{max-width:720px}
.cd .crumbs{margin-bottom:6px}
.cd-name{font-size:clamp(22px,3vw,28px);margin:0 0 14px;line-height:1.2}
.cd-card{padding:22px 24px}
.cd-status{display:flex;align-items:flex-start;gap:13px;margin-bottom:16px}
.cd-badge{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:22px;flex-shrink:0;font-weight:800;line-height:1}
.b-warn{background:var(--warn-dim);color:var(--warn)} .b-good{background:var(--go-dim);color:var(--go)}
.b-review{background:color-mix(in srgb,var(--accent) 12%,var(--bg-card));color:var(--accent)} .b-none{background:var(--bg-card-2);color:var(--text-dim)}
.cd-status .st-title{font:800 17px/1.2 var(--sans);margin:0;letter-spacing:0}
.cd-status .st-meta{font-size:12.5px;color:var(--text-dim);margin-top:2px}
.cd-reason{font-size:clamp(17px,2.4vw,20px);font-weight:700;line-height:1.35;margin:0 0 8px;color:var(--text);max-width:46ch}
.cd-why{font-size:14.5px;color:var(--text-muted);margin:0 0 20px;max-width:56ch;line-height:1.55}
.cd-actions{display:flex;flex-direction:column;gap:9px}
.cd-actions .btn{width:100%;justify-content:center;padding:14px;font-size:15px}
.cd-actions .btn.sec{background:transparent;color:var(--accent);border:1px solid var(--border);font-weight:600;font-size:13.5px;padding:11px;box-shadow:none}
.cd-actions .btn.sec:hover{background:var(--bg-card-2)}
.cd-task{margin-top:14px} .cd-task .panel,.cd-task form{margin:0}
.cd .disc{margin-top:18px;border-top:1px dashed var(--border)}
.cd .disc>details{border-bottom:1px solid var(--border)}
.cd .disc>details>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 2px;font-size:14px;font-weight:600;color:var(--text)}
.cd .disc>details>summary::-webkit-details-marker{display:none}
.cd .chev{color:var(--text-dim);font-size:13px;transition:transform .18s var(--ease)}
.cd .disc>details[open]>summary .chev{transform:rotate(180deg)}
.cd .disc-body{padding:2px 2px 16px;font-size:13.5px;color:var(--text-muted)} .cd .disc-body p+p,.cd .disc-body p+ul,.cd .disc-body ul+p{margin-top:8px}
.cd .disc-body ul{margin:4px 0 0;padding-left:18px} .cd .disc-body li{margin-bottom:6px}
.pipeline{display:flex;gap:8px;margin:4px 0 10px}
.pstep{flex:1;border:1px solid var(--border);border-radius:9px;padding:10px 6px;text-align:center;font-size:11px;color:var(--text-dim);background:var(--bg-card)}
.pstep.done{border-color:var(--go);color:var(--go);background:var(--go-dim)}
.pstep.now{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--bg-card));font-weight:700}
.mini-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:12.5px}
.mini-row:last-child{border-bottom:none}
.mini-main{display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere} .mini-sub{color:var(--text-dim);font-size:12px}
.mini-main>.hash{align-self:flex-start}
.mini-end{display:flex;align-items:center;gap:10px;flex-shrink:0}
.mini-more>summary{list-style:none;cursor:pointer} .mini-more>summary::-webkit-details-marker{display:none}
.mini-more[open]>summary .chev{transform:rotate(90deg)}
.mini-ref{padding-top:10px}
.chip{font-size:11px;font-weight:600;padding:2px 8px;border-radius:999px;white-space:nowrap}
.c-good{background:var(--go-dim);color:var(--go)} .c-review{background:color-mix(in srgb,var(--accent) 12%,var(--bg-card));color:var(--accent)}
.c-mute{background:var(--bg-card-2);color:var(--text-dim)} .c-warn{background:var(--warn-dim);color:var(--warn)}
@media(max-width:640px){ .cd-card{padding:18px 16px} .pipeline{flex-wrap:wrap} .pstep{flex:1 1 40%} }
@media(pointer:coarse){ .cd .disc>details>summary{padding:15px 2px} }
@media(pointer:coarse){ .pc label.row{min-height:44px} .pc input[type=checkbox],.pc input[type=radio]{width:20px;height:20px} }
.renewal-ask{margin-bottom:14px} .renewal-ask label{font-weight:600;margin-bottom:8px} .renewal-ask input{width:auto}
/* The question is the label's weight; the reason after it reads as plain text. */
.renewal-why{font-weight:400;color:var(--text-muted)}
.who{margin-top:26px;padding-top:16px;border-top:1px solid var(--border);font-size:13px}
/* Text that a person typed (a company name, a name, an email, a file name, a note) can be one very long word. Inside the page it breaks
   onto the next line instead of pushing past its card or the screen. Buttons and tags keep one line (white-space:nowrap). */
main,.side .lbl,.acct-menu{overflow-wrap:anywhere}
main.app{padding:34px clamp(18px,4vw,52px) 90px;max-width:1080px;width:100%;min-width:0}
/* A page that is one large table grows with the screen, so its columns get room and the text breaks less. Forms on it keep a width that is easy to read. */
main.app.wide{max-width:1680px} main.app.wide form.card{max-width:1016px}
/* Marketing pages: on a phone the brand takes the first row and the links the second. */
header.top{flex-wrap:wrap;gap:8px 16px} header.top .row{gap:6px 14px}
.page-head{margin-bottom:22px}
.page-head p{margin-top:6px}

.ring{position:relative;width:132px;height:132px;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
/* The one moving part: the score draws itself when the page opens. 351.86 = the length of the circle (2 x pi x 56). */
.ring circle+circle{animation:ring-draw .8s cubic-bezier(.16,1,.3,1)}
@keyframes ring-draw{from{stroke-dashoffset:351.86}}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:400 34px var(--display)}
.ring b.ring-count{display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:28px;line-height:1}
.ring-count small{font:600 12px var(--sans);color:var(--text-dim);letter-spacing:0;margin-top:6px}
.check li{list-style:none;display:flex;gap:10px;align-items:center;font-size:14px;padding:6px 0;color:var(--text-muted)}
.check li.done{color:var(--text-dim)}
/* A short term/definition list (the training lessons' glossary cards). */
.glossary div+div{margin-top:8px}
.glossary dt{font-size:14px;font-weight:700;color:var(--text)}
.glossary dd{margin:2px 0 0;font-size:13px;color:var(--text-muted)}
/* The training course's lesson list: a divider between rows, like the evidence trail (.ev), not margin alone. */
.lesson-row{padding:11px 0;border-bottom:1px solid var(--border)}
.lesson-row:last-child{border-bottom:none}
.stack>.lesson-row{margin-top:0}
.dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-lit);display:grid;place-items:center;font-size:11px;flex-shrink:0}
.done .dot{background:var(--go);border-color:var(--go);color:var(--bg);font-weight:700}

.ev{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--border)}
.ev:last-child{border-bottom:none}
.ev .hash{font-size:11px;color:var(--text-dim);word-break:break-all}
.drop{border:1.5px dashed var(--border-lit);border-radius:12px;padding:18px;text-align:center}
.msg{padding:10px 14px;border-radius:10px;background:var(--bg-card-2);font-size:14px}
.msg.analyst{background:var(--accent-dim)}
.msg .meta{font-size:11.5px;color:var(--text-dim);margin-bottom:3px}
/* Who speaks in the advisor chat: a small icon before the name. The questions a person can ask: a list with one icon each. */
.msg .meta>.ico{width:14px;height:14px;vertical-align:-2px;margin-right:5px;color:var(--accent)}
.adv-q{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px} .adv-q li{display:flex;align-items:center;gap:10px;font-size:15px} .adv-q .ico{flex:none;width:18px;height:18px;color:var(--accent)}

/* ---- one control ---- */
/* The page where the work happens, so its text is larger than the text of a table: 16px to read, 14px for the small facts, nothing below 13px. */
.ctl{--ease:cubic-bezier(.16,1,.3,1)}
.ico{width:18px;height:18px;flex-shrink:0}
.ctl p{font-size:16px} .ctl .dim{font-size:14px}
.ctl h2.sub{font-size:16px;letter-spacing:-.1px}
.ctl .tag{font-size:12px;padding:3px 11px}
.ctl .hint{font-size:14px;color:var(--text-dim);line-height:1.55}
.ctl label{font-size:14.5px} .ctl input,.ctl textarea{font-size:16px}
.ctl .card{padding:24px 26px}
.crumbs{display:flex;align-items:center;gap:6px;font-size:14.5px;color:var(--text-dim);margin-bottom:14px}
.crumbs .ico{width:15px;height:15px}
.ctl .page-head{margin-bottom:20px} .ctl .page-head h1{font-size:clamp(26px,3.4vw,36px);max-width:32ch}
.ctl-meta{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:14px}

/* Where the control is now, and what to do next. The first thing to read after the title. */
.ctl-now{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:start;gap:18px 32px;border:1px solid var(--border-lit);background:var(--bg-card);border-radius:14px;padding:20px 26px;margin-bottom:16px}
/* The status panel stays a navy locker; its verdict shows in the border and the step dots, not in a tinted fill. */
.ctl-now.warn{border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.ctl-now.go{border-color:color-mix(in srgb,var(--go) 50%,transparent)}
.ctl-ask{background:var(--bg-card-2);border-radius:4px 12px 12px 12px;padding:10px 14px;font-size:15px;color:var(--text)}
/* The verdict form's checklist of items to ask for: a tick, the words (editable), and where the item came from. */
.ask-pick{border:0;padding:0;margin:0;min-width:0;display:grid;gap:8px} .ask-pick legend{font-size:13px;font-weight:600;margin-bottom:4px;padding:0}
.ask-row{display:grid;grid-template-columns:20px minmax(0,1fr) 9.5rem;gap:10px;align-items:center}   /* a fixed label column: every box the same width */
.ask-row input[type=checkbox]{width:18px;height:18px;margin:0;accent-color:var(--accent)}
.ask-row input[type=text]{min-width:0}
.ask-row>:last-child:not(input){justify-self:start;white-space:nowrap}
.ask-new{color:var(--text-dim);text-align:center;font-weight:600}
@media(max-width:560px){ .ask-row{grid-template-columns:20px minmax(0,1fr)} .ask-row>:last-child:not(input){grid-column:2} .ask-row>span:empty{display:none} }
@media(pointer:coarse){ .ask-row input[type=checkbox]{width:22px;height:22px} }
.ask-list li .btn{margin-left:6px;vertical-align:middle}
/* Under an open item: what the automatic review says of it. Its own line, so the item and its button stay one line. */
.ask-said{display:block;margin-top:4px;overflow-wrap:anywhere} .ask-said .tag{vertical-align:baseline} .ask-said q{font-style:italic;color:var(--text-muted)}
.ctl-now p{color:var(--text)} .ctl-now p:only-child{grid-column:1/-1}

.ctl-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.ctl-grid .stack>*+*{margin-top:16px}
/* The notes and the upload box stay in view while the reader moves down a long evidence trail. */
.ctl-side{position:sticky;top:20px}
.ctl-req h2.sub{font-size:14.5px;margin:24px 0 8px} .ctl-req h2.sub:first-child{margin-top:0}
.ctl .ask{font-size:19px;line-height:1.5;color:var(--text);max-width:48ch}
.ticks{list-style:none} .ticks li{display:flex;gap:10px;align-items:flex-start;font-size:16px;color:var(--text);padding:5px 0}
.ticks .ico{color:var(--accent);margin-top:4px}
/* A line of a short plan list (Next fixes, the plan card, the yearly checks): the name, and the details under it at every width.
   The Critical label has its own column, and the details start where the name's words start (past the 17px icon and its 8px), so the rows line up. */
.plan-line{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:baseline;row-gap:3px}
.plan-name{display:contents}
.plan-line .prio{grid-column:1;margin-right:10px}
.plan-line a{grid-column:2;justify-self:start;display:flex;align-items:baseline}
.plan-line a .c-gl{align-self:flex-start;margin-top:3px}
.plan-line>.small{grid-column:2;padding-left:25px}
.prio-slot{visibility:hidden}
/* A plain bullet: these lists say what counts or what was asked, not what is done. */
.ticks .tick-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex-shrink:0;margin-top:11px}
.ctl .count{font-variant-numeric:tabular-nums}
.ctl .empty-line{color:var(--text-dim);padding-top:10px}

.ctl .ev{gap:14px;padding:16px 0} .ctl .ev:last-child{padding-bottom:2px}
.ev-ico{width:38px;height:38px;border-radius:10px;background:var(--bg-card-2);color:var(--text-muted);display:grid;place-items:center;flex-shrink:0}
.ev-body{flex:1;min-width:0}
.ev-top{display:flex;align-items:flex-start;gap:10px} .ev-head{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;flex:1;min-width:0}
.ev-name{font-size:16px;font-weight:600;color:var(--text);overflow-wrap:anywhere} a.ev-name{color:var(--accent)}
.ctl .ev-note{font-size:15px;margin-top:4px}
.ev-meta{font-size:14px;color:var(--text-dim);margin-top:3px;font-variant-numeric:tabular-nums}
/* The virus-scan gauge: the three stages, a bar that shows elapsed time (an estimate, not a percent), and a plain line about the wait. */
/* The virus-scan timer in a file's card: a bar and a line, no box of its own (the steps are in the status panel). */
.scan{margin-top:10px}
.scan-bar{height:8px;border-radius:999px;background:var(--ring-track);overflow:hidden}
/* The fill scales with transform, not width: no layout work on each step of the animation. */
.scan-bar i{display:block;width:100%;height:100%;background:var(--accent);border-radius:999px;transform-origin:left center;transition:transform .6s ease-out}
.scan-note{font-size:13px;color:var(--text-muted);margin-top:8px}
.ctl .hash{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:13px;color:var(--text-dim);background:none;border:1px solid var(--border);border-radius:7px;padding:4px 9px;cursor:pointer;word-break:normal;white-space:nowrap;max-width:100%;transition:border-color .15s var(--ease),color .15s var(--ease)}
.ctl .hash:hover{border-color:var(--border-lit);color:var(--text)} .ctl .hash:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctl .hash .ico{width:14px;height:14px} .ctl .hash.told{border-color:var(--go);color:var(--go)}
.hash-say:empty{display:none} .hash-say{font-family:var(--sans);font-weight:600}

.ctl .msg{display:flex;gap:12px;padding:0;background:none;font-size:16px}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:13px;font-weight:700;background:var(--bg-card-2);color:var(--text-muted)}
.msg.analyst .avatar{background:var(--accent);color:var(--on-accent)}
.msg-body{flex:1;min-width:0;background:var(--bg-card-2);border-radius:4px 14px 14px 14px;padding:12px 16px}
.msg.analyst .msg-body{background:var(--accent-dim)}
.ctl .msg .meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:14px;color:var(--text);margin-bottom:4px}
.ctl .msg p{color:var(--text);overflow-wrap:anywhere}

/* The file input covers the whole box with no ink of its own: a click anywhere opens the file window, and the browser takes a drop anywhere. */
.ctl .drop{position:relative;padding:26px 20px;display:flex;flex-direction:column;align-items:center;gap:8px;transition:border-color .15s var(--ease),background .15s var(--ease)}
.drop>.ico{width:26px;height:26px;color:var(--accent);transition:transform .3s var(--ease)}
.ctl .drop label{font-size:16px;margin:0} .drop-pick{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.ctl .drop input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.ctl .drop:hover,.ctl .drop.over,.ctl .drop:focus-within{border-color:var(--accent);background:var(--accent-dim)}
.ctl .drop.over>.ico{transform:translateY(-4px)}
.drop-files{list-style:none} .drop-files:empty{display:none}
.drop-files li{display:flex;align-items:center;gap:10px;font-size:15px;padding:7px 0;border-bottom:1px solid var(--border)} .drop-files li:last-child{border-bottom:none}
.drop-files .ico{color:var(--text-dim)} .drop-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop-files .big .drop-name{color:var(--warn)}

.ctl-pager{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:28px;padding-top:22px;border-top:1px solid var(--border)}
.ctl-pager a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;color:var(--text);min-width:0;transition:background .15s var(--ease)}
.ctl-pager a:hover{background:var(--bg-card);text-decoration:none}
.ctl-pager a>span{display:flex;flex-direction:column;min-width:0} .ctl-pager b{font-weight:600;font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ctl-pager .next{justify-content:flex-end;text-align:right}
.ctl-pager .btn>.ico{color:inherit}   /* the icon of a button takes the color of its words, not the dim color of the pager arrows */
.ctl-pager .ico{color:var(--text-dim);transition:transform .2s var(--ease),color .2s var(--ease)}
.ctl-pager .prev:hover .ico{transform:translateX(-3px);color:var(--accent)} .ctl-pager .next:hover .ico{transform:translateX(3px);color:var(--accent)}

/* Shown in #app until the first answer from the server is here. */
.loading{min-height:60vh;display:grid;place-items:center;color:var(--text-dim);font-size:14px}

.auth{max-width:940px;margin:0 auto;padding:60px 20px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}

@media(max-width:860px){
  /* Below 860px the floating Theme button covered card text (phones and tablets). It sits at the end of the page instead. */
  .theme-toggle{position:static;display:block;margin:24px auto 28px}
  .score-how summary{padding:8px 0} .ctl .hash{min-height:36px}
  /* auto 1fr: the menu row keeps its own height, so a short page leaves no hole below the menu. */
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  /* The menu is one line that moves sideways, and the name and the sign-out button share one line: the page content starts high on a phone. */
  .side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--border);padding:14px 16px 12px}
  .nav{display:flex;flex-wrap:nowrap;gap:4px;margin:12px -16px 0;padding:0 16px;overflow-x:auto;scrollbar-width:none} .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex-shrink:0}
  /* One row on a phone: the groups keep their order, without their labels. */
  .nav-group{display:contents} .nav-h{display:none}
  /* The account buttons leave the top row on a phone; they wait at the end of each page (.who-foot). */
  .who-acts{display:none!important} .who-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px;padding-top:16px;border-top:1px solid var(--border)}
  .fix-row summary{grid-template-columns:minmax(0,1fr)} .fix-meta{justify-content:flex-start}
  .ctl-now.next-step{grid-template-columns:minmax(0,1fr)} .next-step .btn{justify-self:start}
  /* The row scrolls sideways: fade the right edge so it is clear there is more. The end padding lets the last item scroll clear of the fade. */
  .nav{padding-right:40px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
  .nav.scrolled{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 40px),transparent)}
  .who{margin-top:10px;padding-top:10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
  /* The name alone on its own line under the menu said nothing: the account buttons wait at the end of the page (.who-foot). */
  .who{display:none!important}
  main.app{padding-top:22px}
  .grid2,.grid3,.auth{grid-template-columns:1fr}
  .auth{padding:28px 16px}
  .ctl-grid,.ctl-now{grid-template-columns:minmax(0,1fr)} .ctl-side{position:static}
  /* On a phone the upload form comes before the notes: it is the thing to do. */
  .ctl-side{display:flex;flex-direction:column;gap:16px} .ctl-grid .ctl-side>*{margin-top:0}
  .ctl .card,.ctl-now{padding:20px 18px}
}
/* A framework row: the box, the name and its words, then "Open controls" at the right. */
.fw-row{align-items:flex-start;flex-wrap:nowrap}
.fw-row>label{align-items:flex-start;flex-wrap:nowrap;font-weight:400;margin-bottom:0;flex:1;min-width:0}
/* A service on the Integrations page: its name and words, then "Choose" at the right. */
.pf-row{align-items:flex-start;flex-wrap:nowrap} .pf-row>span{flex:1;min-width:0}
/* A choice on the evidence template: the question as a label, then one line per answer. */
.tpl-choice{border:0;padding:0;margin:0;min-width:0} .tpl-choice legend{font-size:13px;font-weight:600;margin-bottom:6px;padding:0}
.tpl-choice label{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;font-size:15px;font-weight:400;margin-bottom:4px} .tpl-choice input{width:auto;margin:0}
/* The screenshots of a section of the template: small previews in a row, each with its name, its scan state, and Delete. */
.tpl-shots{display:flex;flex-direction:column;gap:8px} .tpl-shot-list{display:flex;flex-wrap:wrap;gap:12px}
.tpl-shot{margin:0;width:168px;display:flex;flex-direction:column;gap:4px}
.tpl-shot img,.tpl-shot-ph{width:168px;height:112px;object-fit:cover;border:1px solid var(--border);border-radius:8px;background:var(--bg);display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.tpl-shot figcaption{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center} .tpl-shot-name{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* The template footer, the versions on a control, and the version page (a print view). */
.tpl-foot .row{gap:8px} .tpl-vers,.ver-files{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.ver-answer{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}
@media print{ .ver-sec,.ver-shot{break-inside:avoid} .ver-shot img{width:240px;height:auto;max-height:320px;object-fit:contain} }
@media(max-width:560px){
  /* On a phone the button goes under the words (lined up with them), so the words keep the full width. */
  .fw-row{flex-wrap:wrap} .fw-row>label{flex-basis:100%} .fw-row>.btn{margin-left:30px}
  .pf-row{flex-wrap:wrap} .pf-row>span{flex-basis:100%}
  .ctl-pager{grid-template-columns:minmax(0,1fr);gap:4px} .ctl-pager .next{justify-content:space-between;text-align:left}
  .steps li{padding:14px 16px;gap:4px 12px} .step-task{grid-column:1/-1} .ctl .ask{font-size:18px}
}
/* Phone: a table with long text becomes a list. Each row is a block, and each cell says what it is (data-label). */
@media(max-width:640px){
  .tbl-stack,.tbl-controls{min-width:0;table-layout:auto}
  .tbl-stack thead,.tbl-controls thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl-stack tr,.tbl-controls tr{display:block;padding:12px 14px;border-bottom:1px solid var(--border)}
  .tbl-stack tbody tr:last-child,.tbl-controls tbody tr:last-child{border-bottom:none}
  .tbl-stack td,.tbl-controls td{display:block;border:none;padding:3px 0}
  .tbl-stack td[data-label]::before{content:attr(data-label);display:block;font-family:var(--sans);font-size:11px;font-weight:600;color:var(--text-dim);margin-top:6px}   /* a label in the text font, also over a mono value */
  .tbl-stack td:empty{display:none}
  /* tbl-pairs: short values. The label stands left and the value right, on one line, so a block stays short. */
  .tbl-pairs td[data-label]{display:flex;justify-content:space-between;align-items:baseline;gap:14px;text-align:right}
  .tbl-pairs td[data-label]::before{margin-top:0;text-align:left;flex-shrink:0}
  .only-phone{display:block}
  .tbl-stack .acts,.tbl-stack form.inline{flex-wrap:wrap;margin-top:6px}
  .tbl-controls td{display:inline-block;margin-right:12px} .tbl-controls td:first-child{display:block;margin:0 0 4px;font-size:14.5px}
  .tbl-controls th:nth-child(n){width:auto}
}
/* Touch screens: each thing to tap is 40px high or more, and the smallest labels are a little larger. */
@media(pointer:coarse){
  .btn.sm{padding:11px 14px} .nav a{padding:10px 12px} .theme-toggle{padding:12px 14px} .tab{padding:10px 14px}
  .q fieldset label{padding:10px 16px}
  .tag{font-size:11.5px} .lbl{font-size:11px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
@media print{
  .ring circle+circle{animation:none}
  .side,.theme-toggle,.no-print,.ctl-pager,.crumbs{display:none!important}
  .shell{display:block} body{background:#fff;color:#000} p,td,th{color:#000}
  .card,.tbl-wrap{border-color:#bbb;background:#fff}
  /* Reports: a wide table must not be cut at the paper edge, and a row must not break over two pages. */
  .tbl-wrap{overflow:visible} tr,.card{break-inside:avoid} main.app{max-width:none;padding:0} .small,.muted,.dim{color:#333!important}
  /* A heading stays with the table under it. A table has no frame on paper (a rounded frame cut at a page end looks torn):
     its rows carry the lines, and the column heads repeat on each page. */
  h1,h2,h3,.sec{break-after:avoid;break-inside:avoid}
  .tbl-wrap{border:none;border-radius:0} table{min-width:0} thead{display:table-header-group}
  thead th{border-top:1px solid #bbb;border-bottom:1px solid #bbb;white-space:normal}
  /* The score card keeps the ring beside its words, so the statement fits on the first page. */
  [data-print-foot]{flex-wrap:nowrap;align-items:flex-start}
  th,td{padding:8px 8px;font-size:11.5px;vertical-align:top} td .small,td.small{font-size:11px}
  /* Fixed columns: the analyst note gets room, and words break between letters only when one word is wider than its column. */
  .tbl-broker,.tbl-next{table-layout:fixed} .tbl-broker td,.tbl-next td{overflow-wrap:break-word} .tbl-broker .ev-dot{display:none} .tbl-broker .ev-sha{display:block;font-size:9.5px}
  .tbl-broker th:nth-child(1){width:27%} .tbl-broker th:nth-child(2){width:10%} .tbl-broker th:nth-child(3){width:15%} .tbl-broker th:nth-child(4){width:22%} .tbl-broker th:nth-child(5){width:26%}
  .tbl-next th:nth-child(1){width:34%} .tbl-next th:nth-child(2){width:11%} .tbl-next th:nth-child(3){width:15%} .tbl-next th:nth-child(4){width:40%}
  .score-how summary{list-style:none;font-weight:600} .score-how summary::-webkit-details-marker{display:none}
}
/* Paper: Letter or A4 by the printer, even margins, and the footer of every page. The left part is set before printing (beforeprint in app.js). */
@page{margin:14mm 13mm 16mm;@bottom-right{content:"Page " counter(page) " of " counter(pages);font:9pt system-ui,sans-serif;color:#555}
  @bottom-left{font:9pt system-ui,sans-serif;color:#555}}
/* The CIS Controls v8.1 safeguards of a cyber insurance control, under its question: one per line, the number in its own column. */
.cis-map{margin-top:12px;color:var(--text-muted)} .cis-h{font-weight:600;color:var(--text-dim);margin-bottom:4px}
.cis-map ul{list-style:none;margin:0;padding:0;display:grid;gap:3px} .cis-map li{display:grid;grid-template-columns:3.2em minmax(0,1fr);gap:8px}
.cis-n{font-variant-numeric:tabular-nums;color:var(--text)}
/* The automatic review card says in words that it is a machine first pass (AI_LABEL in app.js), not with a colored edge. */
.ai-card .ai-label { font-size: 14px; color: var(--text-dim); margin-top: 2px; }
.ai-card .ticks { margin-top: 4px; }

/* ================= The Fox shell: one white frame, a top bar (search, activity, account), a menu with icons and a
   filled blue current item, white cards with a hairline and no shadow, a thick ring. Verdict colors keep their meaning. ================= */
.topbar,.nav-ico{display:none}
[data-theme="fox"] .theme-toggle{background:var(--surface)}

/* The frame and the top bar. */
[data-theme="fox"] .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;grid-column:1/-1;padding:24px 36px 8px 36px}
[data-theme="fox"] .brand-top{display:flex;align-items:center;gap:14px;color:var(--text);text-decoration:none}
[data-theme="fox"] .sky-mark{width:48px;height:48px;flex-shrink:0}
[data-theme="fox"] .wm{font:800 clamp(22px,2.4vw,30px)/1 var(--display);letter-spacing:-.02em;color:var(--text)} [data-theme="fox"] .wm b{font-weight:800;color:var(--accent)}
[data-theme="fox"] .top-acts{display:flex;align-items:center;gap:10px}
[data-theme="fox"] .top-ico{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;color:var(--text-muted)}
[data-theme="fox"] .top-ico:hover{background:var(--accent-dim);color:var(--accent);text-decoration:none}
[data-theme="fox"] .top-ico .ico{width:24px;height:24px}
[data-theme="fox"] .top-leave{white-space:nowrap;flex-shrink:0;margin-right:4px;min-height:40px}
[data-theme="fox"] .acct{position:relative}
[data-theme="fox"] .acct summary{list-style:none;cursor:pointer;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:var(--avatar);color:var(--accent);font:700 17px var(--sans)}
[data-theme="fox"] .acct summary::-webkit-details-marker{display:none}
[data-theme="fox"] .acct summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[data-theme="fox"] .acct-menu{position:absolute;right:0;top:56px;z-index:30;min-width:240px;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 18px;font-size:14px}
[data-theme="fox"] .acct-menu .row{flex-wrap:wrap;gap:8px}
[data-theme="fox"] .side>.brand,[data-theme="fox"] .who{display:none}

/* The menu: icons, larger rows, the current page in solid blue. */
[data-theme="fox"] .side{border-right:none;padding:14px 18px 28px 24px}
[data-theme="fox"] .side>.lbl{padding:0 16px;margin:4px 0 0}
[data-theme="fox"] .nav{margin-top:14px}
[data-theme="fox"] .nav-h{display:none}
[data-theme="fox"] .nav-group+.nav-group{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
[data-theme="fox"] .nav a{display:flex;align-items:center;gap:14px;font-size:16px;font-weight:500;color:var(--nav-ink);padding:11px 16px;border-radius:14px}
[data-theme="fox"] .nav a+a{margin-top:2px}
[data-theme="fox"] .nav-ico{display:inline-grid;place-items:center;color:var(--nav-icon)}
[data-theme="fox"] .nav-ico .ico{width:22px;height:22px}
[data-theme="fox"] .nav a:hover{background:var(--accent-dim);color:var(--text)}
[data-theme="fox"] .nav a.on{background:var(--btn);color:#fff;font-weight:600;box-shadow:0 12px 22px -12px rgba(15,23,42,.35)}
[data-theme="fox"] .nav a.on .nav-ico{color:#fff}

/* Headings, cards, panels, notes, buttons. */
[data-theme="fox"] main.app h1{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.1}
/* The website pages in Sky and Fox (Fox is the default): headings in the same heavy weight as Navy's, not the thin 400 of the base type. The app keeps its own heading rules. */
[data-theme="fox"] :is(h1.sec,h2.sec,h2.sub){font-weight:700}
[data-theme="fox"] .card,[data-theme="fox"] .ctl-now{background:var(--surface);border:1px solid var(--border);border-radius:20px}
[data-theme="fox"] .panel{border-radius:20px;border-color:var(--border);background:var(--surface)}
[data-theme="fox"] .note{border-radius:14px}
[data-theme="fox"] .btn{border-radius:12px}
[data-theme="fox"] .btn:not(.ghost):not(.danger){background:var(--btn);border-color:var(--btn);color:#fff}
[data-theme="fox"] .btn:not(.ghost):not(.danger):hover{background:#1747C4;border-color:#1747C4;filter:none}
[data-theme="fox"] .tag{border-radius:999px}

/* The score card and the four steps of the picture. */
[data-theme="fox"] .sky-score{display:flex;align-items:center;gap:34px;padding:26px 32px;margin-bottom:16px}
[data-theme="fox"] .sky-h{font-size:clamp(20px,2vw,26px);font-weight:800;letter-spacing:-.01em}
[data-theme="fox"] .sky-sub{font-size:clamp(16px,1.6vw,20px);color:var(--text-dim);line-height:1.35;margin-top:4px}
/* A status, not a button: tag-sized, so it never reads as something to press. */
[data-theme="fox"] .pill{display:inline-block;align-self:flex-start;padding:4px 12px;border-radius:999px;font:600 13px var(--sans)}
[data-theme="fox"] .pill-ready{background:var(--go-dim);color:var(--go)}
[data-theme="fox"] .pill-gaps{background:var(--warn-dim);color:var(--warn)}
[data-theme="fox"] .pill-not_ready{background:var(--red-dim);color:var(--red)}
[data-theme="fox"] .pill-slate{background:var(--bg-card-2);color:var(--text-muted)}
[data-theme="fox"] .ring{width:150px;height:150px}
[data-theme="fox"] .ring svg{width:150px;height:150px;overflow:visible}
[data-theme="fox"] .ring circle{stroke-width:15px}
[data-theme="fox"] .ring circle:first-child{stroke:var(--ring-track)}
[data-theme="fox"] .ring[data-band="ready"] circle+circle{stroke:var(--sky-green)}
[data-theme="fox"] .ring[data-band="gaps"] circle+circle{stroke:#F59E0B}
[data-theme="fox"] .ring[data-band="not_ready"] circle+circle{stroke:#EF4444}
[data-theme="fox"] .ring b{font:800 38px var(--display);letter-spacing:-.02em}
[data-theme="fox"] .sky-steps{list-style:none;margin:0 0 16px;padding:8px 32px}
[data-theme="fox"] .sky-step{display:flex;align-items:center;gap:18px;padding:11px 0;font-size:clamp(15px,1.3vw,17px);font-weight:500}
[data-theme="fox"] .sky-step+.sky-step{border-top:1px solid var(--border)}
[data-theme="fox"] .sky-step-ico{color:var(--accent);display:grid;place-items:center} [data-theme="fox"] .sky-step-ico .ico{width:24px;height:24px}
[data-theme="fox"] .sky-step-name{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
[data-theme="fox"] .sky-step-name a{color:var(--text);align-self:flex-start}
[data-theme="fox"] .sky-step-note{font-size:13.5px;font-weight:400;color:var(--text-dim)}
[data-theme="fox"] .ring b.ring-count{font-size:30px}
[data-theme="fox"] .sky-check{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--border-lit);flex-shrink:0}
/* The check fill is a step darker than the ring, so the white check clears 3:1 (3.3:1). */
[data-theme="fox"] .sky-step.done .sky-check{background:var(--check-green);border-color:var(--check-green);color:#fff}
/* Started, not done: a blue ring with the count inside ("1/7"). */
[data-theme="fox"] .sky-step.part .sky-check{border-color:var(--accent)}
[data-theme="fox"] .sky-count{font-size:11px;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
[data-theme="fox"] .sky-check .ico{width:19px;height:19px;stroke-width:3}

/* Wide screens: one white rounded frame on the pale blue page; the work area is a soft inner panel. */
@media (min-width:861px){
  [data-theme="fox"] .shell{grid-template-columns:270px minmax(0,1fr);grid-template-rows:auto 1fr;width:calc(100% - 56px);max-width:1480px;margin:28px auto;min-height:calc(100vh - 56px);background:var(--bg);border-radius:30px}
  [data-theme="fox"] .side{position:sticky;top:0;height:auto;max-height:100vh}
  [data-theme="fox"] main.app{max-width:none;width:auto;margin:10px 32px 32px 4px;padding:30px clamp(20px,3vw,40px) 60px;background:var(--work);border:1px solid var(--border);border-radius:24px}
}
@media (max-width:860px){
  /* Three rows on a phone (top bar, menu, page): the page row takes the extra height, so a short page leaves no gap under the menu. */
  [data-theme="fox"] .shell{grid-template-rows:auto auto 1fr}
  [data-theme="fox"] .topbar{padding:14px 16px 6px}
  [data-theme="fox"] .sky-mark{width:38px;height:38px}
  [data-theme="fox"] .top-ico{width:40px;height:40px} [data-theme="fox"] .acct summary{width:40px;height:40px;font-size:15px}
  [data-theme="fox"] .nav a{padding:9px 14px;font-size:15px}
  [data-theme="fox"] .nav-group+.nav-group{margin-top:0;padding-top:0;border-top:none}
  [data-theme="fox"] .sky-score{gap:24px;padding:22px 20px}
  [data-theme="fox"] .sky-steps{padding:4px 20px}
  [data-theme="fox"] .sky-step{gap:14px}
}
/* A phone: the ring goes above the words of the score card (on a tablet they stand side by side). */
@media (max-width:560px){ [data-theme="fox"] .sky-score{flex-direction:column;align-items:flex-start;gap:18px} }
/* A phone: the mark, the wordmark and three 44px buttons must fit 360px, so the gaps close up and the wordmark scales with the screen. */
@media (max-width:480px){
  [data-theme="fox"] .topbar{gap:8px}
  [data-theme="fox"] .brand-top{gap:8px;min-width:0}
  [data-theme="fox"] .wm{font-size:clamp(17px,5vw,22px)}
  [data-theme="fox"] .top-acts{gap:4px;flex-shrink:0}
  /* The demo adds "Leave demo" to the bar. The wordmark gives up its place; the mark stays. */
  [data-theme="fox"] .topbar.in-demo .wm{display:none}
}
@media print{ [data-theme="fox"] .shell{margin:0;box-shadow:none;border-radius:0} [data-theme="fox"] main.app{background:#fff;border:none;margin:0;padding:0} }
/* Fox with white fills: the initials circle keeps a hairline, and hover uses the raised fill, so both stay visible on white. */
[data-theme="fox"] .acct summary{border:1px solid var(--border-lit)}
[data-theme="fox"] .nav a:hover,[data-theme="fox"] .top-ico:hover{background:var(--bg-card-2)}
/* Fox tables: white rows, and one header row in the solid blue of the buttons, with white text. */
[data-theme="fox"] .tbl-wrap,[data-theme="fox"] td{background:var(--surface)}
[data-theme="fox"] thead{background:var(--btn)}   /* the blue of the buttons and of the active menu line, in both modes */
[data-theme="fox"] thead th{background:transparent;color:#FFFFFF;border-bottom-color:transparent}
[data-theme="fox"] tr.click:hover td{background:var(--bg-card-2)}
@media print{ [data-theme="fox"] thead{background:none} [data-theme="fox"] thead th{color:#000;border-bottom-color:#bbb} }
/* Fox: the plan list is white, like the tables. Row hover stays the raised gray. */
[data-theme="fox"] .fix-list{background:var(--surface)}
/* Fox: with a white Selection Fill, an accent tag keeps its shape with a blue hairline. */
[data-theme="fox"] .t-accent{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent)}
/* The logo is the shield-and-document image (logo.webp; logo.png stays for emails): no colored square behind it in any theme. */
img.mark,[data-theme] img.mark{background:none;border-radius:0;display:block;object-fit:contain}
/* Touch screens: each thing to tap is 44px high or more. A link inside a sentence is exempt; a table row is one target (it opens on a tap). */
@media(pointer:coarse){
  .btn,.nav a,.tab,.theme-toggle,.crumbs a,.btn-link,.ctl-crit,details>summary,.skip,a.brand{min-height:44px}
  .nav a{display:flex;align-items:center} .tab,.crumbs a,.btn-link{display:inline-flex;align-items:center}
  .foot-nav ul{gap:0} .foot-nav a{display:inline-flex;align-items:center;min-height:44px}
  .ctl-crit input{width:20px;height:20px;flex-shrink:0}
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select{min-height:44px}
  /* An iPhone zooms the page in when a field with text under 16px gets the focus. On touch screens every field is 16px:
     the base rule (15px), the small select of an inline form, and the read-only box of a link to copy. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea,form.inline select,input.link-box{font-size:16px}
  /* Links that stand alone in lists and card heads: a full-height row to tap. */
  .plan-line a,.card .row.spread>a.small,[data-theme="fox"] .sky-step-name a,a.ev-name,.ctl .hash{min-height:44px;display:inline-flex;align-items:center}
  [data-theme="fox"] .top-ico,[data-theme="fox"] .acct summary{width:44px;height:44px}
}

/* ---------- Admin (#/analyst/admin): three tabs, read-only tables, one panel under the open row ---------- */
/* The virus scanner while it is ready: one quiet line under the title. Not ready: a warning note instead. */
.adm-scan{display:flex;align-items:flex-start;margin:-8px 0 18px;color:var(--text-muted)} .adm-scan .c-gl{margin-top:2px}
.adm-scan-warn{margin:-6px 0 18px}
.adm-sec+.adm-sec{margin-top:36px}
.sec-head{flex-wrap:wrap;gap:10px 16px;margin-bottom:6px} .sec-head h2.sec{margin:0}
.adm-lead{margin:0 0 12px;color:var(--text-muted)}
.adm-form{margin:6px 0 16px}
.adm-old{margin-top:24px} .adm-old ul{padding-left:18px;margin-top:6px}
.adm-sec .empty-line{color:var(--text-dim);padding-top:10px}
/* A cell keeps its words whole (main breaks anywhere, which let a name column shrink to a few letters); only an email or an address
   breaks anywhere. The name column never shrinks below 200px, and the button column takes only its button. */
.tbl-adm td{overflow-wrap:break-word}
.tbl-adm .brk{overflow-wrap:anywhere}
.tbl-adm td:first-child{min-width:200px}
.tbl-adm td.adm-act{width:1%;text-align:right;white-space:nowrap}
.tbl-adm td.adm-decide{width:1%;min-width:220px}
.adm-msg{white-space:pre-wrap;margin:4px 0;max-width:60ch}
/* The open row and its panel read as one block: both on Raised Silver, with no line between them. */
.tbl-adm tr.adm-on>td{background:var(--bg-card-2);border-bottom-color:transparent}
.adm-edit-row>td{background:var(--bg-card-2);padding:2px 18px 20px}
.adm-edit{gap:18px}
.adm-part+.adm-part{border-top:1px solid var(--border-lit);padding-top:18px}
/* A partner's brand, web address, and email domain are cards on Partner settings. In the panel they are its sections, not cards in a card. */
[data-theme] .adm-edit .card{background:none;border:none;border-radius:0;padding:0;margin:0!important}
.adm-inline{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 14px} .adm-inline>div{flex:0 1 280px;min-width:min(200px,100%)}
.adm-acts{flex-wrap:wrap}
@media(max-width:640px){
  .tbl-adm td:first-child{min-width:0}
  /* Stacked, the row is the block: the open row and its panel share its fill, with no line between them. */
  .tbl-adm tr.adm-on,.tbl-adm tr.adm-edit-row{background:var(--bg-card-2)} .tbl-adm tr.adm-on{border-bottom:none;padding-bottom:4px}
  .tbl-adm tr.adm-on>td,.adm-edit-row>td{background:none}
  .tbl-adm tr.adm-edit-row{padding-top:0} .adm-edit-row>td{padding:8px 0 4px}
  .tbl-adm td.adm-act{text-align:left;margin-top:6px}
}