/* NGentik Console tokens (Figma "NGentik admin tokens", Light) and self-hosted IBM Plex (OFL, see console-fonts/OFL.txt). */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/console-fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(/console-fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(/console-fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(/console-fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/console-fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-display:swap;src:url(/console-fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/console-fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-display:swap;src:url(/console-fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(/console-fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-display:swap;src:url(/console-fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format("woff2");unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg-canvas:#f4f6f8;--bg-surface:#fff;--bg-subtle:#edf1f4;--bg-sidebar:#1f364a;--bg-sidebar-active:#2d4a62;--border-subtle:#dce3e9;--border-strong:#bcc7d1;
  --text-primary:#15232e;--text-secondary:#475866;--text-muted:#5b6b78;--text-sidebar:#b9cad8;--text-sidebar-active:#fff;--text-sidebar-muted:#8aa0b2;
  --brand-primary:#355976;--brand-primary-hover:#2b4a63;--brand-primary-soft:#e3efee;--brand-on-primary:#fff;--focus-ring:#3e7f7c;--accent-highlight:#90bd81;
  --status-live:#3b6e2e;--status-danger:#a52e25;--status-danger-soft:#fdecea;
  --font-sans:"IBM Plex Sans",system-ui,sans-serif;--font-mono:"IBM Plex Mono",ui-monospace,monospace;
  color-scheme:light;font:400 14px/22px var(--font-sans);color:var(--text-primary);background:var(--bg-canvas)}

/* Base elements shared by every admin page. Element selectors carry :where(:not([class*=cl-],[class*=cl-] *)) so they never
   reach Clerk's mounted components (sign-in, organization switcher, user button and their modals); specificity is unchanged. */
body{margin:0;padding:1rem}main{max-width:36rem;margin:2rem auto;background:var(--bg-surface);padding:clamp(1rem,4vw,2.5rem);border:1px solid var(--border-subtle);border-radius:16px;overflow-wrap:anywhere}
h1:where(:not([class*=cl-],[class*=cl-] *)){font-size:22px;line-height:30px;letter-spacing:-.3px;font-weight:600}h2:where(:not([class*=cl-],[class*=cl-] *)){font-size:16px;line-height:24px;font-weight:600}
label:where(:not([class*=cl-],[class*=cl-] *)){display:block;margin-top:1rem;margin-bottom:6px;font-weight:500}a:where(:not([class*=cl-],[class*=cl-] *)){color:var(--brand-primary)}code:where(:not([class*=cl-],[class*=cl-] *)){overflow-wrap:anywhere;font-family:var(--font-mono)}small:where(:not([class*=cl-],[class*=cl-] *)){display:block;color:var(--text-muted);font-size:12px;line-height:18px}
input:where(:not([class*=cl-],[class*=cl-] *)):not([type=hidden],[type=checkbox],[type=radio]),textarea:where(:not([class*=cl-],[class*=cl-] *)),select:where(:not([class*=cl-],[class*=cl-] *)){box-sizing:border-box;width:100%;max-width:100%;font:inherit;color:var(--text-primary);background:var(--bg-surface);padding:8px 12px;min-height:40px;border:1px solid var(--border-strong);border-radius:8px}
textarea:where(:not([class*=cl-],[class*=cl-] *)){resize:vertical}
button:where(:not([class*=cl-],[class*=cl-] *)){box-sizing:border-box;width:100%;margin-top:1.5rem;min-height:40px;padding:9px 16px;font:500 14px/22px var(--font-sans);color:var(--brand-on-primary);background:var(--brand-primary);border:1px solid transparent;border-radius:8px;cursor:pointer}
button:where(:not([class*=cl-],[class*=cl-] *)):hover{background:var(--brand-primary-hover)}
input:where(:not([class*=cl-],[class*=cl-] *)):focus-visible,textarea:where(:not([class*=cl-],[class*=cl-] *)):focus-visible,select:where(:not([class*=cl-],[class*=cl-] *)):focus-visible,button:where(:not([class*=cl-],[class*=cl-] *)):focus-visible,a:where(:not([class*=cl-],[class*=cl-] *)):focus-visible{outline:3px solid var(--focus-ring);outline-offset:0}
[role=alert]{border-left:4px solid var(--status-danger);padding:.6rem .8rem;background:var(--status-danger-soft);border-radius:4px}
.faq{max-width:68rem}.table-scroll{max-width:100%;overflow:auto}table:where(:not([class*=cl-],[class*=cl-] *)){width:100%;border-collapse:collapse;overflow-wrap:normal}
th:where(:not([class*=cl-],[class*=cl-] *)),td:where(:not([class*=cl-],[class*=cl-] *)){text-align:left;vertical-align:top;padding:.6rem;border-bottom:1px solid var(--border-subtle);overflow-wrap:break-word}td:where(:not([class*=cl-],[class*=cl-] *)):first-child{max-width:26rem}
.import-answer{white-space:pre-wrap}
.publication-source .answer{white-space:pre-wrap}.publication-source{border-bottom:1px solid var(--border-subtle);padding-block:.5rem}
/* The strict CSP blocks the inline display:none that Razor puts on an empty validation summary. */
.validation-summary-valid{display:none}
button+a:where(:not([class*=cl-],[class*=cl-] *)){display:inline-block;margin-top:1rem}@media (min-width:40rem){button:where(:not([class*=cl-],[class*=cl-] *)){width:auto;min-width:10rem}button+a:where(:not([class*=cl-],[class*=cl-] *)){margin-left:1rem}}
nav:where(:not([class*=cl-],[class*=cl-] *)){display:flex;flex-wrap:wrap;gap:.25rem .75rem;margin-block:1rem}.site-links{padding:0;list-style:none}.site-links li:where(:not([class*=cl-],[class*=cl-] *)){display:flex;flex-wrap:wrap;gap:.25rem 1rem;margin-bottom:.75rem}
label:where(:not([class*=cl-],[class*=cl-] *)):has(>input[type=checkbox]){display:flex;gap:10px;align-items:flex-start;font-weight:500}input:where(:not([class*=cl-],[class*=cl-] *))[type=checkbox]{margin:3px 0 0;width:16px;height:16px;flex-shrink:0;accent-color:var(--brand-primary)}
fieldset:where(:not([class*=cl-],[class*=cl-] *)){margin:1rem 0 0;padding:0 1rem 1rem;border:1px solid var(--border-subtle);border-radius:8px}legend:where(:not([class*=cl-],[class*=cl-] *)){padding:0 .4rem;font-weight:600}

/* Sign-in and first-run screens (Figma Console 01, 01b-01e): brand panel plus one card. */
body.auth{padding:0;min-height:100vh;display:flex}
.brand-panel{box-sizing:border-box;width:560px;flex-shrink:0;min-height:100vh;display:flex;flex-direction:column;gap:20px;padding:48px 56px;background:var(--bg-sidebar);color:var(--text-sidebar-active)}
.brand{display:flex;gap:10px;align-items:center}.brand strong:where(:not([class*=cl-],[class*=cl-] *)){display:block;font-size:16px;line-height:24px;font-weight:600}.brand small:where(:not([class*=cl-],[class*=cl-] *)){color:var(--text-sidebar)}
.logo-tile{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:8px;background:#fff}
.brand-spacer{flex:1}
.brand-title{margin:0;font-size:38px;line-height:46px;letter-spacing:-.5px;font-weight:600}
.brand-lead{margin:0;color:var(--text-sidebar)}
.brand-points{list-style:none;margin:0;padding:12px 0 0;display:flex;flex-direction:column;gap:16px}
.brand-points li:where(:not([class*=cl-],[class*=cl-] *)){display:flex;gap:12px;align-items:center}.brand-points li.pending span:where(:not([class*=cl-],[class*=cl-] *)){opacity:.55}
.point-icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:8px;background:var(--bg-sidebar-active)}
.brand-foot{margin:0;display:flex;gap:8px;align-items:center;font-size:12px;line-height:18px;color:var(--text-sidebar)}
.auth-main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:none;margin:0;padding:32px;background:none;border:0;border-radius:0;min-width:0}
.mobile-brand{display:none}
.card{box-sizing:border-box;width:440px;max-width:100%;display:flex;flex-direction:column;gap:20px;padding:40px;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:16px}
.card.wide{width:780px;gap:16px;padding:32px 36px}.card.medium{width:560px;gap:16px;padding:32px 36px}
.card h1:where(:not([class*=cl-],[class*=cl-] *)),.card p:where(:not([class*=cl-],[class*=cl-] *)){margin:0}.card .lead{color:var(--text-secondary)}.card .intro{display:flex;flex-direction:column;gap:6px}
.card form:where(:not([class*=cl-],[class*=cl-] *)){display:flex;flex-direction:column;gap:20px}.card label:where(:not([class*=cl-],[class*=cl-] *)){margin:0 0 -14px}.card button:where(:not([class*=cl-],[class*=cl-] *)){margin:0}
.overline{display:flex;gap:8px;align-items:center;margin:0;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.72px;text-transform:uppercase;color:var(--brand-primary)}
.overline i{display:block;width:8px;height:4px;border-radius:2px;background:var(--border-strong)}.overline i.done{background:var(--brand-primary)}.overline i.current{width:20px;background:var(--brand-primary)}
.links{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.links a:where(:not([class*=cl-],[class*=cl-] *)),.ghost{padding:9px 16px;font-weight:500;text-decoration:none;border-radius:8px}.links a:where(:not([class*=cl-],[class*=cl-] *)):hover,.ghost:hover{background:var(--bg-subtle)}
.divider{height:1px;margin:0;border:0;background:var(--border-subtle)}
.note{display:flex;gap:8px;align-items:flex-start;margin:0;font-size:12px;line-height:18px;color:var(--text-muted)}.note svg:where(:not([class*=cl-],[class*=cl-] *)){flex-shrink:0;margin-top:2px}
.alert{display:flex;gap:10px;padding:12px 16px;border:0;border-left:4px solid var(--status-danger);border-radius:8px;background:var(--status-danger-soft)}.alert strong:where(:not([class*=cl-],[class*=cl-] *)){display:block;font-weight:600}.alert span:where(:not([class*=cl-],[class*=cl-] *)){display:block;font-size:12px;line-height:18px;color:var(--text-secondary)}
/* One-time code (Figma "Code input"): one plain field with spaced monospace digits, like GitHub and Microsoft sign-in. */
input:where(:not([class*=cl-],[class*=cl-] *)).code-input{height:56px;padding:0 16px;font:500 22px/1 var(--font-mono);letter-spacing:.3em}
input:where(:not([class*=cl-],[class*=cl-] *)).code-input.error{border-color:var(--status-danger);border-width:2px}
/* Authenticator setup (Figma "Authenticator setup v2"): QR first on a computer, setup key first on a phone. */
.setup-block{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.qr-box{display:flex;padding:16px;border:1px solid var(--border-subtle);border-radius:12px;background:#fff}.qr{display:block;width:196px;height:196px}
.disclosure{align-self:stretch}.disclosure summary{display:inline-flex;gap:6px;align-items:center;padding:4px 0;font-weight:500;color:var(--brand-primary);cursor:pointer;list-style:none}
.disclosure summary::-webkit-details-marker{display:none}.disclosure summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}
.disclosure .when-open,.disclosure[open] .when-closed{display:none}.disclosure[open] .when-open{display:inline}.disclosure[open] .chevron{transform:rotate(180deg)}
.disclosure[open] summary{margin-bottom:12px}
.key-field{box-sizing:border-box;width:100%;display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg-surface);font-size:12px;line-height:18px}
.key-field>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.key-field b:where(:not([class*=cl-],[class*=cl-] *)){font-weight:500;color:var(--text-secondary)}
.key-field .key{font:400 12px/18px var(--font-mono);color:var(--text-primary);word-spacing:2px;overflow-wrap:normal;user-select:all}.key-field small:where(:not([class*=cl-],[class*=cl-] *)){color:var(--text-muted)}
.copy-button{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px!important;min-width:0!important;height:32px;min-height:0;margin:0;padding:0;border:1px solid var(--border-subtle);border-radius:8px;background:var(--bg-surface)}
.copy-button:hover{background:var(--bg-subtle)}.copy-button[data-state=copied]{border-color:var(--status-live);background:var(--brand-primary-soft)}.copy-button[hidden]{display:none}
.qr-center{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center}
.copy-status{margin:0;font-size:12px;line-height:18px;color:var(--status-live)}.copy-status:empty{display:none}
.actions{display:flex;gap:12px;align-items:center;justify-content:space-between}.actions a:where(:not([class*=cl-],[class*=cl-] *)){font-weight:500;text-decoration:none}.actions button:where(:not([class*=cl-],[class*=cl-] *)){width:auto}
.phone-only{display:none}
.add-to-app{display:block;align-self:stretch;padding:9px 16px;border-radius:8px;background:var(--brand-primary);color:var(--brand-on-primary);font-weight:500;text-align:center;text-decoration:none}
/* Recovery codes (01d). */
#recovery-codes{display:grid;grid-template-columns:1fr 1fr;gap:8px 24px;margin:0;padding:16px 20px;list-style:none;border-radius:10px;background:var(--bg-subtle);font:500 20px/28px var(--font-mono);letter-spacing:.8px}
#recovery-codes code:where(:not([class*=cl-],[class*=cl-] *)){font:inherit}
.small{font-size:12px;line-height:18px;color:var(--text-secondary)}
@media (max-width:1100px){.brand-panel{width:400px;padding:40px}.brand-title{font-size:30px;line-height:38px}}
@media (max-width:760px){
  body.auth{display:block}.brand-panel{display:none}.auth-main{padding:20px;justify-content:flex-start}
  .mobile-brand{display:flex;gap:10px;align-items:center;align-self:stretch;margin:0 0 16px;font-size:16px;font-weight:600}
  .card,.card.wide,.card.medium{width:100%;padding:20px;gap:16px}
  input:where(:not([class*=cl-],[class*=cl-] *)).code-input{height:52px}
  .desktop-only{display:none}.phone-only{display:block}.setup-block.phone-only{display:flex}
  .actions{flex-direction:column-reverse;align-items:stretch}.actions button:where(:not([class*=cl-],[class*=cl-] *)){width:100%}.actions a:where(:not([class*=cl-],[class*=cl-] *)){text-align:center}
  .key-field .key{overflow-wrap:anywhere}
  #recovery-codes{grid-template-columns:1fr;font-size:18px}
}

/* Console shell (Figma "Sidebar / Console" 2:33 and "FAQs" 4:117): fixed sidebar, topbar with breadcrumb, page header, panels. */
:root{--status-live-soft:#e7f1e2;--status-draft:#56636e;--status-draft-soft:#eceff2;--status-pending:#9a5b00;--status-pending-soft:#fbf0dc;--sidebar-width:248px}
body.shell{display:flex;min-height:100vh;padding:0;background:var(--bg-canvas)}
/* The shell drops the base card look of main; .content (below) sets the width and padding of the page body. */
.shell main{margin:0;background:none;border:0;border-radius:0}
.shell .skip{position:absolute;left:8px;top:-40px;padding:8px 12px;border-radius:8px;background:var(--bg-surface);color:var(--brand-primary);font-weight:500;z-index:3}.shell .skip:focus{top:8px}
/* A column that never wraps: with the base nav flex-wrap, items beyond the window height wrapped into a second column and the sidebar scrolled sideways. */
.sidebar{box-sizing:border-box;position:sticky;top:0;align-self:flex-start;display:flex;flex-direction:column;flex-wrap:nowrap;gap:4px;flex-shrink:0;width:var(--sidebar-width);height:100vh;margin:0;padding:16px 12px;overflow-x:hidden;overflow-y:auto;background:var(--bg-sidebar);color:var(--text-sidebar)}
.sidebar a:where(:not([class*=cl-],[class*=cl-] *)){color:inherit;text-decoration:none}
.brand{display:flex;gap:10px;align-items:center;padding:4px 8px 16px}.brand strong:where(:not([class*=cl-],[class*=cl-] *)){display:block;font-size:15px;line-height:20px;font-weight:600;color:var(--text-sidebar-active)}.brand small:where(:not([class*=cl-],[class*=cl-] *)){display:block;font-size:11px;line-height:14px;color:var(--text-sidebar)}
/* The N mark has its own brand colours, drawn for a white tile (a brand-coloured tile washed it out in dark mode). */
.brand .logo-tile{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#fff}
.site-switcher{margin:0 0 12px;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(255,255,255,.05)}
.site-switcher summary,.site-switcher.single{display:grid;grid-template-columns:1fr auto;grid-template-areas:"label chevron" "name chevron" "id chevron";align-items:center;column-gap:8px;padding:10px 12px;list-style:none;cursor:pointer}
.site-switcher.single{cursor:default}.site-switcher summary::-webkit-details-marker{display:none}.site-switcher summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:-3px;border-radius:10px}
.site-switcher .site-label{grid-area:label;font-size:10px;line-height:14px;letter-spacing:.6px;text-transform:uppercase;color:var(--text-sidebar)}
.site-switcher strong:where(:not([class*=cl-],[class*=cl-] *)){grid-area:name;font-size:14px;line-height:20px;font-weight:600;color:var(--text-sidebar-active);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-switcher small:where(:not([class*=cl-],[class*=cl-] *)){grid-area:id;font:400 11px/14px var(--font-mono);color:var(--text-sidebar);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site-switcher svg:where(:not([class*=cl-],[class*=cl-] *)){grid-area:chevron;color:var(--text-sidebar)}
.site-list{margin:0;padding:4px 0 6px;list-style:none;border-top:1px solid rgba(255,255,255,.12)}.site-list a:where(:not([class*=cl-],[class*=cl-] *)){display:block;padding:8px 12px;font-weight:500;color:var(--text-sidebar-active)}.site-list a small:where(:not([class*=cl-],[class*=cl-] *)){display:block;font:400 11px/14px var(--font-mono);color:var(--text-sidebar)}.site-list a:where(:not([class*=cl-],[class*=cl-] *)):hover{background:var(--bg-sidebar-active)}
.nav-group{margin:12px 0 4px;padding:0 12px;font-size:10px;line-height:14px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:var(--text-sidebar);opacity:.8}
.nav-items{margin:0;padding:0;list-style:none}
.nav-item{display:flex;gap:10px;align-items:center;padding:8px 12px;border-radius:8px;font-weight:500;color:var(--text-sidebar)}.nav-item svg:where(:not([class*=cl-],[class*=cl-] *)){flex-shrink:0}.nav-item>span:where(:not([class*=cl-],[class*=cl-] *)){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
a:where(:not([class*=cl-],[class*=cl-] *)).nav-item:hover{background:rgba(255,255,255,.06);color:var(--text-sidebar-active)}
.nav-item.active{background:var(--bg-sidebar-active);color:var(--text-sidebar-active);box-shadow:inset 3px 0 0 var(--accent-highlight)}
.nav-item.planned{color:var(--text-sidebar-muted);cursor:default}.nav-item.planned small:where(:not([class*=cl-],[class*=cl-] *)){display:inline;flex-shrink:0;padding:1px 6px;border-radius:999px;border:1px solid currentColor;font-size:10px;line-height:14px;color:inherit;white-space:nowrap}
.count{min-width:20px;padding:1px 6px;border-radius:999px;background:rgba(255,255,255,.14);font:500 11px/16px var(--font-sans);color:var(--text-sidebar-active);text-align:center}.count.accent{background:var(--accent-highlight);color:#15232e}
.sidebar-spacer{flex:1}
/* The sidebar's two parts (rough edge 14): its bar (the workspace or NGentik, and the phone's Menu button) and its menu (the rest).
   Wider than a phone they are one column as before, the menu filling it so the foot keeps to the bottom. */
.sidebar-menu{display:flex;flex-direction:column;gap:4px;flex:1 0 auto}.shell .menu-toggle{display:none}
.user{display:flex;gap:10px;align-items:center;padding:10px 8px 4px;border-top:1px solid rgba(255,255,255,.12)}
.avatar{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:32px;height:32px;border-radius:50%;background:var(--bg-sidebar-active);color:var(--text-sidebar-active);font-weight:600}
.user-text{flex:1;min-width:0}.user-text strong:where(:not([class*=cl-],[class*=cl-] *)){display:block;font-size:12px;line-height:16px;font-weight:500;color:var(--text-sidebar-active);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-text small:where(:not([class*=cl-],[class*=cl-] *)){display:flex;gap:4px;align-items:center;font-size:11px;line-height:14px;color:var(--accent-highlight)}
.user form:where(:not([class*=cl-],[class*=cl-] *)){margin:0}
.icon-button{display:flex;align-items:center;justify-content:center;width:32px;min-width:0;height:32px;min-height:0;margin:0;padding:0;border:0;border-radius:8px;background:transparent;color:var(--text-sidebar)}.icon-button:hover{background:var(--bg-sidebar-active);color:var(--text-sidebar-active)}
.page{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;gap:16px;align-items:center;justify-content:space-between;min-height:56px;padding:0 32px;border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;margin:0;font-size:13px;line-height:20px;color:var(--text-muted)}.breadcrumb a:where(:not([class*=cl-],[class*=cl-] *)){color:var(--text-secondary);text-decoration:none;font-weight:500}.breadcrumb a:where(:not([class*=cl-],[class*=cl-] *)):hover{text-decoration:underline}.breadcrumb [aria-current]{color:var(--text-primary);font-weight:500}
.pill{padding:2px 10px;border-radius:999px;border:1px solid var(--status-pending);background:var(--status-pending-soft);color:var(--status-pending);font-size:12px;line-height:18px;font-weight:600;letter-spacing:.2px}
.content{box-sizing:border-box;width:100%;max-width:1200px;margin:0;padding:28px 32px 48px}
.page-header{display:flex;gap:16px 24px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:24px}
.page-header h1:where(:not([class*=cl-],[class*=cl-] *)){margin:0;font-size:24px;line-height:32px}.lead{margin:6px 0 0;max-width:64ch;color:var(--text-secondary)}
.page-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.button,.shell button:where(:not([class*=cl-],[class*=cl-] *)){display:inline-flex;align-items:center;justify-content:center;gap:8px;box-sizing:border-box;width:auto;min-width:0;min-height:40px;margin:0;padding:8px 16px;border:1px solid transparent;border-radius:8px;background:var(--brand-primary);color:var(--brand-on-primary);font:500 14px/22px var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap}
.button:hover,.shell button:where(:not([class*=cl-],[class*=cl-] *)):hover{background:var(--brand-primary-hover)}
.button.secondary,.shell button:where(:not([class*=cl-],[class*=cl-] *)).secondary{border-color:var(--border-strong);background:var(--bg-surface);color:var(--text-primary)}.button.secondary:hover,.shell button:where(:not([class*=cl-],[class*=cl-] *)).secondary:hover{background:var(--bg-subtle)}
.button.danger,.shell button:where(:not([class*=cl-],[class*=cl-] *)).danger{background:var(--status-danger);color:var(--bg-surface)}.button.danger:hover,.shell button:where(:not([class*=cl-],[class*=cl-] *)).danger:hover{background:var(--status-danger);filter:brightness(.92)}
.shell form button:where(:not([class*=cl-],[class*=cl-] *)){margin-top:12px}
/* The team email's confirmation under its field in Settings (rough edge 13): the badge and its date on one line, the rest under. */
.team-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:8px}.team-status>small:where(:not([class*=cl-],[class*=cl-] *)){flex-basis:100%;margin:0}.team-status>.badge+small:where(:not([class*=cl-],[class*=cl-] *)){flex-basis:auto}.shell .team-status button:where(:not([class*=cl-],[class*=cl-] *)){margin:0}
/* After a save refused because someone saved meanwhile, what they saved, under each field it differs in (rough edge 13). */
.saved-value{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 0;padding:6px 10px;border-radius:6px;background:var(--status-pending-soft);font-size:12px;line-height:18px}.saved-value strong{font-weight:600;color:var(--status-pending)}
/* A notice that needs action but isn't an error, such as a chatbot no site may embed (rough edge 15): amber, not red. */
.alert.caution{border-left-color:var(--status-pending);background:var(--status-pending-soft)}.content>.alert.caution{margin:0 0 20px}
/* The file field's button like the console's secondary buttons, in either theme (rough edge 21); its words stay the browser's. */
input[type=file]:where(:not([class*=cl-],[class*=cl-] *)){color:var(--text-muted)}input[type=file]:where(:not([class*=cl-],[class*=cl-] *))::file-selector-button{margin-right:12px;padding:5px 12px;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg-subtle);color:var(--text-primary);font:500 13px/18px var(--font-sans);cursor:pointer}input[type=file]:where(:not([class*=cl-],[class*=cl-] *))::file-selector-button:hover{background:var(--bg-surface)}
/* A button that can't act now (bug 9: Publish with nothing to publish) keeps its place, muted, with the reason beside it. */
.panel button:where(:not([class*=cl-],[class*=cl-] *)):disabled,.panel button:where(:not([class*=cl-],[class*=cl-] *)):disabled:hover{border-color:var(--border-subtle);background:var(--bg-subtle);color:var(--text-muted);cursor:not-allowed}
.publish-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}.shell .publish-actions button:where(:not([class*=cl-],[class*=cl-] *)){margin-top:0}.publish-actions small{flex:1 1 16rem;max-width:28rem}
.shell button:where(:not([class*=cl-],[class*=cl-] *)).link{min-height:0;margin:0;padding:0;border:0;background:none;color:var(--brand-primary);text-decoration:underline}.shell button:where(:not([class*=cl-],[class*=cl-] *)).link:hover{background:none}
.field-error{margin:4px 0 0;color:var(--status-danger);font-size:13px}.shell p>button:where(:not([class*=cl-],[class*=cl-] *)){margin-top:0}
.panel{box-sizing:border-box;padding:20px 24px;margin:0 0 20px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-surface)}.panel>h2:where(:not([class*=cl-],[class*=cl-] *)):first-child{margin-top:0}.panel section+section{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-subtle)}
.panel.faq{max-width:none}
.notice{display:flex;gap:10px;align-items:flex-start;margin:0 0 16px;padding:12px 16px;border-left:4px solid var(--status-live);border-radius:8px;background:var(--status-live-soft);color:var(--text-primary)}
.toolbar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:0 0 16px}.toolbar label:where(:not([class*=cl-],[class*=cl-] *)){flex:1 1 100%;margin:0 0 -6px}.toolbar input:where(:not([class*=cl-],[class*=cl-] *)){flex:1 1 320px;max-width:480px}.toolbar button:where(:not([class*=cl-],[class*=cl-] *)){margin-top:0}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;font-size:12px;line-height:18px;font-weight:500;white-space:normal}.badge.live{background:var(--status-live-soft);color:var(--status-live)}.badge.draft{background:var(--status-draft-soft);color:var(--status-draft)}.badge.pending{background:var(--status-pending-soft);color:var(--status-pending)}
.shell th:where(:not([class*=cl-],[class*=cl-] *)){font-size:12px;line-height:18px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.4px}.shell caption{caption-side:top;padding:0 0 10px;text-align:left;font-weight:600;color:var(--text-secondary)}
.empty{margin:16px 0 0;padding:24px;border:1px dashed var(--border-strong);border-radius:8px;text-align:center;color:var(--text-muted)}
.pager{display:flex;gap:8px;justify-content:flex-end;margin:16px 0 0}.pager:empty{display:none}
.stat-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0 0 28px}
.stat-card{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-surface);color:var(--text-primary);text-decoration:none}.stat-card:hover{border-color:var(--brand-primary)}
.stat-label{font-size:12px;line-height:18px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-secondary)}.stat-value{font-size:32px;line-height:40px;font-weight:600;letter-spacing:-.5px}.stat-note{font-size:12px;line-height:18px;color:var(--text-muted)}
.site-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.site-cards a:where(:not([class*=cl-],[class*=cl-] *)){display:flex;flex-direction:column;gap:4px;padding:20px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-surface);color:var(--text-primary);text-decoration:none}.site-cards a:where(:not([class*=cl-],[class*=cl-] *)):hover{border-color:var(--brand-primary)}.site-cards strong:where(:not([class*=cl-],[class*=cl-] *)){font-size:16px;line-height:24px;font-weight:600}.site-cards small:where(:not([class*=cl-],[class*=cl-] *)){font:400 12px/18px var(--font-mono);color:var(--text-muted)}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:8px 24px;margin:0}.facts dt{font-weight:500;color:var(--text-secondary)}.facts dd{margin:0}
.shell td time:where(:not([class*=cl-],[class*=cl-] *)){white-space:nowrap}.shell td time.two-part{white-space:normal}.shell td time.two-part span{white-space:nowrap}.shell td small:where(:not([class*=cl-],[class*=cl-] *)){margin-top:2px;overflow-wrap:anywhere}
@media (max-width:900px){
  body.shell{flex-direction:column}
  .sidebar{position:static;align-self:stretch;width:auto;max-width:100%;height:auto;padding:0;gap:0}.nav-items{display:flex;flex-wrap:wrap;gap:4px}.nav-group{margin-top:8px}
  /* Folded into its bar once menu.js has wired its button and marked the page; Menu opens the rest below it, pushing the page down. */
  .sidebar-bar{display:flex;gap:12px;align-items:center;padding:10px 12px}.sidebar-bar>:first-child{flex:1;min-width:0}.sidebar-bar .workspace{margin:0}.sidebar-bar .brand{padding:4px 0}
  .sidebar-menu{padding:4px 12px 14px;border-top:1px solid rgba(255,255,255,.08)}.menu-ready .sidebar:not(.menu-open) .sidebar-menu{display:none}
  .shell .menu-toggle{flex:none;box-sizing:border-box;align-items:center;gap:8px;width:auto;min-width:0;min-height:40px;margin:0;padding:8px 14px 8px 12px;border:1px solid rgba(255,255,255,.16);border-radius:8px;background:rgba(255,255,255,.05);color:var(--text-sidebar-active);font:500 14px/20px var(--font-sans);cursor:pointer}
  .shell .menu-toggle:hover,.shell .menu-toggle[aria-expanded=true]{border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.14)}.menu-ready .shell .menu-toggle{display:inline-flex}
  .menu-toggle>span{display:flex}.menu-toggle .menu-open,.menu-toggle[aria-expanded=true] .menu-folded{display:none}.menu-toggle[aria-expanded=true] .menu-open{display:flex}
  .sidebar-spacer{display:none}.site-switcher{margin-bottom:8px}
  .topbar,.content{padding-left:16px;padding-right:16px}.content{padding-top:20px}
  .page-header h1:where(:not([class*=cl-],[class*=cl-] *)){font-size:22px;line-height:30px}.page-actions{width:100%}.page-actions .button{flex:1}
}
/* Dark scheme (Figma "NGentik admin tokens", Dark). Same component rules; only the tokens change. Dark when chosen with the
   sidebar's theme switch (data-theme="dark", set by theme.js before the page is drawn), or when the system is dark and Light
   wasn't chosen; the two lists below are the same tokens. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){--bg-canvas:#0b1219;--bg-surface:#111b24;--bg-subtle:#16222d;--bg-sidebar:#081018;--bg-sidebar-active:#1b2e3e;--border-subtle:#223241;--border-strong:#344858;
    --text-primary:#e6edf2;--text-secondary:#a7b6c2;--text-muted:#8c9dab;--text-sidebar:#9fb3c4;--text-sidebar-active:#fff;--text-sidebar-muted:#7a8fa2;
    --brand-primary:#8fb4d3;--brand-primary-hover:#a7c6df;--brand-primary-soft:#15302f;--brand-on-primary:#0b1620;--focus-ring:#6da4a2;--accent-highlight:#90bd81;
    --status-live:#9fd08c;--status-live-soft:#16301c;--status-draft:#a7b6c2;--status-draft-soft:#1b2a35;--status-pending:#e6a04a;--status-pending-soft:#33260f;--status-danger:#f0877f;--status-danger-soft:#3a1714;
    color-scheme:dark}
  :root:not([data-theme=light]) .count.accent{color:#0b1620}
}
:root[data-theme=dark]{--bg-canvas:#0b1219;--bg-surface:#111b24;--bg-subtle:#16222d;--bg-sidebar:#081018;--bg-sidebar-active:#1b2e3e;--border-subtle:#223241;--border-strong:#344858;
    --text-primary:#e6edf2;--text-secondary:#a7b6c2;--text-muted:#8c9dab;--text-sidebar:#9fb3c4;--text-sidebar-active:#fff;--text-sidebar-muted:#7a8fa2;
    --brand-primary:#8fb4d3;--brand-primary-hover:#a7c6df;--brand-primary-soft:#15302f;--brand-on-primary:#0b1620;--focus-ring:#6da4a2;--accent-highlight:#90bd81;
    --status-live:#9fd08c;--status-live-soft:#16301c;--status-draft:#a7b6c2;--status-draft-soft:#1b2a35;--status-pending:#e6a04a;--status-pending-soft:#33260f;--status-danger:#f0877f;--status-danger-soft:#3a1714;
    color-scheme:dark}
:root[data-theme=dark] .count.accent{color:#0b1620}
/* Insights (Figma 07, 07a, 07b): tabs, period and language filters, stat tiles and server-rendered SVG charts.
   Categorical chart colours in fixed order (answered, clarified, handed off, refused or error), validated for colour-vision
   deficiencies against each mode's surface; text never takes a series colour, and every chart has a table view. */
