:root{
  --ink:#1a1d29; --ink-2:#4a4f63; --ink-3:#7b8199;
  --indigo:#2B3E93; --indigo-l:#5468bd; --brass:#8E6714; --brass-l:#b8892a;
  --paper:#fbfaf7; --card:#ffffff; --line:#e3e0d8; --line-2:#efece5;
  --good:#1f6b45; --bad:#9b2c2c; --warn:#8a5a12;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --r:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ink:#e8e6e1; --ink-2:#b6b3ab; --ink-3:#87847c;
    --indigo:#8fa2e8; --indigo-l:#6d80c9; --brass:#d8ab4e; --brass-l:#b8892a;
    --paper:#14151a; --card:#1c1e26; --line:#2f323d; --line-2:#262932;
    --good:#5fc08c; --bad:#e07a7a; --warn:#d3a34d;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-text-size-adjust:100%;
}
h1,h2,h3,h4{font-family:var(--serif); font-weight:600; line-height:1.2; margin:0}
a{color:var(--indigo)}
code,.mono{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------- shell */
header.top{
  position:sticky; top:0; z-index:20; background:var(--card);
  border-bottom:1px solid var(--line);
}
.topbar{display:flex; align-items:center; gap:12px; padding:10px 14px; max-width:1180px; margin:0 auto}
.brand{font-family:var(--serif); font-size:19px; font-weight:600; letter-spacing:.01em; white-space:nowrap}
.brand small{display:block; font-family:var(--sans); font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-3); font-weight:600}
.who{margin-left:auto; text-align:right; font-size:12.5px; color:var(--ink-2); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:52%}
nav.tabs{display:flex; gap:2px; overflow-x:auto; padding:0 8px; max-width:1180px; margin:0 auto;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; -webkit-overflow-scrolling:touch}
nav.tabs::-webkit-scrollbar{height:3px}
nav.tabs::-webkit-scrollbar-thumb{background:var(--line); border-radius:2px}
nav.tabs button{
  background:none; border:0; border-bottom:2.5px solid transparent; color:var(--ink-3);
  font:inherit; font-size:13px; font-weight:600; padding:9px 10px; cursor:pointer; white-space:nowrap;
  flex-shrink:0;
}
nav.tabs button:hover{color:var(--ink)}
nav.tabs button[aria-selected="true"]{color:var(--indigo); border-bottom-color:var(--indigo)}
main{max-width:1180px; margin:0 auto; padding:16px 14px 72px}
section[hidden]{display:none}

