/* ═══════════════════════════════════════════════════════════════════════
   Horā होरा — Daśā tab (Vimśottarī timeline)

   Lifted, component-for-component, from the "Classical" design-reference
   package the tab was built from: same gold accent family, same liquid-
   glass surfaces (blur + saturation + inset highlight + soft ink shadow),
   same per-graha OKLCH palette (tone(g,l,c) = oklch(l, hue-chroma[g], c)),
   same segmented controls, same glowing/sweeping "running period" treatment
   on the bands/columns/rings. Only two things were kept from the rest of
   Horā rather than the reference: the page's font (Segoe UI, site-wide) and
   its background (the shared radial daylight wash + .env halo) — everything
   else here is the reference's own look, not Horā's Optical Glass tokens.
   Loads only on /dasha-calculator, so these rules are page-scoped even where
   they touch shared class names (.card, .glass, .glass-btn, .field, .input).
   ═══════════════════════════════════════════════════════════════════════ */

.ds-results, .ds-birth, .ds-head { position: relative; }

.ds-head, .ds-results, .ds-birth {
  --ds-accent: #b68235;
  --ds-accent-2: #ac803e;
  --ds-accent-100: #fff3e4;
  --ds-accent-300: #facb8d;
  --ds-accent-700: #7d5411;
  --ds-accent-800: #5a3b0a;
  --ds-divider: color-mix(in srgb, var(--ink) 16%, transparent);
  --ds-radius-sm: 3px;
  --ds-radius-md: 6px;
  --ds-radius-lg: 14px;
  --ds-shadow-sm: 0 1px 2px rgba(45,43,43,.14);
  --ds-shadow-md: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 30px rgba(45,43,43,.09);
  --ds-shadow-lg: inset 0 1px 0 rgba(255,255,255,.95), 0 18px 42px rgba(45,43,43,.14);
  --ds-glass-1: linear-gradient(160deg, rgba(255,255,255,.62), rgba(255,255,255,.24));
}

@keyframes ds-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes ds-breath { 0%, 100% { opacity: .3; } 50% { opacity: .85; } }
@keyframes ds-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
@keyframes ds-glassIn {
  from { opacity: 0; transform: translateY(12px) scale(.985); filter: blur(6px) saturate(1.5); }
  to   { opacity: 1; transform: none; filter: blur(0) saturate(1); }
}

.ds-head { max-width: 780px; margin: 6px 0 26px; }
.ds-head h1 { font-size: clamp(1.7rem, 4vw, 2.3rem); margin: 0 0 10px; }
.ds-head .dev { color: var(--ds-accent-700); opacity: .85; }
.ds-lede { color: var(--ink-soft); max-width: 68ch; }
.ds-lede-foot { margin: 28px 0 0; font-size: .85rem; max-width: 68ch; }
.ds-noscript { color: var(--bad); font-weight: 600; margin: 0 0 18px; }

.ds-head-nowbar {
  margin-top: 14px; max-width: 68ch;
  background: var(--ds-glass-1);
  backdrop-filter: blur(24px) saturate(1.55);
  -webkit-backdrop-filter: blur(24px) saturate(1.55);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  animation: ds-glassIn .5s cubic-bezier(.22,1,.36,1) both;
}

/* ── shared glass surfaces (this page only) — the reference's liquid-glass
   theming applied to Horā's own .card/.glass/.field/.frow/.glass-btn markup,
   swapping the site's blue tint for the reference's warm gold one. ── */
.ds-birth.card.glass, .ds-results .card.glass, #dsError.glass {
  background: var(--ds-glass-1);
  backdrop-filter: blur(24px) saturate(1.55);
  -webkit-backdrop-filter: blur(24px) saturate(1.55);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-md);
  animation: ds-glassIn .5s cubic-bezier(.22,1,.36,1) both;
}
.ds-birth.card.glass::before, .ds-results .card.glass::before,
.ds-birth.card.glass::after, .ds-results .card.glass::after { display: none; }
.ds-birth h2, .ds-results h2 {
  font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--ds-accent-700); margin: 0 0 6px;
}
.ds-results .form-intro, .ds-birth .form-intro { color: var(--ink-faint); font-size: .85rem; }
.ds-birth .privacy-note { color: var(--ink-faint); font-size: .78rem; margin: 6px 0 0; }

