/* One visual system for the whole site, loaded last.
   QA 2026-09-23: repeated page titles, 8-11px muted metadata, buttons of five sizes
   and cramped account actions made the site read as a prototype. This file only
   restyles; it changes no behaviour. It sets:
     1. one page header: title + one-line description, actions on the right
     2. a legible floor for metadata: 12px, muted ink that passes contrast
     3. one button scale: primary / secondary / quiet / danger
     4. the pieces the QA fixes added: compact client cards, grouped errors,
        answer source chips and the Account user table. */

:root{--meta-size:12px;--meta-ink:var(--muted);--control-h:38px;--control-radius:9px}
/* Muted ink a notch stronger than the old token: >=5.5:1 on panel and canvas in both themes. */
:root[data-theme="light"],:root:not([data-theme]){--muted:#526359}
:root[data-theme="dark"]{--muted:#a3b8ae}

/* ── 1. one page header ──────────────────────────────────────────────────────── */
/* On a content page the in-page header is the title. The top bar keeps its h1 for
   assistive technology but no longer repeats the same words above it. On a phone the
   top bar names the page instead (app.css already hides the in-page h2 there), so
   there is exactly one visible title at every width. */
@media(min-width:761px){
 body[data-view]:not([data-view="chat"]) .workspace-header .page-heading{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
 body[data-view]:not([data-view="chat"]) .workspace-header{justify-content:flex-end}
}
@media(max-width:760px){
 /* The top bar's subtitle said what the in-page description says again. */
 body[data-view]:not([data-view="chat"]) .workspace-header .page-heading p{display:none}
 body[data-view]:not([data-view="chat"]) .workspace-header .page-heading h1{font-size:17px}
}
.content-view>.view-heading{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px 20px;margin:0 0 20px;padding:0 0 16px;border-bottom:1px solid var(--line-soft,var(--border))}
.content-view>.view-heading>div:first-child{flex:1 1 320px;min-width:0}
.content-view>.view-heading h2{margin:0 0 5px;font-size:26px;line-height:1.2;font-weight:680;letter-spacing:-.02em;color:var(--ink)}
.content-view>.view-heading p{margin:0;max-width:74ch;font-size:14px;line-height:1.5;color:var(--muted)}
.content-view>.view-heading>:not(:first-child){display:flex;flex:0 0 auto;align-items:center;gap:8px;margin:2px 0 0}
.content-view>.view-heading>button{margin-top:2px}
.content-view>.view-heading .seg{margin-top:2px}
/* Enterprise clients uses the same header; its directory banner no longer repeats it. */
#clients-view>.view-heading{display:flex}
#clients-view:has(>#client-detail:not([hidden]))>.view-heading{display:none}
.client-directory-hero .client-eyebrow,.client-directory-hero h3,.client-directory-hero>div>p{display:none}
.client-directory-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px;min-height:0;border-radius:14px}
.client-directory-hero .client-automation-badge{margin:0}
#workspace .client-directory-score{display:flex;flex-direction:row;align-items:baseline;gap:6px;width:auto;min-width:0;padding:0;border:0;text-align:left}
#workspace .client-directory-score strong{font-size:20px;line-height:1}
#workspace .client-directory-score span,#workspace .client-directory-score small{max-width:none;margin:0;font-size:13px;color:var(--muted);white-space:nowrap}
#workspace .client-directory-score small:before{content:"· "}
@media(max-width:760px){
 .content-view>.view-heading{margin-bottom:16px;padding-bottom:12px}
 .content-view>.view-heading p{font-size:13px}
 .client-directory-hero{flex-wrap:wrap;padding:12px 14px}
 /* A later two-column rule overrode the phone layout and pushed the upload form off-card. */
 #workspace .vendor-upload{grid-template-columns:minmax(0,1fr)}
 #workspace .vendor-upload>*{min-width:0}
 #workspace .vendor-upload :is(input,textarea){max-width:100%}
}

/* ── 2. metadata you can read ────────────────────────────────────────────────── */
.view-note,.retention-note,.evidence-line,.field-hint,.settings-card small,
.diagnostic-result-head small,.diagnostic-evidence,.diagnostic-evidence p,
.report-info p,.dash-note,.suspect-note,.client-platform-note,
.history-heading .nav-caption,.history-note,.composer-note,
.message-tools button,.speaker,.expiry-label{font-size:var(--meta-size);line-height:1.55}
.view-note,.retention-note,.evidence-line,.field-hint,.diagnostic-result-head small,.report-info p,.dash-note,.client-platform-note,.composer-note,.speaker{color:var(--meta-ink)}
.pill,.renewal-health-pill,.renewal-health-pill.compact,.client-pill,.report-source-pill,.diagnostic-severity,.brief-priority{font-size:12px;letter-spacing:.01em}
.client-eyebrow,.hs-eyebrow,.nav-group-title{font-size:12px}
.client-card-titles small,.client-note-meta time,.renewal-health-meta,.client-custom-link small,.client-sso-panel small,.client-license-facts small,.client-roster-count,.client-version-more,
.client-directory-freshness,.client-results-count,.client-auto-refresh,.client-automation-badge small,.client-hero-automation{font-size:12px}
.log-owner,.log-problem-meta,.log-time,.logs-axis,.logs-partial{font-size:12px}
/* The floor, page by page: every visible label the 2026-09-23 audit found under 12px.
   #workspace carries the specificity past the older layered rules. */
#workspace .sidebar small,#workspace .workspace-header .page-heading p,#workspace .expiry-label{font-size:12px}
#workspace .workspace-header button.quiet{font-size:13px}
#workspace :is(.client-owner-panel small,.client-owner-panel em,.client-fetched-banner p,.client-note-empty p,.client-custom-links-state,.client-custom-links>div>span,
 .client-hero-status span,.client-hero-automation,.client-note-actions span,.client-sources strong,.client-sources span,.client-directory-freshness span,.client-auto-refresh,
 .client-sso-badge,.client-version-row strong,.client-version-row span,.client-roster-explorer>summary strong,.client-automation-badge strong,.client-automation-badge small,
 .client-license-facts small,.client-roster-stats small,.client-roster-table small,.client-note-meta time,.client-plan-head p,.client-license-head .client-eyebrow){font-size:12px;line-height:1.45}
#workspace .client-owner-panel small{letter-spacing:.05em}
#workspace :is(.dash-scope,.run-period,.run-row .tag,.run-when,.notification-controls label>span,.notification-meta span,.log-sev,
 .vendor-upload label,.vendor-upload small,.vendor-every-row small,.vendor-pill,.vendor-list-head span,.source-library span,.status-card-head strong,
 .dash-tile>span,.dash-tile>em,.usage-cost-note,.usage-cost-note span,.usage-period>span,.usage-user-tags span,.usage-user-total small,.usage-breakdown>summary,
 .usage-history-label strong,.usage-history-label small,.usage-history-value small,.usage-estimate-pill){font-size:12px;line-height:1.45}
#workspace :is(#usage-updated,.client-live span,.client-kpis span,.usage-section-head p,.usage-section-head small,.client-renewal-head p,.client-version-distribution>div:first-child span,.client-version-distribution>div:first-child strong,.client-custom-link b){font-size:12px;line-height:1.45}
#users-list:not(.ad-people-table) .row-menu-item{font-size:13px}

/* ── 3. one button scale ─────────────────────────────────────────────────────── */
/* Secondary is the default button; primary is the one main action; quiet is a text
   action; danger is destructive. Same height, radius and type everywhere. */
