/* Nikanity design system — tokens + shared components, loaded before layout CSS on every page.
   Chrome and workspace surfaces use one neutral graphite palette in dark mode;
   the surface underneath defaults to dark platform-wide and only
   becomes the deck's original light surface when a visitor opts into it (js/theme.js
   sets [data-theme] on <html>, backed by one shared localStorage preference so the
   choice made on the home page follows into every workspace). */
:root{
 /* Surfaces — neutral graphite rather than blue-black. Dark by default. */
 --bg-canvas:#17191d;
 --bg-surface:#202328;
 --bg-surface-2:#292d33;
 --bg-surface-hover:#32373e;
 --border-subtle:#3a4048;
 --border-strong:#535b66;

 /* Text */
 --text-primary:#f3f4f6;
 --text-secondary:#c0c4cb;
 --text-tertiary:#9299a3;

 /* Top application bar — darker graphite for hierarchy, not navy. */
 --navbar-bg:#191b1f;
 --navbar-fg:#b0b5bd;
 --navbar-fg-active:#ffffff;
 --navbar-brand:#60a5fa;

 /* Dark theme's accent was #3b82f6, a slightly deeper, more blue-violet shade
    than the "Nikanity" wordmark's own --navbar-brand -- close enough to read
    as a mismatched, off-brand blue-violet next to it across every accent-
    coloured link, active nav state and icon on the platform. Pinned to the
    exact same hex as --navbar-brand instead, so accent and brand read as one
    colour in dark mode; light theme's own --accent is untouched. */
 --accent:#60a5fa;
 --accent-hover:#2563eb;
 --accent-soft:rgba(96,165,250,.18);
 --success:#22c55e; --success-soft:rgba(34,197,94,.16);
 --warning:#fbbf24; --warning-soft:rgba(251,191,36,.16); --warning-text:#fde68a;
 --danger:#f87171;  --danger-soft:rgba(248,113,113,.16);
 --info:#2dd4bf;    --info-soft:rgba(45,212,191,.16); --info-text:#5eead4;
 --neutral:#94a3b8; --neutral-soft:rgba(148,163,184,.14);
 --track-bg:#3a4048;
 --navbar-glass-bg:rgba(25,27,31,.90);
 --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23a3aec8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

 --radius-sm:8px; --radius-md:12px; --radius-lg:18px; --radius-full:999px;
 /* Compact workspace rhythm: text hierarchy is unchanged; only relaxed whitespace contracts. */
 --space-1:4px; --space-2:6px; --space-3:10px; --space-4:12px; --space-5:20px; --space-6:28px; --space-8:40px;
 --shadow-sm:0 1px 2px rgba(0,0,0,.35);
 --shadow-md:0 8px 24px rgba(0,0,0,.45);
 --shadow-lg:0 16px 48px rgba(0,0,0,.55);
 --font:'Segoe UI Variable Text','Segoe UI Variable','Segoe UI',system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
 --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
 /* Compact, Azure-inspired product typography. Components should consume
    these semantic sizes instead of inventing a page-specific scale. */
 --type-display:28px;
 --type-page:24px;
 --type-section:18px;
 --type-card:16px;
 --type-kpi:26px;
 --type-body:14px;
 --type-control:14px;
 --type-small:12px;
 --type-meta:11px;
}

/* Light theme — the deck's original light application surface, opt-in only.
   Chrome tokens (navbar-*) are intentionally repeated unchanged: the top bar
   stays the same dark navy regardless of which surface theme is active. */
:root[data-theme="light"]{
 --bg-canvas:#f4f6fa;
 --bg-surface:#ffffff;
 --bg-surface-2:#f4f6fa;
 --bg-surface-hover:#edf1f8;
 --border-subtle:#e1e7f0;
 --border-strong:#cbd5e6;

 --text-primary:#1b2437;
 --text-secondary:#55617a;
 --text-tertiary:#64748b;

 --navbar-bg:#23262b;
 --navbar-fg:#b8bdc5;
 --navbar-fg-active:#ffffff;
 --navbar-brand:#60a5fa;

 --accent:#2563eb;
 --accent-hover:#1d4ed8;
 --accent-soft:rgba(37,99,235,.10);
 --success:#16a34a; --success-soft:rgba(22,163,74,.12);
 --warning:#f59e0b; --warning-soft:rgba(245,158,11,.14); --warning-text:#b45309;
 --danger:#dc2626;  --danger-soft:rgba(220,38,38,.12);
 --info:#14b8a6;    --info-soft:rgba(20,184,166,.14); --info-text:#0f766e;
 --neutral:#64748b; --neutral-soft:rgba(100,116,139,.12);
 --track-bg:#e2e8f0;
 --navbar-glass-bg:rgba(255,255,255,.9);
 --select-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2355617a' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

 --shadow-sm:0 1px 2px rgba(27,36,55,.06);
 --shadow-md:0 8px 24px rgba(27,36,55,.10);
 --shadow-lg:0 16px 48px rgba(27,36,55,.14);
}