:root{--chart-1:#2f6aa3;--chart-2:#1b9e8c;--chart-3:#e0961f;--chart-4:#b5479c}
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 20px;border-bottom:1px solid var(--border-subtle)}
.tabs a:where(:not([class*=cl-],[class*=cl-] *)){margin-bottom:-1px;padding:8px 14px;border-bottom:2px solid transparent;font-weight:500;color:var(--text-secondary);text-decoration:none}
.tabs a:where(:not([class*=cl-],[class*=cl-] *)):hover{color:var(--text-primary)}.tabs a:where(:not([class*=cl-],[class*=cl-] *))[aria-current=page]{border-bottom-color:var(--brand-primary);color:var(--text-primary)}
.filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;margin:0 0 8px}.filters label:where(:not([class*=cl-],[class*=cl-] *)){margin:0 0 6px}.filters select:where(:not([class*=cl-],[class*=cl-] *)){width:auto;min-width:11rem}.shell .filters button:where(:not([class*=cl-],[class*=cl-] *)){margin:0}
.period-note,.chart-note{margin:0 0 16px;font-size:12px;line-height:18px;color:var(--text-muted)}.chart-note{margin:8px 0 12px}
.stat-cards.compact{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}.stat-value.small-value{font-size:20px;line-height:40px}div.stat-card:hover{border-color:var(--border-subtle)}
.legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;padding:0;list-style:none;font-size:12px;line-height:18px;color:var(--text-secondary)}
.legend li:where(:not([class*=cl-],[class*=cl-] *)){display:flex;gap:6px;align-items:center}.swatch{width:10px;height:10px;flex-shrink:0;border-radius:2px}
/* A chart fills its card, never scrolling sideways (bug 3, 23 October): the numbers' column, then a plot as wide as the rest,
   its bars placed in percent so they stretch while the text keeps its size. On a card under 560 px the minor labels give way. */
