/* Kundli Matching — layered on shared.css tokens (Manuscript).
   Responsive: one column under 820px, a real desktop layout above it —
   see the layout-rail block below. (The V2 spec's "desktop centers it"
   was written when this page was only a form and a score.)
   Spec: docs/specs/kundli-matching-ui-design.md (V2) + the V2 dossier build.
   Semantic colors follow the design system: no danger colour in this feature. */

:root {
  --km-good: #8FD4A0;
  --km-mixed: #9A9ABA;   /* --av-secondary */
}

/* ------------------------------------------------------------------ */
/* Layout rails.                                                       */
/*                                                                     */
/* This page used to be a flat 560px at every width — a mobile column  */
/* centred on a desktop screen, using 39% of a 1440px viewport with    */
/* 440px of dead margin either side. That was defensible when the page */
/* was only a form and a score; it is not, now that it carries a       */
/* fifteen-year band, two systems of rows, a paywall, crawlable prose  */
/* and a five-section report.                                          */
/*                                                                     */
/* The mistake was collapsing two different measures into one. The     */
/* design system separates PAGE measure (1140px) from PROSE measure    */
/* (520px); free-kundli implements that as a 1080px page with a 720px  */
/* reading column, and this page now follows the same pattern.         */
/*                                                                     */
/*   page  1080px   matches free-kundli exactly                        */
/*   rail   720px   anything read as language, plus the hero cards     */
/*   full  1080px   the two person cards side by side, the koota grid, */
/*                  and the band — the three things that want width    */
/*                                                                     */
/* Breakpoint 820px, the site's established one.                       */
/* ------------------------------------------------------------------ */

.km-page { position: relative; z-index: 1; max-width: 1080px; margin: 0 auto; padding: 40px 22px 80px; }

/* The reading rail — anything read as language. 720px, matching
   free-kundli's .fk-content. */
.km-hero,
.km-seal,
.km-paycard,
.km-why,
.km-seo,
.km-dsection,
.km-parent {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* The action rail — 620px, matching free-kundli's form mount. Narrower than
   the reading rail on purpose: a 720px-wide button is a slab, and a 172px
   ring centred in a 720px card floats in empty space. */
.km-ringcard,
.km-cta,
.km-quiet,
.km-printbtn,
#km-err {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}

/* Two people, side by side — the page is about comparison, and stacking
   them hides that. Each card keeps the ~520px it was designed at; they
   simply stop being stacked. Collapses to one column under 820px. */
.km-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.km-people .km-pcard { margin-top: 0; }

/* Koota and porutham rows are data, not prose: two columns once there is
   room, which halves the scroll and keeps each row at its designed width. */
#km-sysbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; align-items: start; }
#km-sysbody .km-koota { margin-top: 0; }

/* The system toggle controls the grid below it, so it aligns with that
   grid's left edge rather than floating centred on a different rail. */
.km-syspill { max-width: 340px; margin: 22px 0 12px; }

@media (max-width: 820px) {
  .km-page { padding: 18px 18px 80px; }
  .km-people { grid-template-columns: 1fr; gap: 0; }
  .km-people .km-pcard { margin-top: 14px; }
  #km-sysbody { grid-template-columns: 1fr; gap: 0; }
  #km-sysbody .km-koota { margin-top: 9px; }
  /* One column, so the two rails collapse into it and the toggle spans. */
  .km-syspill { max-width: none; margin: 16px 0 4px; }
}
.km-crumbs { font-size: 12px; color: var(--tertiary); margin-bottom: 18px; }
.km-crumbs a { color: var(--secondary); text-decoration: none; }

.km-hero h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 7vw, 34px); line-height: 1.2; letter-spacing: -0.5px; text-wrap: balance; }
.km-hero .sub { color: var(--secondary); font-size: 14.5px; line-height: 1.65; margin-top: 10px; max-width: 46ch; }
.eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2.4px; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }

/* ---------- person cards ---------- */
.km-pcard { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 15px 16px; margin-top: 14px; }
.km-pcard .who { display: flex; justify-content: space-between; align-items: center; }
.km-pcard .tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--accent); }
.km-pcard .done { color: var(--km-good); font-size: 11px; font-family: var(--font-mono); }
.km-pname { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin-top: 6px; }
.km-pmeta { color: var(--secondary); font-size: 12px; margin-top: 3px; }
.km-field { margin-top: 12px; }
.km-field label { display: block; font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--tertiary); margin-bottom: 6px; }
.km-field input { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--fg); font-family: var(--font-body); font-size: 14px; padding: 12px 13px; }
.km-field input:focus { outline: none; border-color: var(--border-hi); }
.km-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.km-chip { border: 1px solid var(--border); border-radius: 100px; padding: 7px 13px; font-size: 12.5px; color: var(--secondary); background: var(--surface); cursor: pointer; }
.km-chip.on { border-color: var(--border-hi); color: var(--fg); background: var(--accent-soft); }
.km-timeunknown { display: flex; gap: 9px; align-items: flex-start; margin-top: 13px; color: var(--secondary); font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.km-timeunknown input { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--accent); }

/* Standard bd-* field kit (shared.css) hosted inside the person card:
   the card supplies its own padding, and the date/time grid stacks on
   narrow phones so the DD·MM·YYYY segments never overflow. */
.km-pcard .bd-body { padding: 12px 0 0; }
/* The shared kit sets 9px/1.4px tracking, which is legible as a stamp beside a
   filled form but not as the only summary on an empty one. Scoped here, not in
   shared.css — chat and Profile › People use the same class. */
.km-pcard .bd-read {
  margin-top: 2px;
  font-size: 10px;              /* --text-mono-s, still a label not body */
  letter-spacing: 0.14em;
  line-height: 1.75;
}
/* Not filled in yet: reads as a prompt, not as a value. */
.km-pcard .bd-read b.pending { color: var(--tertiary); font-weight: 400; }

/* The 44px tap target for "time unknown" now lives in shared.css alongside the
   rest of the bd-* kit, so every form on the site gets it. No local override. */
#km-err { margin-top: 14px; text-align: center; }
@media (max-width: 480px) {
  .km-pcard .bd-grid { grid-template-columns: 1fr; }
}

/* min-height 52px is the system's web hit target (44px mobile); padding alone
   left this at 49px. */
