/* Astrocharts — one stylesheet, no framework.
 *
 * The palette is deliberately close to printed almanac stock: warm paper, ink
 * that is not pure black, and a single brass accent. Charts are the only
 * saturated thing on the page, which is how a panchanga reads on paper.
 *
 * The --line / --cell / --ink / --muted / --retro / --accent / --centre custom
 * properties are consumed by the SVG produced in astro/render.py, so the charts
 * inherit the theme instead of carrying baked-in colours.
 */

:root {
  --paper:   #faf8f3;
  --card:    #ffffff;
  --ink:     #1f1c17;
  --muted:   #726b5e;
  --dim:     #9a9285;
  --line:    #ddd6c8;
  --cell:    #ffffff;
  --centre:  #faf8f3;
  --accent:  #8a6d3b;
  --accent-soft: #f2ead8;
  --retro:   #b3541e;
  --good:    #3f6b45;
  --good-bg: #e8f0e6;
  --bad:     #9b3b33;
  --bad-bg:  #f6e6e3;
  --warn:    #8a5a17;
  --warn-bg: #f7edda;
  --radius:  10px;
  --shadow:  0 1px 2px rgba(31, 28, 23, .05), 0 6px 20px rgba(31, 28, 23, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:   #16150f;
    --card:    #1e1c15;
    --ink:     #ece7da;
    --muted:   #a49b88;
    --dim:     #7a7263;
    --line:    #3a3628;
    --cell:    #201e16;
    --centre:  #16150f;
    --accent:  #c8a568;
    --accent-soft: #2c2718;
    --retro:   #e0834c;
    --good:    #8fbf95;
    --good-bg: #1e2a1d;
    --bad:     #d98a80;
    --bad-bg:  #2c1c19;
    --warn:    #d6a95c;
    --warn-bg: #2b2213;
    --shadow:  0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 0 0 .4em;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.15rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code { font: .85em ui-monospace, SFMono-Regular, Menlo, monospace;
       background: var(--accent-soft); padding: .1em .35em; border-radius: 4px; }
small { color: var(--muted); font-size: .82em; }
.dim { color: var(--dim); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; }

/* ---------- chrome ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--line); background: var(--card);
  position: sticky; top: 0; z-index: 20;
}
.brand {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: Georgia, serif; font-size: 1.05rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
}
.brand .glyph { color: var(--accent); font-size: 1.2rem; }
.topbar nav { display: flex; gap: 1rem; font-size: .9rem; }

/* Chart pages are wide by nature — twelve-house grids, varga tables, dasha
   trees. 1120px left a third of a laptop screen empty and forced those tables
   to wrap. The cap still exists because prose at full 4K width is unreadable;
   it is just set to where the widest table stops needing to wrap. */
main { max-width: 1560px; margin: 0 auto; padding: 1.5rem 1.5rem 3rem; }

.foot {
  max-width: 1560px; margin: 0 auto; padding: 0 1.5rem 3rem;
  color: var(--dim); font-size: .82rem;
}
.foot p { margin: .3rem 0; }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.25rem; margin-bottom: 1.25rem;
}

.hero { margin-bottom: 1.25rem; }
.lede { color: var(--muted); max-width: 62ch; margin: 0; }

.alert {
  border: 1px solid var(--bad); background: var(--bad-bg); color: var(--bad);
  border-radius: var(--radius); padding: .8rem 1rem; margin-bottom: 1.25rem;
}
.alert strong { display: block; margin-bottom: .15rem; }

/* ---------- forms ---------- */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.span2 { grid-column: 1 / -1; }

.field { display: flex; flex-direction: column; gap: .3rem; position: relative; }
.field > span { font-size: .82rem; font-weight: 600; color: var(--muted);
                text-transform: uppercase; letter-spacing: .04em; }

input[type=text], input[type=date], input[type=time], select {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: 8px; padding: .55rem .7rem;
  width: 100%;
}
input:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent);
}

.check { display: flex; gap: .6rem; align-items: flex-start; font-size: .92rem; }
.check input { margin-top: .25rem; }
.check small { display: block; }

