/* I-9 Complete application styles.
 *
 * Built only from the tokens in tokens.css and the component rules in
 * docs/I9Complete_DesignSystem.html (sections 2 to 9 and 12). Every value
 * that the design system fixes (sidebar widths, navy table headers, 8px
 * button radius, badge pills, 28px pipeline dots) is here once and used by
 * the macros in templates/_macros/ui.html. Templates carry no styling of
 * their own (AGENTS.md, "Templates and UI").
 *
 * Sections:
 *   1 fonts and reset       6 badges, status pills, urgency pills
 *   2 portal layout         7 alert banners
 *   3 sidebar               8 cards, metric cards, empty state
 *   4 buttons               9 pipeline tracker
 *   5 forms                10 tables
 *                          11 employee layout, auth and error pages, dev pages
 */

/* ── 1. Fonts (self-hosted; the paths are relative to this stylesheet) and reset ── */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url('../fonts/InterVariable.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/JetBrainsMono-Regular.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/JetBrainsMono-Medium.woff2') format('woff2')}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);background:var(--gray-50);color:var(--navy);line-height:1.6;font-size:13px}
a{color:var(--navy);text-decoration:underline}
a:hover{color:var(--red)}
.mono{font-family:var(--font-mono);font-size:12px}
.muted{color:var(--gray-600)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* A control a page script turns on stays hidden until it does, whatever display its own class sets. */
[hidden]{display:none !important}

/* Typography roles (design system section 2) */
.page-title{font-size:15px;font-weight:700;color:var(--navy)}
.section-heading{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:10px}
.label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray-600)}

/* ── 2. Portal layout ── */
.portal{display:flex;min-height:100vh}
.portal-main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.topbar-user{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--gray-600)}
.content{padding:24px;flex:1}
.flashes{margin-bottom:16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.stack{display:flex;flex-direction:column;gap:12px}
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mt-16{margin-top:16px}
.page-actions{display:flex;justify-content:flex-end;gap:10px;margin-bottom:12px}
.mb-12{margin-bottom:12px}

/* ── 3. Sidebar (design system section 3, hard rules 1 and 6) ── */
/* The sidebar stays in the window while the page scrolls, so the logo and Sign out are always in view; a menu taller than the window scrolls inside it. */
.sidebar{width:var(--sidebar-width);flex-shrink:0;background:var(--sidebar-bg);padding:12px 8px;position:sticky;top:0;align-self:flex-start;height:100vh;overflow-y:auto;display:flex;flex-direction:column}
.sidebar--staff{width:210px}
.nav-logo-area{padding:8px 12px 12px;border-bottom:1px solid var(--sidebar-divider);margin-bottom:8px}
.nav-uc{font-size:26px;font-weight:800;color:var(--red);letter-spacing:-1px;line-height:1}
.nav-product{font-size:11px;font-weight:600;color:var(--white);margin-top:2px}
.nav-product span{color:var(--red)}
.nav-sub{font-size:9px;color:var(--sidebar-text);letter-spacing:0.3px;margin-top:1px}
.nav-employer{display:inline-block;margin-top:8px;font-size:10px;font-weight:600;padding:2px 8px;border-radius:var(--radius-full);background:var(--sidebar-badge-info-bg);color:var(--white);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-section-lbl{font-size:9px;color:var(--sidebar-text);padding:8px 8px 3px;letter-spacing:1px;text-transform:uppercase}
.nav-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:6px;font-size:12px;color:var(--sidebar-text);margin-bottom:1px;text-decoration:none}
.nav-item:hover{background:var(--sidebar-hover);color:var(--white)}
.nav-item.active{background:var(--sidebar-active);color:var(--white)}
.nav-item.pending{opacity:0.5;cursor:default}
.nav-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:0.5;flex-shrink:0}
.nav-badge{margin-left:auto;font-size:9px;font-weight:600;padding:1px 5px;border-radius:8px}
.nav-badge.alert{background:var(--red);color:var(--white)}
.nav-badge.info{background:var(--sidebar-badge-info-bg);color:var(--white)}
.nav-footer{margin-top:auto;padding:12px 8px 4px;border-top:1px solid var(--sidebar-divider)}
.nav-footer .btn{width:100%;justify-content:center}
.nav-footer p{margin-bottom:4px}
/* Footer actions on the navy sidebar (Switch portal, Sign out): quiet text that lights up like a menu item, the same in every portal. */
.btn-sidebar{background:transparent;color:var(--sidebar-text)}
.btn-sidebar:hover{background:var(--sidebar-hover);color:var(--white)}