*{box-sizing:border-box}
/* Selected text otherwise falls back to the browser/OS default highlight --
   on Windows with a violet/purple system accent colour this renders as an
   off-brand purple wash behind whatever text a customer selects, anywhere
   on the platform, since no ::selection rule was ever defined. Pin it to
   the same brand blue as the "Nikanity" wordmark (--navbar-brand) instead,
   identical in both themes, so a text selection always reads as this
   platform's own colour rather than whatever the visitor's OS happens to
   be themed in. */
::selection{background:var(--navbar-brand);color:#fff}
::-moz-selection{background:var(--navbar-brand);color:#fff}
html{font-family:var(--font);font-size:16px;font-synthesis:none}
body{
 margin:0;font-family:var(--font);background:var(--bg-canvas);color:var(--text-primary);
 -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.45;font-size:var(--type-body);
}
[hidden]{display:none!important}
h1,h2,h3,h4,h5,h6{font-family:inherit;margin:0 0 var(--space-2);font-weight:700;letter-spacing:-.01em}
h1{font-size:var(--type-display);line-height:1.2}
h2{font-size:var(--type-section);line-height:1.3}
h3{font-size:var(--type-card);line-height:1.35;color:var(--text-primary)}
p{margin:0 0 var(--space-2);color:var(--text-secondary)}
a{color:var(--accent)}
.ops-code-block{background:var(--surface-inset,rgba(0,0,0,.04));border:1px solid var(--border-subtle);border-radius:8px;padding:12px;font-family:var(--font-mono);font-size:14px;line-height:1.5;overflow-x:auto;white-space:pre;margin:0 0 14px}
.cli-output,.cli-prompt,.cli-input-row input{font-family:var(--font-mono)}

/* ── Application chrome ───────────────────────────────────────────────────
   Dark navy bar with the brand, a horizontal section menu and the user
   avatar; below it a white sub-header carrying the page title and Ask Nikan.
   Rendered by js/nav-common.js so every workspace shares one implementation. */
.appbar{
 display:flex;align-items:center;gap:var(--space-4);
 background:var(--navbar-bg);padding:0 20px;height:52px;
 position:sticky;top:0;z-index:30;
}
.appbar .brand{
 display:flex;align-items:center;gap:8px;flex:none;
 font-size:17px;font-weight:800;color:var(--navbar-brand);text-decoration:none;
}
.mainnav{display:flex;align-items:center;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.mainnav a{
 display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
 padding:6px 10px;border-radius:var(--radius-sm);text-decoration:none;
 color:var(--navbar-fg);font-size:var(--type-control);font-weight:600;
 transition:background .15s,color .15s;
}
/* Hidden above the mobile breakpoint; below it, .mainnav becomes a hidden
   dropdown panel this button reveals -- see the 820px media query below
   and js/nav-common.js's renderNikanityChrome(). */
.nav-toggle{
 display:none;flex:none;color:var(--navbar-fg);background:transparent;border:none;cursor:pointer;
 align-items:center;justify-content:center;padding:8px;border-radius:var(--radius-sm);
}
.nav-toggle:hover{background:rgba(255,255,255,.08);color:var(--navbar-fg-active)}
.mainnav a svg{flex:none;opacity:.9;width:15px;height:15px}
.mainnav a:hover{background:rgba(255,255,255,.08);color:var(--navbar-fg-active)}
.mainnav a.active{background:var(--accent);color:var(--navbar-fg-active)}
.mainnav a.active svg{opacity:1}
.appbar .avatar{
 flex:none;width:30px;height:30px;border-radius:50%;background:var(--accent);
 color:#fff;font-size:var(--type-control);font-weight:700;display:flex;align-items:center;justify-content:center;
 cursor:pointer;border:none;
}
.account-menu{position:relative;display:inline-flex;flex:none}
.account-panel{
 position:absolute;right:0;top:calc(100% + 10px);z-index:40;
 width:min(280px,calc(100vw - 24px));padding:16px;
 display:grid;gap:14px;background:var(--bg-surface);color:var(--text-primary);
 border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-lg)
}
.account-panel[hidden]{display:none}
.account-panel strong{font-size:var(--type-control);overflow-wrap:anywhere}
.account-panel label{display:grid;gap:6px;font-size:var(--type-control);font-weight:600}
.account-panel label[hidden]{display:none}
.account-panel select{width:100%;max-width:100%;margin:0!important;background:var(--bg-surface)!important;color:var(--text-primary)!important;border:1px solid var(--border-subtle)!important}
.appbar .signout{
 flex:none;color:var(--navbar-fg);background:transparent;border:none;cursor:pointer;
 display:inline-flex;align-items:center;justify-content:center;padding:6px;
 border-radius:var(--radius-sm);
}
.appbar .signout svg{width:17px;height:17px}
.appbar .signout:hover{background:rgba(255,255,255,.08);color:var(--navbar-fg-active)}
.alert-center{position:relative;flex:none}
.alert-button{position:relative;width:38px;height:38px;padding:7px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);color:var(--navbar-fg-active);cursor:pointer}
.alert-button:hover,.alert-button[aria-expanded="true"]{background:rgba(255,255,255,.1);color:var(--navbar-fg-active)}
.alert-button svg{width:22px;height:22px;stroke-width:1.9}
.alert-count{position:absolute;top:-3px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:#dc2626;color:#fff;font-size:10px;font-weight:800;line-height:17px;text-align:center;border:2px solid var(--navbar-bg)}
.alert-panel{position:absolute;top:40px;right:0;width:min(360px,calc(100vw - 24px));max-height:min(560px,75vh);overflow:auto;background:var(--bg-surface);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:10px;box-shadow:var(--shadow-lg);z-index:120;font-size:10px;line-height:1.35}
.alert-panel-head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);z-index:1}
.alert-panel-head>div{display:grid;gap:1px}.alert-panel-head strong,.alert-panel-head small{font-size:10px}.alert-panel-head small{color:var(--text-tertiary)}
.alert-refresh{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;padding:4px;background:transparent;color:var(--text-secondary);border:1px solid var(--border-subtle);border-radius:6px}
.alert-refresh svg{width:13px;height:13px}.alert-list{display:grid}.alert-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding:8px 10px;border-bottom:1px solid var(--border-subtle);border-left:2px solid var(--warning)}
.alert-item.alert-critical{border-left-color:var(--danger)}.alert-item.alert-info{border-left-color:var(--accent)}
.alert-item>div{display:grid;gap:2px;min-width:0}.alert-item span{font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary)}.alert-item strong,.alert-item small{font-size:10px;overflow-wrap:anywhere}.alert-item small{color:var(--text-secondary)}
.alert-item button{align-self:center;padding:4px 6px;font-size:9px}.alert-item em{align-self:center;font-size:9px;color:var(--text-tertiary)}.alert-empty{padding:12px;color:var(--text-secondary);font-size:10px}
.governance-policy-groups{display:grid;gap:14px}.governance-policy-groups>.ops-panel{margin:0;background:var(--bg-canvas)}

