/* The design system's shared components (WOW.md §2, POLISH.md §2–§3), on static/css/tokens.css.
   Loaded on every public page with the fonts (templates/partials/site_fonts.html). */
body { font-family: var(--ds-font-sans); font-feature-settings: "cv11" 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
main#main-content { font-variant-numeric: tabular-nums; }

/* Headlines: each sentence is one unit that balances inside itself, so a line never ends on
   the first word of the next sentence ("…a price. See / it every week."). */
.ds-line { display: inline-block; text-wrap: balance; }
h1, h2, h3 { text-wrap: balance; }

/* Money (POLISH.md finding 7): the sign sits in a box the width of a tabular figure (Geist: 0.6 em;
   its minus is 0.52 em and its plus 0.558 em), so "−$1,620" and "+$830" space alike. The currency
   is a little smaller, on the baseline. */
.ds-money { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; letter-spacing: var(--ds-tracking-figure); white-space: nowrap; }
.ds-money .ds-sign { display: inline-block; width: .6em; text-align: center; letter-spacing: 0; }
/* The currency reads as a sign at every size (MATCH-ROUND.md M1): 0.9 of the digits, full opacity, and a
   hairline stroke so its strokes are as thick as the digits' (0.9 × the stem plus the stroke). */
.ds-money .ds-cur { margin-right: .02em; font-size: .9em; letter-spacing: 0; -webkit-text-stroke: .012em currentColor; }
.ds-loss { color: var(--ds-loss-text); }
.ds-gain { color: var(--ds-gain-text); }
:is(.ds-ink, .sc-ink) .ds-loss { color: var(--ds-loss-on-ink); }
:is(.ds-ink, .sc-ink) .ds-gain { color: var(--ds-gain-on-ink); }

/* Focus is designed, never the browser default. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: none; box-shadow: var(--ds-ring); border-radius: var(--ds-radius-xs); }
:where(.ds-ink, .sc-ink, .vg-dark) :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { box-shadow: var(--ds-ring-ink); }

/* Depth (finding 3). An ink band: the gradient under a faint grain, so it never bands. */
.ds-band-ink { background: var(--ds-band-ink); color: var(--ds-ink-text); }
/* A card on ink: lighter than the band, a top light, a real shadow. */
.ds-card-ink { position: relative; border-radius: var(--ds-radius-2xl); background: var(--ds-surface-ink); color: var(--ds-ink-text); box-shadow: var(--ds-shadow-ink); }
/* Behind a product visual: a soft light and a hairline grid that fades out from the centre. */
.ds-backdrop { position: relative; isolation: isolate; }
.ds-backdrop::before { content: ""; position: absolute; z-index: -1; inset: -12% -10% -14%; pointer-events: none;
    background: radial-gradient(48% 46% at 50% 46%, rgba(54, 110, 240, .26) 0%, rgba(54, 110, 240, 0) 72%), var(--ds-grid-ink);
    background-size: 100% 100%, 44px 44px, 44px 44px;
    -webkit-mask-image: radial-gradient(60% 60% at 50% 48%, #000 30%, transparent 78%); mask-image: radial-gradient(60% 60% at 50% 48%, #000 30%, transparent 78%); }
.ds-backdrop-light::before { background: radial-gradient(48% 46% at 50% 46%, rgba(54, 110, 240, .10) 0%, rgba(54, 110, 240, 0) 72%), var(--ds-grid-light);
    background-size: 100% 100%, 44px 44px, 44px 44px; }

/* The waterfall (POLISH.md finding 14): on plan, minus the rule breaks, equals as traded, as bars on one
   scale (core/services/sample_week.bars). On ink: the hero and the compact sample card. */
/* The app's window (HERO-ROUND.md H1, H2): the product's own chrome around a public page's product proof, with
   the app's radii and spacing (static/css/review.css .focus-card, static/css/this_week.css .tw-card). The icon
   rail is the app's sidebar collapsed, as the app shows it below 1280 px; the page bar holds the page's own
   tabs (templates/partials/page_tabs.html, the current one underlined) and a selector. Ink only. On a phone,
   the app's phone layout: no rail, a smaller bar; a selector marked .is-phone replaces one marked .is-wide. */
.vg-app { position: relative; display: flex; border: 1px solid rgba(148, 163, 184, .16); border-radius: 18px; background: var(--ds-surface-ink); box-shadow: var(--ds-shadow-ink); }
.vg-app-rail { display: flex; flex: 0 0 52px; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0; border-right: 1px solid rgba(148, 163, 184, .1); border-radius: 18px 0 0 18px; background: rgba(5, 8, 16, .32); }
.vg-app-rail img { display: block; width: 22px; height: 22px; margin-bottom: 12px; }
.vg-app-rail span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--ds-ink-text-3); }
.vg-app-rail span.is-on { background: rgba(148, 163, 184, .13); color: var(--ds-ink-text); }
.vg-app-rail .ds-icon { width: 16px; height: 16px; }
.vg-app-main { flex: 1 1 auto; min-width: 0; }
.vg-app-bar { display: flex; align-items: stretch; justify-content: space-between; gap: var(--ds-space-4); height: 46px; padding: 0 var(--ds-space-6); border-bottom: 1px solid rgba(148, 163, 184, .1); }
.vg-app-tabs { display: flex; align-items: stretch; gap: var(--ds-space-5); margin: 0; font-size: var(--ds-text-xs); }
.vg-app-tabs span { display: flex; align-items: center; color: var(--ds-ink-text-3); white-space: nowrap; }
.vg-app-tabs span.is-on { color: var(--ds-ink-text); box-shadow: inset 0 -2px 0 var(--ds-ink-text); }
.vg-app-select { display: inline-flex; align-self: center; align-items: center; gap: .4rem; margin: 0; padding: .3rem .5rem .3rem .65rem; border: 1px solid rgba(148, 163, 184, .2); border-radius: 8px; color: var(--ds-ink-text-2); font-size: var(--ds-text-xs); white-space: nowrap; }
.vg-app-select .ds-icon { width: 14px; height: 14px; color: var(--ds-ink-text-3); }
.vg-app-body { padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-6); }
.vg-app-select.is-phone { display: none; }
@media (max-width: 560px) {
    .vg-app { border-radius: 14px; }
    .vg-app-rail { display: none; }
    .vg-app-bar { height: 40px; padding: 0 var(--ds-space-4); }
    .vg-app-tabs { gap: var(--ds-space-4); }
    .vg-app-body { padding: var(--ds-space-4); }
    .vg-app-select.is-wide { display: none; }
    .vg-app-select.is-phone { display: inline-flex; }
}
/* The calm Split's legend (MATCH-ROUND.md M2), in exactly the chart's ink colours (split_chart.css
   .sc-calm): the gap's swatch beside the Rule Cost's label; the two lines named beside the figure. */