.km-cta { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 52px; text-align: center; background: var(--accent); color: #100B02; font-family: var(--font-display); font-weight: 600; font-size: 15px; border: none; border-radius: 14px; padding: 15px; margin-top: 18px; cursor: pointer; }
.km-cta.ghost { background: transparent; border: 1px solid var(--border-hi); color: var(--fg); }
.km-quiet { text-align: center; color: var(--tertiary); font-size: 11.5px; margin-top: 10px; }

/* ---------- system pill ---------- */
.km-syspill { display: flex; border: 1px solid var(--border); border-radius: 100px; overflow: hidden; margin: 16px 0 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; }
.km-syspill button { flex: 1; text-align: center; padding: 9px 0; color: var(--tertiary); background: none; border: none; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.km-syspill button.on { background: var(--accent-soft); color: var(--accent); }

/* ---------- score ring (the screenshot artifact) ---------- */
.km-ringcard { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 24px 16px 18px; margin-top: 14px; text-align: center; position: relative; }
.km-ringcard .stamp { position: absolute; top: 12px; right: 14px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 1.6px; color: var(--tertiary); text-transform: uppercase; }
.km-ringcard .stamp b { color: var(--accent); }
.km-ring { width: 172px; height: 172px; margin: 0 auto; position: relative; }
.km-ring svg { transform: rotate(-90deg); }
.km-ring .num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.km-ring .num b { font-family: var(--font-display); font-weight: 600; font-size: 40px; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.km-ring .num b small { font-size: 19px; color: var(--secondary); font-weight: 600; }
.km-ring .num span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 2px; color: var(--secondary); text-transform: uppercase; margin-top: 2px; }
.km-band { margin-top: 14px; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--km-good); text-wrap: balance; }
.km-band.neutral { color: var(--fg); }
.km-names { color: var(--secondary); font-size: 12.5px; margin-top: 6px; line-height: 1.5; }
.km-names b { color: var(--fg); font-weight: 500; }

/* ---------- dosha seals ---------- */
.km-seal { border: 1px solid var(--border); border-radius: 14px; padding: 13px 14px; margin-top: 10px; display: flex; gap: 12px; align-items: flex-start; background: rgba(19,24,56,0.6); }
.km-seal .glyph { width: 34px; height: 34px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; border: 1px solid var(--border-hi); }
.km-seal.ok .glyph { color: var(--km-good); border-color: rgba(143,212,160,0.4); }
.km-seal.open .glyph { color: var(--accent); }
.km-seal.edu { border-style: dashed; cursor: pointer; }
.km-seal.edu .glyph { color: var(--secondary); }
.km-seal h4 { font-family: var(--font-display); font-size: 13.5px; font-weight: 600; }
.km-seal.ok h4 b { color: var(--km-good); font-weight: 600; }
.km-seal.open h4 b { color: var(--accent); font-weight: 600; }
.km-seal.edu h4 { color: var(--secondary); }
.km-seal p { color: var(--secondary); font-size: 11.5px; line-height: 1.5; margin-top: 3px; }
.km-seal p b { color: var(--fg); font-weight: 500; }

/* ---------- koota rows (evidence-card language) ---------- */
.km-koota { background: var(--surface); border-left: 2px solid var(--accent); border-radius: 0 12px 12px 0; padding: 11px 13px; margin-top: 9px; display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.km-koota .k { font-family: var(--font-display); font-weight: 500; font-size: 13.5px; }
.km-koota .d { color: var(--secondary); font-size: 11.5px; margin-top: 3px; line-height: 1.45; }
.km-koota .s { font-family: var(--font-mono); font-size: 13px; flex: none; font-variant-numeric: tabular-nums; }
.km-koota .s.g { color: var(--km-good); }
.km-koota .s.m { color: var(--km-mixed); }
.km-koota .s.z { color: var(--secondary); }
.km-koota.degraded { border-left-color: var(--tertiary); opacity: 0.65; }
.km-why { color: var(--tertiary); font-size: 11px; margin-top: 14px; text-align: center; }
.km-why a { color: var(--tertiary); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- sign-in gate (anonymous teaser) & paycard ---------- */
.km-paycard { background: linear-gradient(160deg, rgba(232,162,76,0.12), rgba(232,162,76,0.03)), var(--surface); border: 1px solid var(--border-hi); border-radius: 18px; padding: 18px 16px; margin-top: 14px; }
.km-paycard .tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.8px; color: var(--accent); text-transform: uppercase; }
.km-paycard h3 { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin-top: 6px; line-height: 1.35; text-wrap: balance; }
.km-paycard .price { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--accent); margin-top: 4px; }
.km-paycard .price small { font-size: 12px; color: var(--secondary); font-family: var(--font-body); font-weight: 300; }
.km-paycard ul { list-style: none; margin-top: 12px; padding: 0; }
.km-paycard li { color: var(--secondary); font-size: 12.5px; line-height: 1.5; padding: 5px 0 5px 22px; position: relative; }
.km-paycard li::before { content: '◆'; position: absolute; left: 2px; color: var(--accent); font-size: 9px; top: 8px; }
.km-paycard li b { color: var(--fg); font-weight: 500; }
.km-excerpt { background: var(--elevated); border: 1px solid var(--border-hi); border-radius: 16px; padding: 16px; margin-top: 16px; }
.km-excerpt .tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.8px; color: var(--accent); text-transform: uppercase; }
.km-excerpt p { font-size: 14px; line-height: 1.65; margin-top: 8px; }
.km-excerpt .more { color: var(--tertiary); font-size: 12px; margin-top: 10px; font-style: italic; }
.km-askrow { border: 1px dashed var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 16px; color: var(--secondary); font-size: 13px; line-height: 1.55; }

/* ---------- prototype-only chrome (remove at launch) ---------- */
.km-proto { position: sticky; top: 60px; z-index: 50; display: flex; gap: 6px; flex-wrap: wrap; background: rgba(7,10,32,0.92); border: 1px dashed var(--border-hi); border-radius: 12px; padding: 9px 11px; margin-bottom: 16px; align-items: center; }
.km-proto .lbl { font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--accent); margin-right: 4px; }
.km-proto button { font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px; background: var(--surface); color: var(--secondary); border: 1px solid var(--border); border-radius: 100px; padding: 5px 11px; cursor: pointer; }
.km-proto button.on { color: var(--fg); background: var(--accent-soft); border-color: var(--border-hi); }

