/* BrokerLumen portal styles. Design tokens first (assessment section 6), then components.
   Icons: Lucide (ISC license, see /licenses/lucide-LICENSE.txt). */
@font-face { font-family: Manrope; src: url(/fonts/manrope-latin.woff2) format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: Inter; src: url(/fonts/inter-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --font-ui: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-display: Manrope, Inter, sans-serif;
  --fs-display: 28px; --fs-h2: 20px; --fs-h3: 16px; --fs-body: 14px; --fs-sm: 13px; --fs-xs: 12px; --fs-kpi: 32px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px;
  --h-control: 36px; --h-control-sm: 32px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px;
  --sidebar-w: 240px; --topbar-h: 56px;
  --z-sticky: 10; --z-sidebar: 30; --z-menu: 40; --z-toast: 50; --z-drawer: 60;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
:root, [data-theme=dark] { color-scheme: dark;
  --bg: #0A0F1E; --surface: #10172A; --surface-2: #141C33; --surface-hover: #18213B; --border: #1F2A44; --border-strong: #2C3A5E;
  --text: #ECEAE4; --text-2: #A8AEBD; --text-3: #8A91A3;
  --accent: #F1C979; --accent-solid: #F1C979; --on-accent: #1A1406; --accent-subtle: rgba(241,201,121,.10); --accent-line: rgba(241,201,121,.40);
  --success: #6FD3A0; --success-bg: rgba(111,211,160,.10); --success-line: rgba(111,211,160,.30);
  --warning: #F5B65A; --warning-bg: rgba(245,182,90,.10); --warning-line: rgba(245,182,90,.30);
  --danger: #F59A8F; --danger-bg: rgba(245,154,143,.10); --danger-line: rgba(245,154,143,.30); --danger-solid: #B42318;
  --info: #93C5FD; --info-bg: rgba(147,197,253,.10); --info-line: rgba(147,197,253,.30);
  --focus: 0 0 0 3px rgba(241,201,121,.35);
  --shadow-xs: none; --shadow-sm: inset 0 1px 0 rgba(255,255,255,.04); --shadow-md: 0 8px 24px rgba(0,0,0,.35); --shadow-lg: 0 16px 48px rgba(0,0,0,.5);
  --input-bg: #0C1326; --topbar-bg: rgba(10,15,30,.85); --scrim: rgba(3,6,14,.6);
}
[data-theme=light] { color-scheme: light;
  --bg: #F7F7F5; --surface: #FFFFFF; --surface-2: #FAFAF9; --surface-hover: #F3F4F6; --border: #E6E4DF; --border-strong: #D2D0CA;
  --text: #111827; --text-2: #4B5563; --text-3: #6B7280;
  --accent: #A16207; --accent-solid: #1F2937; --on-accent: #FFFFFF; --accent-subtle: #FEF6E4; --accent-line: #E9C987;
  --success: #15803D; --success-bg: #ECFDF3; --success-line: #ABEFC6;
  --warning: #B45309; --warning-bg: #FFFAEB; --warning-line: #FEDF89;
  --danger: #B42318; --danger-bg: #FEF3F2; --danger-line: #FECDCA; --danger-solid: #B42318;
  --info: #1D4ED8; --info-bg: #EFF4FF; --info-line: #C7D7FE;
  --focus: 0 0 0 3px rgba(161,98,7,.30);
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05); --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04); --shadow-md: 0 4px 12px rgba(16,24,40,.08); --shadow-lg: 0 16px 40px rgba(16,24,40,.14);
  --input-bg: #FFFFFF; --topbar-bg: rgba(247,247,245,.88); --scrim: rgba(17,24,39,.35);
}
/* Legacy aliases so older markup keeps working. */
:root, [data-theme] { --line: var(--border); --muted: var(--text-2); --hint: var(--text-3); --gold: var(--accent); --panel: var(--surface); --tint: var(--surface-2); --tint2: var(--surface-hover);
  --green: var(--success); --red: var(--danger); --amber: var(--warning); --blue: var(--info); --gold-line: var(--accent-line); --gold-bg: var(--accent-subtle);
  --red-bg: var(--danger-bg); --red-line: var(--danger-line); --green-bg: var(--success-bg); --green-line: var(--success-line); --blue-bg: var(--info-bg); --on-gold: var(--on-accent); }

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; font: 400 var(--fs-body)/20px var(--font-ui); color: var(--text); background: var(--bg); min-height: 100vh; -webkit-font-smoothing: antialiased; }
[data-theme=dark] body { background: radial-gradient(900px 400px at 85% -10%, rgba(241,201,121,.035), transparent), var(--bg); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.01em; margin: 0 0 .5em; color: var(--text); }
h1 { font-size: var(--fs-display); line-height: 34px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: var(--fs-h2); line-height: 28px; font-weight: 650; } h3 { font-size: var(--fs-h3); line-height: 24px; font-weight: 600; font-family: var(--font-ui); }
p { margin: 0 0 12px; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
/* Links inside muted body text are underlined so they do not rely on color alone (WCAG 1.4.1, axe link-in-text-block). */
.muted a:not(.btn), .errorpage p a:not(.btn) { text-decoration: underline; text-underline-offset: 2px; }
code { font: 12.5px ui-monospace, Menlo, monospace; background: var(--surface-hover); padding: 2px 6px; border-radius: var(--r-xs); word-break: break-all; }
hr { border: 0; border-top: 1px solid var(--border); margin: 16px 0; }
.muted { color: var(--text-2); } .small { font-size: var(--fs-sm); } .right { text-align: right; white-space: nowrap; } .sep { color: var(--border-strong); margin: 0 6px; }
.tnum, table, time { font-variant-numeric: tabular-nums; }
svg.icon { flex: none; vertical-align: middle; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-sm); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--surface); color: var(--text); padding: 8px 12px; border-radius: var(--r-sm); border: 1px solid var(--border-strong); }
.skip:focus { left: 8px; }
::placeholder { color: var(--text-3); opacity: 1; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Shell: sidebar, top bar ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; z-index: var(--z-sidebar); overflow-y: auto; }
.sidebar-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand em { font-style: normal; font-weight: 600; font-size: var(--fs-xs); color: var(--accent); border: 1px solid var(--accent-line); padding: 1px 8px; border-radius: var(--r-full); white-space: nowrap; }
.sidebar-head { margin-bottom: 18px; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a { position: relative; display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; }
.sidenav a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.sidenav a.on { background: var(--surface-hover); color: var(--text); }
.sidenav a.on::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); }
.sidenav a.on svg { color: var(--accent); }
.sidenav-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.nav-close, .nav-open, .iconbtn.nav-close, .iconbtn.nav-open, .brand-mobile, .scrim { display: none; }
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.has-sidebar .shell { margin-left: var(--sidebar-w); }
.topbar { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 32px; background: var(--topbar-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.topbar-title { flex: 1; min-width: 0; } .page-title { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.public .topbar-title { flex: 1; }
.topbar-r { display: flex; align-items: center; gap: 8px; }
.topnav-link { color: var(--text-2); font-weight: 500; padding: 0 8px; } .topnav-link[aria-current] { color: var(--text); }
.scope-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500; color: var(--text-2); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 32px 32px 56px; flex: 1; }
.wrap.wide { max-width: 1320px; }
.wrap:focus { outline: none; box-shadow: none; }
.footer { border-top: 1px solid var(--border); padding: 16px 32px; color: var(--text-3); font-size: var(--fs-xs); text-align: center; }
.footer p { margin: 0; }
.topprogress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--accent); z-index: 100; opacity: 0; transition: width 8s var(--ease), opacity .2s; }
.topprogress.run { width: 85%; opacity: 1; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--h-control); padding: 0 14px; border-radius: var(--r-sm); border: 1px solid var(--accent-solid); background: var(--accent-solid); color: var(--on-accent); font: 600 var(--fs-body)/1 var(--font-ui); cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, opacity .15s; text-decoration: none; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
[data-theme=light] .btn:hover { filter: none; background: #111827; }
.btn-secondary, .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-secondary:hover, .btn-ghost:hover, [data-theme=light] .btn-secondary:hover, [data-theme=light] .btn-ghost:hover { background: var(--surface-hover); filter: none; }
.btn-danger, [data-theme=light] .btn-danger { background: var(--danger-solid); border-color: var(--danger-solid); color: #fff; }
.btn-danger:hover, [data-theme=light] .btn-danger:hover { background: #912018; filter: none; }
.btn.danger { color: var(--danger); }
.btn-sm { height: var(--h-control-sm); padding: 0 10px; font-size: var(--fs-sm); }
.btn-block { width: 100%; }
.btn[aria-busy=true] { opacity: .7; cursor: progress; }
.btn[aria-busy=true]::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; font-size: var(--fs-sm); padding: 0; }
.linkbtn.danger { color: var(--danger); }
form.inline { display: inline; margin: 0; }
.iconbtn { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--r-sm); border: 1px solid transparent; background: transparent; color: var(--text-2); cursor: pointer; padding: 0; list-style: none; }
.iconbtn:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.iconbtn.danger:hover { color: var(--danger); background: var(--danger-bg); }
.iconbtn.bordered { border-color: var(--border-strong); background: var(--surface); width: 36px; height: 36px; }
.theme-toggle .ico-sun, [data-theme=light] .theme-toggle .ico-moon { display: inline-flex; }
.theme-toggle .ico-moon, [data-theme=light] .theme-toggle .ico-sun { display: none; }
/* Tooltip: shows on hover and on keyboard focus. The accessible name comes from aria-label. */
[data-tip] { position: relative; }
[data-tip]::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(2px); background: #111827; color: #F9FAFB; font: 500 12px/16px var(--font-ui); padding: 4px 8px; border-radius: var(--r-xs); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; z-index: var(--z-menu); }
[data-theme=dark] [data-tip]::after { background: #ECEAE4; color: #0A0F1E; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.topbar [data-tip]::after, .sidebar [data-tip]::after, .drawer-head [data-tip]::after { bottom: auto; top: calc(100% + 6px); }
td:last-child [data-tip]::after, .row-actions [data-tip]::after, .topbar [data-tip]::after, details.menu [data-tip]::after, .remind-btn-wrap [data-tip]::after, .remind-btn[data-tip]::after, details.menu > [data-tip]::after { left: auto; right: 0; transform: translateY(2px); }
td:last-child [data-tip]:hover::after, td:last-child [data-tip]:focus-visible::after, .row-actions [data-tip]:hover::after, .row-actions [data-tip]:focus-visible::after, .topbar [data-tip]:hover::after, .topbar [data-tip]:focus-visible::after, details.menu [data-tip]:hover::after, details.menu [data-tip]:focus-visible::after, .remind-btn-wrap [data-tip]:hover::after, .remind-btn-wrap [data-tip]:focus-visible::after, .remind-btn[data-tip]:hover::after, .remind-btn[data-tip]:focus-visible::after, details.menu > [data-tip]:hover::after, details.menu > [data-tip]:focus-visible::after { transform: none; }
body { overflow-x: clip; }
details[open] > summary[data-tip]::after { display: none; }

/* ---------- Menus (details) ---------- */
details.menu { position: relative; display: inline-block; }
details.menu > summary { list-style: none; cursor: pointer; }
details.menu > summary::-webkit-details-marker, details.multi > summary::-webkit-details-marker { display: none; }
.menu-pop { position: absolute; right: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 6px; z-index: var(--z-menu); text-align: left; }
.menu-pop.left { left: 0; right: auto; }
.menu-item { display: flex; width: 100%; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border: 0; background: none; border-radius: var(--r-sm); color: var(--text); font: 500 var(--fs-sm) var(--font-ui); cursor: pointer; white-space: nowrap; text-align: left; }
.menu-item svg { color: var(--text-3); }
.menu-item:hover { background: var(--surface-hover); text-decoration: none; }
.menu-item.danger, .menu-item.danger svg { color: var(--danger); }
.menu-form { margin: 0; }
.menu-sep { margin: 6px 0; }
.menu-id { display: flex; flex-direction: column; gap: 2px; padding: 6px 10px; }
.avatar-btn { display: inline-grid; place-items: center; border-radius: var(--r-full); padding: 2px; }
.avatar { display: inline-grid; place-items: center; border-radius: var(--r-full); background: var(--accent-subtle); color: var(--accent); font: 700 12px/1 var(--font-ui); border: 1px solid var(--accent-line); flex: none; }
.avatar-md { width: 30px; height: 30px; } .avatar-sm { width: 28px; height: 28px; font-size: 11px; }

/* ---------- Page header, cards ---------- */
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.pagehead h1 { margin: 0; display: flex; align-items: center; gap: 10px; }
.pagehead p.muted { margin: 4px 0 0; }
.pagehead .actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.count-chip { font: 600 var(--fs-xs)/1 var(--font-ui); padding: 4px 8px; border-radius: var(--r-full); background: var(--surface-hover); color: var(--text-2); border: 1px solid var(--border); }
.eyebrow { color: var(--accent); font-weight: 600; font-size: var(--fs-xs); letter-spacing: .02em; margin: 0 0 6px; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumb { font-size: var(--fs-sm); color: var(--text-3); margin: 0 0 12px; display: flex; align-items: center; gap: 4px; }
.crumb a { color: var(--text-2); }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.card.flush { padding: 0; overflow: hidden; }
.card.flush > .card-pad { padding: 16px 20px; }
.cardhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.cardhead h2 { margin: 0; }
.errorpage { text-align: center; padding: 48px 24px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.narrow-form { max-width: 760px; }
.danger-card { border-color: var(--danger-line); }

/* ---------- Forms ---------- */
.form label { display: block; font-size: var(--fs-sm); color: var(--text); font-weight: 500; margin-bottom: 14px; }
.form input:not([type=checkbox]):not([type=radio]):not([type=file]), .form select, .form textarea, .toolbar input[type=search], .filters input, .filters select {
  display: block; width: 100%; margin-top: 6px; height: var(--h-control); background: var(--input-bg); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-sm); padding: 0 12px; font: var(--fs-body) var(--font-ui); box-shadow: var(--shadow-xs); }
.form select[multiple] { height: auto; padding: 6px; }
.form textarea { height: auto; padding: 10px 12px; font: 13px/1.55 ui-monospace, Menlo, monospace; resize: vertical; }
.form input:focus, .form textarea:focus, .form select:focus, .toolbar input:focus, .filters input:focus, .filters select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }
.form .check, label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--text); line-height: 1.45; }
.form .check input, label.check input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.form input[type=file] { margin: 4px 0 14px; color: var(--text-2); }
.hint { font-weight: 400; color: var(--text-3); font-size: var(--fs-xs); }
.req { color: var(--danger); font-size: var(--fs-xs); }
input.locked { color: var(--text-2); background-color: var(--surface-hover) !important; cursor: not-allowed; }
fieldset.scope-box { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 16px; margin: 0 0 14px; } fieldset.scope-box legend { padding: 0 6px; font-weight: 600; }
.form-foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }
.dropzone { border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); padding: 24px; text-align: center; background: var(--surface-2); margin: 4px 0 14px; }
.dropzone svg { color: var(--text-3); }
.dropzone input[type=file] { margin: 10px auto 0 !important; display: block; }
.auth { display: flex; justify-content: center; padding-top: 32px; }
.auth-card { width: 100%; max-width: 420px; padding: 32px; }