.content-view button:where(:not(.icon-button):not(.client-card):not(.client-report-row):not([role="tab"]):not(.logs-chip-x):not(.row-menu-item)),
.message-tools button,#action-dialog button,.workspace-header button.quiet{min-height:var(--control-h);padding:8px 15px;border-radius:var(--control-radius);font-size:13px;font-weight:600;line-height:1.2}
.content-view>.view-heading button{font-size:13px}
button.primary{background:var(--green);border-color:var(--green);color:var(--panel)}
button.danger,.danger-button{background:var(--danger);border-color:var(--danger);color:var(--panel)}
button.danger:not(:disabled):hover,.danger-button:not(:disabled):hover{background:var(--danger);filter:brightness(.93)}
button.quiet{background:transparent;border-color:transparent;color:var(--ink)}
button.quiet:not(:disabled):hover{background:var(--hover)}
button.quiet.danger-text{color:var(--danger)}
.log-prompts button{min-height:34px!important;padding:6px 13px!important;border-radius:999px!important;font-size:13px!important;font-weight:600}
.message-tools button{min-height:30px;padding:4px 10px;color:var(--muted);background:transparent;border-color:transparent}
.message-tools button:hover{color:var(--ink);background:var(--hover)}
@media(max-width:760px){.content-view button:where(:not(.icon-button):not(.client-card):not(.client-report-row):not([role="tab"]):not(.logs-chip-x):not(.row-menu-item)){min-height:44px}}

/* ── 4a. compact client cards ────────────────────────────────────────────────── */
.client-grid{align-items:stretch}
.client-card{gap:14px;min-height:0;padding:16px 18px}
.client-card-top{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%}
.client-card-top .client-brand{min-width:0}
.client-card-titles strong{font-size:17px;line-height:1.25}
.client-card-titles small{font-size:12px;line-height:1.4;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-card-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;padding:12px 0;border-top:1px solid var(--line-soft,var(--border));border-bottom:1px solid var(--line-soft,var(--border))}
.client-card-stat{display:flex;flex-direction:column;gap:3px;min-width:0}
.client-card-stat small{font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.client-card-stat strong{font-size:15px;font-weight:650;color:var(--ink);overflow-wrap:anywhere}
.client-card-stat em{font-style:normal;font-size:12px;color:var(--muted)}
.client-card-stat.is-soon em{color:var(--warning);font-weight:650}
.client-card-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;margin-top:0;padding-top:0;font-size:12px;line-height:1.45;color:var(--muted)}
.client-card-freshness{display:flex;align-items:center;gap:8px;min-width:0}
.client-card-freshness .client-status-dot{flex:none}
.client-card-footer strong{flex:none;font-size:13px;color:var(--green)}
@media(max-width:760px){.client-card{padding:14px 15px;gap:12px}.client-card-stats{padding:10px 0}.client-monogram:not(.large){flex-basis:80px;width:80px;height:46px}}

/* ── 4b. grouped errors ──────────────────────────────────────────────────────── */
.diagnostic-groups{display:grid;gap:8px;margin:4px 0 12px}
.diagnostic-groups+.view-note{margin:0 0 4px}
.diagnostic-group{border:1px solid var(--border);border-radius:12px;background:var(--panel);overflow:hidden}
.diagnostic-group>summary{display:flex;align-items:center;gap:14px;padding:13px 16px;cursor:pointer;list-style:none}
.diagnostic-group>summary::-webkit-details-marker{display:none}
.diagnostic-group>summary:after{content:"+";flex:none;margin-left:auto;font-size:20px;line-height:1;color:var(--muted)}
.diagnostic-group[open]>summary:after{content:"−"}
.diagnostic-group>summary:focus-visible{outline:3px solid var(--green);outline-offset:-3px}
.diagnostic-count{flex:none;min-width:52px;padding:5px 8px;border-radius:8px;background:var(--danger-bg);color:var(--danger);font-size:14px;font-weight:700;text-align:center;font-variant-numeric:tabular-nums}
.diagnostic-group-main{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.diagnostic-group-title{font-size:14px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.diagnostic-group-meta{font-size:12px;color:var(--muted);line-height:1.4}
.diagnostic-group .diagnostic-log-body{padding:2px 16px 16px;border-top:1px solid var(--line-soft,var(--border))}
.diagnostic-group-explain{margin:12px 0 0;font-size:13px;line-height:1.6;color:var(--ink)}
.diagnostic-group .diagnostic-meta{margin:14px 0 0;font-size:13px}
.diagnostic-raw,.diagnostic-occurrences{margin-top:12px}
.diagnostic-raw>summary,.diagnostic-occurrences>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--green)}
.diagnostic-raw pre{margin:8px 0 0;max-height:320px;overflow:auto;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere;background:var(--subtle);border-radius:8px;padding:12px}
.diagnostic-occurrences ul{margin:8px 0 0;padding-left:18px;max-height:240px;overflow:auto;font-size:12px;line-height:1.7;color:var(--muted)}
@media(max-width:760px){
 .diagnostic-group>summary{align-items:flex-start;gap:10px;padding:12px}
 .diagnostic-count{min-width:44px;font-size:13px}
 .diagnostic-group-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
}

/* ── 4c. answer sources, always visible ──────────────────────────────────────── */
.answer-sources{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line-soft,var(--border))}
.answer-sources-label{margin-right:2px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.source-chip{display:inline-flex;align-items:center;max-width:100%;min-height:28px;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:var(--subtle);color:var(--ink);font-size:12px;font-weight:600;line-height:1.3;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a.source-chip{color:var(--green);background:var(--accent);border-color:color-mix(in srgb,var(--green) 25%,transparent)}
a.source-chip:after{content:"↗";margin-left:5px;font-size:11px}
a.source-chip:hover{text-decoration:underline}
a.source-chip:focus-visible{outline:3px solid var(--green);outline-offset:2px}
/* Evidence: one chip per record, opening a right-side drawer (full screen on a phone). */
button.source-chip.evidence-chip{min-height:30px;border-color:color-mix(in srgb,var(--green) 25%,transparent);background:var(--accent);color:var(--accent-ink);font:inherit;font-size:12px;font-weight:650;cursor:pointer}
button.source-chip.evidence-chip:hover{border-color:var(--green)}
button.source-chip.evidence-chip:focus-visible{outline:3px solid var(--green);outline-offset:2px}
dialog.evidence-drawer{position:fixed;inset:0 0 0 auto;width:min(460px,100%);max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;border-left:1px solid var(--border);border-radius:14px 0 0 14px;background:var(--panel);color:var(--ink);display:none;flex-direction:column;overflow:auto}
dialog.evidence-drawer[open]{display:flex}
dialog.evidence-drawer::backdrop{background:#0006}
.evidence-head{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 12px;border-bottom:1px solid var(--border);background:var(--panel)}
.evidence-head h2{margin:0;font-size:17px;line-height:1.3}
.evidence-body{display:grid;gap:12px;padding:14px 18px}
.evidence-group{padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--panel)}
.evidence-group[data-focus="true"]{border-color:var(--green);box-shadow:inset 3px 0 var(--green)}
.evidence-group h3{margin:0;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.evidence-meta{margin:3px 0 10px;font-size:12px;line-height:1.45;color:var(--muted)}
.evidence-values{display:grid;gap:0;margin:0}
.evidence-values>div{display:grid;grid-template-columns:minmax(110px,38%) minmax(0,1fr);gap:10px;padding:6px 0;border-top:1px solid var(--line-soft,var(--border))}
.evidence-values dt{font-size:12px;color:var(--muted)}
.evidence-values dd{margin:0;font:600 13px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--ink);overflow-wrap:anywhere}
.evidence-link{display:inline-flex;margin-top:8px;font-size:13px;font-weight:650;color:var(--green)}
.evidence-foot{margin:auto 0 0;padding:12px 18px 18px;font-size:12px;color:var(--muted)}
@media(max-width:760px){dialog.evidence-drawer{width:100%;border-radius:0;border-left:0}}
/* Phones: the composer stays pinned to the bottom of the chat, above the safe area. */
@media(max-width:760px){
 .chat-shell>.composer-area{position:sticky;bottom:0;z-index:4;background:var(--bg)}
 .chat-shell>.composer-area .composer-note{padding-top:6px;padding-bottom:max(8px,env(safe-area-inset-bottom))}
}

/* ── 4d. Account: people as a table, actions in a row menu ───────────────────── */
.row-menu{position:relative}
.row-menu>summary{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--border);border-radius:9px;background:var(--panel);color:var(--ink);cursor:pointer;list-style:none;font-size:11px;letter-spacing:1px}
.row-menu>summary::-webkit-details-marker{display:none}
.row-menu>summary:hover,.row-menu[open]>summary{background:var(--hover)}
.row-menu>summary:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.row-menu-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;display:flex;flex-direction:column;min-width:200px;padding:6px;border:1px solid var(--border);border-radius:11px;background:var(--panel);box-shadow:var(--shadow)}
.row-menu-item{display:block;width:100%;min-height:38px;padding:8px 12px;border:0;border-radius:7px;background:transparent;color:var(--ink);font-size:13px;font-weight:600;text-align:left}
.row-menu-item:not(:disabled):hover,.row-menu-item:focus-visible{background:var(--hover)}
.row-menu-item.is-danger{color:var(--danger)}
.row-menu-item.is-danger:not(:disabled):hover{background:var(--danger-bg)}
.row-menu-note{display:block;padding:6px 12px 4px;font-size:12px;line-height:1.45;color:var(--muted)}
@media(max-width:760px){
 .row-menu>summary{width:44px;height:44px}
 .row-menu-item{min-height:44px}
}

