/* ─────────────────────────────────────────────────────────────────────────
   dasha-design.css — pins Horā's Daśā tab to the approved design.

   v2: written against the real markup emitted by public/dasha.js
   (renderNowbar, renderBands, renderRings, renderColumns), not against
   guessed selectors. Load AFTER public/dasha.css.

   Confirmed against source:
     .ds-nowbar > .ds-nowbar-l | .ds-nowbar-trail | .ds-conf
     .ds-conf   > .ds-conf-score | .ds-conf-band | .ds-conf-meter > span
     .ds-band-row > span.ds-band-lbl (text + .ds-lvl-step) + .ds-band-track
     .ds-band-track > .ds-seg.ds-g-XX[.ds-seg-current] > span   (name only)
     .ds-rings-svg  viewBox 0 0 520 520, paths + .ds-rings-hub(-txt)

   Every colour comes from tokens dasha.css already defines
   (--ds-accent-*, --dsg-h, --dsg-c). No new palette.
   ───────────────────────────────────────────────────────────────────────── */

/* Font import moved to views/partials/head.ejs as <link> tags — an @import
   here would block the CSSOM. See APPLY.md step 3. */

/* ═══ 1 · type ══════════════════════════════════════════════════════════ */

.ds-head, .ds-results, .ds-birth {
  --font-heading: "Cormorant Garamond", Georgia, serif;
  --font-body: "Lora", Georgia, serif;
  --ds-accent-400: #e1ad66;
  --ds-accent-500: #c28d41;
  --ds-accent-600: #a06f24;
  --ds-ease: cubic-bezier(.22, 1, .36, 1);
}

.ds-head, .ds-head p, .ds-results, .ds-birth { font-family: var(--font-body); }

.ds-head h1, .ds-chip, .ds-gloss-body, .ds-factor-head, .ds-factor-score,
.ds-col-lbl, .ds-band-lbl, .ds-life-card h3, .ds-readout b,
.ds-conf-score, .ds-playhead-date, .ds-rings-hub-txt,
.ds-nowbar-l b, .ds-seg > span, .ds-cseg > span,
.ds-ledger-main thead th, .ds-natal-table thead th {
  font-family: var(--font-heading);
}

/* bold is retired: interface headings cap at 600, display sizes set at 400 */
.ds-head h1 { font-size: 58px; font-weight: 400; letter-spacing: -.02em; line-height: 1.08; }
.ds-head h1 .dev { font-family: var(--font-body); font-size: 30px; opacity: .4; color: inherit; }
.ds-head { max-width: none; }
.ds-lede { font-size: 15px; max-width: 62ch; text-align: justify; text-wrap: pretty; }

.ds-conf-band, .ds-factor-score, .ds-cur-row, .ds-gloss-h,
.ds-factor-top, .ds-birth h2, .ds-results h2 { font-weight: 600; }

.ds-nowbar-l b { font-size: 22px; font-weight: 400; line-height: 1.1; }

/* tabular figures wherever a number stands as a figure — never on prose */
.ds-playhead-date, .ds-readout b, .ds-conf-score, .ds-factor-score,
.ds-rings-hub-txt, .ds-natal-table td, .ds-ledger-main td, .ds-ledger-sub td,
.ds-nowbar-subj {
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1;
}

/* ═══ 2 · confidence — pass/fail colour restored per Horā's own banding ══
   The vendor package's original stance here was "accent ramp only, never
   pass/fail colour" — overruled: Horā's confidence badge has always used
   green for a strong reading and red for a weak one (--good/--bad, defined
   in public/styles.css), and that is the explicit ask this section now
   restores. Only the "mixed" band stays on the neutral accent ramp. */

.ds-conf-mid  .ds-conf-band { color: var(--ds-accent-700); }
.ds-conf-good .ds-conf-band { color: var(--good); }
.ds-conf-bad  .ds-conf-band { color: var(--bad); }

