/* TopReach portal design system. App style: framed sheet (seed 840481070), fitted to the TopReach brand.
   One face (Instrument Sans, self-hosted, OFL). One accent (TopReach orange) on the logo dot, the active tab underline and
   the main data element only. The frame is a low-chroma warm stone; work sits on white sheets with a 1px edge and no shadow.
   Grid arithmetic: sidebar 232 + sheet; inside the sheet 32px padding and one 16px gutter for every grid. */
@font-face{font-family:"Instrument Sans";src:url("instrument-sans-latin-wght.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Manrope";src:url("manrope-latin-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap}
:root{
 --frame:#f4f3f0;--surface:#ffffff;--raised:#f8f7f5;--active:#e9e7e2;--hover:#f1f0ec;
 --border:#e6e4df;--rule:#efeeea;--control:#cfccc5;
 --text:#151514;--muted:#5c5b57;--faint:#6b6a66;
 --primary:#1b1b1a;--primary-hover:#000;
 --accent:#b64219;--accent-ink:#8f3412;--accent-soft:#fbede6;
 --positive:#247b50;--pill-positive-bg:#dcfae5;--pill-positive-ink:#04250e;
 --negative:#c4242a;--pill-negative-bg:#ffedea;--pill-negative-ink:#831c1e;
 --pill-warning-bg:#fffbeb;--pill-warning-ink:#92400e;--pill-warning-edge:#fde68a;
 --pill-info-bg:#eaf1fb;--pill-info-ink:#1f3f6b;--pill-neutral-bg:#efeeea;--pill-neutral-ink:#3f3e3b;
 --radius-sheet:16px;--radius-card:8px;--radius-control:6px;--radius-chip:999px;
 --gap:16px;--card-pad:20px;--pad:32px;--control-height:36px;--row-height:48px;--nav-row:34px;
 --font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
 --fs-title:24px;--fs-section:16px;--fs-kpi:24px;--fs-answer:32px;--fs-body:14px;--fs-small:12px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--frame);color:var(--text);font:400 var(--fs-body)/20px var(--font);font-feature-settings:"ss01" 0}
button,input,select,textarea{font:inherit;color:inherit}
button,a,summary,input,select,textarea{-webkit-tap-highlight-color:transparent}
button,a,summary{touch-action:manipulation}
button{cursor:pointer;border:0;background:none;padding:0}
button:disabled{cursor:not-allowed}
a{color:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
h1,h2,h3,h4,p,ol,ul,dl,dd,figure,blockquote{margin:0}
ol,ul{padding:0}
h1{font-size:var(--fs-title);line-height:32px;font-weight:600;letter-spacing:-.01em}
h2{font-size:var(--fs-section);line-height:24px;font-weight:600}
h3{font-size:var(--fs-body);line-height:20px;font-weight:600}
small{font-size:var(--fs-small)}
svg{flex:none}
.num,.summary-strip strong,.large-number,td,time{font-variant-numeric:tabular-nums}
.skip{position:fixed;top:-80px;left:16px;z-index:50;background:var(--surface);padding:10px 16px;border-radius:var(--radius-control)}
.skip:focus{top:12px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--muted)}
.small-copy{font-size:var(--fs-small);line-height:18px}
.eyebrow{display:none}
.loading{display:grid;place-items:center;min-height:100dvh;color:var(--muted)}

/* Brand: the rank mark (three bars rising, the orange dot on the top one) and the wordmark. */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-size:17px;line-height:24px;font-weight:650;letter-spacing:-.02em;color:var(--text)}
.brand svg{width:22px;height:22px;flex:none}
.brand .mark-tile{fill:#bd3f17}
.brand .mark-burst{fill:none;stroke:#fff;stroke-width:8;stroke-linecap:square}

/* Shell: one tinted L-frame (sidebar + 48px top bar, no rule between) and a white sheet inset 8px right and bottom. */
.shell{display:grid;grid-template-columns:232px minmax(0,1fr);grid-template-rows:56px minmax(0,1fr);min-height:100dvh}
.sidebar{grid-row:1/3;position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;padding:16px 12px 16px 16px;overflow-y:auto}
.sidebar>.brand{margin:0 8px 20px;min-height:24px}
.workspace-label{margin:0 8px 4px;font-size:var(--fs-small);color:var(--muted)}
.nav-group{display:grid;gap:2px;margin-bottom:20px}
.nav-heading{font-size:var(--fs-small);line-height:16px;color:var(--muted);margin:0 8px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar nav a,.mobile-menu nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:var(--nav-row);padding:7px 8px;border-radius:var(--radius-control);text-decoration:none;color:#3a3936;font-size:var(--fs-body);line-height:20px}
.sidebar nav a:hover,.mobile-menu nav a:hover{background:var(--hover);color:var(--text)}
.sidebar nav a[aria-current=page],.mobile-menu nav a[aria-current=page]{background:var(--active);color:var(--text);font-weight:600}
.nav-count{flex:none;min-width:20px;height:20px;padding:0 6px;border-radius:var(--radius-chip);background:var(--accent);color:#fff;font-size:var(--fs-small);line-height:20px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}
.nav-soon{flex:none;font-size:var(--fs-small);color:var(--faint)}
.nav-dot{display:none}
.account{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--border)}
.avatar,.client-avatar{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--pill-neutral-bg);color:var(--text);font-size:13px;font-weight:600}
.account strong{display:block;font-size:13px;line-height:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account span{display:block;font-size:var(--fs-small);line-height:16px;color:var(--muted)}
.account .text-button{font-size:var(--fs-small);min-height:32px}
.topbar{grid-column:2;display:flex;align-items:center;gap:16px;min-width:0;padding:8px 24px 8px 0}
.topbar-scope{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.topbar-actions{display:flex;align-items:center;gap:16px;flex:none}
.crumb{color:var(--muted);font-size:13px;white-space:nowrap}
.crumb-separator{color:var(--control)}
.scope-name{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-search{position:relative;width:min(520px,100%);margin:0 auto}
.client-search input{width:100%;height:36px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--surface);padding:0 72px 0 36px;font-size:var(--fs-body)}
.client-search input:hover{border-color:var(--control)}
.client-search>svg{position:absolute;left:12px;top:11px;width:14px;height:14px;color:var(--muted);pointer-events:none}
.client-search kbd{position:absolute;right:8px;top:8px;font:500 11px/18px var(--font);color:var(--muted);border:1px solid var(--border);border-radius:4px;padding:0 6px;background:var(--raised)}
.search-results{position:absolute;z-index:30;top:42px;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);box-shadow:0 8px 24px rgb(0 0 0 / 10%);padding:6px;max-height:360px;overflow:auto}
.search-results button{display:flex;width:100%;align-items:center;gap:10px;padding:8px;border-radius:var(--radius-control);text-align:left;min-height:44px}
.search-results button[aria-selected=true],.search-results button:hover{background:var(--hover)}
.search-results strong{display:block;font-size:14px;font-weight:600}
.search-results small{display:block;color:var(--muted)}
.search-results .search-empty{padding:12px 8px;color:var(--muted)}
.workspace{grid-column:2;min-width:0;display:flex;flex-direction:column;margin:0 8px 8px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sheet);min-height:calc(100dvh - 64px)}
.workspace main{flex:1;width:100%;max-width:1360px;padding:28px var(--pad) 40px}
.workspace-footer{display:flex;justify-content:space-between;gap:16px;font-size:var(--fs-small);color:var(--muted);border-top:1px solid var(--rule);padding:14px var(--pad)}
.mobile-menu{display:none}
.mobile-menu>summary::before{display:none}
.mobile-menu>summary svg{width:20px;height:20px}
.preview-banner,.review-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 24px;background:var(--pill-warning-bg);border-bottom:1px solid var(--pill-warning-edge);color:var(--pill-warning-ink);font-size:13px}

/* Title row: a noun at 24/600, an optional grey line, actions right and bottom-aligned with that line. */
.page-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:24px}
.page-heading>div:first-child{min-width:0;max-width:820px}
.page-heading .lead{font-size:14px;line-height:20px;color:var(--muted);margin-top:4px}
.page-heading .finding{font-size:14px;line-height:20px;color:var(--text);margin-top:4px}
.page-heading .finding strong{color:var(--accent-ink)}
.page-actions,.page-heading>.button{display:flex;gap:8px;flex:none}
#page-heading:focus{outline:none}
.page-heading.sub{margin:4px 0 16px}
.page-heading.sub h2{font-size:18px;line-height:24px}
.section-tabs .ki-tab{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.section-tabs .num{font-size:12px;color:var(--accent-ink);font-weight:600}
.messages.single{grid-template-columns:minmax(0,1fr)}

/* Buttons: one near-black primary per screen, white secondary with a 1px edge, text tertiary. One height per row. */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-height);padding:0 14px;border-radius:var(--radius-control);border:1px solid transparent;font-size:14px;line-height:20px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .12s,border-color .12s}
.button.primary{background:var(--primary);color:#fff}
.button.primary:hover{background:var(--primary-hover)}
.button.secondary{background:var(--surface);color:var(--text);border-color:var(--control)}
.button.secondary:hover{background:var(--hover)}
.button.small{min-height:32px;padding:0 12px;font-size:13px}
.button:active{transform:translateY(1px)}
.button:disabled{background:var(--raised);color:var(--faint);border-color:var(--border);transform:none}
.button svg{width:16px;height:16px}
.text-button{display:inline-flex;align-items:center;gap:4px;min-height:32px;color:var(--text);font-size:13px;font-weight:600;text-decoration:none}
.text-button:hover{text-decoration:underline;text-underline-offset:3px}
.text-button svg{width:14px;height:14px}
.actions,.invite-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* Panels: white on the sheet, a 1px edge, no shadow. Section heading inside, 16px, with a right-aligned meta or action. */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-pad);margin-bottom:var(--gap);min-width:0}
.panel-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;min-height:24px}
.panel-title h2{overflow-wrap:anywhere}
.panel-title .meta{font-size:var(--fs-small);color:var(--muted)}
.panel>.muted,.panel>p{font-size:14px;line-height:20px}
.panel>p+p,.panel>p+.button,.panel>.muted+.button,.panel>p+form{margin-top:12px}
.panel>.button{margin-top:16px}
.panel h3+p{margin-top:2px}
.two-column{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--gap);align-items:start;margin-bottom:var(--gap)}
.two-column>.panel{margin:0}

/* KPIs: one container split by 1px dividers; label over value; the baseline in words under it. */
.summary-strip{display:grid;grid-template-columns:repeat(var(--cols,4),minmax(0,1fr));border:1px solid var(--border);border-radius:var(--radius-card);margin-bottom:var(--gap);background:var(--surface)}
.summary-strip[data-cols="5"]{--cols:5}
.summary-strip>button{text-align:left;width:100%;font:inherit;color:inherit;cursor:pointer}
.summary-strip>button:hover{background:var(--raised)}
.summary-strip>div,.summary-strip>a,.summary-strip>button{display:flex;flex-direction:column;gap:2px;min-width:0;padding:14px var(--card-pad);border-left:1px solid var(--border);text-decoration:none}
.summary-strip>:first-child{border-left:0}
.summary-strip>a:hover{background:var(--raised)}
.summary-strip span{font-size:13px;line-height:18px;color:var(--muted)}
.summary-strip strong{font-size:var(--fs-kpi);line-height:32px;font-weight:500;letter-spacing:-.01em}
.summary-strip strong.lead-figure{font-size:var(--fs-answer);line-height:40px;color:var(--accent-ink);font-weight:600}
.summary-strip small{font-size:var(--fs-small);line-height:16px;color:var(--muted)}
.large-number{font-size:var(--fs-answer);line-height:40px;font-weight:600;letter-spacing:-.01em;margin-bottom:4px}
.large-number small{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0}

/* Pills: pale tint with dark ink of the same hue. Never squeezed. */
.badge{display:inline-flex;align-items:center;flex:none;white-space:nowrap;height:22px;padding:0 8px;border-radius:var(--radius-chip);font-size:12px;line-height:22px;font-weight:500;background:var(--pill-neutral-bg);color:var(--pill-neutral-ink)}
.badge.active,.badge.pass,.badge.done,.badge.published,.badge.approved,.badge.connected,.badge.succeeded{background:var(--pill-positive-bg);color:var(--pill-positive-ink)}
.badge.warn,.badge.review,.badge.pending,.badge.partial,.badge.stale,.badge.paused,.badge.grace{background:var(--pill-warning-bg);color:var(--pill-warning-ink)}
.badge.fail,.badge.suspended,.badge.changes_requested,.badge.failed,.badge.unavailable,.badge.disconnected{background:var(--pill-negative-bg);color:var(--pill-negative-ink)}
.badge.in_progress,.badge.requested,.badge.queued,.badge.running,.badge.test{background:var(--pill-info-bg);color:var(--pill-info-ink)}
.badge:empty{display:none}
.internal-label{display:inline-flex;height:20px;align-items:center;padding:0 6px;border-radius:4px;background:var(--pill-neutral-bg);font-size:12px;color:var(--pill-neutral-ink);margin-bottom:4px}