.chart-fit{display:grid;grid-template-columns:auto minmax(0,1fr);container-type:inline-size}.chart-plot{overflow:visible}.chart{display:block}
@container (max-width:560px){.chart-plot .minor,.chart-plot .wide{display:none}.chart-fit .chart-plot .narrow{display:inline}}
.chart text{font:400 12px/1 var(--font-sans);fill:var(--text-muted)}
.chart .grid{stroke:var(--border-subtle);stroke-width:1}.chart .axis{stroke:var(--border-strong);stroke-width:1}
.chart .band{fill:var(--bg-subtle)}.chart .band-label{fill:var(--text-secondary)}
.chart .hit{fill:transparent}.chart .mark:hover .hit{fill:var(--bg-subtle)}
.chart .cutoff{stroke:var(--text-primary);stroke-width:2}.chart .cutoff-label{fill:var(--text-primary);font-weight:500;paint-order:stroke;stroke:var(--bg-surface);stroke-width:4px;stroke-linejoin:round}
.series-1{fill:var(--chart-1)}.series-2{fill:var(--chart-2)}.series-3{fill:var(--chart-3)}.series-4{fill:var(--chart-4)}
.swatch.series-1{background:var(--chart-1)}.swatch.series-2{background:var(--chart-2)}.swatch.series-3{background:var(--chart-3)}.swatch.series-4{background:var(--chart-4)}
.bar-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.bar-list li:where(:not([class*=cl-],[class*=cl-] *)){display:grid;grid-template-columns:minmax(8rem,16rem) minmax(6rem,1fr) minmax(7rem,auto);gap:4px 16px;align-items:center}
.bar-list .bar{display:block;width:100%;height:16px}.bar-value{color:var(--text-secondary);font-variant-numeric:tabular-nums;white-space:nowrap}
/* A longer value in two lines that may wrap: what it says, then the count it rests on, smaller and muted. */
.bar-value.two-line{white-space:normal}.bar-value.two-line>span{display:block;color:var(--text-primary)}.bar-value.two-line>span+span{font-size:12px;line-height:18px;color:var(--text-muted)}
.table-view{margin-top:12px}.table-view summary{display:inline-block;padding:4px 0;font-weight:500;color:var(--brand-primary);cursor:pointer}
.table-view summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}.table-view[open] summary{margin-bottom:8px}
.table-view td:where(:not([class*=cl-],[class*=cl-] *)),.table-view th:where(:not([class*=cl-],[class*=cl-] *))[scope=row]{min-width:0;font-variant-numeric:tabular-nums;white-space:nowrap}.table-view th:where(:not([class*=cl-],[class*=cl-] *))[scope=row]{font-size:14px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-primary)}
.filter-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}.filter-links a:where(:not([class*=cl-],[class*=cl-] *)){padding:4px 12px;border:1px solid var(--border-strong);border-radius:999px;font-weight:500;text-decoration:none}
.filter-links a:where(:not([class*=cl-],[class*=cl-] *))[aria-current=page]{border-color:var(--brand-primary);background:var(--brand-primary);color:var(--brand-on-primary)}
/* Insights page (Phase 2 step 6, round (b)): six tiles three by two with a change line under each, bars on a track, panels side
   by side when there is room (short ones do not stretch), today's partial bar fainter, an FAQ table that keeps a readable width. */