/* ---------- Flash (inline form errors) and toasts ---------- */
.flash { border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 16px; font-size: var(--fs-body); border: 1px solid; }
.flash-error { background: var(--danger-bg); border-color: var(--danger-line); color: var(--text); }
.flash-success { background: var(--success-bg); border-color: var(--success-line); color: var(--text); }
.flash-info { background: var(--info-bg); border-color: var(--info-line); color: var(--text); }
.links { margin: 8px 0 0; padding-left: 18px; }
.toasts { position: fixed; right: 24px; bottom: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.toast { display: flex; align-items: flex-start; gap: 10px; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 12px 12px 12px 14px; font-size: var(--fs-body); animation: toastin .16s var(--ease); }
.toast > svg { margin-top: 1px; } .toast-success > svg { color: var(--success); } .toast-error > svg { color: var(--danger); } .toast-info > svg { color: var(--info); }
.toast-error { border-color: var(--danger-line); }
.toast-msg { flex: 1; padding-top: 1px; } .toast-x { width: 24px; height: 24px; margin: -2px -2px 0 0; }
.toast.out { opacity: 0; transform: translateY(8px); transition: opacity .16s, transform .16s; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } }

/* ---------- KPI cards ---------- */
.cards, .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 20px; }
.kpi { display: flex; flex-direction: column; gap: 6px; min-height: 112px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; color: var(--text); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s; }
.kpi:hover { border-color: var(--border-strong); text-decoration: none; transform: translateY(-1px); }
.kpi.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.kpi-label { font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; }
.kpi-row { display: flex; align-items: center; justify-content: space-between; }
.kpi-value { font: 700 var(--fs-kpi)/36px var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.kpi-sub { font-size: var(--fs-xs); color: var(--text-3); }
.kpi-success .kpi-value { color: var(--success); } .kpi-warning .kpi-value { color: var(--warning); } .kpi-danger .kpi-value { color: var(--danger); }
.ring .ring-bg { fill: none; stroke: var(--surface-hover); stroke-width: 3.5; } .ring .ring-fg { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; }
.stat span { display: block; color: var(--text-2); font-size: var(--fs-sm); }
.stat strong { font: 700 30px var(--font-display); } .stat em { font-style: normal; color: var(--text-3); font-size: var(--fs-sm); margin-left: 8px; }
.stat.gold strong { color: var(--accent); } .stat.red strong { color: var(--danger); }

/* ---------- Toolbar, filters, chips ---------- */
.toolbar, .filters { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.search { position: relative; flex: 0 1 300px; min-width: 200px; }
.search svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.toolbar .search input[type=search], .filters .search input { margin: 0; padding-left: 34px; width: 100%; }
.filters > input { width: 260px; margin: 0; } .filters select, .toolbar select { width: auto; min-width: 150px; margin: 0; }
.toolbar-r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
details.multi { position: relative; display: inline-block; }
details.multi > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: var(--h-control); padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; box-shadow: var(--shadow-xs); }
details.multi > summary svg { color: var(--text-3); }
details.multi > summary.on { border-color: var(--accent); background: var(--accent-subtle); }
details.multi > summary:hover { background: var(--surface-hover); }
.multi-list { position: absolute; z-index: var(--z-menu); top: calc(100% + 6px); left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-lg); padding: 8px 10px; min-width: 240px; max-height: 340px; overflow: auto; }
.multi-list label.check { display: flex; gap: 8px; align-items: center; margin: 0; padding: 6px 4px; font-size: var(--fs-sm); border-radius: var(--r-xs); }
.multi-list label.check:hover { background: var(--surface-hover); }
.multi-list label.check input { margin: 0; }
.opt-hint { margin-left: auto; }
.multi-foot { position: sticky; bottom: -8px; background: var(--surface); padding: 8px 0 2px; display: flex; justify-content: flex-end; border-top: 1px solid var(--border); margin-top: 6px; }
label.check.inline-check { display: flex; gap: 10px; align-items: center; } label.check.inline-check input { margin: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 10px; border-radius: var(--r-full); background: var(--accent-subtle); border: 1px solid var(--accent-line); color: var(--text); font-size: var(--fs-xs); font-weight: 500; }
.chip:hover { text-decoration: none; border-color: var(--accent); }
.chip-k { color: var(--text-2); } .chip svg { color: var(--text-2); }
.chips .clear { font-size: var(--fs-xs); font-weight: 600; margin-left: 4px; }
.sortby { margin-left: auto; font-size: var(--fs-sm); color: var(--text-2); } .sortby a { margin-left: 10px; color: var(--text-2); } .sortby a.active { color: var(--accent); font-weight: 600; }
.loading { opacity: .6; transition: opacity .15s; }