/* ── 4. Buttons (design system section 5): 8px radius, never pill ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:500;border:none;cursor:pointer;font-family:var(--font-sans);text-decoration:none;line-height:1.4}
.btn:hover{text-decoration:none}
/* Primary rests on --red-dark (white text 4.82:1, WCAG AA) and darkens on hover (Josh, review 8.2). */
.btn-primary{background:var(--red-dark);color:var(--white)}
.btn-primary:hover{background:var(--critical-text);color:var(--white)}
.btn-secondary{background:var(--white);color:var(--navy);border:1px solid var(--gray-400)}
.btn-secondary:hover{background:var(--gray-50);color:var(--navy)}
.btn-ghost{background:var(--navy-pale);color:var(--navy)}
.btn-ghost:hover{background:var(--gray-200);color:var(--navy)}
.btn-danger{background:var(--red-light);color:var(--red-dark);border:1px solid var(--danger-border)}
.btn-danger:hover{background:var(--critical-bg);color:var(--red-dark)}
.btn-navy{background:var(--navy);color:var(--white)}
.btn-navy:hover{background:var(--navy-mid);color:var(--white)}
.btn-sm{padding:5px 10px;font-size:11px}
.btn:disabled,.btn[aria-disabled="true"]{opacity:0.5;cursor:not-allowed}
/* The confirmation dialog forms.js opens before a destructive action (review 8.3). */
.confirm-dialog{border:none;border-radius:var(--radius-lg);padding:24px;width:calc(100% - 32px);max-width:420px;margin:auto;background:var(--white);color:var(--navy);font-family:var(--font-sans);box-shadow:0 8px 24px var(--shadow-soft)}
.confirm-dialog::backdrop{background:var(--navy);opacity:0.5}
.confirm-text{font-size:15px;line-height:1.5}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.form-inline{display:inline}
/* A row of filter fields with the submit button on the same baseline (/client/cases, /staff/audit). */
.filter-bar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.filter-bar .field{width:200px}
/* A page action beside a filter bar sits on the bar's baseline, level with its button. */
.row-between:has(> .filter-bar){align-items:flex-end}

/* ── 5. Forms (not in the design system; built from the tokens) ── */
.form{display:flex;flex-direction:column;gap:14px;max-width:480px}
.form-wide{max-width:720px}
.field{display:flex;flex-direction:column;gap:4px}
.field .label{margin-bottom:2px}
.input,.select,.textarea{font-family:var(--font-sans);font-size:13px;color:var(--navy);background:var(--white);border:1px solid var(--gray-400);border-radius:var(--radius);padding:8px 12px;width:100%}
.input:focus,.select:focus,.textarea:focus{border-color:var(--navy-light)}
/* One visible keyboard focus for every control: --navy-light is 6.57:1 on white. White on the navy sidebar. */
.btn:focus-visible,.input:focus-visible,.select:focus-visible,.textarea:focus-visible,a:focus-visible,.nav-item:focus-visible,.portal-tile:focus-visible,.reveal-btn:focus-visible{outline:2px solid var(--navy-light);outline-offset:2px}
.sidebar .btn:focus-visible,.sidebar a:focus-visible{outline-color:var(--white)}
.input.mono{font-family:var(--font-mono)}
.textarea{min-height:96px;resize:vertical}
.checkbox{display:flex;align-items:flex-start;gap:8px;font-size:13px}
.checkbox input{width:16px;height:16px;margin-top:2px;flex-shrink:0}
.field-error .input,.field-error .select,.field-error .textarea{border-color:var(--red)}
.field-message{font-size:11px;color:var(--red-dark)}
.field-help{font-size:11px;color:var(--gray-600)}
.form-actions{display:flex;gap:10px;align-items:center;margin-top:4px}