.ds-birth .field > .lbl {
  display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 60%, transparent); margin-bottom: 5px;
}
.ds-birth .input, .ds-birth input[type], .ds-birth select {
  background: linear-gradient(155deg, rgba(255,255,255,.62), rgba(255,255,255,.24));
  border: 1px solid rgba(255,255,255,.75); border-radius: var(--ds-radius-sm);
  backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  transition: box-shadow .25s, border-color .25s, transform .25s cubic-bezier(.22,1,.36,1);
}
.ds-birth .input:hover, .ds-birth input[type]:hover { border-color: rgba(255,255,255,.95); }
.ds-birth .input:focus-visible, .ds-birth input[type]:focus-visible {
  outline: none; border-color: var(--ds-accent); transform: translateY(-1px);
}
.ds-birth .advanced summary { color: var(--ds-accent-700); font-size: .82rem; cursor: pointer; }
.ds-birth .advanced .hint { color: var(--ink-faint); font-size: .78rem; margin: 6px 0 0; }
.ds-saved-actions { display: flex; align-items: flex-end; gap: 8px; padding-bottom: 2px; }

/* ── gender segmented field ────────────────────────────────────────── */
.ds-seg-field {
  display: inline-flex; overflow: hidden; border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(255,255,255,.75);
  background: linear-gradient(155deg, rgba(255,255,255,.58), rgba(255,255,255,.2));
}
.ds-seg-opt {
  border: none; background: none; cursor: pointer; padding: 7px 12px; font-size: .78rem; color: var(--ink-soft);
  transition: background .25s, color .25s;
}
.ds-seg-opt + .ds-seg-opt { border-left: 1px solid var(--ds-divider); }
.ds-seg-opt.on { color: var(--ds-accent-800); background: var(--ds-accent-100); }
.ds-birth .glass-btn.primary, .ds-results .glass-btn.primary,
.ds-results #dsPrint.glass-btn {
  background: linear-gradient(155deg, rgba(255,255,255,.66), rgba(255,255,255,.26));
  border: 1px solid var(--ds-accent); color: var(--ds-accent-700);
  border-radius: var(--ds-radius-sm); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 3px 12px rgba(45,43,43,.08);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .25s;
}
.ds-birth .glass-btn.primary:hover, .ds-results .glass-btn.primary:hover, .ds-results #dsPrint.glass-btn:hover {
  background: color-mix(in srgb, var(--ds-accent) 12%, rgba(255,255,255,.5));
  transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 20px rgba(45,43,43,.13);
}
/* The "Cast again" button in the collapsed birth-summary bar is a page-chrome
   action (Change / Different person / Cast again), not part of the daśā
   accent-tinted birth form — so it should match the plain site-wide glass
   button look everywhere else, not the gold ds-accent styling above. */
.ds-birth .birth-summary .glass-btn.primary {
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(215,232,255,.4) 55%, rgba(180,210,255,.3));
  border: 1px solid rgba(255,255,255,.8); color: #16233a;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -8px 16px -12px rgba(120,160,220,.5),
    inset 0 8px 18px -14px rgba(255,255,255,.9),
    0 10px 22px -10px rgba(40,60,95,.32),
    0 2px 5px -2px rgba(40,60,95,.2);
}
.ds-birth .birth-summary .glass-btn.primary:hover {
  background: linear-gradient(160deg, rgba(255,255,255,.7), rgba(215,232,255,.4) 55%, rgba(180,210,255,.3));
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset 0 -10px 20px -12px rgba(120,160,220,.6),
    0 18px 34px -12px rgba(40,60,95,.4),
    0 4px 10px -3px rgba(40,60,95,.24);
}
.ds-birth .autocomplete .ac-results.glass {
  background: var(--ds-glass-1); backdrop-filter: blur(20px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.7); box-shadow: var(--ds-shadow-md);
}
#dsError.error { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, rgba(255,255,255,.7)); }