/* ---------- Tables ---------- */
.tablewrap { overflow-x: auto; }
.card > .tablewrap:first-child, .card.flush .tablewrap { margin: 0; }
table.grid { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.grid th { text-align: left; font-weight: 500; color: var(--text-2); font-size: var(--fs-xs); letter-spacing: .02em; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); white-space: nowrap; }
.grid th a { color: var(--text-2); display: inline-flex; align-items: center; gap: 4px; } .grid th a:hover { color: var(--text); text-decoration: none; }
.grid th[aria-sort] a { color: var(--text); }
.grid th svg { opacity: .7; }
.grid td { padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tbody tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: var(--surface-hover); }
.grid .mod { text-align: center; width: 48px; }
.grid td.ua { font-size: var(--fs-xs); color: var(--text-2); max-width: 280px; }
.grid td.actions-cell { text-align: right; white-space: nowrap; width: 1%; }
.rowacts { display: inline-flex; gap: 2px; align-items: center; justify-content: flex-end; }
.who { display: flex; flex-direction: column; color: var(--text); font-weight: 500; } .who span { font-size: var(--fs-xs); color: var(--text-3); font-weight: 400; }
.member { display: flex; align-items: center; gap: 10px; min-width: 0; }
.member a { color: var(--text); font-weight: 500; } .member a:hover { text-decoration: underline; }
.member .em { display: block; font-size: var(--fs-xs); color: var(--text-3); }
.title-cell { white-space: nowrap; color: var(--text-2); }
.statepill { display: inline-block; font: 600 11px/1 var(--font-ui); padding: 3px 6px; border-radius: var(--r-xs); background: var(--surface-hover); color: var(--text-2); border: 1px solid var(--border); margin-left: 6px; }
.bcell { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); white-space: nowrap; } .bcell svg { color: var(--text-3); }
.grid-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-2); }
.grid-foot .pager { margin: 0; }
tr.grouprow td { background: var(--accent-subtle); font-size: var(--fs-sm); border-top: 1px solid var(--accent-line); }
tr.grouprow span { opacity: .75; margin-left: 8px; }
#group-summary { margin-bottom: 18px; }
table.groupsum td, table.groupsum th { white-space: nowrap; }
tr.act-error td { background: var(--danger-bg); }
td.errs { color: var(--danger); font-size: var(--fs-sm); min-width: 220px; }
tr.inactive td { opacity: .6; }
.mapgrid select { min-width: 220px; }
.overdue-text { color: var(--danger); font-weight: 500; } .soon-text { color: var(--warning); }