@media (min-width: 720px) {
  .km-page { padding-top: 34px; }
}

/* ------------------------------------------------------------------ */
/* Crawlable prose under the tool.                                     */
/*                                                                     */
/* This shipped unstyled: h2 fell back to Outfit 700 (the system's     */
/* rule is "Grotesk speaks, Outfit explains"), paragraphs ran at       */
/* line-height:normal with zero margin, and body prose sat at full     */
/* --fg. The result was a wall of text in the wrong face. Every value  */
/* below is a design-system token.                                     */
/* ------------------------------------------------------------------ */

.km-seo {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--border);   /* hairline, not a rule — depth comes from these */
}
.km-seo h2 {
  font-family: var(--font-display);      /* Grotesk speaks */
  font-weight: 600;
  font-size: 22px;                       /* --text-title */
  letter-spacing: -0.023em;              /* --track-title */
  line-height: 1.25;
  color: var(--fg);
  text-wrap: balance;
  margin: 0 0 12px;
}
.km-seo h2 + p { margin-top: 0; }
.km-seo h2:not(:first-child) { margin-top: 30px; }
.km-seo p {
  font-family: var(--font-body);         /* Outfit explains */
  font-weight: 300;
  font-size: 15.5px;                     /* --text-body */
  line-height: 1.65;                     /* --leading-body */
  color: var(--secondary);               /* secondary carries explanation */
  text-wrap: pretty;
  margin: 0 0 14px;                      /* the missing paragraph spacing */
  max-width: 62ch;
}
.km-seo p:last-child { margin-bottom: 0; }
/* Sanskrit terms are named once, then translated — lift them out of the
   secondary tone so the naming reads as deliberate. */
.km-seo em { color: var(--fg); font-style: italic; }
.km-seo strong { color: var(--fg); font-weight: 500; }

/* ------------------------------------------------------------------ */
/* The fifteen-year band.                                             */
/*                                                                     */
/* Free visitors see the real segmentation for their own pair — real   */
/* boundaries, real dates, real weights — and none of the reasoning.   */
/* The lock is over the meaning, never over the shape, so the page can */
/* be honest about what it is selling before anyone pays for it.       */
/* ------------------------------------------------------------------ */

/* Deliberately NOT on the reading rail. 24 segments across 720px is ~30px
   each; across the full 1080px it is ~45px, which is the difference between
   a stripe and a chart you can actually read. This is the element that
   most repays the width. */
.km-timeline { margin: 26px 0 6px; max-width: 100%; }
.km-timeline h3 {
  font: 600 15px/1.3 var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  margin: 0 0 3px; color: var(--fg);
}
.km-timeline .tl-sub { font-size: 12.5px; color: var(--fg-dim); margin-bottom: 12px; }

.km-band-wrap { position: relative; }
.km-band-rail {
  display: flex; width: 100%; height: 40px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.02);
}
.km-band-seg { position: relative; min-width: 2px; transition: filter .15s ease; }
.km-band-seg:hover { filter: brightness(1.35); }
.km-band-seg + .km-band-seg { border-left: 1px solid rgba(0, 0, 0, 0.35); }
/* Design-system tokens, not invented colours (see .claude/skills/askveda-design).
   The house rule is "no red for error — difficult astrology is never coloured
   as danger", and the ladder is green → gold → violet.

   supportive → --av-good  #5BB873   the system's only positive tone
   mixed      → --av-secondary       the honest majority; deliberately NOT the
                                     accent, because painting most of the band
                                     gold would make the whole thing shout
   demanding  → --av-advanced #D4A8F0  violet reads as "asks more of you",
                                     which is the truth, rather than as a threat */