.ds-birth { max-width: 860px; }
.ds-results { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }

/* ── graha colours — the reference's own OKLCH tone(graha,l,c) function,
   one hue+chroma pair per graha, expressed once here so every view (chips,
   segments, table rows, glosses) draws its identity from the same source. ── */
.ds-g-su { --dsg-h: 58;  --dsg-c: 0.10;  }
.ds-g-mo { --dsg-h: 246; --dsg-c: 0.035; }
.ds-g-ma { --dsg-h: 26;  --dsg-c: 0.10;  }
.ds-g-me { --dsg-h: 148; --dsg-c: 0.06;  }
.ds-g-ju { --dsg-h: 88;  --dsg-c: 0.09;  }
.ds-g-ve { --dsg-h: 330; --dsg-c: 0.055; }
.ds-g-sa { --dsg-h: 268; --dsg-c: 0.045; }
.ds-g-ra { --dsg-h: 198; --dsg-c: 0.06;  }
.ds-g-ke { --dsg-h: 12;  --dsg-c: 0.07;  }
[class*="ds-g-"] {
  --dsg: oklch(0.56 var(--dsg-c) var(--dsg-h));
  --dsg-soft: oklch(0.9 calc(var(--dsg-c) * 0.5) var(--dsg-h));
  --dsg-strong: oklch(0.4 calc(var(--dsg-c) * 1.3) var(--dsg-h));
}

/* ── nowbar ─────────────────────────────────────────────────────────── */
.ds-nowrow { display: flex; gap: 18px; align-items: stretch; }
.ds-nowrow .ds-nowbar { flex: 1; min-width: 0; }
.ds-nowbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px;
}
/* .ds-nowbar's own `display: flex` above has the same specificity as the
   UA stylesheet's `[hidden] { display: none }` and wins on source order,
   so the [hidden] attribute alone did nothing — an uncast #dsHeadNowbar
   rendered as an empty glass box instead of not rendering at all. */
.ds-nowbar[hidden] { display: none; }
.ds-nowbar-l { display: flex; flex-direction: column; gap: 2px; min-width: 140px; }
.ds-nowbar-l b { font-size: 15px; }
.ds-nowbar-subj { font-size: .8rem; color: var(--ink-faint); }
.ds-nowbar-trail { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; flex: 1; }
.ds-nowbar-readouts { display: flex; gap: 14px; flex-wrap: wrap; }
.ds-readout {
  display: flex; flex-direction: column; font-size: .74rem; color: var(--ink-soft);
  white-space: nowrap;
}
.ds-readout b {
  display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent); font-weight: 600; margin-bottom: 1px;
}

/* ── daśā wheel widget ──────────────────────────────────────────────── */
.ds-wheelcard { flex: 0 0 168px; display: flex; align-items: center; justify-content: center; padding: 12px; }
.ds-wheel, .ds-wheel-svg { width: 144px; height: 144px; }
.ds-wheel-dots {
  stroke: var(--ds-divider); stroke-width: 1; stroke-dasharray: 1.5 4.5;
  transform-origin: center; animation: ds-wheel-spin 90s linear infinite;
}
@keyframes ds-wheel-spin { to { transform: rotate(360deg); } }
.ds-wheel-ring { stroke: color-mix(in srgb, var(--dsg) 70%, var(--ds-divider)); transition: stroke-dashoffset .3s cubic-bezier(.22,1,.36,1); }
.ds-wheel-needle { stroke: var(--ds-accent-800); stroke-width: 1.2; transform-origin: center; transition: transform .3s cubic-bezier(.22,1,.36,1); }
@media (max-width: 720px) {
  .ds-nowrow { flex-direction: column; }
  .ds-wheelcard { flex-basis: auto; }
}
.ds-chip {
  display: inline-flex; flex-direction: column; line-height: 1.15;
  padding: 6px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600;
  font-family: var(--font-heading, inherit);
  background: color-mix(in srgb, var(--dsg) 14%, rgba(255,255,255,.5));
  border: 1px solid color-mix(in srgb, var(--dsg) 55%, transparent);
  color: color-mix(in srgb, var(--dsg-strong) 82%, var(--ink));
}
.ds-chip .dev { font-size: .68rem; font-weight: 400; color: var(--ink-soft); }
.ds-chip-sep { color: var(--ds-accent); opacity: .6; font-size: .8rem; }

