/* Axiomsight Lens v1. Shared presentation layer, loaded after legacy layout CSS.
 * Glass belongs to navigation and controls. Data remains on a quiet flat plane.
 * All operational state, financial definitions, and calculation code live elsewhere. */
:root {
  color-scheme: light;
  --lens-bg: #e8eced;
  --lens-bg-cool: #dfe7eb;
  --lens-surface: #f5f7f8;
  --lens-glass: rgba(245,249,250,.80);
  --lens-glass-context: rgba(245,249,250,.96);
  --lens-ink: #263b44;
  --lens-muted: #526771;
  --lens-accent: #315f73;
  --lens-line: rgba(62,86,98,.18);
  --lens-control-border: #7e9099;
  --lens-rim: rgba(255,255,255,.92);
  --lens-positive: #25644f;
  --lens-negative: #a34442;
  --lens-warning: #865516;
  --lens-focus: #245b76;
  --lens-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --lens-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --lens-shadow-control: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 9px rgba(38,66,81,.08);
  --lens-shadow-float: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 1px rgba(57,91,109,.18), 0 10px 28px rgba(38,66,81,.12);
  --lens-shadow-sheet: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 44px rgba(38,66,81,.16);
  --lens-ease: cubic-bezier(.2,.8,.2,1);
  --lens-topbar-height: 86px;
  --lens-secondary-height: 0px;
  --lens-layer-content: 0;
  --lens-layer-shell: 200;
  --lens-layer-dock: 300;
}
.lens-app, .lens-auth {
  --background: var(--lens-bg); --foreground: var(--lens-ink);
  --card: var(--lens-surface); --card-foreground: var(--lens-ink);
  --secondary: #e1e8eb; --secondary-foreground: var(--lens-ink);
  --muted: #dde5e8; --muted-foreground: var(--lens-muted);
  --border: var(--lens-line); --input: var(--lens-control-border);
  --ring: var(--lens-focus); --primary: var(--lens-accent);
  --font-sans: var(--lens-font); --font-mono: var(--lens-mono);
  --text-primary: var(--lens-ink); --text-secondary: var(--lens-muted);
  --text-muted: var(--lens-muted); --text-tertiary: var(--lens-muted);
  margin: 0; color: var(--lens-ink); background: var(--lens-bg);
  font: 14px/1.55 var(--lens-font); -webkit-font-smoothing: antialiased;
}
.lens-app *, .lens-app *::before, .lens-app *::after { box-sizing: border-box; }
.lens-app [hidden] { display: none !important; }
.lens-app a, .lens-auth a { color: var(--lens-accent); }
.lens-app button, .lens-app input, .lens-app select { font-family: var(--lens-font); }
.lens-app :focus-visible, .lens-auth :focus-visible {
  outline: 2px solid var(--lens-focus) !important; outline-offset: 3px;
}
.lens-app ::selection, .lens-auth ::selection { background: #c5dce5; color: #1e3947; }
.lens-app .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.lens-skip { position: fixed; top: 12px; left: 16px; z-index: 1000; transform: translateY(-180%); padding: 12px 20px; border-radius: 12px; background: var(--lens-surface); box-shadow: var(--lens-shadow-float); }
.lens-skip:focus { transform: none; }
/* Backdrop (approved 2026-09-12): a neutral misty-ridge scene in a band behind the masthead,
 * scrolling with the page, plus a fixed 24px dot grid behind all content. Both sit below
 * .main-content (isolated, z 0) and the shell; DOM order puts the grid above the hills. */
.lens-app { position: relative; }
.lens-atmosphere { position: absolute; top: 0; left: 0; width: 100%; height: 620px; pointer-events: none; z-index: -1; background: url("/static/img/hills.svg?v=2") center bottom / cover no-repeat; }
.lens-grid { position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient(circle, rgba(84,103,140,.11) 1px, transparent 1.25px) 0 0 / 24px 24px repeat; }
/* Page mastheads and the KPI strip painted their own grey; they now sit on the scene. */
.lens-app .mp-mast, .lens-app .term-mast, .lens-app .term-tape, .lens-app .term-kpi, .lens-app .page-header { background: transparent !important; }
/* Charts are opaque sheets in the page colour, so the dot grid never crosses a plot.
 * ECharts stamps _echarts_instance_ on every container it owns; inside the expanded
 * strategy cards the sheet takes the card's surface colour instead. Important because
 * page CSS (.term[data-page] .portfolio-overlay-chart etc.) sets transparent !important
 * backgrounds on the same nodes, one of them by ID (#mc-forecast-chart); :not(#lens-never)
 * lends the rule an ID's specificity without naming any page element. */
.lens-app .main-content [_echarts_instance_]:not(#lens-never) { background-color: var(--lens-bg) !important; }
.lens-app .main-content .strategy-expanded-col [_echarts_instance_]:not(#lens-never) { background-color: var(--lens-surface) !important; }
.lens-app .app-layout { display: block; min-height: 100vh; max-width: 1600px; margin: auto; }
/* The shell owns sticky positioning; legacy global header rules must not
 * turn page mastheads into a second competing shell. Keep shell ancestors
 * free of transforms/filters so fixed small-screen menus use the viewport. */
.lens-topbar { position: sticky; top: 0; z-index: var(--lens-layer-shell); height: var(--lens-topbar-height); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 34px; margin: 0 48px; padding: 0; border-bottom: 1px solid var(--lens-line); background: var(--lens-bg); overflow: visible; }
.lens-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--lens-ink) !important; text-decoration: none; font: 500 18px/1 var(--lens-font); letter-spacing: -.035em; }
.lens-brand { min-height: 44px; }
.lens-topbar-actions { display: flex; align-items: center; margin-left: auto; gap: 17px; }
.lens-account { display: flex; align-items: center; gap: 9px; min-height: 44px; font-size: 12px; text-decoration: none; }
.lens-app .lens-icon-button { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 10px; border-radius: 50%; border: 1px solid transparent; background: transparent; color: var(--lens-muted); cursor: pointer; transition: background 140ms, color 140ms; }
.lens-app .lens-icon-button:hover { color: var(--lens-ink); background: #f7fafb80; border-color: var(--lens-rim); }
.lens-app .main-content { position: relative; z-index: var(--lens-layer-content); isolation: isolate; min-width: 0; display: block; min-height: calc(100vh - var(--lens-topbar-height)); margin: 0; padding: 0 48px 126px; }
.lens-app .main-content header { position: static; top: auto; z-index: auto; }
.lens-app .page-header { min-height: 70px; display: flex; flex-wrap: wrap; gap: 24px; padding: 13px 0; margin: 0 0 17px; border: none; }
.lens-breadcrumb { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--lens-muted); }
.lens-app .page-title { margin: 0; font: 500 12px/1.4 var(--lens-font); letter-spacing: 0; color: var(--lens-ink); }
.lens-app .page-meta { gap: 8px; }
.lens-app .last-updated { color: var(--lens-muted); font: 11px/1.4 var(--lens-mono); letter-spacing: 0; text-align: right; }
.lens-app .page-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 48px 0 0; padding: 20px 0 0; font: 11px/1.7 var(--lens-font); color: var(--lens-muted); border-color: var(--lens-line); }
.lens-app .page-footer a { text-decoration: none; }
.lens-app .canvas-page { min-width: 0; width: 100%; background: transparent; padding: 0; }
.lens-app .canvas-loading { min-height: 280px; background: transparent; }
.lens-app .canvas-spinner { border-color: var(--lens-line); border-top-color: var(--lens-accent); }
.lens-app .canvas-error { color: var(--lens-negative); background: transparent; padding: 48px 16px; }
.lens-app[data-active-page="market"] .canvas-error,
.lens-app[data-active-page="smallcaps"] .canvas-error { display: flex; }
.lens-app .error-content { flex-wrap: wrap; }
.lens-app .btn-retry { background: var(--lens-surface); color: var(--lens-accent); border: 1px solid var(--lens-control-border); border-radius: 12px; min-height: 44px; padding: 10px 20px; }