/* ---------- Badges, dots ---------- */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); font-weight: 500; line-height: 16px; padding: 2px 8px; border-radius: var(--r-full); border: 1px solid var(--border); white-space: nowrap; color: var(--text-2); background: var(--surface-2); text-transform: capitalize; gap: var(--dot-gap); }
.badge-acknowledged, .badge-acct-active, .badge-active { color: var(--success); border-color: var(--success-line); background: var(--success-bg); }
.badge-pending, .badge-acct-invited, .badge-invited, .badge-trialing { color: var(--warning); border-color: var(--warning-line); background: var(--warning-bg); }
.badge-overdue, .badge-acct-deactivated, .badge-deactivated { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
.badge-acct-active::before, .badge-acct-invited::before, .badge-acct-deactivated::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-role { text-transform: none; } .badge-role-company_admin { color: var(--accent); border-color: var(--accent-line); background: var(--accent-subtle); }
.badge-imp-new { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.badge-imp-update { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.badge-imp-unchanged { background: var(--surface-hover); color: var(--text-2); }
.badge-imp-error { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-line); }
.dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: middle; }
.dot-acknowledged { background: var(--success); } .dot-pending { background: transparent; border: 2px solid var(--warning); } .dot-overdue { background: var(--danger); }
.legend { display: flex; flex-wrap: wrap; gap: 18px; font-size: var(--fs-xs); color: var(--text-2); margin: 12px 0 0; }

/* ---------- Empty states ---------- */
.empty { text-align: center; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-icon { width: 48px; height: 48px; border-radius: var(--r-lg); background: var(--accent-subtle); color: var(--accent); display: grid; place-items: center; margin-bottom: 8px; }
.empty h3 { margin: 0; } .empty p { color: var(--text-2); max-width: 420px; margin: 0 0 8px; }
.empty .actions { justify-content: center; }

/* ---------- Drawer ---------- */
dialog.drawer { position: fixed; inset: 0 0 0 auto; margin: 0; height: 100dvh; max-height: 100dvh; width: min(480px, 100%); padding: 0; border: 0; border-left: 1px solid var(--border); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); z-index: var(--z-drawer); display: none; flex-direction: column; }
dialog.drawer[open] { display: flex; }
dialog.drawer::backdrop { background: var(--scrim); }
dialog.drawer.modal { animation: drawerin .2s var(--ease); }
@keyframes drawerin { from { transform: translateX(24px); opacity: .4; } }
.drawer-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); }
.drawer-head h2 { margin: 0; font-size: 18px; line-height: 26px; } .drawer-head p { margin: 2px 0 0; }
.drawer-body { padding: 20px; overflow-y: auto; flex: 1; }
.drawer-body .form-foot { position: sticky; bottom: -20px; background: var(--surface); padding: 12px 0; margin-top: 8px; border-top: 1px solid var(--border); }
/* No-JS fallback: the ?new=1 page shows the drawer as a scrim plus panel. */
.drawer-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-drawer) - 1); }

/* ---------- Settings sub-nav ---------- */
.settings { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; align-items: start; }
.subnav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--topbar-h) + 24px); }
.subnav a { display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px; border-radius: var(--r-sm); color: var(--text-2); font-weight: 500; }
.subnav a:hover { background: var(--surface-hover); color: var(--text); text-decoration: none; }
.subnav a[aria-current] { background: var(--surface-hover); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }

/* ---------- Branch cards ---------- */
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.bcard { display: flex; flex-direction: column; gap: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 20px; box-shadow: var(--shadow-sm); transition: border-color .15s; }
.bcard:hover { border-color: var(--border-strong); }
.bcard-head { display: flex; align-items: flex-start; gap: 12px; }
.tile { width: 36px; height: 36px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent-subtle); color: var(--accent); flex: none; }
.bcard-title { flex: 1; min-width: 0; } .bcard-title h3 { margin: 0; font-family: var(--font-display); font-weight: 650; }
.bcard-title h3 a { color: var(--text); } .bcard-title .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.bcard-addr { display: flex; gap: 6px; align-items: flex-start; color: var(--text-2); font-size: var(--fs-sm); margin: 0; min-height: 20px; }
.bcard-addr svg { color: var(--text-3); margin-top: 2px; }
.bcard-foot { margin-top: auto; }
.bar { display: flex; height: 8px; border-radius: var(--r-full); overflow: hidden; background: var(--surface-hover); }
.bar span { display: block; height: 100%; } .bar .b-ok { background: var(--success); } .bar .b-pend { background: var(--warning); } .bar .b-over { background: var(--danger); }
.bar-meta { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-2); margin-top: 8px; gap: 8px; }
.bar-meta b { color: var(--text); font-weight: 600; }
.inactive-section > summary { cursor: pointer; color: var(--text-2); font-weight: 500; margin: 8px 0 12px; }

