/* KYRON HTM design system — shared by the online workspace and the offline device workspace.
   One set of tokens and components: field, choice group, date, register, buttons, notices, pills. */
:root{
 --navy:#042e50;--navy-2:#0b3d63;--teal:#0e6f71;--teal-dark:#0a5557;--teal-tint:#e3f2f1;
 --ink:#17222d;--ink-2:#3d4f5f;--muted:#5a6b79;--line:#d3dde4;--line-2:#b6c6d1;--bg:#f2f5f8;--card:#fff;
 --focus:#c97a00;--red:#b42318;--red-bg:#fdecea;--amber:#8a5300;--amber-bg:#fff4dc;--green:#1d6b3a;--green-bg:#e5f4ea;--info:#0b4f80;--info-bg:#e6f0f8;--grey:#5a6b79;--grey-bg:#eef1f4;
 --radius:12px;--radius-sm:8px;--tap:48px;--shadow:0 1px 2px rgba(4,46,80,.06),0 2px 8px rgba(4,46,80,.05);
 font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--bg);
 -webkit-text-size-adjust:100%;
}
*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--bg)}
[hidden]{display:none!important}
h1,h2,h3,h4{color:var(--navy);line-height:1.25;margin:0}
h1{font-size:28px}h2{font-size:22px}h3{font-size:18px}h4{font-size:16px}
p{margin:0}a{color:var(--teal-dark)}
.muted{color:var(--muted)}.small{font-size:14px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-9999px;top:8px;background:#fff;padding:10px 14px;z-index:100}.skip-link:focus{left:8px}

/* App bar */
.appbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:30;padding-top:env(safe-area-inset-top)}
.appbar-inner{max-width:1240px;margin:auto;display:flex;align-items:center;gap:16px;padding:8px 20px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;flex:none}
.brand img{border-radius:8px;background:#fff}.brand-text{display:flex;flex-direction:column;line-height:1.15}.brand-text small{font-size:12px;opacity:.8}
.mainnav{display:flex;gap:4px;flex:1;overflow-x:auto;scrollbar-width:none}
.mainnav a{color:#dce8f1;text-decoration:none;font-weight:600;font-size:15px;padding:0 14px;min-height:44px;display:flex;align-items:center;border-radius:var(--radius-sm);white-space:nowrap}
.mainnav a:hover{background:var(--navy-2);color:#fff}
.mainnav a[aria-current=page]{background:#fff;color:var(--navy)}
.mainnav .badge{margin-left:6px}
.account{display:flex;align-items:center;gap:10px;margin-left:auto}
.conn{font-size:13px;padding:4px 10px;border-radius:999px;background:var(--navy-2);color:#dce8f1;white-space:nowrap}
.conn.offline{background:var(--amber-bg);color:var(--amber);font-weight:700}
.account-menu{position:relative}.account-menu summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center}.account-menu summary::-webkit-details-marker{display:none}
.avatar{width:38px;height:38px;border-radius:50%;background:var(--teal);color:#fff;display:grid;place-items:center;font-weight:700}
.account-panel{position:absolute;right:0;top:50px;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 8px 24px rgba(4,46,80,.18);padding:16px;width:260px;display:grid;gap:12px}
.account-name{font-weight:700}
.dev-banner{margin:0;background:var(--amber-bg);color:var(--amber);font-size:13px;text-align:center;padding:6px 16px}
.badge{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:var(--red);color:#fff;font-size:12px;font-weight:700}

/* Page */
main{max-width:1240px;margin:auto;padding:24px 20px 96px;outline:none}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 24px;margin:4px 0 20px}
.page-head p{color:var(--muted);margin-top:4px}
.page-message:empty{display:none}.page-message{margin-bottom:16px}
.section-title{margin:28px 0 12px;font-size:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.stack{display:grid;gap:16px}.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px}

/* Buttons: one primary action per area, secondary actions outlined, destructive actions red */
.btn{font:inherit;font-weight:600;min-height:var(--tap);padding:10px 18px;border-radius:var(--radius-sm);border:1px solid var(--teal);background:#fff;color:var(--teal-dark);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;line-height:1.2;text-align:center}
.btn:hover{background:var(--teal-tint)}
.btn-primary{background:var(--teal);color:#fff}.btn-primary:hover{background:var(--teal-dark)}
.btn-secondary{background:#fff;color:var(--teal-dark)}
.btn-quiet{border-color:transparent;background:transparent;color:var(--teal-dark);padding:8px 12px;min-height:44px}
.btn-quiet:hover{background:var(--teal-tint)}
.btn-danger{border-color:var(--red);color:var(--red);background:#fff}.btn-danger:hover{background:var(--red-bg)}
.btn-danger-solid{border-color:var(--red);background:var(--red);color:#fff}
.btn-block{width:100%}
.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
.btn-link{font:inherit;border:0;background:none;color:var(--teal-dark);text-decoration:underline;cursor:pointer;min-height:44px;padding:0 8px;font-weight:600}

/* Form system (U05, U15, U23): label above control, consistent heights, stack on narrow screens */
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.label{font-weight:600;color:var(--ink)}
.field-hint{font-size:14px;color:var(--muted)}
input,select,textarea{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:10px 12px;min-height:var(--tap);width:100%;max-width:100%}
textarea{min-height:96px;resize:vertical;line-height:1.45}
select{appearance:none;-webkit-appearance:none;padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;background-size:6px 6px;background-repeat:no-repeat}
input[type=date],input[type=datetime-local]{max-width:260px}
input[type=number]{max-width:200px}
input:disabled,select:disabled,textarea:disabled{background:var(--grey-bg);color:var(--ink-2)}
input[type=checkbox],input[type=radio]{width:22px;height:22px;min-height:0;margin:0;accent-color:var(--teal);flex:none}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;align-items:start}
.form-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:8px}
fieldset{border:0;padding:0;margin:0;min-width:0}legend{font-weight:600;padding:0;margin-bottom:8px}
.check{display:flex;align-items:center;gap:12px;min-height:var(--tap);padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;cursor:pointer}
.check:has(input:checked){border-color:var(--teal);background:var(--teal-tint)}
.check-list{display:grid;gap:8px;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
/* Template answer choices (Yes / No / Not applicable etc.) as large segmented buttons */
.choice-group{display:flex;flex-wrap:wrap;gap:8px}
.choice{position:relative;display:flex;align-items:center;gap:10px;min-height:var(--tap);padding:8px 16px;border:1px solid var(--line-2);border-radius:var(--radius-sm);background:#fff;cursor:pointer;font-weight:600}
.choice input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer}
.choice:has(input:checked){background:var(--teal);border-color:var(--teal);color:#fff}
.choice:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.choice:has(input:disabled){cursor:default;opacity:.8}
.date-field{display:grid;gap:12px;grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:start}
.date-field.single{grid-template-columns:minmax(0,260px)}
.legacy-note{grid-column:1/-1;font-size:14px;color:var(--amber);background:var(--amber-bg);border-radius:var(--radius-sm);padding:8px 12px}

/* Pills / status (RAG paired with words; green only when the state supports it) */
.pill{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;white-space:nowrap}
.pill::before{content:'';width:8px;height:8px;border-radius:50%;background:currentColor}
.pill-info{background:var(--info-bg);color:var(--info)}.pill-green{background:var(--green-bg);color:var(--green)}.pill-amber{background:var(--amber-bg);color:var(--amber)}.pill-red{background:var(--red-bg);color:var(--red)}.pill-grey{background:var(--grey-bg);color:var(--grey)}
.type-tag{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);background:#e4ecf3;border-radius:6px;padding:3px 8px}
.type-tag.secondary{background:#efe7f6;color:#4b2a6b}

/* Notices placed beside the control they concern */
.notice{border-radius:var(--radius-sm);padding:12px 14px;border-left:4px solid;display:grid;gap:4px}
.notice-info{background:var(--info-bg);border-color:var(--info)}.notice-success{background:var(--green-bg);border-color:var(--green)}.notice-warning{background:var(--amber-bg);border-color:var(--amber)}.notice-error{background:var(--red-bg);border-color:var(--red)}.notice-progress{background:var(--grey-bg);border-color:var(--grey)}
.notice-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.status-line{min-height:0;font-size:15px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.status-line:empty{display:none}
.status-progress{color:var(--ink-2)}.status-progress::before{content:'';width:14px;height:14px;border:2px solid var(--line-2);border-top-color:var(--teal);border-radius:50%;animation:spin 1s linear infinite}
.status-success{color:var(--green);font-weight:600}.status-error{color:var(--red);font-weight:600}.status-warning{color:var(--amber);font-weight:600}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Empty / loading */
.empty-state{text-align:center;padding:40px 20px;background:#fff;border:1px dashed var(--line-2);border-radius:var(--radius);display:grid;gap:8px;justify-items:center}
.empty-state p{color:var(--muted);max-width:560px}.empty-actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:8px}
.skeleton-list{display:grid;gap:12px}.skeleton-card{height:112px;border-radius:var(--radius);background:linear-gradient(90deg,#e7edf2 25%,#f3f6f9 50%,#e7edf2 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}
@keyframes shimmer{to{background-position:-200% 0}}

/* Login */
.login-screen{display:grid;place-items:center;padding:24px 0}
.login-card{width:min(440px,100%);background:#fff;border:1px solid var(--line);border-radius:16px;padding:32px;display:grid;gap:16px;box-shadow:var(--shadow)}
.login-card img{border-radius:12px}.login-card h1{font-size:24px}
.login-offline{border-top:1px solid var(--line);padding-top:16px;display:grid;gap:8px}.login-offline p{color:var(--muted);font-size:14px}

/* My assessments */
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:16px}
.toolbar .field{flex:1 1 260px}
.segmented{display:inline-flex;background:#fff;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:3px;gap:3px}
.segmented button{font:inherit;font-weight:600;border:0;background:transparent;color:var(--ink-2);min-height:42px;padding:0 14px;border-radius:6px;cursor:pointer}
.segmented button[aria-pressed=true]{background:var(--navy);color:#fff}
.result-count{color:var(--muted);font-size:14px;margin:4px 0 12px}
.assessment-list{display:grid;gap:12px}
.a-card{position:relative;display:grid;grid-template-columns:1fr auto;gap:8px 20px;align-items:center;background:#fff;border:1px solid var(--line);border-left:6px solid var(--navy);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow)}
.a-card.secondary{border-left-color:#6b4a8b}
.a-card:hover{border-color:var(--teal);border-left-color:inherit;background:#fbfdfd}
.a-card:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.a-card h3{font-size:19px;margin:6px 0 2px}
.a-meta{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;color:var(--muted);font-size:14px}
.a-open{min-width:150px}
.a-open::after{content:'';position:absolute;inset:0;border-radius:var(--radius)}
.a-card .status-line{grid-column:1/-1}
@media(max-width:640px){.a-card{grid-template-columns:1fr}.a-open{width:100%}}

/* Assessment workspace (U12): one compact header, one view switcher, one save control */
.ws-head{margin:-8px 0 16px;border-bottom:1px solid var(--line)}
.ws-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.ws-title{flex:1 1 320px;min-width:0}
.ws-title h1{font-size:22px;overflow-wrap:anywhere}
.ws-sub{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:14px;color:var(--muted);margin-top:2px}
.ws-save{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.save-state{font-size:14px;display:flex;align-items:center;gap:8px;max-width:340px}
.save-state::before{content:'';width:10px;height:10px;border-radius:50%;background:var(--grey);flex:none}
.save-state.unsaved{color:var(--amber);font-weight:700}.save-state.unsaved::before{background:var(--amber)}
.save-state.server{color:var(--green)}.save-state.server::before{background:var(--green)}
.save-state.device{color:var(--info)}.save-state.device::before{background:var(--info)}
.save-state.saving::before{background:transparent;border:2px solid var(--line-2);border-top-color:var(--teal);animation:spin 1s linear infinite}
.save-state.error{color:var(--red);font-weight:700}.save-state.error::before{background:var(--red)}
.tabs{display:flex;gap:2px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.tabs button{font:inherit;font-weight:600;border:0;border-bottom:3px solid transparent;background:none;color:var(--ink-2);min-height:46px;padding:0 16px;cursor:pointer;white-space:nowrap}
.tabs button[aria-selected=true]{border-bottom-color:var(--teal);color:var(--navy)}
.tabs .badge{margin-left:6px}
.back-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--teal-dark);text-decoration:none;min-height:40px}
.ws-notice{margin:12px 0 0}
.ws-body{display:grid;grid-template-columns:280px minmax(0,1fr);gap:24px;align-items:start}
.ws-body.single{grid-template-columns:minmax(0,1fr)}
.section-list{position:sticky;top:76px;max-height:calc(100vh - 170px);overflow:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:8px}
.section-list button{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;width:100%;text-align:left;font:inherit;font-size:15px;border:0;background:none;border-radius:6px;padding:10px 10px;min-height:44px;cursor:pointer;color:var(--ink)}
.section-list button:hover{background:var(--teal-tint)}
.section-list button[aria-current=true]{background:var(--navy);color:#fff}
.section-list .count{font-size:12px;color:inherit;opacity:.75;white-space:nowrap}
.section-picker{display:none}
@media(max-width:999px){.ws-body{grid-template-columns:minmax(0,1fr)}.section-list{display:none}.section-picker{display:block}}
.section-head{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:12px}
.section-head h2{font-size:22px}
.jump{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:16px}
.jump summary{min-height:48px;display:flex;align-items:center;padding:0 16px;font-weight:600;cursor:pointer;color:var(--teal-dark)}
.jump ol{margin:0;padding:4px 16px 12px 40px;columns:2 320px;column-gap:32px}
.jump li{break-inside:avoid;padding:2px 0}.jump a{display:inline-block;padding:6px 0;text-decoration:none}
.jump li.done a::after{content:' ✓';color:var(--green);font-weight:700}
.q-list{display:grid;gap:14px}
.q-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;display:grid;gap:14px;scroll-margin-top:80px}
.q-card.recorded{border-left:4px solid var(--teal)}
.q-head{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}
.q-title{font-size:17px;line-height:1.4;color:var(--navy);font-weight:700;overflow-wrap:anywhere}
.q-num{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap;padding-top:3px}
.q-tools{display:flex;flex-wrap:wrap;gap:4px;border-top:1px solid var(--line);padding-top:8px;margin-top:2px}
.q-help{font-size:15px;color:var(--ink-2);background:var(--info-bg);border-radius:var(--radius-sm);padding:12px 14px;display:grid;gap:8px}
.q-help .source{font-size:13px;color:var(--muted)}
.q-help blockquote{margin:0;padding-left:12px;border-left:3px solid var(--line-2);color:var(--ink-2)}
.q-sub{border-top:1px dashed var(--line);padding-top:12px;display:grid;gap:12px}
.q-sub h4{font-size:15px}
.subsection-divider{margin:20px 0 4px;padding-top:4px;font-size:16px;color:var(--ink-2);text-transform:none}
.reference{background:#f7fafc;border:1px solid var(--line);border-radius:var(--radius);padding:16px 20px;display:grid;gap:10px}
.reference h3{font-size:16px}
.ref-table{border-collapse:collapse;width:100%;font-size:15px}
.ref-table th,.ref-table td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.ref-table th{background:#eaf0f5}
.matrix-wrap{overflow-x:auto}.matrix-wrap table{border-collapse:collapse;min-width:520px;width:100%}
.matrix-wrap th,.matrix-wrap td{border:1px solid var(--line);padding:10px;text-align:center}.matrix-wrap th{background:#eaf0f5}
.matrix-wrap caption{text-align:left;font-weight:700;margin-bottom:8px}
/* Risk bands follow the printed Part K colours (none, green, yellow, orange, red) as readable tints, always with the printed words. */
.band-1{background:#ffffff}.band-2{background:#d9f2d0}.band-3{background:#fff6b8}.band-4{background:#ffe0b0}.band-5{background:#ffd0cc}
.ref-table th[scope=row]{font-weight:700}.plain-list{margin:0;padding-left:18px}.plain-list li{margin:2px 0}
.register-row{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px;display:grid;gap:12px;background:#fbfcfd}
.register-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.attachment{display:grid;grid-template-columns:1fr auto;gap:8px 12px;align-items:end;border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px}
.action-row{border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--radius-sm);padding:14px;display:grid;gap:12px;background:#fffdf7}
.section-foot{position:sticky;bottom:0;z-index:15;margin:20px -20px -96px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));background:rgba(242,245,248,.96);backdrop-filter:blur(6px);border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:center}
.foot-mid{display:flex;align-items:center;gap:12px;justify-content:center;min-width:0}.section-foot .btn{white-space:nowrap}.section-foot .save-state{max-width:230px;font-size:13px;line-height:1.3}
@media(max-width:600px){.section-foot .btn{padding:10px 12px}}

/* Overview */
.overview-hero{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.ring{--pct:0;width:92px;height:92px;border-radius:50%;background:conic-gradient(var(--teal) calc(var(--pct)*1%),#e3eaf0 0);display:grid;place-items:center;position:relative}
.ring::before{content:'';position:absolute;inset:10px;border-radius:50%;background:#fff}
.ring span{position:relative;font-weight:800;color:var(--navy)}
.attention{display:grid;gap:10px}
.attention-item{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--radius-sm);padding:12px 14px;background:#fff}

/* Stage tracker (U04) */
.stages{display:flex;gap:0;list-style:none;padding:0;margin:0 0 8px;counter-reset:st}
.stages li{flex:1;position:relative;padding:28px 6px 0;text-align:center;font-size:13px;color:var(--muted);counter-increment:st}
.stages li::before{content:counter(st);position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:#e3eaf0;color:var(--ink-2);display:grid;place-items:center;font-weight:700;font-size:12px;z-index:1}
.stages li::after{content:'';position:absolute;top:11px;left:-50%;width:100%;height:2px;background:#e3eaf0}
.stages li:first-child::after{display:none}
.stages li.done::before{background:var(--green);color:#fff;content:'✓'}.stages li.current{color:var(--navy);font-weight:700}.stages li.current::before{background:var(--teal);color:#fff}
.decision-option{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;border:1px solid var(--line-2);border-radius:var(--radius-sm);padding:14px;cursor:pointer;background:#fff}
.decision-option:has(input:checked){border-color:var(--teal);background:var(--teal-tint)}
.decision-option strong{display:block}

/* Tasks */
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:16px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.picker{position:relative}
.picker-panel{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:12px;display:grid;gap:10px;margin-top:8px}
.picker-list{max-height:280px;overflow:auto;display:grid;gap:6px}
.task-card{display:grid;gap:10px}
.task-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.task-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px 16px;font-size:14px}
.task-facts dt{color:var(--muted);font-size:13px}.task-facts dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.unknown{color:var(--muted);font-weight:400;font-style:italic}
.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Transfers */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:16px;counter-reset:step}
.step{counter-increment:step;display:grid;grid-template-columns:44px 1fr;gap:16px}
.step::before{content:counter(step);width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}
.step .card{display:grid;gap:12px}
.result-table{width:100%;border-collapse:collapse;font-size:15px}
.result-table th,.result-table td{border-bottom:1px solid var(--line);padding:10px 8px;text-align:left;vertical-align:top}
@media(max-width:640px){.step{grid-template-columns:1fr}.step::before{width:32px;height:32px;font-size:15px}}

/* Admin and sub-navigation */
.subnav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px}
.subnav button{font:inherit;font-weight:600;min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:#fff;color:var(--ink-2);cursor:pointer}
.subnav button[aria-current=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.list-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.list-table th,.list-table td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.list-table th{background:#f3f6f9;font-size:14px;color:var(--ink-2)}
@media(max-width:700px){.list-table thead{display:none}.list-table tr{display:grid;padding:8px 0;border-bottom:1px solid var(--line)}.list-table td{border:0;padding:4px 12px}}
details.panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
details.panel>summary{min-height:52px;display:flex;align-items:center;padding:0 18px;font-weight:700;color:var(--navy);cursor:pointer}
details.panel>div{padding:0 18px 18px;display:grid;gap:14px}

/* Help */
.help-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px}
.help-grid ol{margin:8px 0 0;padding-left:22px;display:grid;gap:6px}

/* Dialog and toast */
.dialog{max-width:540px;width:calc(100% - 32px);border:0;border-radius:16px;padding:24px;color:var(--ink);box-shadow:0 20px 50px rgba(4,46,80,.3)}
.dialog::backdrop{background:rgba(4,46,80,.5)}
.dialog h2{margin-bottom:12px}.dialog>p,.dialog>div:not(.dialog-actions),.dialog>ul{margin-bottom:12px}
.dialog-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}
#toasts{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;display:grid;gap:8px;width:min(560px,calc(100% - 32px))}
.toast{display:flex;align-items:center;gap:8px;background:var(--navy);color:#fff;border-radius:var(--radius-sm);padding:6px 6px 6px 16px;box-shadow:0 6px 20px rgba(4,46,80,.3)}
.toast span{flex:1}.toast .btn-link{color:#fff}

@media(max-width:820px){.appbar-inner{flex-wrap:wrap;padding:8px 16px}.mainnav{order:3;flex-basis:100%}.brand-text small{display:none}.q-card{scroll-margin-top:130px}}
@media(max-width:600px){main{padding:16px 16px 96px}.section-foot{margin:20px -16px -96px;padding-left:16px;padding-right:16px}h1{font-size:24px}.date-field{grid-template-columns:1fr}.overview-hero{grid-template-columns:1fr}.q-card{padding:16px}}
@media print{.appbar,.dev-banner,.section-foot,.tabs{display:none}}
.stack>.btn,.stack>.btn-link,.card>.btn{justify-self:start}
.list-table .row{flex-wrap:nowrap;justify-content:space-between;gap:8px}.list-table details summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--teal-dark);font-weight:600}
.matrix-wrap .ref-table th,.matrix-wrap .ref-table td{text-align:left}

/* 0.2.7 — non-linear navigation: "Go to…" finder, back-to chip, section map, findings list */
.section-head{align-items:flex-end}.head-find{min-height:44px}
.section-foot{gap:8px}.foot-left{display:flex;gap:8px;align-items:center;min-width:0}
.foot-back{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;border:1px dashed var(--teal);background:#fff}
@media(max-width:900px){.foot-back{max-width:180px}}
@media(max-width:640px){.section-foot{flex-wrap:wrap}.foot-left{flex:1 1 100%;order:2}.foot-mid{order:1;flex:1}.foot-next{order:1}.foot-back{max-width:none;flex:1}}
.q-card.flash,.reference.flash{animation:flash 1.6s ease-out}
@keyframes flash{0%{box-shadow:0 0 0 4px var(--focus)}100%{box-shadow:0 0 0 0 transparent}}
.dialog.finder{max-width:760px;width:calc(100% - 24px);padding:0;max-height:min(86vh,900px);display:flex;flex-direction:column}
.dialog.finder[open]{display:flex}
.finder-head{display:flex;gap:8px;padding:14px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.finder-head input{flex:1;font-size:17px}
.finder-results{overflow:auto;padding:6px 14px 18px}
.finder-group{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:16px 0 6px}
.finder-item,.finding-item{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;text-align:left;font:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 12px;margin:0 0 6px;cursor:pointer;min-height:52px;color:var(--ink)}
.finder-item:hover,.finder-item:focus-visible,.finding-item:hover{border-color:var(--teal);background:var(--teal-tint)}
.finder-title{display:flex;flex-direction:column;min-width:0}.finder-title strong{font-weight:600;overflow-wrap:anywhere}
.finder-where{font-size:13px;color:var(--muted)}
.finder-badges{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;flex:none}
.mini{font-size:12px;font-weight:700;border-radius:999px;padding:2px 8px;background:var(--grey-bg);color:var(--grey);white-space:nowrap}
.mini-green{background:var(--green-bg);color:var(--green)}.mini-amber{background:var(--amber-bg);color:var(--amber)}
.finder-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,230px),1fr));gap:6px}
.finder-section{display:flex;justify-content:space-between;gap:8px;font:inherit;text-align:left;border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;padding:10px 12px;min-height:48px;cursor:pointer;color:var(--ink)}
.finder-section[aria-current=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.finder-section .count{font-size:12px;opacity:.75;white-space:nowrap}
.finder-empty{padding:12px 0}
.section-map{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:10px}
.section-tile{display:grid;gap:6px;text-align:left;font:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;cursor:pointer;color:var(--ink);min-height:84px}
.section-tile:hover{border-color:var(--teal)}.tile-name{font-weight:600;line-height:1.3}.tile-count{font-size:13px;color:var(--muted)}
.tile-bar{height:6px;border-radius:3px;background:#e3eaf0;overflow:hidden}.tile-bar span{display:block;height:100%;background:var(--teal)}
.finding-list{display:grid;gap:0}
.list-head{margin:8px 0 10px}
.area-table td{vertical-align:middle}.area-table .row{flex-wrap:wrap;justify-content:flex-start}
.area-panel h2{font-size:18px}
/* Footer: arrows only on narrower screens so "Back to" keeps a readable label */
.foot-back{max-width:340px}
@media(max-width:1000px){.foot-prev .foot-label{display:none}.foot-prev,.foot-next{min-width:52px}.foot-back{max-width:260px}}
@media(max-width:640px){.foot-next .foot-label{display:none}}
.task-facts{grid-template-columns:repeat(auto-fill,minmax(min(100%,190px),1fr))}.task-facts .fact{min-width:0}
/* 0.2.8: referral question context and recorded area ratings */
.referred-question{display:grid;gap:4px;border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--radius-sm);padding:10px 12px;background:#fffdf7;justify-items:start}
.referred-question .btn{margin-top:6px}
.reference.referred{border-left:4px solid var(--amber)}
.area-ref{margin:0}