/* The three classical topic pages — /mangal-dosha, /sade-sati, /yogas.
   Layers on the site's optical-glass tokens (--ink, --accent, --gold, --good,
   --bad, the .card.glass material). Every diagram is inline SVG or plain CSS:
   the CSP allows no icon font and no CDN set. Each page keeps its own visual
   device — the bhāva diamond, the rāśi ring, the family dials. */

@media (min-width: 900px) {
  .tp-page { max-width: 1280px; }
}
.tp-page { --tp-line: rgba(120, 150, 200, .28); --tp-fill: rgba(255, 255, 255, .34);
  --tp-rising: #d9a441; --tp-peak: var(--bad, #c0453a); --tp-setting: #7b6fc4; --tp-warn: #c9822b; }

/* ── head ───────────────────────────────────────────────────────────── */
.tp-head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 36px; align-items: center; margin: 6px 0 22px; }
.tp-head h1 { margin: 0 0 8px; }
.tp-head h1 .dev { font-weight: 600; color: var(--ink-soft); font-size: .62em; margin-left: 8px; }
.tp-sub { margin: 0 0 14px; font-size: 1.12rem; color: var(--accent); font-weight: 600; line-height: 1.45; }
.tp-lede { margin: 0 0 18px; max-width: 66ch; font-size: 1.02rem; line-height: 1.75; color: var(--ink-soft); }
.tp-head-go { margin: 0; }
.tp-head-art { display: grid; gap: 12px; justify-items: center; }
.tp-head-art .tp-dia, .tp-head-art .tp-ring { width: min(100%, 340px); }

.tp-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; font-size: .8rem; color: var(--ink-soft); }
.tp-legend li { display: flex; align-items: center; gap: 7px; }
.tp-legend .sw { width: 14px; height: 14px; border-radius: 4px; display: inline-block; border: 1px solid var(--tp-line); }
.sw-flag { background: color-mix(in srgb, var(--bad) 55%, transparent); }
.sw-soft { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--bad) 55%, transparent) 0 2px, transparent 2px 6px); }
.sw-rising { background: var(--tp-rising); } .sw-peak { background: var(--tp-peak); } .sw-setting { background: var(--tp-setting); }

/* ── contents bar ───────────────────────────────────────────────────── */
.tp-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 8px; padding: 10px 0; border-block: 1px solid var(--tp-line); }
.tp-toc a { font-size: .84rem; padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--ink-soft); background: var(--tp-fill); border: 1px solid var(--tp-line); }
.tp-toc a:hover, .tp-toc a:focus-visible { color: var(--ink); border-color: var(--accent); }

/* ── sections ───────────────────────────────────────────────────────── */
.tp-sec { margin: 40px 0 0; scroll-margin-top: 90px; }
.tp-h { margin: 0 0 12px; font-size: 1.5rem; line-height: 1.25; }
.tp-h3 { margin: 26px 0 12px; font-size: 1.02rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.tp-p { margin: 0 0 18px; max-width: 74ch; line-height: 1.75; color: var(--ink-soft); }
.tp-note { margin: 14px 0 0; max-width: 78ch; font-size: .86rem; line-height: 1.65; color: var(--ink-soft); padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--tp-line); background: rgba(255, 255, 255, .22); }

/* ── verses ─────────────────────────────────────────────────────────── */
.tp-verses { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 16px; }
.tp-verse { margin: 0; padding: 16px 18px 14px; border-radius: 16px; background: var(--tp-fill); border: 1px solid var(--tp-line); border-left: 4px solid var(--gold); display: flex; flex-direction: column; gap: 10px; }
.tp-verse.is-pending { border-left-color: var(--ink-faint); }
.tp-verse-cap { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: .8rem; }
.tp-verse-cap a { color: var(--accent); text-decoration: none; font-weight: 600; }
.tp-verse-cap a:hover { text-decoration: underline; }
.tp-verse-st { font-size: .72rem; color: var(--good); white-space: nowrap; }
.is-pending .tp-verse-st { color: var(--ink-faint); }
.tp-verse-sa { margin: 0; font-family: 'Noto Serif Devanagari', 'Tiro Devanagari Sanskrit', 'Noto Sans Devanagari', serif; font-size: 1.12rem; line-height: 1.9; color: var(--ink); white-space: pre-line; }
.tp-verse-tr { margin: 0; font-size: .92rem; line-height: 1.7; color: var(--ink-soft); }
.tp-verse-own { margin: 0; font-size: .72rem; color: var(--ink-faint); font-style: italic; }
.tp-verse-more summary { cursor: pointer; font-size: .82rem; color: var(--accent); }
.tp-verse-more[open] summary { margin-bottom: 8px; }

/* ── bhāva diamond ──────────────────────────────────────────────────── */
.tp-dia { margin: 0; width: 100%; max-width: 320px; }
.tp-dia svg { width: 100%; height: auto; display: block; }
.tp-dia figcaption, .tp-ring figcaption, .tp-strip figcaption { margin-top: 8px; text-align: center; font-size: .8rem; color: var(--ink-soft); }
.tp-dia-h { fill: rgba(255, 255, 255, .3); stroke: var(--ink-soft); stroke-width: 1.4; stroke-linejoin: round; }
.tp-tone-bad { --tp-tone: var(--bad); } .tp-tone-gold { --tp-tone: var(--gold); } .tp-tone-good { --tp-tone: var(--good); }
.tp-dia-h.is-flag { fill: color-mix(in srgb, var(--tp-tone) 42%, transparent); }
.tp-dia-hatch { stroke: var(--tp-tone); stroke-width: 2.4; opacity: .6; }
.tp-dia-n { font-size: 15px; text-anchor: middle; fill: var(--ink-faint); font-weight: 600; }
.tp-dia-n.on { fill: var(--ink); font-weight: 800; }
.tp-dia-m { font-size: 15px; text-anchor: middle; fill: var(--tp-tone); font-weight: 800; }

/* ── rāśi ring (sāḍe-sātī) ──────────────────────────────────────────── */
.tp-ring { margin: 0; width: 100%; max-width: 340px; }
.tp-ring svg { width: 100%; height: auto; display: block; }
.tp-ring-s { fill: rgba(255, 255, 255, .3); stroke: var(--ink-soft); stroke-width: 1.2; }
.tp-ring-s.is-rising { fill: color-mix(in srgb, var(--tp-rising) 60%, transparent); }
.tp-ring-s.is-peak { fill: color-mix(in srgb, var(--tp-peak) 60%, transparent); }
.tp-ring-s.is-setting { fill: color-mix(in srgb, var(--tp-setting) 60%, transparent); }
.tp-ring-t { font-size: 11.5px; text-anchor: middle; fill: var(--ink); font-weight: 600; }
.tp-ring-moon { fill: #fff; stroke: var(--ink-soft); stroke-width: 1.2; }
.tp-ring-sat { fill: var(--ink); }
.tp-ring-g { font-size: 14px; text-anchor: middle; fill: var(--ink); }
.tp-ring-g.on { fill: #fff; }
.tp-ring-c { font-size: 30px; font-weight: 800; text-anchor: middle; fill: var(--ink); }
.tp-ring-c2 { font-size: 10.5px; text-anchor: middle; fill: var(--ink-faint); letter-spacing: .06em; }
.tp-res .tp-ring-c, .tp-res .tp-ring-c2 { display: none; }

/* ── houses list (mangal) ───────────────────────────────────────────── */
.tp-houses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.tp-houses li { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 14px 16px; border-radius: 14px; background: var(--tp-fill); border: 1px solid var(--tp-line); }
.tp-houses p { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--ink-soft); }
.tp-house-n { width: 46px; height: 46px; display: grid; place-items: center; font-size: 1.2rem; font-weight: 800; color: #fff; background: var(--bad); border-radius: 12px; }
.tp-houses li.is-later { border-style: dashed; }
.tp-houses li.is-later .tp-house-n { background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--bad) 60%, transparent) 0 3px, rgba(255,255,255,.5) 3px 7px); color: var(--ink); }

.tp-aside { margin-top: 18px; padding: 18px 20px; border-radius: 16px; }
.tp-aside h3 { margin: 0 0 8px; font-size: 1rem; }
.tp-aside ul { margin: 0; padding-left: 20px; color: var(--ink-soft); font-size: .92rem; line-height: 1.7; }

