/* ==========================================================================
   The Purmarssur Constellation — styles
   Night-sky Vedic aesthetic: deep indigo, parchment gold, planet hues.
   ========================================================================== */

:root {
  --bg: #0d1020;
  --bg2: #131730;
  --card: #1a1f3d;
  --card2: #202650;
  --line: rgba(212, 175, 55, .18);
  --gold: #d4af37;
  --gold-soft: #e8d48a;
  --ink: #e9e6da;
  --ink-dim: #a9a698;
  --accent: #8a63b8;
  --danger: #e07856;
  --radius: 14px;
  --serif: "Palatino", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --sans: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(138, 99, 184, .12), transparent),
    radial-gradient(ellipse 60% 40% at 90% 100%, rgba(212, 175, 55, .05), transparent),
    var(--bg);
}

body {
  font-family: var(--sans);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
}

/* --- layout --- */
.shell { display: flex; min-height: 100vh; }

nav.sidebar {
  width: 232px; flex-shrink: 0;
  background: rgba(10, 12, 26, .92);
  border-right: 1px solid var(--line);
  padding: 26px 16px;
  position: sticky; top: 0; height: 100vh;
  overflow-y: auto;
  backdrop-filter: blur(8px);
  z-index: 50;
}
.brand { text-align: center; margin-bottom: 26px; }
.brand .om { font-size: 30px; color: var(--gold); display: block; margin-bottom: 6px; }
.brand h1 { font-family: var(--serif); font-size: 17px; font-weight: 600; color: var(--gold-soft); letter-spacing: .04em; }
.brand small { color: var(--ink-dim); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }

.nav-group { margin-bottom: 20px; }
.nav-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); padding: 0 10px 6px; }
a.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 9px;
  color: var(--ink); text-decoration: none; font-size: 14px;
  transition: background .15s, color .15s;
}
a.nav-item:hover { background: rgba(212, 175, 55, .08); }
a.nav-item.active { background: rgba(212, 175, 55, .14); color: var(--gold-soft); }
.nav-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 6px currentColor; }
.nav-sub { font-size: 11px; color: var(--ink-dim); margin-left: auto; }

main { flex: 1; padding: 34px 44px 90px; max-width: 1060px; }

/* --- mobile header --- */
.mobile-bar { display: none; }

