/* =============================================================================
   Chart sizing and layout polish
   -----------------------------------------------------------------------------
   Loaded after theme.css and tune.css.

   The chart glyphs were set to 12px in theme.css. Inside an SVG a CSS length
   resolves against the viewBox, and this viewBox is 100 units wide — so 12px
   meant each two-letter planet label occupied twelve per cent of the chart's
   width. Three planets in one house physically could not fit, which is what
   the overlapping "Me/Ju" and "Su/Ke" in the rendered chart were.

   It also explains why setting font-size as an attribute on the <text> element
   had no effect: a stylesheet rule beats a presentation attribute, so
   theme.css won every time.
   ========================================================================== */

.chakra__graha {
    /* 5.2 units against a 5.6-unit row gap leaves a small but real gutter
       between stacked planets. Larger than this and a four-planet house
       collides again. */
    font-size: 5.2px;
    font-weight: 700;
    letter-spacing: 0;
    fill: var(--haldi, #FFC93C);
    dominant-baseline: middle;
    paint-order: stroke fill;
}

.chakra__house {
    /* House numbers are reference, not content — they should read as a faint
       grid label rather than compete with the planets. */
    font-size: 3.8px;
    font-weight: 500;
    letter-spacing: 0;
    fill: var(--text-faint, #8b8b9a);
    opacity: 0.55;
    dominant-baseline: middle;
}

/* Retrograde marker rides above the baseline, so it needs to be smaller still
   or it doubles the apparent width of the label. */
.chakra__graha tspan {
    font-size: 3px;
    fill: var(--sindoor, #FF6B6B);
}

.chakra {
    width: 100%;
    height: auto;
    display: block;
    margin-inline: auto;
    overflow: visible;
}

.chakra__frame { fill: none; stroke: url(#chakraGrad); stroke-width: 0.6; }
.chakra__inner { fill: none; stroke: var(--border, #2a2a3a); stroke-width: 0.45; }

/* =============================================================================
   Hero
   ========================================================================== */

/* The two hero columns were top-aligned, so the tall chart left a block of
   dead space beside the heading. Centring them removes it without changing
   either column. */
.hero__grid,
.section:first-of-type .grid-2 {
    align-items: center;
}

/* The live-sky panel sat as tall as the chart plus the whole planet table,
   pushing the fold well past the first screen. Capping it and letting the
   table scroll keeps the call to action visible. */
.sky-panel .table-scroll,
.section:first-of-type .card .table-scroll {
    max-height: 320px;
    overflow-y: auto;
}

/* =============================================================================
   Tables
   ========================================================================== */

/* Sign names were inheriting the monospace face from the numeric column rule
   and reading like code. Only the degree column should be monospaced. */
.table td { font-family: inherit; }

.table td.num,
.table td:last-child,
.figure {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* Devanagari must never be monospaced — the Devanagari coverage in monospace
   fonts is poor to non-existent, and the browser silently substitutes a face
   with different metrics, which is where broken-looking matras come from. */
[lang="hi"] .table td,
:lang(hi) .table td {
    font-family: var(--font-devanagari);
}

[lang="hi"] .table td.num,
[lang="hi"] .table td:last-child,
:lang(hi) .table td.num,
:lang(hi) .table td:last-child {
    font-family: var(--font-mono, ui-monospace, monospace);
}

/* =============================================================================
   Cards and boxes
   ========================================================================== */

/* Cards were padded for the old, larger type scale. */
.card  { padding: clamp(1rem, 2.2vw, 1.6rem); }
.panel { padding: clamp(0.9rem, 1.8vw, 1.3rem); }

/* A long unbroken value — a Julian Day, a long place name — was widening its
   table and forcing the whole card to scroll sideways. */
.table td, .table th { overflow-wrap: anywhere; }

/* =============================================================================
   Mobile
   ========================================================================== */

@media (max-width: 720px) {
    /* Stack the hero rather than squeezing a chart into half a phone screen. */
    .section:first-of-type .grid-2 { grid-template-columns: 1fr; }

    /* Below about 300px the two-letter labels stop being legible, so the
       chart gets a floor even if that means it is the widest thing on screen. */
    .chakra { min-width: 280px; }

    .section:first-of-type .card .table-scroll { max-height: 260px; }
}

/* =============================================================================
   Footer
   -----------------------------------------------------------------------------
   These rules were written into admin.css, which only the admin layout loads.
   On the public site the footer therefore had no styling at all and fell back
   to browser defaults: a stack of bulleted lists running down the page.
   ========================================================================== */

.footer {
    margin-top: var(--sp-8);
    padding: clamp(2.5rem, 5vw, 4rem) 0 var(--sp-5);
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.footer__grid {
    display: grid;
    gap: clamp(1.75rem, 4vw, 3rem);
    /* The identity column carries prose and gets roughly twice the width of a
       link column; the three link columns are near-equal so their headings
       line up across the row. */
    grid-template-columns: 2fr 1.15fr 1fr 1.15fr;
    align-items: start;
}

@media (max-width: 1040px) {
    /* Identity spans the full width; the three link columns share a row. */
    .footer__grid { grid-template-columns: repeat(3, 1fr); }
    .footer__brand-col { grid-column: 1 / -1; }
}

@media (max-width: 700px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .footer__grid { grid-template-columns: 1fr; } }

/* Prose in the footer needs a measure like prose anywhere else. */
.footer__blurb {
    font-size: var(--step--1);
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 34ch;
    margin: var(--sp-3) 0 0;
}

.footer__install { margin-top: var(--sp-4); }
.footer__more    { color: var(--accent) !important; font-weight: 600; }
.footer__col     { min-width: 0; }

.footer__heading {
    font-size: var(--step--2);
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-weight: 700;
    color: var(--text-faint);
    margin: 0 0 var(--sp-3);
}

/* The list-style reset is the whole reason the footer looked unfinished —
   without it the browser draws bullets and an indent. */
.footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__list li { margin-bottom: .55rem; }

.footer__list a {
    font-size: var(--step--1);
    color: var(--text-muted);
    text-decoration: none;
    transition: color var(--t-fast, .15s);
    display: inline-block;
}

.footer__list a:hover,
.footer__list a:focus-visible { color: var(--accent); }

.footer .brand { margin-bottom: var(--sp-3); }

.footer__note {
    margin-top: clamp(2rem, 4vw, 3rem);
    padding: var(--sp-4);
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
}

.footer__note p { max-width: none; }

.footer__bar {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
}

.footer__bar p { max-width: none; margin: 0; }

/* Headings share a baseline across all four columns, so the row reads as a
   row rather than four stacks that happen to be adjacent. */
.footer__heading { min-height: 1.2em; }

.footer__bar p, .footer__note p { font-size: var(--step--2); line-height: 1.7; }
.footer__bar a { color: var(--accent); text-decoration: none; }
.footer__bar a:hover { text-decoration: underline; }