.km-band-seg.supportive { background: #5BB873; }
.km-band-seg.mixed      { background: #9A9ABA; }
.km-band-seg.demanding  { background: #D4A8F0; }
/* A period touching the seventh house — the one the reader came for. */
.km-band-seg.relevant::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--accent, #E8A24C);
}

.km-band-axis {
  display: flex; justify-content: space-between;
  font: 400 11px/1 var(--font-mono, 'Space Mono', monospace);
  color: var(--fg-dim); margin-top: 6px; letter-spacing: .02em;
}

.km-band-key {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px;
  font-size: 11.5px; color: var(--fg-dim);
}
.km-band-key span { display: inline-flex; align-items: center; gap: 5px; }
.km-band-key i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.km-band-key i.supportive { background: #5BB873; }
.km-band-key i.mixed { background: #9A9ABA; }
.km-band-key i.demanding { background: #D4A8F0; }
.km-band-key i.relevant { background: var(--accent, #E8A24C); }

.km-band-locked {
  margin-top: 12px; padding: 13px 15px; border-radius: 10px;
  border: 1px dashed var(--border-hi); background: rgba(255, 255, 255, 0.02);
  font-size: 13.5px; line-height: 1.55; color: var(--fg-dim);
}
.km-band-locked b { color: var(--fg); font-weight: 600; }

.km-band-none {
  padding: 15px; border-radius: 10px; border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02); font-size: 13.5px; line-height: 1.6;
  color: var(--fg-dim);
}

/* ------------------------------------------------------------------ */
/* The dossier                                                         */
/* ------------------------------------------------------------------ */

.km-dossier { margin-top: 20px; }
.km-dsection { margin-bottom: 26px; }
.km-dsection h3 {
  font: 600 17px/1.3 var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  color: var(--fg); margin: 0 0 9px;
  padding-bottom: 7px; border-bottom: 1px solid var(--border);
}
.km-dsection p { font-size: 14.5px; line-height: 1.72; color: var(--fg); margin: 0 0 11px; white-space: pre-wrap; }
.km-devidence {
  margin-top: 10px; padding: 11px 13px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.025); border-left: 2px solid var(--border-hi);
}
.km-devidence li {
  list-style: none; font: 400 12.5px/1.6 var(--font-mono, 'Space Mono', monospace);
  color: var(--fg-dim); margin-bottom: 5px;
}
.km-devidence li:last-child { margin-bottom: 0; }

/* The method note. Whose arithmetic the weighting is must reach the
   reader, so it is styled to be read rather than skipped. */
.km-method {
  margin-top: 12px; padding: 12px 14px; border-radius: 8px;
  border: 1px solid var(--border); background: rgba(255, 255, 255, 0.015);
  font-size: 12.5px; line-height: 1.65; color: var(--fg-dim);
}

/* The parent summary — the forwardable artifact. Must survive being
   screenshotted and printed with no explanation attached. */
.km-parent {
  margin-top: 26px; padding: 26px 24px; border-radius: 12px;
  border: 1px solid var(--border-hi); background: rgba(255, 255, 255, 0.03);
}
.km-parent .pstamp {
  font: 600 11px/1 var(--font-mono, 'Space Mono', monospace);
  letter-spacing: .16em; text-transform: uppercase; color: var(--fg-dim);
  margin-bottom: 14px;
}
.km-parent h3 {
  font: 500 19px/1.35 var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  margin: 0 0 12px; color: var(--fg); border: 0; padding: 0;
}
.km-parent p { font-size: 15px; line-height: 1.8; color: var(--fg); margin: 0 0 12px; white-space: pre-wrap; }
.km-parent .pfoot {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--fg-dim); display: flex; justify-content: space-between; gap: 10px;
}

.km-printbtn {
  display: block;   /* inline-block ignores auto margins — it would sit left */
  margin-top: 12px; width: 100%; padding: 11px; border-radius: 9px;
  border: 1px solid var(--border-hi); background: transparent; color: var(--fg-dim);
  font: 500 13px/1 var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  cursor: pointer;
}
.km-printbtn:hover { color: var(--fg); border-color: var(--accent, #E8A24C); }

@media print {
  body > *:not(.km-page), .km-page > *:not(#km-root),
  .topbar, .km-crumbs, .km-cta, .km-printbtn, .km-paycard, .km-timeline,
  .km-dossier .km-dsection, .km-ringcard, .km-koota, .km-seal, canvas { display: none !important; }
  .km-parent { border: 0; padding: 0; background: none; }
  .km-parent p, .km-parent h3 { color: #000; }
}