.ds-conf { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 120px; }
.ds-conf-band { font-size: .8rem; font-weight: 700; text-transform: capitalize; letter-spacing: .02em; }
.ds-conf-good .ds-conf-band { color: var(--good); }
.ds-conf-bad .ds-conf-band { color: var(--bad); }
.ds-conf-mid .ds-conf-band { color: var(--ds-accent-700); }
.ds-conf-meter {
  width: 110px; height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(45,43,43,.1);
}
.ds-conf-meter span {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ds-accent-300), var(--ds-accent-700));
  transition: width .5s cubic-bezier(.22,1,.36,1);
}
.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)); }

/* ── controls: view switch / level pills / zoom, styled as the reference's
   grouped segmented control — one bordered strip, dividers between options,
   the active option lit by an inset gold ring rather than a filled pill. ── */
.ds-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 14px 22px; }
.ds-viewswitch, .ds-zoom {
  display: inline-flex; overflow: hidden; border-radius: var(--ds-radius-md);
  border: 1px solid rgba(255,255,255,.7);
  backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5);
  background: linear-gradient(155deg, rgba(255,255,255,.58), rgba(255,255,255,.2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 14px rgba(45,43,43,.08);
}
.ds-viewbtn, .ds-zbtn {
  border: none; background: none; cursor: pointer;
  font-size: .8rem; padding: 8px 15px; color: var(--ink-soft);
  transition: background .3s cubic-bezier(.22,1,.36,1), color .3s, box-shadow .3s;
}
.ds-viewbtn + .ds-viewbtn, .ds-zbtn + .ds-zbtn { border-left: 1px solid var(--ds-divider); }
.ds-viewbtn.on, .ds-zbtn.on {
  color: var(--ds-accent-700); box-shadow: inset 0 0 0 1px var(--ds-accent);
  background: color-mix(in srgb, var(--ds-accent) 10%, transparent);
}
.ds-viewbtn:not(.on):hover, .ds-zbtn:not(.on):hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.ds-zoom-lbl {
  font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent); margin-right: 2px;
}
.ds-levels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ds-pill {
  border: 1px solid var(--ds-divider); background: rgba(255,255,255,.3);
  color: var(--ink-soft); border-radius: 999px; padding: 5px 12px; font-size: .75rem;
  letter-spacing: .01em; cursor: pointer;
  transition: background .3s cubic-bezier(.22,1,.36,1), color .3s, border-color .3s;
}
.ds-pill.on {
  background: var(--ds-accent-100); border-color: var(--ds-accent);
  color: var(--ds-accent-800);
}