/* Tables and lists: rules and alignment. 12px grey sentence-case headers, no band, numbers right. */
.data-table{width:100%;border-collapse:collapse;font-size:14px}
.data-table th{font-size:var(--fs-small);font-weight:400;color:var(--muted);text-align:left;padding:0 12px 8px;white-space:nowrap}
.data-table td{padding:0 12px;height:var(--row-height);border-top:1px solid var(--rule);vertical-align:middle}
.data-table tr:hover td{background:var(--raised)}
.data-table .num{text-align:right}
.data-table th:first-child,.data-table td:first-child{padding-left:0}
.data-table th:last-child,.data-table td:last-child{padding-right:0;text-align:right}
.row-link.identity,.data-table .identity{display:flex;align-items:center;gap:12px;min-width:0}
.data-table .identity strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table .identity small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table .zero{color:var(--faint)}
.row-link{text-align:left;display:block;min-width:0;max-width:100%}
.row-link:hover strong{text-decoration:underline;text-underline-offset:3px}
.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.table-toolbar input[type=search]{height:34px;width:300px;max-width:100%;border:1px solid var(--control);border-radius:var(--radius-control);padding:0 12px;background:var(--surface)}
.table-toolbar .count{font-size:13px;color:var(--muted)}
.segmented{display:inline-flex;gap:2px;padding:3px;border-radius:8px;background:var(--raised);border:1px solid var(--border)}
.segmented button{height:28px;padding:0 10px;border-radius:5px;font-size:13px;color:var(--muted)}
.segmented button[aria-pressed=true]{background:var(--surface);color:var(--text);font-weight:600;box-shadow:0 0 0 1px var(--border)}
.queue{display:grid}
.queue-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 16px;align-items:center;padding:12px 0;border-top:1px solid var(--rule);min-height:64px}
.queue-item:first-child{border-top:0;padding-top:0}
.queue-item:last-child{padding-bottom:0}
.queue-item strong{font-weight:600}
.queue-item p{font-size:13px;line-height:18px;color:var(--muted)}
.queue-kind{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:2px}
.queue-kind::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--control)}
.queue-kind.approve::before{background:var(--accent)}
.queue-empty,.empty-row{padding:12px;border:1px dashed var(--control);border-radius:var(--radius-card);color:var(--muted);font-size:13px}

/* Client list rows (legacy markup, still used on Subscriptions). */
.client-list{display:grid}
.client-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto 16px;gap:12px;align-items:center;width:100%;text-align:left;padding:10px 0;border-top:1px solid var(--rule);min-height:56px}
.client-row:first-child{border-top:0;padding-top:0}
.client-row:hover strong{text-decoration:underline;text-underline-offset:3px}
.client-row strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-row small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-count{font-size:12px;line-height:16px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.client-row svg,.journey svg{width:16px;height:16px;color:var(--muted)}

/* Next steps: a checklist with a state mark, never index numbers. */
.journey{list-style:none}
.journey li{display:grid;grid-template-columns:20px minmax(0,1fr) auto;gap:12px;align-items:start;padding:12px 0;border-top:1px solid var(--rule)}
.journey li:first-child{border-top:0;padding-top:0}
.journey li:last-child{padding-bottom:0}
.journey .step{width:16px;height:16px;margin-top:2px;border-radius:50%;border:1.5px solid var(--control)}
.journey .step.done{border-color:var(--positive);background:var(--positive);box-shadow:inset 0 0 0 3px var(--surface)}
.journey .step.next{border-color:var(--accent)}
.journey strong{font-weight:600}
.journey p{font-size:13px;line-height:18px;color:var(--muted);margin-top:2px}
.journey .text-button{min-height:24px}

.onboarding-banner,.billing-notice,.notice-box{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px var(--card-pad);border-radius:var(--radius-card);border:1px solid var(--pill-warning-edge);background:var(--pill-warning-bg);color:var(--pill-warning-ink);margin-bottom:var(--gap)}
.onboarding-banner h2{font-size:14px;line-height:20px}
.onboarding-banner p,.billing-notice p{font-size:13px;line-height:18px}
.billing-notice{display:block}
.billing-notice strong{display:block;font-size:13px}

/* Empty: keep the frame and the heading, one sentence, the next action. */
.empty{border:1px dashed var(--control);border-radius:var(--radius-card);padding:24px var(--card-pad);margin-bottom:var(--gap);background:var(--surface)}
.empty-mark{display:none}
.empty h2{font-size:var(--fs-section)}
.empty p{font-size:14px;line-height:20px;color:var(--muted);margin-top:4px;max-width:640px}
.empty .button{margin-top:16px}

/* Forms: label above the field, 38px inputs, 16px between fields. */
.form{display:grid;gap:16px;max-width:720px}
.form.narrow{max-width:440px}
.form.compact{gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
.form>.button,.form>.actions{justify-self:start}
.field{display:grid;gap:6px;min-width:0}
.field>span{font-size:13px;line-height:18px;font-weight:500}
.field input,.field textarea,.field select,.filter-label select,.ki-filters input,.ki-filters select{width:100%;min-width:0;min-height:38px;padding:8px 10px;border:1px solid var(--control);border-radius:var(--radius-control);background:var(--surface);font-size:14px;line-height:20px}
.field input:hover,.field textarea:hover,.field select:hover{border-color:#a9a6a0}
.field textarea{resize:vertical}
.field input[readonly]{background:var(--raised)}
.field input[type=file]{padding:6px}
.field input[type=file]::file-selector-button{margin-right:10px;border:1px solid var(--control);border-radius:var(--radius-control);background:var(--surface);padding:4px 10px;font:inherit}
::placeholder{color:var(--faint)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:20px;min-height:24px}
.check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--primary);flex:none}
.filter-label{display:inline-grid;gap:6px;font-size:13px;font-weight:500;margin-bottom:16px;min-width:240px}
fieldset{border:1px solid var(--border);border-radius:var(--radius-card);padding:12px 16px;margin:0}
legend{padding:0 4px;font-size:13px;font-weight:500}
details>summary{cursor:pointer;list-style:none;font-size:14px;font-weight:600;min-height:32px;display:flex;align-items:center;gap:8px}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .12s;flex:none}
details[open]>summary::before{transform:rotate(45deg)}
.saved-detail{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 16px;padding:12px 0;border-top:1px solid var(--rule)}
.saved-detail:first-child{border-top:0;padding-top:0}
.saved-detail>span{font-size:13px;color:var(--muted)}
.saved-detail>strong{font-weight:500;overflow-wrap:anywhere}
.saved-detail details{grid-column:2}
.saved-detail details>summary{font-size:13px;color:var(--muted);font-weight:500}
.contact-details{padding-top:4px}
.contact-details .field{margin-top:12px}
.service-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.service-option{border:1px solid var(--border);border-radius:var(--radius-card);padding:12px;min-height:48px}
.service-option:has(input:checked){border-color:var(--text);background:var(--raised)}
.service-plan{max-width:none}
.product-control{display:grid;gap:12px}
.control-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.service-agreements,.billing-items,.billing-jobs{display:grid;gap:0}
.service-agreements article,.billing-items article,.billing-jobs article{display:grid;gap:2px;padding:12px 0;border-top:1px solid var(--rule)}
.service-agreements article:first-child,.billing-items article:first-child,.billing-jobs article:first-child{border-top:0;padding-top:0}
.billing-items article{grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px 16px}
.billing-items dl{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 24px;font-size:13px}
.billing-items dt{color:var(--muted);display:inline}
.billing-items dd{display:inline;margin-left:6px;font-variant-numeric:tabular-nums}
.service-agreements p,.billing-jobs p{font-size:13px;line-height:18px;color:var(--muted)}
.report-meta,.audit-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px;color:var(--muted)}
.report-meta{margin-bottom:12px}
.report-summary{font-size:14px;line-height:22px;max-width:760px;margin-bottom:16px}
.report-tasks,.invoice-list,.enforcement-list,.activity,.history{list-style:none;display:grid}
.report-tasks li,.invoice-list li,.enforcement-list li,.activity li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--rule);font-size:14px}
.report-tasks li:first-child,.invoice-list li:first-child,.enforcement-list li:first-child,.activity li:first-child{border-top:0}
.report-tasks li p{flex-basis:100%;font-size:13px;color:var(--muted)}
.report-tasks li{flex-wrap:wrap}
.activity time,.invoice-list time{font-size:13px;color:var(--muted)}
.invoice-list li>div{display:grid}
.enforcement-list li span{font-size:13px;color:var(--muted)}
.history{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--gap)}
.history article{display:grid;gap:2px;padding:14px var(--card-pad);border:1px solid var(--border);border-radius:var(--radius-card)}
.history time{font-size:13px;color:var(--muted)}
.history strong{font-size:var(--fs-kpi);line-height:32px;font-weight:500}
.history span{font-size:12px;color:var(--muted)}
.rows{display:grid}
.queue-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--rule)}
.queue-row:first-child{border-top:0;padding-top:0}
.queue-row p{font-size:13px;line-height:18px}

/* Audit score: the score is the screen's answer, in the one accent; categories as bars at their true ratio. */
.audit-score{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end;padding-bottom:16px;border-bottom:1px solid var(--rule);margin-bottom:16px}
.audit-score strong{display:block;font-size:40px;line-height:48px;font-weight:600;color:var(--accent-ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.audit-score strong small{font-size:16px;color:var(--muted);font-weight:400}
.audit-score p{font-size:14px;color:var(--muted)}
.audit-meta{flex-direction:column;align-items:flex-end;gap:2px}
.audit-meta strong{font-size:14px;line-height:20px;color:var(--text);font-weight:600}
.category-scores{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px 24px;margin-bottom:16px}
.category-scores>div{display:grid;gap:6px}
.category-scores>div>div{display:flex;justify-content:space-between;gap:8px;font-size:14px}
.category-scores strong{font-weight:600;font-variant-numeric:tabular-nums}
.category-scores small{font-size:12px;color:var(--muted)}
progress{appearance:none;width:100%;height:6px;border:0;border-radius:999px;background:var(--rule);overflow:hidden}
progress::-webkit-progress-bar{background:var(--rule);border-radius:999px}
progress::-webkit-progress-value{background:var(--text);border-radius:999px}
progress::-moz-progress-bar{background:var(--text);border-radius:999px}
.finding{border-top:1px solid var(--rule);padding:10px 0}
.finding:first-of-type{border-top:0}
.finding>summary{display:grid;grid-template-columns:12px auto minmax(0,1fr) auto;gap:10px;align-items:center;font-weight:500}
.finding>summary span:last-child{font-size:12px;color:var(--muted);font-weight:400}
.finding>div{display:grid;gap:10px;padding:10px 0 4px 22px;font-size:14px;line-height:20px;max-width:820px}
.finding blockquote{border-left:2px solid var(--border);padding-left:12px;color:var(--muted);font-size:13px}
.source-links{list-style:none;display:grid;gap:4px;font-size:13px}
.source-links a{overflow-wrap:anywhere}

/* Tasks: rows of work with one status mark and the action on the row. */
.task-list{display:grid}
.task{padding:16px 0;border-top:1px solid var(--rule)}
.task:first-child{border-top:0;padding-top:0}
.task:last-child{padding-bottom:0}
.task-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px}
.task h3{font-size:15px;line-height:22px}
.task>p{font-size:14px;line-height:20px;color:#3a3936;max-width:820px}
.task>p+p{margin-top:6px}
.completion{margin-top:10px;padding:10px 12px;border-radius:var(--radius-control);background:var(--raised)}
.completion strong{font-size:13px}
.completion p{font-size:13px;line-height:18px;color:var(--muted)}
.internal-note{margin-top:8px;font-size:13px;color:var(--pill-warning-ink);background:var(--pill-warning-bg);padding:8px 10px;border-radius:var(--radius-control)}

/* Access control and dialogs. */
.access-control{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--card-pad);border:1px solid var(--border);border-radius:var(--radius-card)}
.access-control p{font-size:13px;margin-top:2px}
.dialog{border:1px solid var(--border);border-radius:12px;padding:20px;width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 48px);color:var(--text);box-shadow:0 16px 48px rgb(0 0 0 / 18%)}
.dialog::backdrop{background:rgb(20 20 18 / 40%)}
.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.dialog-head h2{font-size:18px;line-height:24px}
.close{width:32px;height:32px;border-radius:var(--radius-control);font-size:20px;color:var(--muted)}
.close:hover{background:var(--hover)}
.invite-link{font-size:13px;word-break:break-all}
.invitation-identity{padding:10px 12px;border-radius:var(--radius-control);background:var(--raised);font-weight:600}
.invitation-identity span{font-weight:400;color:var(--muted)}
.notice{position:fixed;z-index:60;bottom:20px;right:20px;max-width:420px;padding:12px 16px;border-radius:var(--radius-card);background:var(--primary);color:#fff;font-size:14px;line-height:20px;box-shadow:0 8px 24px rgb(0 0 0 / 18%)}
.notice.error{background:#fff;color:var(--pill-negative-ink);border:1px solid #f3c4bf}

/* Address lookup. */
.address-lookup{display:grid;gap:6px;margin-top:-8px}
.address-results{border:1px solid var(--border);border-radius:var(--radius-card);overflow:hidden}
.address-results ul{list-style:none;max-height:240px;overflow:auto}
.address-results li{padding:10px 12px;cursor:pointer;font-size:14px;border-top:1px solid var(--rule)}
.address-results li:first-child{border-top:0}
.address-results li[aria-selected=true],.address-results li:hover{background:var(--hover)}
.maps-attribution{padding:6px 12px;background:var(--raised);border-top:1px solid var(--rule)}
.provider-attribution{font-size:12px;color:var(--muted)}

/* Sign in: a centred card on the frame, the mark and wordmark above. */
.auth-page{min-height:100dvh;display:grid;place-content:center;gap:20px;padding:32px 16px;justify-items:center}
.auth-box{width:min(420px,100%);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sheet);padding:28px}
.auth-box h1{margin-bottom:4px}
.auth-box>.muted{margin-bottom:20px}
.auth-box .form{gap:14px}
.auth-box .button.primary{width:100%;min-height:40px}
.auth-box>.small-copy{margin-top:16px}
.auth-footer{font-size:12px;color:var(--muted)}

/* SEO workspace (hybrid view). */
.seo-mode{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 16px}
.seo-mode span{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:var(--radius-chip);background:var(--raised);border:1px solid var(--border);font-size:12px;color:var(--muted)}
.seo-run-options{margin-bottom:var(--gap)}
.seo-run-options>summary{margin-bottom:12px}
.seo-optional{border-top:1px solid var(--rule);padding-top:8px}
.seo-optional .field,.seo-optional .check{margin-top:10px}
.seo-summary,.seo-job,.seo-usage,.seo-integrations,.seo-history,.seo-comparison{font-size:14px;line-height:20px}
.seo-job{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;padding:12px 0;border-top:1px solid var(--rule)}
.seo-category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--gap)}
.seo-category-grid>*{border:1px solid var(--border);border-radius:var(--radius-card);padding:14px 16px}
.seo-relevance{font-size:12px;color:var(--muted)}
.seo-task{padding:14px 0;border-top:1px solid var(--rule)}
.seo-task:first-child{border-top:0}
.seo-task h3{font-size:15px}
.seo-task p{font-size:14px;line-height:20px}
.proposal-diff,.proposal-solution{font-size:13px;line-height:20px;background:var(--raised);border-radius:var(--radius-control);padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.source-links,.seo-history ul{margin-top:4px}

/* Pricing (owner and client plans). */
.pricing-panel{display:grid;gap:var(--gap)}
.pricing-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border:1px solid var(--border);border-radius:var(--radius-card)}
.pricing-metrics>*{padding:14px var(--card-pad);border-left:1px solid var(--border)}
.pricing-metrics>:first-child{border-left:0}
.pricing-feature-list{list-style:none;display:grid;gap:6px;font-size:14px}
.pricing-plan-editor,.pricing-plan-form,.pricing-request,.pricing-fix,.pricing-entitlements{display:grid;gap:12px}