/* --- typography --- */
h2.page-title { font-family: var(--serif); font-size: 34px; color: var(--gold-soft); font-weight: 600; letter-spacing: .01em; }
.page-sub { color: var(--ink-dim); margin: 4px 0 30px; font-size: 15px; }
h3.section { font-family: var(--serif); font-size: 21px; color: var(--gold); margin: 40px 0 16px; display: flex; align-items: center; gap: 10px; }
h3.section::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* --- cards --- */
.card {
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 16px;
}
.card.gold-edge { border-left: 3px solid var(--gold); }
.card h4 { font-family: var(--serif); color: var(--gold-soft); font-size: 17px; margin-bottom: 8px; }
.card p { color: var(--ink); font-size: 14.5px; }
.muted { color: var(--ink-dim); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* --- people gallery --- */
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
a.person-card {
  display: block; text-decoration: none; color: var(--ink);
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px; transition: transform .18s, border-color .18s, box-shadow .18s;
  position: relative; overflow: hidden;
}
a.person-card:hover { transform: translateY(-3px); border-color: rgba(212,175,55,.45); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
.person-card .glyph {
  position: absolute; right: -6px; top: -14px; font-size: 84px; opacity: .07; font-family: var(--serif);
}
.person-card .p-name { font-family: var(--serif); font-size: 19px; color: var(--gold-soft); }
.person-card .p-role { font-size: 12px; color: var(--ink-dim); letter-spacing: .04em; margin-bottom: 10px; }
.person-card .p-line { font-size: 12.5px; color: var(--ink-dim); }
.person-card .p-line b { color: var(--ink); font-weight: 500; }
.chip-row { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 10.5px; padding: 3px 9px; border-radius: 20px;
  background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.25); color: var(--gold-soft);
  letter-spacing: .02em;
}

/* --- person hero --- */
.hero {
  background: linear-gradient(150deg, var(--card2), var(--bg2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px; margin-bottom: 24px; position: relative; overflow: hidden;
}
.hero .glyph { position: absolute; right: 6px; top: -30px; font-size: 200px; opacity: .05; font-family: var(--serif); }
.hero .role { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.hero h2 { font-family: var(--serif); font-size: 32px; color: var(--gold-soft); margin: 4px 0 4px; }
.hero .born { color: var(--ink-dim); font-size: 14px; margin-bottom: 18px; }
.chart-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.fact { background: rgba(0,0,0,.22); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.fact .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); }
.fact .v { font-size: 13.5px; margin-top: 3px; }
.yoga-row { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 7px; }

/* --- story callout --- */
.story {
  border-left: 3px solid var(--accent);
  background: rgba(138,99,184,.07);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 18px 22px; margin: 20px 0; font-size: 14.5px;
}

/* --- phases (roadmap accordion) --- */
.phase { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 10px; overflow: hidden; background: var(--bg2); }
.phase-head {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  color: var(--ink); font-family: var(--sans); font-size: 14.5px;
}
.phase-head:hover { background: rgba(212,175,55,.05); }
.phase-years { font-family: var(--serif); color: var(--gold); font-size: 14px; white-space: nowrap; min-width: 120px; }
.phase-dasha { font-size: 11px; padding: 3px 10px; border-radius: 20px; white-space: nowrap; font-weight: 600; }
.phase-title { font-weight: 600; }
.phase-caret { margin-left: auto; color: var(--ink-dim); transition: transform .2s; }
.phase.open .phase-caret { transform: rotate(90deg); }
.phase-body { display: none; padding: 4px 20px 18px 20px; color: var(--ink); font-size: 14px; border-top: 1px dashed var(--line); }
.phase.open .phase-body { display: block; padding-top: 14px; }

/* --- health / remedy blocks --- */
.hblock { background: rgba(224,120,86,.06); border: 1px solid rgba(224,120,86,.25); border-radius: var(--radius); padding: 20px 22px; }
.hblock h4 { color: var(--danger); font-family: var(--serif); font-size: 16px; margin-bottom: 8px; }
.win-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.win {
  font-size: 12px; padding: 4px 12px; border-radius: 20px;
  background: rgba(224,120,86,.12); border: 1px solid rgba(224,120,86,.4); color: #f0a58c;
}
ul.check { list-style: none; }
ul.check li { padding: 6px 0 6px 26px; position: relative; font-size: 14px; }
ul.check li::before { content: "✦"; position: absolute; left: 4px; color: var(--gold); font-size: 12px; top: 8px; }
.rblock { background: rgba(90,166,107,.06); border: 1px solid rgba(90,166,107,.3); border-radius: var(--radius); padding: 20px 22px; }
.rblock h4 { color: #7fc492; font-family: var(--serif); font-size: 16px; margin-bottom: 8px; }
.rblock ul.check li::before { content: "☸"; color: #7fc492; }

/* --- deep profile: nakshatra weave --- */
.nak-card {
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 16px;
}
.nak-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nak-body {
  font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--bg); background: var(--gold); padding: 3px 10px; border-radius: 20px; font-weight: 700;
}
.nak-star { font-family: var(--serif); font-size: 18px; color: var(--gold-soft); }
.nak-meta { font-size: 12.5px; color: var(--ink-dim); margin: 6px 0 14px; font-style: italic; }
.gs-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gs-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 4px; font-weight: 700; }
.gift-label { color: #7fc492; }
.shadow-label { color: #f0a58c; }
ul.check.gifts li::before { content: "✧"; color: #7fc492; }
ul.check.shadows li::before { content: "☄"; color: #e07856; }
ul.check.gifts li, ul.check.shadows li { font-size: 13.5px; padding: 5px 0 5px 24px; }
.counsel {
  margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 13.5px; font-style: italic; color: var(--gold-soft);
}
.counsel b { color: var(--gold); font-style: normal; }

/* --- deep profile: yogas --- */
.yoga-card {
  background: rgba(212,175,55,.05);
  border: 1px solid rgba(212,175,55,.28); border-left: 3px solid var(--gold);
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 12px;
}
.yoga-card h4 { font-family: var(--serif); color: var(--gold); font-size: 17px; margin-bottom: 4px; }
.yoga-card .y-meaning { font-size: 12.5px; color: var(--ink-dim); font-style: italic; margin-bottom: 10px; }
.yoga-card p { font-size: 13.5px; margin-bottom: 7px; }
.y-k { color: var(--gold-soft); font-weight: 600; }
.harness-k { color: #7fc492; }

/* --- deep profile: strengths & shadows --- */
.ss-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ss-item { border-radius: var(--radius); padding: 18px 20px; border: 1px solid; }
.ss-item.str { background: rgba(90,166,107,.06); border-color: rgba(90,166,107,.3); }
.ss-item.shd { background: rgba(224,120,86,.06); border-color: rgba(224,120,86,.28); }
.ss-item h5 { font-family: var(--serif); font-size: 15.5px; margin-bottom: 7px; }
.ss-item.str h5 { color: #7fc492; }
.ss-item.shd h5 { color: #f0a58c; }
.ss-item p { font-size: 13px; margin-bottom: 8px; }
.ss-how { border-top: 1px dashed var(--line); padding-top: 8px; }
.ss-item.str .ss-how b { color: #7fc492; }
.ss-item.shd .ss-how b { color: #f0a58c; }

/* --- synastry --- */
.syn { display: flex; gap: 14px; align-items: flex-start; padding: 13px 0; border-bottom: 1px dashed var(--line); }
.syn:last-child { border-bottom: none; }
.syn .pair { font-family: var(--serif); color: var(--gold-soft); white-space: nowrap; font-size: 14px; min-width: 110px; }
.syn .orb { display: block; font-size: 11px; color: var(--ink-dim); }
.syn p { font-size: 13.5px; }

/* --- timeline --- */
.tl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg2); padding: 18px 8px 10px; }
.tl-inner { min-width: 920px; position: relative; }
svg.timeline { display: block; width: 100%; }
.tl-legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 14px 12px 6px; font-size: 12px; color: var(--ink-dim); align-items: center; }
.lg-swatch { display: inline-block; width: 13px; height: 13px; border-radius: 4px; margin-right: 5px; vertical-align: -2px; }
.lg-band { display: inline-block; width: 13px; height: 13px; border-radius: 3px; margin-right: 5px; vertical-align: -2px; border: 1px dashed; }

.tl-tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: #0a0c1a; border: 1px solid var(--gold); border-radius: 10px;
  padding: 12px 15px; max-width: 320px; font-size: 12.5px; color: var(--ink);
  box-shadow: 0 10px 34px rgba(0,0,0,.55); display: none; line-height: 1.5;
}
.tl-tip b { color: var(--gold-soft); }
.tl-tip .tt-planet { font-weight: 700; font-size: 13px; }
.tl-tip .tt-range { color: var(--ink-dim); font-size: 11.5px; margin-bottom: 5px; }

/* --- cluster cards --- */
.cluster { border-radius: var(--radius); padding: 20px 22px; margin-bottom: 14px; border: 1px solid; }
.cluster h4 { font-family: var(--serif); font-size: 17px; margin-bottom: 4px; }
.cluster .yrs { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .75; }
.cluster p { font-size: 13.5px; margin: 8px 0 10px; }
.cluster ul { margin-left: 18px; font-size: 13px; }
.cluster ul li { margin: 3px 0; }

/* --- action timeline --- */
.act { display: flex; gap: 18px; margin-bottom: 4px; }
.act .when {
  min-width: 130px; text-align: right; font-family: var(--serif);
  color: var(--gold); font-size: 14px; padding-top: 14px;
}
.act .rail { width: 14px; display: flex; flex-direction: column; align-items: center; }
.act .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gold); margin-top: 19px; flex-shrink: 0; box-shadow: 0 0 8px rgba(212,175,55,.6); }
.act .dot.urgent { background: var(--danger); box-shadow: 0 0 8px rgba(224,120,86,.7); }
.act .stem { width: 1px; flex: 1; background: var(--line); }
.act .body { flex: 1; padding: 12px 0 22px; }
.act .body .card { margin-bottom: 0; }

/* --- pattern cards --- */
.pattern { display: flex; gap: 16px; }
.pattern .icon {
  font-size: 26px; color: var(--gold); flex-shrink: 0; width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(212,175,55,.08); border: 1px solid var(--line); border-radius: 12px;
  font-family: var(--serif);
}

/* --- footer note --- */
.foot {
  margin-top: 50px; padding: 22px; text-align: center;
  color: var(--ink-dim); font-size: 12.5px; border-top: 1px solid var(--line);
  font-style: italic;
}

/* --- back link --- */
a.back { color: var(--ink-dim); text-decoration: none; font-size: 13px; }
a.back:hover { color: var(--gold-soft); }

/* --- responsive --- */
@media (max-width: 900px) {
  .shell { flex-direction: column; }
  nav.sidebar { display: none; }
  .mobile-bar {
    display: flex; gap: 6px; overflow-x: auto; position: sticky; top: 0; z-index: 60;
    background: rgba(10,12,26,.96); padding: 12px 14px; border-bottom: 1px solid var(--line);
    backdrop-filter: blur(8px);
  }
  .mobile-bar a {
    white-space: nowrap; font-size: 13px; color: var(--ink); text-decoration: none;
    padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line);
  }
  .mobile-bar a.active { background: rgba(212,175,55,.15); color: var(--gold-soft); border-color: rgba(212,175,55,.4); }
  main { padding: 22px 18px 70px; }
  .grid-2, .grid-3, .people-grid, .gs-cols, .ss-grid { grid-template-columns: 1fr; }
  .chart-facts { grid-template-columns: 1fr; }
  .act .when { min-width: 84px; font-size: 12px; }
  h2.page-title { font-size: 26px; }
}

/* ==========================================================================
   Prototype additions: birth form, south-indian chart grid, dasha blocks
   ========================================================================== */
.proto-shell { max-width: 1020px; margin: 0 auto; padding: 30px 22px 40px; }
.proto-head { text-align: center; margin-bottom: 30px; }
.proto-head .om { font-size: 34px; color: var(--gold); }
.proto-head h1 { font-family: var(--serif); font-size: 30px; color: var(--gold-soft); margin: 6px 0 2px; }
.proto-head p { color: var(--ink-dim); font-size: 14px; }

form.birth {
  background: linear-gradient(160deg, var(--card), var(--bg2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px; max-width: 620px; margin: 0 auto;
}
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.f-row.three { grid-template-columns: 1fr 1fr 1fr; }
.f-field label { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 5px; }
.f-field input, .f-field select {
  width: 100%; padding: 10px 12px; border-radius: 9px;
  border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--ink);
  font-size: 14px; font-family: var(--sans);
}
.f-field input:focus { outline: none; border-color: var(--gold); }
button.go {
  width: 100%; padding: 13px; margin-top: 6px; border: none; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), #b8952e); color: #1a1206;
  font-size: 15px; font-weight: 700; cursor: pointer; font-family: var(--serif);
  letter-spacing: .04em;
}
button.go:hover { filter: brightness(1.1); }
.sample-link { text-align: center; margin-top: 12px; font-size: 12.5px; color: var(--ink-dim); }
.sample-link a { color: var(--gold-soft); cursor: pointer; text-decoration: underline; }
.err { color: var(--danger); text-align: center; margin-top: 12px; font-size: 13px; }

/* south indian chart */
.si-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.si-chart { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.si-chart h4 { text-align: center; font-family: var(--serif); color: var(--gold); margin-bottom: 12px; font-size: 15px; }
.si-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); aspect-ratio: 1; gap: 3px; }
.si-cell {
  border: 1px solid rgba(212,175,55,.25); border-radius: 6px; padding: 5px 6px;
  position: relative; min-height: 0; overflow: hidden; background: rgba(0,0,0,.18);
}
.si-cell .rz { position: absolute; bottom: 3px; right: 6px; font-size: 8.5px; color: var(--ink-dim); letter-spacing: .04em; }
.si-cell .pl { font-size: 11.5px; line-height: 1.45; color: var(--ink); font-weight: 600; }
.si-cell .pl .rx { color: var(--danger); font-size: 9px; }
.si-cell.lagna { border-color: var(--gold); box-shadow: inset 0 0 12px rgba(212,175,55,.12); }
.si-cell.lagna::before { content: ""; position: absolute; top: 0; left: 0; border-top: 14px solid var(--gold); border-right: 14px solid transparent; }
.si-center {
  grid-column: 2 / 4; grid-row: 2 / 4; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; color: var(--ink-dim);
}
.si-center .t { font-family: var(--serif); color: var(--gold-soft); font-size: 14px; }
.si-center .s { font-size: 10px; margin-top: 3px; }

/* positions table */
table.pos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.pos th { text-align: left; color: var(--gold); font-family: var(--serif); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
table.pos td { padding: 7px 10px; border-bottom: 1px dashed rgba(212,175,55,.12); }
table.pos tr:last-child td { border-bottom: none; }
.dig-ex { color: #7fc492; font-size: 11px; }
.dig-de { color: var(--danger); font-size: 11px; }
.dig-own { color: var(--gold-soft); font-size: 11px; }

/* dasha blocks */
.maha-bar { display: flex; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); margin-bottom: 14px; }
.maha-seg { padding: 10px 4px 8px; text-align: center; font-size: 10.5px; font-weight: 700; position: relative; min-width: 0; }
.maha-seg .yr { display: block; font-weight: 400; font-size: 9px; opacity: .8; }
.maha-seg.cur { outline: 2px solid var(--gold); outline-offset: -2px; }
table.dasha-t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.dasha-t td { padding: 7px 10px; border-bottom: 1px dashed rgba(212,175,55,.12); }
table.dasha-t tr.cur { background: rgba(212,175,55,.1); }
table.dasha-t tr.cur td:first-child { color: var(--gold-soft); font-weight: 700; }
.bhukti-box { background: rgba(0,0,0,.2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; margin-top: 10px; }
.bhukti-box h5 { font-family: var(--serif); color: var(--gold-soft); margin-bottom: 8px; font-size: 14px; }
.bh-chip { display: inline-block; font-size: 11.5px; padding: 4px 10px; border-radius: 16px; margin: 2px 3px; background: rgba(212,175,55,.08); border: 1px solid var(--line); }
.bh-chip.cur { background: rgba(212,175,55,.25); border-color: var(--gold); font-weight: 700; }

.disclaimer {
  margin-top: 40px; padding: 16px 20px; border: 1px dashed var(--line); border-radius: var(--radius);
  font-size: 11.5px; color: var(--ink-dim); text-align: center; font-style: italic;
}
.back-row { margin-bottom: 18px; }
@media (max-width: 760px) {
  .si-wrap, .f-row, .f-row.three { grid-template-columns: 1fr; }
}

/* --- life-area dashboard --- */
.dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dash-tile { border-radius: var(--radius); padding: 16px 16px 14px; border: 1px solid var(--line); background: var(--bg2); }
.dash-tile .d-area { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.dash-tile .d-verdict { font-family: var(--serif); font-size: 21px; margin: 4px 0 6px; }
.dash-tile .d-note { font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; }
.dash-tile.v-strong { border-color: rgba(90,166,107,.5); }
.dash-tile.v-strong .d-verdict { color: #7fc492; }
.dash-tile.v-balanced { border-color: rgba(212,175,55,.4); }
.dash-tile.v-balanced .d-verdict { color: var(--gold-soft); }
.dash-tile.v-needs-care { border-color: rgba(224,120,86,.5); }
.dash-tile.v-needs-care .d-verdict { color: #f0a58c; }

/* --- kuja dosha card --- */
.kuja-card { border-radius: var(--radius); padding: 20px 22px; border: 1px solid; }
.kuja-card h4 { font-family: var(--serif); font-size: 17px; margin-bottom: 4px; }
.kuja-card .k-pos { font-size: 12px; color: var(--ink-dim); margin-bottom: 10px; }
.kuja-card p { font-size: 13.5px; margin-bottom: 8px; }
.kuja-card .k-advice { border-top: 1px dashed var(--line); padding-top: 8px; font-style: italic; color: var(--gold-soft); }
.kuja-card.k-none { background: rgba(90,166,107,.06); border-color: rgba(90,166,107,.35); }
.kuja-card.k-none h4 { color: #7fc492; }
.kuja-card.k-cancelled { background: rgba(212,175,55,.06); border-color: rgba(212,175,55,.35); }
.kuja-card.k-cancelled h4 { color: var(--gold-soft); }
.kuja-card.k-mild { background: rgba(212,175,55,.04); border-color: rgba(212,175,55,.25); }
.kuja-card.k-mild h4 { color: var(--gold-soft); }
.kuja-card.k-present { background: rgba(224,120,86,.06); border-color: rgba(224,120,86,.35); }
.kuja-card.k-present h4 { color: #f0a58c; }

/* --- gochara cards --- */
.gocard { border-radius: var(--radius); padding: 16px 18px; border: 1px solid var(--line); background: var(--bg2); }
.gocard .g-planet { font-family: var(--serif); font-size: 16px; color: var(--gold-soft); }
.gocard .g-pos { font-size: 12.5px; margin: 4px 0 6px; }
.gocard .g-verdict { font-size: 11.5px; }
.gocard.good { border-color: rgba(90,166,107,.45); }
.gocard.good .g-verdict { color: #7fc492; }
.gocard.test { border-color: rgba(224,120,86,.4); }
.gocard.test .g-verdict { color: #f0a58c; }
.gocard.neutral .g-verdict { color: var(--ink-dim); }

/* --- remedy cards --- */
.rem-card { background: rgba(90,166,107,.05); border: 1px solid rgba(90,166,107,.3); border-left: 3px solid #5aa66b; border-radius: var(--radius); padding: 18px 22px; margin-bottom: 12px; }
.rem-card h4 { font-family: var(--serif); color: #7fc492; font-size: 17px; margin-bottom: 2px; }
.rem-card .rem-deity { font-size: 12.5px; color: var(--ink-dim); font-weight: 400; }
.rem-card .rem-why { font-size: 12.5px; font-style: italic; color: var(--gold-soft); margin: 4px 0 8px; }
.rem-card ul.check li { font-size: 13px; padding: 4px 0 4px 24px; }
.rem-card ul.check li::before { content: "☸"; color: #7fc492; }

@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .dash-grid { grid-template-columns: 1fr; } }

/* --- tabs --- */
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 26px; }
.tab {
  padding: 10px 18px; border-radius: 24px; cursor: pointer; font-size: 13.5px;
  border: 1px solid var(--line); background: rgba(0,0,0,.2); color: var(--ink);
  font-family: var(--sans); transition: all .15s;
}
.tab:hover { border-color: rgba(212,175,55,.5); }
.tab.active { background: rgba(212,175,55,.16); color: var(--gold-soft); border-color: var(--gold); font-weight: 600; }

/* --- wide (two-person) form --- */
form.birth.wide { max-width: 940px; }
.match-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-bottom: 8px; }
.bf-title { font-family: var(--serif); color: var(--gold); font-size: 16px; margin-bottom: 12px; text-align: center; }

/* --- today's sky --- */
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #7fc492; box-shadow: 0 0 8px #7fc492; animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .4; } }
.day-meter {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
  border-radius: var(--radius); padding: 20px 24px; border: 1px solid;
}
.day-meter.q2  { background: rgba(90,166,107,.1);  border-color: rgba(90,166,107,.5); }
.day-meter.q1  { background: rgba(90,166,107,.06); border-color: rgba(90,166,107,.35); }
.day-meter.q0  { background: rgba(212,175,55,.07); border-color: rgba(212,175,55,.35); }
.day-meter.qm1 { background: rgba(224,120,86,.06); border-color: rgba(224,120,86,.35); }
.day-meter.qm2 { background: rgba(224,120,86,.1);  border-color: rgba(224,120,86,.5); }
.dm-label { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-dim); }
.dm-verdict { font-family: var(--serif); font-size: 30px; line-height: 1.15; }
.day-meter.q2 .dm-verdict, .day-meter.q1 .dm-verdict { color: #7fc492; }
.day-meter.q0 .dm-verdict { color: var(--gold-soft); }
.day-meter.qm1 .dm-verdict, .day-meter.qm2 .dm-verdict { color: #f0a58c; }
.dm-advice { font-size: 12.5px; color: var(--ink-dim); }
.dm-chips { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; justify-content: flex-end; }
.sky-chip {
  font-size: 12px; padding: 6px 13px; border-radius: 20px;
  background: rgba(0,0,0,.25); border: 1px solid var(--line); white-space: nowrap;
}
.sky-chip.good { border-color: rgba(90,166,107,.55); color: #a9d8b6; }
.sky-chip.care { border-color: rgba(224,120,86,.55); color: #f0b5a0; }
.transit-strip { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tr-chip {
  font-size: 11.5px; padding: 5px 11px; border-radius: 9px;
  background: var(--bg2); border: 1px solid; color: var(--ink);
}
.tr-chip .tr-h { color: var(--ink-dim); font-size: 10px; }
.sade-banner {
  margin-top: 12px; padding: 12px 18px; border-radius: 10px; font-size: 13px;
  border: 1px dashed;
}
.sade-banner.on  { border-color: rgba(224,120,86,.6); background: rgba(224,120,86,.07); color: #f0c0ae; }
.sade-banner.off { border-color: rgba(90,166,107,.5); background: rgba(90,166,107,.05); color: #b5dcc1; }

/* --- print / pdf button --- */
.back-row { display: flex; justify-content: space-between; align-items: center; }
.print-btn {
  background: none; border: 1px solid var(--line); color: var(--gold-soft);
  padding: 8px 16px; border-radius: 20px; cursor: pointer; font-size: 12.5px; font-family: var(--sans);
}
.print-btn:hover { border-color: var(--gold); }

/* --- match dial & kootas --- */
.match-head { display: flex; gap: 26px; align-items: center; flex-wrap: wrap; }
.dial { width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.dial-in {
  width: 100px; height: 100px; border-radius: 50%; background: var(--bg2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.dial-n { font-family: var(--serif); font-size: 34px; color: var(--gold-soft); line-height: 1; }
.dial-m { font-size: 12px; color: var(--ink-dim); }
.koota-row {
  display: grid; grid-template-columns: 190px 1fr 56px; gap: 4px 14px; align-items: center;
  padding: 10px 0; border-bottom: 1px dashed rgba(212,175,55,.12);
}
.koota-row:last-child { border-bottom: none; }
.ko-name { font-size: 13px; font-weight: 600; }
.ko-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.ko-fill { height: 100%; border-radius: 6px; }
.ko-score { font-size: 12.5px; color: var(--gold-soft); text-align: right; font-weight: 700; }
.ko-note { grid-column: 1 / 4; font-size: 12px; color: var(--ink-dim); }

/* --- muhurta --- */
.best-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.best-day {
  border: 1px solid rgba(212,175,55,.5); border-radius: var(--radius);
  background: rgba(212,175,55,.07); padding: 14px 16px;
}
.bd-date { font-family: var(--serif); font-size: 17px; color: var(--gold-soft); }
.bd-meta { font-size: 12px; margin: 3px 0 6px; }
.bd-notes { font-size: 11px; color: var(--ink-dim); }
.mu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 7px; }
.mu-cell {
  border-radius: 9px; padding: 8px 9px; border: 1px solid var(--line);
  background: var(--bg2); cursor: help; position: relative;
}
.mu-cell .mu-date { font-size: 12.5px; font-weight: 700; }
.mu-cell .mu-dow { font-size: 9.5px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; }
.mu-cell .mu-nak { font-size: 10.5px; margin-top: 3px; color: var(--ink-dim); }
.mu-cell .mu-score { position: absolute; top: 7px; right: 9px; font-size: 11px; font-weight: 700; }
.mu-cell.s2  { border-color: rgba(90,166,107,.65); background: rgba(90,166,107,.1); }
.mu-cell.s2 .mu-score { color: #7fc492; }
.mu-cell.s1  { border-color: rgba(90,166,107,.4); }
.mu-cell.s1 .mu-score { color: #7fc492; }
.mu-cell.s0  { border-color: rgba(212,175,55,.35); }
.mu-cell.s0 .mu-score { color: var(--gold-soft); }
.mu-cell.sm1 { border-color: rgba(224,120,86,.4); }
.mu-cell.sm1 .mu-score { color: #f0a58c; }
.mu-cell.sm2 { border-color: rgba(224,120,86,.65); background: rgba(224,120,86,.08); }
.mu-cell.sm2 .mu-score { color: #f0a58c; }
.mu-cell.best { outline: 2px solid var(--gold); outline-offset: 1px; }

@media (max-width: 760px) {
  .match-cols { grid-template-columns: 1fr; }
  .dm-chips { justify-content: flex-start; }
}

/* --- print (Save as PDF) --- */
@media print {
  body { background: #fff !important; color: #1a1a1a; }
  html { background: #fff !important; }
  .tabs, .proto-head p, .noprint, .print-btn, .back-row, .disclaimer + * { display: none !important; }
  .proto-shell { max-width: 100%; padding: 0; }
  .hero, .card, .nak-card, .yoga-card, .rem-card, .kuja-card, .gocard, .day-meter,
  .dash-tile, .si-chart, .best-day, .mu-cell, .phase, .bhukti-box {
    background: #fff !important; border-color: #bbb !important;
    box-shadow: none !important; break-inside: avoid;
  }
  .hero h2, h3.section, .nak-star, .card h4, .yoga-card h4, .phase-years { color: #7a5c00 !important; }
  body, .card p, .fact .v, td, li, .phase-body, .ko-name { color: #222 !important; }
  .muted, .nak-meta, .fact .k, .dm-advice { color: #666 !important; }
  .phase-body { display: block !important; }
  .phase .phase-caret { display: none; }
  h3.section::after { background: #ccc; }
  a { text-decoration: none; color: inherit; }
}

/* ==========================================================================
   MVP 1.0: tiers, pricing modal, lock cards, geocoding status
   ========================================================================== */
.acct { display: flex; justify-content: center; align-items: center; gap: 10px; margin: -12px 0 22px; }
.badge {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700;
  padding: 5px 13px; border-radius: 20px; border: 1px solid var(--line);
}
.badge.t-free { color: var(--ink-dim); }
.badge.t-standard { color: #7fc492; border-color: rgba(90,166,107,.5); background: rgba(90,166,107,.08); }
.badge.t-premium { color: var(--gold-soft); border-color: var(--gold); background: rgba(212,175,55,.12); }
.upgrade-btn {
  background: linear-gradient(135deg, var(--gold), #b8952e); color: #1a1206;
  border: none; padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
  cursor: pointer; font-family: var(--sans);
}
.upgrade-btn:hover { filter: brightness(1.1); }
.tab-lock { font-size: 9px; color: var(--gold); vertical-align: super; }

/* lock cards inside the report */
.lock-card {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  border: 1px dashed rgba(212,175,55,.45); border-radius: var(--radius);
  background: rgba(212,175,55,.05); padding: 18px 22px; margin-bottom: 12px;
}
.lock-card .lk-ico { font-size: 26px; }
.lock-card .lk-body { flex: 1; min-width: 220px; }
.lock-card .lk-title { font-family: var(--serif); color: var(--gold-soft); font-size: 16px; margin-bottom: 3px; }
.lock-card .lk-teaser { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; }
.lock-card .lk-btn {
  background: linear-gradient(135deg, var(--gold), #b8952e); color: #1a1206; border: none;
  padding: 9px 18px; border-radius: 20px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  font-family: var(--sans); white-space: nowrap;
}
.lock-card .lk-btn:hover { filter: brightness(1.1); }

/* premium lock panel (tabs) */
.prem-lock {
  text-align: center; padding: 52px 26px; margin-top: 20px;
  border: 1px dashed rgba(212,175,55,.45); border-radius: var(--radius);
  background: linear-gradient(160deg, rgba(212,175,55,.06), transparent);
}
.prem-lock .pl-ico { font-size: 36px; color: var(--gold); }
.prem-lock h3 { font-family: var(--serif); color: var(--gold-soft); font-size: 21px; margin: 10px 0 8px; }
.prem-lock p { font-size: 13.5px; color: var(--ink-dim); max-width: 520px; margin: 0 auto 20px; }
.prem-lock .go { margin: 0 auto; display: block; }

/* pricing modal */
.modal-back {
  position: fixed; inset: 0; background: rgba(5,6,14,.8); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 200; padding: 18px;
}
.modal-back[hidden] { display: none !important; }
.modal {
  background: linear-gradient(170deg, #14172b, var(--bg2)); border: 1px solid rgba(212,175,55,.4);
  border-radius: 18px; max-width: 880px; width: 100%; max-height: 92vh; overflow-y: auto;
  padding: 30px 30px 22px; position: relative;
}
.modal-x {
  position: absolute; top: 12px; right: 16px; background: none; border: none;
  color: var(--ink-dim); font-size: 26px; cursor: pointer;
}
.modal-x:hover { color: var(--ink); }
.modal-title { font-family: var(--serif); color: var(--gold-soft); text-align: center; font-size: 24px; margin-bottom: 22px; }
.plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.plan-card {
  border: 1px solid var(--line); border-radius: 14px; padding: 20px 18px;
  background: rgba(0,0,0,.22); display: flex; flex-direction: column;
}
.plan-card.featured { border-color: rgba(90,166,107,.55); }
.plan-card.premium { border-color: var(--gold); background: rgba(212,175,55,.06); }
.pc-name { font-family: var(--serif); font-size: 17px; color: var(--gold-soft); }
.pc-price { font-size: 24px; font-weight: 700; margin: 4px 0 12px; }
.plan-card ul.check { flex: 1; margin-bottom: 14px; }
.plan-card ul.check li { font-size: 12px; padding: 3.5px 0 3.5px 20px; }
.pc-btn {
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink);
  padding: 10px; border-radius: 10px; cursor: pointer; font-size: 13px; font-weight: 600; font-family: var(--sans);
}
.pc-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold-soft); }
.pc-btn:disabled { opacity: .45; cursor: default; }
.pc-btn.gold { background: linear-gradient(135deg, var(--gold), #b8952e); color: #1a1206; border: none; }
.lic-row { display: flex; gap: 10px; margin-top: 20px; }
.lic-row input {
  flex: 1; padding: 11px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: rgba(0,0,0,.3); color: var(--ink); font-size: 13px; font-family: var(--sans);
}
.lic-row input:focus { outline: none; border-color: var(--gold); }
.lic-status { font-size: 12.5px; margin-top: 8px; min-height: 18px; color: var(--gold-soft); }
.modal-note { font-size: 11px; color: var(--ink-dim); text-align: center; margin-top: 14px; }

/* geocoding status line */
.geo-status { font-size: 11.5px; margin-top: 5px; min-height: 15px; color: var(--ink-dim); }
.geo-status.ok { color: #7fc492; }
.geo-status.bad { color: #f0a58c; }

@media (max-width: 720px) { .plan-grid { grid-template-columns: 1fr; } }
@media print { .acct, .lock-card .lk-btn, .modal-back { display: none !important; } }

/* ==========================================================================
   Phase 1: accounts, constellation, billing toggle, PWA
   ========================================================================== */
.acct { flex-wrap: wrap; }
.acct-email { font-size: 12px; color: var(--gold-soft); max-width: 190px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.link-btn {
  background: none; border: none; color: var(--ink-dim); font-size: 12px;
  cursor: pointer; font-family: var(--sans); text-decoration: underline; padding: 4px 6px;
}
.link-btn:hover { color: var(--gold-soft); }
#pwa-slot .link-btn { text-decoration: none; border: 1px solid var(--line); border-radius: 16px; padding: 5px 12px; }
#pwa-slot .link-btn:hover { border-color: var(--gold); }

/* constellation bar */
.cons-bar {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  max-width: 620px; margin: 0 auto 18px; padding: 12px 16px;
  border: 1px dashed rgba(212,175,55,.35); border-radius: var(--radius);
  background: rgba(212,175,55,.04);
}
.cons-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); font-weight: 700; }
.cons-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; padding: 6px 8px 6px 13px; border-radius: 18px;
  background: rgba(0,0,0,.28); border: 1px solid var(--line); transition: border-color .15s;
}
.cons-chip:hover { border-color: var(--gold); }
.cons-chip small { color: var(--ink-dim); font-size: 10.5px; }
.cons-x {
  background: none; border: none; color: var(--ink-dim); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 3px;
}
.cons-x:hover { color: var(--danger); }

/* billing toggle */
.bill-toggle { display: flex; justify-content: center; gap: 0; margin-bottom: 18px; }
.bt-opt {
  border: 1px solid var(--line); background: rgba(0,0,0,.25); color: var(--ink-dim);
  padding: 8px 20px; font-size: 12.5px; cursor: pointer; font-family: var(--sans);
}
.bt-opt:first-child { border-radius: 20px 0 0 20px; }
.bt-opt:last-child { border-radius: 0 20px 20px 0; border-left: none; }
.bt-opt.active { background: rgba(212,175,55,.16); color: var(--gold-soft); border-color: var(--gold); font-weight: 700; }
.bt-save { font-size: 9.5px; color: #7fc492; }

@media (max-width: 640px) {
  .acct { gap: 6px; }
  .acct-email { max-width: 130px; }
  .cons-bar { margin: 0 4px 16px; }
}
@media print { .cons-bar, #save-prof { display: none !important; } }

/* ==========================================================================
   Phase 2: pulse strip, numerology, share buttons
   ========================================================================== */
.pulse-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  max-width: 620px; margin: -8px auto 18px; padding: 0 16px;
}
.pulse-chip {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12px; padding: 6px 13px; border-radius: 18px; font-family: var(--sans);
  background: rgba(0,0,0,.28); border: 1px solid var(--line); color: var(--ink);
  transition: transform .12s, border-color .15s;
}
.pulse-chip:hover { transform: translateY(-1px); }
.pulse-chip.p2 { border-color: rgba(90,166,107,.65); color: #a9d8b6; }
.pulse-chip.p1 { border-color: rgba(90,166,107,.4); color: #a9d8b6; }
.pulse-chip.p0 { border-color: rgba(212,175,55,.45); color: var(--gold-soft); }
.pulse-chip.pm { border-color: rgba(224,120,86,.5); color: #f0b5a0; }
.pulse-chip b { color: var(--ink); }
.pulse-sade { color: #f0a58c; font-size: 11px; }

/* numerology */
.num-hero {
  display: flex; gap: 26px; align-items: flex-start;
  background: linear-gradient(150deg, var(--card2), var(--bg2));
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px 28px; margin-bottom: 14px;
}
.num-big {
  font-family: var(--serif); font-size: 96px; line-height: 1; color: var(--gold);
  text-shadow: 0 0 34px rgba(212,175,55,.35); min-width: 90px; text-align: center;
}
.num-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 18px 14px; text-align: center;
}
.num-label { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-dim); }
.num-n { font-family: var(--serif); font-size: 46px; color: var(--gold-soft); line-height: 1.15; }
.num-title { font-family: var(--serif); font-size: 15px; color: var(--gold-soft); margin-bottom: 6px; }
.num-ess { font-size: 12px; color: var(--ink-dim); margin-bottom: 8px; }
.num-gs { font-size: 11.5px; text-align: left; margin-bottom: 4px; }
.num-couns { font-size: 12.5px; color: var(--gold-soft); margin-top: 8px; }

/* share buttons */
.share-btn {
  background: none; border: 1px solid var(--line); color: var(--gold-soft);
  font-size: 11px; padding: 4px 12px; border-radius: 16px; cursor: pointer;
  font-family: var(--sans); margin-left: 10px; vertical-align: middle;
  transition: border-color .15s, background .15s;
}
.share-btn:hover { border-color: var(--gold); background: rgba(212,175,55,.08); }
h3.section .share-btn { flex: 0 0 auto; }

@media (max-width: 640px) {
  .num-hero { flex-direction: column; gap: 10px; text-align: center; }
  .num-hero > div:last-child { text-align: left; }
}
@media print { .share-btn, .pulse-row { display: none !important; } }

/* ==========================================================================
   Phase 3: western sky, zodiac wheel, convergence, mobile rail
   ========================================================================== */
.w3-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; text-align: center;
}
.w3-glyph { font-size: 40px; color: var(--gold); line-height: 1.2; text-shadow: 0 0 22px rgba(212,175,55,.4); }
.w3-body { font-size: 14px; margin: 4px 0 2px; }
.w3-body small { color: var(--ink-dim); }
.w3-ess { font-size: 12px; color: var(--ink-dim); font-style: italic; margin-bottom: 8px; }
.w3-card .num-gs { text-align: left; }

.west-wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 16px; margin-top: 14px; }
svg.wheel { width: 100%; height: auto; display: block; }
.el-row { display: grid; grid-template-columns: 52px 1fr 20px; gap: 10px; align-items: center; margin-bottom: 6px; }
.el-name { font-size: 12px; color: var(--ink-dim); }
.el-bar { height: 9px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.el-fill { height: 100%; border-radius: 6px; }
.el-fire { background: #c94f3d; } .el-earth { background: #5aa66b; }
.el-air { background: #b8c4d8; } .el-water { background: #8a63b8; }
.el-n { font-size: 12px; color: var(--gold-soft); text-align: right; }
.asp-row { margin-bottom: 10px; line-height: 1.5; }

/* convergence */
.conv-head { display: flex; gap: 20px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.conv-dial { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.conv-in {
  width: 70px; height: 70px; border-radius: 50%; background: var(--bg2);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.conv-in b { font-family: var(--serif); font-size: 19px; color: var(--gold-soft); }
.conv-in small { font-size: 9px; color: var(--ink-dim); }
.conv-card {
  border-radius: var(--radius); padding: 14px 20px; margin-bottom: 10px;
  border: 1px solid rgba(212,175,55,.4); background: rgba(212,175,55,.06);
}
.conv-card.s3 { border-color: var(--gold); background: rgba(212,175,55,.12); }
.conv-card.tension { border-color: rgba(138,99,184,.5); background: rgba(138,99,184,.08); }
.conv-sys { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 4px; }
.conv-card p { font-size: 13.5px; }

/* mobile section rail */
.sec-rail { display: none; }
@media (max-width: 760px) {
  .sec-rail {
    display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 150;
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(10,12,26,.94); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line); scrollbar-width: none;
  }
  .sec-rail::-webkit-scrollbar { display: none; }
  .rail-chip {
    flex: 0 0 auto; font-size: 11.5px; padding: 7px 13px; border-radius: 16px;
    border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--ink);
    font-family: var(--sans); cursor: pointer; white-space: nowrap;
  }
  .rail-chip.active { background: rgba(212,175,55,.2); border-color: var(--gold); color: var(--gold-soft); font-weight: 700; }
  .proto-shell { padding-bottom: 120px; }
  .west-wrap { grid-template-columns: 1fr; }
}
@media print { .sec-rail { display: none !important; } }

/* ==========================================================================
   Phase 4: family dashboard + archetype art
   ========================================================================== */
.arch-art { display: block; border-radius: 12px; }
.nak-head.with-art { display: flex; gap: 18px; align-items: flex-start; }
.nak-art { flex-shrink: 0; }
.art-tease { display: flex; gap: 12px; justify-content: center; margin-bottom: 12px; }
.w3-art { display: flex; justify-content: center; margin-bottom: 10px; }
.num-art { text-align: center; flex-shrink: 0; }

/* --- Constellation member picker + group actions -------------------------- */
.cons-actions { display: flex; gap: 14px; justify-content: flex-end; margin: 2px 0 4px; }
.cons-actions button {
  background: none; border: none; color: var(--ink-dim); cursor: pointer;
  font-size: 12px; font-family: var(--sans); text-decoration: underline; padding: 4px 2px;
}
.cons-actions button:hover { color: var(--gold-soft); }
.cons-actions button.danger:hover { color: var(--danger); }

.cons-members { max-width: 560px; margin: 0 auto; }
.mem-row {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px; cursor: pointer;
  transition: border-color .15s;
}
.mem-row:hover { border-color: rgba(212,175,55,.4); }
.mem-row input { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; }
.mem-row b { font-family: var(--serif); color: var(--gold-soft); font-size: 15px; }
.mem-row small { display: block; font-size: 11.5px; margin-top: 2px; }
.mem-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; }

/* ==========================================================================
   The Constellation experience — star-map · compare · threads · drawer
   ========================================================================== */
#view-constellation { max-width: 640px; margin: 0 auto; }

.cx-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 6px 2px 2px; }
.cx-title h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--gold-soft); line-height: 1.1; }
.cx-sub { font-size: 11.5px; color: var(--ink-dim); letter-spacing: .02em; margin-top: 3px; }
.cx-today { display: flex; gap: 9px; padding-top: 6px; }
.cx-today .cx-t { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-dim); }
.cx-today .dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.dot.b { background: #77c98f; color: #77c98f; } .dot.s { background: #e0be59; color: #e0be59; } .dot.g { background: #e08a5f; color: #e08a5f; }

.cx-seg { display: flex; gap: 4px; margin: 14px 0 2px; padding: 4px; background: rgba(0,0,0,.28);
  border: 1px solid var(--line); border-radius: 13px; }
.cx-seg button { flex: 1; background: none; border: none; cursor: pointer; color: var(--ink-dim);
  font-family: var(--sans); font-size: 13px; padding: 9px 6px; border-radius: 9px; transition: .18s; }
.cx-seg button.on { background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
  color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(212,175,55,.35); }

.cx-map { position: relative; width: 100%; height: min(64vh, 470px); min-height: 340px; margin: 10px 0 2px;
  border: 1px solid var(--line); border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(32,28,64,.5), rgba(8,10,22,.55)); }
.cx-map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.cx-node { position: absolute; transform: translate(-50%,-50%); cursor: pointer; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; width: 88px; }
.cx-orb { position: relative; width: 50px; height: 50px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #2b3160, #12162e 72%); display: grid; place-items: center;
  transition: transform .25s; animation: cxbreathe 5.5s ease-in-out infinite; }
.cx-node:nth-child(3) .cx-orb { animation-delay: -1.4s; } .cx-node:nth-child(4) .cx-orb { animation-delay: -2.6s; }
.cx-node:nth-child(5) .cx-orb { animation-delay: -3.6s; } .cx-node:nth-child(6) .cx-orb { animation-delay: -4.4s; }
.cx-node:nth-child(7) .cx-orb { animation-delay: -1.9s; } .cx-node:nth-child(8) .cx-orb { animation-delay: -3.1s; }
@keyframes cxbreathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
.cx-orb::before { content: ""; position: absolute; inset: -8px; border-radius: 50%;
  border: 1.5px solid var(--rim); box-shadow: 0 0 20px -2px var(--rim), inset 0 0 10px -4px var(--rim); }
.cx-orb::after { content: ""; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle, var(--rim), transparent 68%); opacity: .16; }
.cx-node:hover .cx-orb { transform: scale(1.12); }
.cx-orb span { font-family: var(--serif); font-size: 18px; color: var(--gold-soft); }
.cx-sade { position: absolute; bottom: -2px; right: -2px; width: 16px; height: 16px; border-radius: 50%;
  background: #e08a5f; color: #2a0f06; font-size: 9px; font-style: normal; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--bg); }
/* dark halo lifts the labels off the line-web so the top nodes read as clearly
   as the bottom ones */
.cx-nm { font-family: var(--serif); font-size: 14px; color: var(--ink); line-height: 1;
  text-shadow: 0 1px 3px #05060d, 0 0 10px #05060d, 0 0 10px #05060d; }
.cx-rl { font-size: 10px; color: var(--ink-dim);
  text-shadow: 0 1px 3px #05060d, 0 0 8px #05060d; }
.cx-foot { text-align: center; font-size: 12px; color: var(--ink-dim); margin: 10px 0 2px; }
.cx-foot b { color: var(--gold-soft); }

/* signed-out sample preview */
.cx-demo { max-width: 640px; margin: 0 auto; }
.cx-demo-tag { text-align: center; font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim); margin: 8px 0 10px; }
.cx-demo .cx-map { pointer-events: auto; }
.cx-demo-cta { margin-top: 20px; }

/* persistent desktop detail panel (hidden on mobile, where the drawer is used) */
.cx-detail { display: none; overflow: hidden;
  background: linear-gradient(180deg, var(--card), rgba(8,10,22,.45));
  border: 1px solid var(--line); border-radius: 18px; }
.cx-detail:empty { display: none !important; }
/* detail is a scrollable body + a footer that always shows the CTAs */
.cx-dfoot { display: flex; flex-direction: column; gap: 10px; margin-top: 6px;
  padding-top: 14px; border-top: 1px solid var(--line); }
.cx-chip.active { border-color: var(--gold); background: rgba(212,175,55,.10); }
.cx-node.active .cx-orb { transform: scale(1.14); }

/* referral invite */
.cx-invite { width: 100%; padding: 12px; cursor: pointer;
  background: transparent; border: 1px dashed rgba(212,175,55,.5); border-radius: 12px;
  color: var(--gold-soft); font-family: var(--serif); font-size: 14px; }
.cx-invite:hover { background: rgba(212,175,55,.08); }
.cx-act-invite { color: var(--gold-soft) !important; }
.inv-linkrow { display: flex; gap: 8px; }
.inv-linkrow input { flex: 1; min-width: 0; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(0,0,0,.3); color: var(--ink); font-size: 12.5px; font-family: var(--sans); }
.inv-stat { margin-top: 16px; padding: 12px 14px; border-radius: 10px; font-size: 12.5px; line-height: 1.5;
  background: rgba(212,175,55,.08); border: 1px solid var(--line); color: var(--ink); text-align: center; }
.inv-stat.muted { background: none; color: var(--ink-dim); }
.inv-stat b { color: var(--gold-soft); }

.cx-roster { display: flex; gap: 9px; overflow-x: auto; padding: 12px 2px 4px; scrollbar-width: none; }
.cx-roster::-webkit-scrollbar { display: none; }
.cx-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 7px 13px 7px 8px;
  background: var(--card); border: 1px solid var(--line); border-radius: 30px; cursor: pointer; transition: .18s; }
.cx-chip:hover { border-color: rgba(212,175,55,.5); transform: translateY(-2px); }
.cx-co { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #2b3160, #12162e 72%);
  box-shadow: 0 0 0 1.5px var(--rim), 0 0 12px -3px var(--rim); font-family: var(--serif); font-size: 12px; color: var(--gold-soft); }
.cx-ct { text-align: left; line-height: 1.15; }
.cx-ct b { font-size: 13px; color: var(--ink); display: block; font-weight: 500; }
.cx-ct i { font-size: 10.5px; color: var(--rim); font-style: normal; }

.cx-tablewrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--line); border-radius: 16px; }
.cx-table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 13px; }
.cx-table th, .cx-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.cx-table thead th { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); font-weight: 600; background: var(--card); }
.cx-table tbody tr { cursor: pointer; transition: background .15s; }
.cx-table tbody tr:hover { background: rgba(212,175,55,.06); }
.cx-table tbody tr:last-child td { border-bottom: none; }
.cx-table td.who { font-family: var(--serif); font-size: 15px; color: var(--gold-soft); }
.cx-table td.num { font-variant-numeric: tabular-nums; color: var(--ink-dim); }
.cx-pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 20px; font-size: 11px;
  border: 1px solid var(--rim); color: var(--rim); background: color-mix(in srgb, var(--rim) 12%, transparent); }
.cx-gloss { color: var(--ink-dim); font-style: italic; }

.cx-sec { font-family: var(--serif); font-size: 19px; color: var(--gold); margin: 22px 2px 4px; font-weight: 500; }
.cx-lede { font-size: 12px; color: var(--ink-dim); margin: 0 2px 12px; line-height: 1.5; }
.cx-yg { display: grid; gap: 11px; }
.cx-yc { background: linear-gradient(150deg, var(--card), rgba(8,10,22,.4)); border: 1px solid var(--line);
  border-radius: 15px; padding: 14px 16px; position: relative; overflow: hidden; }
.cx-yc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(var(--gold), var(--accent)); }
.cx-yc.minor::before { opacity: .5; }
.cx-yh { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.cx-yn { font-family: var(--serif); font-size: 16px; color: var(--gold-soft); }
.cx-yct { font-size: 10px; color: var(--gold); background: rgba(212,175,55,.12); padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.cx-yw { font-size: 12px; color: var(--ink); margin-bottom: 5px; }
.cx-ym { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; margin: 0; }
.cx-thread { display: flex; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
.cx-thread:last-child { border-bottom: none; }
.cx-star { color: var(--gold); font-size: 15px; }
.cx-tw { font-size: 11.5px; color: var(--gold-soft); margin-bottom: 3px; }
.cx-thread p { margin: 0; font-size: 13.5px; color: var(--ink); line-height: 1.5; }

.cx-scrim { position: fixed; inset: 0; z-index: 1000; background: rgba(4,5,12,.62); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .3s; }
.cx-scrim.show { opacity: 1; pointer-events: auto; }
.cx-drawer { position: fixed; left: 50%; bottom: 0; transform: translate(-50%,102%); z-index: 1001;
  width: 100%; max-width: 640px; background: linear-gradient(180deg, var(--card), var(--bg));
  border: 1px solid var(--line); border-bottom: none; border-radius: 22px 22px 0 0; padding: 10px 22px 30px;
  transition: transform .34s cubic-bezier(.22,.9,.3,1); max-height: 88vh; overflow-y: auto; }
.cx-drawer.show { transform: translate(-50%,0); }
.cx-grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 4px auto 14px; }
.cx-dhead { display: flex; align-items: center; gap: 15px; margin-bottom: 16px; }
.cx-dorb { width: 60px; height: 60px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #2b3160, #12162e 72%);
  box-shadow: 0 0 0 1.5px var(--rim), 0 0 24px -6px var(--rim); font-family: var(--serif); font-size: 23px; color: var(--gold-soft); }
.cx-dn { font-family: var(--serif); font-size: 21px; color: var(--ink); line-height: 1.15; }
.cx-dr { font-size: 12px; color: var(--ink-dim); margin-top: 3px; }
.cx-dbadge { display: inline-flex; align-items: center; margin-top: 7px; padding: 4px 11px; border-radius: 20px; font-size: 11.5px;
  border: 1px solid var(--rim); color: var(--rim); background: color-mix(in srgb, var(--rim) 14%, transparent); }
.cx-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.cx-dgrid > div { background: var(--card); padding: 12px 14px; }
.cx-dgrid .k { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.cx-dgrid .v { font-family: var(--serif); font-size: 16px; color: var(--gold-soft); }
.cx-dgrid .v.mono { font-family: var(--sans); font-size: 13px; color: var(--ink); }
.cx-dbind { font-size: 12.5px; color: var(--ink-dim); line-height: 1.6; margin: 0 2px 16px; }
.cx-dbind b { color: var(--gold-soft); }
.cx-dcta { width: 100%; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold)); color: #241a02; font-family: var(--serif);
  font-size: 15px; font-weight: 600; }
.cx-dcta:disabled { opacity: .5; cursor: default; }
.cx-sade-note { font-size: 12px; color: var(--danger); background: rgba(224,120,86,.08); border: 1px dashed rgba(224,120,86,.4);
  border-radius: 10px; padding: 9px 12px; margin: 0 0 14px; }
@media (prefers-reduced-motion: reduce) { .cx-orb { animation: none; } }

/* --- group switcher folded into the header --- */
.cx-head-left { min-width: 0; }
.cx-group { position: relative; display: inline-block; }
.cx-group-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: none;
  cursor: pointer; padding: 0; }
.cx-group-btn h2 { font-family: var(--serif); font-weight: 500; font-size: 26px; color: var(--gold-soft); line-height: 1.1; }
.cx-group-btn:hover h2 { color: var(--gold); }
.cx-caret { font-style: normal; font-size: 13px; color: var(--gold); transform: translateY(2px); transition: transform .2s; }
.cx-group-btn[aria-expanded="true"] .cx-caret { transform: translateY(2px) rotate(180deg); }
.cx-group-menu { position: absolute; left: 0; top: calc(100% + 8px); z-index: 200; min-width: 232px; padding: 6px;
  background: var(--card2); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.55);
  display: none; }
.cx-group-menu.open { display: block; }
.cx-group-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  background: none; border: none; cursor: pointer; color: var(--ink); font-family: var(--sans); font-size: 14px;
  text-align: left; padding: 11px 12px; border-radius: 9px; }
.cx-group-item:hover { background: rgba(212,175,55,.08); }
.cx-group-item.on { color: var(--gold-soft); }
.cx-group-item .cx-gn { font-size: 11px; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.cx-group-item.new { color: var(--gold-soft); border-top: 1px solid var(--line); border-radius: 0 0 9px 9px; margin-top: 4px; }
.cx-group-item.new[disabled] { opacity: .5; cursor: default; }

/* --- desktop layout --- */
@media (min-width: 900px) {
  #view-constellation { max-width: 1080px; }
  .cx-group-btn h2 { font-size: 30px; }
  /* map on the left, a persistent detail panel on the right; both auto-fit the
     viewport so the whole Constellation reads without scrolling */
  .cx-mapview { display: grid; grid-template-columns: 1fr 344px; gap: 20px; align-items: start; }
  .cx-mapview[hidden] { display: none; }   /* the grid rule above must not defeat `hidden` */
  /* ~419px of header/tab/title chrome sits above; reserve it so the whole view
     fits one screen (map + foot on the left = the side panel height on the right) */
  .cx-map { height: clamp(300px, calc(100vh - 496px), 580px); }
  .cx-side { display: flex; flex-direction: column; gap: 12px; min-height: 0;
    max-height: clamp(330px, calc(100vh - 464px), 612px); }
  /* uniform grid of equal-width pills; scrolls (not squeezes the panel) when a
     group gets large. minmax(0,1fr) lets the tracks shrink so names truncate. */
  .cx-roster { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px; max-height: 172px; overflow-y: auto; padding: 0 2px 2px 0; }
  .cx-chip { min-width: 0; gap: 7px; padding: 7px 10px 7px 6px; }
  .cx-chip .cx-ct { min-width: 0; }
  .cx-chip .cx-ct b, .cx-chip .cx-ct i { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cx-detail { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  .cx-detail .cx-dbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 18px 6px; }
  .cx-detail .cx-dfoot { flex: 0 0 auto; margin-top: 0; padding: 14px 18px 16px;
    background: linear-gradient(180deg, rgba(26,31,61,0), var(--card) 45%); }
  .cx-yg { grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); }
  /* on desktop the bottom-sheet becomes a right-docked panel (used only from
     Compare/Threads taps, where the persistent panel isn't in view) */
  .cx-drawer { left: auto; right: 0; top: 0; bottom: auto; transform: translateX(102%);
    width: min(420px, 40vw); max-width: none; height: 100vh; max-height: 100vh;
    border-radius: 22px 0 0 22px; border-right: none; padding: 44px 30px 30px; }
  .cx-drawer.show { transform: translateX(0); }
  .cx-grab { display: none; }
}

@media (max-width: 640px) { .art-tease { flex-wrap: wrap; } }

/* toast + next-chapter */
.crx-toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(16px);
  background: #1a1f3d; border: 1px solid var(--gold); color: var(--ink);
  padding: 12px 22px; border-radius: 12px; font-size: 13px; z-index: 300;
  opacity: 0; transition: opacity .3s, transform .3s; max-width: min(480px, 90vw);
  text-align: center; box-shadow: 0 12px 44px rgba(0,0,0,.55);
}
.crx-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.next-chapter { margin-top: 12px; padding: 12px 14px; border-radius: 10px;
  border: 1px dashed rgba(212,175,55,.4); background: rgba(0,0,0,.18); }
.nc-label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gold-soft); margin-bottom: 6px; }

/* ==========================================================================
   Pre-launch feature drop (Jul 2026): founding pricing · The Mirror ·
   Life Chapters · streaks · consult button
   ========================================================================== */
.founding-note { background: rgba(212,175,55,.1); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 14px; font-size: 12.5px; color: var(--gold-soft);
  margin: 0 0 14px; text-align: center; }
.pc-strike { color: var(--ink-dim); font-size: 15px; margin-right: 6px; opacity: .75; }

.deep-btn { display: inline-block; margin-top: 14px; padding: 10px 20px;
  border: 1px solid var(--gold); border-radius: 24px; color: var(--gold-soft);
  background: rgba(212,175,55,.08); font-size: 13px; font-family: var(--sans);
  cursor: pointer; transition: background .2s, box-shadow .2s; }
.deep-btn:hover { background: rgba(212,175,55,.16); box-shadow: 0 0 14px rgba(212,175,55,.2); }
#reading-back textarea { width: 100%; background: rgba(0,0,0,.25); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px;
  font-family: var(--sans); font-size: 13px; resize: vertical; }

.sky-chip.streak { border-color: rgba(224,120,86,.6); }
.sky-chip.streak.gold { border-color: var(--gold); color: var(--gold-soft);
  box-shadow: 0 0 10px rgba(212,175,55,.25); }

/* --- The Mirror --- */
.mirror-cta { display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  background: var(--card); border: 1px dashed var(--gold); border-radius: var(--radius);
  padding: 18px; }
.mirror-cta .mc-glyph { font-size: 40px; }
.mirror-cta h4 { font-family: var(--serif); color: var(--gold-soft); margin-bottom: 4px; }
.mirror-cta p { font-size: 13px; color: var(--ink-dim); max-width: 520px; }
.mirror-cta > div { flex: 1; min-width: 240px; }

.likert-legend { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--ink-dim); margin-bottom: 8px; padding: 0 4px; }
.likert-item { display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 7px 4px; border-bottom: 1px solid rgba(255,255,255,.05); }
.likert-item .li-text { font-size: 13px; flex: 1; }
.likert-scale { display: flex; gap: 4px; }
.lk-opt { cursor: pointer; }
.lk-opt input { display: none; }
.lk-opt span { display: inline-flex; width: 26px; height: 26px; align-items: center;
  justify-content: center; border: 1px solid var(--line); border-radius: 50%;
  font-size: 12px; color: var(--ink-dim); transition: all .15s; }
.lk-opt input:checked + span { background: var(--gold); color: #141005;
  border-color: var(--gold); font-weight: bold; }
#mirror-back .modal { max-height: 86vh; overflow-y: auto; }

.mirror-bars .mb-row { display: grid; grid-template-columns: 92px 1fr 34px 70px;
  gap: 10px; align-items: center; margin-top: 10px; }
.mb-label { font-size: 13px; color: var(--gold-soft); font-family: var(--serif); }
.mb-bar { height: 9px; background: rgba(255,255,255,.07); border-radius: 5px; overflow: hidden; }
.mb-fill { height: 100%; border-radius: 5px; background: var(--accent); }
.mb-fill.b-high { background: var(--gold); }
.mb-fill.b-low { background: #5a6e8c; }
.mb-score { font-size: 12px; color: var(--ink); text-align: right; }
.mb-band { font-size: 11px; color: var(--ink-dim); }
.mb-text { font-size: 12.5px; color: var(--ink-dim); margin: 3px 0 6px; }

.you-badge { display: inline-block; background: rgba(138,99,184,.25);
  border: 1px solid var(--accent); color: #cdb8e8; border-radius: 10px;
  font-size: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px; }
.conv-card.mirror-conv { border-left: 3px solid var(--accent); }
.mc-align { float: right; color: #cdb8e8; font-size: 11px; }
.mc-tags { margin-top: 6px; font-size: 12px; color: var(--ink-dim); }

/* --- Life Chapters --- */
.lc-svg { width: 100%; height: auto; display: block; }
.chapter-card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px; }
.chapter-card.now { border-color: var(--gold); box-shadow: 0 0 14px rgba(212,175,55,.12); }
.chapter-card.past { opacity: .85; }
.ch-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 4px; }
.ch-title { font-family: var(--serif); font-size: 15px; margin-bottom: 6px; }
.chapter-card p { font-size: 12.5px; color: var(--ink-dim); }
.ch-check { margin-top: 8px; font-style: italic; color: var(--gold-soft); font-size: 12px; }

/* ==========================================================================
   Birth-Day Almanac (Phase-1 plain-English panchanga)
   ========================================================================== */
.alm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; }
.alm-card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px 15px; }
.alm-card.alm-good { border-color: rgba(127,196,146,.4); }
.alm-card.alm-care { border-color: rgba(224,120,86,.4); }
.alm-card.alm-mixed { border-color: rgba(212,175,55,.4); }
.alm-k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 5px; }
.alm-sk { color: var(--ink-dim); font-size: 10px; font-style: italic;
  letter-spacing: 0; text-transform: none; }
.alm-v { font-family: var(--serif); font-size: 16px; color: var(--gold-soft);
  margin-bottom: 4px; }
.alm-note { font-size: 12px; color: var(--ink-dim); }

/* ==========================================================================
   Forecasts (Phase-2: seasons ahead, transits, candidate windows)
   ========================================================================== */
.season-card { background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 12px 15px; margin-bottom: 10px; }
.season-card.now { border-left-color: var(--gold); box-shadow: 0 0 12px rgba(212,175,55,.1); }
.season-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.season-lords { font-family: var(--serif); font-size: 15px; color: var(--gold-soft); }
.season-dates { font-size: 11.5px; color: var(--ink-dim); }
.season-spot { margin-left: auto; font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); }
.season-card p { font-size: 13px; color: var(--ink); }

.tf-block { margin-bottom: 16px; }
.tf-h { font-family: var(--serif); color: var(--gold-soft); font-size: 15px; margin-bottom: 8px; }
.tf-row { display: grid; grid-template-columns: 130px 150px 1fr; gap: 12px;
  align-items: baseline; padding: 8px 10px; border-left: 2px solid var(--line);
  margin-bottom: 6px; background: rgba(0,0,0,.12); border-radius: 0 8px 8px 0; }
.tf-row.good { border-left-color: #7fc492; }
.tf-row.care { border-left-color: var(--danger); }
.tf-when { font-size: 12px; color: var(--gold-soft); font-weight: 600; }
.tf-where { font-size: 12.5px; }
.tf-text { font-size: 12.5px; color: var(--ink-dim); }
@media (max-width: 640px) { .tf-row { grid-template-columns: 1fr; gap: 3px; } }

.fav-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px;
  padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.fav-row.now { color: var(--gold-soft); }
.fav-dates { color: var(--ink); }
.fav-lords { color: var(--ink-dim); font-size: 12px; }
.fav-row > .muted { flex-basis: 100%; }

/* ==========================================================================
   Personalized readings (almanac bodies, rich dashboard, sky reading)
   ========================================================================== */
.alm-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.alm-card2 { background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 13px 16px; }
.alm-card2.alm-good { border-left-color: #7fc492; }
.alm-card2.alm-care { border-left-color: var(--danger); }
.alm-card2.alm-mixed { border-left-color: var(--gold); }
.alm-card2 .alm-k { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim); margin-bottom: 4px; }
.alm-card2 .alm-v { font-family: var(--serif); font-size: 16px; color: var(--gold-soft); margin-bottom: 6px; }
.alm-body { font-size: 13px; color: var(--ink); line-height: 1.6; }

/* richer dashboard tiles — the four great arenas in a balanced 2×2 grid */
.dash-grid.rich { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 560px) { .dash-grid.rich { grid-template-columns: 1fr; } }
.dash-grid.rich .dash-tile { text-align: left; }
.d-mean { font-size: 11.5px; color: var(--ink-dim); margin: 2px 0 8px; font-style: italic; }
.d-desc { font-size: 13px; color: var(--ink); line-height: 1.6; margin-bottom: 8px; }
.d-enh { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55; margin-bottom: 8px; }
.d-enh b { color: var(--gold-soft); }
.dash-grid.rich .d-note { font-size: 11px; color: var(--ink-dim); opacity: .85; }

/* today's sky — the personalized transit reading */
.sky-read { margin-top: 14px; display: grid; gap: 10px; }
.sky-read-p { font-size: 13px; line-height: 1.65; color: var(--ink);
  padding: 10px 14px; background: rgba(0,0,0,.14); border-radius: 10px;
  border-left: 3px solid var(--line); }
.sky-read-p.sr-sat { border-left-color: #5a6e8c; }
.sky-read-p.sr-jup { border-left-color: var(--gold); }
.sky-read-p.sr-nodes { border-left-color: var(--accent); }

/* ==========================================================================
   Personalized section intros + gap-fill content (yoni, bhava focus, fav advice)
   ========================================================================== */
.sec-intro { font-size: 13.5px; line-height: 1.65; color: var(--ink);
  margin: -6px 0 16px; padding-left: 12px; border-left: 2px solid var(--gold);
  font-style: italic; }
.bhava-focus { font-size: 12.5px; color: var(--gold-soft); margin-top: 8px; }
.bhava-focus b { color: var(--gold-soft); }
.fav-advice { font-size: 12.5px; color: var(--ink-dim); line-height: 1.55;
  margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); }

/* ==========================================================================
   Minor yogas + family shared yogas
   ========================================================================== */
.minor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.minor-card { background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 11px 14px; }
.minor-name { font-family: var(--serif); font-size: 14.5px; color: var(--gold-soft); margin-bottom: 3px; }
.minor-detail { font-size: 11px; color: var(--ink-dim); font-style: italic; margin-bottom: 5px; }
.minor-mean { font-size: 12.5px; color: var(--ink); line-height: 1.55; }


/* ==========================================================================
   Deep Profile: house-reference toggle, collapsible sections, nav, back-to-top
   ========================================================================== */
.reft-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -2px 0 14px; }
.reft-label { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.reft { background: var(--card); border: 1px solid var(--line); color: var(--ink-dim); cursor: pointer;
  font-family: var(--sans); font-size: 12.5px; padding: 6px 13px; border-radius: 18px; transition: .15s; }
.reft:hover { border-color: rgba(212,175,55,.5); }
.reft.on { border-color: var(--gold); color: var(--gold-soft); background: rgba(212,175,55,.10); }
.si-cell { position: relative; }
.si-cell .hn { position: absolute; top: 3px; left: 5px; font-size: 9.5px; color: var(--ink-dim);
  font-variant-numeric: tabular-nums; opacity: .65; }
.si-cell.lagna .hn { color: var(--gold); opacity: 1; }

/* collapsible technical sections */
details.fold { border: 1px solid var(--line); border-radius: var(--radius); margin: 14px 0;
  background: rgba(0,0,0,.14); overflow: hidden; }
.fold-sum { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; padding: 15px 16px; }
.fold-sum::-webkit-details-marker { display: none; }
.fold-t { font-family: var(--serif); font-size: 17px; color: var(--gold-soft); }
.fold-sub { font-size: 11.5px; color: var(--ink-dim); }
.fold-chev { margin-left: auto; color: var(--gold); font-size: 12px; transition: transform .2s; }
details.fold[open] .fold-chev { transform: rotate(180deg); }
.fold-sum:hover .fold-t { color: var(--gold); }
.fold-body { padding: 0 16px 16px; }

/* back-to-top */
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 44px; height: 44px; border-radius: 50%;
  background: var(--card2); border: 1px solid var(--gold); color: var(--gold-soft); font-size: 18px; cursor: pointer;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: #241a02; }

/* Deep Profile section nav — only where the centred column leaves gutter room */
.report-nav { display: none; }
@media (min-width: 1400px) {
  .report-nav { display: block; position: fixed; left: max(10px, calc(50vw - 688px)); top: 120px; z-index: 40;
    width: 168px; max-height: 72vh; overflow-y: auto; }
  .rn-title { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim);
    margin-bottom: 8px; padding-left: 11px; }
  .rn-links { display: flex; flex-direction: column; border-left: 1px solid var(--line); }
  .report-nav a { font-size: 12px; color: var(--ink-dim); text-decoration: none; padding: 5px 11px;
    border-left: 2px solid transparent; margin-left: -1px; transition: .15s; line-height: 1.3; }
  .report-nav a:hover { color: var(--gold-soft); }
  .report-nav a.on { color: var(--gold-soft); border-left-color: var(--gold); }
}

@media print {
  details.fold { border: none; }
  details.fold > .fold-body { display: block !important; }
  .fold-chev, .reft-row, .to-top, .report-nav { display: none !important; }
}

.bhava-ref { font-size: 11.5px; color: var(--gold-soft); font-style: italic; margin: -4px 0 12px;
  padding: 7px 12px; border-left: 2px solid var(--gold); background: rgba(212,175,55,.06); border-radius: 0 8px 8px 0; }

/* ==========================================================================
   The Book — tabbed side-by-side compare (Constellation ▸ Compare)
   ========================================================================== */
/* chapter tabs — the gilded thumb-index of the book */
.book-tabs { display: flex; gap: 4px; margin: 14px 0 10px; padding: 4px; overflow-x: auto;
  background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: 13px; scrollbar-width: none; }
.book-tabs::-webkit-scrollbar { display: none; }
.book-tab { flex: 1 0 auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  background: none; border: none; cursor: pointer; color: var(--ink-dim); font-family: var(--sans);
  font-size: 12.5px; padding: 9px 13px; border-radius: 9px; transition: .18s; }
.book-tab:hover { color: var(--gold-soft); }
.book-tab.on { background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
  color: var(--gold-soft); box-shadow: inset 0 0 0 1px rgba(212,175,55,.35); }
.book-tg { font-size: 13px; opacity: .9; }

/* the cast — multi-select person ribbon */
.book-cast[hidden] { display: none; }
.book-cast-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: none; }
.book-cast-row::-webkit-scrollbar { display: none; }
.cast-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 30px; cursor: pointer; transition: .18s;
  color: var(--ink-dim); font-family: var(--sans); font-size: 13px; }
.cast-chip:hover { border-color: rgba(212,175,55,.5); transform: translateY(-1px); }
.cast-chip.on { border-color: var(--rim); color: var(--ink);
  background: color-mix(in srgb, var(--rim) 14%, var(--card)); }
.cast-co { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #2b3160, #12162e 72%);
  box-shadow: 0 0 0 1.5px var(--rim), 0 0 10px -3px var(--rim); font-family: var(--serif); font-size: 11px; color: var(--gold-soft); }
.cast-nm { line-height: 1; }
.cast-tick { font-size: 11px; opacity: .8; color: var(--rim); }
.book-hint { display: block; font-size: 11px; color: var(--ink-dim); margin: 2px 2px 0; font-style: italic; }

/* the page — side-by-side columns */
.book-page { margin-top: 4px; }
.book-cols { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.book-col { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center;
  padding: 14px 10px 16px; border: 1px solid var(--line); border-radius: 16px;
  background: linear-gradient(180deg, var(--card), rgba(8,10,22,.4)); }

.book-colhead { display: flex; flex-direction: column; align-items: center; gap: 5px; width: 100%;
  background: none; border: none; cursor: pointer; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
.book-co { position: relative; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 38% 32%, #2b3160, #12162e 72%);
  box-shadow: 0 0 0 1.5px var(--rim), 0 0 14px -3px var(--rim); font-family: var(--serif); font-size: 17px; color: var(--gold-soft); }
.book-sade { position: absolute; bottom: -2px; right: -2px; width: 15px; height: 15px; border-radius: 50%;
  background: #e08a5f; color: #2a0f06; font-size: 8.5px; font-style: normal; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--bg); }
.book-cn { font-family: var(--serif); font-size: 14.5px; color: var(--ink); line-height: 1; }
.book-cage { font-size: 10.5px; color: var(--ink-dim); }
.book-colhead:hover .book-cn { color: var(--gold-soft); }

.book-line { display: flex; flex-direction: column; gap: 1px; width: 100%; }
.book-k { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.book-v { font-size: 13px; color: var(--ink); }
.book-sub { font-size: 10.5px; color: var(--ink-dim); font-style: italic; line-height: 1.35; }

.book-verdict { margin-top: 2px; }
.book-meter { width: 100%; margin: 2px 0 4px; }

.book-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.book-emblem { width: clamp(42px, 15vw, 60px); }
.book-emblem svg { width: 100%; height: auto; display: block; }

.book-lp { position: relative; display: grid; place-items: center; margin: 2px 0; }
.book-lp .book-emblem { width: clamp(64px, 24vw, 92px); }
.book-lpn { position: absolute; font-family: var(--serif); font-size: 26px; color: var(--gold-soft);
  text-shadow: 0 0 12px rgba(212,175,55,.5); }
.book-lpk { margin-top: 2px; }

.book-dasha { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.book-dlord { font-family: var(--serif); font-size: 18px; color: var(--gold-soft); }
.book-dsub { font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: 4px; }
.book-darrow { color: var(--ink-dim); font-size: 13px; margin: 1px 0; }
.book-turn { font-size: 10.5px; color: var(--ink-dim); margin-top: 2px; line-height: 1.4; }
.book-turn.soon { color: var(--danger); }

@media (max-width: 480px) {
  .book-col { padding: 12px 6px 14px; gap: 7px; }
  .book-co { width: 36px; height: 36px; font-size: 15px; }
  .book-cn { font-size: 12.5px; }
  .book-v { font-size: 12px; }
  .book-dlord { font-size: 15px; }
  .book-lpn { font-size: 21px; }
}

/* ---- The Book · Slice 2 (wheels, overlay, yogas, convergence) ---- */
.book-loading { text-align: center; padding: 26px 0; font-style: italic; }

/* wheels */
.book-wheelcol { gap: 8px; }
.book-wheel { width: 100%; max-width: 260px; margin: 4px auto 0; }
.book-elems { width: 100%; margin-top: 4px; }
.book-elems .el-row { grid-template-columns: 38px 1fr 14px; gap: 6px; margin-bottom: 5px; }
.book-elems .el-name, .book-elems .el-n { font-size: 10.5px; }

/* overlay toggle + duo wheel */
.book-ovrow { display: flex; justify-content: center; margin: 4px 0 2px; }
.book-ovbtn { background: var(--card); border: 1px solid var(--line); color: var(--gold-soft);
  font-family: var(--sans); font-size: 12.5px; padding: 8px 16px; border-radius: 22px; cursor: pointer; transition: .18s; }
.book-ovbtn:hover { border-color: rgba(212,175,55,.5); }
.book-ovbtn.on { background: linear-gradient(180deg, rgba(212,175,55,.22), rgba(212,175,55,.10));
  box-shadow: inset 0 0 0 1px rgba(212,175,55,.35); }
.book-duo { display: flex; flex-direction: column; align-items: center; }
.book-duo .book-wheel { max-width: 380px; }
.book-duolegend { display: flex; gap: 20px; justify-content: center; margin-top: 6px; font-size: 12.5px; color: var(--ink); }
.book-duolegend span { display: inline-flex; align-items: center; gap: 7px; }
.book-duolegend i { width: 14px; height: 14px; border-radius: 50%; display: inline-block; }
.book-duolegend i.ghost { background: transparent; border: 2px dashed currentColor; opacity: .8; }

/* yogas — solo chips */
.book-yotags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }
.book-yotag { font-size: 11px; color: var(--gold-soft); background: rgba(212,175,55,.10);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px; }
.book-yotag.minor { color: var(--ink-dim); background: rgba(255,255,255,.04); }

/* convergence dial in a column */
.book-dial { margin: 4px auto 2px; }

@media (max-width: 480px) {
  .book-elems { display: none; }              /* keep 3 wheels legible on phones */
  .book-duo .book-wheel { max-width: 320px; }
}

/* ==========================================================================
   The Book · Slice 3 — the tome flourishes (gilded thumb-index, silk ribbon
   bookmark, page-turn transition)
   ========================================================================== */
/* gilded thumb-index tabs — raised gold-leaf chapter tabs along the book edge */
.book-tabs { background: linear-gradient(180deg, rgba(28,22,10,.55), rgba(0,0,0,.34));
  border-color: rgba(212,175,55,.30); box-shadow: inset 0 1px 0 rgba(232,212,138,.10); }
.book-tab { font-family: var(--serif); font-size: 13.5px; }
.book-tab:not(.on):hover { box-shadow: inset 0 -2px 0 rgba(212,175,55,.4); }
.book-tab.on { background: linear-gradient(180deg, #efdd97 0%, #d7b23f 52%, #b98f2c 100%);
  color: #241a06; font-weight: 600; transform: translateY(-1px);
  box-shadow: 0 3px 9px -3px rgba(212,175,55,.55), inset 0 1px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(120,88,20,.4); }
.book-tab.on .book-tg { color: #3a2a08; }

/* silk ribbon bookmark — drapes over the spread, marks the open chapter */
.book-stage { position: relative; overflow-x: clip; }
.book-ribbon { position: absolute; top: -10px; right: 22px; z-index: 3; width: 30px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 7px 0 14px;
  background: linear-gradient(180deg, #e6cf7f, #cba536 60%, #b28f2b);
  color: #2a1e06; font-family: var(--serif); pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  box-shadow: 0 4px 10px -4px rgba(0,0,0,.65), inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(120,88,20,.35); }
.book-ribbon[hidden] { display: none; }
.book-rib-g { font-size: 15px; line-height: 1; }
.book-rib-l { writing-mode: vertical-rl; text-orientation: mixed; font-size: 10.5px;
  letter-spacing: .08em; opacity: .9; }

/* page-turn — a subtle forward/back flip as the spread is replaced */
@keyframes bookTurnFwd { from { opacity: 0; transform: perspective(1400px) rotateY(6deg); }
  to { opacity: 1; transform: none; } }
@keyframes bookTurnBack { from { opacity: 0; transform: perspective(1400px) rotateY(-6deg); }
  to { opacity: 1; transform: none; } }
@keyframes bookFade { from { opacity: 0; } to { opacity: 1; } }
.book-turning-fwd { animation: bookTurnFwd .36s cubic-bezier(.2,.7,.3,1); transform-origin: left center; }
.book-turning-back { animation: bookTurnBack .36s cubic-bezier(.2,.7,.3,1); transform-origin: right center; }
@media (prefers-reduced-motion: reduce) {
  .book-turning-fwd, .book-turning-back { animation: bookFade .16s ease; transform: none; }
}
@media (max-width: 560px) { .book-ribbon { display: none; } }   /* keep phones uncluttered */