/* ---------- Employee modules ---------- */
.modlist { display: grid; gap: 12px; }
.modcard { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 20px; color: var(--text); box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s; }
.modcard:hover { border-color: var(--border-strong); text-decoration: none; transform: translateY(-1px); }
.modcard h3 { margin: 0 0 2px; } .modcard p { margin: 0; }
.modcard-l { display: flex; gap: 14px; align-items: center; min-width: 0; }
.modcard-r { display: flex; gap: 14px; align-items: center; } .arrow { color: var(--text-3); display: inline-flex; }
.progress-ring { display: flex; align-items: center; gap: 12px; border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-lg); padding: 10px 16px; }
.progress-ring strong { display: block; font: 700 22px var(--font-display); color: var(--text); } .progress-ring span { font-size: var(--fs-xs); color: var(--text-2); }
.steps { list-style: none; display: flex; gap: 8px; padding: 0; margin: 0 0 20px; flex-wrap: wrap; }
.steps li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-full); padding: 4px 12px 4px 4px; font-size: var(--fs-sm); color: var(--text-2); }
.steps b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-hover); color: var(--text); font-size: 12px; margin-right: 6px; }
.steps li.on { color: var(--text); font-weight: 600; border-color: var(--accent); } .steps li.on b { background: var(--accent-solid); color: var(--on-accent); }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.doc { padding: 32px 40px; } .doc h1 { font-size: 28px; }
.doc { font-size: 15px; line-height: 1.65; }
.doc h2 { font-size: 19px; margin-top: 1.4em; } .doc h3 { margin-top: 1.2em; }
.doc li { margin-bottom: 4px; } .doc blockquote { margin: 0 0 18px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-subtle); color: var(--text-2); font-size: 13.5px; border-radius: 0 8px 8px 0; }
.doc-meta { font-size: var(--fs-xs); color: var(--text-2); margin-bottom: 6px; }
.ack { position: sticky; top: calc(var(--topbar-h) + 24px); } .hist { padding-left: 18px; font-size: var(--fs-sm); color: var(--text-2); }
.hist li { margin-bottom: 8px; }
pre.mail { white-space: pre-wrap; font-size: var(--fs-sm); background: var(--surface-2); border: 1px solid var(--border); padding: 12px; border-radius: var(--r-md); }
.progress { height: 8px; border-radius: var(--r-full); background: var(--surface-hover); overflow: hidden; margin: 10px 0 6px; }
.progress span { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.pager { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 12px 0 4px; font-size: var(--fs-sm); }
.pager a, .pager span.on { min-width: 32px; height: 32px; display: inline-grid; place-items: center; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--border); color: var(--text); }
.pager a:hover { background: var(--surface-hover); text-decoration: none; }
.pager span.on { background: var(--accent-solid); color: var(--on-accent); border-color: var(--accent-solid); font-weight: 600; }
.pager > span.muted.small { margin-left: 8px; }
.skeleton { background: linear-gradient(90deg, var(--surface-2), var(--surface-hover), var(--surface-2)); background-size: 200% 100%; animation: shimmer 1.2s infinite linear; border-radius: var(--r-sm); min-height: 14px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; margin: 0; font-size: var(--fs-sm); } .kv dt { color: var(--text-2); } .kv dd { margin: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1279px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1023px) {
  .has-sidebar .shell { margin-left: 0; }
  .sidebar { transform: translateX(-100%); transition: transform .2s var(--ease); box-shadow: var(--shadow-lg); visibility: hidden; }
  .sidebar:target, .sidebar.open { transform: none; visibility: visible; }
  .sidebar:target ~ .scrim, .sidebar.open ~ .scrim { display: block; position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-sidebar) - 1); }
  .iconbtn.nav-open, .iconbtn.nav-close { display: inline-grid; } .brand-mobile { display: inline-flex; } .brand-mobile img { width: 128px; height: auto; }
  .has-sidebar .topbar-title { display: none; } .has-sidebar .topbar-r { margin-left: auto; }
  .cards, .kpis { grid-template-columns: 1fr 1fr; }
  .two, .doc-grid { grid-template-columns: 1fr; } .ack { position: static; }
  .settings { grid-template-columns: 1fr; gap: 16px; } .subnav { position: static; flex-direction: row; overflow-x: auto; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
  .subnav a { flex: none; } .subnav a[aria-current] { box-shadow: inset 0 -2px 0 var(--accent); }
}
@media (max-width: 800px) { .row, .row3 { grid-template-columns: 1fr; } .bgrid { grid-template-columns: 1fr; } .doc { padding: 24px; } }
@media (max-width: 640px) {
  .wrap { padding: 20px 16px 40px; } .topbar { padding: 0 12px; gap: 6px; } .footer { padding: 14px 16px; }
  h1 { font-size: 24px; line-height: 30px; }
  .scope-chip { max-width: 120px; }
  .public .brand em { display: none; } .public .topbar .brand img { width: 120px; height: auto; }
  .pagehead { align-items: flex-start; } .pagehead .actions .btn .lbl-wide { display: none; }
  .toolbar .search { flex: 1 1 100%; } .toolbar-r { margin-left: 0; }
  .toasts { left: 8px; right: 8px; bottom: 8px; max-width: none; }
  .kpi { min-height: 96px; padding: 14px 16px; } .kpi-value { font-size: 26px; line-height: 30px; }
  /* Card tables: each row becomes a card, cells labelled via data-label. */
  table.rtable, .rtable tbody, .rtable tr, .rtable td { display: block; width: 100%; }
  .rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rtable tr { border-bottom: 1px solid var(--border); padding: 10px 14px; position: relative; }
  .rtable tbody tr:hover td { background: none; }
  .rtable td { border: 0; padding: 3px 0; display: flex; gap: 12px; justify-content: space-between; align-items: center; text-align: right; }
  .rtable td[data-label]::before { content: attr(data-label); color: var(--text-3); font-size: var(--fs-xs); font-weight: 500; text-align: left; }
  .rtable td.primary { display: block; text-align: left; padding-right: 76px; } .rtable td.primary::before { display: none; }
  .rtable td.actions-cell { position: absolute; top: 8px; right: 8px; width: auto; padding: 0; }
  .rtable td.actions-cell::before { display: none; }
  .rtable td.mod { display: inline-flex; width: auto; padding: 4px 6px 4px 0; }
  .rtable td.mod::before { display: none; }
  .rtable tr.grouprow td { text-align: left; display: block; }
  .rtable .title-cell { white-space: normal; }
}