/* Sub-header: page title only. Ask Nikan is the authenticated floating launcher. */
.subbar{
 display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
 background:var(--bg-surface);border-bottom:1px solid var(--border-subtle);
 padding:14px 32px;
}
.subbar h1{margin:0;font-size:var(--type-page)}
.nikan-floating-ask{
 position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(24px,env(safe-area-inset-bottom));
 z-index:80;width:58px;height:58px;padding:0;border-radius:50%;
 display:inline-flex;align-items:center;justify-content:center;
 color:#fff;background:var(--accent);border:1px solid color-mix(in srgb,var(--accent),#fff 22%);
 box-shadow:0 12px 32px rgba(0,0,0,.3);transition:transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.nikan-floating-ask svg{width:25px;height:25px}
.nikan-floating-ask:hover{color:#fff;background:var(--accent-hover);border-color:var(--accent-hover);transform:translateY(-2px);box-shadow:0 16px 36px rgba(0,0,0,.36)}
.nikan-floating-ask:active{transform:translateY(0)}

:root{--assistant-width:clamp(380px,36vw,520px)}
body{transition:padding-right .2s ease}
body.assistant-open{padding-right:var(--assistant-width)}
body.assistant-resizing{transition:none}
.assistant-shell{position:fixed;inset:0;z-index:100;pointer-events:none}
.assistant-shell[hidden]{display:none}
.assistant-backdrop{
 position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;border-radius:0;
 background:rgba(15,23,42,.42);opacity:0;transition:opacity .2s ease;display:none;
}
.assistant-backdrop:hover{background:rgba(15,23,42,.42);border:0}
.assistant-drawer{
 position:absolute;inset:0 0 0 auto;width:var(--assistant-width);background:var(--bg-surface);
 border-left:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);
 transform:translateX(100%);transition:transform .2s ease;
 display:flex;flex-direction:column;pointer-events:auto;
}
.assistant-shell.open .assistant-backdrop{opacity:1}
.assistant-shell.open .assistant-drawer{transform:translateX(0)}
.assistant-resize-handle{position:absolute;top:0;left:-5px;width:10px;height:100%;cursor:ew-resize;z-index:1;background:transparent}
.assistant-resize-handle:hover,.assistant-resize-handle:focus-visible{background:var(--accent);opacity:.5;outline:none}
body.assistant-resizing .assistant-drawer iframe{pointer-events:none}
.assistant-drawer-head{
 min-height:56px;padding:10px 16px;border-bottom:1px solid var(--border-subtle);
 display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.assistant-drawer-head h2{margin:0;font-size:20px}
.assistant-close{font-size:34px;line-height:1;padding:4px 10px;background:transparent;border-color:transparent}
.assistant-drawer iframe{width:100%;height:100%;border:0;background:var(--bg-canvas)}

@media (max-width:820px){
 .appbar{padding:0 12px;gap:8px}
 .subbar{padding:12px 16px;flex-wrap:wrap}
 .subbar h1{font-size:var(--type-section)}
 .appbar .brand span{display:none}
 .alert-panel{position:fixed;top:58px;left:12px;right:12px;width:auto;max-height:70vh}
 .nav-toggle{display:inline-flex}
 /* The links move from a horizontal-scroll strip into a full-width dropdown
    panel toggled by .nav-toggle, so the bar itself never has to hold more
    than an icon-sized brand, the toggle, switches, theme and sign-out. */
 .mainnav{display:none}
 .appbar.nav-open{position:relative}
 .appbar.nav-open .mainnav{
  display:flex;flex-direction:column;align-items:stretch;gap:2px;
  position:absolute;top:100%;left:0;right:0;
  background:var(--navbar-bg);padding:8px;box-shadow:var(--shadow-lg);
  max-height:calc(100vh - 52px);overflow-y:auto;z-index:29;
 }
 .appbar.nav-open .mainnav a{padding:12px 14px;font-size:var(--type-control)}
 body.assistant-open{padding-right:0;overflow:hidden}
 .assistant-shell{pointer-events:auto}
 .assistant-backdrop{display:block}
 .assistant-drawer{width:min(520px,100%)}
 .assistant-resize-handle{display:none}
}
@media (max-width:480px){
 .alert-item{grid-template-columns:1fr}
 .alert-item button,.alert-item em{justify-self:start}
 .nikan-floating-ask{right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));width:54px;height:54px}
}