.ds-conf-mid  .ds-conf-meter span {
  background: linear-gradient(90deg, var(--ds-accent-400), var(--ds-accent-700));
}
.ds-conf-good .ds-conf-meter span { background: linear-gradient(90deg, #bfe6d3, var(--good)); }
.ds-conf-bad  .ds-conf-meter span { background: linear-gradient(90deg, #f0c3cd, var(--bad)); }

.ds-conf {
  align-items: flex-start; min-width: 178px; gap: 7px;
  padding-left: 30px; border-left: 1px solid var(--ds-divider);
}
.ds-conf-score { font-size: 42px; line-height: 1; letter-spacing: -.02em; font-weight: 400; }
.ds-conf-mid  .ds-conf-score { color: var(--ds-accent-700); }
.ds-conf-good .ds-conf-score { color: var(--good); }
.ds-conf-bad  .ds-conf-score { color: var(--bad); }
.ds-conf-meter { height: 4px; border-radius: 999px; width: 100%; }
.ds-conf-meter span { transition: width .5s var(--ds-ease); }
.ds-conf-band { font-size: 11.5px; opacity: .65; text-transform: none; }

/* the section figure below */
.ds-factor-score { font-size: 68px; line-height: 1; font-weight: 400; letter-spacing: -.02em; }
.ds-factor-bar { height: 4px; }
.ds-factor-bar span { transition: width .5s var(--ds-ease); background: var(--ds-accent-500); }

/* ═══ 3 · the 3D stage ═════════════════════════════════════════════════ */
/* Depth is set per row from dasha-design.js (--ds-z), because dasha.js skips
   hidden levels and :nth-child would then mis-assign depth. */

.ds-viewport.ds-view-bands { perspective: 1600px; perspective-origin: 50% 20%; }
.ds-bands { transform-style: preserve-3d; transform: rotateX(8deg); gap: 10px; }
.ds-band-row {
  transform-style: preserve-3d;
  transition: transform .3s ease;
  gap: 16px;
  transform: translateZ(calc(var(--ds-z, 0) * 1px));
}
.ds-band-row:hover { transform: translateZ(84px); }

/* ═══ 4 · band scale ═══════════════════════════════════════════════════ */
/* .ds-band-lbl is a <span> holding the level name plus .ds-lvl-step. */

.ds-band-lbl {
  width: 236px; flex: 0 0 236px;
  display: flex; align-items: baseline; justify-content: flex-end; gap: 8px;
  text-align: right; line-height: 1.05;
  border-right: 1px solid var(--ds-divider); padding-right: 14px;
  font-size: 19px; font-weight: 400;
}
.ds-lvl-step { flex: none; }

/* per-level track height and label size, keyed to the level dasha.js records */
.ds-band-row[data-level="0"] .ds-band-track { height: 62px; }
.ds-band-row[data-level="1"] .ds-band-track { height: 56px; }
.ds-band-row[data-level="2"] .ds-band-track { height: 52px; }
.ds-band-row[data-level="3"] .ds-band-track { height: 48px; }
.ds-band-row[data-level="4"] .ds-band-track { height: 45px; }
.ds-band-row[data-level="5"] .ds-band-track { height: 43px; }
.ds-band-track { height: 52px; }            /* fallback before JS annotates */

.ds-band-row[data-level="0"] .ds-band-lbl { font-size: 21px; }
.ds-band-row[data-level="1"] .ds-band-lbl { font-size: 19px; }
.ds-band-row[data-level="2"] .ds-band-lbl { font-size: 18px; }
.ds-band-row[data-level="3"] .ds-band-lbl { font-size: 17px; }
.ds-band-row[data-level="4"] .ds-band-lbl { font-size: 16px; }
.ds-band-row[data-level="5"] .ds-band-lbl { font-size: 15px; }

.ds-band-track { position: relative; border-radius: 4px; overflow: hidden; }

/* glass tracks, so the crystal segments have something to sit on */
.ds-band-track, .ds-col-track {
  border: 1px solid rgba(255, 255, 255, .6);
  background: linear-gradient(150deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .1));
  box-shadow: inset 0 2px 6px rgba(45, 43, 43, .07),
              inset 0 -1px 0 rgba(255, 255, 255, .7);
}

/* ═══ 5 · segments — clearance is what lets the glow exist ═════════════ */
/* dasha.js positions .ds-seg with left/width; only the vertical inset is ours. */

.ds-seg {
  top: 6px; bottom: 6px; height: auto;
  border-radius: 5px; padding: 0 7px;
  display: flex; align-items: center;
  transition: background .34s var(--ds-ease), box-shadow .34s, transform .34s var(--ds-ease);
}

/* the name must ellipse, never shear. dasha-design.js measures each label
   against its own segment and sets data-fit="none" when it cannot fit —
   exact, rather than a percentage threshold. */
.ds-seg > span, .ds-cseg > span {
  min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; letter-spacing: .01em;
}
.ds-seg[data-fit="none"] > span, .ds-cseg[data-fit="none"] > span { display: none; }

/* ═══ 6 · the running period — all six layers ══════════════════════════ */

.ds-seg-current {
  z-index: 4;
  border-color: oklch(.62 calc(var(--dsg-c) * 1.4) var(--dsg-h) / .8);
  background: linear-gradient(158deg,
    oklch(.97 calc(var(--dsg-c) * .8) var(--dsg-h) / .86),
    oklch(.91 calc(var(--dsg-c) * 1.25) var(--dsg-h) / .7));
  color: oklch(.28 calc(var(--dsg-c) * 1.55) var(--dsg-h));
}
.ds-band-track .ds-seg-current {
  transform: translateY(-3px);
  box-shadow:
    0 0 0 1px   oklch(.66 calc(var(--dsg-c) * 1.3) var(--dsg-h) / .5),
    0 0 18px    oklch(.72 calc(var(--dsg-c) * 1.5) var(--dsg-h) / .55),
    0 10px 26px oklch(.58 calc(var(--dsg-c) * 1.2) var(--dsg-h) / .34),
    inset 0 1px 0     oklch(1 0 0 / .95),
    inset 0 0 22px    oklch(1 0 0 / .4),
    inset 0 -8px 14px oklch(.9 calc(var(--dsg-c) * 1.2) var(--dsg-h) / .8),
    inset 0 -2px 0    var(--ds-accent-600);
}
.ds-col-track .ds-seg-current {
  box-shadow:
    0 0 0 1px   oklch(.66 calc(var(--dsg-c) * 1.3) var(--dsg-h) / .5),
    0 0 18px    oklch(.72 calc(var(--dsg-c) * 1.5) var(--dsg-h) / .55),
    0 10px 26px oklch(.58 calc(var(--dsg-c) * 1.2) var(--dsg-h) / .34),
    inset 0 1px 0  oklch(1 0 0 / .95),
    inset 0 0 22px oklch(1 0 0 / .4),
    inset 2px 0 0  var(--ds-accent-600);
}

/* ::before is the ember, ::after the specular sweep — dasha.css already has
   both, with ds-breath / ds-sweep; these retune them to the design's values */
.ds-seg-current::before {
  inset: -1px;
  background: radial-gradient(130% 180% at 50% 118%,
    oklch(.82 calc(var(--dsg-c) * 1.9) var(--dsg-h) / .85) 0%,
    oklch(.9  calc(var(--dsg-c) * 1.4) var(--dsg-h) / .28) 45%,
    transparent 72%);
}
.ds-seg-current::after {
  width: 34%;
  background: linear-gradient(100deg, transparent, oklch(1 0 0 / .55) 50%, transparent);
}
.ds-seg-current > span {
  text-shadow: 0 0 12px oklch(.86 calc(var(--dsg-c) * 1.6) var(--dsg-h) / .9);
}

/* resting segments read as crystal, not as flat fills */
.ds-seg:not(.ds-seg-current), .ds-cseg:not(.ds-seg-current) {
  background: linear-gradient(158deg,
    oklch(.985 calc(var(--dsg-c) * .5) var(--dsg-h) / .6),
    oklch(.95  calc(var(--dsg-c) * .7) var(--dsg-h) / .42));
  border: 1px solid oklch(.9 calc(var(--dsg-c) * .8) var(--dsg-h) / .85);
  color: oklch(.44 var(--dsg-c) var(--dsg-h));
}

/* ═══ 7 · playhead ═════════════════════════════════════════════════════ */

.ds-playhead-date { font-size: 40px; line-height: 1; letter-spacing: -.01em; }
.ds-slider { accent-color: var(--ds-accent); }

/* ═══ 8 · columns ══════════════════════════════════════════════════════ */
/* dasha.js sizes .ds-cseg by flex inside a column-reverse track, so the
   layout model is left alone — only the height, radius and clearance change.
   Clearance is margin, not inset, because nothing is absolutely positioned. */

.ds-columns { min-height: 0; gap: 14px; }
.ds-col-track { height: 470px; flex: none; border-radius: 8px; overflow: hidden; }
.ds-cseg { margin: 0 7px; border-radius: 6px; }
.ds-col-lbl { font-size: 20px; line-height: 1.2; }

/* ═══ 9 · rings ════════════════════════════════════════════════════════ */

.ds-rings-svg { max-width: 460px; }
.ds-rings-svg path.ds-seg-current {
  filter: drop-shadow(0 0 9px oklch(.75 calc(var(--dsg-c) * 1.6) var(--dsg-h) / .85));
}
.ds-rings-hub { fill: rgba(255, 255, 255, .72); }
.ds-rings-hub-txt { font-weight: 400; font-size: 15px; }

/* ═══ 10 · ledger ══════════════════════════════════════════════════════ */
/* dasha-design.js forces the <details> open; this lays the level blocks out
   side by side once they are all visible. */

.ds-view-ledger { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 34px 40px; align-items: start; }
.ds-ledger-detail { margin-top: 0; }
.ds-ledger-detail > summary { display: none; }
.ds-cur-row td:first-child::after {
  content: " ◆"; color: var(--ds-accent-700); font-size: 9px; vertical-align: middle;
}

/* ═══ 11 · life cards, glosses, prose ══════════════════════════════════ */

.ds-life-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.ds-life-card { border-radius: 14px; transition: transform .34s var(--ds-ease), box-shadow .34s; }
.ds-life-card:hover { transform: translateY(-3px); box-shadow: var(--ds-shadow-lg); }
.ds-life-card h3 { font-size: 18px; font-weight: 600; }
.ds-life-card > p { font-size: 14px; text-wrap: pretty; }
.ds-life-tip { font-size: 13px; opacity: .85; margin: 2px 0 0; }
.ds-life-tip b {
  display: inline-block; width: 46px; font-weight: 400; vertical-align: top;
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ds-accent);
}

.ds-gloss-body { font-size: 17px; line-height: 1.42; }
.ds-plain-summary p { font-size: 15px; }
.ds-paras p { font-size: 14.5px; }
.ds-chip { font-size: 15px; }

/* ═══ 12 · the liquid-crystal ground ═══════════════════════════════════ */
/* Two fixed layers, no markup. Transform-only animation: animating filter or
   background-position over an area this large stalls rendering outright. */

body.ds-page::before {
  content: ""; position: fixed; inset: -20%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(closest-side circle at 18% 22%, oklch(.88 .075 76 / .5),   transparent 70%),
    radial-gradient(closest-side circle at 84% 34%, oklch(.9  .045 198 / .46), transparent 70%),
    radial-gradient(closest-side circle at 48% 88%, oklch(.9  .05  330 / .4),  transparent 70%);
  filter: blur(66px); will-change: transform;
  animation: ds-ground 54s ease-in-out infinite;
}
body.ds-page::after {
  content: ""; position: fixed; inset: -30%; z-index: -2; pointer-events: none;
  opacity: .26; filter: blur(48px); will-change: transform;
  background: conic-gradient(from 210deg at 50% 50%,
    transparent 0deg, oklch(.93 .05 88 / .5) 70deg, transparent 150deg,
    oklch(.93 .04 250 / .42) 250deg, transparent 330deg);
  animation: ds-sheet 220s linear infinite;
}
@keyframes ds-ground {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(4vw, -3vh, 0); }
  66%      { transform: translate3d(-3vw, 4vh, 0); }
}
@keyframes ds-sheet { to { transform: rotate(360deg); } }

body.ds-printing::before, body.ds-printing::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.ds-page::before, body.ds-page::after,
  .ds-seg-current::before, .ds-seg-current::after { animation: none !important; }
  .ds-bands, .ds-band-row { transform: none !important; }
}