/* ── 6. Badges and pills (design system section 4): pills are for badges only ── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:500;padding:4px 10px;border-radius:var(--radius-full);white-space:nowrap}
.badge-sm{font-size:10px;padding:2px 8px}
.b-success{background:var(--green-light);color:var(--green);border:1px solid var(--success-border)}
.b-danger{background:var(--red-light);color:var(--red-dark);border:1px solid var(--danger-border)}
.b-warning{background:var(--amber-light);color:var(--amber);border:1px solid var(--warning-border)}
.b-accent{background:var(--navy-pale);color:var(--navy-light);border:1px solid var(--accent-border)}
.b-neutral{background:var(--gray-100);color:var(--gray-600);border:1px solid var(--gray-200)}
.b-critical{background:var(--critical-bg);color:var(--critical-text);border:1px solid var(--critical-border)}
.dp{display:inline-block;font-size:11px;font-weight:500;padding:3px 8px;border-radius:var(--radius-full);white-space:nowrap}
.dp-expired{background:var(--red-light);color:var(--red-dark);border:1px solid var(--danger-border)}
.dp-critical{background:var(--critical-bg);color:var(--critical-text);border:1px solid var(--critical-border)}
.dp-warning{background:var(--amber-light);color:var(--amber);border:1px solid var(--warning-border)}
.dp-upcoming{background:var(--navy-pale);color:var(--navy-light);border:1px solid var(--accent-border)}
.dp-done{background:var(--green-light);color:var(--green);border:1px solid var(--success-border)}

/* ── 7. Alert banners (design system section 6) ── */
.alert-banner{padding:12px 16px;border-radius:var(--radius);display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}
.ab-danger{background:var(--red-light);border:1px solid var(--danger-border);border-left:3px solid var(--red)}
.ab-warning{background:var(--amber-light);border:1px solid var(--warning-border);border-left:3px solid var(--amber)}
.ab-info{background:var(--navy-pale);border:1px solid var(--accent-border);border-left:3px solid var(--navy-light)}
.ab-success{background:var(--green-light);border:1px solid var(--success-border);border-left:3px solid var(--green)}
.ab-icon{font-size:18px;line-height:1.2}
.ab-danger .ab-icon{color:var(--red)}
.ab-warning .ab-icon{color:var(--amber)}
.ab-info .ab-icon{color:var(--navy-light)}
.ab-success .ab-icon{color:var(--green)}
.ab-text{font-size:13px;line-height:1.5}
.ab-danger .ab-text{color:var(--red-dark)}
.ab-warning .ab-text{color:var(--amber)}
.ab-info .ab-text{color:var(--navy-light)}
.ab-success .ab-text{color:var(--green)}
.ab-text a{color:inherit}
.ab-text > strong:first-child{display:block}