/* Print is always light, whatever the screen theme. */
@media print {
  :root, [data-theme] { --bg: #fff; --surface: #fff; --surface-2: #fff; --border: #999; --text: #000; --text-2: #333; --text-3: #333; --accent: #5A3C00; color-scheme: light; }
  body { background: #fff !important; } .sidebar, .topbar, .noprint, .toasts { display: none !important; } .has-sidebar .shell { margin: 0; } .card { box-shadow: none; }
}
.modcard-main { flex: 1; min-width: 0; } .modcard > .tile { flex: none; }
.bcard-stats { display: flex; gap: 24px; } .bcard-stats > div { display: flex; flex-direction: column; } .bcard-stats strong { font-size: var(--fs-lg, 18px); font-family: var(--font-display); }
.bcard-name { margin: 0; }
.perpage { display: inline-flex; align-items: center; gap: 8px; } .perpage select { width: auto; }
.legend-wrap { border-top: 1px solid var(--border); } .legend-wrap .legend { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.settings-body { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.dropzone-card h3 { display: flex; align-items: center; gap: 8px; }
.rowmenu { vertical-align: middle; }
#page-info { color: var(--text-2); font-size: var(--fs-sm); }
@media (max-width: 760px) { .settings { grid-template-columns: 1fr; gap: 16px; } .subnav { position: static; flex-direction: row; overflow-x: auto; } .subnav a { flex: none; } .grid-foot { flex-wrap: wrap; gap: 10px; } }
.drawer .hint, dialog .hint { color: var(--text-2); }
.iconbtn-spacer { display: inline-block; width: 32px; height: 32px; } @media (max-width: 760px) { .iconbtn-spacer { display: none; } }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.toolbar select, .perpage select { height: 34px; background: var(--input-bg); border: 1px solid var(--border-strong); color: var(--text); border-radius: var(--r-sm); padding: 0 10px; font: 500 var(--fs-sm) var(--font-ui); margin: 0; }
.toolbar select:focus, .perpage select:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); }

/* ---------- Round 3 ---------- */
/* Full height shell: a 240px column whose background always reaches the bottom (also in full page captures). */
@media (min-width: 1024px) {
  body.has-sidebar { min-height: 100dvh;
    background: linear-gradient(to right, var(--surface) calc(var(--sidebar-w) - 1px), var(--border) calc(var(--sidebar-w) - 1px), var(--border) var(--sidebar-w), var(--bg) var(--sidebar-w)); }
  .has-sidebar .sidebar { position: fixed; inset: 0 auto 0 0; height: 100dvh; }
  .has-sidebar .shell { margin-left: var(--sidebar-w); min-width: 0; min-height: 100dvh; }
}
.scrim { inset: 0; }
@media (max-width: 1023px) { .sidebar { height: 100dvh; } .sidebar.open ~ .scrim, .sidebar:target ~ .scrim { position: fixed; inset: 0; } }
html.theme-anim, html.theme-anim * { transition: background-color .2s, border-color .2s, color .2s !important; }

/* KPIs: selected border only when a status filter is on; chevron on hover; overdue tint when > 0. */
.kpi-label { display: flex; align-items: center; justify-content: space-between; gap: var(--dot-gap); }
.kpi-chev { color: var(--text-3); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
.kpi:hover .kpi-chev, .kpi:focus-visible .kpi-chev { opacity: 1; transform: none; }
.kpi.kpi-alert { background: var(--danger-bg); border-color: var(--danger-line); }
.kpi.kpi-alert.active { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.kpi.kpi-alert .kpi-sub { color: var(--text-2); }

/* Needs attention + coverage. */
.attn-row { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 20px; }
.attn-row > .card { margin: 0; padding: 16px 20px; display: flex; flex-direction: column; min-width: 0; }
.cardhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.cardhead h2 { margin: 0; font-size: var(--fs-md, 15px); line-height: 22px; display: flex; align-items: center; gap: 8px; }
.viewall { display: inline-flex; align-items: center; gap: 2px; font-weight: 500; white-space: nowrap; }
.attn-list, .cover-list { list-style: none; margin: 0; padding: 0; }
.attn-item { display: grid; grid-template-columns: 28px minmax(0, 1.4fr) minmax(0, 1fr) 120px 32px; align-items: center; gap: 12px; padding: 7px 0; border-top: 1px solid var(--border); }
.attn-item:first-child { border-top: 0; }
.attn-who { display: flex; flex-direction: column; min-width: 0; line-height: 18px; }
.attn-who a { color: var(--text); } .attn-who b { font-weight: 600; } .attn-who span { color: var(--text-3); font-size: var(--fs-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attn-mods { display: flex; gap: 4px; flex-wrap: wrap; }
.mchip { display: inline-grid; place-items: center; min-width: 28px; height: 20px; padding: 0 6px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; border: 1px solid var(--border-strong); color: var(--text-2); }
.mchip-overdue { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }
.mchip-pending { color: var(--warning); border-color: var(--warning-line, var(--border-strong)); }
.attn-due .due { align-items: flex-start; }
.attn-empty { display: flex; gap: 12px; align-items: center; padding: 18px 4px; color: var(--success); }
.attn-empty b { color: var(--text); } .attn-empty p { margin: 2px 0 0; }
.cover-list li { display: grid; grid-template-columns: minmax(0, 1fr) 72px 40px; gap: 10px; align-items: center; padding: 6px 0; }
.cover-name { color: var(--text); font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cover-bar { height: 6px; border-radius: var(--r-full); background: var(--surface-hover); overflow: hidden; display: block; }
.cover-bar span { display: block; height: 100%; } .cover-bar .b-ok { background: var(--success); } .cover-bar .b-pend { background: var(--warning); } .cover-bar .b-over { background: var(--danger); }
.cover-pct { text-align: right; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--text-2); font-weight: 600; }
.cover-more { margin: 4px 0 0; }

/* Two line next due cell. */
.due { display: inline-flex; flex-direction: column; line-height: 18px; white-space: nowrap; }
.due-rel { font-weight: 600; font-size: var(--fs-sm); } .due-over { color: var(--danger); } .due-soon { color: var(--warning); } .due-later { color: var(--text-2); font-weight: 500; }
.due-date { font-size: var(--fs-xs); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Colorblind safe dots: filled check, x circle, hollow ring. */
.dot { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; vertical-align: middle; flex: none; }
.dot svg { width: 9px; height: 9px; stroke-width: 3.5; color: var(--on-accent, #fff); }
.dot-acknowledged { background: var(--success); } .dot-acknowledged svg { color: var(--bg); }
.dot-overdue { background: var(--danger); } .dot-overdue svg { color: var(--bg); }
.dot-pending { background: transparent; border: 2px solid var(--warning); }
.bar-meta span { display: inline-flex; align-items: center; }

/* Row actions: fixed 3 slot grid so icons line up across rows. */
.rowacts { display: grid; grid-template-columns: repeat(3, 32px); gap: 4px; justify-content: end; align-items: center; }
.rowacts > * { width: 32px; height: 32px; } .rowacts .inline { display: contents; }
.iconbtn-spacer { visibility: hidden; }
.bcard .rowacts { grid-template-columns: 32px; }

/* Toolbar: one line, popovers, Clear all, split export. */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.toolbar .search { flex: 0 1 300px; }
.fgroup { display: contents; } .fsheet-head, .fsheet-btn, .fsheet-foot { display: none; }
.multi-radio .multi-list { min-width: 200px; }
.clear { font-size: 13px; font-weight: 500; white-space: nowrap; }
table.grid[aria-busy=true] { opacity: .6; transition: opacity .15s; }
.split { display: inline-flex; } .split .split-main { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.split details.menu > summary.split-caret { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; padding: 0 8px; }
.split details.menu > summary.split-caret .chev { display: none; }
select, .toolbar select, .perpage select { appearance: none; -webkit-appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; }
select[multiple] { background-image: none; padding-right: 10px; }

/* Role picker. */
.seg-field, .scope-box { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.seg-field legend, .scope-box legend { font-size: var(--fs-sm); font-weight: 500; margin-bottom: 6px; padding: 0; }
.seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--r-sm); overflow: hidden; background: var(--input-bg, var(--surface)); flex-wrap: wrap; }
.seg-opt { margin: 0; position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { display: block; padding: 7px 14px; font-size: var(--fs-sm); font-weight: 500; color: var(--text-2); border-left: 1px solid var(--border); }
.seg-opt:first-child span { border-left: 0; }
.seg-opt input:checked + span { background: var(--accent-subtle); color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); }
.seg-opt input:focus-visible + span { box-shadow: var(--focus); }
.seg-opt input:disabled + span { opacity: .6; cursor: not-allowed; }
.scope-box { display: none; border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; }
form:has(input[name=role][value=scoped_admin]:checked) .scope-box { display: block; }

/* Import dropzone. */
.dropzone { position: relative; display: flex; align-items: center; justify-content: center; min-height: 132px; border: 2px dashed var(--border-strong); border-radius: var(--r-lg); background: var(--surface-2, transparent); padding: 16px; margin: 0; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.dropzone:hover, .dropzone.drag, .dropzone:focus-within { border-color: var(--accent); background: var(--accent-subtle); }
.dropzone input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.dz-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-2); pointer-events: none; } .dz-empty svg { color: var(--accent); }
.dz-file { display: flex; align-items: center; gap: 8px; font-weight: 500; position: relative; z-index: 1; } .dz-file[hidden], .dz-empty[hidden] { display: none; }
.dz-name { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Branch cards. */
.bcard { cursor: pointer; position: relative; }
.bcard-link { color: var(--text); } .bcard-link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.bcard .rowacts, .bcard details.menu { position: relative; z-index: 2; }
.bcard-link:focus-visible { box-shadow: none; } .bcard:has(.bcard-link:focus-visible) { box-shadow: var(--focus); }
.bcard-mgr { margin: -6px 0 0; color: var(--text); }
.bcard-stats { align-items: center; }
.avstack, .bcard-stats > .avstack { display: flex; flex-direction: row; margin-left: auto; } .avstack { align-items: center; } .avstack .av-tip { position: relative; margin-left: -5px; display: inline-flex; } .avstack .av-tip:first-child { margin-left: 0; }
.avstack .avatar { width: 32px; height: 32px; font-size: 11.5px; letter-spacing: -.02em; box-shadow: 0 0 0 2px var(--surface); }
.avstack .avmore { background: var(--surface-2, var(--bg)); color: var(--text-2); border-color: var(--border); }
.assign-link { font-weight: 600; margin-left: 4px; }
.avmore { background: var(--surface-hover); color: var(--text-2); font-size: 11px; }
.bar-meta { justify-content: flex-start; gap: 6px 16px; flex-wrap: wrap; }

/* Employee policy cards. */
.modcard-badge { display: none; }

@media (max-width: 1279px) { .attn-item { grid-template-columns: 28px minmax(0, 1fr) 110px 32px; } .attn-mods { display: none; } }
@media (max-width: 1023px) { .attn-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .hide-mobile { display: none !important; }
  .attn-item { grid-template-columns: 28px minmax(0, 1fr) auto 32px; gap: 10px; }
  .attn-due .due-date { display: none; }
  /* Filters bottom sheet (JS only; without JS the popovers stay inline). */
  .js .fsheet-btn { display: inline-flex; }
  .js .toolbar .search { flex: 1 1 0; min-width: 0; }
  .js .fgroup { display: none; }
  .js .fgroup.sheet-open { display: flex; flex-direction: column; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-drawer); max-height: 80dvh; overflow-y: auto;
    background: var(--surface); border-top: 1px solid var(--border-strong); border-radius: 16px 16px 0 0; padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 0 0 100vmax var(--scrim), var(--shadow-lg); }
  .js .fgroup.sheet-open .fsheet-head { display: flex; justify-content: space-between; align-items: center; }
  .js .fgroup.sheet-open .fsheet-foot { display: flex; } .fsheet-foot .btn { flex: 1; justify-content: center; }
  .js .fgroup.sheet-open details.multi { display: block; } .js .fgroup.sheet-open details.multi > summary { width: 100%; }
  .js .fgroup.sheet-open .multi-list { position: static; box-shadow: none; margin-top: 6px; max-width: none; width: 100%; }
  body.sheet-lock { overflow: hidden; }
  .toolbar-r { margin-left: auto; }
  .multi-list { max-width: calc(100vw - 32px); min-width: min(240px, calc(100vw - 32px)); }

  details.menu .menu-pop { max-width: calc(100vw - 24px); }

  /* Compact team cards: line 1 avatar + name + status, line 2 title, branch, state (role only when not Employee). */
  #team-table tr { padding: 10px 112px 10px 14px; min-height: 72px; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; row-gap: 2px; }
  #team-table td { display: inline-flex; width: auto; padding: 0; text-align: left; font-size: var(--fs-xs); color: var(--text-2); }
  #team-table td::before { display: none !important; }
  #team-table td.primary { flex: 1 1 100%; padding: 0; } #team-table td.primary .em { display: none; }
  #team-table td.primary .member > div { display: flex; flex-direction: column; min-width: 0; } #team-table td.primary a { font-size: var(--fs-sm); font-weight: 600; }
  #team-table td.title-cell { margin-left: 36px; } #team-table td.title-cell .muted { display: none; }
  #team-table td.c-role.role-employee, #team-table td.c-last { display: none; }
  #team-table td.c-status { position: absolute; top: 12px; right: 84px; }
  #team-table td.actions-cell { top: 50%; transform: translateY(-50%); right: 8px; }
  #team-table .rowacts { grid-template-columns: 32px 32px; } #team-table .rowacts > :first-child { display: none; }
  #team-table .rowacts .iconbtn-spacer { display: block; }
  #team-table .badge { font-size: 11px; }
  /* Dashboard cards: name + badge, then dots and relative due. */
  #status-table tr { display: flex; flex-wrap: wrap; align-items: center; column-gap: 4px; row-gap: 6px; padding: 10px 14px; }
  #status-table td.primary { flex: 1 1 100%; padding-right: 110px; }
  #status-table td.c-overall { position: absolute; top: 12px; right: 14px; width: auto; padding: 0; } #status-table td.c-overall::before { display: none; }
  #status-table td.title-cell, #status-table td.c-last { display: none; }
  #status-table td.mod { width: auto; padding: 0 2px 0 0; }
  #status-table td.c-due { width: auto; margin-left: auto; padding: 0; } #status-table td.c-due::before { display: none; }
  #status-table td.c-due .due-date { display: none; }
  #status-table td.mod:not(:has(.dot)) { display: none; }
  #status-table tr.grouprow { padding: 8px 14px; }
  /* Employee policy cards: badge under the title, chevron only. */
  .modcard-badge { display: block; margin: 4px 0; } .modcard-badge-d, .modcard .arrow-t { display: none; }
  .split .split-main .lbl-wide { display: none; }
  .seg-opt span { padding: 7px 10px; }
}
details.multi.pop-right .multi-list { left: auto; right: 0; }

/* Shared indicator spacing: a status dot or shape next to text always gets the same 6px gap. */
:root { --dot-gap: 6px; }
.ind { display: inline-flex; align-items: center; gap: var(--dot-gap); white-space: nowrap; }
.ind > .dot { flex: none; margin: 0; }
.due, .attn-item .mchip { column-gap: var(--dot-gap); }

/* Onboarding tour */
dialog.tour { width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: auto; }
dialog.tour::backdrop { background: rgba(5, 8, 18, .62); backdrop-filter: blur(2px); }
.tour-form { position: relative; padding: 36px 32px 22px; display: flex; flex-direction: column; text-align: center; }
.tour-skip-x { position: absolute; top: 12px; right: 12px; }
.tour-art { display: flex; justify-content: center; margin-bottom: 18px; }
.tour-art-ring { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: radial-gradient(circle at 50% 40%, var(--accent-subtle), transparent 70%), var(--surface-2); border: 1px solid var(--accent-line); box-shadow: 0 0 0 8px var(--accent-subtle); }
[data-theme="light"] .tour-art-ring { color: #1A5FD6; }
.tour-step { margin: 0 0 6px; }
.tour-page h2 { margin: 0 0 10px; font-size: 1.35rem; outline: none; }
.tour-body p { margin: 0 auto; max-width: 40ch; color: var(--text-2); line-height: 1.55; }
.tour-body b { color: var(--text); }
.tour-dots { display: flex; justify-content: center; gap: 8px; margin: 22px 0 18px; }
.tour-dot { width: 8px; height: 8px; border-radius: 99px; background: var(--border-strong); transition: width .2s, background-color .2s; }
.tour-dot.on { width: 22px; background: var(--accent-solid); }
[data-theme="light"] .tour-dot.on { background: #1A5FD6; }
.tour-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.tour-nav { display: inline-flex; gap: 8px; }
.tour-nav .btn { display: inline-flex; align-items: center; gap: 6px; }
.tour-nav [hidden] { display: none; }
@media (max-width: 640px) {
  dialog.tour { width: calc(100vw - 20px); }
  .tour-form { padding: 30px 20px 18px; }
  .tour-art-ring { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) { .tour-dot { transition: none; } }

/* Seats and plans (round 4) */
.seatmeter { display: grid; gap: 6px; }
.seatmeter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px; }
.seatmeter-label { font-weight: 600; } .seatmeter-num { font-variant-numeric: tabular-nums; color: var(--text-2); }
.seatbar { height: 6px; border-radius: var(--r-full); background: var(--surface-hover); overflow: hidden; }
.seatbar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.seat-warn .seatbar > span { background: var(--warning); } .seat-full .seatbar > span { background: var(--danger); }
.seatmeter-note { margin: 0; display: flex; align-items: center; gap: 5px; color: var(--text-2); }
.seat-warn .seatmeter-note { color: var(--warning); } .seat-full .seatmeter-note { color: var(--danger); }
.side-seats { display: block; margin: 12px 0 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md, 10px); color: var(--text); text-decoration: none; background: var(--surface-2); }
.side-seats:hover { border-color: var(--border-strong); } .side-seats .seatmeter-top { font-size: 12px; }
.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 12px 0; }
.plancard { border: 1px solid var(--border); border-radius: var(--r-md, 10px); padding: 14px; display: grid; gap: 8px; align-content: start; background: var(--surface); }
.plancard.featured { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line); }
.plancard h3 { margin: 0; font-size: 15px; } .plan-seats { margin: 0; }
.plan-feats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; color: var(--text-2); } .plan-feats li { display: flex; gap: 6px; align-items: center; }
.plan-feats .icon { color: var(--success); flex: none; }
.upgrade-head { display: flex; gap: 12px; align-items: flex-start; } .upgrade-head h2 { margin: 0 0 4px; font-size: 18px; } .upgrade-head p { margin: 0; color: var(--text-2); }
.upgrade-retry { border-top: 1px solid var(--border); padding-top: 12px; margin-top: 4px; }
.seatcheck p { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 6px; } .seatcheck p .icon { margin-top: 2px; flex: none; }
.seatcheck.over { border-color: var(--danger-line); background: var(--danger-bg); } .seatcheck.over > p:first-child { color: var(--danger); font-weight: 600; }
.notice-list { display: grid; gap: 8px; margin-bottom: 16px; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--warning-line); background: var(--warning-bg); border-radius: var(--r-md, 10px); font-size: 14px; }
.notice .icon { color: var(--warning); margin-top: 2px; flex: none; } .notice p { margin: 0; flex: 1; } .notice form { margin: 0; }
.sso-btns { display: grid; gap: 8px; margin: 4px 0 12px; }
.btn-sso { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.btn-sso:hover { background: var(--surface-hover); } .btn-sso svg { flex: none; }
.or-rule { display: flex; align-items: center; gap: 10px; color: var(--text-3); font-size: 12px; margin: 4px 0 12px; } .or-rule::before, .or-rule::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.kvgrid { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 12px; align-items: center; }
.ssomap { width: 100%; } .ssomap td, .ssomap th { padding: 8px; } .ssomap input { width: 100%; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; }
.sidenav:not(.sidenav-foot) + .side-seats { margin-top: auto; }
/* Round 4: SSO and notices */
.notices { display: grid; gap: 8px; margin-bottom: 16px; }
.notice-info { border-color: var(--info-line); background: var(--info-bg); } .notice-info .icon { color: var(--info); }
.notice-warn h3 { margin-top: 0; }
.ssomap { display: grid; grid-template-columns: minmax(120px, 180px) 1fr 1fr; gap: 8px 12px; align-items: center; }
.ssomap-h { font-size: var(--fs-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .04em; }
.sso-buttons { display: grid; gap: 8px; margin-bottom: 4px; }
.sso-buttons .or-rule { margin-top: 8px; }
.card .actions .btn-sso { width: auto; display: inline-flex; }
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); }
ul.plain { list-style: none; padding: 0; margin: 0 0 12px; }
.row-inline { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-top: 12px; } .row-inline label { flex: 1; min-width: 200px; }
#sso-domains td.actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; } #sso-domains td.actions form { margin: 0; }
@media (max-width: 640px) { .ssomap { grid-template-columns: 1fr; } .ssomap-h { display: none; } #sso-domains table { display: block; overflow-x: auto; } }
.ssomap-note { grid-column: 1 / -1; margin-top: 12px; }
/* SSO buttons, per Microsoft and Google brand guidelines */
.sso-btn { display: flex; align-items: center; justify-content: center; gap: 12px; height: 41px; padding: 0 12px; border-radius: 4px; border: 1px solid; font: 600 15px/1 "Segoe UI", Roboto, Arial, sans-serif; text-decoration: none; }
.sso-btn:hover { text-decoration: none; filter: brightness(.97); }
.sso-btn:focus-visible { outline: 2px solid var(--focus, #2563eb); outline-offset: 2px; }
.sso-logo { flex: none; }
.sso-microsoft { background: #FFFFFF; border-color: #8C8C8C; color: #5E5E5E; }
.sso-google { background: #FFFFFF; border-color: #747775; color: #1F1F1F; font-family: Roboto, Arial, sans-serif; font-weight: 500; border-radius: 20px; }
[data-theme=dark] .sso-microsoft { background: #2F2F2F; border-color: #2F2F2F; color: #FFFFFF; }
[data-theme=dark] .sso-google { background: #131314; border-color: #8E918F; color: #E3E3E3; }
.btn.coming-soon { cursor: default; opacity: .8; pointer-events: none; }

/* ===== Palette B tokens (mockup) ===== */
:root, [data-theme=dark] {
  --bg:#0A1630; --surface:#0F2045; --surface-2:#132651; --surface-hover:#182D5C; --border:#22386A; --border-strong:#2F4A85;
  --text:#EAF1FF; --text-2:#A8B8D8; --text-3:#94A7CB;
  --accent:#6EA8FF; --accent-solid:#FFC25C; --on-accent:#0B1A33; --accent-subtle:rgba(110,168,255,.12); --accent-line:rgba(110,168,255,.40);
  --success:#5FD39A; --warning:#FFB65C; --danger:#FF8F86; --info:#6EA8FF;
  --focus:0 0 0 3px rgba(110,168,255,.45); --topbar-bg:rgba(10,22,48,.88); --input-bg:#0C1B3B;
}
[data-theme=light] {
  --bg:#F5F8FD; --surface:#FFFFFF; --surface-2:#F8FAFE; --surface-hover:#EEF3FB; --border:#DDE5F2; --border-strong:#C5D1E5;
  --text:#0B1A33; --text-2:#42536F; --text-3:#5A6B88;
  --accent:#1A5FD6; --accent-solid:#F5B33D; --on-accent:#0B1A33; --accent-subtle:#EAF1FD; --accent-line:#B9CFF5;
  --success:#13804A; --success-bg:#EAF7F0; --success-line:#B5E3C8;
  --warning:#A85A00; --warning-bg:#FFF6E8; --warning-line:#F6D49A;
  --danger:#C0322B; --danger-bg:#FEF1F0; --danger-line:#F7C6C2; --danger-solid:#B42318;
  --info:#1A5FD6; --info-bg:#EEF4FF; --info-line:#C3D6F7;
  --focus:0 0 0 3px rgba(26,95,214,.30); --topbar-bg:rgba(245,248,253,.88); --input-bg:#FFFFFF;
}
[data-theme=light] .btn:hover { background:#F0A623; color:#0B1A33; }
/* Link back to the marketing site under auth forms */
.auth { flex-direction: column; align-items: center; }
.auth-back { margin: 16px 0 0; font-size: 14px; text-align: center; }
.auth-back a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.auth-back a:hover { color: var(--text); }
/* Primary actions: brand blue with white text (amber stays a small highlight only) */
:root,[data-theme=dark],[data-theme=light]{ --accent-solid:#1A5FD6; --on-accent:#FFFFFF; }
.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sso):hover,[data-theme=light] .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sso):hover{ background:#154FB5; border-color:#154FB5; color:#FFFFFF; filter:none; }
.btn:focus-visible{ outline:3px solid #1A5FD6; outline-offset:2px; }
[data-theme=dark] .btn:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sso){ border-color:rgba(143,186,255,.55); }
[data-theme=dark] .btn:focus-visible{ outline-color:#8FBAFF; }
/* Polish: primary lift, navy segmented selection, outlined blue secondary */
.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sso):not(.btn-sm){ box-shadow:0 1px 2px rgba(11,26,51,.12),0 6px 16px -6px rgba(26,95,214,.45); transition:background-color .15s,box-shadow .15s,transform .15s; }
.btn:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sso):not(.btn-sm):hover{ transform:translateY(-1px); box-shadow:0 2px 4px rgba(11,26,51,.14),0 10px 22px -8px rgba(26,95,214,.55); }
.btn:active{ transform:none; }
@media (prefers-reduced-motion:reduce){ .btn, .btn:hover{ transform:none !important; transition:none !important; } }
[data-theme=light] .seg-opt input:checked + span{ background:#0B1A33; color:#FFFFFF; box-shadow:none; }
[data-theme=dark] .seg-opt input:checked + span{ background:#DCE8FF; color:#0B1A33; box-shadow:none; }
[data-theme=light] .btn-secondary,[data-theme=light] .btn-ghost{ background:transparent; border:1.5px solid #1A5FD6; color:#1A5FD6; }
[data-theme=light] .btn-secondary:hover,[data-theme=light] .btn-ghost:hover{ background:#EEF4FE; border-color:#154FB5; color:#154FB5; }
[data-theme=dark] .btn-secondary,[data-theme=dark] .btn-ghost{ background:transparent; border:1.5px solid #8FBAFF; color:#8FBAFF; }
[data-theme=dark] .btn-secondary:hover,[data-theme=dark] .btn-ghost:hover{ background:rgba(143,186,255,.12); border-color:#B5D0FF; color:#B5D0FF; }