/* ------------------------------------------------------------- bits */
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 15px; margin:0 0 14px}
.card > h2{font-size:19px; margin-bottom:2px}
.card > h3{font-size:16px; margin:14px 0 6px}
.sub{color:var(--ink-3); font-size:12.5px; margin:2px 0 12px}
.grid{display:grid; gap:14px}
@media(min-width:860px){ .g2{grid-template-columns:1fr 1fr} .g21{grid-template-columns:1.15fr .85fr} }
.grid > *{min-width:0}
.row{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end}
label.f{display:flex; flex-direction:column; gap:3px; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
/* Legacy-only form controls - scoped so they do not pollute modern React root (#root) */
body:not(:has(#root)) input,
body:not(:has(#root)) select,
body:not(:has(#root)) textarea,
.legacy-shell input,
.legacy-shell select,
.legacy-shell textarea,
#sysPick,
#who select,
.who select {
  font:inherit; font-size:14px; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:7px; padding:7px 9px; min-width:0;
}
body:not(:has(#root)) input:focus,
body:not(:has(#root)) select:focus,
.legacy-shell input:focus,
.legacy-shell select:focus {
  outline:2px solid var(--indigo-l); outline-offset:-1px;
}
button.b{font:inherit; font-size:13.5px; font-weight:650; padding:8px 13px; border-radius:7px;
  border:1px solid var(--indigo); background:var(--indigo); color:#fff; cursor:pointer}
button.b.ghost{background:transparent; color:var(--indigo)}
button.b.quiet{background:transparent; color:var(--ink-2); border-color:var(--line)}
button.b:disabled{opacity:.45; cursor:default}
.pill{display:inline-block; font-family:var(--mono); font-size:11.5px; padding:1px 7px;
  border-radius:999px; border:1px solid var(--line); color:var(--ink-2); background:var(--line-2)}
.pill.ok{color:var(--good); border-color:currentColor; background:transparent}
.pill.no{color:var(--bad); border-color:currentColor; background:transparent}
.pill.mid{color:var(--warn); border-color:currentColor; background:transparent}
.hint{font-size:12.5px; color:var(--ink-3)}
.note{border-left:3px solid var(--brass); padding:8px 0 8px 12px; margin:12px 0;
  font-size:13.5px; color:var(--ink-2)}
/* A caution is not a footnote. It sits with the verdict, in the reading colour of the
   thing it is cautioning about, and it is never collapsed behind a disclosure. */
.note.caution{border-left-color:var(--bad); color:var(--ink)}
.err{color:var(--bad); font-size:13px}

/* ------------------------------------------------------------ tables */
.legacy-wrapper{max-width:100%; overflow-x:hidden}
.tw, .table-wrap, .kn-table-wrap, .table-container{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%}
.card{max-width:100%; overflow-x:auto}
table{border-collapse:collapse; width:100%; max-width:100%; font-size:13px}
th,td{text-align:left; padding:5px 8px; border-bottom:1px solid var(--line-2); white-space:nowrap}
th{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
  font-weight:700; border-bottom:1px solid var(--line)}
td.n,th.n{text-align:right; font-family:var(--mono); font-variant-numeric:tabular-nums}
tbody tr:hover{background:var(--line-2)}
td .g{color:var(--ink-3)}

/* ------------------------------------------------------------- chart */
.chartwrap{display:flex; justify-content:center}
svg.north{width:100%; max-width:420px; height:auto}
svg.north .frame{fill:none; stroke:var(--ink-3); stroke-width:1.1}
svg.north .hn{fill:var(--ink-3); font-family:var(--mono); font-size:9px}
svg.north .sg{fill:var(--indigo); font-family:var(--sans); font-size:10.5px; font-weight:700}
svg.north .pl{fill:var(--ink); font-family:var(--mono); font-size:11px}
svg.north .pl.node{fill:var(--brass)}
svg.north .asc{fill:var(--brass); font-family:var(--mono); font-size:10px; font-weight:700}

/* ------------------------------------------------------------- dasha */
.crumbs{display:flex; flex-wrap:wrap; gap:5px; align-items:center; margin:2px 0 10px; font-size:13px}
.crumbs button{font:inherit; font-size:13px; background:var(--line-2); border:1px solid var(--line);
  border-radius:6px; padding:3px 9px; cursor:pointer; color:var(--ink)}
.crumbs span.sep{color:var(--ink-3)}
.plist{display:grid; gap:6px}
.pitem{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  background:var(--card); border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  cursor:pointer; text-align:left; font:inherit; color:inherit; width:100%}
.pitem:hover{border-color:var(--indigo-l)}
.pitem.now{border-color:var(--brass); box-shadow:inset 3px 0 0 var(--brass)}
.pitem .lord{font-family:var(--serif); font-size:16px; font-weight:600; min-width:66px}
.pitem .dates{font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.pitem .tag{font-size:11px; color:var(--ink-3)}

/* ------------------------------------------------------- verdict block */
.verdict{border-radius:var(--r); padding:12px 14px; border:1px solid var(--line); margin:10px 0}
.verdict.promised{border-color:var(--good)}
.verdict.qualified{border-color:var(--warn)}
.verdict.denied{border-color:var(--bad)}
.verdict h3{font-size:17px; display:flex; align-items:center; gap:8px}
.verdict p{margin:6px 0 0; font-size:13.5px; color:var(--ink-2)}
.bar{height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; min-width:60px}
.bar i{display:block; height:100%; background:var(--indigo)}
footer.foot{max-width:1180px; margin:0 auto; padding:22px 14px 40px; color:var(--ink-3); font-size:12px;
  border-top:1px solid var(--line)}
.spinner{display:inline-block; width:13px; height:13px; border:2px solid var(--line);
  border-top-color:var(--indigo); border-radius:50%; animation:sp .7s linear infinite; vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ------------------------------------------------------------ people */
.who select{
  font:inherit; font-size:14px; font-weight:650; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:7px; padding:3px 6px; max-width:190px;
}
.who .wholine{font-size:11.5px; color:var(--ink-3); margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.people{display:grid; gap:8px; margin-top:12px}
.person{display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
  border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:var(--card)}
.person.on{border-color:var(--indigo); box-shadow:inset 3px 0 0 var(--indigo)}
.person .pname{font-family:var(--serif); font-size:16px; font-weight:600}
.person .pmeta{font-size:12px; color:var(--ink-3); font-family:var(--mono)}
.person .pacts{display:flex; gap:6px; flex-wrap:wrap}
button.b.sm{font-size:12px; padding:4px 9px}

/* ------------------------------------------------------------ report */
.vh{font-family:var(--sans); font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  margin:16px 0 6px; font-weight:700}
.vh.ok{color:var(--good)} .vh.mid{color:var(--warn)} .vh.no{color:var(--bad)}
.qblock{border-left:3px solid var(--line); padding:2px 0 2px 12px; margin:12px 0}
.qblock.promised{border-color:var(--good)}
.qblock.qualified{border-color:var(--warn)}
.qblock.denied{border-color:var(--bad)}
.qblock .qt{font-family:var(--serif); font-size:16px; font-weight:600}
.qblock p{margin:4px 0 0; font-size:13.5px; color:var(--ink-2)}
tr.nowrow{background:var(--line-2); font-weight:650}

/* ------------------------------------------------------------- print */
@media print{
  :root{--paper:#fff; --card:#fff; --ink:#111; --ink-2:#333; --ink-3:#666;
        --line:#ccc; --line-2:#e8e8e8}
  header.top, footer.foot, nav.tabs, .noprint{display:none !important}
  main{max-width:none; padding:0}
  body{font-size:11pt}
  .card{border:0; border-top:1px solid #ccc; border-radius:0; padding:10px 0; margin:0;
        break-inside:auto}
  .card:first-child{border-top:0}
  .tw{overflow:visible !important; max-height:none !important}
  table{font-size:9.5pt}
  thead{display:table-header-group}
  tr, .qblock{break-inside:avoid}
  h2{font-size:17pt} h3{font-size:13pt}
  svg.north{max-width:300px}
  a{text-decoration:none; color:inherit}
}
#pform{scroll-margin-top:104px}

/* --------------------------------------------------- search & warnings */
.hits{display:grid; gap:4px; margin:6px 0 2px}
button.hit{display:flex; justify-content:space-between; gap:10px; align-items:baseline;
  font:inherit; font-size:13.5px; text-align:left; cursor:pointer; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:7px; padding:6px 10px}
button.hit:hover{border-color:var(--indigo)}
button.hit .g{font-family:var(--mono); font-size:11.5px; color:var(--ink-3); white-space:nowrap}
.echo{font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:0;
  text-transform:none; color:var(--ink-3); min-height:14px}
.card.banner{border-color:var(--bad); border-left-width:4px}
.card.banner h3{color:var(--bad); margin:0 0 6px}
.card.banner p{margin:4px 0; font-size:13.5px; color:var(--ink-2)}
.chks{display:grid; gap:6px 18px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); margin-top:8px}
label.chk{display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-2)}
label.chk .g{color:var(--ink-3); font-size:11.5px; font-family:var(--mono)}
.rectnote{font-size:12.5px; color:var(--brass)}
.opt{font-weight:400; text-transform:none; letter-spacing:0; color:var(--ink-3); font-size:10px}
table.grid9 td.n{padding:4px 6px}
table.grid9 td.strong{color:var(--indigo); font-weight:700; background:var(--line-2)}
details.finder{border:1px solid var(--line); border-radius:9px; padding:8px 12px; margin:4px 0 6px}
details.finder summary{cursor:pointer; font-size:13.5px; font-weight:650; color:var(--indigo)}

/* ------------------------------------------------- manual and glossary */
.steps{display:grid; gap:14px; margin-top:10px}
.step{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start;
  border-top:1px solid var(--line-2); padding-top:12px}
.step:first-child{border-top:0; padding-top:0}
.stepn{width:26px; height:26px; border-radius:50%; background:var(--indigo); color:#fff;
  font-family:var(--mono); font-size:13px; display:flex; align-items:center;
  justify-content:center; flex:none}
.step h3{font-size:16px; margin:0 0 4px}
.step p{margin:0 0 6px; font-size:13.5px; color:var(--ink-2)}
.step p.watch{color:var(--ink-3); font-size:13px}
.step p.watch b{color:var(--brass)}
ol.plain{font-size:14px; line-height:1.7; padding-left:20px; margin:6px 0}
dl.terms{margin:6px 0 16px}
dl.terms dt{font-family:var(--serif); font-size:15.5px; font-weight:600; margin-top:12px}
dl.terms dd{margin:2px 0 0; font-size:13.5px; color:var(--ink-2)}
mark{background:rgba(142,103,20,.22); color:inherit; border-radius:2px; padding:0 1px}
.card.note-card{border-left:4px solid var(--brass)}
.card.note-card h3{color:var(--brass); margin-bottom:4px}
.card.note-card p{margin:0; font-size:13.5px; color:var(--ink-2)}
.brand small select{font:inherit; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  font-weight:700; color:var(--ink-3); background:none; border:0; padding:0; cursor:pointer}
td.weakcell{color:var(--ink-3)}
/* Used in the pooled tables, where the winning cell in a row has to be findable at a
   glance — the whole point of the chart-by-chart matrix is watching it move. */
td.strong{color:var(--indigo); font-weight:700}
tr.savrow td{border-top:2px solid var(--line); background:var(--line-2)}
.syswrap{display:grid; gap:14px; margin-bottom:14px}
@media(min-width:900px){ .syswrap{grid-template-columns:repeat(3,1fr)} }
.syscard{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:13px 14px}
.syscard h3{font-size:16px; margin:0 0 2px}
.syscard table{font-size:12.5px; margin-top:6px}
.syscard td{padding:3px 4px}

/* ------------------------------------------------------- western wheel */
/* The Indian systems get a square diagram and Western a round one, because a wheel
   is what makes an aspect visible as a chord across the circle. */
.wheel{width:100%; max-width:340px; height:auto; display:block; margin:0 auto}
.wheel .wr{fill:none; stroke:var(--line); stroke-width:1}
.wheel .wsign{stroke:var(--line); stroke-width:1}
.wheel .wcusp{stroke:var(--line); stroke-width:0.7; stroke-dasharray:2 2}
.wheel .wang{stroke:var(--ink-2); stroke-width:1.6}
.wheel .wsl{font-size:9px; fill:var(--ink-3); letter-spacing:.04em}
.wheel .whn{font-size:8px; fill:var(--ink-3)}
.wheel .wp{font-size:14px; fill:var(--ink)}
.wheel .wa{font-size:8.5px; fill:var(--ink-2); font-weight:700}
.wheel .wsoft{stroke:var(--good); stroke-width:0.8; opacity:.65}
.wheel .whard{stroke:var(--bad); stroke-width:0.8; opacity:.65}
.wheel .wconj{stroke:var(--ink-3); stroke-width:0.8; opacity:.45}
.aspgrid td.asoft{color:var(--good)}
.aspgrid td.ahard{color:var(--bad)}
.aspgrid td.aneu{color:var(--ink-2)}
.aspgrid th{font-size:11px}

/* --------------------------------------------------- forecast timeline */
/* One row per house, one cell per month. Reading down a column is "what is this
   month like across my life"; reading across a row is "when does this area move". */
.tl{border-collapse:separate; border-spacing:1px; font-size:11px}
.tl td.mo{width:14px; min-width:14px; padding:0; height:20px; border-radius:2px}
.tl td.mo span{display:block; height:100%}
.tl th{font-size:11px; text-align:left; white-space:nowrap; padding-right:8px}
.tl .hit{outline:1.5px solid var(--brass); outline-offset:-1.5px}
.seg{border-left:3px solid var(--line); padding:6px 0 6px 10px; margin:8px 0}
.seg.now{border-left-color:var(--brass)}
.seg h4{margin:0 0 2px; font-size:13.5px}

/* ---------------------------------------------------- lal kitab fixed grid */
/* The houses never move, so the diagram is a plain grid in sign order — which is how
   Lal Kitab books print it, and it makes the point that the frame is the same for
   everyone. */
.lkgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:8px; overflow:hidden}
.lkcell{background:var(--card); padding:7px 8px; min-height:74px; position:relative}
.lkcell.lagna{background:var(--line-2); box-shadow:inset 0 0 0 2px var(--brass)}
.lkcell .lkh{font-family:var(--mono); font-size:10px; color:var(--ink-3)}
.lkcell .lks{font-size:11px; font-weight:700; color:var(--indigo); letter-spacing:.04em}
.lkcell .lkp{font-family:var(--mono); font-size:11px; margin-top:3px; line-height:1.45}
.lkcell .lkl{position:absolute; right:6px; top:6px; font-size:9px; color:var(--brass);
  letter-spacing:.06em; text-transform:uppercase; font-weight:700}

/* ------------------------------------------------------------ vastu compass */
.rose{width:100%; max-width:200px; height:auto; display:block; margin:0 auto}
.rose .rr{fill:none; stroke:var(--line); stroke-width:1}
.rose .rd{font-family:var(--sans); font-size:11px; font-weight:700; fill:var(--ink-3)}
.rose .rd.fav{fill:var(--good)}
.rose .rf{stroke:var(--brass); stroke-width:2.5; stroke-linecap:round}
.rose .rc{fill:var(--ink-2)}

/* -------------------------------------------------------- studio split layout */
.studio-layout{display:grid; gap:16px; align-items:start}
@media(min-width:960px){
  .studio-layout{grid-template-columns:440px 1fr}
  .studio-left{position:sticky; top:84px}
}
.chart-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px}
.chart-controls{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; flex-wrap:wrap; gap:6px}
.chart-picker{display:flex; gap:4px}
.chart-picker button{font:inherit; font-size:12px; font-weight:600; padding:4px 8px; border-radius:6px; border:1px solid var(--line); background:var(--card); color:var(--ink-2); cursor:pointer}
.chart-picker button.active{background:var(--indigo); color:#fff; border-color:var(--indigo)}

/* ----------------------------------------------------- time machine scrubber */
.time-machine{background:var(--line-2); border:1px solid var(--line); border-radius:var(--r); padding:10px 14px; margin-bottom:14px}
.tm-header{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; font-size:13px}
.tm-title{font-weight:700; color:var(--indigo)}
.tm-date{font-weight:600; color:var(--brass); font-size:13.5px}
.tm-controls{display:flex; flex-wrap:wrap; gap:5px}

/* ------------------------------------------------- interactive svg highlights */
svg.interactive-chart [data-planet]{cursor:pointer; transition:all .15s ease}
svg.interactive-chart [data-planet]:hover{font-weight:bold; fill:var(--indigo) !important; filter:drop-shadow(0 0 2px var(--indigo-l))}
svg.interactive-chart text.sg{font-weight:700; fill:var(--ink-2)}
svg.interactive-chart text.pl{font-family:var(--mono); font-size:11px; fill:var(--ink)}
svg.interactive-chart text.pl.node{fill:var(--brass)}
svg.interactive-chart text.asc{fill:var(--brass); font-weight:700; font-size:10px}
svg.south{width:100%; max-width:420px; height:auto; display:block; margin:0 auto}
svg.south .frame{fill:none; stroke:var(--ink-3); stroke-width:1.1}

/* --------------------------------------------------------------- kcil badges */
.kcil-badge{display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em}
.kcil-badge.ok{background:rgba(31,107,69,.12); color:var(--good); border:1px solid var(--good)}
.kcil-badge.mid{background:rgba(138,90,18,.12); color:var(--warn); border:1px solid var(--warn)}
.kcil-badge.no{background:rgba(155,44,44,.12); color:var(--bad); border:1px solid var(--bad)}
.chain-step{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:12px; padding:2px 6px; background:var(--line-2); border-radius:4px; border:1px solid var(--line)}
.chain-arrow{color:var(--ink-3); font-size:10px}