/* Buttons */
button,.btn{
 font-family:var(--font);font-size:var(--type-control);font-weight:600;border-radius:var(--radius-sm);
 padding:8px 12px;border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,transform .1s;
 background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-subtle);
 display:inline-flex;align-items:center;gap:8px;text-decoration:none;
}
button:hover,.btn:hover{background:var(--bg-surface-hover);border-color:var(--border-strong)}
button:active,.btn:active{transform:translateY(1px)}
button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
 outline:2px solid var(--accent);outline-offset:2px;
}
.btn-primary,.btn.primary,button.primary{
 background:var(--accent);border-color:var(--accent);color:#fff;
}
.btn-primary:hover,.btn.primary:hover,button.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn-secondary,.btn.secondary,button.secondary{background:var(--bg-surface);border-color:var(--border-strong)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#fff}
.btn-danger:hover{background:#b91c1c}
.btn-ghost,.btn.ghost{background:transparent;border-color:transparent;color:var(--text-secondary)}
.btn-ghost:hover,.btn.ghost:hover{background:var(--bg-surface-hover);color:var(--text-primary)}

/* Form controls */
input,select,textarea{
 font-family:var(--font);font-size:var(--type-control);color:var(--text-primary);
 background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
 padding:8px 10px;width:100%;transition:border-color .15s,background .15s;
}
/* Boxed-content principle: short values and actions sit centrally in their
   controls. Long-form writing and tabular content retain reading alignment. */
input:not([type="checkbox"]):not([type="radio"]),select{text-align:center;text-align-last:center}
textarea{text-align:left}
input,select,textarea,button,.btn,table,th,td{font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--text-tertiary)}
input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}
input:focus,select:focus,textarea:focus{border-color:var(--accent)}
label{display:block;font-size:13px;color:var(--text-secondary);margin-bottom:var(--space-1);font-weight:600}
.question-rationale{display:block;margin:3px 0 10px;color:var(--text-secondary);font-size:12px;font-weight:400;line-height:1.45;font-style:normal;text-transform:none;letter-spacing:normal}
.scope-question>.question-rationale{font-size:12px}
select{appearance:none;background-image:var(--select-arrow);background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}