/* ── playhead ───────────────────────────────────────────────────────── */
.ds-playhead { padding: 16px 22px; }
.ds-play-row { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.ds-step, #dsPlay, #dsNow {
  min-width: 40px; padding: 7px 11px; font-size: .8rem; border-radius: var(--ds-radius-sm);
  color: var(--ds-accent-700); background: none; border: 1px solid transparent;
  transition: background .25s, color .25s;
}
.ds-step:hover, #dsPlay:hover, #dsNow:hover { background: color-mix(in srgb, var(--ds-accent) 10%, transparent); }
#dsPlay { font-size: .95rem; min-width: 42px; border-color: var(--ds-divider); }
.ds-speed {
  display: inline-flex; overflow: hidden; border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-divider); margin-right: 6px;
}
.ds-spbtn {
  border: none; background: none; cursor: pointer; padding: 6px 10px; font-size: .72rem; color: var(--ink-soft);
  transition: background .25s, color .25s;
}
.ds-spbtn + .ds-spbtn { border-left: 1px solid var(--ds-divider); }
.ds-spbtn.on { color: var(--ds-accent-800); background: var(--ds-accent-100); }
.ds-playhead-date {
  flex: 1; text-align: center; font-weight: 600; font-size: 1.35rem; min-width: 160px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.ds-slider {
  width: 100%; accent-color: var(--ds-accent); height: 3px;
}

/* ── viewport shell ─────────────────────────────────────────────────── */
.ds-viewport-card { padding: 24px; overflow-x: auto; }
.ds-viewport { min-height: 200px; }

/* ── shared "running period" glass segment treatment for Bands/Columns ── */
.ds-seg, .ds-cseg {
  position: relative; background: color-mix(in srgb, var(--dsg) 34%, rgba(255,255,255,.4));
  border: 1px solid color-mix(in srgb, var(--dsg) 55%, transparent);
  color: color-mix(in srgb, var(--dsg-strong) 88%, var(--ink));
  overflow: hidden; white-space: nowrap; cursor: default;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s;
}
.ds-seg span, .ds-cseg span { position: relative; text-shadow: 0 1px 1px rgba(255,255,255,.4); }
.ds-seg-current {
  background: color-mix(in srgb, var(--dsg) 55%, rgba(255,255,255,.35));
  border-color: var(--dsg-strong); box-shadow: 0 0 0 1.5px var(--dsg-strong), 0 4px 14px color-mix(in srgb, var(--dsg) 45%, transparent);
  z-index: 1;
}
.ds-seg-current::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle, color-mix(in srgb, var(--dsg-strong) 55%, transparent), transparent 70%);
  animation: ds-breath 2.9s ease-in-out infinite;
}
.ds-seg-current::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 34%; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: ds-sweep 3.6s ease-in-out infinite;
}

/* ── Bands ──────────────────────────────────────────────────────────── */
.ds-bands { display: flex; flex-direction: column; gap: 12px; }
.ds-band-row { display: flex; align-items: center; gap: 14px; }
.ds-band-lbl {
  width: 130px; flex: 0 0 auto; font-size: 9.5px; letter-spacing: .1em;
  text-transform: uppercase; text-align: right; color: color-mix(in srgb, var(--ink) 55%, transparent);
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
}
.ds-lvl-step { display: inline-flex; gap: 1px; }
.ds-lvlstep {
  border: 1px solid var(--ds-divider); background: rgba(255,255,255,.35); cursor: pointer;
  border-radius: 3px; width: 15px; height: 15px; line-height: 1; font-size: 9px;
  color: var(--ds-accent-700); padding: 0; display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.ds-lvlstep:hover { background: var(--ds-accent-100); }
.ds-band-track {
  position: relative; flex: 1; height: 36px; border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(255,255,255,.6);
  background: linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,.08));
  box-shadow: inset 0 2px 6px rgba(45,43,43,.07); overflow: hidden;
}
.ds-seg {
  position: absolute; top: 3px; bottom: 3px; border-radius: 4px;
  display: flex; align-items: center; font-size: .72rem; padding: 0 7px;
}

/* ── Rings ──────────────────────────────────────────────────────────── */
.ds-viewport.ds-view-rings { display: flex; justify-content: center; }
.ds-rings-svg { width: 100%; max-width: 560px; height: auto; }
.ds-rings-svg path {
  fill: color-mix(in srgb, var(--dsg) 42%, rgba(255,255,255,.35));
  stroke: rgba(255,255,255,.7); stroke-width: 1; transition: fill .25s;
}
.ds-rings-svg path.ds-seg-current {
  fill: color-mix(in srgb, var(--dsg) 62%, rgba(255,255,255,.3));
  stroke: var(--dsg-strong); stroke-width: 1.5;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--dsg) 60%, transparent));
}
.ds-rings-hub {
  fill: rgba(255,255,255,.6); stroke: var(--ds-divider);
  filter: drop-shadow(0 4px 10px rgba(45,43,43,.1));
}
.ds-rings-hub-txt { font-size: 13px; fill: var(--ds-accent-700); font-weight: 600; }