/* ── 8. Cards, metric cards (section 7), empty state ── */
.comp-card{background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--gray-200);overflow:hidden;margin-bottom:12px}
/* Panel header: white, section-heading type, a rule under it (Josh, review 8.1). Navy stays on table headers only (hard rule 2). */
.comp-card-header{background:var(--white);padding:12px 16px;font-size:13px;font-weight:600;color:var(--navy);border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;gap:12px}
.comp-card-body{padding:20px}
.comp-card-body > p{margin-bottom:16px;max-width:72ch}
.comp-card-body > p:last-child{margin-bottom:0}
.comp-card-body--flush{padding:0;overflow-x:auto}
/* A full-width card that holds only a form is sized to the form, not the page (a table in it keeps it full width). */
.content > .comp-card:has(> .comp-card-body > .form):not(:has(.table)){max-width:560px}
.content > .comp-card:has(> .comp-card-body > .form-wide):not(:has(.table)){max-width:780px}
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.metric-card{background:var(--white);border-radius:var(--radius);padding:14px 16px;border:1px solid var(--gray-200)}
.metric-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px;color:var(--gray-600);margin-bottom:6px}
.metric-value{font-size:28px;font-weight:500;line-height:1;color:var(--navy)}
.metric-value--red{color:var(--red)}
.metric-value--amber{color:var(--amber)}
.metric-value--green{color:var(--green)}
.metric-sub{font-size:11px;color:var(--gray-600);margin-top:4px}
.empty-state{padding:32px 20px;text-align:center;color:var(--gray-600)}
.empty-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:4px}
.empty-text{font-size:12px;color:var(--gray-600)}
.empty-state .btn{margin-top:14px}

/* ── 9. Pipeline tracker (section 8, hard rule 4): 5 stages, 28px dots, held is a state ── */
.pipeline{display:flex;align-items:flex-start}
.p-stage{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}
.p-stage:not(:last-child)::after{content:'';position:absolute;top:14px;left:50%;width:100%;height:2px;z-index:0}
.p-stage.done::after{background:var(--green)}
.p-stage.active::after,.p-stage.pending::after,.p-stage.flagged::after,.p-stage.held::after{background:var(--gray-200)}
.p-dot{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;z-index:1;flex-shrink:0;font-weight:600}
.pd-done{background:var(--green);color:var(--white)}
.pd-active{background:var(--amber);color:var(--white)}
.pd-pending{background:var(--gray-200);color:var(--gray-400);border:2px solid var(--pending-border)}
.pd-flag{background:var(--red);color:var(--white)}
.pd-ev{background:var(--green);color:var(--white)}
/* Held: Section 2 is complete and E-Verify is deliberately waiting on a receipt replacement. */
.pd-held{background:var(--amber-light);color:var(--amber);border:2px solid var(--amber)}
/* The mini tracker in a table cell (Client dashboard): the same colours at 10px, no glyphs. */
.pipeline-mini{display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.pm-dot{width:10px;height:10px;border-radius:50%;display:inline-block;flex-shrink:0}
.pm-dot.pd-pending,.pm-dot.pd-held{border-width:1px}
/* "Nothing needs attention": one green line. */
.all-clear{color:var(--green);font-weight:600}
.p-label{font-size:11px;font-weight:500;margin-top:6px;text-align:center;color:var(--gray-600)}
.p-sub{font-size:10px;color:var(--gray-400);text-align:center;margin-top:2px}
.p-stage.held .p-sub{color:var(--amber)}

/* ── 10. Data tables (section 9, hard rule 2): header always navy ── */
.table-wrap{overflow-x:auto}
.table{width:100%;border-collapse:collapse;background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--gray-200)}
.table thead th{background:var(--table-header-bg);color:var(--table-header-text);border-top:3px solid var(--table-header-bg);padding:10px 14px;text-align:left;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;white-space:nowrap}
.table tbody td{padding:10px 14px;border-bottom:1px solid var(--gray-200);font-size:12px;vertical-align:middle}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover td{background:var(--table-row-hover)}
.table .cell-primary{font-weight:500;font-size:12px}
.table .cell-secondary{font-size:11px;color:var(--gray-600)}
.table .cell-muted{font-size:12px;color:var(--gray-600)}
.table .cell-urgent{font-size:12px;color:var(--red);font-weight:500}
.table .cell-actions{white-space:nowrap}
/* A table row's extra actions behind "Manage": a native popover (popovertarget), drawn above the page so the
 * scrolling table cannot clip it; Escape or a click elsewhere closes it. people_menu.js places it under its
 * button (.is-anchored); without the script the browser centres it. display is set only while it is open,
 * because a popover's closed state is display:none. */