/* ── numbered advice ────────────────────────────────────────────────── */
.tp-steps { list-style: none; counter-reset: tp; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 86ch; }
.tp-steps li { counter-increment: tp; position: relative; padding: 14px 16px 14px 58px; border-radius: 14px; background: var(--tp-fill); border: 1px solid var(--tp-line); line-height: 1.7; color: var(--ink-soft); font-size: .95rem; }
.tp-steps li::before { content: counter(tp); position: absolute; left: 14px; top: 12px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: #fff; background: var(--accent); }
.tp-cta { margin: 20px 0 0; display: flex; gap: 10px; flex-wrap: wrap; }

/* ── buttons & chips ────────────────────────────────────────────────── */
.tp-btn { display: inline-flex; align-items: center; gap: 6px; padding: 11px 20px; border-radius: 999px; border: 1px solid transparent; background: var(--accent); color: #fff; font: inherit; font-weight: 700; font-size: .92rem; text-decoration: none; cursor: pointer; }
.tp-btn:hover, .tp-btn:focus-visible { filter: brightness(1.08); }
.tp-btn[disabled] { opacity: .6; cursor: progress; }
.tp-btn-ghost { background: transparent; color: var(--accent); border-color: var(--accent); }
.tp-chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .76rem; font-weight: 700; line-height: 1.5; border: 1px solid var(--tp-line); color: var(--ink-soft); background: rgba(255, 255, 255, .4); }
.tp-chip.is-bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.tp-chip.is-good { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); }
.tp-chip.is-warn { color: var(--tp-warn); border-color: color-mix(in srgb, var(--tp-warn) 45%, transparent); background: color-mix(in srgb, var(--tp-warn) 10%, transparent); }

/* ── calculator ─────────────────────────────────────────────────────── */
.tp-calc { padding: 24px 26px; border-radius: 22px; position: relative; z-index: 2; }
.tp-form-row { display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 14px; }
.tp-adv .tp-form-row { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.tp-field { display: flex; flex-direction: column; gap: 6px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); min-width: 0; }
.tp-field input { width: 100%; box-sizing: border-box; padding: 11px 12px; border-radius: 12px; border: 1px solid var(--tp-line); background: rgba(255, 255, 255, .6); color: var(--ink); font: inherit; font-size: .95rem; }
.tp-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tp-resolved { font-weight: 500; color: var(--good); min-height: 1.2em; }
.tp-calc .ac-results { z-index: 30; }
.tp-adv { margin-top: 12px; }
.tp-adv summary { cursor: pointer; font-size: .82rem; color: var(--accent); }
.tp-form-go { margin-top: 16px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.tp-privacy { margin: 0; font-size: .78rem; color: var(--ink-faint); max-width: 60ch; }
.tp-form-msg { margin: 10px 0 0; font-size: .86rem; color: var(--bad); min-height: 1.2em; }
.tp-form-msg.is-busy { color: var(--ink-soft); }
.tp-result { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--tp-line); scroll-margin-top: 90px; }

/* ── result panels ──────────────────────────────────────────────────── */
.tp-verdict { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.tp-verdict h3 { margin: 0 0 6px; font-size: 1.35rem; }
.tp-verdict p { margin: 0; color: var(--ink-soft); line-height: 1.8; }
.tp-res-present .tp-verdict h3 { color: var(--bad); }
.tp-res-none .tp-verdict h3 { color: var(--good); }
.tp-res-cancelled .tp-verdict h3, .tp-res-popular .tp-verdict h3 { color: var(--tp-warn); }
.tp-dial { --pct: 0; --tp-dialc: var(--accent); width: 92px; height: 92px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .92) 76%, transparent 77% 100%), conic-gradient(var(--tp-dialc) calc(var(--pct) * 1%), rgba(120, 150, 200, .25) 0); }
.tp-dial b { font-size: 1.25rem; line-height: 1.1; color: var(--ink); }
.tp-dial span { font-size: .72rem; color: var(--ink-faint); }
.tp-res-present .tp-dial { --tp-dialc: var(--bad); } .tp-res-none .tp-dial { --tp-dialc: var(--good); } .tp-res-cancelled .tp-dial { --tp-dialc: var(--tp-warn); }
.tp-dial-sm { width: 54px; height: 54px; --tp-dialc: var(--gold); }
.tp-dial-sm b { font-size: 1rem; }

.tp-res-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 220px) minmax(0, 1fr); gap: 22px; align-items: center; }
.tp-res-grid-sade { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); }
.tp-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tp-table th, .tp-table td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--tp-line); vertical-align: top; color: var(--ink-soft); }
.tp-table th { font-weight: 600; color: var(--ink); }
.tp-table th small { display: block; font-weight: 500; color: var(--ink-faint); font-size: .76rem; }
.tp-table tr.is-later th, .tp-table tr.is-later td { opacity: .72; font-style: italic; }
.tp-res-block { margin-top: 24px; }
.tp-res-block h4 { margin: 0 0 10px; font-size: 1.02rem; }
.tp-res-block h4 small { font-weight: 500; color: var(--ink-faint); margin-left: 6px; }
.tp-res-block p { margin: 0 0 8px; color: var(--ink-soft); line-height: 1.8; }

.tp-bar { height: 10px; border-radius: 999px; background: rgba(120, 150, 200, .22); overflow: hidden; }
.tp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--gold)); }

/* ── sāḍe-sātī: today's board, the three phases, the century strip ──── */
.tp-now small { display: inline; color: var(--ink-faint); }
.tp-board-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--tp-line); background: var(--tp-fill); }
.tp-board { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 620px; }
.tp-board th, .tp-board td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--tp-line); color: var(--ink-soft); vertical-align: middle; }
.tp-board thead th { font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.tp-board tbody th { color: var(--ink); font-weight: 700; white-space: nowrap; }
.tp-board tbody th .dev { font-weight: 500; color: var(--ink-faint); margin-left: 4px; }
.tp-board tbody tr:last-child > * { border-bottom: 0; }
.tp-board tr.is-sade { background: color-mix(in srgb, var(--bad) 8%, transparent); }
.tp-board tr.is-good { background: color-mix(in srgb, var(--good) 7%, transparent); }
.tp-board-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink-soft); color: var(--ink); font-size: .88rem; }
.is-sade .tp-board-n { background: var(--bad); border-color: var(--bad); color: #fff; }
.is-good .tp-board-n { background: var(--good); border-color: var(--good); color: #fff; }

.tp-phases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--tp-line); }
.tp-phases li { padding: 20px 20px 22px; background: var(--tp-fill); border-top: 6px solid var(--tp-rising); position: relative; }
.tp-phases li + li { border-left: 1px solid var(--tp-line); }
.tp-phases li.is-peak { border-top-color: var(--tp-peak); } .tp-phases li.is-setting { border-top-color: var(--tp-setting); }
.tp-phases h3 { margin: 0 0 8px; font-size: 1rem; }
.tp-phases p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--ink-soft); }
.tp-phase-yrs { float: right; font-size: 1.7rem; font-weight: 800; color: var(--ink-faint); line-height: 1; margin-left: 10px; }

.tp-century { position: relative; height: 54px; margin: 6px 0 30px; border-radius: 10px; background: rgba(120, 150, 200, .16); border: 1px solid var(--tp-line); }
.tp-century-b { position: absolute; top: 0; bottom: 0; border-radius: 8px; background: color-mix(in srgb, var(--ink-faint) 55%, transparent); display: grid; place-items: center; overflow: hidden; }
.tp-century-b.is-current { background: var(--bad); } .tp-century-b.is-future { background: color-mix(in srgb, var(--tp-setting) 70%, transparent); }
.tp-century-b i { font-style: normal; font-size: .72rem; font-weight: 700; color: #fff; white-space: nowrap; }
.tp-century em { position: absolute; top: 100%; margin-top: 5px; transform: translateX(-50%); font-style: normal; font-size: .7rem; color: var(--ink-faint); }
.tp-cycle { margin-top: 14px; padding: 16px 18px; border-radius: 16px; background: var(--tp-fill); border: 1px solid var(--tp-line); }
.tp-cycle.is-current { border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.tp-cycle.is-past { opacity: .82; }
.tp-cycle header { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin-bottom: 10px; color: var(--ink); }
.tp-cycle header small { color: var(--ink-faint); }
.tp-cycle header .tp-chip { margin-left: auto; }
.tp-cycle .tp-bar { margin-bottom: 12px; }
.tp-cycle-ph { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tp-cycle-ph li { padding: 10px 12px; border-radius: 12px; border-left: 4px solid var(--tp-rising); background: rgba(255, 255, 255, .34); }
.tp-cycle-ph li.is-peak { border-left-color: var(--tp-peak); } .tp-cycle-ph li.is-setting { border-left-color: var(--tp-setting); }
.tp-cycle-ph li.is-now { outline: 2px solid var(--bad); outline-offset: 1px; }
.tp-cycle-ph h5 { margin: 0 0 4px; font-size: .84rem; }
.tp-cycle-ph p { margin: 0 0 6px; font-size: .8rem; color: var(--ink-soft); }
.tp-bindu { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--ink); }
.tp-bindu small { color: var(--ink-faint); }
.tp-bindu-dots { display: inline-flex; gap: 3px; }
.tp-bindu-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--ink-faint); }
.tp-bindu-dots i.on { background: var(--gold); border-color: var(--gold); }