/* ── Columns ────────────────────────────────────────────────────────── */
.ds-columns { display: flex; gap: 14px; align-items: stretch; min-height: 360px; }
.ds-col { display: flex; flex-direction: column; flex: 1; min-width: 90px; }
.ds-col-lbl {
  text-align: center; font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent); margin-bottom: 8px;
}
.ds-col-track {
  flex: 1; display: flex; flex-direction: column-reverse; border-radius: var(--ds-radius-sm);
  border: 1px solid rgba(255,255,255,.6);
  background: linear-gradient(150deg, rgba(255,255,255,.3), rgba(255,255,255,.08));
  box-shadow: inset 0 2px 6px rgba(45,43,43,.07); overflow: hidden;
}
.ds-cseg {
  display: flex; align-items: center; justify-content: center;
  font-size: .68rem; text-align: center; padding: 1px 3px; border-radius: 0;
  border-bottom: none;
}
.ds-cseg span { writing-mode: horizontal-tb; }
@media (max-width: 1100px) {
  .ds-columns { flex-direction: column; min-height: 0; }
  .ds-col { flex-direction: row; align-items: center; gap: 10px; }
  .ds-col-lbl { width: 110px; flex: 0 0 auto; margin-bottom: 0; text-align: right; }
  .ds-col-track { flex-direction: row; height: 36px; }
}

/* ── Ledger ─────────────────────────────────────────────────────────── */
.ds-ledger-main, .ds-ledger-sub, .ds-natal-table {
  width: 100%; border-collapse: collapse; font-size: .86rem;
  background: linear-gradient(160deg, rgba(255,255,255,.45), rgba(255,255,255,.14));
  border-radius: var(--ds-radius-md); overflow: hidden;
}
.ds-ledger-main th, .ds-ledger-main td,
.ds-ledger-sub th, .ds-ledger-sub td,
.ds-natal-table th, .ds-natal-table td {
  padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--ds-divider);
}
.ds-ledger-main thead th, .ds-natal-table thead th {
  color: color-mix(in srgb, var(--ink) 60%, transparent); font-weight: 600;
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em;
}
.ds-ledger-main tbody tr:hover, .ds-natal-table tbody tr:hover { background: rgba(255,255,255,.4); }
.ds-g-row td:first-child { border-left: 3px solid var(--dsg); }
.ds-cur-row { background: color-mix(in srgb, var(--dsg) 12%, transparent); font-weight: 700; }
.ds-ledger-detail { margin-top: 10px; }
.ds-ledger-detail summary { cursor: pointer; font-size: .82rem; color: var(--ds-accent-700); padding: 4px 0; }
.ds-ledger-sub { margin: 6px 0 4px; }

/* ── reading (glosses + plain-language paragraphs), styled after the
   reference's "Classical basis" quote blocks — gold rule, heading-font
   gloss line, source in a small italic. ── */
.ds-glosses { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.ds-gloss { border-left: 2px solid var(--dsg); padding: 2px 0 2px 16px; }
.ds-gloss-h { display: block; font-weight: 700; font-size: .8rem; letter-spacing: .02em; margin-bottom: 4px; }
.ds-gloss-body {
  display: block; color: var(--ink); font-size: .95rem; line-height: 1.5;
  font-family: var(--font-heading, inherit);
}
.ds-gloss-src { display: block; font-size: .74rem; color: var(--ink-faint); font-style: italic; margin-top: 5px; }
.ds-paras p { margin: 0 0 12px; line-height: 1.65; color: var(--ink); text-align: justify; }
.ds-quiet { color: var(--ink-faint); }

/* ── confidence breakdown + plain-language life reading ──────────────── */
.ds-plain-note { margin: -2px 0 14px; }
.ds-factor-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 20px; }
.ds-factor-head {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--font-heading, inherit); font-size: 1.05rem; color: var(--ds-accent-800);
  padding-bottom: 10px; border-bottom: 1px solid var(--ds-divider);
}
.ds-factor-score { font-size: 1.3rem; font-weight: 700; color: var(--ds-accent-700); }
.ds-factor-row { display: flex; flex-direction: column; gap: 4px; }
.ds-factor-top { display: flex; justify-content: space-between; font-size: .84rem; font-weight: 600; }
.ds-factor-bar {
  height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ds-accent) 12%, transparent);
  overflow: hidden;
}
.ds-factor-bar span {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--ds-accent-300), var(--ds-accent-700));
  transition: width .25s cubic-bezier(.22,1,.36,1);
}
.ds-factor-note { margin: 0; font-size: .78rem; color: var(--ink-faint); }
.ds-plain-summary { margin-bottom: 20px; }
.ds-plain-summary p { margin: 0 0 10px; line-height: 1.6; color: var(--ink); }
.ds-plain-summary p:last-child { margin-bottom: 0; }