.settings { margin-top: 1.1rem; border-top: 1px solid var(--line); padding-top: .9rem; }
.settings summary { cursor: pointer; font-weight: 600; color: var(--accent); }
.settings .grid { margin-top: 1rem; }

.actions { display: flex; gap: .6rem; margin-top: 1.2rem; }
button {
  font: inherit; font-weight: 600; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  border-radius: 8px; padding: .6rem 1.2rem;
}
button.ghost { background: transparent; color: var(--accent); }
button:hover { filter: brightness(1.07); }

/* place autocomplete */
.results {
  list-style: none; margin: 0; padding: .25rem;
  position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow); max-height: 16rem; overflow: auto;
}
.results li { padding: .45rem .6rem; border-radius: 6px; cursor: pointer;
              display: flex; justify-content: space-between; gap: 1rem; }
.results li:hover, .results li[aria-selected="true"] { background: var(--accent-soft); }
.results .tz { color: var(--dim); font-size: .8rem; white-space: nowrap; }

/* ---------- chart page head ---------- */
.head { display: grid; grid-template-columns: 1fr 1.4fr; gap: 1.5rem;
        align-items: center; padding-block: 1rem; }
.head h1 { font-size: 1.5rem; margin: 0 0 .15rem; }
.head .birth { font-size: .95rem; color: var(--muted); margin: 0; }
.head .meta { color: var(--muted); font-size: .84rem; margin: .15rem 0; }

.provenance { margin-top: .4rem; }
.provenance summary {
  cursor: pointer; font-size: .78rem; color: var(--dim);
  text-transform: uppercase; letter-spacing: .05em;
}
.provenance summary:hover { color: var(--accent); }
.provenance[open] summary { margin-bottom: .3rem; }

.keyfacts { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem 1rem; margin: 0; }
/* Six facts in three columns is two rows instead of three, which is what keeps
   the header shorter than the chart it introduces. */
.head .keyfacts { grid-template-columns: repeat(3, 1fr); gap: .6rem 1.25rem; }
@media (max-width: 1000px) { .head .keyfacts { grid-template-columns: 1fr 1fr; } }
.keyfacts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
               color: var(--muted); }
.keyfacts dd { margin: 0; font-weight: 600; }

.subnav {
  display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: 1.25rem;
  position: sticky; top: 3.4rem; z-index: 10;
  background: var(--paper); padding: .4rem 0;
}
.subnav a {
  font-size: .85rem; font-weight: 600; text-decoration: none;
  padding: .35rem .75rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
}
.subnav a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- charts ---------- */
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
figure { margin: 0; }
.chartbox { background: var(--cell); border-radius: 8px; }
figcaption { margin-top: .6rem; font-size: .85rem; color: var(--muted); }
figcaption strong { color: var(--ink); }

.vargagrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.4rem 1.2rem;
}
.varga figcaption { display: flex; flex-direction: column; gap: .1rem; font-size: .78rem; }

.note { color: var(--muted); font-size: .85rem; max-width: 72ch; }

/* ---------- tables ---------- */
.scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th {
  text-align: left; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-weight: 700;
  padding: .5rem .6rem; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.data td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
table.data tr:last-child td { border-bottom: none; }
table.data tr:hover td { background: var(--accent-soft); }
table.data .num { text-align: right; }
table.data th.num { text-align: right; }
table.data .name small { display: block; font-size: .75rem; }
table.data .state { white-space: nowrap; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 999px; background: var(--accent-soft); color: var(--muted);
  white-space: nowrap;
}
.tag.good { background: var(--good-bg); color: var(--good); }
.tag.bad  { background: var(--bad-bg);  color: var(--bad); }
.tag.warn { background: var(--warn-bg); color: var(--warn); }

/* ---------- dasha ---------- */
.chain { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0 1.2rem; }
.chain .link {
  border: 1px solid var(--accent); background: var(--accent-soft);
  border-radius: 8px; padding: .45rem .7rem; font-size: .85rem;
}
.chain .lvl { display: block; font-size: .68rem; text-transform: uppercase;
              letter-spacing: .05em; color: var(--muted); }
.chain .span { color: var(--muted); margin-left: .4rem; font-size: .8rem; }

ul.periods { list-style: none; margin: 0; padding: 0; }
ul.periods ul.periods { margin-left: 1rem; border-left: 1px solid var(--line);
                        padding-left: .6rem; }
.period summary, .period .leaf {
  display: grid; grid-template-columns: 7rem 1fr auto auto; gap: .6rem;
  align-items: baseline; padding: .35rem .5rem; border-radius: 6px;
  font-size: .88rem;
}
.period summary { cursor: pointer; }
.period summary:hover, .period .leaf:hover { background: var(--accent-soft); }
.period .lord { font-weight: 600; }
.period .span { color: var(--muted); font-variant-numeric: tabular-nums; }
.period .dur { color: var(--dim); font-size: .8rem; font-variant-numeric: tabular-nums; }
.period.lvl0 > details > summary { font-size: .95rem; border-bottom: 1px solid var(--line); }
.period.current > details > summary, .period.current > .leaf {
  background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent);
}
.badge {
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: #fff; background: var(--accent);
  padding: .05rem .4rem; border-radius: 999px;
}

