/* ===========================================================================
   AnkJyotish v2 — Report + Calculator components (Magic Square)
   Numbers as a designed ledger; the Lo Shu square is the hero.
   =========================================================================== */

/* ====== Landing hero (pre-submit) ======================================== */
.lead { padding-block:var(--sp-7) var(--sp-6); }
.lead__grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:var(--sp-8); align-items:center; }
.lead h1 { font-size:var(--fs-hero); font-weight:500; margin-block:var(--sp-3) var(--sp-4); }
.lead h1 em { font-style:italic; color:var(--sindoor); }
.lead p { font-size:var(--fs-lg); color:var(--ink-2); }
.lead__figure { display:grid; place-items:center; }

/* the decorative hero magic square (with its constant) — the landing thesis */
.msq-hero { text-align:center; }
.msq-hero .msq { --cell:clamp(72px, 14vw, 108px); }
.msq-hero .msq__digits { font-size:clamp(1.7rem, 5.2vw, 2.6rem); }
.msq-hero__cap { margin-top:var(--sp-3); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.msq-hero__cap b { color:var(--sindoor); font-weight:600; }

/* ====== The Lo Shu magic square ========================================== */
.msq {
  --cell:clamp(56px, 17vw, 82px);
  display:grid; grid-template-columns:repeat(3, var(--cell)); grid-template-rows:repeat(3, var(--cell));
  gap:1.5px; background:var(--ink); border:1.5px solid var(--ink); width:max-content; margin-inline:auto;
}
.msq__cell {
  position:relative; display:grid; place-items:center; background:var(--paper); overflow:hidden;
  transition:background var(--t-fast) var(--ease);
}
.msq__digits {
  font-family:var(--font-num); font-optical-sizing:auto; font-weight:500;
  font-size:clamp(1.3rem, 4.6vw, 1.95rem); color:var(--ink); letter-spacing:-.02em; line-height:1;
}
.msq__cell.is-empty .msq__digits { color:var(--line-2); font-weight:400; }
.msq__cell.is-mulank   { background:#FBEFEF; }
.msq__cell.is-bhagyank { background:#EFF0F7; }
.msq__cell.is-mulank.is-bhagyank { background:linear-gradient(135deg,#FBEFEF 50%,#EFF0F7 50%); }
.msq__mark {
  position:absolute; top:4px; right:5px;
  font-family:var(--font-body); font-size:.52rem; font-weight:700; letter-spacing:.02em;
}
.msq__mark--m { color:var(--sindoor); }
.msq__mark--b { color:var(--indigo-600); left:5px; right:auto; }
.msq__cell.is-preview { background:#FCF2D9; }
/* the preview slot is ALWAYS absolute so the empty span never participates in
   the cell's grid flow (otherwise it pushes the centered digits off-centre). */
.msq__add {
  position:absolute; bottom:4px; right:5px;
  font-family:var(--font-num); font-weight:600; font-size:.8rem; color:var(--sindoor);
}

.msq-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--sp-3) var(--sp-4); margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--ink-2); }
.msq-legend span { display:inline-flex; align-items:center; gap:.45em; }
.msq-legend i { width:.7em; height:.7em; border-radius:2px; display:inline-block; }
.i-m { background:#FBEFEF; box-shadow:inset 0 0 0 1px var(--sindoor); }
.i-b { background:#EFF0F7; box-shadow:inset 0 0 0 1px var(--indigo-600); }
.i-h { background:#FCF2D9; box-shadow:inset 0 0 0 1px var(--gold); }

/* ====== Report shell ===================================================== */
.report { padding-block:var(--sp-6) var(--sp-8); }
.rpt-head { margin-bottom:var(--sp-6); }
.rpt-head h1 { font-size:var(--fs-hero); font-weight:500; margin-block:var(--sp-2) var(--sp-1); }
.rpt-head__meta { color:var(--ink-2); font-size:var(--fs-base); }
.rpt-head__meta b { color:var(--ink); font-weight:600; }

/* section heading shared by report blocks */
.block { margin-bottom:var(--sp-7); }
.block__head { display:flex; align-items:baseline; gap:var(--sp-3); margin-bottom:var(--sp-4); padding-bottom:var(--sp-2); border-bottom:1px solid var(--rule); }
.block__head h2 { font-size:var(--fs-h3); font-weight:600; }
.block__head .note { margin-left:auto; font-size:var(--fs-xs); color:var(--ink-3); }

/* ====== Top split: square (left) + core ledger (right) =================== */
.top { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-8); align-items:start; }
.top__square { display:grid; justify-items:center; }

/* core numbers as a ledger, not boxes */
.ledger { display:grid; }
.ledger__row {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:var(--sp-4);
  padding:.7rem 0; border-bottom:1px solid var(--rule);
}
.ledger__row:first-child { border-top:1px solid var(--rule); }
.ledger__num {
  font-family:var(--font-num); font-optical-sizing:auto; font-weight:500;
  font-size:var(--num-lg); line-height:1; color:var(--ink); min-width:1.4em; text-align:center;
  display:inline-flex; align-items:baseline; gap:.12em;
}
.ledger__label { font-size:var(--fs-sm); font-weight:600; text-transform:uppercase; letter-spacing:.1em; }
.ledger__sub { font-size:var(--fs-xs); color:var(--ink-3); margin-left:auto; text-align:right; }

/* addable rows — hover to preview in the square */
.is-addable { cursor:help; }
.is-addable .ledger__label::after,
.is-addable.timeline__item .timeline__label::after {
  content:"·"; color:var(--sindoor); font-weight:700; margin-left:.4em;
}
.is-addable:hover .ledger__num, .is-addable:focus-visible .ledger__num { color:var(--sindoor); outline:none; }

/* master / karmic chip */
.chip { font-family:var(--font-body); font-size:.5em; font-weight:700; vertical-align:super; letter-spacing:.02em; }
.chip--master { color:var(--gold-ink); }
.chip--karmic { color:var(--red); }

/* ====== Lucky / Unlucky / Neutral ======================================== */
.lun { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--sp-5); }
.lun__cell { padding-bottom:var(--sp-3); border-bottom:1px solid var(--rule); }
.lun__k { font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.16em; color:var(--ink-3); margin-bottom:var(--sp-3); }
/* typographic run of numerals (not boxes), separated by a hairline middot */
.lun__nums { display:flex; flex-wrap:wrap; align-items:baseline; gap:.1em .55em; }
.lun__n {
  font-family:var(--font-num); font-optical-sizing:auto; font-weight:500;
  font-size:var(--num-sm); line-height:1; color:var(--ink);
}
.lun__n + .lun__n { position:relative; }
.lun__n + .lun__n::before { content:"·"; color:var(--line-2); margin-right:.55em; font-weight:400; }
.lun--lucky   .lun__n { color:var(--green); }
.lun--unlucky .lun__n { color:var(--red); }
.lun--neutral .lun__n { color:var(--ink-2); }

/* ====== Timing ledger ==================================================== */
.timeline { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); }
.timeline__item {
  display:flex; flex-direction:column; gap:.15rem; padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-right:1px solid var(--rule);
}
.timeline__num { font-family:var(--font-num); font-optical-sizing:auto; font-weight:500; font-size:var(--num-md); line-height:1; color:var(--ink); }
.timeline__label { font-size:var(--fs-xs); color:var(--ink-2); }
.timeline__item--high .timeline__num { color:var(--sindoor); }
.timeline__item--high .timeline__label { color:var(--sindoor-700); font-weight:600; }
.is-addable.timeline__item:hover .timeline__num, .is-addable.timeline__item:focus-visible .timeline__num { color:var(--sindoor); outline:none; }

/* planes line */
.planes { margin-top:var(--sp-4); font-size:var(--fs-sm); color:var(--ink-2); }
.planes b { color:var(--ink); font-weight:600; }

/* ====== Readings (indexed accordions) ==================================== */
.readings { border-top:1px solid var(--ink); }
.reading { border-bottom:1px solid var(--rule); }
.reading > summary {
  display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:var(--sp-4);
  padding:var(--sp-4) var(--sp-1); cursor:pointer; list-style:none;
}
.reading > summary::-webkit-details-marker { display:none; }
.reading__idx { font-family:var(--font-num); font-optical-sizing:auto; font-weight:500; font-size:var(--num-sm); color:var(--ink-2); min-width:1.3em; text-align:center; transition:color var(--t-fast); }
.reading__t { font-family:var(--font-display); font-size:1.1rem; font-weight:500; color:var(--ink); }
.reading__n { font-size:var(--fs-2xs); font-weight:600; color:var(--ink-3); letter-spacing:.06em; }
.reading__chev { color:var(--ink-3); font-size:1.3rem; line-height:1; transition:transform var(--t) var(--ease); }
.reading[open] .reading__chev { transform:rotate(45deg); }
.reading[open] .reading__idx { color:var(--sindoor); }   /* sindoor only on the open reading */
.reading > summary:hover .reading__t { color:var(--sindoor); }
.reading__body { padding:0 0 var(--sp-5) calc(1.3em + var(--sp-4)); color:var(--ink); max-width:72ch; }
.reading__body p { margin-top:var(--sp-3); max-width:none; }
.reading__body h4 { font-family:var(--font-display); color:var(--sindoor-700); margin-top:var(--sp-4); margin-bottom:var(--sp-1); font-size:1.05rem; font-weight:600; }
.reading__body ul { margin:var(--sp-2) 0; padding-left:1.1rem; }
.reading__body li { margin-bottom:.35rem; }
.reading__body b { color:var(--ink); font-weight:600; }

.disclaimer { margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid var(--rule); font-size:var(--fs-xs); color:var(--ink-3); text-align:center; }

/* ====== Edit-details disclosure ========================================== */
.edit { margin-top:var(--sp-6); }
.edit > summary { cursor:pointer; font-size:var(--fs-sm); color:var(--accent-ink); font-weight:600; list-style:none; display:inline-flex; gap:.4em; align-items:center; }
.edit > summary::-webkit-details-marker { display:none; }
.edit > summary::before { content:"✎"; }
.edit__body { margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--rule); }

/* ====== Text → Number calculator ========================================= */
.calc { padding-block:var(--sp-7) var(--sp-8); }
.calc__head { margin-bottom:var(--sp-6); max-width:60ch; }
.calc__head h1 { font-size:var(--fs-hero); font-weight:500; margin-block:var(--sp-3) var(--sp-3); }
.calc__head p { color:var(--ink-2); font-size:var(--fs-lg); }

.calc__form { margin-bottom:var(--sp-6); }
.calc__input {
  width:100%; font-family:var(--font-display); font-optical-sizing:auto; font-size:clamp(1.6rem,4vw,2.4rem);
  font-weight:400; color:var(--ink); background:transparent; border:0; border-bottom:2px solid var(--ink);
  padding:.4rem .1rem; transition:border-color var(--t-fast);
}
.calc__input::placeholder { color:var(--line-2); }
.calc__input:focus { outline:none; border-color:var(--sindoor); }

.calc__out { display:grid; grid-template-columns:auto 1fr; gap:var(--sp-7); align-items:center; }
.calc__result { text-align:center; }
.calc__big {
  font-family:var(--font-num); font-optical-sizing:auto; font-weight:500;
  font-size:var(--fs-mega); line-height:.9; color:var(--sindoor); letter-spacing:-.03em;
}
.calc__resultlabel { margin-top:var(--sp-2); font-size:var(--fs-2xs); text-transform:uppercase; letter-spacing:.18em; color:var(--ink-3); }
.calc__compound { margin-top:var(--sp-2); font-size:var(--fs-sm); color:var(--ink-2); }
.calc__compound b { font-family:var(--font-num); color:var(--ink); font-weight:600; }
.calc__master { display:inline-block; margin-top:var(--sp-2); font-size:var(--fs-xs); font-weight:700; color:var(--gold-ink); letter-spacing:.04em; }

.calc__trail { display:flex; flex-wrap:wrap; gap:.4rem; align-content:flex-start; }
.calc__tile {
  display:grid; place-items:center; gap:.05rem; min-width:2.1rem; padding:.4rem .35rem;
  border:1px solid var(--rule); border-radius:var(--r-sm); background:var(--paper);
}
.calc__tile b { font-family:var(--font-display); font-size:1rem; font-weight:600; line-height:1; color:var(--ink); }
.calc__tile span { font-family:var(--font-num); font-size:.85rem; color:var(--sindoor); line-height:1; }
.calc__empty { color:var(--ink-3); font-size:var(--fs-sm); }
.calc__note { margin-top:var(--sp-6); padding-top:var(--sp-4); border-top:1px solid var(--rule); font-size:var(--fs-xs); color:var(--ink-3); max-width:70ch; }
.calc__note b { color:var(--ink-2); }

/* ====== Responsive ======================================================= */
@media (max-width:860px) {
  .lead__grid { grid-template-columns:1fr; gap:var(--sp-6); }
  .lead__figure { order:-1; }
  .top { grid-template-columns:1fr; gap:var(--sp-6); }
  .top__square { order:-1; }
}
@media (max-width:640px) {
  .lun { grid-template-columns:1fr; gap:var(--sp-4); }
  .calc__out { grid-template-columns:1fr; gap:var(--sp-5); }
  .calc__result { order:-1; }
  .timeline__item { border-right:0; border-bottom:1px solid var(--rule); padding-right:0; }
  .reading__body { padding-left:0; }
}