.ds-life-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px;
}
.ds-life-card {
  border-radius: var(--ds-radius-md, 4px); padding: 14px 16px;
  background: color-mix(in srgb, var(--ds-accent) 6%, rgba(255,255,255,.4));
  box-shadow: inset 0 0 0 1px var(--ds-divider);
}
.ds-life-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; margin-bottom: 6px; }
.ds-life-top b { font-family: var(--font-heading, inherit); font-size: .92rem; }
.ds-life-verdict { font-size: .74rem; font-weight: 700; }
.ds-life-good .ds-life-verdict { color: var(--good); }
.ds-life-bad .ds-life-verdict { color: var(--bad); }
.ds-life-mid .ds-life-verdict { color: var(--ds-accent-700); }
.ds-life-plain { margin: 0 0 8px; font-size: .82rem; line-height: 1.5; color: var(--ink); }
.ds-life-lords { margin: 0 0 8px; font-size: .74rem; color: var(--ink-faint); font-style: italic; }
.ds-life-tip { margin: 0 0 4px; font-size: .76rem; line-height: 1.4; color: var(--ink-soft); }
.ds-life-tip b { color: var(--ds-accent-700); }

/* ── standing of the running lords ─────────────────────────────────── */
.ds-lords-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ds-lord-card {
  border-radius: var(--ds-radius-md); padding: 14px 16px;
  background: color-mix(in srgb, var(--dsg) 10%, rgba(255,255,255,.4));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dsg) 45%, transparent);
}
.ds-lord-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.ds-lord-top b { font-family: var(--font-heading, inherit); font-size: .95rem; }
.ds-lord-top .dev { font-size: .74rem; color: var(--ink-soft); }
.ds-lord-lvl { margin-left: auto; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.ds-lord-line { margin: 0 0 4px; font-size: .82rem; color: var(--ink); }
.ds-lord-role { margin: 6px 0 0; font-size: .78rem; color: var(--ink-soft); }

/* ── life-area outlook ──────────────────────────────────────────────── */
.ds-outlook-row { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ds-divider); flex-wrap: wrap; }
.ds-outlook-row:first-child { border-top: none; }
.ds-outlook-lbl { flex: 0 0 170px; font-weight: 600; font-size: .9rem; font-family: var(--font-heading, inherit); }
.ds-outlook-wins { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.ds-win {
  display: flex; flex-direction: column; font-size: .74rem; padding: 5px 9px;
  border-radius: var(--ds-radius-sm); line-height: 1.3; cursor: default;
}
.ds-win small { color: inherit; opacity: .75; margin-top: 1px; }
.ds-win-good { background: rgba(31,143,95,.13); color: var(--good); }
.ds-win-bad { background: rgba(192,69,95,.13); color: var(--bad); }
.ds-sub { font-weight: 400; font-size: .78rem; color: color-mix(in srgb, var(--ink) 55%, transparent); }

/* ── natal ──────────────────────────────────────────────────────────── */
.ds-natal-lagna { margin-top: 12px; font-size: .86rem; color: var(--ink-soft); }
.ds-flag { font-size: .68rem; font-weight: 700; color: var(--ink-faint); }
.ds-flag-bad { color: var(--bad); }
.ds-flag-yoga { color: var(--ds-accent-700); }
.ds-natal-role { font-size: .78rem; color: var(--ink-soft); max-width: 34ch; }

/* ── export ─────────────────────────────────────────────────────────── */
.ds-export-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 4px 30px; }
.ds-export-note { color: var(--ink-faint); font-size: .8rem; max-width: 56ch; margin: 0; }