.row-menu-panel{padding:14px;width:280px;white-space:normal;text-align:left;color:var(--navy);background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);box-shadow:0 8px 24px var(--shadow-soft)}
.row-menu-panel:popover-open{display:flex;flex-direction:column;gap:14px}
.row-menu-panel.is-anchored{inset:auto;margin:0}
.row-menu-title{font-size:13px;font-weight:600;color:var(--navy)}
.row-menu-group{display:flex;flex-direction:column;gap:6px}
.row-menu-group .btn{width:100%;justify-content:flex-start}
.row-menu-group form{display:flex;flex-direction:column;gap:6px}
/* One schedule table: a full-width row names each day. */
.table tbody tr.day-row td{background:var(--gray-50);font-weight:600;color:var(--navy)}
/* Under a table that shows only part of a list: "Showing 10 of 21 open cases" and a link to the rest. */
.table-footer{display:flex;gap:8px;align-items:center;padding:10px 14px;border-top:1px solid var(--gray-200);font-size:13px}
.comp-card .table{border-radius:0;border:none}
/* Column groups: a colored top border and a left rule on the group's first column. */
.table thead th.col-sec1{border-top:3px solid var(--col-sec1);color:var(--col-sec1-text)}
.table thead th.col-video{border-top:3px solid var(--col-video);color:var(--col-video-text)}
.table thead th.col-sec2{border-top:3px solid var(--col-sec2);color:var(--col-sec2-text)}
.table thead th.col-ev{border-top:3px solid var(--col-ev);color:var(--col-ev-text)}
.table thead th.col-sec1.col-first{border-left:2px solid var(--col-sec1-text)}
.table thead th.col-video.col-first{border-left:2px solid var(--col-video-text)}
.table thead th.col-sec2.col-first{border-left:2px solid var(--col-sec2-text)}
.table thead th.col-ev.col-first{border-left:2px solid var(--col-ev-text)}
.table .empty-state{padding:24px}

/* ── 11. Employee layout (mobile first), auth and error pages, dev pages ── */
.employee{max-width:480px;margin:0 auto;padding:16px;min-height:100vh;display:flex;flex-direction:column;gap:16px}
.employee-header{display:flex;align-items:center;gap:12px;padding:8px 0 12px;border-bottom:1px solid var(--gray-200)}
.employee-header .nav-uc{font-size:28px}
.employee-product{font-size:13px;font-weight:700;color:var(--navy)}
.employee-product span{color:var(--red)}
.employee-sub{font-size:11px;color:var(--navy-light)}
.employee-main{flex:1;display:flex;flex-direction:column;gap:14px;font-size:16px;line-height:1.5}
/* Secondary text on the --gray-50 page: --navy-light passes AA where --gray-600 (4.45:1) does not. */
.employee-main .muted{color:var(--navy-light)}
.employee-main .ab-text{font-size:16px}
.employee-main .btn{width:100%;justify-content:center;padding:12px 16px;font-size:15px}
.employee-main .form{max-width:none}
.employee-main .input,.employee-main .select{font-size:16px;padding:12px}
.employee-footer{font-size:12px;color:var(--navy-light);text-align:center;padding:12px 0 24px;border-top:1px solid var(--gray-200)}
.employee-footer a{color:var(--navy);font-weight:600}
.employee-title{font-size:20px;font-weight:700;color:var(--navy)}
.tz-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tz-form .select{flex:1;min-width:0}
.employee-main .tz-form .btn{width:auto}
.slot-day{display:flex;flex-direction:column;gap:8px}
.slot-day-title{font-size:14px;font-weight:700;color:var(--navy);margin-top:4px}
.slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.employee-main .slot-grid .btn{padding:10px 4px;font-size:14px}
/* Auth pages (review section 9): a navy brand band over a white body, centred on a pale page.
 * Every page extending auth/_card.html uses it: sign in, forgot, reset, MFA, recovery codes, the portal picker. */