/* ---------- recast ---------- */
.recast .inline { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.recast .field { min-width: 12rem; }

/* ---------- responsive ---------- */
@media (max-width: 800px) {
  .grid, .head, .pair { grid-template-columns: 1fr; }
  .keyfacts { grid-template-columns: 1fr 1fr; }
  .subnav { top: 3.2rem; }
}

/* ---------- print ---------- */
@media print {
  .topbar, .subnav, .recast, .actions, .foot nav { display: none; }
  body { background: #fff; }
  .card { box-shadow: none; border-color: #ccc; break-inside: avoid; }
  .vargagrid { grid-template-columns: repeat(4, 1fr); }
  details { open: true; }
}

/* ---------- added with panchanga / strengths / yogas ---------- */
h3 { font-size: 1rem; margin: 1.4rem 0 .6rem; }

.keyfacts.wide { grid-template-columns: repeat(4, 1fr); margin: 1.2rem 0; }

/* chips — kaals, choghadiya, ishta/kashta */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0 1rem; }
.chip {
  font-size: .78rem; padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  white-space: nowrap;
}
.chip strong { color: var(--ink); font-weight: 600; }
.chip small { font-size: .72rem; }
.chip.good { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.chip.bad  { background: var(--bad-bg);  border-color: var(--bad);  color: var(--bad); }
.chip.on   { box-shadow: 0 0 0 2px var(--accent); font-weight: 700; }

/* horizontal meters for shadbala / ashtakavarga */
.meter {
  width: 100%; min-width: 80px; height: 8px; border-radius: 999px;
  background: var(--accent-soft); overflow: hidden;
}
.meter .fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.meter .fill.good { background: var(--good); }
.meter .fill.bad  { background: var(--bad); }

table.data tr.struck .name strong { text-decoration: line-through; opacity: .7; }

ul.plain { list-style: none; margin: .6rem 0 0; padding: 0; }
ul.plain li { padding: .25rem 0; border-bottom: 1px solid var(--line); font-size: .88rem; }
ul.plain li:last-child { border-bottom: none; }

@media (max-width: 800px) { .keyfacts.wide { grid-template-columns: 1fr 1fr; } }

table.data tr.on td { background: var(--accent-soft); }
sup { font-size: .7em; color: var(--accent); font-weight: 700; }
.meter.big { height: 16px; margin: .8rem 0 1.2rem; }
.subnav a.go { border-color: var(--accent); color: var(--accent); }

/* ---------- tab bar (one path per section) ---------- */
.tabs {
  display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem;
  padding: .75rem 1rem; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.tabgroup { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.tablabel {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); font-weight: 800; margin-right: .2rem;
}
/* These are the primary navigation of the whole page, so they are set at the
   weight of navigation rather than of secondary text — the previous muted
   colour read as disabled next to the filled active pill. */
.tabs a {
  font-size: .88rem; font-weight: 700; text-decoration: none;
  padding: .32rem .75rem; border-radius: 999px; color: var(--ink);
  border: 1px solid transparent;
}
.tabs a:hover { color: var(--accent); border-color: var(--line); }
.tabs a.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.subcard { margin-top: 1.5rem; }
.subcard:first-child { margin-top: 0; }

.resolved { background: var(--accent-soft); border-radius: 8px; padding: .6rem .8rem; }
.resolved output { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.results li .meta2 { color: var(--dim); font-size: .75rem; }
.results li .main { display: flex; flex-direction: column; gap: .1rem; }

/* ---------- recent charts ---------- */
.recentlist { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .75rem; }
.recent {
  display: flex; flex-direction: column; gap: .15rem; text-decoration: none;
  border: 1px solid var(--line); border-radius: 8px; padding: .7rem .85rem;
  background: var(--paper); color: var(--ink); position: relative;
}
.recent:hover { border-color: var(--accent); }
.recent strong { font-size: .95rem; }
.recent span { color: var(--muted); font-size: .8rem; }
.recent .fill {
  margin-top: .5rem; align-self: flex-start; font-size: .72rem; padding: .2rem .55rem;
  background: transparent; color: var(--accent); border: 1px solid var(--line);
}
button.small { font-size: .75rem; padding: .2rem .6rem; }

.intro {
  color: var(--muted); font-size: .92rem; max-width: 74ch;
  border-left: 3px solid var(--accent); padding: .1rem 0 .1rem .9rem;
  margin: 0 0 1.4rem;
}

/* ---------- graha ranking ---------- */
.rankcard { border: 1px solid var(--line); border-radius: var(--radius);
            padding: .9rem 1rem; margin-bottom: .9rem; background: var(--paper); }
.rankcard.good { border-left: 4px solid var(--good); }
.rankcard.bad  { border-left: 4px solid var(--bad); }
.rankcard.neutral { border-left: 4px solid var(--line); }
.rankhead { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .5rem; }
.rankhead .rk { font-family: Georgia, serif; font-size: 1.1rem; color: var(--accent); font-weight: 700; }
.rankhead strong { font-size: 1.05rem; }
.rankparts { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 .2rem; }
.part { font-size: .74rem; border: 1px solid var(--line); border-radius: 6px; padding: .15rem .45rem; }
.part .pn { color: var(--muted); }
.part .pv { font-family: ui-monospace, Menlo, monospace; margin-left: .3rem; }
ul.reasons { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .85rem; }
ul.reasons.good li { color: var(--good); }
ul.reasons.bad li { color: var(--bad); }
ul.reasons li { margin: .15rem 0; }

.picker { align-items: flex-end; gap: .75rem; padding: .8rem 0 .2rem; }
.picker .field { min-width: 9rem; }
.ghostlink { font-size: .85rem; color: var(--accent); align-self: center; }

/* ---------- reference pages ---------- */
/* The only indexable prose on the site. Measured column, because these are
   read rather than scanned — unlike the chart tables, which want the width. */
.learngrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem; margin-bottom: 1.25rem;
}
.learncard { display: block; text-decoration: none; color: inherit; }
.learncard:hover { border-color: var(--accent); }
.learncard h2 { margin: 0 0 .4rem; font-size: 1.1rem; color: var(--accent); }
.learncard p { margin: 0; color: var(--muted); font-size: .9rem; }

.crumbs { font-size: .82rem; color: var(--dim); margin-bottom: .75rem; }
.crumbs a { color: var(--muted); }

.prose { max-width: 78ch; }
.prose h1 { margin-bottom: .5rem; }
.prose .lede { margin-bottom: 1.25rem; }
.prose .card { margin-bottom: 1rem; }
.prose .card h2 { margin: 0 0 .5rem; font-size: 1.05rem; }
.prose p { line-height: 1.65; }

.faq { margin: 0; }
.faq dt { font-weight: 700; margin-top: .9rem; }
.faq dt:first-child { margin-top: 0; }
.faq dd { margin: .25rem 0 0; color: var(--muted); line-height: 1.6; }

.plainlist { margin: 0; padding-left: 1.1rem; }
.plainlist li { margin: .4rem 0; color: var(--muted); font-size: .92rem; }

.btn {
  display: inline-block; background: var(--accent); color: #fff;
  padding: .5rem 1rem; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .9rem;
}
.btn:hover { opacity: .9; }