/* Cards & tiles */
.card{
 background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
 padding:var(--space-4);box-shadow:var(--shadow-sm);
}
.tile{
 background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
 padding:var(--space-4);text-align:center;box-shadow:var(--shadow-sm);
}
.tile h2,.card>h2:first-child{font-size:28px;font-weight:800;margin-bottom:2px}
.tile p{font-size:var(--type-small);color:var(--text-tertiary);margin:0;text-transform:uppercase;letter-spacing:.04em}

/* Status badges */
.badge{
 display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:var(--radius-full);
 font-size:var(--type-small);font-weight:700;letter-spacing:.02em;white-space:nowrap;
}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-complete,.badge-compliant,.badge-healthy,.badge-published,.badge-approved,.badge-active,.badge-low,.badge-saved,.badge-certified{background:var(--success-soft);color:var(--success)}
.badge-in-progress,.badge-warning,.badge-medium,.badge-pending,.badge-review,.badge-in-review,.badge-sync-warning,.badge-planned{background:var(--warning-soft);color:var(--warning-text)}
.badge-not-started,.badge-draft,.badge-neutral,.badge-open,.badge-not-assessed{background:var(--neutral-soft);color:var(--neutral)}
.badge-critical,.badge-high,.badge-degraded,.badge-down,.badge-rejected,.badge-action-needed,.badge-blocked{background:var(--danger-soft);color:var(--danger)}
.badge-info{background:var(--info-soft);color:var(--info-text)}
.text-danger{color:var(--danger)}

/* Tables */
table{width:100%;border-collapse:collapse;background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
table.card{padding:0}
th,td{text-align:left;padding:10px 12px;font-size:var(--type-body);border-bottom:1px solid var(--border-subtle)}
th{color:var(--text-tertiary);text-transform:uppercase;font-size:var(--type-meta);letter-spacing:.05em;font-weight:700;background:var(--bg-surface-2)}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--bg-surface-2)}
td button{padding:6px 10px;font-size:var(--type-small)}

/* Empty state */
.empty-state{
 padding:var(--space-6) var(--space-4);text-align:center;color:var(--text-tertiary);
 border:1px dashed var(--border-strong);border-radius:var(--radius-lg);font-size:var(--type-body);
 background:var(--bg-surface);
}
.empty-state svg{opacity:.5;margin-bottom:var(--space-2)}

/* Section rhythm */
.section-title{font-size:var(--type-small);font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--text-tertiary);margin:var(--space-6) 0 var(--space-3)}

/* Scrollbar polish */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:var(--radius-full)}
::-webkit-scrollbar-track{background:transparent}

/* Theme toggle — sun/moon icon button, used in the landing navbar and the
   in-app chrome. Same visual language as .appbar .signout. */
.theme-toggle{
 flex:none;background:transparent;border:none;cursor:pointer;color:inherit;
 display:inline-flex;align-items:center;justify-content:center;padding:7px;
 border-radius:var(--radius-sm);width:38px;height:38px;
}
.theme-toggle svg{width:22px;height:22px;stroke-width:1.9}
.theme-toggle:hover{background:var(--bg-surface-hover)}
.appbar .theme-toggle{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1);color:var(--navbar-fg-active)}
.appbar .theme-toggle:hover{background:rgba(255,255,255,.08);color:var(--navbar-fg-active)}