@media (max-width: 720px) {
  .ds-band-lbl, .ds-col-lbl { width: 84px; font-size: .68rem; }
  .ds-outlook-lbl { flex-basis: 100%; }
  .ds-nowbar { flex-direction: column; align-items: flex-start; }
  .ds-conf { align-items: flex-start; }
}

/* ── print / PDF ────────────────────────────────────────────────────── */
#dsPrintMasthead, #dsPrintViews { display: none; }
@media print {
  @page { size: A4 landscape; margin: 14mm; }
  .site-header, .site-footer, .crumbs, .skip-link,
  .ds-birth, .ds-controls, .ds-playhead, .ds-export-row, .ds-wheelcard,
  .ds-viewport-card, .env, .env-halo { display: none !important; }
  .ds-results .card.glass {
    background: #fff !important; backdrop-filter: none !important; box-shadow: none !important;
    border: 1px solid #ccc !important; animation: none !important;
  }
  .ds-seg-current::before, .ds-seg-current::after { display: none !important; }
  .ds-results { gap: 10px; }
  .ds-nowrow { display: block; }

  #dsPrintMasthead {
    display: block !important; margin: 0 0 18px; padding-bottom: 12px;
    border-bottom: 2px solid var(--ds-accent);
  }
  #dsPrintMasthead h1 { font-size: 1.4rem; margin: 0 0 4px; color: var(--ds-accent-800); }
  #dsPrintMasthead p { margin: 0 0 2px; font-size: .82rem; color: #444; }
  #dsPrintMasthead .ds-print-tagline { font-style: italic; }
  #dsPrintMasthead .ds-print-subject { margin-top: 6px; font-weight: 600; color: #222; }

  #dsPrintViews { display: block !important; }
  .ds-print-view-block { page-break-inside: avoid; break-inside: avoid; margin: 0 0 26px; }
  .ds-print-view-block h3 {
    font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
    color: var(--ds-accent-700); margin: 0 0 8px; border-bottom: 1px solid #ccc; padding-bottom: 4px;
  }
  .ds-print-view-block .ds-viewport { overflow: visible; }
  .ds-print-view-block .ds-rings-svg { max-width: 380px; }
}

/* ── Birth summary bar — a Kundali-style collapse: after casting or picking
   a saved chart, the raw form gives way to a one-line "reading for X" bar
   with Change/Different-person/Cast-again, matching /chart's own pattern.
   Structure and class names deliberately mirror chart-shell.css. ─────────*/
.ds-chart-form .birth-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 0 0 16px;
}
/* Same specificity tie as .ds-nowbar[hidden] above: the class rule above
   and the UA [hidden] rule are equal-specificity, and author styles beat
   UA styles on a tie — so [hidden] alone does nothing without this. */
.ds-chart-form .birth-summary[hidden] { display: none; }
.ds-chart-form.collapsed form,
.ds-chart-form.collapsed .privacy-note { display: none; }
.ds-chart-form .birth-summary .bs-text {
  flex: 1 1 280px; min-width: 0; font-size: .95rem; color: var(--ink);
  overflow-wrap: anywhere;
}
.ds-chart-form .birth-summary .bs-text b { font-weight: 650; }
.ds-chart-form .birth-summary .bs-meta { color: var(--ink-soft); }
.ds-chart-form .birth-summary .bs-dot { color: var(--ink-faint); }
.ds-chart-form .birth-summary .bs-actions {
  display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto;
}
.ds-chart-form .birth-summary .glass-btn { min-height: 44px; padding: 10px 18px; font-size: .86rem; }
@media (max-width: 560px) {
  .ds-chart-form .birth-summary .bs-actions { margin-left: 0; width: 100%; }
  .ds-chart-form .birth-summary .bs-actions .glass-btn { flex: 1 1 auto; }
}