.vg-key-gap { display: inline-block; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 2px; background: rgba(229, 72, 77, .26); }
.vg-split-key { display: flex; flex-wrap: wrap; gap: .35rem var(--ds-space-5); color: var(--ds-ink-text-2); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); }
.vg-split-key span { display: inline-flex; align-items: center; gap: .5rem; white-space: nowrap; }
.vg-split-key i { width: 16px; height: 2px; border-radius: 1px; }
.vg-split-key .is-plan i { background: var(--ds-ink-text); }
.vg-split-key .is-traded i { background: #7d8aa1; }
.vg-wf { display: grid; gap: .45rem; margin: 0 0 .2rem; }
.vg-wf-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 4.25rem; align-items: center; gap: var(--ds-space-3); margin: 0; }
.vg-wf-label { color: var(--ds-ink-text-3); font-size: var(--ds-text-xs); font-weight: var(--ds-weight-medium); white-space: nowrap; }
.vg-wf-track { position: relative; height: 6px; border-radius: var(--ds-radius-pill); background: rgba(148, 163, 184, .1); }
.vg-wf-bar { position: absolute; top: 0; bottom: 0; border-radius: var(--ds-radius-pill); transform-origin: left center; transition: left var(--ds-dur-slow) var(--ds-ease-out), width var(--ds-dur-slow) var(--ds-ease-out), transform var(--ds-dur-slow) var(--ds-ease-out); }
.vg-wf-row.is-plan .vg-wf-bar { background: var(--ds-gain-on-ink); }
.vg-wf-row.is-cost .vg-wf-bar { background: var(--ds-loss); transform-origin: right center; }
.vg-wf-row.is-cost[data-sign="is-gain"] .vg-wf-bar { background: var(--ds-gain-on-ink); transform-origin: left center; }
.vg-wf-row.is-all .vg-wf-bar { background: var(--ds-data-on-ink); }
.vg-wf-row strong { color: var(--ds-ink-text); font-size: var(--ds-text-sm); font-weight: var(--ds-weight-semibold); text-align: right; }
.vg-wf-row.is-plan strong { color: var(--ds-gain-on-ink); }
.vg-wf-row.is-cost[data-sign="is-loss"] strong { color: var(--ds-loss-on-ink); }
.vg-wf-row.is-cost[data-sign="is-gain"] strong { color: var(--ds-gain-on-ink); }

/* Icons: Lucide (ISC), inline. */
.ds-icon { display: inline-block; width: 1em; height: 1em; flex: 0 0 auto; vertical-align: -.125em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }