/* The expressive layer: loaded last on the workspace, it replaces the terminal's hairline
   boxes with rounded tonal containers, pill controls, a three-stop gradient accent (the
   chart line's own --glow stops), springy motion and shader-lit hero blocks. Density stays
   where data is read (tables, rows); shape and emphasis change around it. */
html:has(body.workbench) {
  --r: 10px;
  --r-lg: 20px;
  --r-xl: 28px;
  --pill: 999px;
  --ground: #F3F2F8;
  --surface: #FFFFFF;
  --surface-2: #F1EFF9;
  --surface-hover: #E9E6F7;
  --rule: #E2DFEE;
  --rule-soft: #ECEAF4;
  --rule-strong: #CFCBE0;
  --brand-wash: #E6E3FF;
  --accent: linear-gradient(100deg, var(--glow-a), var(--glow-b) 55%, var(--glow-c));
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --shader-strength: 0.42;
  --workspace-header: 56px;
  --status-bar: 30px;
  --status-lift: 8px; /* the floating status bar sits this far above the bottom edge */
}
html[data-theme="dark"]:has(body.workbench) {
  --ground: #08080E;
  --surface: #101019;
  --surface-2: #161624;
  --surface-hover: #1E1E31;
  --rule: #20202F;
  --rule-soft: #191926;
  --rule-strong: #2C2C40;
  --brand-wash: #23204A;
  --shader-strength: 0.62;
}

/* ── Shader blocks ── */
[data-glow-field] { position: relative; isolation: isolate; overflow: hidden; }
[data-glow-field] > .shader-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ── Type: display sizes for what a page is about ── */
.workbench .headline, .workbench .overview-heading .headline { font-size: 30px; font-weight: 650; line-height: 1.1; letter-spacing: -0.028em; }
.workbench .series-title { gap: 12px; align-items: center; }
.workbench .series-title .code, .workbench .eq-symbol { border-radius: var(--pill); padding: 3px 10px; }
.workbench .eq-kicker { color: transparent; background: var(--accent); -webkit-background-clip: text; background-clip: text; }

/* ── Controls: pills that give under the finger ── */
.workbench .btn, .chart-tool, .workbench .text-button { border-radius: var(--pill); transition: transform .28s var(--bounce), background .16s ease, color .16s ease, border-color .16s ease, box-shadow .2s ease; }
.workbench .btn { padding: 7px 16px; border-color: var(--rule-strong); }
.workbench .btn-sm, .chart-tool { min-height: 28px; padding: 4px 13px; border-color: var(--rule); }
.workbench .btn:hover, .chart-tool:hover { transform: translateY(-1px); border-color: var(--glow-b); }
.workbench .btn:active, .chart-tool:active, .workbench .ranges button:active { transform: scale(.95); }
.workbench .btn[aria-pressed="true"], .chart-tool[aria-pressed=true] { border-color: transparent; background: var(--brand-wash); color: var(--ink); }
.workbench .btn-primary, .workbench .events-cta .btn, .workbench #eventsBlock .btn { border: 0; color: #FFFFFF; background: var(--accent); box-shadow: 0 8px 22px -10px var(--glow-b); }
.workbench .ranges { padding: 3px; gap: 2px; border: 0; border-radius: var(--pill); background: var(--surface-2); overflow: visible; }
.workbench .ranges button { min-height: 24px; padding: 2px 11px; border: 0; border-radius: var(--pill); background: transparent; transition: transform .28s var(--bounce), background .16s ease, color .16s ease; }
.workbench .ranges button[aria-pressed=true], [data-theme="dark"] .workbench .ranges button[aria-pressed=true] { color: #FFFFFF; background: var(--accent); box-shadow: 0 4px 14px -6px var(--glow-b); }
.workbench :is(input, select), .monitor-search, .monitor-select select { border-radius: var(--pill); }
.monitor-search, .monitor-select select { height: 32px; padding-inline: 12px; border-color: var(--rule); }
.workbench .tag { border-radius: var(--pill); padding: 2px 9px; }

/* ── Top bar ── */
.workbench .site-nav { padding: 0 18px; gap: 18px; background: color-mix(in srgb, var(--ground) 82%, transparent); border-bottom: 0; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); }
.workbench .wordmark { font-size: 13px; letter-spacing: 0.02em; text-transform: none; font-weight: 700; }
.workbench .wordmark img { width: 28px; height: 28px; border-radius: 9px; }
.workbench .search input { height: 38px; padding-left: 2.4rem; font-family: var(--sans); font-size: 13px; background: var(--surface); border-color: var(--rule); border-radius: var(--pill); }
.workbench .search input:focus { border-color: transparent; box-shadow: 0 0 0 2px var(--glow-b), 0 10px 30px -14px var(--glow-b); }
.workbench .search .glass { left: 0.95rem; }
.workbench .search kbd { right: 0.6rem; border-radius: var(--pill); padding: 1px 8px; }
.workbench .site-nav .nav-links { gap: 4px; align-items: center; }
.workbench .site-nav .nav-links a { height: 32px; padding: 0 14px; border: 0; border-radius: var(--pill); font-size: 12.5px; letter-spacing: 0; text-transform: none; transition: background .16s ease, color .16s ease, transform .28s var(--bounce); }
.workbench .site-nav .nav-links a:hover { background: var(--surface-hover); }
.workbench .site-nav .nav-links a[aria-current="page"] { background: var(--brand-wash); color: var(--ink); }
.workbench .site-nav .icon-btn { width: 34px; height: 34px; border-radius: var(--pill); }
.workbench .search-results { top: calc(100% + 8px); border-radius: var(--r-lg); border-color: var(--rule); overflow: hidden; padding: 6px; }
.workbench .search-results li[role=option] { border: 0; border-radius: 12px; padding: 8px 12px; }

/* ── Rail: a list of tonal pills ── */
.workbench .rail { background: transparent; border-right: 0; padding: 6px 10px 0; }
.workbench .watch-item, .workbench .viewed-link { border: 0; border-radius: 12px; }
.workbench .row[aria-current="true"] { box-shadow: none; background: var(--brand-wash); border-radius: 12px; }
.rail-add { width: 24px; height: 24px; border-radius: var(--pill); border-color: var(--rule); }
.workbench .account-mark { background: var(--accent); }
.workbench .account-tag { border-radius: var(--pill); }

/* ── Stage ── */
.workbench .stage { padding: 0 22px 36px 12px; }
.term-status { inset: auto 12px var(--status-lift); height: var(--status-bar); padding: 0 16px; border: 1px solid var(--rule); border-radius: var(--pill); background: color-mix(in srgb, var(--surface) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.term-status kbd { border-radius: 6px; border-color: var(--rule); }
body.workbench { padding-bottom: 48px; }

/* ── Containers: rounded tonal surfaces ── */
.workbench :is(.block, .panel, .market-sheet, .eq-block, .headline-values, .status, .confidence, .series-reading, .eq-state) { border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; }
.workbench .market-sheet { overflow: auto; }
.workbench .block { margin-top: 16px; }
.workbench .block > h2, .workbench .block > summary, .workbench .series-details > .disclosure > summary, .workbench .series-reading > h2, .workbench .eq-block > h2, .workbench .eq-section-head {
  padding: 12px 18px; min-height: 44px; background: transparent; border-bottom-color: var(--rule-soft); font-size: 13px; font-weight: 650; letter-spacing: -0.005em; text-transform: none;
}
.workbench .block > h2::before, .workbench .series-reading > h2::before, .workbench .eq-block > h2::before, .workbench .eq-section-head::before { flex: 0 0 8px; height: 8px; border-radius: var(--pill); background: var(--accent); }
.workbench .block > :is(p, dl, .prose, #comparisonBlock, #modelsBlock) { margin: 12px 18px; }
.workbench .table th { background: transparent; border-bottom-color: var(--rule); padding: 9px 14px; }
.workbench .market-sheet .board-table > thead th { background: var(--surface); padding: 10px 16px; }
.workbench .market-sheet .board-table td { padding: 5px 16px; }
.workbench .market-sheet .board-table .grp th { padding: 8px 16px; background: var(--surface-2); border-color: transparent; }
.workbench .sector-mark { width: 8px; height: 8px; border-radius: var(--pill); background: var(--accent); }
.workbench .board-table tr:not(.grp):has(a):hover { box-shadow: none; background: var(--surface-hover); }
.workbench .group-filters { gap: 6px; }
.workbench .group-filters a { margin: 0; padding: 6px 14px; border: 0; border-radius: var(--pill); background: var(--surface-2); transition: transform .28s var(--bounce), background .16s ease; }
.workbench .group-filters a:hover { transform: translateY(-1px); }
.workbench .group-filters a[aria-current=page] { color: #FFFFFF; background: var(--accent); box-shadow: 0 6px 16px -8px var(--glow-b); }
.workbench .group-filters a[aria-current=page] span { color: rgba(255, 255, 255, 0.82); }
.workbench .overview-controls { margin-bottom: 10px; }

/* ── Hero figure: the latest value over a field of light ── */
.workbench .headline-values { margin: 16px 0; border-radius: var(--r-xl); border-color: transparent; background: var(--surface); box-shadow: 0 30px 60px -44px var(--glow-b); }
.workbench .headline-values > div { padding: 20px 26px 18px; border-right-color: color-mix(in srgb, var(--rule) 60%, transparent); }
.workbench .figure .big, .workbench #endpointValue { font: 600 46px/1.02 var(--sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.workbench #endpointValue { font-size: 30px; }
.workbench .figure .chg { padding: 3px 10px; border-radius: var(--pill); font-size: 13px; background: color-mix(in srgb, currentColor 14%, transparent); }
.workbench .headline-values .asof { margin-top: 6px; }
.workbench .panel { background: var(--surface); }
.workbench .panel-head { padding: 12px 16px; border-bottom-color: var(--rule-soft); }
.chart-hint { padding: 8px 16px 10px; }
.workbench .chart-tip { border-radius: 14px; border-color: var(--rule); padding: 9px 12px; }

/* ── Company pages ── */
.workbench #viewEquities .eq-hero { margin: 10px 0 16px; padding: 24px 28px; border: 0; border-radius: var(--r-xl); background: var(--surface); box-shadow: 0 30px 60px -44px var(--glow-b); }
.workbench #viewEquities .eq-hero .headline { font-size: 38px; letter-spacing: -0.035em; padding: 0; border-radius: 0; }
.workbench .eq-tabs { gap: 6px; padding: 8px 0; border-bottom: 0; background: color-mix(in srgb, var(--ground) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.workbench .eq-tabs button { margin: 0; padding: 7px 16px; border: 0; border-radius: var(--pill); background: var(--surface-2); font-size: 12.5px; letter-spacing: 0; text-transform: none; transition: transform .28s var(--bounce), background .16s ease, color .16s ease; }
.workbench .eq-tabs button:hover { transform: translateY(-1px); color: var(--ink); }
.workbench .eq-tabs button[aria-selected="true"] { color: #FFFFFF; background: var(--accent); box-shadow: 0 6px 16px -8px var(--glow-b); }
.workbench .eq-price-chart { background: transparent; border-bottom-color: var(--rule-soft); }
.workbench .eq-tabs a, .workbench .eq-tabs button { border-radius: var(--pill); }
.workbench .eq-fact, .workbench .eq-facts > div { border-color: var(--rule-soft); }

@media (max-width: 760px) {
  .workbench .headline, .workbench .overview-heading .headline { font-size: 24px; }
  .workbench .figure .big { font-size: 36px; }
  .workbench .stage { padding: 0 12px 28px; }
  .term-status { inset: auto 0 0; border-radius: 0; border-inline: 0; border-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .workbench :is(.btn, .chart-tool, .ranges button, .group-filters a, .nav-item, .site-nav .nav-links a) { transition: none; transform: none !important; }
}

/* ── Landing, pricing and sign-in: the same shapes and accent outside the workspace ── */
body.paper:not(.workbench) {
  --pill: 999px;
  --accent: linear-gradient(100deg, var(--glow-a), var(--glow-b) 55%, var(--glow-c));
  --bounce: cubic-bezier(.34, 1.56, .64, 1);
  --shader-strength: 0.5;
}
body.paper:not(.workbench) .btn { border-radius: var(--pill); transition: transform .28s var(--bounce), background .16s ease, color .16s ease, border-color .16s ease, box-shadow .2s ease; }
body.paper:not(.workbench) .btn:hover { transform: translateY(-1px); }
body.paper:not(.workbench) .btn:active { transform: scale(.96); }
body.paper:not(.workbench) .btn-primary { border-color: transparent; color: #FFFFFF; background: var(--accent); box-shadow: 0 12px 28px -12px var(--glow-b); }
body.paper:not(.workbench) .btn-primary:hover { background: var(--accent); filter: brightness(1.08); border-color: transparent; }
body.paper:not(.workbench) :is(.accent, .brace) { color: transparent; background: var(--accent); -webkit-background-clip: text; background-clip: text; }
body.paper:not(.workbench) :is(.kicker, .tag) { border-radius: var(--pill); }
body.paper:not(.workbench) :is(.panel, .card) { border-color: var(--rule); border-radius: 28px; overflow: hidden; }
body.paper:not(.workbench) :is(input[type=email], input[type=text], input[type=search]) { border-radius: var(--pill); padding-inline: 1.1rem; }
body.paper:not(.workbench) .page-head[data-glow-field] { margin-top: 1.6rem; margin-bottom: 1.6rem; padding: 2.4rem 2.2rem; border-radius: 32px; background: var(--surface); box-shadow: 0 40px 80px -56px var(--glow-b); }
body.paper:not(.workbench) .card[data-glow-field] { --shader-strength: 0.34; box-shadow: 0 40px 80px -50px var(--glow-b); }
@media (prefers-reduced-motion: reduce) { body.paper:not(.workbench) .btn { transition: none; transform: none !important; } }

/* Asset-class icons (icons.js): outline strokes follow the tag's text colour in both themes; the
   Vietnam flag takes its two fills from tokens. The box keeps the letter tag's size, so the swap
   moves nothing. */
:root { --flag-vn-red: #DA251D; --flag-vn-star: #FFDD2D; }
.nav-ico .ic, .tape .mark .ic, .series-tile .mark .ic { display: block; width: 16px; height: 16px; flex: none; }
.series-tile .mark .ic { width: 18px; height: 18px; }
.ic-flag-red { fill: var(--flag-vn-red); }
.ic-flag-star { fill: var(--flag-vn-star); }
@media (max-width: 560px) { .series-tile .mark .ic { width: 16px; height: 16px; } }