.auth-page-body{background:var(--navy-pale)}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.auth-wrap{width:100%;max-width:440px}
.auth-card{background:var(--white);border-radius:var(--radius-lg);box-shadow:0 8px 24px var(--shadow-soft);overflow:hidden;width:100%}
.auth-band{background:var(--navy);min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:24px;text-align:center}
.auth-band .nav-uc{font-size:64px}
.auth-product{font-size:28px;font-weight:700;color:var(--white);line-height:1.2}
.auth-product span{color:var(--red)}
.auth-by{font-size:14px;color:var(--sidebar-text)}
.auth-body{padding:40px}
.auth-card .form{max-width:none}
.auth-title{font-size:24px;font-weight:300;color:var(--navy);line-height:1.3;margin-bottom:20px}
.auth-card p{margin-bottom:12px}
.auth-body .input,.auth-body .select{height:48px;font-size:16px;padding:0 14px}
.auth-body .input::placeholder{color:var(--gray-600)}
.auth-body .form-actions{flex-direction:column;align-items:stretch}
.auth-body .form-actions .btn{width:100%;justify-content:center;height:48px;font-size:15px;font-weight:600}
.auth-links{font-size:13px;margin-top:16px;text-align:center}
.auth-links a{color:var(--navy-light)}
.auth-links--end{text-align:right}
.auth-secure{display:flex;align-items:center;justify-content:center;gap:6px;font-size:12px;color:var(--gray-600);margin-top:12px}
.auth-secure svg{width:14px;height:14px;flex-shrink:0}
.auth-hint{font-size:12px;color:var(--gray-600);text-align:center;margin-top:12px}
.auth-footer{font-size:12px;color:var(--navy-light);text-align:center;margin-top:16px}
/* The password field's show/hide button sits inside the input's right edge (login.js turns it on). */
.input-reveal{position:relative}
.input-reveal .input{padding-right:48px}
.reveal-btn{position:absolute;top:0;right:0;height:100%;width:44px;display:flex;align-items:center;justify-content:center;background:none;border:none;color:var(--gray-600);cursor:pointer;border-radius:var(--radius)}
.reveal-btn[aria-pressed="true"]{color:var(--navy)}
.reveal-btn svg{width:20px;height:20px}
/* One-time codes: centred, mono, spaced out so each digit reads on its own. */
.auth-code .input{text-align:center;font-family:var(--font-mono);font-size:20px;letter-spacing:4px}
.auth-code .label{text-align:center}
.qr-box{display:flex;justify-content:center;padding:16px;margin:12px 0 16px;background:var(--gray-50);border-radius:var(--radius)}
.auth-key{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.auth-key code{font-size:14px;word-break:break-all}
.recovery-codes{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0 16px;padding:12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius)}
.auth-actions{display:flex;gap:10px;margin-bottom:12px}
.auth-actions .btn{flex:1;justify-content:center}
/* Portal picker (review 9.4): one full-width tile per portal. */
.portal-tiles{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.portal-tile{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px;background:var(--white);border:1px solid var(--gray-400);border-radius:var(--radius);text-align:left;cursor:pointer;font-family:var(--font-sans);color:var(--navy)}
.portal-tile:hover,.portal-tile:focus-visible{background:var(--navy-pale);border-color:var(--navy-light)}
.portal-tile-name{display:block;font-size:15px;font-weight:600;color:var(--navy)}
.portal-tile-desc{display:block;font-size:12px;color:var(--gray-600);margin-top:2px}
.portal-tile svg{width:16px;height:16px;flex-shrink:0;color:var(--navy-light)}
.btn-link{background:none;color:var(--navy-light);text-decoration:underline;padding:0}
.btn-link:hover{background:none;color:var(--navy)}
@media (max-width:480px){.auth-page{padding:16px}.auth-band{min-height:0}.auth-band .nav-uc{font-size:48px}.auth-product{font-size:22px}.auth-body{padding:24px}.auth-key code{font-size:13px}}
.page{max-width:1100px;margin:0 auto;padding:32px 24px}
.message-body{font-family:var(--font-mono);font-size:12px;white-space:pre-wrap;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--radius);padding:10px 12px;margin-top:8px}
.card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--radius);padding:14px 16px;margin-bottom:10px}
.section-title{font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--gray-400);margin:24px 0 12px;display:flex;align-items:center;gap:10px}
.section-title::after{content:'';flex:1;height:1px;background:var(--gray-200)}