/* ═══ 13 · print ═══════════════════════════════════════════════════════ */

@media print {
  @page { size: A4 landscape; margin: 9mm; }

  body.ds-page::before, body.ds-page::after { display: none !important; }
  .ds-controls, .ds-play-row, .ds-slider, .ds-levels, .ds-viewswitch,
  .ds-zoom, #dsPrint, .ds-birth, .crumbs, .ds-noscript { display: none !important; }

  .ds-bands, .ds-band-row { transform: none !important; }

  * {
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition: none !important;
    filter: none !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  .ds-view-rings, .ds-view-columns, .ds-view-ledger { break-before: page; }
  section, table, tr, .ds-life-card, .ds-band-row { break-inside: avoid; }
  body { background: #fff !important; }
}

/* ═══ 14 · structural regions — added for Horā's DOM (not in the original
   handoff; these hold the header rail, the unified console panel and the
   interpretation/confidence grids the README's regional spec calls for,
   none of which the additive overlay above could reach by restyling
   existing elements alone). ══════════════════════════════════════════════ */

.ds-head {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end;
  padding: 44px 0 24px; max-width: none; margin: 0;
}
.ds-kicker {
  font-size: 11px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--ds-accent-700); margin: 0 0 10px; font-weight: 600;
}
.ds-head-rail {
  display: flex; flex-direction: column; gap: 10px; font-size: 12px;
  white-space: nowrap; padding-bottom: 4px;
}
.ds-head-rail[hidden] { display: none; }
.ds-head-rail .ds-readout { align-items: flex-end; }
.ds-hr { border: none; border-top: 1px solid var(--ds-divider, rgba(45,43,43,.16)); margin: 0 0 18px; }

/* one continuous console: no gaps, no per-part glass, hairline dividers only */
.ds-console { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.ds-console-part + .ds-console-part { border-top: 1px solid var(--ds-divider); }
.ds-console .ds-nowrow { margin: 0; }

/* interpretation section — running combination / standing of the lords.
   Classical basis used to run as a third column here, but it commonly
   holds far more text than either sibling — as a same-height grid column
   that left large dead gutters beside it. It is now its own full-width
   section (.ds-glosses-section, below) so its length never dictates —
   or gets stranded next to — the other two panels' empty space. */
.ds-interpretation {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px;
  padding: 46px 32px 30px; align-items: start;
}
.ds-interpretation > div > h2, .ds-glosses-section > h2 {
  font-size: 12px; text-transform: uppercase; letter-spacing: .14em;
  color: var(--ds-accent-700); font-weight: 400; margin: 0 0 14px;
}
@media (max-width: 1100px) {
  .ds-interpretation { grid-template-columns: 1fr; }
}

/* classical basis — its own full-width card, laid out as a card grid so a
   long gloss list wraps into columns instead of running down one lane. */
.ds-glosses-section { padding: 30px 32px; }
.ds-glosses-section .ds-glosses {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px 28px;
}

/* confidence & plain words + life outlook, grouped as one print page */
.ds-confidence-section { padding: 30px 32px 46px; }
.ds-confidence-section .ds-hr { margin: 0 0 24px; }
.ds-confidence-section .ds-outlook {
  margin-top: 34px; padding-top: 30px; border-top: 1px solid var(--ds-divider, rgba(45,43,43,.16));
}

@media print {
  .ds-hr { display: none; }
}

/* ═══ 15 · confidence factor bars — red/amber/green by %age, not gold ══ */
.ds-factor-bar.ds-tier-good span { background: linear-gradient(90deg, #6fb36f, #2e7d32); }
.ds-factor-bar.ds-tier-mid span  { background: linear-gradient(90deg, #e8b84b, #b8790b); }
.ds-factor-bar.ds-tier-bad span  { background: linear-gradient(90deg, #e18686, #c62828); }

/* headline score (the big "73%") — same pass/fail banding, not flat gold */
.ds-factor-head.ds-tier-good .ds-factor-score { color: var(--good); }
.ds-factor-head.ds-tier-mid  .ds-factor-score { color: var(--ds-accent-700); }
.ds-factor-head.ds-tier-bad  .ds-factor-score { color: var(--bad); }

/* ═══ 16 · columns — running date/time period under each level header ═══ */
.ds-col-dates {
  display: block; text-align: center; font-size: 9.5px; letter-spacing: .02em;
  color: color-mix(in srgb, var(--ink) 48%, transparent);
  margin: -4px 0 8px; white-space: nowrap;
}

/* v2 ships .ds-col-lbl at 20px (line ~232), sized for the prototype's wider
   columns; Horā's narrower columns (~90-168px) overflow/bleed at that size.
   fitLabels() in dasha-design.js only measures .ds-seg/.ds-cseg day-segments,
   not the header, so nothing upstream corrects this — override it back down. */
.ds-col-lbl {
  font-size: 11px; line-height: 1.3; letter-spacing: .06em;
  white-space: normal; word-break: keep-all; padding: 0 2px;
}

/* ═══ 17 · compact chart panel — flat, no glass, form + stat rail ════════
   Replaces the old vertically-stacked, glass-morphed birth-details card
   with the reference's flat two-column "Chart" layout: a dense left-hand
   form and a right-hand readout (Janma nakṣatra / Balance at birth /
   Lagna). The section wrapper no longer carries .card/.glass/.form-card
   (see views/dasha.ejs), so none of dasha.css's glass rules match it —
   this section only adds flat replacements for the input/button/segmented-
   control chrome those glass rules used to supply. ═══════════════════════ */

.ds-chart-section {
  max-width: none; margin: 0 0 22px; padding: 26px 30px 28px;
  background: color-mix(in srgb, var(--ink) 3%, #fff);
  border: 1px solid var(--ds-divider); border-radius: var(--ds-radius-md, 6px);
}
.ds-chart-section .ds-kicker { margin-bottom: 16px; }

.ds-chart-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px);
  gap: 36px; align-items: start;
}
@media (max-width: 860px) {
  .ds-chart-grid { grid-template-columns: 1fr; }
}

/* Collapsed to a one-line summary bar, the form column is far shorter than
   the stat rail beside it, leaving a tall empty gap under the summary line.
   Drop back to the same single-column flow the narrow-viewport case already
   uses, so the stat rail moves below the summary instead of floating beside
   dead space. */
.ds-chart-grid:has(.ds-chart-form.collapsed) {
  grid-template-columns: 1fr;
}
.ds-chart-grid:has(.ds-chart-form.collapsed) .ds-chart-stats {
  flex-direction: row; flex-wrap: wrap;
  padding-left: 0; padding-top: 18px; border-left: none; border-top: 1px solid var(--ds-divider);
}

.ds-chart-form .ds-chart-row {
  display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 16px;
}
.ds-chart-form .field { flex: 1 1 0; min-width: 130px; }
.ds-chart-form .f-name { flex-grow: 1.6; }
.ds-chart-form .f-place { flex-grow: 1.4; }

/* flat replacements for the glass-tinted input/select/segmented chrome
   dasha.css defines for .ds-birth — no blur, no translucent gradient. */
.ds-chart-form .input, .ds-chart-form input[type], .ds-chart-form select {
  background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
  border-radius: var(--ds-radius-sm); backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: none;
}
.ds-chart-form .input:hover, .ds-chart-form input[type]:hover { border-color: color-mix(in srgb, var(--ink) 38%, transparent); }
.ds-chart-form .input:focus-visible, .ds-chart-form input[type]:focus-visible {
  outline: none; border-color: var(--ds-accent); transform: none;
}
.ds-chart-form .ds-seg-field {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent);
}
.ds-chart-form .autocomplete .ac-results.glass {
  background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: 0 10px 24px rgba(45,43,43,.12);
}

.ds-chart-row-saved {
  align-items: flex-end; justify-content: space-between; gap: 14px;
}
.ds-chart-row-saved .f-saved { flex: 0 1 220px; }
.ds-chart-row-saved .ds-saved-actions { flex: 0 0 auto; }

.ds-adv-toggle {
  flex: 0 0 auto; align-self: flex-end; cursor: pointer;
  background: #fff; border: 1px solid color-mix(in srgb, var(--ink) 26%, transparent);
  border-radius: var(--ds-radius-sm); padding: 8px 14px; font-size: 12px;
  color: var(--ink-soft); transition: border-color .2s, color .2s;
}
.ds-adv-toggle:hover { border-color: var(--ds-accent); color: var(--ds-accent-700); }
.ds-adv-toggle[aria-expanded="true"] { border-color: var(--ds-accent); color: var(--ds-accent-700); }

.ds-chart-adv {
  margin: 4px 0 16px; padding-top: 16px; border-top: 1px solid var(--ds-divider);
}
.ds-chart-adv .adv-row { display: flex; flex-wrap: wrap; gap: 18px; margin: 0 0 14px; }
.ds-chart-adv .field { flex: 1 1 0; min-width: 130px; }
.ds-chart-adv .hint { margin: 0 0 14px; }

.ds-chart-foot { display: flex; justify-content: flex-end; margin-top: 6px; }
.ds-chart-foot .glass-btn.primary {
  background: var(--ds-accent); border-color: var(--ds-accent); color: #fff;
  backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.ds-chart-foot .glass-btn.primary:hover {
  background: var(--ds-accent-2); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(45,43,43,.14);
}

.ds-chart-stats {
  display: flex; flex-direction: column; gap: 18px;
  padding-left: 28px; border-left: 1px solid var(--ds-divider);
}
.ds-stat { display: flex; flex-direction: column; gap: 3px; }
.ds-stat-lbl {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ds-accent-700); font-weight: 600;
}
.ds-stat b {
  font-family: var(--font-heading, inherit); font-size: 21px; font-weight: 400;
  line-height: 1.15; color: var(--ink);
}
.ds-stat-sub { font-size: 12px; color: var(--ink-faint); }

@media (max-width: 860px) {
  .ds-chart-stats {
    flex-direction: row; flex-wrap: wrap; padding-left: 0; padding-top: 18px;
    border-left: none; border-top: 1px solid var(--ds-divider);
  }
  .ds-stat { flex: 1 1 140px; }
}