.stat-cards.trio{grid-template-columns:repeat(3,minmax(0,1fr))}.stat-change{font-size:12px;line-height:18px;color:var(--text-secondary)}
@media (max-width:1100px){.stat-cards.trio{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:600px){.stat-cards.trio{grid-template-columns:minmax(0,1fr)}}
.bar .track{fill:var(--bg-subtle)}.bar .neutral{fill:var(--status-draft)}.bar .series-1,.bar .series-2,.bar .series-3,.bar .series-4{stroke:none}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:0 20px;align-items:start}
.table-scroll table.min{min-width:20rem}
/* One dashed mark, the allowance line, labelled at its end (23 October); a partial day, week or month is a fainter bar (its
   legend says so), a not-recorded month draws no bar and its label is greyed, and today's label shortens on a narrow card. */
.chart .part .series-1,.chart .part .series-2,.chart .part .series-3,.chart .part .series-4,.chart .part .held-bar,.swatch.part{opacity:.4}
.chart .unrecorded{opacity:.45}.chart-plot .narrow{display:none}
.chart .cap-label{fill:var(--text-primary);font-weight:500;paint-order:stroke;stroke:var(--bg-surface);stroke-width:4px;stroke-linejoin:round}
.codes{margin:0;padding-left:18px;font-size:12px;line-height:18px;color:var(--text-secondary)}.bar-list+.facts,.bar-list+.chart-note{margin-top:16px}
.details-section{margin:0 0 20px}.details-section>summary{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:14px 20px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-surface);cursor:pointer;list-style:none}
.details-section>summary::-webkit-details-marker{display:none}.details-section>summary::before{content:"\25B8";color:var(--brand-primary)}.details-section[open]>summary::before{content:"\25BE"}
.details-section>summary h2{margin:0}.details-section[open]>summary{margin-bottom:20px}.details-section>summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
/* The editor's email wraps inside its cell; a floor keeps it from shrinking to a sliver when the table scrolls on a phone. */
.shell td:where(:not([class*=cl-],[class*=cl-] *)).edited{min-width:10rem}
@media (max-width:600px){.stat-cards.compact .stat-value{font-size:24px;line-height:32px}.stat-cards.compact .stat-value.small-value{font-size:18px}.bar-list li:where(:not([class*=cl-],[class*=cl-] *)){grid-template-columns:minmax(6rem,1fr) auto}.bar-list .bar-label{grid-column:1/-1}.filters>div{flex:1 1 100%}.filters select:where(:not([class*=cl-],[class*=cl-] *)){width:100%}}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--chart-1:#3f86dc;--chart-2:#1a9c80;--chart-3:#c98500;--chart-4:#cf5aa6}}
:root[data-theme=dark]{--chart-1:#3f86dc;--chart-2:#1a9c80;--chart-3:#c98500;--chart-4:#cf5aa6}

/* NBot: the workspace at the top of the sidebar (21 October): its mark and name; with several, a menu of them that floats over
   the page. Its buttons are prefixed with .shell so the shell's own button rule (brand fill, 40px) never reaches them. The
   mark's left edge lines up with the navigation's icons and group labels (24px in); the eight mark colours each carry white
   text at 5.5:1 or more. */
.workspace{position:relative;margin:0 0 4px}
.shell .workspace-trigger,.workspace-current{box-sizing:border-box;display:flex;gap:10px;align-items:center;justify-content:flex-start;width:100%;min-height:44px;margin:0;padding:8px 10px 8px 12px;border:1px solid transparent;border-radius:8px;background:none;color:var(--text-sidebar-active);font:inherit;text-align:left;white-space:normal}
.shell .workspace-trigger{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.05);cursor:pointer}
.shell .workspace-trigger:hover,.shell .workspace-trigger[aria-expanded=true]{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.1)}
.shell .workspace-trigger:focus-visible{outline:3px solid var(--focus-ring);outline-offset:1px}
.workspace-trigger svg{flex-shrink:0;width:16px;height:16px;margin-left:auto;color:var(--text-sidebar)}
.workspace-name{flex:1;min-width:0;font-size:15px;line-height:20px;font-weight:600;color:var(--text-sidebar-active);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-mark{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:7px;color:#fff;font-size:14px;line-height:16px;font-weight:600}
.mark-0{background:#a84a22}.mark-1{background:#2a7163}.mark-2{background:#5f4cc4}.mark-3{background:#86601d}.mark-4{background:#2b659a}.mark-5{background:#44742f}.mark-6{background:#a3335f}.mark-7{background:#55606b}
.workspace-menu{position:absolute;z-index:30;top:calc(100% + 6px);left:0;right:0;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;max-height:min(420px,70vh);overflow-y:auto;padding:4px;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg-surface);box-shadow:0 12px 32px rgba(0,0,0,.28)}
.workspace-menu[hidden]{display:none}
.workspace-find{box-sizing:border-box;width:100%;margin:2px 0 4px;padding:7px 10px;border:1px solid var(--border-strong);border-radius:6px;background:var(--bg-surface);color:var(--text-primary);font:inherit;font-size:13px}
.shell .workspace-item{box-sizing:border-box;display:flex;gap:10px;align-items:center;justify-content:flex-start;width:100%;min-height:0;margin:0;padding:6px 8px 6px 7px;border:0;border-radius:6px;background:none;color:var(--text-primary);font:inherit;text-align:left;white-space:normal;cursor:pointer}
.shell .workspace-item:hover,.shell .workspace-item:focus-visible{background:var(--bg-subtle)}
.shell .workspace-item.current{background:var(--brand-primary-soft)}
.shell .workspace-item:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.shell .workspace-item:disabled{cursor:progress;opacity:.6}
.workspace-item[hidden]{display:none}
.workspace-item-text{flex:1;min-width:0}
.workspace-item-text strong{display:block;font-size:14px;line-height:20px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-item-text small{display:block;font-size:12px;line-height:16px;color:var(--text-secondary)}
.workspace-item svg{flex-shrink:0;width:16px;height:16px;color:var(--brand-primary)}
.workspace-status,.workspace-error{margin:4px 8px 2px;font-size:12px;line-height:16px;color:var(--text-secondary)}
.workspace-error{color:var(--status-danger)}
.sidebar-foot{display:flex;align-items:center;justify-content:center;margin:6px 0 0}
/* NBot: the theme switch at the sidebar's foot (22 October): System, Light, Dark as one small group, the chosen one filled. */
.theme-switch{display:inline-flex;gap:2px;padding:2px;border:1px solid rgba(255,255,255,.12);border-radius:8px;background:rgba(255,255,255,.05)}
.shell .theme-switch button{display:flex;align-items:center;justify-content:center;width:28px;min-width:0;height:24px;min-height:0;margin:0;padding:0;border:0;border-radius:6px;background:none;color:var(--text-sidebar);cursor:pointer}
.shell .theme-switch button:hover{background:rgba(255,255,255,.08);color:var(--text-sidebar-active)}
.shell .theme-switch button[aria-checked=true]{background:rgba(255,255,255,.14);color:var(--text-sidebar-active)}
.shell .theme-switch button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:1px}
.theme-switch svg{width:14px;height:14px}
#user-button{background:none}
.user-text small:where(:not([class*=cl-],[class*=cl-] *)).muted-check{color:var(--text-sidebar-muted)}
.pager{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:flex-end;margin:12px 0 0;color:var(--text-muted);font-size:13px}.pager a{color:var(--text-primary);font-weight:500}
.chunk{padding:14px 0;border-bottom:1px solid var(--border-subtle)}.chunk:first-of-type{padding-top:0}.chunk p:where(:not([class*=cl-],[class*=cl-] *)){margin:0}
.chunk-meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:12px;line-height:18px;color:var(--text-muted)}.chunk-path{margin-top:6px!important;font-weight:500;color:var(--text-secondary)}
.chunk-question{margin-top:6px!important;font-weight:600}.chunk-text{margin-top:6px!important;white-space:pre-wrap;overflow-wrap:anywhere}
.probe-match{margin-top:8px;padding:10px 14px;border-left:3px solid var(--brand-primary);border-radius:6px;background:var(--brand-primary-soft)}.probe-match .chunk-text,.probe-match .chunk-question{margin-top:0!important}.probe-match .chunk-question+.chunk-text{margin-top:6px!important}
.probe-context{margin-top:10px}.probe-context summary{cursor:pointer;font-weight:500;color:var(--brand-primary)}.probe-context summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;border-radius:4px}.probe-context .chunk-text{color:var(--text-secondary)}.probe-context-label{margin:10px 0 0!important;font-size:12px;line-height:18px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.colour-swatch{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:middle;border:1px solid var(--border-strong)}

/* Usage (Phase 2 step 6, round (c)): allowance meters, statuses, held calls, the month's history and the download menu. */
.band-h{margin:8px 0 12px;font-size:18px;line-height:26px}.badge.danger{background:var(--status-danger-soft);color:var(--status-danger)}
.usage-meters{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;margin:0 0 12px}
.usage-tile{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-surface);min-width:0}
.usage-tile .stat-note b{color:var(--text-primary);font-weight:600;font-variant-numeric:tabular-nums}
.meter-head{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;justify-content:space-between}
.usage-value{font-size:30px;line-height:38px;font-weight:600;letter-spacing:-.5px;font-variant-numeric:tabular-nums}.usage-value small{font-size:14px;letter-spacing:0;font-weight:500;color:var(--text-secondary)}
.usage-value.small{font-size:20px;line-height:28px}.usage-value small:where(:not([class*=cl-],[class*=cl-] *)){display:inline}
.usage-history th[scope=row],#held th[scope=row],#allowance-details th[scope=row]{text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--text-primary)}
.meter{display:flex;height:10px;margin:6px 0 2px;border:1px solid var(--border-subtle);border-radius:5px;background:var(--bg-subtle);overflow:hidden}
.meter .used{background:var(--chart-1)}.meter .held{background:var(--chart-3)}
.swatch.empty-swatch{background:var(--bg-subtle);border:1px solid var(--border-strong)}
.swatch.hatch-swatch{background:repeating-linear-gradient(45deg,var(--chart-3) 0 2px,var(--bg-surface) 2px 4px);border:1px solid var(--chart-3)}
.chart .hatch-bg{fill:var(--bg-surface)}.chart .hatch-line{stroke:var(--chart-3);stroke-width:3}.chart .held-bar{stroke:var(--chart-3);stroke-width:1}
.chart .cap-line{stroke:var(--text-primary);stroke-width:2;stroke-dasharray:6 4}
.notice.warn{border-left-color:var(--status-pending);background:var(--status-pending-soft)}
.explain{margin:12px 0 0;padding-left:18px;display:grid;gap:6px;color:var(--text-secondary)}.explain b{color:var(--text-primary)}
.support-line{margin:12px 0 0;padding:10px 12px;border-radius:8px;background:var(--bg-subtle);color:var(--text-secondary)}
.summary-line{margin:0 0 12px;color:var(--text-secondary)}
.panel-head{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;justify-content:space-between}.panel-head h2{margin:0}.panel-head .chart-note{margin:0}
.usage-history{margin-top:28px;padding-top:20px;border-top:2px solid var(--border-strong)}
.history-head{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;justify-content:space-between}.history-head .band-h{margin:0}
/* History (23 October): its heading and Download CSV on one row, the month choice (or the only month's name) under them; its
   tables fit their card with the figures right-aligned (stacked on a phone). */
.history-months{margin:12px 0 8px}.history-month{margin:10px 0 8px;font-weight:500;color:var(--text-secondary)}
.usage-history td:where(:not([class*=cl-],[class*=cl-] *)),.usage-history thead th:where(:not([class*=cl-],[class*=cl-] *))+th{text-align:right}
.dl{position:relative}.dl>summary{display:inline-flex;gap:8px;align-items:center;padding:4px 14px;border:1px solid var(--border-strong);border-radius:8px;background:var(--bg-surface);font-weight:500;cursor:pointer;list-style:none}
.dl>summary::-webkit-details-marker{display:none}.dl>summary::after{content:"\25BE";color:var(--text-muted)}.dl>summary:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
.dl-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:5;width:min(22rem,calc(100vw - 48px));padding:8px;border:1px solid var(--border-strong);border-radius:10px;background:var(--bg-surface);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.dl-menu ul{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:2px}.dl-menu a{display:flex;flex-direction:column;padding:6px 10px;border-radius:6px;font-weight:500;text-decoration:none;color:var(--text-primary)}
.dl-menu a:hover{background:var(--bg-subtle)}.dl-menu small{font-size:12px;line-height:16px;font-weight:400;color:var(--text-muted)}.dl-menu .chart-note{margin:0}
.usage-history th small,#held th small,#allowance-details th small{display:block;font-size:12px;line-height:18px;font-weight:400;color:var(--text-muted)}
tr.total th,tr.total td{font-weight:600;border-top:2px solid var(--border-strong)}
@media (max-width:640px){table.stack{min-width:0}table.stack thead{display:none}table.stack tr,table.stack th,table.stack td{display:block}
table.stack tr{padding:8px 0;border-bottom:1px solid var(--border-subtle)}table.stack th,table.stack td{padding:2px 0;border:0;text-align:left}
table.stack td[data-label]::before{content:attr(data-label) ": ";color:var(--text-muted);font-size:12px}}
/* Reading conversations (Phase 2 step 7): the question list and a conversation. */
.stat-link{margin-top:6px;font-size:13px;line-height:20px;font-weight:500;color:var(--brand-primary)}
.back-link{margin:0 0 12px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.chip{display:inline-flex;gap:6px;padding:3px 12px;border:1px solid var(--brand-primary);border-radius:999px;background:var(--brand-primary-soft);font-size:13px;line-height:20px;font-weight:500}.chip span{color:var(--text-muted);font-weight:400}
.notice.privacy{border-left-color:var(--brand-primary);background:var(--bg-subtle)}.notice.privacy strong{display:block;font-weight:600}.notice.privacy span{display:block;font-size:13px;line-height:20px;color:var(--text-secondary)}
table.questions td{vertical-align:top}table.questions td.when{font-variant-numeric:tabular-nums;color:var(--text-secondary)}table.questions td.when span{white-space:nowrap}
table.questions td.question{min-width:12rem;max-width:34rem;overflow-wrap:anywhere}table.questions td.question a{font-weight:500}
table.questions td.question small{display:block;font-size:12px;line-height:18px;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.tag{display:inline-block;padding:1px 8px;border-radius:999px;font-size:12px;line-height:18px;font-weight:500;white-space:nowrap}
.tag-model{background:var(--brand-primary-soft);color:var(--brand-primary)}.tag-faq{background:var(--status-live-soft);color:var(--status-live)}
.tag-fallback{background:var(--status-pending-soft);color:var(--status-pending)}.tag-none{background:var(--status-draft-soft);color:var(--status-draft)}
.pager{display:flex;gap:16px;margin:12px 0}
ol.thread{display:flex;flex-direction:column;gap:14px;margin:0 0 20px;padding:0;list-style:none}
.turn{display:flex;flex-direction:column;gap:8px;padding:14px 16px;border:1px solid var(--border-subtle);border-radius:12px;background:var(--bg-surface)}
.turn:target{border-color:var(--brand-primary);box-shadow:inset 4px 0 0 var(--brand-primary)}
.turn-head{display:flex;flex-wrap:wrap;gap:8px 12px;margin:0;font-size:12px;line-height:18px;color:var(--text-muted)}.turn-head b{color:var(--text-secondary)}
.said{max-width:60ch;padding:10px 14px;border-radius:12px;overflow-wrap:anywhere}.said p{margin:0;white-space:pre-wrap}
.said.visitor{align-self:flex-end;background:var(--bg-subtle)}.said.bot{align-self:flex-start;border:1px solid var(--border-subtle)}
.said .who{display:block;margin-bottom:2px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:var(--text-muted)}
.turn-meta{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:12px;line-height:18px;color:var(--text-secondary)}
.user .sign-out{flex:none;width:auto;min-height:0;margin:0;background:none;border:1px solid rgba(255,255,255,.24);border-radius:6px;padding:4px 8px;font:inherit;font-size:12px;line-height:16px;color:var(--text-sidebar-active);cursor:pointer}
.user .sign-out:hover{border-color:rgba(255,255,255,.5);background:none}.user .sign-out:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}