/* ── śānti ladder ───────────────────────────────────────────────────── */
.tp-ladder { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 0; max-width: 880px; }
.tp-ladder li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 0 0 18px; position: relative; }
.tp-ladder li:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 44px; bottom: 0; width: 2px; background: var(--tp-line); }
.tp-ladder-n { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; color: var(--ink); background: color-mix(in srgb, var(--gold) 34%, #fff); border: 2px solid var(--gold); }
.tp-ladder h3 { margin: 4px 0 4px; font-size: 1rem; }
.tp-ladder h3 em { font-style: normal; font-weight: 500; font-size: .76rem; color: var(--accent); margin-left: 6px; }
.tp-ladder p { margin: 0; color: var(--ink-soft); line-height: 1.7; font-size: .94rem; }
.tp-big { font-size: 1.5rem; color: var(--ink); }

/* ── yogas: family dials, strips, cards, result bars ────────────────── */
.tp-famdial { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.tp-famdial a { display: grid; grid-template-columns: 54px 1fr; gap: 14px; align-items: center; padding: 8px 14px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--tp-fill); border: 1px solid var(--tp-line); font-weight: 600; font-size: .92rem; }
.tp-famdial a:hover { border-color: var(--gold); }
.tp-famdial small { display: block; font-weight: 500; color: var(--ink-faint); font-size: .74rem; }
.tp-fam { padding-top: 26px; border-top: 1px solid var(--tp-line); }
.tp-fam-head { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 30px; align-items: center; margin-bottom: 18px; }
.tp-fam-n { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-right: 12px; border-radius: 10px; font-size: 1rem; color: #fff; background: var(--gold); vertical-align: 3px; }
.tp-strip { margin: 0; }
.tp-strip-row { display: grid; grid-template-columns: 1fr 1.2fr 1fr; border: 1.5px solid var(--ink-soft); border-radius: 12px; overflow: hidden; }
.tp-strip-row span { display: grid; place-items: center; min-height: 74px; font-weight: 800; font-size: 1.1rem; color: var(--ink); background: color-mix(in srgb, var(--gold) 26%, transparent); }
.tp-strip-row span + span { border-left: 1.5px solid var(--ink-soft); }
.tp-strip-row span.on { font-size: 2rem; background: rgba(255, 255, 255, .5); }
.tp-strip-sun .tp-strip-row span:not(.on) { background: color-mix(in srgb, var(--tp-warn) 24%, transparent); }
.tp-ycards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.tp-ycard { padding: 16px 18px; border-radius: 16px; background: var(--tp-fill); border: 1px solid var(--tp-line); border-top: 4px solid var(--gold); scroll-margin-top: 90px; }
.tp-ycard.is-adverse { border-top-color: var(--bad); }
.tp-ycard:target { outline: 2px solid var(--accent); outline-offset: 2px; }
.tp-ycard h3 { margin: 0 0 10px; font-size: 1.05rem; }
.tp-ycard dl { margin: 0; display: grid; gap: 4px; }
.tp-ycard dt { font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-top: 6px; }
.tp-ycard dd { margin: 0; font-size: .92rem; line-height: 1.65; color: var(--ink-soft); }
.tp-ybars { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 8px; }
.tp-ybars li { display: grid; grid-template-columns: minmax(120px, 240px) 1fr 28px 44px; gap: 12px; align-items: center; font-size: .86rem; color: var(--ink-soft); }
.tp-ybars b { color: var(--ink); text-align: right; } .tp-ybars small { color: var(--ink-faint); }
.tp-yfound { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.tp-yfound li { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .34); border: 1px solid var(--tp-line); border-left: 4px solid var(--good); }
.tp-yfound li.is-adverse { border-left-color: var(--bad); }
.tp-yfound h5 { margin: 0 0 4px; font-size: .95rem; }
.tp-yfound h5 .dev { font-weight: 500; color: var(--ink-faint); }
.tp-yfound p { margin: 0 0 4px; font-size: .88rem; line-height: 1.65; }
.tp-yfound-src { font-size: .76rem !important; color: var(--ink-faint) !important; }
.tp-yfound-src a { color: var(--accent); margin-left: 6px; }

/* ── narrow screens ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .tp-head { grid-template-columns: 1fr; gap: 22px; }
  .tp-fam-head { grid-template-columns: 1fr; gap: 16px; }
  .tp-fam-art { max-width: 240px; margin-inline: auto; width: 100%; }
  .tp-res-grid { grid-template-columns: 1fr 1fr; }
  .tp-res-grid .tp-table { grid-column: 1 / -1; }
  .tp-res-grid-sade { grid-template-columns: 1fr; justify-items: center; }
}
@media (max-width: 640px) {
  .tp-h { font-size: 1.28rem; }
  .tp-calc { padding: 18px 16px; }
  .tp-form-row, .tp-adv .tp-form-row { grid-template-columns: 1fr 1fr; }
  .tp-field-place { grid-column: 1 / -1; }
  .tp-phases, .tp-cycle-ph { grid-template-columns: 1fr; }
  .tp-phases li + li { border-left: 0; border-top-width: 6px; }
  .tp-toc { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tp-toc a { white-space: nowrap; }
  .tp-ybars li { grid-template-columns: 1fr 28px 44px; }
  .tp-ybars li span { grid-column: 1 / -1; }
  .tp-cycle header .tp-chip { margin-left: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .tp-bar i { transition: width .6s ease; }
}

/* ── the four muhūrta pages (views/muhurta-topic.ejs) ─────────────────
   One template, four tones. The device is the 27-nakṣatra ring with the
   stars the verse names lit; /property-muhurta carries two rings, one per act. */
.mu-page { --mu: var(--accent); --mu2: var(--gold, #c9a227); --mu-best: var(--good, #2f9e6a); --mu-named: #d9a441; --mu-open: rgba(130, 145, 170, .55); --mu-barred: var(--bad, #c0453a); }
.mu-rose { --mu: #c2477f; --mu2: #e0a13a; }
.mu-earth { --mu: #9a6a2f; --mu2: #3f8f7a; }
.mu-gold { --mu: #b8891c; --mu2: #2f7fb8; }
.mu-sky { --mu: #2f7fb8; --mu2: #7b6fc4; }
.mu-art { text-align: center; }
.mu-ring { width: 100%; max-width: 340px; height: auto; }
.mu-ring-rim { fill: var(--tp-fill); stroke: var(--tp-line); }
.mu-ring-track { fill: none; stroke: var(--tp-line); stroke-dasharray: 2 5; }
.mu-star circle { fill: var(--tp-line); }
.mu-star.is-on circle { fill: var(--mu); stroke: #fff; stroke-width: 1.5; }
.mu-star-1.is-on circle { fill: var(--mu2); }
.mu-star text { font-size: 9px; font-weight: 800; fill: #fff; pointer-events: none; }
.mu-ring-n { font-size: 34px; font-weight: 800; fill: var(--mu); }
.mu-ring-of { font-size: 15px; font-weight: 600; fill: var(--ink-soft); }
.mu-ring-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-soft); }
.mu-ring-cap { font-size: .82rem; color: var(--ink-soft); margin: 6px 0 0; }

.mu-tables { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.mu-table { padding: 18px; }
.mu-table-h { margin: 0 0 12px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.mu-key { width: 12px; height: 12px; border-radius: 50%; background: var(--mu); display: inline-block; }
.mu-key-1 { background: var(--mu2); }
.mu-chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mu-chips li { padding: 5px 11px; border-radius: 999px; font-size: .86rem; background: var(--tp-fill); border: 1px solid var(--tp-line); }
.mu-chips b { color: var(--mu); margin-right: 3px; }
.mu-table-1 .mu-chips b { color: var(--mu2); }
.mu-week, .mu-sun { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.mu-sun { grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 4px 0 18px; max-width: 86ch; }
.mu-week li, .mu-sun li { padding: 8px 4px; border-radius: 10px; text-align: center; border: 1px solid var(--tp-line); background: var(--tp-fill); display: grid; gap: 2px; min-width: 0; }
.mu-week span, .mu-sun span { font-weight: 700; font-size: .8rem; overflow-wrap: anywhere; }
.mu-week small, .mu-sun small { font-size: .66rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.mu-week .is-good, .mu-sun .is-good { border-color: var(--mu-best); box-shadow: inset 0 -3px 0 var(--mu-best); }
.mu-week .is-bad, .mu-sun .is-bad { border-color: var(--mu-barred); box-shadow: inset 0 -3px 0 var(--mu-barred); opacity: .85; }
.mu-novara { font-size: .86rem; color: var(--ink-soft); margin: 0; line-height: 1.6; }
.mu-links { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.tp-form-extra select { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--tp-line); background: var(--tp-fill); color: inherit; font: inherit; }

/* result */
.mu-res-who { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; }
.mu-pill { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--tp-line); background: var(--tp-fill); font-size: .86rem; }
.mu-pill-act { background: var(--mu); border-color: var(--mu); color: #fff; font-weight: 700; }
.mu-res-h { margin: 22px 0 10px; font-size: 1.02rem; }
.mu-share { display: flex; height: 34px; border-radius: 10px; overflow: hidden; border: 1px solid var(--tp-line); }
.mu-share-seg { display: grid; place-items: center; min-width: 34px; color: #fff; font-size: .8rem; }
.mu-r-best { background: var(--mu-best); } .mu-r-named { background: var(--mu-named); }
.mu-r-open { background: var(--mu-open); } .mu-r-barred { background: var(--mu-barred); }
.mu-share-key { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .86rem; }
.mu-share-key i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.mu-days { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.mu-day { padding: 16px; border-top: 4px solid var(--mu-named); }
.mu-r-edge-best { border-top-color: var(--mu-best); }
.mu-day header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 10px; }
.mu-day-date { font-size: 1.25rem; font-weight: 800; }
.mu-day-vara { color: var(--ink-soft); }
.mu-day-rank { margin-left: auto; padding: 3px 10px; border-radius: 999px; color: #fff; font-size: .74rem; font-weight: 700; }
.mu-checks { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.mu-checks li { display: grid; grid-template-columns: 22px 1fr auto; gap: 0 8px; align-items: center; font-size: .88rem; }
.mu-checks i { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: .74rem; font-weight: 800; color: #fff; background: var(--mu-open); }
.mu-checks .is-ok i { background: var(--mu-best); } .mu-checks .is-no i { background: var(--mu-barred); }
.mu-checks span { color: var(--ink-soft); font-size: .78rem; }
.mu-checks b { text-align: right; }
.mu-checks small { grid-column: 2 / 4; color: var(--ink-soft); font-size: .74rem; }
.mu-clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0; }
.mu-clock div { padding: 6px 4px; border-radius: 8px; text-align: center; background: var(--tp-fill); border: 1px solid var(--tp-line); min-width: 0; }
.mu-clock dt { font-size: .64rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.mu-clock dd { margin: 0; font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; }
.mu-clock .is-abhijit { border-color: var(--mu-best); } .mu-clock .is-rahu { border-color: var(--mu-barred); }
.mu-candra, .mu-candra-note { font-size: .76rem; color: var(--ink-soft); margin: 10px 0 0; }
.mu-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.mu-strip li { padding: 7px 8px; border-radius: 9px; color: #fff; display: grid; gap: 1px; min-width: 0; }
.mu-strip li.mu-r-open { color: var(--ink); }
.mu-strip b { font-size: .8rem; } .mu-strip span { font-size: .74rem; } .mu-strip small { font-size: .64rem; opacity: .9; overflow-wrap: anywhere; }
.mu-basis { margin-top: 14px; }
@media (max-width: 560px) {
  .mu-week { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mu-sun { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mu-clock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Life Areas (/career /marriage /money /children) ─────────────────────
   One template, four tones. The wheel is the visual: twelve houses, the
   page's own house lit. Ledger colours: support, strain, quiet. */
.la-page { --la: var(--accent); --la2: var(--gold, #c9a227); --mu: var(--la); --la-support: var(--good, #2f9e6a); --la-strain: var(--bad, #c0453a); --la-quiet: rgba(130, 145, 170, .55); }
.la-sky { --la: #2f7fb8; --la2: #7b6fc4; }
.la-rose { --la: #c2477f; --la2: #e0a13a; }
.la-gold { --la: #b8891c; --la2: #3f8f7a; }
.la-leaf { --la: #3f8f5a; --la2: #d9a441; }
.la-art { text-align: center; }
.la-wheel { width: 100%; max-width: 340px; height: auto; }
.la-wheel-rim { fill: var(--tp-fill); stroke: var(--tp-line); }
.la-wheel-hub { fill: var(--tp-fill); stroke: var(--la); stroke-width: 2; }
.la-wheel-n { font-size: 26px; font-weight: 800; fill: var(--la); }
.la-wheel-l { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-soft); }
.la-wheel-cap { font-size: .82rem; color: var(--ink-soft); margin: 6px 0 0; }
.la-sec path { fill: transparent; stroke: var(--tp-line); stroke-width: 1; transition: fill .2s; }
.la-sec text { font-size: 15px; font-weight: 700; fill: var(--ink-soft); pointer-events: none; }
.la-sec-k path { fill: color-mix(in srgb, var(--la) 12%, transparent); }
.la-sec-t path { fill: color-mix(in srgb, var(--la2) 14%, transparent); }
.la-sec-d path { fill: color-mix(in srgb, var(--la-strain) 9%, transparent); }
.la-sec.is-on path { fill: var(--la); stroke: #fff; stroke-width: 2; }
.la-sec.is-on text { fill: #fff; }
.la-sec.is-lord path { fill: color-mix(in srgb, var(--la2) 45%, transparent); stroke: var(--la2); }
.la-wheel-res .la-sec-n { font-size: 10px; font-weight: 600; opacity: .8; }
.la-wheel-res .la-sec-g { font-size: 12px; font-weight: 800; fill: var(--ink); }
.la-wheel-res .la-sec.is-on .la-sec-g { fill: #fff; }
.la-wheel-res .la-sec-g.is-lord { fill: var(--la2); text-decoration: underline; }
.la-wheel-res .la-sec.is-on .la-sec-g.is-lord { fill: #fff; }
.la-wheel-res .la-wheel-n { font-size: 20px; }

.la-tally { margin-top: 8px; }
.la-tally-bar { display: flex; height: 34px; border-radius: 10px; overflow: hidden; border: 1px solid var(--tp-line); max-width: 86ch; }
.la-tally-bar span { display: grid; place-items: center; color: #fff; font-size: .82rem; min-width: 64px; }
.la-k-support { background: var(--la-support); } .la-k-strain { background: var(--la-strain); } .la-k-quiet { background: var(--la-quiet); }
.la-rule-chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.la-rule-chips li { padding: 4px 10px; border-radius: 999px; font-size: .78rem; background: var(--tp-fill); border: 1px solid var(--tp-line); border-left-width: 4px; }
.la-k-edge-support { border-left-color: var(--la-support) !important; } .la-k-edge-strain { border-left-color: var(--la-strain) !important; }

.la-quarters { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 6px; max-width: 520px; }
.la-quarters li { width: var(--w); min-width: 64px; padding: 6px 12px; border-radius: 8px; color: #fff; font-size: .82rem; background: linear-gradient(90deg, var(--la), var(--la2)); box-sizing: border-box; }

.la-snap { display: grid; gap: 18px; grid-template-columns: minmax(220px, 320px) 1fr; align-items: start; }
.la-snap-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.la-house { margin: 0; padding: 14px 16px; border-top: 4px solid var(--la); display: grid; gap: 6px; }
.la-house > div { display: flex; justify-content: space-between; gap: 12px; font-size: .86rem; }
.la-house dt { color: var(--ink-soft); } .la-house dd { margin: 0; font-weight: 700; text-align: right; }
.la-house-h { font-size: 1rem !important; padding-bottom: 6px; border-bottom: 1px solid var(--tp-line); }
.la-house-h dt { color: var(--la); font-weight: 800; }
.la-flag { font-style: normal; color: var(--la-strain); } .la-flag-soft { color: var(--ink-soft); }

.la-ledger { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.la-rule { padding: 14px 16px; border-left: 4px solid var(--tp-line); }
.la-rule header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.la-rule header small { color: var(--ink-soft); font-size: .74rem; }
.la-rule-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; color: #fff; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.la-rule-tag.la-k-quiet { color: var(--ink); }
.la-rule-t { margin: 0; line-height: 1.55; font-size: .92rem; }
.la-rule-v { margin-top: 10px; } .la-rule-v summary, .la-quiet summary { cursor: pointer; font-size: .82rem; color: var(--la); }
.la-quiet { margin-top: 14px; padding: 12px 16px; border: 1px dashed var(--tp-line); border-radius: 12px; }
.la-quiet ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: .86rem; line-height: 1.5; color: var(--ink-soft); }
.la-lordline { margin: 0 0 8px; font-size: .94rem; }
.la-voc { padding: 16px 18px; border-left: 4px solid var(--la2); }
.la-voc p { margin: 0 0 8px; line-height: 1.55; } .la-voc-list { font-weight: 700; color: var(--la); }
.la-voc small, .la-rem small { color: var(--ink-soft); font-size: .78rem; line-height: 1.5; display: block; }
.la-rem { padding: 16px 18px; margin-bottom: 12px; border-top: 4px solid var(--la2); }
.la-rem p { margin: 0 0 12px; line-height: 1.55; }
.la-rem-grid { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin: 0 0 12px; }
.la-rem-grid div { padding: 10px 12px; border-radius: 10px; background: var(--tp-fill); border: 1px solid var(--tp-line); }
.la-rem-grid dt { font-size: .72rem; color: var(--ink-soft); } .la-rem-grid dt small { display: inline; opacity: .8; }
.la-rem-grid dd { margin: 2px 0 0; font-weight: 700; font-size: .9rem; }
.la-rem-ok { color: var(--ink-soft); }
@media (max-width: 720px) { .la-snap { grid-template-columns: 1fr; } .la-snap .la-wheel { margin: 0 auto; display: block; } }

/* ── Relationships: /ashtakoot-milan /dashakoot-milan (views/milan-topic.ejs) ── */
.ml-page { --ml-agree: var(--la-support); --ml-against: var(--la-strain); --ml-middle: rgba(130, 145, 170, .75); --ml-lifted: var(--la2); }
.ml-ladder { list-style: none; margin: 0; padding: 0; width: min(100%, 340px); display: grid; gap: 5px; }
.ml-ladder li { display: grid; grid-template-columns: 1fr; gap: 1px; text-align: left; }
.ml-ladder-bar { display: block; width: var(--w); min-width: 28px; height: 20px; border-radius: 5px 9px 9px 5px; background: linear-gradient(90deg, var(--la), var(--la2)); color: #fff; font-size: .78rem; line-height: 20px; text-align: right; padding-right: 7px; box-sizing: border-box; }
.ml-ladder-l { font-size: .76rem; color: var(--ink-soft); }
.ml-wheel { width: min(100%, 300px); }
.ml-wheel-rim { fill: none; stroke: var(--tp-line); stroke-width: 1.5; stroke-dasharray: 3 5; }
.ml-wheel-hub { fill: var(--la); opacity: .16; stroke: var(--la); stroke-width: 1.5; }
.ml-wheel-n { font-size: 26px; font-weight: 700; fill: var(--ink); }
.ml-wheel-l { font-size: 11px; fill: var(--ink-soft); }
.ml-spoke line { stroke: var(--tp-line); stroke-width: 2; }
.ml-spoke circle { fill: var(--tp-fill); stroke: var(--ml-middle); stroke-width: 2; }
.ml-spoke text { font-size: 12px; fill: var(--ink-soft); }
.ml-spoke.is-chief line { stroke: var(--la); }
.ml-spoke.is-chief circle { fill: var(--la); stroke: var(--la); }
.ml-spoke.is-chief text { fill: var(--ink); font-weight: 700; }
.ml-wheel-key { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: k; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 10px; font-size: .78rem; color: var(--ink-soft); max-width: 340px; }
.ml-wheel-key li { counter-increment: k; }
.ml-wheel-key li::before { content: counter(k) " "; opacity: .7; }
.ml-wheel-key li.is-chief { color: var(--la); font-weight: 700; }
.ml-people { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-bottom: 14px; }
.ml-person { border: 1px solid var(--tp-line); border-radius: 14px; padding: 12px 14px 14px; margin: 0; min-width: 0; }
.ml-person legend { padding: 0 8px; font-weight: 700; color: var(--la); }
.ml-person .tp-field-place { display: block; margin-top: 10px; }
.ml-role-note { margin: 0; align-self: end; flex: 1 1 240px; }
.ml-who { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.ml-who-card { border: 1px solid var(--tp-line); border-radius: 12px; padding: 12px 14px; background: var(--tp-fill); }
.ml-who-card p { margin: 8px 0 0; font-size: .92rem; }
.ml-who-card p span { color: var(--ink-soft); font-size: .8rem; display: block; }
.ml-count { margin: 14px 0 0; font-size: .95rem; }
.ml-st-agree { background: var(--ml-agree); } .ml-st-against { background: var(--ml-against); }
.ml-st-middle { background: var(--ml-middle); } .ml-st-lifted { background: var(--ml-lifted); }
.ml-ten, .ml-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ml-item, .ml-dosha, .ml-weigh, .ml-step { border: 1px solid var(--tp-line); border-left-width: 5px; border-radius: 12px; padding: 12px 14px; background: var(--tp-fill); }
.ml-item p, .ml-dosha p, .ml-weigh p, .ml-step p { margin: 8px 0 0; font-size: .93rem; }
.ml-weigh p:first-child { margin-top: 0; }
.ml-edge-agree { border-left-color: var(--ml-agree); } .ml-edge-against { border-left-color: var(--ml-against); }
.ml-edge-middle { border-left-color: var(--ml-middle); } .ml-edge-lifted { border-left-color: var(--ml-lifted); }
.ml-item-h, .ml-step-h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ml-item-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--la); color: #fff; font-size: .76rem; font-weight: 700; }
.ml-chief { font-size: .76rem; color: var(--la); font-weight: 700; }
.ml-state { margin-left: auto; padding: 3px 10px; border-radius: 999px; color: #fff; font-size: .78rem; font-weight: 700; }
.ml-lift { color: var(--ink-soft); font-style: italic; }
.ml-v { margin-top: 8px; font-size: .88rem; }
.ml-v summary { cursor: pointer; color: var(--la); }
.ml-basis { font-size: .84rem; color: var(--ink-soft); margin: 16px 0 0; }
.ml-conv { font-size: .86rem; color: var(--ink-soft); padding-left: 18px; }
.ml-total { margin-top: 16px; border: 1px solid var(--tp-line); border-radius: 14px; padding: 16px; background: var(--tp-fill); }
.ml-total-n { display: flex; align-items: baseline; gap: 10px; }
.ml-total-n b { font-size: 2.4rem; line-height: 1; color: var(--la); }
.ml-total-n span { color: var(--ink-soft); }
.ml-total-bar { position: relative; height: 14px; border-radius: 999px; background: rgba(130, 145, 170, .25); margin: 12px 0 0; overflow: hidden; }
.ml-total-bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--la), var(--la2)); }
.ml-total-bar i { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); opacity: .5; }
.ml-verdict { margin: 12px 0 0; font-size: .93rem; }
.ml-step-pts { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.ml-step-bar { width: var(--w); min-width: 40px; height: 10px; border-radius: 999px; background: rgba(130, 145, 170, .25); margin-top: 8px; overflow: hidden; }
.ml-step-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--la), var(--la2)); }
.ml-doshas { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.ml-aff .mu-share-seg { background: var(--ml-middle); }
.ml-aff .mu-share-seg.is-on { background: var(--la); font-weight: 700; }
.ml-aff-line { margin: 10px 0 0; font-size: .95rem; }

/* ── Insights → Festivals (/festivals) ─────────────────────────────── */
.fs-page { --la: #b8572a; --la2: #d9a441; --fs-s: #e8b64c; --fs-k: #4b5d8a; }
.fs-h3 { margin: 28px 0 10px; font-size: 1.05rem; }
.fs-ring { width: min(100%, 340px); height: auto; display: block; margin: 0 auto; }
.fs-ring-rim { fill: var(--tp-fill); stroke: var(--tp-line); }
.fs-ring-mid { fill: none; stroke: var(--tp-line); stroke-dasharray: 3 4; }
.fs-ring-spoke { stroke: var(--tp-line); }
.fs-ring-hub { fill: var(--la); }
.fs-ring-n { fill: #fff; font-weight: 800; font-size: 13px; }
.fs-ring-s { fill: #fff; font-size: 9px; opacity: .9; }
.fs-ring-l { fill: var(--ink-soft); font-size: 10px; font-weight: 700; }
.fs-dot { stroke: #fff; stroke-width: 1.5; cursor: pointer; transition: transform .15s; transform-box: fill-box; transform-origin: center; }
.fs-dot-s { fill: var(--fs-s); }
.fs-dot-k { fill: var(--fs-k); }
a:hover .fs-dot, a:focus-visible .fs-dot { transform: scale(1.25); }
.fs-ring-key { list-style: decimal inside; margin: 10px auto 0; padding: 0; max-width: 340px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 10px; font-size: .78rem; color: var(--ink-soft); }
.fs-seg-1 { background: var(--la-support); }
.fs-seg-2 { background: var(--fs-k); }
.fs-cov { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fs-cov li { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 4px 14px; align-items: center; }
.fs-cov-bar { height: 10px; border-radius: 999px; background: var(--tp-fill); border: 1px solid var(--tp-line); overflow: hidden; }
.fs-cov-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--la), var(--la2)); }
.fs-cov-n { grid-column: 1 / -1; font-size: .84rem; color: var(--ink-soft); }
.fs-up { list-style: none; margin: 16px 0 0 8px; padding: 0; border-left: 3px solid var(--tp-line); }
.fs-up-row { position: relative; display: grid; grid-template-columns: 150px 1fr auto auto; gap: 4px 14px; align-items: baseline; padding: 9px 0 9px 18px; border-bottom: 1px dashed var(--tp-line); font-size: .92rem; }
.fs-up-row::before { content: ''; position: absolute; left: -8px; top: 14px; width: 13px; height: 13px; border-radius: 50%; background: var(--fs-k); border: 2px solid #fff; box-sizing: border-box; }
.fs-up-row.fs-t1::before { background: var(--la-support); }
.fs-up-row time a { color: var(--ink); font-weight: 600; text-decoration: none; }
.fs-up-row time a:hover { text-decoration: underline; }
.fs-up-name a { color: var(--la); font-weight: 700; }
.fs-up-meta { font-size: .8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.fs-pill-1 { border-color: var(--la-support); color: var(--la-support); }
.fs-ek-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px; margin-top: 18px; }
.fs-ek { scroll-margin-top: 90px; padding: 16px 16px 12px; border-radius: 16px; border: 1px solid var(--tp-line); background: var(--tp-fill); border-top: 5px solid var(--fs-s); display: flex; flex-direction: column; min-width: 0; }
.fs-ek-krsna { border-top-color: var(--fs-k); }
.fs-ek.is-adhika { border-top-style: double; border-top-color: var(--la); }
.fs-ek:target { box-shadow: 0 0 0 3px var(--la2); }
.fs-ek-h h3 { margin: 0; font-size: 1.12rem; }
.fs-ek-when { margin: 2px 0 0; font-size: .84rem; color: var(--ink-soft); }
.fs-ek-text { margin: 4px 0 0; font-size: .8rem; color: var(--la); }
.fs-ek .tp-verse { margin: 12px 0 0; }
.fs-ek-who { margin: 12px 0 0; font-size: .9rem; line-height: 1.6; color: var(--ink-soft); }
.fs-ek-f { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; font-size: .8rem; color: var(--ink-soft); }
.fs-ek-f a { color: var(--la); font-weight: 600; }
.fs-types { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 18px; margin-top: 14px; }
.fs-type { position: relative; padding: 16px 16px 16px 58px; border-radius: 16px; border: 1px solid var(--tp-line); background: var(--tp-fill); min-width: 0; }
.fs-type-n { position: absolute; left: 14px; top: 14px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--la); color: #fff; font-weight: 800; }
.fs-type h3 { margin: 0 0 6px; font-size: 1.05rem; }
.fs-type p { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--ink-soft); }
.fs-type .tp-verse { margin: 12px 0 0; }
.fs-ecl-verses { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; margin-top: 14px; }
.fs-ecl-verses .tp-verse { margin: 0; }
.fs-ecl { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; }
.fs-ecl li { display: grid; grid-template-columns: 44px 1fr; gap: 0 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--tp-line); background: var(--tp-fill); font-size: .9rem; }
.fs-ecl li > *:not(.fs-ecl-disc) { grid-column: 2; }
.fs-ecl time { font-size: .82rem; color: var(--ink-soft); }
.fs-ecl-disc { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 50%; background: var(--fs-s); position: relative; overflow: hidden; }
.fs-ecl-lunar .fs-ecl-disc { background: #cfd6e6; }
.fs-ecl-disc::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #1d2333; transform: translateX(38%); }
.fs-ecl-disc.fs-ecl-total::after { transform: none; }
.fs-ecl-disc.fs-ecl-annular::after, .fs-ecl-disc.fs-ecl-hybrid::after { transform: scale(.78); }
.fs-ecl-disc.fs-ecl-penumbral::after { transform: none; opacity: .35; }
.fs-cal { margin-top: 14px; border: 1px solid var(--tp-line); border-radius: 14px; background: var(--tp-fill); border-left: 5px solid var(--la); }
.fs-cal-jain { border-left-color: #c9a227; }
.fs-cal-buddhist { border-left-color: #3f8f5a; }
.fs-cal-sikh { border-left-color: #2d5fa8; }
.fs-cal summary { cursor: pointer; padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.fs-cal-w { font-size: .78rem; color: var(--ink-soft); font-style: italic; }
.fs-cal-scroll { overflow-x: auto; padding: 0 16px 12px; }
.fs-cal .tp-note { margin: 0 16px 14px; }
.fs-ama { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.fs-ama li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--tp-line); background: var(--tp-fill); font-size: .92rem; }
.fs-moon { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #1d2333; border: 2px solid var(--fs-k); box-sizing: border-box; }
.fs-moon-w { background: linear-gradient(90deg, #1d2333 55%, var(--fs-s) 55%); }
@media (max-width: 640px) {
  .fs-up-row { grid-template-columns: 1fr auto; }
  .fs-up-row time, .fs-up-name, .fs-up-meta { grid-column: 1; }
  .fs-up-row .mu-pill { grid-column: 2; grid-row: 1; }
  .fs-cov li { grid-template-columns: 1fr; }
}

/* ── /festivals as a month calendar: grid, day panel, expandable bars ── */
.fc-page { --fc-fest: #c2410c; --fc-ek: #d9a441; --fc-rec: #4b5d8a; --fc-ecl: #1d2333; }
.fc-hero { text-align: center; margin: 6px 0 18px; }
.fc-hero h1 { margin: 4px 0 6px; }
.fc-hero h1 .dev { font-weight: 600; color: var(--ink-soft); font-size: .62em; margin-left: 8px; }
.fc-hero .tp-sub { margin: 0 auto; max-width: 60ch; color: var(--ink-soft); }
.fc-cal { padding: 16px; border-radius: 22px; border: 1px solid var(--tp-line); background: var(--tp-fill); scroll-margin-top: 80px; }
.fc-nav { display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 10px; position: relative; }
.fc-nav-t { text-align: center; min-width: 0; }
.fc-nav-t h2 { margin: 0; font-size: clamp(1.2rem, 3.4vw, 1.7rem); }
.fc-nav-t p { margin: 2px 0 0; font-size: .86rem; color: var(--la); font-weight: 700; letter-spacing: .02em; }
.fc-nav-b { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--tp-line); background: rgba(255, 255, 255, .4); color: var(--ink); font-size: 1.5rem; line-height: 1; text-decoration: none; }
.fc-nav-b:hover, .fc-nav-b:focus-visible { border-color: var(--la); color: var(--la); }
.fc-nav-today { grid-column: 1 / -1; justify-self: center; font-size: .8rem; padding: 4px 14px; border-radius: 999px; border: 1px solid var(--la); color: var(--la); text-decoration: none; font-weight: 700; }
.fc-legend { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: .78rem; color: var(--ink-soft); }
.fc-legend li { display: flex; align-items: center; gap: 6px; }
.fc-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fc-fest); }
.fc-dot-ekadashi { background: var(--fc-ek); }
.fc-dot-recurring { background: var(--fc-rec); }
.fc-dot-eclipse { background: var(--fc-ecl); box-shadow: 0 0 0 2px var(--fc-ek); }
.fc-dot.is-cont { opacity: .45; }
.fc-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.fc-wd { text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 0; }
.fc-wd.is-sun { color: var(--fc-fest); }
.fc-cell { display: flex; flex-direction: column; gap: 2px; min-height: 92px; padding: 7px 8px; border-radius: 14px; border: 1px solid var(--tp-line); background: rgba(255, 255, 255, .38); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .12s, border-color .12s, box-shadow .12s; }
.fc-cell:hover, .fc-cell:focus-visible { border-color: var(--la); transform: translateY(-1px); }
.fc-cell.has-fest { background: linear-gradient(160deg, rgba(217, 164, 65, .22), rgba(194, 65, 12, .1)); border-color: rgba(194, 65, 12, .35); }
.fc-cell.is-today .fc-dom { background: var(--la); color: #fff; }
.fc-cell.is-sel { border-color: var(--la); box-shadow: 0 0 0 2px var(--la) inset; }
.fc-cell.is-sun .fc-dom { color: var(--fc-fest); }
.fc-cell.is-sun.is-today .fc-dom { color: #fff; }
.fc-cell-top { display: flex; align-items: center; justify-content: space-between; }
.fc-dom { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 4px; border-radius: 13px; font-size: 1rem; font-weight: 800; box-sizing: border-box; }
.fc-moon { width: 13px; height: 13px; border-radius: 50%; box-sizing: border-box; }
.fc-moon-full { background: #f6dc8c; border: 1px solid var(--fc-ek); box-shadow: 0 0 6px rgba(232, 182, 76, .9); }
.fc-moon-new { background: var(--fc-ecl); border: 1px solid var(--fc-rec); }
.fc-tithi { font-size: .7rem; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-name { font-size: .74rem; line-height: 1.25; font-weight: 700; color: var(--fc-fest); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-name em { font-style: normal; color: var(--ink-faint); font-weight: 600; }
.fc-dots { display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; padding-top: 2px; }
.fc-h3 { margin: 18px 0 8px; font-size: .95rem; display: flex; align-items: center; gap: 8px; }
.fc-h3 .mu-pill { padding: 1px 9px; font-size: .74rem; }
.fc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.fc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid var(--tp-line); background: rgba(255, 255, 255, .4); font-size: .82rem; color: var(--ink); text-decoration: none; }
.fc-chip b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: 11px; background: var(--fc-fest); color: #fff; font-size: .74rem; }
.fc-chip-ekadashi b { background: var(--fc-ek); color: #3b2a05; }
.fc-chip-eclipse b { background: var(--fc-ecl); }
.fc-chip:hover, .fc-chip:focus-visible { border-color: var(--la); }

.fc-panel { margin-top: 22px; scroll-margin-top: 76px; }
.fc-day { padding: 18px; border-radius: 22px; border: 1px solid var(--tp-line); background: var(--tp-fill); animation: fc-in .25s ease-out; }
@keyframes fc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fc-day { animation: none; } .fc-cell { transition: none; } }
.fc-day-h { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fc-day-h h2 { margin: 0; font-size: clamp(1.1rem, 3vw, 1.45rem); }
.fc-day-h p { margin: 2px 0 0; font-size: .88rem; color: var(--ink-soft); }
.fc-day-date { flex: none; width: 62px; border-radius: 14px; overflow: hidden; text-align: center; border: 1px solid var(--la); background: #fff; }
.fc-day-date b { display: block; font-size: 1.6rem; line-height: 1.5; color: #1d2333; }
.fc-day-date span { display: block; background: var(--la); color: #fff; font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 2px 0; }
.fc-item { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--tp-line); }
.fc-item > h3 { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.35; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fc-item > h3 .mu-pill { padding: 2px 10px; font-size: .74rem; font-weight: 600; }
.fc-item.is-plain > h3 { margin: 0; font-weight: 600; }
.fc-region { margin: -2px 0 10px; font-size: .84rem; color: var(--ink-faint); }
.fc-more { margin: 10px 0 0; font-size: .88rem; }
.fc-more a { color: var(--la); font-weight: 700; text-decoration: none; }

.fc-bar { --bar: var(--la); margin: 8px 0 0; border-radius: 14px; border: 1px solid var(--tp-line); border-left: 4px solid var(--bar); background: rgba(255, 255, 255, .34); overflow: hidden; }
.fc-bar > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-weight: 700; font-size: .95rem; color: var(--ink); }
.fc-bar > summary::-webkit-details-marker { display: none; }
.fc-bar > summary::after { content: '+'; margin-left: auto; font-size: 1.2rem; line-height: 1; color: var(--bar); font-weight: 400; }
.fc-bar[open] > summary::after { content: '–'; }
.fc-bar > summary:hover, .fc-bar > summary:focus-visible { background: rgba(255, 255, 255, .35); }
.fc-bar > summary .mu-pill { padding: 1px 8px; font-size: .72rem; font-weight: 600; }
.fc-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bar); color: #fff; font-size: .85rem; }
.fc-bar-body { padding: 2px 16px 16px 18px; }
.fc-bar-body > p { margin: 10px 0 0; max-width: 78ch; line-height: 1.8; color: var(--ink-soft); font-size: .96rem; }
.fc-bar-body .tp-verse { margin-top: 12px; }
.fc-bar-day { --bar: #0e7490; }
.fc-bar-sig { --bar: #c2410c; }
.fc-bar-story { --bar: #7c3aed; }
.fc-bar-folk { --bar: #b45309; }
.fc-bar-vrat { --bar: #4b5d8a; }
.fc-bar-puja { --bar: #be123c; }
.fc-bar-mantra { --bar: #a16207; background: linear-gradient(180deg, rgba(217, 164, 65, .14), rgba(255, 255, 255, .3)); }
.fc-bar-refs { --bar: #15803d; }
.fc-bar-shelf { --bar: var(--la); }
.fc-bar-body > p.fc-src { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--bar); }
.fc-facts { margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 8px; }
.fc-facts div { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .45); border: 1px solid var(--tp-line); }
.fc-facts dt { font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); }
.fc-facts dd { margin: 3px 0 0; font-size: .95rem; font-weight: 600; color: var(--ink); }
.fc-mantras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 12px; padding-top: 12px; }
.fc-mantra { margin: 0; padding: 16px; border-radius: 16px; border: 1px solid rgba(161, 98, 7, .35); background: rgba(255, 252, 240, .7); display: flex; flex-direction: column; gap: 8px; }
.fc-mantra-sa { margin: 0; font-family: 'Noto Serif Devanagari', 'Tiro Devanagari Sanskrit', 'Noto Sans Devanagari', serif; font-size: 1.14rem; line-height: 1.9; color: #3b1d06; white-space: pre-line; text-align: center; }
.fc-mantra-iast { margin: 0; font-style: italic; font-size: .9rem; line-height: 1.6; color: #6b4a1a; text-align: center; white-space: pre-line; }
.fc-mantra-en, .fc-mantra-ben { margin: 0; font-size: .9rem; line-height: 1.65; color: #4a3a22; }
.fc-mantra-ben { padding: 8px 10px; border-radius: 10px; background: rgba(217, 164, 65, .2); }
.fc-mantra figcaption { font-size: .74rem; color: #7a6238; letter-spacing: .03em; }
.fc-refs { margin: 10px 0 0; padding-left: 18px; font-size: .9rem; line-height: 1.7; color: var(--ink-soft); }
.fc-shelf { margin-top: 34px; }
.fc-shelf > h2 { margin: 0 0 6px; font-size: 1.2rem; }
.fc-shelf-art { margin: 12px 0; }
.fc-shelf .mu-links { margin-top: 18px; }
@media (max-width: 640px) {
  .fc-cal { padding: 10px; border-radius: 18px; }
  .fc-grid { gap: 3px; }
  .fc-cell { min-height: 58px; padding: 4px; border-radius: 10px; align-items: center; }
  .fc-cell-top { flex-direction: column; gap: 1px; }
  .fc-dom { min-width: 24px; height: 24px; font-size: .9rem; }
  .fc-moon { width: 9px; height: 9px; }
  .fc-name, .fc-tithi { display: none; }
  .fc-dots { justify-content: center; margin-top: auto; }
  .fc-dot { width: 6px; height: 6px; }
  .fc-wd { font-size: .62rem; letter-spacing: 0; }
  .fc-day { padding: 14px 12px; }
  .fc-day-date { width: 52px; }
  .fc-bar-body { padding: 2px 12px 14px; }
}

/* ── The reader's own bar: greeting + "Reading for … · Change" in one row ──
   public/topic-greet.js adds .has-subject and lifts #calculator to the top of
   the page; the reference sections follow below the result. */
.tp-greet { margin: 0; font-size: .98rem; line-height: 1.45; color: var(--ink-soft); flex: 1 1 320px; min-width: 0; }
.tp-greet[hidden] { display: none; }
.tp-greet-hi { color: var(--ink); font-weight: 650; }
.tp-greet::before { content: attr(data-page); display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 2px; }
.tp-calc.has-subject { padding: 14px 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 8px; }
.tp-calc.has-subject > .tp-h,
.tp-calc.has-subject > .tp-p { display: none; }
.tp-calc.has-subject .tp-subject { margin: 0; flex: 0 1 auto; }
.tp-calc.has-subject .tp-subject .subj-panel { flex-basis: 100%; }
.tp-calc.has-subject > .tp-form,
.tp-calc.has-subject > .tp-result { flex: 1 1 100%; min-width: 0; }
.tp-calc.has-subject:not(.tp-calc-pair):not(.is-err) .tp-form-go { display: none; }
.tp-calc.has-subject:not(.tp-calc-pair) .tp-form-extra { margin-top: 0; }
.tp-calc.has-subject .tp-form-msg:empty { display: none; }
.tp-calc.has-subject > .tp-result { margin-top: 6px; }
/* The matching pages keep the partner's form, so the bar sits inside person A. */
.tp-calc-pair.has-subject { display: block; }
.tp-calc-pair.has-subject .tp-greet { margin-bottom: 12px; }

/* ── Saṅgama — the combined reading (views/partials/confluence.ejs) ───────── */
.cfx { --cfx: var(--gold); margin: 0 0 26px; padding: 20px 22px; border-radius: 20px; border: 1px solid var(--tp-line); background: linear-gradient(160deg, color-mix(in srgb, var(--cfx) 10%, transparent), transparent 55%), var(--tp-fill); }
.cfx-hi { --cfx: var(--good); }
.cfx-mid { --cfx: var(--gold); }
.cfx-lo { --cfx: var(--tp-warn, var(--bad)); }
.cfx-head { display: flex; gap: 18px; align-items: center; }
.cfx-dial { width: 118px; height: 118px; flex: 0 0 auto; }
.cfx-dial-bg { fill: none; stroke: var(--tp-line); stroke-width: 9; }
.cfx-dial-fg { fill: none; stroke: var(--cfx); stroke-width: 9; stroke-linecap: round; }
.cfx-dial-n { font-size: 26px; font-weight: 700; fill: var(--ink); }
.cfx-dial-l { font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; fill: var(--ink-faint); }
.cfx-eyebrow { margin: 0 0 2px; font-size: .74rem; letter-spacing: .14em; color: var(--cfx); }
.cfx-h { margin: 0 0 6px; font-size: 1.22rem; line-height: 1.25; color: var(--ink); }
.cfx-band { margin: 0 0 4px; font-weight: 650; color: var(--ink); }
.cfx-quad { margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.5; }

.cfx-t-up { --t: var(--good); }
.cfx-t-mid { --t: var(--gold); }
.cfx-t-lo { --t: var(--tp-warn, var(--bad)); }
.cfx-t-na { --t: var(--ink-faint); }
.cfx-meter { display: block; height: 7px; border-radius: 99px; background: var(--tp-line); overflow: hidden; }
.cfx-meter > i { display: block; height: 100%; border-radius: 99px; background: var(--t, var(--gold)); }

.cfx-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.cfx-split-3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cfx-split-i { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: end; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--tp-line); background: color-mix(in srgb, var(--t) 7%, transparent); }
.cfx-split-l { font-size: .82rem; color: var(--ink-soft); line-height: 1.3; }
.cfx-split-n { font-size: 1.3rem; color: var(--ink); }
.cfx-split-i .cfx-meter { grid-column: 1 / -1; }
.cfx-split-sum { border-color: var(--t); border-width: 2px; }

.cfx-gh { margin: 20px 0 10px; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 10px; }
.cfx-gh::after { content: ''; flex: 1; height: 1px; background: var(--tp-line); }
.cfx-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.cfx-row { position: relative; padding: 12px 14px 12px 46px; border-radius: 14px; border: 1px solid var(--tp-line); background: var(--tp-fill); }
.cfx-row::before { position: absolute; left: 12px; top: 11px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: .9rem; color: var(--t); background: color-mix(in srgb, var(--t) 14%, transparent); content: '◆'; }
/* One mark and one shape per factor, so the eye can find the same factor on any page. */
.cfx-k-own::before { content: '✦'; border-radius: 50%; }
.cfx-k-bhava::before { content: '⌂'; }
.cfx-k-bala::before { content: '▲'; border-radius: 4px; }
.cfx-k-drishti::before { content: '◉'; border-radius: 50%; }
.cfx-k-sav::before { content: '⁙'; }
.cfx-k-dasha::before { content: '◔'; border-radius: 50%; }
.cfx-k-gocara::before { content: '↻'; border-radius: 50%; }
.cfx-k-focus::before { content: '✧'; }
.cfx-k-own { border-style: double; border-width: 3px; }
.cfx-k-dasha, .cfx-k-gocara { border-left: 3px solid var(--t); }
.cfx-k-focus { border-style: dashed; }
.cfx-row-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.cfx-row-l { font-weight: 600; color: var(--ink); font-size: .93rem; line-height: 1.3; }
.cfx-row-n { color: var(--t); font-size: 1.05rem; white-space: nowrap; }
.cfx-row-d { margin: 8px 0 0; font-size: .88rem; line-height: 1.5; color: var(--ink-soft); overflow-wrap: anywhere; }
.cfx-row-ref { margin: 6px 0 0; font-size: .72rem; letter-spacing: .04em; color: var(--ink-faint); }

.cfx-reco { margin: 0; padding: 0; list-style: none; counter-reset: cfx; display: grid; gap: 8px; }
.cfx-reco li { counter-increment: cfx; position: relative; padding: 10px 14px 10px 44px; border-radius: 12px; background: color-mix(in srgb, var(--cfx) 7%, transparent); color: var(--ink); font-size: .93rem; line-height: 1.55; }
.cfx-reco li::before { content: counter(cfx); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 700; color: var(--cfx); border: 1px solid var(--cfx); }
.cfx-more { margin: 10px 0 0; font-size: .9rem; }
.cfx-verses { margin-top: 18px; border-top: 1px solid var(--tp-line); padding-top: 12px; }
.cfx-verses > summary, .cfx-person > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.cfx-verses[open] > summary { margin-bottom: 12px; }
.cfx-method { margin: 14px 0 0; font-size: .8rem; line-height: 1.5; color: var(--ink-faint); }

.cfx-pair { margin: 0 0 26px; }
.cfx-person { margin-top: 14px; }
.cfx-person > summary { padding: 10px 14px; border-radius: 12px; border: 1px solid var(--tp-line); background: var(--tp-fill); }
.cfx-person[open] > summary { margin-bottom: 12px; }
.cfx-person .cfx { margin-bottom: 0; }

@media (max-width: 560px) {
  .cfx { padding: 16px 14px; }
  .cfx-head { flex-direction: column; align-items: flex-start; gap: 10px; }
  .cfx-dial { width: 96px; height: 96px; }
  .cfx-split { grid-template-columns: 1fr; }
  .cfx-rows { grid-template-columns: 1fr; }
  .tp-calc.has-subject { padding: 12px 14px; }
}

/* Signed-in greeting on the festival calendar */
.fc-greet { margin: 1rem auto 0; max-width: 46rem; padding: .8rem 1.2rem; border-radius: 16px; background: linear-gradient(135deg, rgba(255,236,200,.75), rgba(255,250,240,.8)); border: 1px solid rgba(183,121,31,.28); font-size: .98rem; line-height: 1.55; }
.fc-greet p { margin: 0; } .fc-greet-m { margin-top: .35rem !important; font-style: italic; color: #7a4d0b; }