/* Floating dock: bounded glass, no blurred chart plane. */
.lens-dock { position: fixed; z-index: var(--lens-layer-dock); bottom: max(23px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; width: max-content; max-width: calc(100% - 24px); padding: 7px; border: 1px solid var(--lens-rim); border-radius: 40px; background: var(--lens-glass); backdrop-filter: blur(20px) saturate(1.12); -webkit-backdrop-filter: blur(20px) saturate(1.12); box-shadow: var(--lens-shadow-float); }
.lens-dock-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 12px 21px; border-radius: 28px; border: 1px solid transparent; background: transparent; color: var(--lens-muted) !important; font: 500 12px/1 var(--lens-font); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 180ms var(--lens-ease), color 140ms, box-shadow 180ms; }
.lens-dock-item svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lens-dock-item.active, .lens-dock-item[aria-expanded="true"] { color: var(--lens-ink) !important; background: #ffffff85; border-color: #ffffffc7; box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #68869325, 0 2px 5px #44667712; }
.lens-dock-item:hover { background: #ffffff70; color: var(--lens-ink) !important; }
.lens-dock-group { position: relative; }
.lens-menu { position: absolute; bottom: calc(100% + 20px); right: 0; width: 318px; max-height: calc(100dvh - 120px); overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: #8ca0aa transparent; padding: 14px; background: var(--lens-glass-context); border: 1px solid var(--lens-rim); border-radius: 23px; box-shadow: var(--lens-shadow-sheet); backdrop-filter: blur(24px) saturate(1.12); -webkit-backdrop-filter: blur(24px) saturate(1.12); animation: lens-menu-in 180ms var(--lens-ease); }
.lens-menu-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; font-size: 13px; font-weight: 600; color: var(--lens-ink); padding: 9px 11px 15px; }
.lens-menu-heading span { font-size: 11px; color: var(--lens-muted); font-weight: 400; }
.lens-menu a { display: flex; flex-direction: column; gap: 1px; padding: 11px 12px; min-height: 44px; color: var(--lens-ink); font-size: 13px; text-decoration: none; border-radius: 12px; }
.lens-menu a span { font-size: 11px; color: var(--lens-muted); }
.lens-menu a:hover, .lens-menu a[aria-current] { background: #dce8ed; }
.lens-menu a[aria-current] { box-shadow: inset 2px 0 var(--lens-accent); }
.lens-menu-divider { margin: 9px 10px 3px; padding-top: 12px; border-top: 1px solid var(--lens-line); font-size: 11px; color: var(--lens-muted); }
.lens-menu p { margin: 13px 11px 7px; padding-top: 13px; border-top: 1px solid var(--lens-line); font-size: 12px; line-height: 1.6; color: var(--lens-muted); }
.lens-app #main-content { scroll-margin-top: calc(var(--lens-topbar-height) + var(--lens-secondary-height) + 24px); }
@keyframes lens-menu-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* Compatibility tokens for existing analytical components. */
.lens-app .term {
  --ink: var(--lens-ink); --ink-1: var(--lens-ink); --ink-2: var(--lens-muted);
  --ink-3: var(--lens-muted); --ink-4: #6b7e87; --bg: var(--lens-bg); --panel: var(--lens-surface);
  --rule: var(--lens-line); --rule-2: rgba(62,86,98,.24); --rule-faint: rgba(62,86,98,.10);
  --pos: var(--lens-positive); --neg: var(--lens-negative); --accent: var(--lens-warning);
  --mono: var(--lens-mono); --serif: var(--lens-font);
  color: var(--lens-ink); font-family: var(--lens-font); font-feature-settings: "tnum" 1;
}
.lens-app .term[data-page], .lens-app .term-wrap { padding: 0; }
.lens-app .mp-page { max-width: none; }
.lens-app .term-anim { opacity: 1; animation: none; transform: none; }
.lens-app .term-mast, .lens-app .mp-mast { align-items: flex-start; padding: 3px 0 28px; margin-bottom: 20px; gap: 24px; border-bottom: 1px solid var(--lens-line); }
.lens-app .term-mast-title, .lens-app .mp-mast h1 { margin: 0; font: 450 clamp(30px, 3vw, 44px)/1.14 var(--lens-font); letter-spacing: -.045em; }
.lens-app h1 { text-transform: none; }
.lens-app .mp-mast h1 { margin-top: 10px; }
.lens-app .term-mast-desc { margin-top: 14px; font: 14px/1.65 var(--lens-font); font-style: normal; color: var(--lens-muted); max-width: 78ch; }
.lens-app .term .eyebrow, .lens-app .mp-eyebrow { font: 11px/1.55 var(--lens-font); color: var(--lens-muted); text-transform: uppercase; letter-spacing: .09em; }
.lens-app .term-mast-kick { margin-bottom: 10px; }
.lens-app .term-mast-r { padding-top: 5px; gap: 10px; white-space: normal; max-width: 42%; }
.lens-app .term-fresh { font: 11px/1.5 var(--lens-mono); letter-spacing: .015em; }
.lens-app .term-tag, .lens-app .term-mast-title .dir, .lens-app .mb-flag, .lens-app .sc-flag { border-color: var(--lens-line); background: #f3f7f74f; border-radius: 6px; font-size: 11px; line-height: 1.6; padding: 4px 8px; letter-spacing: .025em; }
.lens-app .mp-asof { max-width: 42%; font-size: 11px; white-space: normal; letter-spacing: .025em; }
.lens-app .mp-asof b { font-size: 16px; margin: 4px 0 8px; color: var(--lens-ink); }
.lens-app .mp-asof-2 { line-height: 2.6; font-size: 11px; }
.lens-app .mb-flag { margin: 0 0 5px 6px; }
.lens-app .term-tape { margin: 24px 0 32px; padding: 6px 0; border-top: 0; }
.lens-app .term-kpi { padding: 14px 25px 17px; }
.lens-app .term-kpi .k { font: 11px/1.5 var(--lens-font); letter-spacing: .035em; margin-bottom: 10px; }
.lens-app .term-kpi .v { font: 450 clamp(24px,2.5vw,34px)/1.15 var(--lens-mono); letter-spacing: -.055em; }
.lens-app .term-kpi .s { font-size: 11px; line-height: 1.6; margin-top: 8px; }
.lens-app .term-sec { margin: 36px 0 17px; flex-wrap: wrap; gap: 14px; align-items: center; }
.lens-app .term-sec h3, .lens-app .mp-sec-head h2, .lens-app .strategies-section>h2 { font: 550 19px/1.35 var(--lens-font) !important; letter-spacing: -.025em; color: var(--lens-ink) !important; }
.lens-app .term-sec .term-sec-note { font: 12px/1.5 var(--lens-font); color: var(--lens-muted); }
.lens-app .term-note, .lens-app .strategy-assumptions, .lens-app .mp-foot { font: 12px/1.7 var(--lens-font) !important; color: var(--lens-muted); max-width: 100ch; }
.lens-app .term-note b { color: var(--lens-ink); }
/* Fader/Star Forge method notes carry the borrow and upper-bound caveats: undo the legacy
 * canvas.css dimming (opacity .55, centred) so they read at the muted token, left-aligned. */
.lens-app .strategy-assumptions { opacity: 1; text-align: left; }
.lens-app .term-banner, .lens-app .term[data-page="algo"] .algo-warning-banner { color: var(--lens-warning) !important; background: #f1e8d958 !important; border: 1px solid #a780426b !important; border-radius: 10px !important; font: 12px/1.6 var(--lens-font) !important; padding: 12px 16px; }
.lens-app .term-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); gap: 0 40px; }
.lens-app .term-lrow { padding: 11px 0; }
.lens-app .term-lrow .lk { font: 12px/1.5 var(--lens-font); }
.lens-app .term-lrow .lv { font-size: 13px; }
.lens-app .term-chart { border: none; border-radius: 0; padding: 8px 0 0; background: transparent; }
.lens-app .mp-sec { margin-top: 34px; }
.lens-app .mp-sec-head { margin-bottom: 24px; }
.lens-app .mb-cap, .lens-app .sc-cap { font: 12px/1.6 var(--lens-font); color: var(--lens-muted); letter-spacing: .01em; text-transform: none; margin: 0 0 13px; }
.lens-app .mb-grid, .lens-app .sc-grid { gap: 32px 34px; }
.lens-app .mb-grid>div, .lens-app .sc-grid>div { min-width: 0; border-top: 1px solid var(--lens-line); padding-top: 22px; }
.lens-app .mb-chart, .lens-app .sc-chart { height: 310px; }
.lens-app .mb-chart-lg, .lens-app .sc-chart-lg { height: 370px; }
.lens-app .g { color: var(--lens-positive); }
.lens-app .r { color: var(--lens-negative); }
.lens-app .y { color: var(--lens-warning); }

/* Shared tactile controls. Legacy class names retain their existing handlers. */
/* Star Forge's segmented controls take Fader's capsule; the Sleeves toggle stays as it is. */
.lens-app .term-seg, .lens-app .mb-tf, .lens-app .sc-tf, .lens-app .term[data-page="fader"] .range-selector, .lens-app .term[data-page="star_forge"] .range-selector { display: inline-flex; gap: 2px; padding: 4px; overflow: visible; border: 1px solid var(--lens-rim); border-radius: 24px; background: #f5f9fa80; box-shadow: var(--lens-shadow-control); }
.lens-app .term-seg button, .lens-app .mb-tf button, .lens-app .sc-tf button, .lens-app .term[data-page="fader"] .range-btn, .lens-app .term[data-page="star_forge"] .range-selector .range-btn { min-height: 36px; padding: 8px 15px; border: 1px solid transparent; border-radius: 20px; background: transparent; font: 500 11px/1.4 var(--lens-font); letter-spacing: .015em; color: var(--lens-muted); cursor: pointer; transition: background 140ms, color 140ms; }
.lens-app .term-seg button.active, .lens-app .mb-tf button.on, .lens-app .sc-tf button.on, .lens-app .term[data-page="fader"] .range-btn.active, .lens-app .term[data-page="star_forge"] .range-selector .range-btn.active { background: #ffffffb8; color: var(--lens-ink); border-color: #fff; box-shadow: inset 0 1px 0 #fff, 0 2px 5px #44667718; }
.lens-app .term-seg button:hover, .lens-app .mb-tf button:hover, .lens-app .sc-tf button:hover { color: var(--lens-ink); background: #ffffff80; }
.lens-app .term .range-selector { border: 1px solid var(--lens-rim) !important; border-radius: 24px !important; overflow: visible; }
.lens-app .term .range-btn { font: 500 12px/1.4 var(--lens-font) !important; text-transform: none !important; border-right: none; }
.lens-app .term .range-btn.active { background: #f8fbfc !important; color: var(--lens-ink) !important; }
.lens-app .term[data-page="star_forge"] .range-btn { min-height: 36px; padding: 8px 13px; }
/* Star Forge capsule as in the approved mock: no outline on the inactive buttons, a white rim on the active one.
 * The legacy terminal rule paints every .range-btn border with !important, hence !important here. Fader unchanged. */
.lens-app .term[data-page="star_forge"] .range-selector .range-btn { border-color: transparent !important; }
.lens-app .term[data-page="star_forge"] .range-selector .range-btn.active { border-color: #fff !important; }
.lens-app .term[data-page="strategy"] a.eyebrow[href="/strategies/star-forge"],
.lens-app .term[data-page="star_forge"] .strategy-expanded-name a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 2px; }
.lens-app .term[data-page="algo"] .algo-mode-btn, .lens-app .term[data-page="algo"] .algo-period-tab, .lens-app .term[data-page="algo"] .algo-tier-filter-btn, .lens-app .term[data-page="algo"] .algo-daterange-btn { min-height: 36px; padding: 8px 13px; font: 500 12px/1.4 var(--lens-font) !important; border-radius: 20px; background: #f5f9fa66 !important; color: var(--lens-muted) !important; border-color: #8c9fa966 !important; box-shadow: none; }
.lens-app .term[data-page="algo"] .algo-mode-btn.active, .lens-app .term[data-page="algo"] .algo-period-tab.active, .lens-app .term[data-page="algo"] .algo-tier-filter-btn.active, .lens-app .term[data-page="algo"] .algo-daterange-btn.active { background: #f8fbfc !important; color: var(--lens-ink) !important; border-color: #6c899766 !important; box-shadow: var(--lens-shadow-control); }
.lens-app .algo-daterange-bar { top: var(--lens-topbar-height); flex-wrap: wrap; gap: 12px; background: var(--lens-bg); }
.lens-app .term[data-page="algo"] .algo-daterange-bar { background: var(--lens-bg) !important; }
.lens-app .algo-daterange-presets { flex-wrap: wrap; max-width: 100%; }
.lens-app .lens-date-feedback { flex-basis: 100%; margin: 0; font: 500 12px/1.5 var(--lens-font); color: var(--lens-muted); }
.lens-app .lens-date-feedback:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.lens-app .lens-date-feedback.is-error { color: var(--lens-negative); }
.lens-app input[aria-invalid="true"] { border-color: var(--lens-negative); }
.lens-app .lens-period-action { min-height: 44px; padding: 6px 2px; border: 0; background: transparent; color: var(--lens-accent); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lens-app input[type="date"], .lens-app select { color-scheme: light; min-height: 38px; background: #f7f9fa; color: var(--lens-ink); border: 1px solid var(--lens-control-border); border-radius: 10px; padding: 7px 10px; font-size: 12px; max-width: 100%; }
.lens-app .algo-daterange-apply, .lens-app #dr-apply, .lens-app #download-report, .lens-app #toggle-individuals { min-height: 40px; border-radius: 20px; background: #f5f9fa99; border: 1px solid var(--lens-control-border); color: var(--lens-accent); padding: 9px 16px; font: 500 12px/1.5 var(--lens-font); cursor: pointer; }
.lens-app button:disabled { opacity: .55; cursor: wait; }

/* Preserve every table column, including optional overview sparkline columns. */
.lens-table-scroll { max-width: 100%; min-width: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #8ca0aa transparent; }
.lens-app .term-table { font-size: 12px; }
.lens-app .term-table thead th { font: 550 11px/1.5 var(--lens-font); letter-spacing: .035em; padding: 12px 15px; color: var(--lens-muted); }
.lens-app .term-table tbody td { font-size: 12px; padding: 19px 15px; border-color: var(--lens-line); }
.lens-app .term-table thead th:first-child, .lens-app .term-table tbody td:first-child { padding-left: 0; }
.lens-app .term-rowname .nm { font: 550 16px/1.4 var(--lens-font); letter-spacing: -.02em; }
.lens-app .term-rowname .sub { font: 11px/1.6 var(--lens-font); }
.lens-app .term-table .ov-col-opt { display: table-cell; }
.lens-app .term-table tr.row:hover, .lens-app .term[data-page="algo"] .algo-trade-table tr:hover { background: #f9fcfc55 !important; }
.lens-app .term-table tr.row:hover td:first-child { box-shadow: none; }
.lens-app .term-dir { font-size: 11px; }
/* Annual + monthly tables. Star Forge takes Fader's table styling (the legacy rules in
 * strategies_terminal.css are Fader-only), then both pages set numbers right-aligned under
 * right-aligned headers from the page edge, as on the sleeve pages. Scoped to these two
 * pages: algo.js renders the same .yr-table/.hm-table classes. */
.lens-app .term[data-page="star_forge"] :is(.yr-table, .hm-table) { font-family: var(--mono); font-variant-numeric: tabular-nums; width: 100%; border-collapse: collapse; }
.lens-app .term[data-page="star_forge"] :is(.yr-table, .hm-table) th { text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--rule-2); padding: 6px 10px; }
.lens-app .term[data-page="star_forge"] .yr-table td { padding: 9px 10px; border-bottom: 1px solid var(--rule); }
.lens-app .term[data-page="star_forge"] .hm-month { color: var(--ink-3); }
.lens-app .term:is([data-page="fader"], [data-page="star_forge"]) :is(.yr-table, .hm-table) th { font: 550 11px/1.5 var(--lens-font); letter-spacing: .025em; }
.lens-app .term:is([data-page="fader"], [data-page="star_forge"]) :is(.yr-table, .hm-table) td { font-size: 12px; }
.lens-app .term:is([data-page="fader"], [data-page="star_forge"]) .strat-table-wrap { padding-left: 0; padding-right: 0; }
.lens-app .term:is([data-page="fader"], [data-page="star_forge"]) .yr-table :is(th, td) { text-align: right; padding-left: 0; padding-right: 16px; }
.lens-app .term:is([data-page="fader"], [data-page="star_forge"]) .hm-table :is(th, td) { text-align: right; }
.lens-app .term:is([data-page="fader"], [data-page="star_forge"]) :is(.yr-table, .hm-table) :is(th, td):first-child { text-align: left; }
@media (min-width: 721px) {
  .lens-app .term:is([data-page="fader"], [data-page="star_forge"]) .hm-table td { padding: 3px 8px; }
  .lens-app .term:is([data-page="fader"], [data-page="star_forge"]) .hm-table th { padding-right: 8px; }
  .lens-app .term:is([data-page="fader"], [data-page="star_forge"]) .hm-table :is(th, td):first-child { padding-left: 0; }
}
.lens-app .term[data-page="fader"] .stat-label, .lens-app .term[data-page="fader"] .stat-sublabel, .lens-app .term[data-page="fader"] .health-legend, .lens-app .term[data-page="fader"] .mc-scenario-desc, .lens-app .term[data-page="fader"] .mc-stat-label { font: 12px/1.6 var(--lens-font); letter-spacing: .01em; }
.lens-app .term[data-page="fader"] .strategy-expanded-col { border: none; border-top: 1px solid var(--lens-line); border-radius: 0; padding-top: 15px; min-width: 0; }
.lens-app .term[data-page="fader"] .strategy-expanded-name { font-size: 19px; }
.lens-app .term[data-page="fader"] .portfolio-analytics-title { font-size: 18px; margin-bottom: 15px; }
.lens-app .term[data-page="fader"] .strategy-assumptions { font-size: 12px; }
.lens-app .term[data-page="fader"] .mc-stat-value { font-size: 19px; }
.lens-app .strategy-expanded-grid, .lens-app .portfolio-analytics-grid { gap: 28px; }
.lens-app #strategy-expanded-grid[style*="display:none"], .lens-app #strategy-expanded-grid[style*="display: none"] { display: none !important; }
.lens-app .term[data-page="fader"] .dir-badge, .lens-app .term[data-page="fader"] .fee-badge, .lens-app .term[data-page="fader"] .paused-badge, .lens-app .term[data-page="fader"] .streak-info { font-size: 11px; line-height: 1.6; }

/* Dense execution records: flat ledger sections, with the same runtime data. */
.lens-app .term[data-page="algo"] .algo-section { margin-bottom: 38px; }
.lens-app .term[data-page="algo"] .algo-section-header { font: 550 19px/1.45 var(--lens-font) !important; padding-bottom: 13px !important; }
.lens-app .term[data-page="algo"] .algo-section-body { padding-top: 20px !important; min-width: 0; }
.lens-app .term[data-page="algo"] .algo-headline-card, .lens-app .term[data-page="algo"] .algo-header-card, .lens-app .term[data-page="algo"] .algo-header-strip { background: transparent !important; border: none !important; border-top: 1px solid var(--lens-line) !important; border-bottom: 1px solid var(--lens-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.lens-app .term[data-page="algo"] .algo-headline-card .algo-section-header { font-size: 15px !important; padding: 15px 0 !important; }
.lens-app .term[data-page="algo"] .algo-headline-body { padding: 14px 0 18px !important; }
.lens-app .term[data-page="algo"] .algo-headline-label, .lens-app .term[data-page="algo"] .algo-stat-label, .lens-app .term[data-page="algo"] .algo-exec-label { font: 12px/1.55 var(--lens-font) !important; }
.lens-app .term[data-page="algo"] .algo-headline-value { font-weight: 450 !important; letter-spacing: -.045em; }
.lens-app .term[data-page="algo"] .term-kpi { padding-left: 16px; padding-right: 16px; }
.lens-app .term[data-page="algo"] .term-kpi .v { font-size: 26px; }
.lens-app .term[data-page="algo"] .term-tape .term-kpi:nth-child(6) .v { font: 500 15px/1.7 var(--lens-mono); letter-spacing: -.02em; }
.lens-app .term[data-page="algo"] .algo-headline-sub, .lens-app .term[data-page="algo"] .algo-header-strip .label { font: 12px/1.6 var(--lens-font) !important; }
.lens-app .term[data-page="algo"] .algo-strat-name { font: 550 16px/1.45 var(--lens-font) !important; }
.lens-app .term[data-page="algo"] .algo-strat-stat { font-size: 12px !important; line-height: 1.6; padding: 8px 0 !important; }
.lens-app .term[data-page="algo"] .algo-cohort-grid { grid-template-columns: repeat(auto-fit,minmax(min(100%,360px),1fr)); }
.lens-app .term[data-page="algo"] .algo-cohort-title, .lens-app .term[data-page="algo"] .algo-capture-charttitle { font: 550 12px/1.6 var(--lens-font) !important; letter-spacing: .035em; }
.lens-app .term[data-page="algo"] .algo-cohort-table, .lens-app .term[data-page="algo"] .algo-trade-table, .lens-app .term[data-page="algo"] .algo-period-summary { font-size: 12px; line-height: 1.6; }
.lens-app .term[data-page="algo"] .algo-cohort-table th, .lens-app .term[data-page="algo"] .algo-trade-table th { font: 550 11px/1.5 var(--lens-font); letter-spacing: .02em; padding-top: 10px; padding-bottom: 10px; }
.lens-app .term[data-page="algo"] .algo-cohort-table td, .lens-app .term[data-page="algo"] .algo-trade-table td { padding-top: 10px; padding-bottom: 10px; }
.lens-app .term[data-page="algo"] .algo-cohort-table tr.algo-cohort-thin td { opacity: 1; color: var(--lens-muted) !important; }
.lens-app .term[data-page="algo"] .algo-capture-verdict { font: 12px/1.65 var(--lens-font) !important; }
.lens-app .term[data-page="algo"] .algo-capture-bucket-label, .lens-app .term[data-page="algo"] .algo-capture-bucket-detail { font: 12px/1.6 var(--lens-font) !important; }
.lens-app .term[data-page="algo"] .algo-collapse-head { min-height: 44px; }
.lens-app .algo-two-col>* { min-width: 0; }
.lens-app .algo-note, .lens-app .algo-subtitle, .lens-app .algo-empty { color: var(--lens-muted); font: 12px/1.6 var(--lens-font); }
.lens-empty { padding: 65px 0 90px; max-width: 680px; }
.lens-empty .lens-empty-label { color: var(--lens-muted); font-size: 12px; margin-bottom: 15px; }
.lens-empty h2 { font: 450 40px/1.15 var(--lens-font); letter-spacing: -.045em; margin: 0 0 15px; color: var(--lens-ink); }
.lens-empty p { color: var(--lens-muted); font-size: 14px; }

/* Authentication shares material only; form handlers, fields and cookie logic stay intact. */
.lens-auth { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: radial-gradient(ellipse at 12% 10%,#d3e1e766,transparent 48%),var(--lens-bg); }
.lens-auth .box { width: min(100%,410px); border: 1px solid var(--lens-rim); border-radius: 27px; background: var(--lens-glass); padding: 36px; box-shadow: var(--lens-shadow-sheet); }
.lens-auth h1 { font: 500 27px/1.2 var(--lens-font); color: var(--lens-ink); letter-spacing: -.04em; }
.lens-auth p, .lens-auth .sub { color: var(--lens-muted); font: 13px/1.65 var(--lens-font); }
.lens-auth input { color-scheme: light; box-sizing: border-box; width: 100%; background: #f8fafb; color: var(--lens-ink); border: 1px solid var(--lens-control-border); border-radius: 12px; padding: 13px 15px; font: 16px/1.5 var(--lens-font); min-height: 48px; }
.lens-auth button { background: var(--lens-accent); border: 1px solid var(--lens-accent); border-radius: 14px; color: #fff; font: 500 14px/1.5 var(--lens-font); padding: 13px 18px; min-height: 48px; cursor: pointer; }
.lens-auth .err { color: var(--lens-negative); font: 12px/1.6 var(--lens-font); }
.lens-auth .login { width: min(100%,410px); max-width: 410px; padding: 36px; border: 1px solid var(--lens-rim); border-radius: 27px; background: var(--lens-glass); box-shadow: var(--lens-shadow-sheet); }
.lens-auth .brand { color: var(--lens-ink); font: 500 22px/1.25 var(--lens-font); letter-spacing: -.035em; }
.lens-auth .byline { color: var(--lens-muted); font: 12px/1.6 var(--lens-font); letter-spacing: 0; margin: 9px 0 28px; }
.lens-auth .lens-auth-label { display: block; margin-bottom: 8px; font: 12px/1.5 var(--lens-font); }
.lens-auth #pk { background: #f8fafb; color: var(--lens-ink); border: 1px solid var(--lens-control-border); border-radius: 12px; padding: 13px 15px; font: 16px/1.5 var(--lens-font); }
.lens-auth .error { color: var(--lens-negative); font: 12px/1.6 var(--lens-font); }
.lens-auth .code { color: var(--lens-accent); font: 550 12px/1.5 var(--lens-mono); }
.lens-auth .sig { color: var(--lens-muted); font: 11px/1.6 var(--lens-font); }

@media (max-width: 1100px) {
  .lens-topbar { margin: 0 32px; }
  .lens-app .main-content { padding-left: 32px; padding-right: 32px; }
  .lens-app .term-kpi { padding-left: 16px; padding-right: 16px; }
  .lens-app .term-mast-r { max-width: 38%; }
}
@media (max-width: 960px) {
  .lens-app .mb-grid, .lens-app .sc-grid { grid-template-columns: 1fr; }
  .lens-app .algo-two-col, .lens-app .portfolio-analytics-grid { grid-template-columns: 1fr !important; }
  .lens-app .term-mast-r, .lens-app .mp-asof { max-width: none; }
  .lens-app .term-tape { grid-auto-flow: row; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lens-app .term-kpi { border-top: 1px solid var(--lens-line); }
  .lens-app .term-kpi:nth-child(odd) { border-left: none; padding-left: 0; }
}
/* Compact one-row dock from 760 px (was 720): with six items (IG, 2026-10-18) the full-size dock is 710 px wide
 * and touched the viewport edges at 721-733 px. */
@media (max-width: 760px) {
  .lens-dock { padding: 6px; gap: 1px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .lens-dock-item { gap: 6px; min-height: 48px; padding: 11px 14px; font-size: 11px; }
  .lens-dock-item svg { width: 17px; height: 17px; }
}
@media (max-width: 720px) {
  :root { --lens-topbar-height: 72px; }
  .lens-atmosphere { height: 560px; }
  .lens-topbar { margin: 0 20px; gap: 15px; }
  .lens-topbar-actions { gap: 3px; }
  .lens-app .main-content { padding: 0 20px 118px; }
  .lens-app .page-header { min-height: 65px; gap: 12px; margin-bottom: 12px; }
  .lens-breadcrumb { gap: 8px; }
  .lens-breadcrumb>span:first-child { display: none; }
  .lens-breadcrumb>span:nth-child(2) { display: none; }
  .lens-app .last-updated { font-size: 10px; max-width: 180px; }
  .lens-app .term-mast, .lens-app .mp-mast { display: block; padding-bottom: 22px; }
  .lens-app .term-mast-title, .lens-app .mp-mast h1 { font-size: 34px; }
  .lens-app .term-mast-desc { font-size: 13px; }
  .lens-app .term-mast-r, .lens-app .mp-asof { text-align: left; align-items: flex-start; margin-top: 20px; max-width: none; }
  .lens-app .term-tags { justify-content: flex-start; }
  .lens-app .mb-flag { margin: 0 6px 5px 0; }
  .lens-app .term .eyebrow, .lens-app .mp-eyebrow { font-size: 10px; line-height: 1.7; }
  .lens-app .mp-sec-head { gap: 16px; margin-bottom: 20px; }
  .lens-app .mb-tf, .lens-app .sc-tf { margin-left: 0; }
  .lens-app .mp-sec-head h2 { width: 100%; }
  .lens-app .term-seg button, .lens-app .mb-tf button, .lens-app .sc-tf button, .lens-app .term[data-page="fader"] .range-btn, .lens-app .term[data-page="star_forge"] .range-selector .range-btn { min-height: 40px; padding: 9px 12px; }
  .lens-app .term[data-page="star_forge"] .range-btn { min-height: 40px; padding: 9px 12px; }
  .lens-app .mb-chart-lg, .lens-app .sc-chart-lg { height: 330px; }
  .lens-app .mb-chart, .lens-app .sc-chart { height: 290px; }
  .lens-app .mb-grid, .lens-app .sc-grid { gap: 25px; }
  .lens-app .term-note { font-size: 12px; }
  .lens-app #capacity-section>div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .lens-app .strategy-expanded-grid { grid-template-columns: 1fr !important; }
  .lens-app .term[data-page="algo"] .algo-exec-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .lens-app .term[data-page="algo"] .algo-exec-card:nth-child(odd) { border-left: none !important; }
  .lens-app .term[data-page="algo"] .algo-exec-card { border-top: 1px solid var(--lens-line) !important; }
  .lens-app .algo-daterange-custom { flex-wrap: wrap; }
  .lens-app input[type="date"], .lens-app select { font-size: 16px; }
  .lens-app .algo-daterange-bar, .lens-app .algo-mode-toggle { flex-wrap: wrap; }
  /* A multi-row toolbar must not consume a narrow viewport while scrolling. */
  .lens-app .algo-daterange-bar { position: static; top: auto; }
  .lens-app .page-footer { align-items: flex-start; font-size: 11px; }
  /* Absolute dock sheets anchor to the dock itself, never to an accidental
   * transform/backdrop containing block. */
  .lens-dock > .lens-dock-group { position: static; }
  .lens-dock .lens-menu { position: absolute; left: 0; right: 0; bottom: calc(100% + 14px); width: auto; max-height: calc(100dvh - var(--lens-topbar-height) - 130px); }
}
@media (max-width: 420px) {
  .lens-topbar { margin: 0 16px; }
  .lens-app .main-content { padding-left: 16px; padding-right: 16px; }
  .lens-brand { font-size: 17px; gap: 7px; }
  .lens-account { gap: 7px; }
  .lens-app .term-mast-title, .lens-app .mp-mast h1 { font-size: 32px; }
  .lens-app .term-kpi .v { font-size: 26px; }
  .lens-app .term-seg button, .lens-app .mb-tf button, .lens-app .sc-tf button { padding: 9px 10px; }
  .lens-auth .box { padding: 27px; }
}
/* Compact dock: six columns, icon over label. 630 px (was 520 with five items; 420 with four): the IG item
 * (2026-10-18) made the one-row dock wider than the viewport at 521–579 px. The columns share the width but never
 * get narrower than their label (max-content), so "Small Caps" and "Strategies" stay whole at 320 px. */
@media (max-width: 630px) {
  .lens-dock { width: calc(100% - 24px); display: grid; grid-template-columns: repeat(6,minmax(max-content,1fr)); }
  .lens-dock-group { min-width: 0; }
  .lens-dock-item { width: 100%; min-width: 0; min-height: 55px; padding: 8px 3px; flex-direction: column; font-size: 10px; gap: 5px; }
  .lens-dock-item svg { width: 16px; height: 16px; }
}
/* Page-to-page transitions (2026-09-23; fade and rise approved by the owner 2026-09-24):
 * cross-document View Transitions, progressive enhancement — a browser without them
 * navigates exactly as before, and nothing here changes a page at rest. Screen only, and
 * only without a reduced-motion preference (then the swap is instant). Dock, topbar and
 * backdrop (page ground, hills, dot grid) stay still; the old content is hidden at once and
 * the new content fades in and rises 10px over 260ms.
 * The fade is a filter, never opacity: opacity made the chart sheets translucent and the dot
 * grid showed through the plots mid-fade (review 2026-09-23: up to 81 % of full strength).
 * brightness(.5/p) contrast(k) brightness(2p) pulls every colour towards the page tone p by
 * 1-k and never changes alpha (p = .92, --lens-bg #e8eced as one grey; no stage clips, as
 * .5435 x 1.84 = 1). Opaque pixels look as in an opacity fade over the page ground, but the
 * sheets stay opaque in every frame, so the grid never crosses a plot. k starts at .08, not
 * 0, so text over the (darker) hills does not start lighter than them. No value is tweened.
 * Data pages hold their body (display:none) until the page script's fetch returns, usually
 * after the transition has ended; that body then plays the same keyframes on the real element
 * (.lens-arrive, started by lens-ui.js only after a navigation that had a view transition, in
 * the frame its content is first drawn), so the content fades in too instead of appearing in
 * one frame. Fill mode backwards: nothing is left on the element at rest.
 * The dock is never captured before it exists: base_app.html blocks first render until
 * #sidebar is parsed (<link rel="expect" blocking="render">). */
/* 2026-09-24 v2: cross-document View Transitions are OFF. In Safari they hid the dock and
 * topbar mid-transition and the charts still popped in. The fade is now plain CSS on the page
 * itself (see "Page fade" below), identical in Safari and Chrome; the dock never moves because
 * it sits outside .main-content and the browser holds the old page until the new one paints. */
.lens-app .main-content { view-transition-name: lens-page; view-transition-class: lens-page; }
.lens-app[data-active-page="market"] .main-content { view-transition-name: lens-page-market; }
.lens-app[data-active-page="smallcaps"] .main-content { view-transition-name: lens-page-smallcaps; }
.lens-app[data-active-page="overview"] .main-content { view-transition-name: lens-page-overview; }
.lens-app[data-active-page="fader"] .main-content { view-transition-name: lens-page-fader; }
.lens-app[data-active-page="star_forge"] .main-content { view-transition-name: lens-page-star-forge; }
.lens-app[data-active-page="icarus"] .main-content { view-transition-name: lens-page-icarus; }
.lens-app[data-active-page="nightfall"] .main-content { view-transition-name: lens-page-nightfall; }
.lens-app[data-active-page="nasdaq_mr"] .main-content { view-transition-name: lens-page-nasdaq-mr; }
.lens-app[data-active-page="fader-bot"] .main-content { view-transition-name: lens-page-fader-bot; }
.lens-app[data-active-page="star-forge-bot"] .main-content { view-transition-name: lens-page-star-forge-bot; }
.lens-app[data-active-page="journal"] .main-content { view-transition-name: lens-page-journal; }
.lens-app[data-active-page="chart"] .main-content { view-transition-name: lens-page-chart; }
.lens-topbar { view-transition-name: lens-topbar; }
.lens-dock { view-transition-name: lens-dock; }
/* Only the incoming content animates. Every other pseudo-element is static and the outgoing
 * images are hidden: root, topbar and dock show the live new page from the first frame, and
 * no group moves, so a same-page re-open does not jump either. The dock group takes the
 * dock's radius (40px): while the dock is named, its glass blur follows the group's shape
 * and otherwise fills the square corners around the pill (Chromium 145). */
::view-transition-group(*), ::view-transition-image-pair(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none; }
::view-transition-old(*) { opacity: 0; }
/* 2026-09-24 (owner: "no visible fade, just hopping"): a real crossfade, slow enough to see.
 * The outgoing page dissolves into the page tone (180 ms), then the new page emerges from
 * the page tone and rises 14 px (480 ms, starting at 90 ms). Both are filter fades, so chart
 * sheets stay opaque the whole time (grid never through a plot). */
::view-transition-old(*.lens-page) { opacity: 1; animation: lens-page-out 180ms cubic-bezier(.4,0,1,1) both; }
::view-transition-new(*.lens-page) { animation: lens-page-in 480ms cubic-bezier(.25,.1,.25,1) 90ms both; }
@keyframes lens-page-out {
  from { filter: brightness(.5435) contrast(1) brightness(1.84); opacity: 1; }
  99% { filter: brightness(.5435) contrast(0) brightness(1.84); opacity: 1; }
  to { filter: brightness(.5435) contrast(0) brightness(1.84); opacity: 0; }
}
@keyframes lens-page-in {
  from { transform: translateY(14px); filter: brightness(.5435) contrast(0) brightness(1.84); }
  to { transform: none; filter: brightness(.5435) contrast(1) brightness(1.84); }
}
/* Page fade (owner-approved 2026-09-23, rebuilt 2026-09-24). Leaving: the content dissolves
 * into the page tone (180 ms, lens-ui.js adds .lens-leaving on an internal link click, then
 * navigates). Arriving: the content emerges from the page tone and rises 14 px (480 ms), and
 * data that arrives later does the same (.lens-arrive). Filter fades, never opacity, so chart
 * sheets stay opaque (grid never through a plot). Fill "backwards": nothing stays on the
 * element at rest (a lingering filter would trap fixed tooltips). */
@media screen and (prefers-reduced-motion: no-preference) {
  .lens-app .main-content { animation: lens-page-in 480ms cubic-bezier(.25,.1,.25,1) backwards; }
  .lens-app.lens-leaving .main-content { animation: lens-page-out 180ms cubic-bezier(.4,0,1,1) forwards; }
  .lens-app .main-content .lens-arrive { animation: lens-page-in 480ms cubic-bezier(.25,.1,.25,1) backwards; }
}
@media screen and (prefers-reduced-motion: no-preference) and (forced-colors: active) {
  .lens-app .main-content, .lens-app .main-content .lens-arrive { animation-name: lens-page-in-fc; }
  .lens-app.lens-leaving .main-content { animation: none; opacity: 0; }
}
/* Forced colors: the filter pulls towards the light page tone whatever the system palette is,
 * so a dark palette would flash light grey. Grid and hills are not drawn there, so a plain
 * opacity fade cannot let anything through a plot. */
@media (forced-colors: active) {
  ::view-transition-new(*.lens-page), .lens-app .main-content .lens-arrive { animation-name: lens-page-in-fc; }
  ::view-transition-old(*.lens-page) { animation: none; opacity: 0; }
}
@keyframes lens-page-in-fc {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
::view-transition-group(lens-topbar) { z-index: 2; }
::view-transition-group(lens-dock) { z-index: 3; border-radius: 40px; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@media print {
  .lens-app .main-content, .lens-topbar, .lens-dock { view-transition-name: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .lens-app *, .lens-app *::before, .lens-app *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* Menu glass (2026-09-23). A backdrop-filter only sees back to its nearest backdrop root, and
 * the dock was one twice over (its own backdrop-filter, and its view-transition-name), so the
 * dock menus' blur saw nothing and the page read through them. At rest the dock's glass now
 * paints on ::before (same fill, rim, inner highlights and blur: the dock looks the same) and
 * the dock has no view-transition-name. While a view transition runs, the dock takes back its
 * name and its own glass exactly as before, so it stays put and blurs the same during page
 * transitions. Browsers without :active-view-transition keep the previous dock throughout.
 * :where() keeps the transition rule at .lens-dock specificity, so the fallbacks below (which
 * put the dock's own rim and shadow back and drop ::before) still win during a transition. */
@supports selector(:active-view-transition) {
  .lens-dock { view-transition-name: none; background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 10px 28px rgba(38,66,81,.12); }
  .lens-dock::before { content: ""; position: absolute; inset: -1px; z-index: -1; pointer-events: none; border: 1px solid var(--lens-rim); border-radius: inherit; background: var(--lens-glass); backdrop-filter: blur(20px) saturate(1.12); -webkit-backdrop-filter: blur(20px) saturate(1.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 1px rgba(57,91,109,.18); }
  :where(:root:active-view-transition) .lens-dock { view-transition-name: lens-dock; background: var(--lens-glass); border-color: var(--lens-rim); backdrop-filter: blur(20px) saturate(1.12); -webkit-backdrop-filter: blur(20px) saturate(1.12); box-shadow: var(--lens-shadow-float); }
  :where(:root:active-view-transition) .lens-dock::before { content: none; }
}
@supports not (backdrop-filter: blur(1px)) {
  .lens-dock, .lens-menu { background: var(--lens-surface); }
  .lens-dock { border-color: var(--lens-rim); box-shadow: var(--lens-shadow-float); }
  .lens-dock::before { content: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .lens-dock, .lens-menu { background: var(--lens-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .lens-dock { border-color: var(--lens-rim); box-shadow: var(--lens-shadow-float); }
  .lens-dock::before { content: none; }
  .lens-atmosphere, .lens-grid { display: none; }
}
@media (forced-colors: active) {
  .lens-atmosphere, .lens-grid { display: none; }
  .lens-dock, .lens-menu { background: Canvas; border: 1px solid ButtonText; box-shadow: none; }
  .lens-dock::before { content: none; }
  .lens-dock-item.active, .lens-dock-item[aria-expanded="true"] { border: 2px solid Highlight; }
}
@media print {
  :root { color-scheme: light; }
  .lens-app { background: #fff !important; color: #171b1d !important; }
  .lens-atmosphere, .lens-grid, .lens-topbar, .lens-dock, .lens-skip, .lens-announcement { display: none !important; }
  .lens-app .main-content [_echarts_instance_]:not(#lens-never) { background-color: transparent !important; }
  .lens-app .main-content { padding: 0 !important; margin: 0 !important; max-width: none; }
  .lens-app .app-layout { max-width: none; display: block; }
  .lens-app .lens-table-scroll { overflow: visible !important; max-height: none !important; }
  .lens-app .lens-period-action { display: inline !important; min-height: 0; padding: 0; color: inherit; text-decoration: none; }
  .lens-app .term { --serif: var(--lens-font); --mono: var(--lens-mono); background: #fff !important; }
  .lens-app .term-anim { opacity: 1 !important; transform: none !important; }
  .lens-app .term-chart { box-shadow: none; background: transparent; }
  .lens-app .page-footer a { display: none; }
  .lens-app .term[data-page="algo"] .algo-cohort-grid { grid-template-columns: 1fr !important; }
  .lens-app .algo-print-cover-title, .lens-app .algo-print-cover-section-title { font-family: var(--lens-font) !important; }
  .lens-app .algo-print-verdict { font-family: var(--lens-font); }
}