/* Keyword Intelligence. */
.ki-tabs{display:flex;gap:20px;overflow-x:auto;border-bottom:1px solid var(--border);margin:0 0 var(--gap);scrollbar-width:none}
.ki-tab{position:relative;flex:none;height:40px;font-size:14px;color:var(--muted);white-space:nowrap}
.ki-tab:hover{color:var(--text)}
.ki-tab[aria-current=page]{color:var(--text);font-weight:600}
.ki-tab[aria-current=page]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.ki-quota{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:4px 24px;align-items:center;padding:14px var(--card-pad);border:1px solid var(--border);border-radius:var(--radius-card);margin-bottom:var(--gap)}
.ki-quota>div:first-child{display:grid;gap:2px}
.ki-quota strong{font-size:var(--fs-kpi);line-height:32px;font-weight:500;font-variant-numeric:tabular-nums}
.ki-quota>.small-copy{grid-column:1/-1}
.ki-label{font-size:13px;color:var(--muted)}
.ki-meter{height:6px;border-radius:999px;background:var(--rule);overflow:hidden}
.ki-meter-fill{display:block;height:100%;width:0;background:var(--accent)}
.ki-toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:var(--gap)}
.ki-inline{min-width:min(100%,360px)}
.ki-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ki-modifiers{display:flex;flex-wrap:wrap;gap:6px 20px}
.ki-inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.ki-estimate{margin-top:16px;padding:14px 16px;border-radius:var(--radius-card);background:var(--raised);border:1px solid var(--border)}
.ki-estimate ul{margin:6px 0 12px 18px;font-size:13px;color:var(--muted)}
.ki-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.ki-filters input{flex:1 1 220px;width:auto}
.ki-filters select{width:auto}
.ki-serp-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:4px 0 12px}
.ki-table-wrap{overflow-x:auto}
.ki-table{width:100%;border-collapse:collapse;font-size:14px}
.ki-table th{font-size:12px;font-weight:400;color:var(--muted);text-align:left;padding:0 12px 8px;white-space:nowrap}
.ki-table td{padding:10px 12px;border-top:1px solid var(--rule);vertical-align:top}
.ki-table tr:hover td{background:var(--raised)}
.ki-table td:first-child,.ki-table th:first-child{padding-left:0}
.ki-table .num{text-align:right;font-variant-numeric:tabular-nums}
.ki-table td{overflow-wrap:break-word}.ki-table td:first-child{min-width:220px}
.ki-client td{background:var(--accent-soft)}
.ki-select{display:flex;gap:8px;align-items:center}
.ki-select input{width:16px;height:16px;accent-color:var(--primary)}
.ki-pill{display:inline-flex;height:22px;align-items:center;padding:0 8px;border-radius:var(--radius-chip);font-size:12px;background:var(--pill-neutral-bg);color:var(--pill-neutral-ink);white-space:nowrap}
.ki-pill.high,.ki-pill.ok{background:var(--pill-positive-bg);color:var(--pill-positive-ink)}
.ki-pill.medium,.ki-pill.needs_investigation{background:var(--pill-warning-bg);color:var(--pill-warning-ink)}
.ki-pill.ai{background:var(--accent-soft);color:var(--accent-ink)}
.ki-pill.muted,.ki-pill.low{background:var(--raised);color:var(--muted)}
.ki-pager{display:flex;gap:12px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:13px;color:var(--muted)}
.ki-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.ki-chip{height:32px;padding:0 12px;border:1px solid var(--border);border-radius:var(--radius-chip);font-size:13px}
.ki-chip[aria-current=true]{border-color:var(--text);font-weight:600}
.ki-weak{border-top:1px solid var(--rule);padding:4px 0}
.ki-weak:first-of-type{border-top:0}
.ki-weak>summary{display:grid;grid-template-columns:12px 48px minmax(0,1fr);gap:12px;align-items:center;min-height:56px}
.ki-score{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--accent-ink)}
.ki-components{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:13px;color:var(--muted);margin:6px 0}
.ki-weak h4{margin:10px 0 4px;font-size:13px}
.ki-weak ul{margin-left:18px;font-size:13px;line-height:20px}
.ki-cluster{padding:10px 0;border-top:1px solid var(--rule)}
.ki-cluster:first-of-type{border-top:0}
.ki-cluster p{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.ki-rec{padding:14px 0;border-top:1px solid var(--rule)}
.ki-rec:first-of-type{border-top:0}
.ki-rec .task-top{flex-wrap:wrap;justify-content:flex-start;gap:6px}
.ki-rec .task-top strong{flex-basis:100%}
.ki-proposal{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;font-size:13px;line-height:20px;background:var(--raised);border-radius:var(--radius-control);padding:10px 12px;margin:8px 0}
.ki-history{margin-left:18px;font-size:14px}
.ki-internal{margin-top:12px;font-size:13px;color:var(--muted)}
.ki-body>.panel:last-child{margin-bottom:0}
.ki-meter-fill[data-pct="0"]{width:0%}.ki-meter-fill[data-pct="5"]{width:5%}.ki-meter-fill[data-pct="10"]{width:10%}.ki-meter-fill[data-pct="15"]{width:15%}.ki-meter-fill[data-pct="20"]{width:20%}.ki-meter-fill[data-pct="25"]{width:25%}.ki-meter-fill[data-pct="30"]{width:30%}.ki-meter-fill[data-pct="35"]{width:35%}.ki-meter-fill[data-pct="40"]{width:40%}.ki-meter-fill[data-pct="45"]{width:45%}.ki-meter-fill[data-pct="50"]{width:50%}.ki-meter-fill[data-pct="55"]{width:55%}.ki-meter-fill[data-pct="60"]{width:60%}.ki-meter-fill[data-pct="65"]{width:65%}.ki-meter-fill[data-pct="70"]{width:70%}.ki-meter-fill[data-pct="75"]{width:75%}.ki-meter-fill[data-pct="80"]{width:80%}.ki-meter-fill[data-pct="85"]{width:85%}.ki-meter-fill[data-pct="90"]{width:90%}.ki-meter-fill[data-pct="95"]{width:95%}.ki-meter-fill[data-pct="100"]{width:100%}

/* Messages: a thread list beside the open conversation. */
.messages{display:grid;grid-template-columns:320px minmax(0,1fr);border:1px solid var(--border);border-radius:var(--radius-card);min-height:520px;overflow:hidden}
.thread-list{border-right:1px solid var(--border);overflow:auto;max-height:640px}
.thread-list button{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;width:100%;text-align:left;padding:12px 16px;border-top:1px solid var(--rule);align-items:start}
.thread-list button:first-child{border-top:0}
.thread-list button:hover{background:var(--raised)}
.thread-list button[aria-current=true]{background:var(--active)}
.thread-list strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thread-list small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.thread-list time{font-size:12px;color:var(--muted);white-space:nowrap}
.unread-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent);margin-top:6px}
.conversation{display:grid;grid-template-rows:auto minmax(0,1fr) auto;min-width:0}
.conversation-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--border)}
.conversation-body{display:flex;flex-direction:column;gap:12px;padding:16px;overflow:auto;max-height:520px}
.message{max-width:76%;display:grid;gap:4px}
.message .bubble{padding:10px 12px;border-radius:12px;background:var(--raised);border:1px solid var(--border);font-size:14px;line-height:20px;white-space:pre-wrap;overflow-wrap:anywhere}
.message.mine{align-self:flex-end}
.message.mine .bubble{background:var(--primary);border-color:var(--primary);color:#fff}
.message .meta{font-size:12px;color:var(--muted)}
.message.mine .meta{text-align:right}
.composer{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:12px 16px;border-top:1px solid var(--border);align-items:end}
.composer textarea{min-height:40px;max-height:160px;resize:vertical;border:1px solid var(--control);border-radius:var(--radius-control);padding:9px 10px;font-size:14px;line-height:20px;width:100%}
.conversation-empty{display:grid;place-content:center;text-align:center;gap:4px;padding:32px;color:var(--muted)}

/* Team and roles. */

/* Tablet: the sidebar folds into the top bar menu. */
@media (max-width:1100px){
 .two-column{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
 .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
 .sidebar{display:none}
 .topbar{grid-column:1;position:sticky;top:0;z-index:20;background:var(--frame);padding:8px 16px;min-height:56px}
 .workspace{grid-column:1;margin:0;border-radius:0;border-left:0;border-right:0;border-bottom:0;min-height:calc(100dvh - 56px)}
 .workspace main{padding:20px 16px 32px}
 .workspace-footer{padding:14px 16px;flex-direction:column;gap:4px}
 .mobile-menu{display:block;flex:none}
 .mobile-menu>summary{width:44px;height:44px;justify-content:center;border-radius:var(--radius-control);font-size:0}
 .mobile-menu>summary{font-size:14px}
 .mobile-menu>nav{position:fixed;inset:56px 0 0 0;z-index:40;background:var(--surface);padding:12px 16px 32px;overflow:auto;border-top:1px solid var(--border)}
 .mobile-menu nav a{min-height:44px}
 .client-search{display:none}
 .topbar .brand-mobile{display:inline-flex}
 .topbar-actions .text-button{min-height:44px;padding:0 8px}
}
.topbar .brand-mobile{display:none}
@media (max-width:640px){
 .page-heading{flex-direction:column;align-items:stretch;gap:12px}
 .page-actions{flex-wrap:wrap}
 .page-actions .button{flex:1}
 .summary-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
 .summary-strip>*{border-left:0;border-top:1px solid var(--border)}
 .summary-strip>:nth-child(-n+2){border-top:0}
 .summary-strip>:nth-child(even){border-left:1px solid var(--border)}
 .summary-strip>:last-child:nth-child(odd){grid-column:1/-1}
 .control-fields,.ki-grid3{grid-template-columns:minmax(0,1fr)}
 .saved-detail{grid-template-columns:minmax(0,1fr)}
 .saved-detail details{grid-column:1}
 .data-table thead{display:none}
 .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
 .data-table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;padding:10px 0;border-top:1px solid var(--rule)}
 .data-table td{height:auto;border:0;padding:0!important;text-align:left!important}
 .data-table td:first-child{grid-column:1}
 .data-table td:last-child{grid-column:2;grid-row:1}
 .messages{grid-template-columns:minmax(0,1fr)}
 .messages.has-open .thread-list{display:none}
 .messages:not(.has-open) .conversation{display:none}
 .button,.field input,.field select,.field textarea{min-height:44px}
 .ki-quota{grid-template-columns:minmax(0,1fr)}
 .access-control{flex-direction:column;align-items:stretch}
 .audit-score{grid-template-columns:minmax(0,1fr)}
 .audit-meta{align-items:flex-start}
 .queue-item{grid-template-columns:minmax(0,1fr)}
 .queue-item .actions{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.button:active{transform:none}}

/* Round 2 fixes. */
.summary-strip strong.text-value{font-size:16px;line-height:24px;font-weight:600;margin:4px 0}
.audit-score strong.unavailable{font-size:18px;line-height:24px;color:var(--text)}
.import-audit>summary{margin:0}
.import-audit[open]>summary{margin-bottom:12px}
.data-table svg{width:16px;height:16px;color:var(--muted)}
@media (max-width:640px){
 .segmented{max-width:100%;overflow-x:auto;scrollbar-width:none}
 .segmented button{flex:none}
 .table-toolbar{flex-direction:column;align-items:stretch}
 .table-toolbar .actions input{flex:1;width:auto}
 .data-table tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
 .data-table td:first-child{flex:1 1 calc(100% - 96px);min-width:0}
 .data-table td:nth-last-child(2){order:-1;margin-left:auto}
 .data-table td:first-child{order:-2}
 .data-table td:last-child{display:none}
}

/* Settings › Spending on phones: keep the cap form (the last column, which other tables hide) and label each number. */
@media (max-width:640px){
 .spending-table td{flex:1 1 100%}
 .spending-table td:nth-last-child(2){order:0;margin-left:0}
 .spending-table td[data-label]::before{content:attr(data-label) ": ";color:var(--muted)}
 .spending-table td:last-child{display:block}
 .spending-table .compact-form .field{flex:1;width:auto}
 .spending-table .compact-form .button{width:auto}
}

/* Status colour. Colour marks state, always beside words that say the same: red a problem, TopReach orange waiting on
   you, amber check soon, blue in progress or waiting on others, green healthy or done. Calm states stay on white.
   Each tone is a soft surface, a dark ink for values (AA on that surface) and a dot. */
[data-tone=urgent]{--tone-bg:#fde4e0;--tone-ink:#7f1a1d;--tone-dot:#c4242a}
[data-tone=action]{--tone-bg:#fce5d7;--tone-ink:#83300f;--tone-dot:#c24a1c}
[data-tone=watch]{--tone-bg:#fcefc9;--tone-ink:#6e3409;--tone-dot:#a86a00}
[data-tone=info]{--tone-bg:#dfeafb;--tone-ink:#1b3a66;--tone-dot:#2f6fc0}
[data-tone=good]{--tone-bg:#d9f1e3;--tone-ink:#174f33;--tone-dot:#1f7a4c}
[data-tone=calm]{--tone-bg:#f6f2ec;--tone-ink:#2b2a27;--tone-dot:#7d776c}
.summary-strip{overflow:hidden}
.summary-strip>button:focus-visible{outline-offset:-3px}
.summary-strip>[data-tone]{background:var(--tone-bg);box-shadow:inset 0 3px 0 var(--tone-dot)}
.summary-strip>[data-tone=calm]{box-shadow:none}
.summary-strip>[data-tone] strong{color:var(--tone-ink)}
.summary-strip>[data-tone] span,.summary-strip>[data-tone] small{color:color-mix(in oklab,var(--tone-ink) 72%,var(--muted))}
.summary-strip>[data-tone]>span::before{content:"";display:inline-block;width:7px;height:7px;margin:0 6px 1px 0;border-radius:50%;background:var(--tone-dot)}
.segmented .count{display:inline-block;min-width:18px;text-align:center}
.segmented .count[data-tone]{padding:0 6px;border-radius:var(--radius-chip);background:var(--tone-bg);color:var(--tone-ink);font-weight:600;line-height:18px}
.oc-score strong[data-tone]{color:var(--tone-ink)}
.oc-score strong[data-tone]::before{content:"";display:inline-block;width:7px;height:7px;margin:0 6px 2px 0;border-radius:50%;background:var(--tone-dot)}
@media (max-width:640px){.summary-strip strong.lead-figure{font-size:var(--fs-kpi);line-height:32px}}

/* Section colour. Each part of the portal has a hue for wayfinding: Clients orange, Inquiries blue, Reports violet,
   Messages teal, Billing green, Settings indigo, Articles amber. It colours the sidebar icon, the active sidebar item,
   the section tabs and the panel headings. Status colour (above) stays separate: it is about state, not place. */
[data-hue=orange]{--hue:#c24a1c;--hue-soft:#fce5d7;--hue-ink:#83300f}
[data-hue=blue]{--hue:#2f6fc0;--hue-soft:#dfeafb;--hue-ink:#1b3a66}
[data-hue=violet]{--hue:#7048c0;--hue-soft:#ebe3fb;--hue-ink:#4a2a8a}
[data-hue=teal]{--hue:#11807a;--hue-soft:#d6f1ee;--hue-ink:#0b524e}
[data-hue=green]{--hue:#1f7a4c;--hue-soft:#d9f1e3;--hue-ink:#174f33}
[data-hue=indigo]{--hue:#4554b8;--hue-soft:#e3e6fb;--hue-ink:#2c3785}
[data-hue=amber]{--hue:#a86a00;--hue-soft:#fcefc9;--hue-ink:#6e3409}
[data-hue=slate]{--hue:#56657a;--hue-soft:#e6ebf1;--hue-ink:#33404f}
.nav-label{display:inline-flex;align-items:center;gap:10px;min-width:0}
.nav-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:7px;background:var(--hue-soft,var(--active));color:var(--hue-ink,var(--text));transition:background .15s,color .15s}
.sidebar nav a[data-hue][aria-current=page],.mobile-menu nav a[data-hue][aria-current=page]{background:var(--hue-soft);color:var(--hue-ink)}
.sidebar nav a[data-hue][aria-current=page] .nav-icon,.mobile-menu nav a[data-hue][aria-current=page] .nav-icon,.sidebar nav a[data-hue]:hover .nav-icon{background:var(--hue);color:#fff}
main[data-hue] .ki-tab[aria-current=page]{color:var(--hue-ink)}
main[data-hue] .ki-tab[aria-current=page]::after{background:var(--hue);height:3px;border-radius:3px 3px 0 0}
main[data-hue] .section-tabs .num{color:var(--hue-ink)}
main[data-hue] .page-heading h1{display:flex;align-items:center;gap:12px}
.page-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:10px;background:var(--hue);color:#fff}
.page-icon svg{width:20px;height:20px}
main[data-hue] .empty,main[data-hue] .queue-empty{background:color-mix(in oklab,var(--hue-soft) 55%,#fff);border-color:color-mix(in oklab,var(--hue) 22%,#fff)}
main[data-hue] .panel-title h2::before{content:"";display:inline-block;width:10px;height:10px;margin:0 10px 1px 0;border-radius:3px;background:var(--hue)}
/* Save messages: green with a tick, fading out after 5 seconds (app.ts › say). */
.notice:not(.error){display:flex;align-items:center;gap:10px;background:#174f33}
.notice.error{display:flex;align-items:center;gap:10px}
.notice.leaving{opacity:0;transform:translateY(6px);transition:opacity .25s ease-out,transform .25s ease-out}
@media (prefers-reduced-motion:reduce){.notice.leaving{transform:none}}

/* Setup checklist. */
.setup-progress{height:6px;border-radius:999px;background:var(--rule);overflow:hidden;margin:0 0 20px;max-width:640px}
.panel .setup-progress{margin:12px 0 16px}
.setup-steps{list-style:none;display:grid;max-width:760px}
.setup-step{display:grid;grid-template-columns:20px minmax(0,1fr);gap:14px;padding:18px 0;border-top:1px solid var(--rule)}
.setup-step:first-child{border-top:0;padding-top:0}
.setup-step h3{font-size:15px;line-height:22px}
.setup-step>div{display:grid;gap:8px;justify-items:start}
.setup-step.done h3{color:var(--muted)}
.setup-step .step{width:16px;height:16px;margin-top:3px;border-radius:50%;border:1.5px solid var(--control)}
.setup-step .step.done{border-color:var(--positive);background:var(--positive);box-shadow:inset 0 0 0 3px var(--surface)}
.setup-step .step.next{border-color:var(--accent)}
.setup-platform{max-width:320px;justify-self:stretch}
.invite-steps{margin:0 0 0 18px;display:grid;gap:4px;font-size:14px;line-height:20px}
.invite-steps strong{font-weight:600}
.setup-state{margin:0}
.data-table td small{display:block}
@media (max-width:640px){
 .segmented{display:flex;width:100%;overflow-x:auto}
 .table-toolbar>.segmented{min-width:0}
}
.ssh-key{display:block;margin:6px 0 2px;padding:8px 10px;border-radius:var(--radius-control);background:var(--raised);border:1px solid var(--border);font:12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
/* AI fix review (live AutoSEO V5 flow), in the house style: one panel, quiet rules, near-black primary. */
.gfix-workspace{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-pad);margin:0 0 var(--gap)}
.gfix-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.gfix-eyebrow{display:none}
.gfix-header h2{font-size:var(--fs-section);line-height:24px;margin:0 0 4px}
.gfix-header p{font-size:var(--fs-body);line-height:20px;color:var(--muted);margin:0;max-width:660px}
.gfix-count{display:flex;flex-direction:column;align-items:flex-end;min-width:96px;text-align:right}
.gfix-count strong{font-size:var(--fs-kpi);line-height:32px;color:var(--accent-ink);font-variant-numeric:tabular-nums}
.gfix-count span,.gfix-toolbar,.gfix-meta,.gfix-verify,.gfix-footer,.gfix-diff-label{font-size:var(--fs-small);line-height:16px;color:var(--muted)}
.gfix-toolbar{display:flex;gap:16px;justify-content:space-between;border-bottom:1px solid var(--rule);padding:16px 0 12px}
.gfix-card{padding:20px 0;border-bottom:1px solid var(--rule);scroll-margin-top:80px}
.gfix-card:last-of-type{border-bottom:0}
.gfix-card-heading{display:flex;justify-content:space-between;gap:12px}
.gfix-card h3{font-size:15px;line-height:22px;margin:6px 0 2px}
.gfix-meta{margin:0}
.gfix-icon{display:none}
.gfix-status{display:inline-flex;align-items:center;font-size:var(--fs-small);font-weight:500;line-height:16px;padding:2px 8px;border-radius:var(--radius-chip);background:var(--pill-neutral-bg);color:var(--pill-neutral-ink)}
.gfix-status.needs-review{background:var(--pill-warning-bg);color:var(--pill-warning-ink)}
.gfix-status.waiting{background:var(--pill-info-bg);color:var(--pill-info-ink)}
.gfix-status.ready{background:var(--pill-positive-bg);color:var(--pill-positive-ink)}
.gfix-explanation{font-size:var(--fs-body);line-height:22px;margin:12px 0;white-space:pre-wrap}
.gfix-details,.gfix-edit{border:1px solid var(--border);border-radius:var(--radius-control);margin:8px 0}
.gfix-details>summary,.gfix-edit>summary{cursor:pointer;font-size:13px;font-weight:600;min-height:44px;display:flex;align-items:center;padding:0 14px;background:var(--raised)}
.gfix-diff{margin:0 14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.gfix-diff-label{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.gfix-diff-label strong{color:var(--text)}
.gfix-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.gfix-columns h4{font-size:var(--fs-small);margin:0 0 4px;color:var(--muted)}
.gfix-columns pre{font:12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:210px;overflow:auto;margin:0;background:var(--raised);border:1px solid var(--border);padding:12px;border-radius:var(--radius-control)}
.gfix-columns section:last-child pre{border-left:3px solid var(--positive)}
.gfix-warning{color:var(--pill-warning-ink);font-size:var(--fs-small)}
.gfix-verify{margin:12px 14px}
.gfix-edit .form{padding:14px}
.gfix-decision{padding:14px 0 0}
.gfix-decision textarea{min-height:64px}
.gfix-actions{display:flex;gap:8px;flex-wrap:wrap}
.gfix-link{border:0;background:transparent;color:var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font:inherit;min-height:44px}
.gfix-footer{margin:16px 0 0}
.gfix-empty{padding:20px 0;color:var(--muted);font-size:var(--fs-body)}
@media (max-width:700px){.gfix-header{flex-wrap:wrap}.gfix-count{align-items:flex-start;text-align:left}.gfix-columns{grid-template-columns:minmax(0,1fr)}.gfix-toolbar{flex-direction:column;gap:4px}}
/* Customer progress: starting point against the latest published audit, and the score over time. */
.cp-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-card);padding:var(--card-pad);margin:0 0 var(--gap)}
.cp-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.cp-section-head h2{font-size:var(--fs-section);line-height:24px}
.cp-section-head span{font-size:var(--fs-small);color:var(--muted)}
.cp-comparison{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center}
.cp-compare-col{display:flex;flex-direction:column;gap:2px}
.cp-compare-col span,.cp-compare-col small{font-size:var(--fs-small);color:var(--muted)}
.cp-compare-col strong{font-size:var(--fs-kpi);line-height:32px;font-variant-numeric:tabular-nums}
.cp-compare-arrow{color:var(--faint)}
.cp-context{font-size:var(--fs-body);line-height:20px;color:var(--muted);margin-top:12px}
.cp-context strong{color:var(--text)}
.cp-chart{display:block;width:100%;height:auto;max-width:720px}
.cp-chart text{font-family:var(--font)}
.cp-chart-caption{font-size:var(--fs-small);color:var(--muted);margin-top:8px}
.cp-no-chart strong{display:block;font-size:var(--fs-body);margin-bottom:4px}
.cp-no-chart p{font-size:var(--fs-body);line-height:20px;color:var(--muted)}
@media (max-width:640px){.cp-comparison{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.cp-compare-arrow{display:none}}
.history strong.unavailable{font-size:var(--fs-body);line-height:20px;font-weight:500;color:var(--muted)}
/* SEO plan and Automation */
.plan-line{font-size:var(--fs-body);line-height:20px;color:var(--muted);margin-bottom:12px}
.plan-line strong{color:var(--text)}
.plan-locked{margin:0 0 12px}
.plan-edit{border-top:1px solid var(--rule);padding-top:4px}
.plan-edit>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-size:var(--fs-body);font-weight:600}
.plan-edit fieldset{border:0;padding:0;margin:0 0 16px;min-width:0}
.plan-edit legend{font-size:var(--fs-small);font-weight:600;color:var(--muted);margin-bottom:6px}
.radio-row,.check-row{display:flex;align-items:center;gap:10px;min-height:44px;font-size:var(--fs-body);cursor:pointer}
.radio-row input,.check-row input{width:18px;height:18px;flex:none;accent-color:var(--primary)}
.radio-row small,.check-row small{color:var(--muted);font-size:var(--fs-small)}
.check-row small{margin-left:auto}
.check-row input:disabled+span{color:var(--muted)}
.check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px;border-top:1px solid var(--rule)}
.check-grid .check-row{border-bottom:1px solid var(--rule)}
.inline-form{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.inline-form .field{margin:0;min-width:180px}
/* Settings › Spending: a short cap field per table row, and a reached cap in the negative colour */
.compact-form{gap:8px;flex-wrap:nowrap}.compact-form .field{min-width:0;width:120px}
.danger-text{color:var(--negative)}
.link-button{border:0;background:none;padding:0;font:inherit;font-weight:600;color:var(--text);cursor:pointer;min-height:44px;text-align:left}
.link-button:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.check-grid{grid-template-columns:minmax(0,1fr)}.inline-form .button{width:100%}}
/* Run & plan: latest audit, next steps, findings */
.audit-status{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.audit-status h2{font-size:var(--fs-section);line-height:24px;margin-bottom:4px}
.audit-line{font-size:var(--fs-body);line-height:20px;color:var(--muted)}
.audit-line strong{color:var(--text)}
.audit-hint{font-size:var(--fs-body);line-height:20px;margin-top:8px;color:var(--pill-warning-ink)}
.audit-run{flex:none}
.next-steps>a{display:flex;flex-direction:column;gap:2px;padding:var(--card-pad);color:inherit;text-decoration:none;min-height:44px}
.next-steps>a:hover{background:var(--hover)}
.next-steps>a:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.finding-group{font-size:15px;line-height:22px;margin:20px 0 2px}
.finding-group .muted{font-weight:500;margin-left:4px;font-variant-numeric:tabular-nums}
.finding-list{border-top:1px solid var(--rule);margin-top:8px}
.finding-row{border-bottom:1px solid var(--rule)}
.finding-row>summary{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;cursor:pointer;list-style:none}
.finding-row>summary::-webkit-details-marker{display:none}
.finding-title{display:flex;flex-direction:column;min-width:0;flex:1}
.finding-title strong{font-size:var(--fs-body);line-height:20px;font-weight:600}
.finding-title small{font-size:var(--fs-small);line-height:16px;color:var(--muted)}
.prio{width:8px;height:8px;border-radius:50%;flex:none;background:var(--control)}
.prio-high{background:var(--accent)}
.prio-medium{background:#c9862f}
.finding-body{padding:0 0 16px 20px;font-size:var(--fs-body);line-height:22px}
.finding-body>p{margin-bottom:10px}
.finding-evidence{margin:8px 0}
.finding-evidence>summary{cursor:pointer;font-size:var(--fs-small);font-weight:600;min-height:32px;display:flex;align-items:center}
.finding-evidence ul,.finding-evidence ol{padding-left:18px;font-size:var(--fs-small);line-height:18px}
.state-chip{display:inline-flex;align-items:center;flex:none;font-size:var(--fs-small);font-weight:500;line-height:16px;padding:2px 8px;border-radius:var(--radius-chip);background:var(--pill-neutral-bg);color:var(--pill-neutral-ink);white-space:nowrap}
.state-chip.warning{background:var(--pill-warning-bg);color:var(--pill-warning-ink)}
.state-chip.info{background:var(--pill-info-bg);color:var(--pill-info-ink)}
.state-chip.positive{background:var(--pill-positive-bg);color:var(--pill-positive-ink)}
.state-chip.negative{background:var(--pill-negative-bg);color:var(--pill-negative-ink)}
.checklist-panel>summary,.audit-details>summary{display:flex;align-items:center;gap:12px;cursor:pointer;list-style:none;min-height:44px}
.checklist-panel>summary::-webkit-details-marker,.audit-details>summary::-webkit-details-marker{display:none}
.checklist-panel>summary h2,.audit-details>summary h2{font-size:var(--fs-section);line-height:24px}
.checklist-tools{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:8px 0 12px}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.audit-details h3{font-size:15px;line-height:22px;margin:20px 0 8px}
.audit-details h4{font-size:var(--fs-body);margin:4px 0}
/* Fixes to approve */
.fix-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding-bottom:16px;border-bottom:1px solid var(--rule)}
.fix-panel-head h2{font-size:var(--fs-section);line-height:24px;margin-bottom:4px}
.fix-panel-head .muted{font-size:var(--fs-body);line-height:20px;max-width:620px}
.fix-summary{font-size:var(--fs-body);font-weight:600;line-height:20px;text-align:right;max-width:320px}
.fix-card{padding:20px 0;border-bottom:1px solid var(--rule);scroll-margin-top:80px}
.fix-card:last-child{border-bottom:0;padding-bottom:0}
.fix-card>header{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.fix-card h3{font-size:15px;line-height:22px}
.fix-card.manual h3{color:var(--muted)}
.fix-steps{display:flex;gap:0;list-style:none;margin:12px 0;padding:0;counter-reset:step;flex-wrap:wrap}
.fix-steps li{display:flex;align-items:center;gap:6px;font-size:var(--fs-small);color:var(--faint);padding-right:16px;counter-increment:step}
.fix-steps li::before{content:counter(step);display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;border:1px solid var(--control);font-size:11px;font-weight:600;font-variant-numeric:tabular-nums}
.fix-steps li.done{color:var(--text)}
.fix-steps li.done::before{content:"✓";background:var(--primary);border-color:var(--primary);color:#fff}
.fix-steps li.current{color:var(--text);font-weight:600}
.fix-steps li.current::before{border-color:var(--primary);border-width:2px}
.fix-why{font-size:var(--fs-body);line-height:22px;margin-bottom:12px}
.fix-diff{margin:0 0 12px}
.fix-where{font-size:var(--fs-small);line-height:16px;color:var(--muted);margin-bottom:6px}
.fix-where strong{color:var(--text)}
.fix-before-after{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.fix-before-after>div{border:1px solid var(--border);border-radius:var(--radius-control);overflow:hidden;min-width:0}
.fix-before-after span{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--muted);padding:6px 10px;border-bottom:1px solid var(--border);background:var(--raised)}
.fix-before-after>div:last-child span{color:var(--pill-positive-ink);background:var(--pill-positive-bg)}
.fix-before-after pre{font:12px/18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;max-height:220px;overflow:auto;margin:0;padding:10px}
.fix-todo{border-left:3px solid var(--pill-warning-edge);background:var(--pill-warning-bg);color:var(--pill-warning-ink);padding:10px 12px;border-radius:0 var(--radius-control) var(--radius-control) 0;margin:0 0 12px;font-size:var(--fs-body);line-height:20px}
.fix-todo ul{padding-left:18px;margin-top:4px}
.fix-manual,.fix-next{font-size:var(--fs-body);line-height:20px;color:var(--muted);margin-bottom:10px}
.fix-note>summary,.fix-edit>summary{cursor:pointer;font-size:var(--fs-small);font-weight:600;min-height:36px;display:inline-flex;align-items:center}
.fix-note .field{margin-top:4px;max-width:560px}
.fix-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.fix-actions .button[disabled]{opacity:.45;cursor:not-allowed}
.fix-edit{margin-top:8px}
.fix-edit .form{max-width:640px;padding-top:8px}
.fix-meta{font-size:var(--fs-small);color:var(--faint);margin-top:8px}
.fix-empty{padding:20px 0}
@media (max-width:640px){
 .audit-status{flex-direction:column;gap:12px}.audit-run,.audit-run .button{width:100%}
 .fix-panel-head{flex-direction:column;gap:8px}.fix-summary{text-align:left}
 .fix-before-after,.form-row{grid-template-columns:minmax(0,1fr)}
 .finding-body{padding-left:0}
 .fix-card>header{flex-direction:column;gap:6px}
}
.plan-note{font-size:var(--fs-body);line-height:20px;background:var(--raised);border:1px solid var(--border);border-radius:var(--radius-control);padding:10px 12px;margin-top:16px}
.task-row .task{border:0;padding:0;background:none}
.task-row .task .task-top{display:none}
.pricing-metrics>div{display:flex;flex-direction:column;gap:2px}
.pricing-metrics>div strong{font-variant-numeric:tabular-nums}
.audit-details>.panel,.audit-details section.panel{border:0;padding:0;margin-top:12px}
/* Owner two-step sign-in */
.mfa-box{width:min(460px,100%)}
.mfa-steps{margin:0 0 20px;padding-left:20px;display:flex;flex-direction:column;gap:12px}
.mfa-steps li::marker{font-weight:650}
.mfa-qr{margin:12px 0 8px;width:200px;max-width:100%;border:1px solid var(--border);border-radius:var(--radius-control);overflow:hidden;background:#fff}
.mfa-qr svg{display:block;width:100%;height:auto}
.mfa-key summary{cursor:pointer;font-size:var(--fs-small);min-height:44px;display:flex;align-items:center}
.mfa-key code{font-size:15px;letter-spacing:.04em;word-break:break-all}
.mfa-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:12px}
.mfa-links .text-button{min-height:44px}
.auth-box input[name=code]{font-size:20px;letter-spacing:.12em}
.recovery-codes{list-style:none;margin:0 0 16px;padding:12px 16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 16px;border:1px solid var(--border);border-radius:var(--radius-control);background:var(--raised)}
.recovery-codes code{font-size:15px;letter-spacing:.04em}
.mfa-box .invite-actions{margin-bottom:12px}
.mfa-box>.check{margin-bottom:12px}
.mfa-help{margin-top:12px}

/* Owner home: one client list, what each client needs, and suggestions approved from the list. */
.needs-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:6px;font-size:14px;line-height:20px;color:var(--muted)}
.needs-line .text-button{min-height:28px;font-size:14px;color:var(--accent-ink)}
.oc-list{border-top:1px solid var(--border)}
.oc-head,.oc-main{display:grid;grid-template-columns:minmax(200px,1.35fr) minmax(190px,1.2fr) minmax(170px,1fr) 84px 112px 40px;align-items:center;column-gap:16px}
.oc-head{padding:10px 0;font-size:var(--fs-small);color:var(--muted);border-bottom:1px solid var(--rule)}
.oc-row{border-bottom:1px solid var(--rule)}
.oc-main{min-height:64px;padding:8px 0}
.oc-row:hover>.oc-main{background:var(--raised)}
.oc-row .identity strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-row .identity small{display:block;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oc-row .identity>span:last-child{min-width:0}
.oc-needs{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.needs-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 10px 0 12px;border-radius:var(--radius-chip);background:var(--accent-soft);color:var(--accent-ink);font-weight:600;font-size:13px;transition:background-color .18s ease-out}
.needs-toggle:hover{background:#f7dccf}
.needs-dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.needs-toggle .chevron{width:14px;height:14px;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.needs-toggle[aria-expanded=true] .chevron{transform:rotate(180deg)}
.needs-quiet{font-size:13px}
.oc-needs small{font-size:12px}
.oc-audit{font-size:13px;font-variant-numeric:tabular-nums}
.cell-label{display:none}
.row-open{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius-control);color:var(--muted)}
.row-open:hover{background:var(--hover);color:var(--text)}
.row-open svg{width:18px;height:18px}
.list-more{margin-top:16px}

.review-panel{margin:0 0 14px 44px;padding:2px 16px 12px;border-radius:var(--radius-card);background:var(--raised)}
.review-panel.enter{animation:review-in .22s cubic-bezier(.2,.7,.2,1)}
@keyframes review-in{from{opacity:0;transform:translateY(-4px)}}
.review-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)}
.review-head .check{align-items:center;min-height:36px;font-weight:600}
.review-items{list-style:none}
.review-item{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:start;column-gap:12px;margin:0 -10px;padding:12px 10px;border-radius:var(--radius-control);border-top:1px solid var(--border);transition:background-color .15s ease-out}
.review-item:first-child{border-top:0}
.review-item.is-selected{background:var(--accent-soft);border-top-color:transparent}
.review-item.is-selected+.review-item{border-top-color:transparent}
.review-item input[type=checkbox]{width:18px;height:18px;margin:2px 0 0;accent-color:var(--primary);cursor:pointer}
.review-item label,.review-text{display:flex;flex-direction:column;gap:3px;min-width:0;cursor:pointer}
.review-text{cursor:default}
.review-item strong{font-weight:600;overflow-wrap:anywhere}
.review-detail{font-size:13px;line-height:18px;color:var(--muted);max-width:76ch}
.review-blocked{font-size:12px;line-height:16px;color:var(--pill-warning-ink)}
.review-tags{display:flex;flex-wrap:wrap;gap:6px}
.review-action{align-self:center}
.review-action .text-button{min-height:36px;padding:0 4px}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:4px;background:var(--pill-neutral-bg);color:var(--pill-neutral-ink);font-size:11px;line-height:20px;font-weight:600;letter-spacing:.01em;white-space:nowrap}
.tag.prio-high{background:var(--pill-warning-bg);color:var(--pill-warning-ink);box-shadow:inset 0 0 0 1px var(--pill-warning-edge)}
.tag.prio-low{background:transparent;color:var(--faint);box-shadow:inset 0 0 0 1px var(--border)}
.review-note{margin-top:10px;font-size:12px;line-height:18px;color:var(--muted)}

/* The selection bar floats over the list while anything is ticked. */
.bulk-bar{position:sticky;bottom:16px;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding:10px 10px 10px 18px;border-radius:12px;background:var(--primary);color:#fff;box-shadow:0 10px 30px -8px rgb(20 20 18 / 45%);animation:review-in .2s cubic-bezier(.2,.7,.2,1)}
.bulk-bar p{font-size:14px;line-height:20px;min-width:0}
.bulk-bar .muted{color:#c9c7c1}
.bulk-bar .text-button{color:#fff;min-height:36px;padding:0 8px}
.bulk-bar .button.secondary{background:transparent;color:#fff;border-color:rgb(255 255 255 / 35%)}
.bulk-bar .button.secondary:hover{background:rgb(255 255 255 / 10%)}
.bulk-bar .button.primary{background:#fff;color:var(--primary)}
.bulk-bar .button.primary:hover{background:#f1f0ec}
.bulk-bar :focus-visible{outline-color:#fff}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

/* Inquiries */
.inquiry-note{margin-bottom:16px;padding:10px 12px;border-radius:var(--radius-control);background:var(--pill-warning-bg);color:var(--pill-warning-ink);font-size:13px}
.inquiry-list{list-style:none;border-top:1px solid var(--border)}
.inquiry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.inquiry-main{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}
.inquiry-main h2{margin-top:6px;font-size:16px;line-height:22px}
.inquiry-main p{font-size:14px;line-height:20px}
.inquiry-contact a{color:var(--text);text-underline-offset:3px}
.inquiry-detail{color:var(--muted);max-width:72ch;overflow-wrap:anywhere}
.inquiry-side{display:flex;flex-direction:column;align-items:flex-end;gap:10px;text-align:right}
.inquiry-side time{font-size:12px;color:var(--muted)}

@media (max-width:900px){
 .oc-head{display:none}
 .oc-main{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who open" "health health" "needs needs" "audit score";row-gap:10px;padding:14px 0}
 .oc-main>.identity{grid-area:who}.oc-health{grid-area:health}.oc-needs{grid-area:needs}.oc-audit{grid-area:audit}.oc-score{grid-area:score;justify-self:end}.row-open{grid-area:open}
 .cell-label{display:inline;color:var(--muted);margin-right:6px}
 .review-panel{margin-left:0}
 .inquiry{grid-template-columns:minmax(0,1fr);gap:12px}
 .inquiry-side{align-items:flex-start;text-align:left}
}
@media (max-width:640px){
 .review-item{grid-template-columns:20px minmax(0,1fr)}
 .review-action{grid-column:2;justify-self:start}
 .review-head{flex-wrap:wrap}
 .bulk-bar{flex-direction:column;align-items:stretch;gap:8px;bottom:12px}
 .bulk-bar .actions{justify-content:flex-end}
}
@media (pointer:coarse){
 .needs-toggle,.row-open,.review-action .button,.review-action .text-button,.review-head .button,.bulk-bar .button,.bulk-bar .text-button,.inquiry-side .button,.inquiry-side .text-button,.needs-line .text-button{min-height:44px}
 .row-open{width:44px}
 .review-head .check{min-height:44px}
}
@media (prefers-reduced-motion:reduce){.review-panel,.bulk-bar{animation:none}}

/* Life on the owner home: client colours, health, scores, the week's wins and who needs attention. */
.client-avatar.tint-1{background:#fde4d8;color:#8f3412}.client-avatar.tint-2{background:#dcf2e4;color:#1d5c3b}.client-avatar.tint-3{background:#e2ebfb;color:#1f3f6b}.client-avatar.tint-4{background:#efe4fa;color:#58287f}
.client-avatar.tint-5{background:#fbf0cf;color:#6f4b00}.client-avatar.tint-6{background:#d9f1f1;color:#12575a}.client-avatar.tint-7{background:#fae1e8;color:#86203d}.client-avatar.tint-8{background:#e9e8e3;color:#3f3e3b}
.oc-health{display:flex;flex-direction:column;gap:2px;min-width:0}
.health{display:inline-flex;align-items:flex-start;gap:8px;font-size:13px;line-height:18px}
.health-dot{flex:none;width:8px;height:8px;margin-top:5px;border-radius:50%;background:var(--positive)}
.health.good{color:var(--muted)}
.health.watch{color:var(--pill-warning-ink);font-weight:600}.health.watch .health-dot{background:#d08a12;box-shadow:0 0 0 3px #fdf0d2}
.health.urgent{color:var(--pill-negative-ink);font-weight:600}.health.urgent .health-dot{background:var(--negative);box-shadow:0 0 0 3px #fde3e1;animation:pulse-dot 2.4s ease-out infinite}
@keyframes pulse-dot{0%{box-shadow:0 0 0 0 rgb(196 36 42 / 35%)}70%,100%{box-shadow:0 0 0 7px rgb(196 36 42 / 0%)}}
.oc-health small{padding-left:16px;font-size:12px}
.oc-score{display:flex;align-items:center;gap:6px;font-size:15px}
.oc-score strong{font-weight:650}
.trend{display:inline-flex;align-items:center;gap:1px;font-size:12px;font-weight:600;font-variant-numeric:tabular-nums}
.trend svg{width:13px;height:13px}
.trend.up{color:var(--positive)}.trend.down{color:var(--negative)}
.tag.age-slow{background:var(--pill-warning-bg);color:var(--pill-warning-ink)}
.tag.age-late{background:var(--pill-negative-bg);color:var(--pill-negative-ink)}

.wins{margin:0 0 22px}
.wins h2,.attention h2{font-size:15px;line-height:22px;margin:0 0 10px}
.win-list{list-style:none;display:flex;gap:12px;overflow-x:auto;padding:2px 2px 6px;scrollbar-width:thin}
.win{flex:0 0 auto}
.win-card{display:flex;align-items:center;gap:12px;min-width:220px;max-width:280px;min-height:72px;padding:12px 16px 12px 12px;border-radius:12px;background:#fdf6f1;text-align:left;transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s ease-out}
button.win-card:hover{transform:translateY(-1px);box-shadow:0 6px 16px -8px rgb(120 60 20 / 35%)}
.win-icon{position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:#fff}
.win-icon svg{width:20px;height:20px}
.win-icon.warm{background:var(--accent)}.win-icon.green{background:#23845a}
.win-text{display:flex;flex-direction:column;min-width:0}
.win-text strong{font-size:14px;line-height:19px}
.win-text span{font-size:13px;line-height:18px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.win-text small{font-size:12px;color:var(--muted)}
.win.fresh .win-card{animation:win-pop .5s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes win-pop{from{transform:scale(.94);opacity:0}}
.burst{position:absolute;inset:0;pointer-events:none}
.burst i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--accent);opacity:0;animation:burst .9s cubic-bezier(.15,.7,.3,1) .25s both}
.burst i:nth-child(3n+2){background:#23845a}.burst i:nth-child(3n){background:#e0a21a}
.burst i:nth-child(1){--a:0deg}.burst i:nth-child(2){--a:45deg}.burst i:nth-child(3){--a:90deg}.burst i:nth-child(4){--a:135deg}.burst i:nth-child(5){--a:180deg}.burst i:nth-child(6){--a:225deg}.burst i:nth-child(7){--a:270deg}.burst i:nth-child(8){--a:315deg}
@keyframes burst{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(1)}100%{opacity:0;transform:rotate(var(--a)) translateY(-30px) scale(.4)}}

.attention{margin:0 0 24px;padding:16px 18px 6px;border-radius:12px;background:#fffaf7;box-shadow:inset 0 0 0 1px #f3e2d8}
.attention-head{display:flex;align-items:center;justify-content:space-between}
.attention-head h2{margin:0}
.attention ul{list-style:none;margin-top:8px}
.attention-item{display:grid;grid-template-columns:28px 32px minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:10px 0;border-top:1px solid #f3e6de}
.attention-item:first-child{border-top:0}
.attention-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%}
.attention-icon svg{width:16px;height:16px}
.attention-item.urgent .attention-icon{background:#fde3e1;color:var(--negative)}
.attention-item.watch .attention-icon{background:#fdf0d2;color:#9a6200}
.attention-text{display:flex;flex-direction:column;min-width:0}
.attention-text strong{font-weight:600}
.attention-text>span{font-size:13px;line-height:18px}
.attention-item.urgent .attention-text>span{color:var(--pill-negative-ink)}
.attention-item.watch .attention-text>span{color:var(--pill-warning-ink)}
.receipts-table td small{color:var(--muted)}
@media (max-width:640px){
 .attention-item{grid-template-columns:28px minmax(0,1fr);row-gap:8px}
 .attention-item>.client-avatar{display:none}
 .attention-item>.button{grid-column:2;justify-self:start}
 .win-card{min-width:200px}
}
@media (pointer:coarse){.attention-item .button,.attention-head .text-button,.win-card{min-height:44px}}
@media (prefers-reduced-motion:reduce){.health.urgent .health-dot,.win.fresh .win-card,.burst i{animation:none}.burst{display:none}}
.nav-count.quiet{background:var(--pill-neutral-bg);color:var(--pill-neutral-ink)}
.tag.consent{background:var(--pill-positive-bg);color:var(--pill-positive-ink)}

/* Team */
.team-list{list-style:none}
.team-row{display:grid;grid-template-columns:32px minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.4fr) auto;align-items:center;column-gap:16px;padding:14px 0;border-top:1px solid var(--rule)}
.team-row:first-child{border-top:0;padding-top:0}
.team-row.invited{opacity:.85}
.team-who,.team-role{display:flex;flex-direction:column;gap:2px;min-width:0}
.team-who strong{font-weight:600}
.team-who small,.team-role small{font-size:12px;line-height:16px;overflow-wrap:anywhere}
.team-who small:first-of-type{color:var(--muted)}
.team-role .badge{align-self:flex-start}
.team-note{margin-top:4px;max-width:80ch}
.dialog.wide{width:min(640px,calc(100vw - 32px))}
.member-form{gap:16px}
.member-fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.member-fieldset legend{font-weight:600;margin-bottom:6px;padding:0}
.role-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.role-option{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--control);border-radius:var(--radius-card);cursor:pointer}
.role-option:has(input:checked){border-color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary)}
.role-option input{margin-top:3px;accent-color:var(--primary)}
.role-option span,.perm-option span{display:flex;flex-direction:column;gap:2px}
.role-option small,.perm-option small{font-size:12px;line-height:17px;color:var(--muted)}
.perm-heading{font-size:13px;font-weight:600;margin-top:6px}
.perm-group{display:flex;flex-direction:column;gap:6px}
.perm-option{padding:8px 10px;border-radius:var(--radius-control);background:var(--raised)}
.perm-option strong{font-weight:600;font-size:14px}
.client-picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px;max-height:200px;overflow-y:auto;padding:8px 10px;border:1px solid var(--border);border-radius:var(--radius-control)}
.member-danger{display:flex;flex-wrap:wrap;gap:8px;padding-top:12px;border-top:1px solid var(--rule)}
.button.danger-outline{background:var(--surface);color:var(--negative);border-color:#f0b8b5}
.button.danger-outline:hover{background:#fff5f4}
@media (max-width:760px){.team-row{grid-template-columns:32px minmax(0,1fr);row-gap:8px}.team-row>:nth-child(n+3){grid-column:2}.role-options{grid-template-columns:minmax(0,1fr)}}
@media (pointer:coarse){.role-option,.perm-option,.member-fieldset .check{min-height:44px}}

/* This month's plan (src/hybrid/delivery.ts): one row per promise on the plan card. */
#plan-month .panel-title{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between}
.month-switch{display:flex;align-items:center;gap:8px}
.month-switch span{min-width:9em;text-align:center;font-weight:600}
.month-switch .button,.delivery-items .button{min-height:44px}
.delivery-row{padding:16px 0;border-top:1px solid var(--rule)}
.delivery-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:8px}
.delivery-head h3{margin:0;font-size:1rem;flex:1 1 12em}
.delivery-items{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.delivery-items li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;padding:8px 12px;border-radius:8px;background:var(--surface-2,rgba(0,0,0,.03))}
.delivery-detail{flex:1 1 16em;min-width:0;overflow-wrap:anywhere}
.delivery-add{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px;margin-top:12px}
.delivery-add .field{flex:1 1 14em;margin:0}
.delivery-add .button{min-height:44px}

/* Dashboard: clients behind on this month's plan. */
.dash-behind{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.dash-client{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;width:100%;min-height:44px;padding:12px 14px;border:1px solid var(--rule);border-radius:10px;background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit}
.dash-client:hover,.dash-client:focus-visible{border-color:var(--text)}
.dash-client small{flex:1 1 100%;color:var(--muted)}

/* Paid customers (owner Dashboard) and the customer's own plan, card and starting point. */
.paid-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin-top:16px}
.paid-card{display:flex;flex-direction:column;gap:10px;min-width:0;padding:var(--card-pad,20px);border:1px solid var(--rule);border-radius:var(--radius-card);background:var(--raised,#fff)}
.paid-card.waiting{border-color:var(--accent)}
.paid-card header{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.paid-card header h3{margin:0;flex:1 1 12em;min-width:0;overflow-wrap:anywhere}
.paid-card header strong{font-size:18px}.paid-card header small{font-weight:400;color:var(--muted)}
.paid-card h4{margin:6px 0 0;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.plan-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px 16px;margin:8px 0 12px}
.plan-facts div{min-width:0}.plan-facts dt{font-size:12px;color:var(--muted)}.plan-facts dd{margin:2px 0 0;overflow-wrap:anywhere}
.paid-limits,.paid-checks{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}
.paid-checks{flex-direction:column;gap:6px}.paid-checks li{display:flex;align-items:center;gap:8px}
.paid-card.stuck{border-color:#e7b9ad}
.paid-setup{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 12px}.paid-setup .field{flex:1 1 16em;margin:0}.paid-setup .button{min-height:44px}
.paid-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:6px}
.paid-actions .button{min-height:44px}
#your-plan .button{min-height:44px}
.inline-note{margin:8px 0 12px;padding:10px 14px;border-radius:10px;background:var(--pill-positive-bg);color:var(--pill-positive-ink)}
.inline-note.error{background:var(--pill-negative-bg);color:var(--pill-negative-ink)}
.start-scores{list-style:none;margin:8px 0 12px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px}
.start-scores li{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-radius:8px;background:var(--surface-2,rgba(0,0,0,.03))}

/* Customer portal: an open page on white with its places along the top, no side panel. Large light headings, sections
   divided by hairlines, plenty of air. TopReach's own orange, gauge and icons. */
.cs-shell{min-height:100vh;display:flex;flex-direction:column;background:#fff;color:var(--text)}
.cs-bar{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #e9e7e2}
.cs-bar-inner{display:flex;align-items:center;gap:24px;max-width:1200px;margin:0 auto;padding:0 32px;min-height:68px}
.cs-bar .brand{flex:none}
.cs-nav{display:flex;align-items:stretch;gap:4px;flex:1;min-width:0;align-self:stretch}
.cs-nav a{position:relative;display:inline-flex;align-items:center;gap:8px;padding:0 14px;min-height:44px;color:var(--muted);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .2s cubic-bezier(.16,1,.3,1)}
.cs-nav a::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--accent);transform:scaleX(0);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.cs-nav a:hover{color:var(--text)}
.cs-nav a[aria-current="page"]{color:var(--text)}.cs-nav a[aria-current="page"]::after{transform:scaleX(1)}
.cs-nav a:focus-visible{outline:2px solid var(--accent);outline-offset:-4px;border-radius:6px}
.cs-count{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--accent);color:#fff;font-size:12px;font-weight:600}
.cs-bar-actions{display:flex;gap:4px;flex:none}.cs-bar-actions .text-button{min-height:44px;padding:0 10px}
.cs-main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:40px 32px 64px}
.cs-main.cs-home-main{padding-top:0}
.cs-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:1200px;width:100%;margin:0 auto;padding:24px 32px 32px;border-top:1px solid #e9e7e2;color:var(--muted);font-size:13px}

.cs-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,6vw,96px);align-items:center;padding:clamp(48px,8vw,104px) 0 clamp(48px,7vw,88px)}
.cs-hero h1{font-size:clamp(42px,6vw,72px);line-height:1.04;font-weight:400;letter-spacing:-.03em;text-wrap:balance;overflow-wrap:anywhere}
.cs-hero h1:focus{outline:none}
.cs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:18px;color:var(--muted);font-size:15px;overflow-wrap:anywhere}
.cs-meta a{color:inherit;text-underline-offset:3px;text-decoration-color:#d9d6cf}.cs-meta a:hover{color:var(--text);text-decoration-color:currentColor}
.cs-lead{margin:32px 0 36px;max-width:34em;font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:#3d3c39}
.cs-lead strong{display:block;margin-bottom:4px;color:var(--text);font-weight:600}
.cs-cta{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 28px;border:0;border-radius:8px;background:var(--accent);color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 1px 2px rgba(143,52,18,.25),0 8px 20px -10px rgba(182,66,25,.55);transition:background-color .2s cubic-bezier(.16,1,.3,1),transform .2s cubic-bezier(.16,1,.3,1)}
.cs-cta:hover{background:var(--accent-ink)}.cs-cta:active{transform:translateY(1px)}
.cs-cta:focus-visible,.cs-more:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cs-hero-gauge{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center}
.cs-gauge{width:min(100%,400px);height:auto}
.cs-gauge .g-rest{stroke:#ecebe7}.cs-gauge .g-low{stroke:#c8452c}.cs-gauge .g-mid{stroke:#de9420}.cs-gauge .g-high{stroke:#2f8a57}
.cs-gauge .g-num{font-family:var(--font);font-size:56px;font-weight:500;letter-spacing:-.03em;fill:var(--text)}
.cs-gauge .g-of{font-family:var(--font);font-size:13px;fill:var(--muted)}
.cs-hero-gauge figcaption{max-width:26em;margin-top:8px;color:var(--muted);font-size:14px;line-height:1.5}

.cs-section{padding:clamp(48px,7vw,88px) 0;border-top:1px solid #e9e7e2}
.cs-section>h2,.cs-split-text h2,.cs-close h2{font-size:clamp(28px,3.2vw,40px);line-height:1.15;font-weight:400;letter-spacing:-.02em;text-wrap:balance}
.cs-section>h2{margin-bottom:clamp(28px,4vw,48px)}
.cs-section h3{font-size:18px;font-weight:600;letter-spacing:-.005em}
.cs-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:var(--accent);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.cs-more svg{width:18px;height:18px;transition:transform .2s cubic-bezier(.16,1,.3,1)}.cs-more:hover svg{transform:translateX(3px)}
.cs-more:hover{color:var(--accent-ink)}

.cs-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.cs-steps li{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.cs-steps p{color:var(--muted);line-height:1.55;font-size:15px}
.cs-step-mark{display:grid;place-items:center;width:44px;height:44px;margin-bottom:8px;border-radius:50%;background:#f3f2ee;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.cs-step-mark svg{width:20px;height:20px}
.cs-steps .done .cs-step-mark{background:var(--pill-positive-bg);color:var(--positive)}
.cs-steps .current .cs-step-mark{background:var(--accent);color:#fff;box-shadow:0 0 0 6px var(--accent-soft)}

.cs-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,7vw,112px);align-items:center}
.cs-split.reverse .cs-split-text{order:2}
.cs-split-text p{margin:20px 0 16px;max-width:30em;font-size:17px;line-height:1.65;color:#3d3c39}
.cs-split-text h3{margin:24px 0 10px;font-size:16px}
.cs-ledger,.cs-areas{list-style:none;margin:0;padding:0;display:grid}
.cs-ledger li,.cs-areas li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 16px;align-items:baseline;padding:18px 0;border-bottom:1px solid #eeece7}
.cs-ledger li:first-child,.cs-areas li:first-child{padding-top:0}
.cs-ledger li:last-child,.cs-areas li:last-child{border-bottom:0}
.cs-ledger span,.cs-areas span{font-size:16px}
.cs-ledger strong,.cs-areas strong{font-size:26px;font-weight:500;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cs-ledger strong small{font-size:15px;font-weight:400;color:var(--muted);letter-spacing:0}
.cs-ledger progress,.cs-areas progress{grid-column:1/-1;height:6px;background:#f0eee9}
.cs-ledger progress::-webkit-progress-bar,.cs-areas progress::-webkit-progress-bar{background:#f0eee9}
.cs-ledger progress::-webkit-progress-value,.cs-areas progress::-webkit-progress-value{background:var(--accent)}
.cs-ledger progress::-moz-progress-bar,.cs-areas progress::-moz-progress-bar{background:var(--accent)}
.cs-ledger-call{align-items:center}
.cs-fixes{margin:0 0 12px;padding-left:20px;display:grid;gap:8px;color:#3d3c39}.cs-fixes li::marker{color:var(--accent)}

.cs-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,4vw,56px)}
.cs-cols article{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.cs-cols p{color:#3d3c39;line-height:1.6;font-size:16px}
.cs-glyph{display:grid;place-items:center;width:56px;height:56px;margin-bottom:12px;border-radius:50%;background:var(--accent);color:#fff}
.cs-card-line{font-weight:600;color:var(--text)!important}
.cs-fine{font-size:14px!important;color:var(--muted)!important}
.cs-waiting{margin:0;padding-left:18px;display:grid;gap:4px;color:#3d3c39}
.cs-close{padding:clamp(56px,8vw,96px) 0 clamp(40px,6vw,72px);border-top:1px solid #e9e7e2;text-align:center}
.cs-close .cs-more{margin-top:16px;font-size:17px}

@media (max-width:1000px){.cs-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.cs-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.cs-hero,.cs-split{grid-template-columns:minmax(0,1fr)}.cs-split.reverse .cs-split-text{order:0}.cs-hero-gauge{order:-1}.cs-gauge{width:min(100%,300px)}}
@media (max-width:760px){
 .cs-bar-inner{flex-wrap:wrap;gap:0 12px;padding:0 16px;min-height:56px}
 .cs-bar-actions{margin-left:auto}
 .cs-nav{order:3;flex:1 1 100%;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 6px;border-top:1px solid #f0eee9}
 .cs-nav::-webkit-scrollbar{display:none}
 .cs-main{padding:28px 16px 48px}.cs-footer{padding:20px 16px 28px}
 .cs-hero{padding:40px 0 48px}
}
@media (max-width:520px){.cs-steps{grid-template-columns:minmax(0,1fr)}.cs-cta{width:100%}}
@media (prefers-reduced-motion:reduce){.cs-nav a,.cs-nav a::after,.cs-cta,.cs-more svg{transition:none}}
::selection{background:var(--accent-soft);color:var(--accent-ink)}

/* Owner portal: a fixed, collapsible white sidebar on a light grey canvas; white cards with soft corners and one
   soft shadow; TopReach orange on the active place, the primary action, the main data and the advisor card. */
.ow-shell{--ow-side:248px;--ow-canvas:#f3f3f1;--ow-card:#fff;--ow-edge:#ebeae6;--ow-shadow:0 1px 2px rgba(21,21,20,.04),0 4px 14px -8px rgba(21,21,20,.10);min-height:100dvh;background:var(--ow-canvas)}
.ow-shell.collapsed{--ow-side:76px}
.ow-side{position:fixed;inset:0 auto 0 0;z-index:40;width:var(--ow-side);display:flex;flex-direction:column;gap:8px;padding:18px 14px 14px;background:#fff;border-right:1px solid var(--ow-edge);transition:width .22s cubic-bezier(.16,1,.3,1);overflow:hidden}
.ow-brand{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 4px 10px}
.ow-brand .brand span{white-space:nowrap}
.ow-icon-btn{display:grid;place-items:center;flex:none;width:40px;height:40px;border:0;border-radius:10px;background:transparent;color:var(--muted);cursor:pointer}
.ow-icon-btn:hover{background:#f5f4f1;color:var(--text)}
.ow-nav{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:14px;scrollbar-width:thin}
.ow-group{display:flex;flex-direction:column;gap:2px}
.ow-heading{padding:6px 12px 4px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ow-nav a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 12px;border-radius:10px;color:#3f3e3b;font-size:14px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background-color .15s,color .15s}
.ow-nav a:hover{background:#f5f4f1;color:var(--text)}
.ow-nav a[aria-current="page"]{background:var(--accent);color:#fff;box-shadow:0 6px 14px -8px rgba(182,66,25,.7)}
.ow-nav a:focus-visible,.ow-icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ow-nav .nav-icon{display:grid;place-items:center;flex:none;width:20px;height:20px;background:none!important;color:inherit;border-radius:0}
.ow-nav .nav-icon svg{width:18px;height:18px}
.ow-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ow-count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:inline-grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);font-size:12px;font-weight:600}
.ow-count.quiet{background:#efeeea;color:var(--muted)}
.ow-nav a[aria-current="page"] .ow-count{background:rgba(255,255,255,.22);color:#fff}
.ow-me{display:flex;align-items:center;gap:10px;padding:12px 6px 4px;border-top:1px solid var(--ow-edge)}
.ow-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-weight:600}
.ow-who{flex:1}.ow-who strong{display:block;font-size:14px;font-weight:600}.ow-who small{display:block;font-size:12px;color:var(--muted)}
.ow-me .text-button{min-height:44px;white-space:nowrap}
.ow-shell.collapsed .ow-label,.ow-shell.collapsed .ow-heading,.ow-shell.collapsed .ow-brand .brand span{display:none}
.ow-shell.collapsed .ow-brand{flex-direction:column;padding-bottom:6px}
.ow-shell.collapsed .ow-nav a{justify-content:center;padding:0;position:relative}
.ow-shell.collapsed .ow-count{position:absolute;top:4px;right:6px;min-width:18px;height:18px;padding:0 5px;font-size:11px}
.ow-shell.collapsed .ow-group+.ow-group{border-top:1px solid var(--ow-edge);padding-top:12px}
.ow-shell.collapsed .ow-me{justify-content:center}
.ow-scrim{display:none}
.ow-main{margin-left:var(--ow-side);min-width:0;display:flex;flex-direction:column;min-height:100dvh;transition:margin-left .22s cubic-bezier(.16,1,.3,1)}
.ow-top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:16px;min-height:68px;padding:0 32px;background:rgba(243,243,241,.94);backdrop-filter:saturate(1.3) blur(8px)}
.ow-menu{display:none}
.ow-scope{flex:1;min-width:0;display:flex}
.ow-scope .client-search{width:min(100%,520px);margin:0}
.ow-scope .client-search input{height:44px;border-radius:12px;border-color:var(--ow-edge);background:#fff;padding-left:40px}
.ow-scope .client-search>svg{left:15px;top:15px}.ow-scope .client-search kbd{top:12px;right:12px}.ow-scope .search-results{top:50px}
.ow-actions{display:flex;align-items:center;gap:6px;flex:none}.ow-actions .text-button{min-height:44px;padding:0 10px}
.ow-stamp{color:var(--muted);font-size:13px;padding:0 6px;white-space:nowrap}
.ow-content{flex:1;width:100%;max-width:1480px;padding:8px 32px 40px}
.ow-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;max-width:1480px;width:100%;padding:16px 32px 24px;color:var(--muted);font-size:13px}
.ow-content .page-heading{margin-bottom:22px}
.ow-content .page-heading h1{font-size:26px;line-height:32px;font-weight:650;letter-spacing:-.015em}
.ow-content .panel{background:var(--ow-card);border:1px solid var(--ow-edge);border-radius:16px;box-shadow:var(--ow-shadow)}
.ow-content .panel-title h2{font-size:16px;font-weight:600}
.ow-content .button.primary{background:var(--accent);border-color:var(--accent)}
.ow-content .button.primary:hover{background:var(--accent-ink)}

/* Open, not boxy, on every owner screen: sections sit on the canvas, divided by space and one thin rule. Cards stay
   only where an item is a thing of its own (a paid customer, a money tile, a message). */
.ow-content .panel{background:none;border:0;border-top:1px solid #e3e1dc;border-radius:0;box-shadow:none;padding:24px 0 8px;margin-bottom:8px}
.ow-content .page-heading+.panel,.ow-content .section-tabs+.panel,.ow-content .section-tabs+* .panel:first-child{border-top:0;padding-top:4px}
main[data-hue].ow-content .panel-title h2::before{display:none}
.ow-content .empty{background:none;border:0;border-top:1px solid #e3e1dc;border-radius:0;padding:24px 0}
.ow-content .access-control{border:0;border-top:1px solid #e3e1dc;border-radius:0;padding:20px 0}
.ow-content .attention{background:none;box-shadow:none;border-radius:0;border-top:1px solid #e3e1dc;padding:18px 0 6px}
.ow-content .summary-strip{border:0;background:none;border-radius:0;gap:0 32px}
.ow-content .summary-strip>div{background:none!important;border:0!important;padding:4px 0}
.ow-content .section-tabs{margin-bottom:12px}
main[data-hue].ow-content .ki-tab[aria-current=page]{color:var(--text)}
main[data-hue].ow-content .ki-tab[aria-current=page]::after{background:var(--accent)}
main[data-hue].ow-content .ki-tab .num{color:var(--accent-ink)}
/* Account: forgot password, and an employee's own second sign-in step. */
.auth-forgot{margin-top:14px;text-align:center}.auth-forgot .text-button{min-height:44px}
.choices{border:0;margin:0 0 4px;padding:0;display:grid;gap:8px}.choices legend{font-weight:600;margin-bottom:8px}
.choice{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid var(--border);border-radius:12px;cursor:pointer;background:var(--surface)}
.choice input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent)}
.choice strong{display:block;font-weight:600}.choice small{display:block;color:var(--muted);font-size:13px}
.choice:has(input:checked){border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.choice.off{opacity:.6;cursor:not-allowed}
.recovery-list{list-style:none;padding:0;margin:8px 0 16px;display:grid;grid-template-columns:repeat(2,minmax(0,max-content));gap:6px 24px}
/* Overview: the SEO desk. */
.ov-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:20px}
.ov-kpi{display:flex;flex-direction:column;gap:4px;padding:20px 22px;background:var(--ow-card);border:1px solid var(--ow-edge);border-radius:16px;box-shadow:var(--ow-shadow);min-width:0}
.ov-kpi span{color:var(--muted);font-size:13px;font-weight:500}
.ov-kpi strong{font-size:30px;line-height:38px;font-weight:600;letter-spacing:-.015em}.ov-kpi strong small{font-size:15px;font-weight:500;color:var(--muted)}
.ov-kpi small{color:var(--muted);font-size:13px}
.ov-kpi[data-tone="action"] strong{color:var(--accent)}
.ov-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px;align-items:stretch;margin-bottom:20px}
.ov-grid>div{min-width:0;display:flex}.ov-grid>div>*{flex:1;margin:0}
.ov-advisor{display:flex;flex-direction:column;gap:14px;padding:24px;border-radius:16px;background:var(--accent);color:#fff;box-shadow:0 10px 28px -16px rgba(143,52,18,.75)}
.ov-adv-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.ov-adv-head h2{font-size:18px;font-weight:650}.ov-adv-head span{font-size:13px;color:#fff}
.ov-adv-lead{font-size:17px;line-height:26px;max-width:46em}
.ov-adv-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ov-adv-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.12)}
.ov-adv-list strong{display:block;font-weight:600;overflow-wrap:anywhere}.ov-adv-list small{display:block;font-size:13px;color:#fff}
.ov-tag{height:24px;padding:0 9px;border-radius:999px;display:inline-grid;place-items:center;background:rgba(255,255,255,.2);font-size:12px;font-weight:600;white-space:nowrap}
.ov-go,.ov-adv-btn{min-height:40px;padding:0 16px;border:0;border-radius:10px;background:#fff;color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.ov-go:hover,.ov-adv-btn:hover{background:#fff4ee}.ov-go:focus-visible,.ov-adv-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ov-adv-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:auto}.ov-adv-actions span{font-size:13px;color:#fff}
.ov-bars{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:6px}
.ov-bars button{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:baseline;width:100%;padding:10px 8px;border:0;border-radius:10px;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--text)}
.ov-bars button:hover{background:#f7f6f3}
.ov-bars span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ov-bars strong{font-size:18px;font-weight:600}.ov-bars strong small{margin-left:6px;font-size:12px;font-weight:600}
.ov-bars .up{color:var(--positive)}.ov-bars .down{color:var(--negative)}
.ov-bars progress,.ov-clients progress{grid-column:1/-1;height:8px;background:#f1efeb}
.ov-bars progress::-webkit-progress-bar{background:#f1efeb}.ov-bars progress::-webkit-progress-value{background:var(--accent)}.ov-bars progress::-moz-progress-bar{background:var(--accent)}
.ov-empty{color:var(--muted);font-size:14px;line-height:21px;padding:8px 0}
.ov-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 12px}
.ov-chips button{min-height:36px;padding:0 12px;border:1px solid var(--ow-edge);border-radius:999px;background:#fff;font:inherit;font-size:13px;font-weight:500;color:var(--muted);cursor:pointer}
.ov-chips button[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:#fff}
.ov-chips .num{margin-left:2px}
.ov-list{list-style:none;margin:0;padding:0;display:grid}
.ov-list li+li{border-top:1px solid #f1efeb}
.ov-list button{display:grid;grid-template-columns:auto minmax(0,1fr) 18px;gap:12px;align-items:center;width:100%;min-height:58px;padding:8px 6px;border:0;border-radius:10px;background:none;font:inherit;text-align:left;cursor:pointer;color:var(--text)}
.ov-list button:hover{background:#f7f6f3}.ov-list svg{width:18px;height:18px;color:var(--muted)}
.ov-main strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ov-main small{display:block;color:var(--muted);font-size:13px}
.ov-kind{min-width:96px;height:24px;padding:0 9px;border-radius:999px;display:inline-grid;place-items:center;font-size:12px;font-weight:600;background:#f1efeb;color:#4a4946;white-space:nowrap}
.ov-kind[data-kind="fix"],.ov-kind[data-kind="analysis"]{background:var(--accent-soft);color:var(--accent-ink)}
.ov-kind[data-kind="access"]{background:var(--pill-warning-bg);color:var(--pill-warning-ink)}
.ov-more{margin-top:8px;min-height:40px}
.ov-feed{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.ov-feed li{display:grid;grid-template-columns:10px minmax(0,1fr) auto;gap:12px;align-items:start}
.ov-feed strong{display:block;font-weight:600}.ov-feed small{display:block;color:var(--muted);font-size:13px;overflow-wrap:anywhere}.ov-feed time{color:var(--muted);font-size:13px;white-space:nowrap}
.ov-dot{width:10px;height:10px;margin-top:5px;border-radius:50%;background:var(--accent)}
.ov-dot[data-kind="payment"],.ov-dot[data-kind="first_payment"]{background:var(--positive)}.ov-dot[data-kind="report_run"],.ov-dot[data-kind="new_client"]{background:#8d8b86}
.ow-content #paid-orders{margin-bottom:20px}
.ov-clients th small.ov-site{display:block;font-weight:400;color:var(--muted);font-size:13px}
/* Open, not boxy: the figures sit on the page, the tasks are a ruled list; the advisor is the one card. */
.ov-kpis{gap:24px 40px;margin:4px 0 28px}
.ov-kpi{background:none;border:0;box-shadow:none;padding:0;border-radius:0}
.ov-kpi strong{font-size:34px;line-height:42px}
.ow-content .ov-tasks.panel{background:none;border:0;box-shadow:none;padding:4px 0 0;border-radius:0}
main[data-hue] .ov-tasks .panel-title h2::before{display:none}
.ov-list li+li{border-top:1px solid #e6e4df}
.ov-list button:hover{background:#ecebe7}
.ov-chips button{background:transparent}
.ov-adv-paid{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border-radius:12px;background:rgba(0,0,0,.16);font-weight:600}
@media (max-width:1200px){.ov-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){
 .ow-shell,.ow-shell.collapsed{--ow-side:0px}
 .ow-side{width:280px;transform:translateX(-100%);transition:transform .25s cubic-bezier(.16,1,.3,1);box-shadow:0 20px 48px -12px rgba(21,21,20,.35)}
 .ow-shell.open .ow-side{transform:none}
 .ow-shell.collapsed .ow-label,.ow-shell.collapsed .ow-heading,.ow-shell.collapsed .ow-brand .brand span{display:revert}
 .ow-shell.collapsed .ow-nav a{justify-content:flex-start;padding:0 12px}
 .ow-collapse{display:none}
 .ow-shell.open .ow-scrim{display:block;position:fixed;inset:0;z-index:35;border:0;background:rgba(21,21,20,.32)}
 .ow-main{margin-left:0}
 .ow-menu{display:grid}
 .ow-top{padding:8px 16px;flex-wrap:wrap;gap:8px 10px}
 .ow-scope{order:3;flex:1 1 100%}.ow-scope .client-search{width:100%}
 .ow-actions{margin-left:auto}.ow-stamp{display:none}
 .ow-content{padding:8px 16px 32px}.ow-footer{padding:16px}
}
@media (max-width:520px){.ov-kpis{gap:12px}.ov-kpi{padding:16px}.ov-kpi strong{font-size:24px;line-height:30px}.ov-adv-list li{grid-template-columns:minmax(0,1fr) auto}.ov-tag{display:none}.ov-kind{display:none}.ov-list button{grid-template-columns:minmax(0,1fr) 18px}.ow-actions{flex-wrap:wrap;justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){.ow-side,.ow-main{transition:none}}

/* The narrowest phones (320–400 px): the top bar's buttons and the month switchers wrap instead of pushing the page sideways. */
@media (max-width:400px){
 .topbar{flex-wrap:wrap;row-gap:4px}
 .topbar-actions{flex:1 1 auto;flex-wrap:wrap;justify-content:flex-end;gap:4px 8px;min-width:0}
 .month-switch{flex-wrap:wrap;width:100%;justify-content:space-between}
 .month-switch span{min-width:0;flex:1 1 auto}
}