/* Tablets and small laptops: two metric cards a row, paired cards stacked. */
@media (max-width: 1024px){
  .metric-grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
}

/* Small screens: the sidebar collapses to a top strip so portal pages stay usable on a tablet. */
@media (max-width: 720px){
  .portal{flex-direction:column}
  .sidebar,.sidebar--staff{width:100%;min-height:0;padding:8px;position:static;height:auto;overflow:visible}
  .nav-logo-area{margin-bottom:4px}
  .nav-section-lbl{display:none}
  .sidebar-nav{display:flex;flex-wrap:wrap;gap:2px}
  .nav-footer{margin-top:8px}
  .metric-grid{grid-template-columns:1fr 1fr}
  .grid-2{grid-template-columns:1fr}
  .content{padding:16px}
}

/* ── Stage 4: agent prep and verification views (built from tokens) ── */
.facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;font-size:13px;margin:0}
.facts dt{color:var(--gray-600)}
.facts dd{margin:0;color:var(--gray-800)}
.attestation{font-size:15px;font-weight:700;color:var(--navy)}
.doc-block{border-bottom:1px solid var(--gray-200);padding-bottom:12px}
.doc-images{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.doc-figure{margin:0}
.doc-image{display:block;width:100%;max-width:100%;border:1px solid var(--gray-200);border-radius:var(--radius)}
.plain-list{margin:0 0 12px;padding-left:18px}
.plain-list li{margin-bottom:4px}
.consent-box{border:1px solid var(--accent-border);border-radius:var(--radius);padding:12px;margin-bottom:12px;background:var(--white)}
.call-stage{position:relative;background:var(--navy);border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/4;max-height:60vh;max-height:60svh;margin-bottom:12px}
/* The recording badge and the call controls sit on the video, so they stay on screen on a phone (review item 16). */
.call-badge{position:absolute;top:10px;left:10px;z-index:2}
.call-controls{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:14px;z-index:2}
.call-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--navy);color:var(--white);border:2px solid var(--white);cursor:pointer}
.call-btn[aria-pressed="true"]{background:var(--red-dark)}
.call-btn svg{width:22px;height:22px}
.call-remote{width:100%;height:100%;object-fit:cover}
.call-local{position:absolute;right:8px;top:8px;width:30%;border:2px solid var(--white);border-radius:var(--radius)}
.verify-grid{display:grid;grid-template-columns:minmax(320px,2fr) 3fr;gap:20px;align-items:start}
.verify-call{position:sticky;top:16px}
.call-stage--wide{aspect-ratio:4/3}
.doc-row{border:1px solid var(--gray-200);border-radius:var(--radius);padding:12px;margin:0 0 12px}
.signature-pad{display:block;width:100%;height:150px;border:1px solid var(--gray-200);border-radius:var(--radius);background:var(--white);touch-action:none}
@media (max-width:1100px){.verify-grid{grid-template-columns:1fr}.verify-call{position:static}}
/* Stage 5: the printable audit export (/staff/audit). Printing drops the portal chrome and starts each case on a new page. */
.export-case{margin-bottom:20px}
/* Browsers do not print backgrounds, so headers print as navy text over a navy rule instead of white on white. */
@media print{.sidebar,.topbar,.alert-banner,.flashes{display:none}.portal-main{margin:0}.export-case{break-before:page}.export-case:first-of-type{break-before:auto}.comp-card-header,.table thead th,.table thead th[class]{background:none;color:var(--navy);border-bottom:1px solid var(--navy)}}