/* ── 5. selects: one arrow, never dropped or tiled (QA 24 Sep) ───────────────── */
/* Page rules wrote `background:var(--panel)`: the shorthand removed the arrow in light
   mode and reset background-repeat, so dark mode tiled it across the whole field
   (Reports, Renewals, Usage, HubSpot, Vendor). The arrow's longhands win here, once,
   for every single-choice select; page rules keep their colours and sizes. */
select:not([multiple]){-webkit-appearance:none;appearance:none;background-image:var(--select-arrow)!important;background-repeat:no-repeat!important;background-position:right 11px center!important;background-size:14px!important;padding-right:34px!important}

/* ── 6. refresh and "Updated …": one pattern for every page ─────────────────── */
/* In the page heading's action area (the right of .view-heading), freshness first:
     <div class="view-actions">
       <span class="ops-updated" aria-live="polite">Updated 2 min ago</span>
       <button type="button" class="ops-refresh" aria-label="Refresh">
         <svg class="ops-refresh-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 11a8 8 0 0 0-14.3-4.9L4 8M4 4v4h4M4 13a8 8 0 0 0 14.3 4.9L20 16m0 4v-4h-4"/></svg>
         <span>Refresh</span>
       </button>
     </div>
   Do not write this markup by hand: window.auxiUi.freshness(viewElement,{at,stale,error,reason,detail,retry}) (polish.js)
   draws and updates the one chip (before Refresh in the heading, else under the description), shows nothing when `at` is
   unknown, and switches to the warning tone with a short `reason` when a source is stale, failed or partial.
   While it works: disabled plus aria-busy="true" (the icon turns). Wording: "Updated
   <relative time>" (window.auxiUi.updatedText in polish.js), the exact time in the
   title attribute; add .is-stale when the data is older than the page promises and
   .is-error when the last refresh failed. The label stays visible on phones too. */
