/* Liquid Glass presentation layer. No route, data or permission behavior. */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --radius: 20px;
  --radius-panel: 26px;
  --radius-md: 12px;
  --sidebar: oklch(.205 .023 290);
  --sidebar-accent: oklch(.30 .045 290);
  --background: oklch(.972 .005 282);
  --foreground: oklch(.275 .018 282);
  --card: oklch(1 0 0);
  --primary: oklch(.535 .145 295);
  --primary-foreground: oklch(.995 .002 282);
  --muted: oklch(.958 .009 282);
  --muted-foreground: oklch(.505 .024 282);
  --border: oklch(.45 .035 282 / .12);
  --border-strong: oklch(.45 .04 282 / .23);
  --input: oklch(.45 .035 282 / .20);
  --ring: oklch(.60 .135 295);
  --orb-color: oklch(.76 .105 295);
  --orb-tint-rgb: .66 .60 .88;
  --glass-tint: oklch(.70 .12 295);
  --glass-blue: oklch(.76 .09 247);
  --glass-edge: oklch(1 0 0 / .72);
  --glass-highlight: oklch(1 0 0 / .88);
  --glass-reflection: oklch(1 0 0 / .34);
  --glass-fill: color-mix(in oklab, var(--card) 70%, transparent);
  --glass-quiet: color-mix(in oklab, var(--card) 85%, transparent);
  --glass-menu: color-mix(in oklab, var(--popover) 86%, transparent);
  --glass-shadow: 0 8px 32px oklch(.30 .035 282 / .055), inset 0 1px 0 var(--glass-highlight);
  --glass-hover-shadow: 0 12px 38px oklch(.30 .035 282 / .085), inset 0 1px 0 var(--glass-highlight);
}
html.dark {
  --sidebar: oklch(.174 .02 290);
  --background: oklch(.225 .019 282);
  --foreground: oklch(.945 .008 282);
  --card: oklch(.28 .022 282);
  --popover: oklch(.30 .026 282);
  --primary: oklch(.745 .12 295);
  --primary-foreground: oklch(.225 .025 282);
  --muted: oklch(.315 .022 282);
  --muted-foreground: oklch(.745 .016 282);
  --border: oklch(1 0 0 / .09);
  --border-strong: oklch(1 0 0 / .18);
  --input: oklch(1 0 0 / .16);
  --glass-edge: oklch(1 0 0 / .12);
  --glass-highlight: oklch(1 0 0 / .10);
  --glass-reflection: oklch(1 0 0 / .07);
  --glass-fill: color-mix(in oklab, var(--card) 82%, transparent);
  --glass-quiet: color-mix(in oklab, var(--card) 92%, transparent);
  --glass-menu: color-mix(in oklab, var(--popover) 92%, transparent);
  --glass-shadow: 0 8px 32px oklch(0 0 0 / .14), inset 0 1px 0 var(--glass-highlight);
  --glass-hover-shadow: 0 12px 38px oklch(0 0 0 / .21), inset 0 1px 0 var(--glass-highlight);
}
/* Existing alternate palettes keep their saved keys and independent mode. */
html[data-theme-preset=tangerine] { --glass-tint: oklch(.75 .08 70); --glass-blue: oklch(.80 .035 250); }
html[data-theme-preset=jade] { --glass-tint: oklch(.79 .08 159); --glass-blue: oklch(.82 .045 190); }
/* Apple silver: pearl-white surfaces and navigation, with graphite ink. */
html[data-theme-preset=silver] {
  --sidebar: oklch(.966 .003 255); --sidebar-foreground: oklch(.35 .009 255);
  --sidebar-accent: oklch(.922 .006 255); --sidebar-accent-foreground: oklch(.27 .009 255);
  --sidebar-border: oklch(.40 .012 255 / .13);
  --background: oklch(.983 .002 255); --foreground: oklch(.27 .008 255);
  --card: oklch(1 0 0); --popover: var(--card);
  --primary: oklch(.36 .014 255); --primary-foreground: oklch(.99 .002 255);
  --secondary: oklch(.957 .004 255); --secondary-foreground: var(--foreground);
  --muted: oklch(.955 .004 255); --muted-foreground: oklch(.505 .011 255);
  --faint-foreground: oklch(.555 .009 255);
  --accent: oklch(.937 .007 255); --accent-foreground: var(--foreground);
  --border: oklch(.40 .012 255 / .11); --border-strong: oklch(.40 .012 255 / .23);
  --input: oklch(.40 .012 255 / .20); --ring: oklch(.60 .025 255);
  --chart-1: oklch(.56 .055 255); --chart-2: oklch(.72 .035 245);
  --chart-3: oklch(.45 .014 255); --chart-4: oklch(.85 .022 250); --chart-5: oklch(.65 .023 260);
  --orb-color: oklch(.86 .018 255); --orb-tint-rgb: .78 .83 .90;
  --glass-tint: oklch(.88 .014 255); --glass-blue: oklch(.89 .027 245);
  --surface-shadow: 0 2px 4px oklch(.3 .008 255 / .02), 0 12px 32px -20px oklch(.35 .012 255 / .16);
  --surface-hover-shadow: 0 3px 6px oklch(.3 .008 255 / .03), 0 20px 42px -24px oklch(.35 .012 255 / .22);
  --glass-shadow: 0 8px 32px oklch(.30 .012 255 / .055), inset 0 1px 0 var(--glass-highlight);
  --glass-hover-shadow: 0 12px 38px oklch(.30 .012 255 / .085), inset 0 1px 0 var(--glass-highlight);
}
html.dark[data-theme-preset=silver] {
  --sidebar: oklch(.195 .005 255); --sidebar-foreground: oklch(.88 .005 255);
  --sidebar-accent: oklch(.30 .008 255); --sidebar-accent-foreground: oklch(.98 .003 255);
  --sidebar-border: oklch(1 0 0 / .10);
  --background: oklch(.23 .006 255); --foreground: oklch(.95 .004 255);
  --card: oklch(.285 .006 255); --popover: oklch(.305 .008 255);
  --primary: oklch(.86 .016 255); --primary-foreground: oklch(.24 .008 255);
  --secondary: oklch(.33 .007 255); --secondary-foreground: var(--foreground);
  --muted: oklch(.325 .007 255); --muted-foreground: oklch(.75 .009 255);
  --faint-foreground: oklch(.67 .008 255);
  --accent: oklch(.355 .009 255); --accent-foreground: var(--foreground);
  --border: oklch(1 0 0 / .10); --border-strong: oklch(1 0 0 / .20); --input: oklch(1 0 0 / .17);
  --ring: oklch(.77 .025 255); --chart-1: oklch(.78 .05 255); --chart-3: oklch(.88 .014 255); --chart-4: oklch(.50 .022 250);
  --orb-color: oklch(.74 .025 255); --orb-tint-rgb: .62 .69 .79;
  --glass-tint: oklch(.65 .02 255); --glass-blue: oklch(.70 .035 245);
  --surface-shadow: 0 2px 5px oklch(0 0 0 / .13), 0 12px 32px -20px oklch(0 0 0 / .35);
  --surface-hover-shadow: 0 3px 7px oklch(0 0 0 / .17), 0 20px 42px -24px oklch(0 0 0 / .45);
  --glass-shadow: 0 8px 32px oklch(0 0 0 / .14), inset 0 1px 0 var(--glass-highlight);
  --glass-hover-shadow: 0 12px 38px oklch(0 0 0 / .21), inset 0 1px 0 var(--glass-highlight);
}
body { font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
.main {
  border-radius: 26px;
  background: radial-gradient(ellipse at 82% 0%, color-mix(in oklab, var(--glass-tint) 9%, transparent), transparent 55%),
    radial-gradient(ellipse at 0% 65%, color-mix(in oklab, var(--glass-blue) 7%, transparent), transparent 60%), var(--background);
  box-shadow: 0 12px 42px -24px oklch(0 0 0 / .22);
}
.sidebar { background: radial-gradient(ellipse at 0% 0%, color-mix(in oklab, var(--glass-tint) 9%, var(--sidebar)), var(--sidebar) 58%); }
.sidebar .sb-brand .logo { background: linear-gradient(145deg, oklch(1 0 0 / .13), oklch(1 0 0 / .055)); color: oklch(.88 .06 290); box-shadow: inset 0 1px 0 oklch(1 0 0 / .12); }
html:not([data-theme-preset=jade]) .sidebar :is(.sb-item.active, .sb-item[aria-current=page]) {
  background: linear-gradient(115deg, color-mix(in oklab, var(--glass-tint) 27%, var(--sidebar)), color-mix(in oklab, var(--glass-tint) 15%, var(--sidebar)));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .15), inset 0 0 0 1px oklch(1 0 0 / .055), 0 5px 18px -12px oklch(0 0 0 / .3);
}
.page { gap: 24px; animation: glass-page-in 180ms ease-out; }
.page-title { font-weight: 650; letter-spacing: -.04em; }
.card, .stat, .premium-hero, .todos-bar {
  border-radius: 20px;
  border-color: var(--border);
  background: var(--card);
  box-shadow: var(--glass-shadow);
}
.card, .stat { position: relative; top: 0; transition: top 220ms var(--ease-out), box-shadow 220ms var(--ease-out), border-color 180ms ease-out; }
.card { padding: 24px; }
.card:is(.steward-chat, .ai-model-card, .ai-tests-card, .ai-knowledge-card, .files-list) { padding: 0; }
.card-title { font-size: 14px; margin-bottom: 18px; }
.stat { padding: 20px; }
.stat .stat-num { font-weight: 600; }
.workspace-approval-group { border-radius: 15px; border-color: var(--border); background: color-mix(in oklab, var(--card) 90%, var(--muted)); }
.workspace-approval-item { border-radius: 10px; }
.premium-hero {
  background: radial-gradient(ellipse at 94% 12%, color-mix(in oklab, var(--glass-tint) 15%, transparent), transparent 70%),
    linear-gradient(120deg, var(--glass-fill), color-mix(in oklab, var(--glass-blue) 6%, var(--glass-fill)));
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 -1px 0 color-mix(in oklab, var(--glass-blue) 14%, transparent);
}
.premium-hero::after { background: radial-gradient(ellipse at 92% 0%, var(--glass-reflection), transparent 50%), radial-gradient(ellipse at 65% 100%, color-mix(in oklab, var(--glass-blue) 10%, transparent), transparent 62%); }
.premium-hero .workspace-overview-date { border-radius: 999px; border-color: var(--border); padding-inline: 12px; }
.topbar, .topbar.scrolled { background: var(--background); border-color: var(--border); }
.console-palette-trigger, .topbar .select { border-radius: 12px; background: color-mix(in oklab, var(--card) 95%, var(--muted)); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 2px 5px oklch(0 0 0 / .025); }
.topbar .icon-btn { border-radius: 12px; }
.btn { border-radius: 12px; font-weight: 500; box-shadow: inset 0 1px 0 var(--glass-highlight), 0 2px 5px oklch(0 0 0 / .035); }
.btn-sm { border-radius: 10px; }
.btn-primary, .btn.ok { background-image: linear-gradient(180deg, oklch(1 0 0 / .12), transparent); box-shadow: inset 0 1px 0 oklch(1 0 0 / .20), 0 5px 12px -8px color-mix(in oklab, var(--primary) 50%, transparent); }
.btn:active:not(:disabled) { transform: scale(.975); }
.field :is(input, select, textarea), .filter-bar :is(input, select), .steward-composer textarea { border-radius: 12px; background: color-mix(in oklab, var(--card) 96%, var(--background)); }
.tbl-scroll { border-radius: 14px; border-color: var(--border); }
.tbl th { background: color-mix(in oklab, var(--muted) 60%, var(--card)); }
.tbl td { border-color: var(--border); }
.badge { border-radius: 8px; }
.todos-bar { border-color: var(--glass-edge); }
.todos-bar-head, .todos-bar-foot { border-color: var(--border); }
.steward-chat-head { background: color-mix(in oklab, var(--muted) 45%, var(--card)); }
.steward-composer { background: color-mix(in oklab, var(--card) 96%, var(--background)); }
.steward-suggestions .btn { border-radius: 12px; }
.file-options-panel, .steward-conversation-menu, .console-palette, .help-hint-popover {
  border-radius: 14px; border-color: var(--glass-edge); background: var(--popover); color: var(--foreground);
  box-shadow: var(--glass-shadow), 0 12px 40px oklch(0 0 0 / .12);
}
.file-options-panel :is(a, button), .steward-conversation-menu button { border-radius: 9px; }
dialog, .file-dialog, .payroll-dialog { border-radius: 22px; border-color: var(--glass-edge); background: var(--card); box-shadow: var(--glass-shadow), 0 24px 80px oklch(0 0 0 / .20); }
dialog::backdrop { background: oklch(.2 .025 285 / .28); }
.portal-login { background: radial-gradient(ellipse at 15% 0%, color-mix(in oklab, var(--glass-tint) 14%, transparent), transparent 60%), var(--background); }
.portal-login .login-wordmark, .portal-login .login-footer, .portal-login .login-appearance .icon-btn { color: var(--foreground); }
.portal-login .login-appearance .icon-btn:hover { color: var(--foreground); background: var(--accent); }
.portal-login .login-frame { border-radius: 26px; border-color: var(--glass-edge); background: var(--card); box-shadow: var(--glass-shadow), 0 24px 72px -28px oklch(.3 .035 282 / .15); }
.portal-login .login-context { background: linear-gradient(145deg, color-mix(in oklab, var(--glass-tint) 9%, var(--card)), color-mix(in oklab, var(--glass-blue) 5%, var(--card))); }
.portal-login .logo { background: var(--muted); border-color: var(--border); color: var(--primary); box-shadow: inset 0 1px 0 var(--glass-highlight); }
/* Light navigation needs dark ink for every tree, hover and account state. */
html[data-theme-preset=silver] .sidebar :is(.sb-brand strong, .sb-item .i, .sb-item.active .i) { color: var(--sidebar-foreground); }
html[data-theme-preset=silver] .sidebar :is(.sb-label, .sb-empty, .file-nav-empty, .sb-points-label, .sb-user .who span) { color: var(--muted-foreground); }
html[data-theme-preset=silver] .sidebar :is(.sb-submenu, .sb-foot) { border-color: var(--sidebar-border); }
html[data-theme-preset=silver] .sidebar .sb-nav-dot { background: var(--muted-foreground); }
html[data-theme-preset=silver] .sidebar .sb-child.active .sb-nav-dot { background: var(--primary); }
html[data-theme-preset=silver] .sidebar .sb-brand .logo { background: linear-gradient(145deg, var(--card), var(--sidebar-accent)); color: var(--sidebar-foreground); box-shadow: inset 0 1px 0 var(--glass-highlight), 0 3px 12px -8px oklch(0 0 0 / .25); }
html[data-theme-preset=silver] .sidebar .sb-user .avatar { background: var(--sidebar-accent); border-color: var(--sidebar-border); color: var(--sidebar-foreground); }
html:not(.dark)[data-theme-preset=silver] .sidebar :is(.sb-item:hover, .file-nav-link:hover, .file-nav-link.active, .file-nav-icon:hover, .file-nav-toggle:hover, .file-nav-chevron:hover, .sb-user:hover, .sb-user .quit:hover) { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
html:not(.dark)[data-theme-preset=silver] .sidebar :is(.sb-item.active, .sb-item[aria-current=page]) { background: linear-gradient(115deg, oklch(.925 .008 255), oklch(.95 .004 255)); color: var(--sidebar-accent-foreground); box-shadow: inset 0 1px 0 oklch(1 0 0 / .9), inset 0 0 0 1px var(--sidebar-border), 0 4px 14px -12px oklch(.3 .008 255 / .2); }
html:not(.dark)[data-theme-preset=silver] .sidebar .sb-app.is-current > .sb-app-toggle { background: oklch(.945 .005 255); color: var(--sidebar-foreground); }
html:not(.dark)[data-theme-preset=silver] :is(.btn-primary, .btn.ok) { background-color: oklch(.92 .007 255); color: oklch(.27 .009 255); border-color: oklch(.40 .012 255 / .18); box-shadow: inset 0 1px 0 oklch(1 0 0 / .9), 0 4px 12px -8px oklch(.3 .008 255 / .2); }
html[data-theme-preset=silver] .topbar #preset-select { width: 108px; }
/* Opaque baseline is the no-filter fallback. Fixed descendant menus and hints
   must never acquire a different containing block from backdrop-filter. */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .stat { background: var(--glass-quiet); border-color: var(--glass-edge); }
  .card:has(.tbl, .notebook-editor, .todo-input, textarea) { background: color-mix(in oklab, var(--card) 96%, transparent); border-color: var(--border); }
  .card:not(.steward-history):not(:has(.help-hint-popover, .file-options-panel, .steward-conversation-menu, .task-helper-fab, .tbl, textarea, .notebook-editor, .todo-input)),
  .stat:not(:has(.help-hint-popover)), .premium-hero, .workspace-approval-group {
    background-color: var(--glass-fill);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    backdrop-filter: blur(24px) saturate(135%);
  }
  .topbar, .topbar.scrolled { background: color-mix(in oklab, var(--background) 80%, transparent); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
  dialog, .file-dialog, .payroll-dialog, .file-options-panel, .steward-conversation-menu, .console-palette, .help-hint-popover {
    background: var(--glass-menu); -webkit-backdrop-filter: blur(28px) saturate(150%); backdrop-filter: blur(28px) saturate(150%);
  }
  dialog::backdrop { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  .portal-login .login-context { -webkit-backdrop-filter: blur(24px) saturate(135%); backdrop-filter: blur(24px) saturate(135%); }
}
@media (hover: hover) and (pointer: fine) {
  /* Relative top lifts the card without moving fixed descendants off their
     viewport coordinates, unlike transform, filter or will-change: transform. */
  .card:hover, .stat:hover { top: -2px; box-shadow: var(--glass-hover-shadow); border-color: color-mix(in oklab, var(--glass-highlight) 65%, var(--border)); }
  .card:has(input:focus, textarea:focus, select:focus, dialog[open]):hover { top: 0; }
  .btn:hover:not(:disabled) { transform: translateY(-1px); }
  .btn:active:not(:disabled) { transform: scale(.975); }
}
.ui-surface-enter { animation: glass-page-in 280ms ease-out both; }
@keyframes glass-page-in { from { opacity: .82; } to { opacity: 1; } }
@media (max-width: 767px) {
  .main { border-radius: 0; box-shadow: none; }
  .page { gap: 18px; }
  .card { padding: 18px; }
  .stat { padding: 16px; }
}
@media (max-width: 480px) {
  html[data-theme-preset=silver] .topbar { height: auto; min-height: 60px; padding-block: 8px; align-items: flex-start; }
  html[data-theme-preset=silver] .topbar .lft { flex: none; }
  html[data-theme-preset=silver] .topbar .crumb { display: none; }
  html[data-theme-preset=silver] .topbar .rgt { flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
}
/* Limit compositing work on slow devices and honor accessibility preferences. */
html.ui-low-effects :is(.card, .stat, .premium-hero, .workspace-approval-group, .topbar, dialog, .file-options-panel, .steward-conversation-menu, .console-palette, .help-hint-popover, .login-context),
html.ui-low-effects dialog::backdrop { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
html.ui-low-effects :is(.card, .stat, dialog, .file-options-panel, .steward-conversation-menu, .console-palette, .help-hint-popover) { background: var(--card); border-color: var(--border); }
@media (prefers-reduced-transparency: reduce), (update: slow) {
  .card, .stat, .premium-hero, .workspace-approval-group, .topbar, dialog, .file-options-panel, .steward-conversation-menu, .console-palette, .help-hint-popover, .portal-login .login-context { background: var(--card) !important; border-color: var(--border); -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  dialog::backdrop { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce), (update: slow) {
  .page, .ui-surface-enter { animation: none; }
  .card:hover, .stat:hover { top: 0; }
  .btn:hover:not(:disabled), .btn:active:not(:disabled) { transform: none; }
}
@media print {
  .page { animation: none; }
  .card, .stat, .premium-hero { top: 0; background: white; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
}