/* Workspace/domain switcher selects in the top bar (js/nav-common.js,
   js/nav-architect.js). Their closed pill is styled inline against the dark
   navbar, but browsers render the OPENED option list with their own native
   popup background regardless of the select's own background -- so the
   options need an explicit background/color of their own, or inherited
   white text lands on a white popup and disappears. */
.appbar select option{background-color:var(--bg-surface);color:var(--text-primary)}

/* Centre short values inside metric boxes; prose and tables keep their
   natural reading alignment. */
.tile,.executive-kpi,.admin-kpi,.modernise-kpi,
.business-cost-summary>div,.business-option-kpis>div,.iac-platform-metrics>a{text-align:center}

/* Shared workflow polish for Strategy & Architect and Build & Operate. */
.workflow-steps li:not(:last-child)::after{top:50%;height:2px;transform:translateY(-50%)}
.workflow-steps li:not(:last-child)::before{top:50%;width:9px;height:9px;border-width:2px;transform:translateY(-50%) rotate(45deg)}
.connect-workflow-strip>i{align-self:center;color:var(--text-secondary);font-size:24px;font-weight:900;line-height:1}
.lz-progress li:not(:last-child)::after{top:50%;height:2px;background:var(--border-strong);transform:translateY(-50%)}

/* Platform-wide overflow safety net -- loaded on every runtime page, so this
   is the one place a fix reaches pages that load neither css/architect.css
   nor css/build-operate-responsive.css (the landing pages, onboarding,
   the modules/discover-design/* legacy pages, ai/index.html). Purely
   additive: it only lets a viewport-wider-than-intended page/element shrink
   back to fit, it never narrows an element that already fits. */
/* overflow-x:clip, not hidden -- hidden forces the other (unset) axis to
   compute as auto, which makes body its own scrolling box in this browser
   engine and silently breaks position:sticky for every sticky rail on the
   platform (.subnav/.ops-rail/.governance-subnav/.modernise-rail/etc) --
   confirmed by an isolated, controlled reproduction before and after this
   change. clip achieves the same horizontal-overflow containment without
   that side effect. */
html,body{max-width:100%;overflow-x:clip}
img,svg{max-width:100%;height:auto}
input,select,textarea,button{max-width:100%}
pre,code{overflow-wrap:anywhere}

/* Titles remain links without default underlines; keyboard focus stays visible. */
:is(h1,h2,h3,h4,h5,h6,.item-title) a:is(:link,:visited,:hover,:focus){text-decoration:none}
:is(h1,h2,h3,h4,h5,h6,.item-title) a:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}


/* Shared Strategy & Architecture questionnaire 'Others' response. */
.nikan-other-answer{margin:8px 0 0 28px;max-width:520px}
.nikan-other-answer textarea{min-height:64px;color:var(--text-primary);resize:vertical}
.nikan-other-answer textarea::placeholder,.scope-other-answer textarea::placeholder{color:var(--text-muted,#94a3b8);opacity:.62}
.nikan-other-option{margin-top:4px}

/* Public cookie notice follows the same compact bottom-right pattern as the
   authenticated portal's privacy controls. */
.cookie-consent{
 position:fixed;right:24px;bottom:24px;z-index:80;width:min(534px,calc(100vw - 32px));
 padding:24px 30px;border:1px solid #3e4141;border-radius:16px;
 background:#202322;color:#e8e9e8;box-shadow:0 18px 38px rgba(0,0,0,.32);
}
.cookie-consent>p{max-width:430px;margin:0 0 18px;font-size:20px;font-weight:650;line-height:1.42}
.cookie-consent-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.cookie-consent-actions button,.cookie-text-button{min-height:0;padding:0;border:0;background:transparent;color:#d6d8d7;font:600 16px/1.2 var(--font,ui-sans-serif,system-ui,sans-serif);cursor:pointer}
.cookie-accept{padding:8px 14px!important;border:1px solid #444!important;border-radius:10px!important;background:#292c2b!important;box-shadow:0 1px 3px rgba(0,0,0,.45)!important}
.cookie-text-button{text-decoration:underline;text-underline-offset:3px}
.cookie-consent-actions .cookie-text-button:not(:first-child){text-decoration:none}
.cookie-consent-actions button:hover,.cookie-text-button:hover{color:#fff}
@media(max-width:760px){.cookie-consent{right:16px;bottom:16px;padding:20px}.cookie-consent>p{font-size:17px}.cookie-consent-actions{gap:14px}.cookie-consent-actions button,.cookie-text-button{font-size:14px}}