.ops-refresh{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:var(--control-h);padding:8px 14px;border:1px solid var(--border);border-radius:var(--control-radius);background:var(--panel);color:var(--ink);font:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;white-space:nowrap}
.ops-refresh:not(:disabled):hover{background:var(--hover)}
.ops-refresh:focus-visible{outline:3px solid var(--green);outline-offset:2px}
.ops-refresh:disabled{cursor:default;opacity:.7}
.ops-refresh-icon{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ops-refresh[aria-busy="true"] .ops-refresh-icon{animation:ops-spin .9s linear infinite}
@keyframes ops-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ops-refresh[aria-busy="true"] .ops-refresh-icon{animation:none;opacity:.5}}
.ops-updated{font-size:var(--meta-size);line-height:1.45;color:var(--meta-ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.ops-updated.is-stale{color:var(--warning)}
.ops-updated.is-error{color:var(--danger)}
.view-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px}
@media(max-width:760px){.ops-refresh{min-height:44px}.view-actions{justify-content:flex-start}}

/* ── 7. the desktop top bar: no empty strip above content pages ─────────────── */
/* There it holds only the theme and help buttons: a slim row without a rule. */
@media(min-width:761px){
 body[data-view]:not([data-view="chat"]) .workspace-header{height:44px;border-bottom-color:transparent;background:transparent;backdrop-filter:none}
 body[data-view]:not([data-view="chat"]) .content-view{padding-top:8px}
}

/* ── 8. a page whose files are still loading (loader.js) ─────────────────────── */
.content-view[data-loading]{position:relative}
.content-view[data-loading]>:not(.view-heading):not(.hs-masthead):not(.auxi-page-loading){visibility:hidden}
.content-view[data-loading]:before{content:"Loading…";position:absolute;top:28px;left:38px;font-size:14px;color:var(--muted)}

/* ── 9. help for the page you are on (help.js) ───────────────────────────────── */
#help-dialog #help-purpose{margin:10px 0 18px;font-size:14px;line-height:1.55;color:var(--ink)}
#help-dialog .help-keys-title{margin:0 0 4px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
#help-dialog .shortcut-row{align-items:center;gap:16px;font-size:13px}
#help-dialog .shortcut-row kbd{flex:none}
#help-dialog #help-done{margin-top:18px}

/* ══ auxi brand layer (2026-09-28) ═══════════════════════════════════════════════
   Lexend, the auxi greens and one set of radii, shadows and motion for every page.
   Restyles only: no ids, classes or behaviour change. Colours come from the tokens in
   app.css (:root and :root[data-theme="dark"]); the sidebar is the one place that
   redefines them, because it is dark green in both appearances. */
:root{--r-sm:8px;--r-md:12px;--r-lg:16px;--control-radius:8px;--ease:cubic-bezier(.2,.7,.2,1);--focus:var(--green)}

/* ── type: Lexend is wide and tall, so weights and tracking come down a notch ── */
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,textarea,select{font-family:inherit}
:where(h1,h2,h3,h4,h5,h6){font-weight:600;letter-spacing:-.015em}
:where(strong,b,th){font-weight:600}
:where(code,pre,kbd,samp,.log-raw,.vds-key,.mfa-codes){font-family:var(--mono)}
:where(td,th,.dash-tile>b,.summary-tile strong,.brief-stat strong,.diagnostic-metric strong){font-variant-numeric:tabular-nums}
::selection{background:color-mix(in srgb,var(--teal) 32%,transparent)}
a{color:var(--green);text-underline-offset:2px;text-decoration-thickness:1px}
*{scrollbar-color:color-mix(in srgb,var(--muted) 38%,transparent) transparent}

/* ── the sidebar: auxi dark green, in both appearances ─────────────────────── */
.sidebar{
 --ink:#eaf5f0;--muted:#a5c4b8;--hover:rgb(255 255 255/.07);--subtle:rgb(255 255 255/.06);--panel:rgb(255 255 255/.08);
 --border:rgb(255 255 255/.13);--line-soft:rgb(255 255 255/.09);--accent:rgb(27 197 163/.17);--accent-ink:#fff;--green:#1bc5a3;
 --danger:#ffc4bc;--danger-bg:rgb(255 120 104/.2);
 color:var(--ink);background:linear-gradient(180deg,#003922 0%,#003320 55%,#002c1b 100%);border-right:0}
:root[data-theme="dark"] .sidebar{background:linear-gradient(180deg,#05241a 0%,#041c14 100%);border-right:1px solid rgb(255 255 255/.06)}
.sidebar-brand{padding:0 8px}
.sidebar .brand span{font-size:16px;font-weight:600;letter-spacing:-.01em;color:#fff}
.sidebar .auxi-logo{box-shadow:0 0 0 1px rgb(255 255 255/.14)}
.sidebar .icon-button{color:var(--muted)}
.sidebar .icon-button:not(:disabled):hover{color:#fff;background:var(--hover)}
#workspace .new-chat{min-height:42px;border-radius:var(--r-sm);background:var(--teal);border-color:var(--teal);color:#00291a;font-weight:600;box-shadow:none}
#workspace .new-chat:not(:disabled):hover{background:#3ad3b4;border-color:#3ad3b4;color:#00291a}
#workspace .new-chat>span{font-weight:500}
.sidebar .nav-group-title{color:var(--muted);font-weight:600;letter-spacing:.1em;font-size:11px}
.task-nav .nav-group button{border-radius:var(--r-sm);font-weight:450;color:var(--muted);transition:background-color .14s var(--ease),color .14s var(--ease)}
.task-nav .nav-group button:not(:disabled):hover{background:var(--hover);color:#fff;border-color:transparent}
.task-nav .nav-group button[aria-current="page"]{background:var(--accent);color:#fff;font-weight:550;box-shadow:inset 3px 0 0 var(--teal)}
.task-nav button[aria-current="page"]::after{display:none}
.task-nav button[aria-current="page"] .nav-icon{color:var(--teal)}
.task-nav .nav-group button:focus-visible{outline:2px solid var(--teal);outline-offset:-2px}
.sidebar .history-search{background:rgb(255 255 255/.07);border-color:transparent;color:var(--ink);box-shadow:none}
.sidebar .history-search:hover{border-color:var(--border)}
.sidebar .history-search::placeholder{color:var(--muted)}
.sidebar .history button{color:var(--ink);font-weight:400}
.sidebar .history button:hover{background:var(--hover)}
.sidebar .history button[aria-current="true"]{background:var(--panel);border-color:transparent;font-weight:550}
.sidebar .history-note,.sidebar #history-count{color:var(--muted)}
.sidebar-bottom{border-top-color:var(--border)}
.sidebar .avatar{background:rgb(27 197 163/.2);color:#fff;font-weight:600}
.sidebar .account-row strong{color:#fff;font-weight:550}
.sidebar small{color:var(--muted)}
.sidebar-scroll{scrollbar-color:rgb(255 255 255/.18) transparent}
.sidebar :focus-visible{outline-color:var(--teal)}

/* ── the top bar and page headers ──────────────────────────────────────────── */
.workspace-header{border-bottom-color:var(--line-soft);background:color-mix(in srgb,var(--canvas) 88%,transparent)}
.workspace-header .page-heading h1{font-weight:600;letter-spacing:-.015em}
.workspace-header .icon-button{border-radius:var(--r-sm);color:var(--muted)}
.content-view>.view-heading{border-bottom-color:var(--line-soft)}
.content-view>.view-heading h2{font-size:25px;font-weight:600;letter-spacing:-.025em;line-height:1.2}
.content-view>.view-heading p{font-size:13.5px;line-height:1.55}
.main-panel{background:var(--canvas)}

/* ── buttons: primary / secondary / quiet / danger ─────────────────────────── */
button{border-radius:var(--control-radius);font-weight:550;letter-spacing:0}
.content-view button:where(:not(.icon-button):not(.client-card):not(.client-report-row):not([role="tab"]):not(.logs-chip-x):not(.row-menu-item)),
.message-tools button,#action-dialog button,.workspace-header button.quiet{font-weight:550}
button:not(:disabled){transition:background-color .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
button.primary{box-shadow:0 1px 2px color-mix(in srgb,var(--brand) 22%,transparent);font-weight:600}
button.primary:not(:disabled):hover{background:color-mix(in srgb,var(--green) 80%,#000);border-color:color-mix(in srgb,var(--green) 80%,#000);box-shadow:0 2px 8px color-mix(in srgb,var(--brand) 22%,transparent);filter:none}
:root[data-theme="dark"] button.primary:not(:disabled):hover{background:color-mix(in srgb,var(--green) 84%,#fff);border-color:color-mix(in srgb,var(--green) 84%,#fff)}
button.primary:not(:disabled):active{transform:translateY(1px)}
button:disabled{opacity:.48}
.ops-refresh{border-radius:var(--control-radius);font-weight:550}
.seg{border-radius:10px}
.seg button{border-radius:7px;font-weight:500}
.seg button[aria-selected="true"],#workspace .seg button[aria-pressed="true"]{background:var(--panel);color:var(--ink);font-weight:600;box-shadow:0 1px 2px color-mix(in srgb,var(--brand) 14%,transparent),0 0 0 1px var(--line-soft)}

/* ── fields ─────────────────────────────────────────────────────────────────── */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),textarea,select:not([multiple]){border-radius:var(--control-radius);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
input:not([type="checkbox"]):not([type="radio"]):focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--green)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--green)}
::file-selector-button{margin-right:10px;padding:5px 11px;border:1px solid var(--border);border-radius:6px;background:var(--subtle);color:var(--ink);font:inherit;font-size:13px;font-weight:550;cursor:pointer}
::file-selector-button:hover{background:var(--hover)}
:focus-visible{outline-color:var(--focus)}

/* ── surfaces: one radius and shadow family ─────────────────────────────────── */
.settings-card,.dash-card,.dash-details,.report-builder,.diagnostic-form,.status-card,.notification-toolbar,.usage-panel,.vds-signin,.client-plan,.client-workspace-hero,.client-notes-panel,.answer-card,.brief-item{border-color:var(--line-soft);border-radius:var(--r-md)}
.settings-card,.dash-card,.report-builder,.diagnostic-form,.status-card,.usage-panel,.client-plan,.client-workspace-hero,.client-directory-toolbar,.view-toolbar{box-shadow:var(--shadow-sm)}
.dash-tile,.summary-tile,.dash-lead-tile,.brief-stat,.diagnostic-metric,.vendor-summary>*{border-color:var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.dash-tile>span,.summary-tile span,.dash-lead-label{font-weight:500}
.dash-tile>b,.summary-tile strong,.brief-stat strong,.diagnostic-metric strong,.dash-lead-tile>b{font-weight:600;letter-spacing:-.025em}
.client-card{border-radius:var(--r-md)}
.client-card:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)}
.run-row{border-color:var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-sm)}
.run-row:hover{background:var(--panel);border-color:color-mix(in srgb,var(--green) 35%,var(--border));box-shadow:var(--shadow-card)}
.status-card::after,.client-directory-hero:after,.client-combined-summary:after{display:none}
.client-directory-hero{background:var(--panel);box-shadow:var(--shadow-sm)}

/* ── tables: quiet header, a hover you can follow, numbers that line up ────── */
.people-table th,.usage-sort,.renewal-table th,.lib-head,.client-people th,.client-roster-table th,#users-list:not(.ad-people-table) .user-head{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.cmp-table thead th{font-weight:600}
/* Renewals' sortable headers are header labels that happen to be buttons, not a row of
   boxed buttons (the shared button scale above used to give them a border). */
.renewal-table th:has(>.renewal-sort){padding:0}
#workspace .renewal-table th .renewal-sort{min-height:38px;padding:9px 12px;border:0;border-radius:0;background:none;box-shadow:none;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#workspace .renewal-table th .renewal-sort:not(:disabled):hover,#workspace .renewal-table th .renewal-sort.is-active{color:var(--ink);background:none}
.renewal-table,.lib-table,.usage-table-wrap,#users-list:not(.ad-people-table).user-table{border-color:var(--line-soft);box-shadow:var(--shadow-sm)}
.people-table tbody tr:hover,.usage-table tbody tr:hover,.cmp-table tbody tr:hover,.client-people tbody tr:hover,.client-roster-table tbody tr:hover,.renewal-row:hover td,#workspace .lib-row:hover{background:color-mix(in srgb,var(--accent) 55%,var(--panel))}
.bubble th{background:var(--subtle);font-size:12px;font-weight:600;text-align:left}
.bubble td,.bubble th{border-color:var(--line-soft);font-variant-numeric:tabular-nums}

/* Lexend runs wider than Segoe UI: the support filters keep their labels whole. */
@media(min-width:761px){#support-view .si-filterset select{font-size:12.5px;padding-left:9px}}
.sidebar .history-note{font-size:11.5px}
/* A source line under a list is a sentence, not a timestamp: it wraps on a phone
   (the Reports one used to push the page 190px sideways). */
p.ops-updated{white-space:normal}
@media(max-width:760px){
 .content-view>.view-heading>:not(:first-child){max-width:100%;flex-wrap:wrap}
 .view-actions .ops-updated{white-space:normal;flex:1 1 0;min-width:0}
 .sg-filter-field{flex-wrap:wrap}
 #workspace .sg-seg button{padding-inline:9px}
}

/* ── chips, pills and badges ────────────────────────────────────────────────── */
.pill,.chip,.v-chip,.client-pill,.renewal-pill,.lib-pill,.dash-status,.renewal-health-pill,.vendor-pill,.notification-plan-pill,.source-chip,.logs-chip,.status-data,.status-attention-state{font-weight:550;letter-spacing:.005em}

/* ── empty states ───────────────────────────────────────────────────────────── */
.empty-state,.client-directory-empty,.status-unavailable,.usage-empty{background:var(--panel-soft);border-color:var(--border);border-radius:var(--r-lg)}
.empty-state h3,.client-directory-empty h3{font-weight:600;letter-spacing:-.02em}

/* ── dialogs, menus and toasts ──────────────────────────────────────────────── */
dialog{border-color:var(--line-soft);border-radius:var(--r-lg);box-shadow:0 24px 70px rgb(0 30 18/.24)}
dialog::backdrop{background:rgb(0 22 13/.42);backdrop-filter:blur(3px)}
.dialog-heading h2,.action-dialog h2{font-weight:600;letter-spacing:-.02em}
.action-symbol{border-radius:var(--r-md)}
.row-menu-list,.answer-menu-items{border-color:var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.toast{background:var(--brand);color:#f1fbf7;border-color:transparent;border-radius:var(--r-sm);font-weight:500;box-shadow:0 12px 36px rgb(0 30 18/.28)}
:root[data-theme="dark"] .toast{background:#1d3029;color:var(--ink);border-color:var(--border)}

/* ── conversations ──────────────────────────────────────────────────────────── */
.welcome h2{font-size:clamp(28px,3vw,36px);font-weight:600;letter-spacing:-.035em;color:var(--ink)}
.welcome>p{font-size:14px;max-width:500px}
.suggestions button{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start}
.welcome-logo{box-shadow:0 8px 24px rgb(0 57 34/.18)}
.suggestions button{border-color:var(--line-soft);border-radius:var(--r-md);box-shadow:var(--shadow-sm);transition:border-color .15s var(--ease),box-shadow .15s var(--ease),transform .15s var(--ease)}
.suggestions button:not(:disabled):hover{background:var(--panel);border-color:color-mix(in srgb,var(--green) 40%,var(--border));box-shadow:var(--shadow-card);transform:translateY(-1px)}
.suggestions .task-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;background:var(--accent);color:var(--green);font-size:18px}
.suggestions strong{font-weight:600}
.suggestions .card-arrow{color:var(--muted);transition:transform .15s var(--ease),color .15s var(--ease)}
.suggestions button:hover .card-arrow{color:var(--green);transform:translate(1px,-1px)}
.bubble{border-color:var(--line-soft);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);font-size:14.5px}
.user .bubble{background:var(--green);color:#fff;box-shadow:none;border-radius:var(--r-lg) var(--r-lg) 4px var(--r-lg)}
:root[data-theme="dark"] .user .bubble{background:#1c4a3c;color:#effbf6}
.bubble pre,.bubble code{font-family:var(--mono);font-size:12.5px}
.bubble pre{border:1px solid var(--line-soft)}
.speaker{font-weight:500}
.composer{border-color:var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-card);transition:border-color .15s var(--ease),box-shadow .15s var(--ease)}
.composer:focus-within{border-color:var(--green);outline:2px solid var(--green);outline-offset:0}
.composer button{border-radius:10px}
.latest{background:var(--panel);border-color:var(--line-soft)}

/* ── sign in ────────────────────────────────────────────────────────────────── */
.login-shell{background:radial-gradient(900px 460px at 50% -8%,color-mix(in srgb,var(--teal) 16%,transparent),transparent 62%),var(--canvas)}
.login-card{border-color:var(--line-soft);border-radius:20px;box-shadow:0 1px 2px rgb(0 57 34/.05),0 24px 64px rgb(0 57 34/.1)}
.login-brand{font-weight:600;letter-spacing:-.01em}
.login-card h1{font-weight:600;letter-spacing:-.035em}
.login-card label{font-weight:550}

/* ── motion: short and optional ─────────────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
 .client-card:hover,.suggestions button:hover{transform:none}
}
/* Evidence and source chips never run past the answer on a phone: a flex button ignores
   text-overflow, so the chip is an inline block that shrinks and ends in an ellipsis. */
.answer-sources{min-width:0;max-width:100%}
.answer-sources>.source-chip{display:inline-block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle}

/* ── 10. QA 2026-10-01: skeletons, motion, sticky heads, focus, scrollbars ──── */
/* The 2026-09-23 system unified type, buttons and surfaces; this pass unifies the
   STATES between them — how a page loads, how a view arrives, how a long table
   scrolls, where the keyboard is. Values and additive selectors only. */

/* Loading: a page skeleton instead of a bare sentence. The sentence stays for
   assistive technology and as the fallback text; sighted users see three calm
   shimmer bars where the content is about to be. */
.content-view[data-loading]:before{content:"Loading…";position:absolute;top:28px;left:38px;font-size:14px;color:var(--muted)}
.content-view[data-loading]:after{content:"";position:absolute;top:64px;left:38px;right:38px;height:148px;border-radius:var(--r-md);
 background:
  linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 4%,transparent),transparent) 0 0/200% 100% no-repeat,
  repeating-linear-gradient(var(--panel-soft) 0 36px,transparent 36px 52px);
 animation:ui-shimmer 1.3s linear infinite}
@keyframes ui-shimmer{from{background-position:-200% 0,0 0}to{background-position:200% 0,0 0}}

/* Arriving: a view fades up 4px when it is shown. The global reduced-motion rule
   above zeroes the duration for people who asked for stillness. */
.content-view:not([hidden]){animation:ui-view-in .18s var(--ease) both}
@keyframes ui-view-in{from{opacity:.82;transform:translateY(2px)}to{opacity:1;transform:none}}
dialog[open]{animation:ui-dialog-in .16s var(--ease)}
@keyframes ui-dialog-in{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}

/* Long tables: the header line holds while the rows scroll, and numbers line up.
   Scoped to the scroll wraps so page scroll never pins a header mid-screen. */
.usage-table-wrap thead th,.renewal-table thead th,.lib-table thead th,
.people-table thead th,.client-roster-table thead th,.cmp-table thead th{
 position:sticky;top:0;z-index:1;background:var(--panel)}
.people-table td,.usage-table td,.renewal-table td,.lib-table td,.cmp-table td,
.client-roster-table td,.client-people td{font-variant-numeric:tabular-nums}
/* A whisper of banding so a wide row can be followed without the hover. */
:is(.usage-table,.renewal-table,.lib-table,.cmp-table) tbody tr:nth-child(even):not(:hover)>td{
 background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
/* Phone tables keep momentum and a thin scrollbar instead of a fat grey one. */
.usage-table-wrap,.bubble table{-webkit-overflow-scrolling:touch}

/* Scrollbars in the site's own ink, both engines, both themes. Chrome and Edge
   ignore ::-webkit-scrollbar on any element that also sets the standard
   scrollbar-width / scrollbar-color - and then draw the Windows bar with arrow
   buttons and a heavy grey thumb. So where the ::-webkit-scrollbar hook exists the
   standard properties are reset and the slim bar below is drawn: no arrows, a
   rounded thumb that darkens on hover. Firefox (no such hook) keeps its thin bar.
   A strip that hides its bar (scrollbar-width:none) hides the webkit one too. */
#workspace *{scrollbar-color:color-mix(in srgb,var(--muted) 42%,transparent) transparent}
@supports selector(::-webkit-scrollbar){
 *{scrollbar-width:auto!important;scrollbar-color:auto!important}
 ::-webkit-scrollbar{width:10px;height:10px}
 ::-webkit-scrollbar-track,::-webkit-scrollbar-corner{background:transparent}
 ::-webkit-scrollbar-button{display:none;width:0;height:0}
 ::-webkit-scrollbar-thumb{min-height:36px;background-color:color-mix(in srgb,var(--muted) 34%,transparent);border:3px solid transparent;border-radius:999px;background-clip:padding-box}
 ::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--muted) 60%,transparent)}
 ::-webkit-scrollbar-thumb:active{background-color:color-mix(in srgb,var(--muted) 72%,transparent)}
 .sidebar-scroll::-webkit-scrollbar-thumb{background-color:rgb(255 255 255/.2)}
 .sidebar-scroll::-webkit-scrollbar-thumb:hover{background-color:rgb(255 255 255/.36)}
 .client-plan-tabs::-webkit-scrollbar,.sg-section-tabs::-webkit-scrollbar,.st-tabs::-webkit-scrollbar,.si-stats::-webkit-scrollbar,.si-tabs::-webkit-scrollbar{display:none}
}

/* The keyboard always lands somewhere visible: one ring, everywhere, only for
   keyboard focus - pointer clicks keep their quiet styles. */
#workspace :is(button,a,select,input,textarea,summary,[tabindex]):focus-visible{
 outline:2px solid var(--green);outline-offset:2px}
#workspace .messages:focus-visible,#workspace .history button:focus-visible{outline-offset:-2px}

/* Chips and pills answer the pointer like the buttons do. */
:is(.pill,.chip,.source-chip,.logs-chip,.v-chip){transition:background .12s var(--ease),border-color .12s var(--ease)}

/* ── recent conversations: grouped by day, timed on the right (2026-10-01) ──── */
:is(.sidebar,#conversation-library) .history-group{margin:12px 10px 5px;font-size:11px;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
:is(.sidebar,#conversation-library) .history>.history-group:first-child{margin-top:3px}
:is(.sidebar,#conversation-library) .history button.has-when{display:flex;align-items:baseline;gap:8px;white-space:normal}
:is(.sidebar,#conversation-library) .history .history-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.sidebar,#conversation-library) .history .history-when{flex-shrink:0;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
:is(.sidebar,#conversation-library) .history button[aria-current="true"]{box-shadow:inset 3px 0 0 var(--teal)}
:is(.sidebar,#conversation-library) .history button[aria-current="true"] .history-when{color:var(--ink)}

/* Workspace refresh, October 2026. Keep the existing DOM, routes and page logic. */
:root,:root[data-theme="light"]{
 --bg:#f4f7fb;--canvas:#f4f7fb;--panel:#fff;--panel-soft:#f8fafc;--sidebar:#102832;
 --ink:#172b36;--muted:#526574;--border:#d9e3e9;--subtle:#edf3f6;--hover:#e7eff3;
 --green:#11776e;--accent:#e1f3ef;--accent-ink:#095e56;--line-soft:#e2eaf0;
 --shadow-sm:0 2px 8px #17394c06,0 8px 24px #17394c05;--shadow-card:0 4px 20px #17394c08;
 --control-h:40px;--control-radius:10px;
 font-family:"Lexend","Segoe UI",Arial,sans-serif;
}
:root[data-theme="dark"]{
 --bg:#0f1b24;--canvas:#0f1b24;--panel:#172834;--panel-soft:#1b2e3b;--sidebar:#0a1922;
 --ink:#e5eef3;--muted:#adbec9;--border:#344c5b;--subtle:#203542;--hover:#294452;
 --green:#88dfca;--accent:#23473f;--accent-ink:#a6efdb;--line-soft:#2a414f;
 --shadow-sm:0 2px 8px #0002;--shadow-card:0 4px 20px #0002;
}
*{scrollbar-width:thin;scrollbar-color:#91a6b6 transparent}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#91a6b6;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-thumb:hover{background:#607e91}
:root[data-theme="dark"] *{scrollbar-color:#526d7e transparent}
#workspace{grid-template-columns:248px minmax(0,1fr)}
#workspace .sidebar{
 --ink:#e9f3f6;--muted:#b1c6cf;--panel:#17323f;--border:#304b58;--line-soft:#304b58;
 --hover:#203e4c;--accent:#214c4d;--accent-ink:#b1f1df;--green:#9ce7d1;
 background:linear-gradient(165deg,#163440,#0c202b 75%);padding:22px 13px 12px;
 border-right:0;color:var(--ink);
}
#workspace .sidebar-brand{padding:0 10px;margin-bottom:20px}
#workspace .sidebar-brand .brand span{font-size:17px;letter-spacing:-.5px}
#workspace .sidebar-brand .auxi-logo{width:34px;height:34px;border-radius:10px}
#workspace .new-chat{min-height:43px;background:#a8ebd7;color:#123e38;border:0;border-radius:11px;box-shadow:none;font-weight:650;margin-bottom:12px}
#workspace .new-chat:hover{background:#c2f5e5}
#workspace .sidebar-scroll{padding-right:3px;gap:0}
#workspace .task-nav{display:grid;gap:17px;margin:2px 0 12px}
#workspace .nav-group{gap:2px}
#workspace .nav-group-title{font-size:11px;letter-spacing:1.35px;font-weight:650;padding:2px 12px 7px;color:#a8c2cd}
#workspace .task-nav button{min-height:37px;padding:8px 12px;font-size:12.5px;font-weight:500;color:#bdd0d9;border-radius:9px;gap:10px;line-height:1.35}
#workspace .task-nav button:hover{background:#254653;color:#fff}
#workspace .task-nav button[aria-current="page"]{background:#244d50;color:#c2f6e7;box-shadow:inset 3px 0 #99e5cb;font-weight:650}
#workspace .task-nav button[aria-current="page"]::after{display:none}
#workspace .nav-icon{width:18px;height:18px;flex-basis:18px}
#workspace .sidebar-bottom{margin-top:8px;padding-top:10px;border-top:1px solid #304b58}
#workspace .account-row{padding:7px 5px}
#workspace .account-row small{font-size:11px}
#workspace .avatar{background:#284d58;color:#c3f6e7}
.history-launch{display:flex;justify-content:space-between;gap:8px;width:100%;background:transparent;border:0;color:#bfd0d9;padding:9px 10px;border-radius:9px;text-align:left;font-size:12px;min-height:36px}
.history-launch:hover{background:#254653;color:#fff}
#workspace .main-panel{background:radial-gradient(ellipse at 100% 0,color-mix(in srgb,var(--green) 5%,transparent),transparent 40%),var(--canvas)}
.workspace-location{font-size:11px;font-weight:650;letter-spacing:.04em;color:var(--muted);margin-right:auto}
body[data-view="chat"] .workspace-location{display:none}
@media(min-width:761px){
 #workspace .workspace-header{height:52px;padding-inline:30px;background:transparent;border-bottom:1px solid var(--line-soft);backdrop-filter:none}
 #workspace .content-view{max-width:1680px;margin-inline:auto;padding:25px 30px 40px}
 #workspace .content-view>.view-heading{margin-bottom:20px;padding-bottom:15px}
 #workspace .content-view>.view-heading h2{font-size:28px;letter-spacing:-.8px;font-weight:650}
 #workspace .chat-shell{max-width:1180px;padding-inline:36px}
 #workspace .welcome{max-width:760px;padding-top:clamp(24px,5vh,48px)}
 #workspace .welcome h2{font-size:34px;font-weight:500;letter-spacing:-1.1px}
 #workspace .suggestions{gap:14px}
 #workspace .suggestions button{min-height:100px;padding:18px 34px 18px 18px;border-radius:10px;box-shadow:none}
 #workspace .suggestions strong{font-size:13px;font-weight:550}
}
#workspace :is(.settings-card,.diagnostic-form,.diagnostic-metric,.brief-item,.status-card,.usage-panel,.client-license-overview,.client-notes-panel,.client-owner-panel,.si-panel,.dash-card){
 border-color:var(--line-soft);border-radius:16px;box-shadow:var(--shadow-sm);
}
#workspace .client-card{border:1px solid var(--line-soft);border-radius:16px;background:var(--panel);box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s,transform .15s}
#workspace .client-card:hover{border-color:var(--green);box-shadow:var(--shadow-card);transform:translateY(-2px)}
#workspace .client-grid{gap:16px}
#workspace .client-card-top{padding-bottom:16px}
#workspace .client-card-stats{background:var(--panel-soft);border-radius:11px;padding:13px}
#workspace .client-card-footer{padding-top:14px}
#workspace .composer{border-radius:18px;padding:10px;box-shadow:0 5px 30px #17394c0b}
#workspace .composer-note{padding-bottom:16px;font-size:11px}
#workspace :is(.view-toolbar,.report-library-bar,.client-directory-toolbar,.notification-controls){gap:10px}
#workspace :is(input[type="search"],input[type="email"],input[type="text"],select){min-height:40px}
#workspace .empty-state{background:var(--panel);border:1px solid var(--line-soft);padding:36px 24px;border-radius:16px}
#workspace .content-view :is(table){border-collapse:collapse}
#workspace .content-view th{background:var(--panel-soft)}
#workspace .content-view tbody tr:hover{background:var(--panel-soft)}
#workspace .content-view td{border-bottom-color:var(--line-soft)}
#workspace .view-heading p{max-width:78ch}
.workspace-export{float:right;position:relative;z-index:4;margin:0 0 8px 12px}
.workspace-export summary{list-style:none;cursor:pointer;min-height:38px;padding:10px 15px;border:1px solid var(--border);border-radius:10px;background:var(--panel);font-size:13px;font-weight:600;color:var(--ink)}
.workspace-export summary::-webkit-details-marker{display:none}
.workspace-export summary:after{content:" \2193";color:var(--muted);margin-left:8px}
.workspace-export summary:hover{background:var(--hover)}
.workspace-export summary:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.workspace-export-menu{position:absolute;right:0;top:calc(100% + 7px);width:235px;padding:7px;background:var(--panel);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow-card)}
.workspace-export-menu button{display:block;width:100%;border:0;text-align:left;background:transparent}
.workspace-export-menu button:hover{background:var(--hover)}
.workspace-export-menu small{display:block;padding:8px 10px;font-size:11px;color:var(--muted);line-height:1.5}
.usage-export-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.conversation-library{width:min(570px,calc(100% - 28px));max-height:min(680px,85dvh);padding:24px;color:var(--ink);background:var(--panel);border:1px solid var(--border);border-radius:20px;box-shadow:0 20px 80px #0003;overflow:auto}
.conversation-library::backdrop{background:#0e253980;backdrop-filter:blur(3px)}
.library-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:24px}
.library-head h2{margin:5px 0 0;font-size:25px;letter-spacing:-.7px}
.library-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--muted)}
.conversation-library .history-heading{display:flex!important;margin:0 0 12px}
.conversation-library .history-search{display:block!important;background:var(--panel-soft);border:1px solid var(--border);min-height:44px;margin-bottom:14px}
.conversation-library .history{display:flex!important;gap:5px}
.conversation-library .history button{min-height:45px;background:var(--panel-soft);padding:12px 14px;white-space:normal;overflow-wrap:anywhere}
.conversation-library .history button[aria-current="true"]{background:var(--accent);border-color:var(--green)}
.conversation-library .history-note{display:block!important;margin:18px 0 0}
.login-shell{background:radial-gradient(ellipse at 10% 20%,color-mix(in srgb,var(--green) 8%,transparent),transparent 55%),var(--canvas)}
.login-card{padding:32px;border:1px solid var(--line-soft);border-radius:22px;background:var(--panel);box-shadow:var(--shadow-card);max-width:420px;width:100%}
.login-card h1{letter-spacing:-1px;font-weight:650}
.login-card .login-brand{margin-bottom:26px}
.login-main{padding:32px}
@media(max-height:780px) and (min-width:761px){
 #workspace .sidebar{padding-top:15px}
 #workspace .sidebar-brand{margin-bottom:12px}
 #workspace .task-nav{gap:12px}
 #workspace .task-nav button{min-height:34px;padding-block:7px}
 #workspace .welcome{padding-top:24px}
}
@media(min-width:1500px){#workspace .client-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1100px) and (min-width:761px){#workspace{grid-template-columns:225px minmax(0,1fr)}#workspace .content-view{padding-inline:24px}}
@media(max-width:760px){
 #workspace{display:flex}
 #workspace .sidebar{width:min(300px,87vw);padding:18px 12px 12px}
 #workspace .task-nav button{min-height:44px;font-size:13px}
 #workspace .task-nav{gap:12px}
 #workspace .workspace-header{height:61px;padding-inline:10px}
 .workspace-location{display:none}
 #workspace .content-view{padding:18px 16px 30px}
 #workspace .content-view>.view-heading{margin-bottom:16px}
 #workspace .chat-shell{padding-inline:16px}
 #workspace .suggestions button{border-radius:13px;min-height:82px}
 #workspace .welcome{padding-top:16px}
 #workspace .welcome h2{font-size:28px;font-weight:500}
 #workspace .new-chat{min-height:44px}
 #workspace .client-grid{grid-template-columns:minmax(0,1fr)}
 #workspace .composer-note{font-size:11px}
 .workspace-export{margin-left:8px}
 .workspace-export-menu{max-width:calc(100vw - 32px)}
 .conversation-library{padding:20px;border-radius:17px}
 .login-main{padding:20px}.login-card{padding:25px}
 .usage-export-actions{width:100%;justify-content:flex-start}
 .usage-export-actions button{min-height:44px}
}
@media(prefers-reduced-motion:reduce){#workspace *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{
 @page{size:A4;margin:12mm}
 :root,:root[data-theme="dark"]{color-scheme:light;--canvas:#fff;--panel:#fff;--ink:#14252d;--muted:#445864;--border:#c8d2d8;--subtle:#f3f6f7;--line-soft:#d8e1e6;--green:#11776e}
 html,body{height:auto!important;overflow:visible!important;background:#fff!important}
 #workspace{display:block!important;height:auto!important;overflow:visible!important;background:#fff!important}
 #workspace .sidebar,#workspace .workspace-header,.workspace-export,.usage-export-actions,.nav-overlay,.toast,dialog{display:none!important}
 #workspace .main-panel,#workspace .content-view{display:block;height:auto!important;min-height:0!important;max-height:none!important;overflow:visible!important;width:100%!important;max-width:none!important;padding:0!important;background:#fff!important}
 #workspace .content-view[hidden],#workspace .chat-shell[hidden]{display:none!important}
 #workspace .content-view>.view-heading h2{display:block!important}
 #workspace .content-view>.view-heading{display:flex!important}
 #workspace .content-view :is(button,input,select,textarea,.report-builder,.ops-filterset,.si-toolbar,.view-toolbar,.client-directory-toolbar,.report-library-bar,.report-file-filters,.client-directory-controls){display:none!important}
 #workspace :is(.client-card,.run-row,.report-row,.notification-card){display:block!important;break-inside:avoid}
 #workspace [hidden]{display:none!important}
 #workspace :is(.client-card,.settings-card,.dash-card,.usage-panel){box-shadow:none!important}
 #workspace .content-view :is(.usage-table-wrap,.dash-table-wrap,.client-roster-table-wrap){overflow:visible!important}
 #workspace .content-view table{width:100%;font-size:11px}
 #workspace .content-view thead{display:table-header-group}
 #workspace .content-view tr{break-inside:avoid}
 #workspace .usage-person-link{display:inline!important;border:0!important;padding:0!important;color:var(--ink)}
 #workspace .content-view details:not([open])> :not(summary){display:block!important}
 #workspace .content-view:before{content:"auxi Ops · Workspace report";display:block;font-size:11px;color:#526574;margin-bottom:12px}
}

/* Final accessibility and phone density pass. */
@media(max-width:760px){
 #workspace .content-view>.view-heading{display:flex;flex-direction:column;align-items:stretch;gap:12px}
 #workspace .content-view>.view-heading>div:first-child{min-width:0;flex:0 1 auto}
 #workspace .content-view>.view-heading>:not(:first-child){margin:0;align-self:flex-start;max-width:100%;flex-wrap:wrap}
 #workspace #usage-view .usage-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 #workspace #usage-view .usage-kpis .dash-tile{padding:13px;min-height:112px}
 #workspace #usage-view .usage-kpis .dash-tile>b{font-size:23px;margin-top:8px}
 #workspace #usage-view .usage-kpis .dash-tile>em{font-size:11px;line-height:1.45}
 #workspace .usage-estimate-pill{max-width:145px;font-size:11px;line-height:1.45;padding:8px 10px}
 #workspace .account-tabs{display:flex;overflow:visible;gap:4px}
 #workspace .account-tabs button{flex:1 1 0;min-width:0;padding:10px 6px;font-size:12px;white-space:normal}
}
@media print{
 #workspace .content-view .client-card{display:block!important}
 #workspace .content-view button.usage-person-link,#workspace .content-view button.usage-sort{display:inline!important;min-height:0!important;border:0!important;padding:0!important;background:transparent!important;color:var(--ink)!important;box-shadow:none!important}
 #workspace .content-view button.usage-sort .usage-sort-mark{display:none!important}
 #workspace #usage-view .usage-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}
}

@media(max-width:760px){
 #workspace .icon-button{width:44px;height:44px;min-height:44px;padding:10px}
 #workspace .history-launch{min-height:44px}
}

@media print{
 #workspace .usage-toolbar{display:none!important}
 #workspace .content-view button.usage-history-row{display:grid!important;width:100%;min-height:0!important;padding:10px!important;border:0!important;background:transparent!important}
 #workspace .content-view th button{display:inline!important;min-height:0!important;padding:0!important;border:0!important;background:transparent!important;color:var(--ink)!important}
 #workspace .content-view .run-row{display:flex!important;break-inside:avoid}
}

/* Preserve orientation while a destination bundle arrives. */
.content-view[data-loading]{min-height:280px}
.content-view[data-loading]:has(>.view-heading):before{top:120px;left:38px;content:"Preparing this page…"}
.content-view[data-loading]:has(>.view-heading):after{top:156px}
@media(max-width:680px){.content-view[data-loading]:before,.content-view[data-loading]:after{left:20px;right:20px}.content-view[data-loading]:has(>.view-heading):before,.content-view[data-loading]:has(>.view-heading):after{left:20px;right:20px}}


/* Keep table labels and addresses readable; wide tables scroll within the reply. */
.bubble table{max-width:100%}
.bubble td,.bubble th{overflow-wrap:normal;word-break:normal}
.bubble table:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

.rename-icon,.help-touch-note{display:none}

/* Leave room to reach the last row above the floating assistant on every page. */
#workspace .content-view{padding-bottom:calc(88px + env(safe-area-inset-bottom));scroll-padding-bottom:100px}
@media(max-width:760px){
 #workspace .content-view :is(input,select,textarea):not([type=checkbox]):not([type=radio]),
 dialog :is(input,select,textarea):not([type=checkbox]):not([type=radio]){font-size:16px}
}

/* ── 7. the standard page header (2026-10-28 UX cleanup) ────────────────────── */
/* Every page: h2 title + one-line description on the left; on the right the secondary actions (outlined) and the
   freshness chip (auxiUi.freshness puts it before Refresh); tabs BELOW the header, never above the title; no uppercase
   eyebrow label above the title.
     <div class="view-heading">
       <div><h2>Stripe</h2><p>Invoices, payments and renewals, view-only.</p></div>
       <div class="view-actions"><button class="ops-refresh" type="button">Refresh</button></div>   (optional)
     </div>
     <div class="seg" role="tablist" aria-label="…">…</div>                                           (optional, right after the heading)
   A page's one main action is a filled button (class="primary") in .view-actions; Export-like actions are outlined. */
.content-view>.view-heading{align-items:center}
.content-view>.view-heading .view-actions,.hs-mast-actions{display:flex;align-items:center;flex-wrap:wrap;justify-content:flex-end;gap:8px 12px}
.view-heading :is([class*="eyebrow"],.lv-eyebrow):has(~h2),.hs-masthead :is([class*="eyebrow"]):has(~h2){display:none}
.view-heading+:is(.seg,.view-tabs,[role="tablist"]){margin:-6px 0 18px}
.view-heading>div:first-child>.ops-updated[data-fresh]{display:block;margin-top:5px;white-space:normal}
.view-heading .ops-updated[data-fresh]{align-self:center}
.ops-updated.is-stale,.ops-updated.is-error{font-weight:600}
.ops-updated-retry{display:inline;min-height:0!important;padding:0 2px!important;border:0;background:none;color:inherit;font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media(max-width:760px){.view-heading .ops-updated[data-fresh]{flex-basis:100%;white-space:normal}}

/* ── 8. one button hierarchy ────────────────────────────────────────────────── */
/* Filled (button.primary) = the page's one main action. Outlined = secondary (Refresh, Export, Filters): the default
   button, and always the style of a Refresh in a page header (polish adds .ops-refresh to it, with its icon).
   Plain text (button.quiet) = minor or in-row actions. */
.content-view>.view-heading :is(button,.button):not(.primary):not(.danger):not(.quiet):not(.icon-button):not([role="tab"]):not(.ops-updated-retry),
.hs-masthead button:not(.primary):not(.danger):not(.quiet):not(.icon-button){background:var(--panel);border:1px solid var(--border);color:var(--ink)}
.content-view>.view-heading button:not(.primary):not(.danger):not(.quiet):not(:disabled):hover{background:var(--hover)}

/* ── 9. stat cards and the friendly error box ───────────────────────────────── */
/* One number card for every page: label on top, big number, optional small line under it. The tone colours the number
   only (no coloured borders): is-danger, is-warning or is-success.
     <div class="ops-stats">
       <div class="ops-stat is-danger"><span class="ops-stat-label">Overdue</span><strong class="ops-stat-value">12</strong><small class="ops-stat-note">of 40 renewals</small></div>
     </div>
   JS: grid.append(auxiUi.stat('Overdue',12,{note:'of 40 renewals',tone:'danger'})). */
.ops-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:0 0 18px}
.ops-stat{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;padding:14px 16px;border:1px solid var(--line-soft,var(--border));border-radius:12px;background:var(--panel);box-shadow:none}
.ops-stat-label{font-size:var(--meta-size);line-height:1.35;color:var(--meta-ink)}
.ops-stat-value{font-size:28px;line-height:1.1;font-weight:650;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);overflow-wrap:anywhere}
.ops-stat-note{font-size:var(--meta-size);line-height:1.4;color:var(--meta-ink)}
.ops-stat.is-danger .ops-stat-value{color:var(--danger)}
.ops-stat.is-warning .ops-stat-value{color:var(--warning)}
.ops-stat.is-success .ops-stat-value{color:var(--green)}
@media(max-width:760px){.ops-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.ops-stat{padding:12px 14px}.ops-stat-value{font-size:24px}}
/* A section that could not load: never raw exception text. JS: host.replaceChildren(auxiUi.errorBox(error.message,{retry:load})).
     <div class="ops-error-box" role="alert"><strong>This section couldn't load.</strong><p>(plain-language reason, optional)</p><button class="ops-error-retry">Retry</button></div> */
.ops-error-box{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border));border-radius:12px;background:var(--panel);color:var(--ink)}
.ops-error-box strong{font-size:14px;font-weight:650}
.ops-error-box p{flex:1 1 220px;margin:0;font-size:13px;color:var(--muted)}
.ops-error-box .ops-error-retry{margin-left:auto;min-height:var(--control-h);padding:8px 15px;border:1px solid var(--border);border-radius:var(--control-radius);background:var(--panel);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.ops-error-box .ops-error-retry:not(:disabled):hover{background:var(--hover)}
@media(max-width:760px){.ops-error-box .ops-error-retry{min-height:44px}}


/* Export lives in the heading's .view-actions after Refresh (workspace-upgrade.js) and looks like it. */
.view-actions>.workspace-export{float:none;margin:0}
.view-actions>.workspace-export summary{display:inline-flex;align-items:center;min-height:var(--control-h);padding:8px 14px;border-radius:var(--control-radius);font-size:13px;line-height:1.2}
@media(max-width:760px){.view-actions>.workspace-export summary{min-height:44px}.view-actions>.workspace-export .workspace-export-menu{position:fixed;top:auto;left:16px;right:16px;width:auto;max-width:none;margin-top:7px}}
.ops-refresh[hidden]{display:none}