/* ══════════════════════════════════════════════════════════════════════════
   TALLAPATRA — BASE LAYER
   Fonts, reset, global interaction states, layout primitives, a11y utilities.
   Depends on tokens.css. Contains NO raw colour values.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   1. FONTS  (§18, §24)
   Self-hosted WOFF2 variable subsets — no Google Fonts CDN, preserving the
   project's no-third-party-egress guarantee. Each family ships a Telugu and a
   Latin subset covering weights 400–700 in one variable file per subset.
   ══════════════════════════════════════════════════════════════════ */
@font-face {
    font-family: "Noto Sans Telugu";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/NotoSansTelugu-telugu.woff2") format("woff2");
    unicode-range: U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}

@font-face {
    font-family: "Noto Sans Telugu";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/NotoSansTelugu-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

@font-face {
    font-family: "Noto Serif Telugu";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/NotoSerifTelugu-telugu.woff2") format("woff2");
    unicode-range: U+0951-0952, U+0964-0965, U+0C00-0C7F, U+1CDA, U+1CF2, U+200C-200D, U+25CC;
}

@font-face {
    font-family: "Noto Serif Telugu";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/fonts/NotoSerifTelugu-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+2122, U+2191, U+2193, U+2212;
}

/* ══════════════════════════════════════════════════════════════════
   2. RESET / BASE
   ══════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-padding-block-start: var(--tp-safe-top);
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    min-height: 100%;
    background-color: var(--tp-surface-page);
    background-image: var(--tp-fibre);
    color: var(--tp-text-primary);
    font-family: var(--tp-font-body);
    font-size: var(--tp-type-body-size);
    line-height: var(--tp-type-body-lh);
    font-weight: var(--tp-weight-regular);
    /* Telugu conjuncts and vowel marks must never be clipped (§4) */
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
}

/* Headings use the display serif; body/controls use sans (§4 type contract).
   Sizes come from tokens only — pages must not set their own. */
.tp-display,
.tp-h1, .tp-h2, .tp-h3 {
    font-family: var(--tp-font-display);
    color: var(--tp-text-primary);
    margin: 0;
    /* generous Telugu line-height; never a fixed height (§16 text scaling) */
    overflow-wrap: break-word;
}

.tp-display { font-size: var(--tp-type-display-size); line-height: var(--tp-type-display-lh); font-weight: var(--tp-weight-bold); }
.tp-h1      { font-size: var(--tp-type-h1-size);      line-height: var(--tp-type-h1-lh);      font-weight: var(--tp-weight-bold); }
.tp-h2      { font-size: var(--tp-type-h2-size);      line-height: var(--tp-type-h2-lh);      font-weight: var(--tp-weight-semibold); }
.tp-h3      { font-size: var(--tp-type-h3-size);      line-height: var(--tp-type-h3-lh);      font-weight: var(--tp-weight-semibold); }

.tp-body-lg { font-size: var(--tp-type-body-lg-size); line-height: var(--tp-type-body-lg-lh); }
.tp-body    { font-size: var(--tp-type-body-size);    line-height: var(--tp-type-body-lh); }
.tp-label   { font-size: var(--tp-type-label-size);   line-height: var(--tp-type-label-lh);   font-weight: var(--tp-weight-bold); }
.tp-caption { font-size: var(--tp-type-caption-size); line-height: var(--tp-type-caption-lh); }

.tp-text-secondary { color: var(--tp-text-secondary); }
.tp-text-muted     { color: var(--tp-text-muted); }

/* Tabular numerals for dates, times, balances, durations (§4) */
.tp-numeric { font-variant-numeric: tabular-nums; }

a {
    color: var(--tp-text-link);
    text-underline-offset: 0.18em;
}

a:hover { color: var(--tp-action-primary-hover); }

button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

img, svg { max-width: 100%; }

/* ══════════════════════════════════════════════════════════════════
   3. FOCUS  (§16)
   Two-tone ring: pasupu keeps the SOURCE brand identity, the ink halo carries
   the ≥3:1 contrast that pasupu alone cannot reach on leaf/card.
   See tokens.css §6 for the full rationale.
   ══════════════════════════════════════════════════════════════════ */
:focus-visible {
    outline: var(--tp-focus-ring-width) solid var(--tp-focus-ring-color);
    outline-offset: var(--tp-focus-ring-offset);
    box-shadow: 0 0 0 calc(var(--tp-focus-ring-width) + var(--tp-focus-ring-offset)) var(--tp-focus-halo-color);
    /* focus must never be clipped by an overflow/sticky ancestor (§16) */
    position: relative;
    z-index: var(--tp-z-sticky);
}

/* Remove the UA ring only where we have replaced it — never blanket-remove. */
:focus:not(:focus-visible) {
    outline: none;
}

.tp-focus-ring:focus-visible {
    outline: var(--tp-focus-ring-width) solid var(--tp-focus-ring-color);
    outline-offset: var(--tp-focus-ring-offset);
}

/* ══════════════════════════════════════════════════════════════════
   4. REDUCED MOTION  (§13)
   Motion durations already collapse to 0ms in tokens.css. This is the
   belt-and-braces sweep for anything using its own timing.
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   5. FORCED COLOURS / HIGH CONTRAST  (§16, §26)
   Do not depend on background images; keep boundaries as real borders.
   ══════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
    body {
        background-image: none;
    }

    :focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
        box-shadow: none;
    }

    .tp-card,
    .tp-notice,
    .tp-field__input,
    .tp-chart {
        border: 1px solid CanvasText;
    }

    /* selection/status must survive colour removal — these carry text or
       symbol cues in the markup, this just keeps the structure visible */
    .tp-chart__cell[aria-selected="true"],
    .tp-tab[aria-selected="true"] {
        forced-color-adjust: none;
        outline: 2px solid Highlight;
    }
}

/* ══════════════════════════════════════════════════════════════════
   6. LAYOUT PRIMITIVES  (§6)
   ══════════════════════════════════════════════════════════════════ */

/* Constrained page container — the standard content width. */
.tp-container {
    width: 100%;
    max-width: var(--tp-layout-max);
    margin-inline: auto;
    padding-inline-start: max(var(--tp-layout-gutter), var(--tp-safe-left));
    padding-inline-end: max(var(--tp-layout-gutter), var(--tp-safe-right));
}

.tp-container--wide    { max-width: var(--tp-layout-wide); }

/* Narrow measure for long-form report text (45–75 chars, §4). */
.tp-reading {
    width: 100%;
    max-width: var(--tp-layout-reading);
    margin-inline: auto;
    min-width: 0;
}

/* Vertical rhythm primitive. Use instead of ad-hoc margins. */
.tp-stack        { display: flex; flex-direction: column; gap: var(--tp-space-stack); min-width: 0; }
.tp-stack--tight { gap: var(--tp-space-2); }
.tp-stack--snug  { gap: var(--tp-space-3); }
.tp-stack--loose { gap: var(--tp-space-5); }
.tp-stack--section { gap: var(--tp-space-4); }

/* Horizontal grouping that wraps rather than overflowing (Telugu expansion). */
.tp-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tp-space-2);
    min-width: 0;
}

.tp-inline > * { min-width: 0; max-width: 100%; }

.tp-inline--between { justify-content: space-between; }

/* Canonical responsive grid (§6): 1 / 8 / 12 columns. Every track is
   minmax(0, 1fr), so long Telugu text cannot force a section wider than its
   shared page container. */
.tp-grid {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(var(--tp-grid-columns), minmax(0, 1fr));
    column-gap: var(--tp-grid-column-gap);
    row-gap: var(--tp-grid-row-gap);
    align-items: stretch;
    justify-items: stretch;
    grid-auto-flow: row;
    min-width: 0;
}

.tp-grid > * { min-width: 0; }
.tp-grid--align-start { align-items: start; }

/* Tablet spans preserve useful card widths on the 8-column grid. Small spans
   remain quarter-width, common content cards become half-width, and side-panel
   layouts stack until the desktop grid is available. */
@media (min-width: 768px) and (max-width: 1023.98px) {
    .tp-col-1, .tp-col-2, .tp-col-3 { grid-column: span 2; }
    .tp-col-4, .tp-col-5, .tp-col-6 { grid-column: span 4; }
    .tp-col-7, .tp-col-8, .tp-col-9,
    .tp-col-10, .tp-col-11, .tp-col-12 { grid-column: span 8; }
    .tp-col-tablet-full { grid-column: 1 / -1; }
}

/* Desktop spans map directly to the canonical 12-column grid. */
@media (min-width: 1024px) {
    .tp-col-1  { grid-column: span 1; }
    .tp-col-2  { grid-column: span 2; }
    .tp-col-3  { grid-column: span 3; }
    .tp-col-4  { grid-column: span 4; }
    .tp-col-5  { grid-column: span 5; }
    .tp-col-6  { grid-column: span 6; }
    .tp-col-7  { grid-column: span 7; }
    .tp-col-8  { grid-column: span 8; }
    .tp-col-9  { grid-column: span 9; }
    .tp-col-10 { grid-column: span 10; }
    .tp-col-11 { grid-column: span 11; }
    .tp-col-12 { grid-column: span 12; }
}

/* Page section spacing. Global uniform section margin. */
.tp-section { margin-block: var(--tp-space-section); }

/* Global uniform grid gutter enforcement across all Bootstrap rows */
.row {
    --bs-gutter-x: 1rem;
    --bs-gutter-y: 1rem;
    row-gap: 0;
}

/* Surface primitive — the flat, border-led Tallapatra card. */
.tp-surface {
    background: var(--tp-surface-card);
    border: var(--tp-border-subtle);
    border-radius: var(--tp-radius-md);
    box-shadow: var(--tp-elevation-0);
}

.tp-surface--sunken   { background: var(--tp-surface-sunken); }
.tp-surface--inverse  { background: var(--tp-surface-inverse); color: var(--tp-text-inverse); border-color: var(--tp-border-color-strong); }
.tp-surface--elevated { background: var(--tp-surface-elevated); box-shadow: var(--tp-elevation-1); }

/* ══════════════════════════════════════════════════════════════════
   7. ACCESSIBILITY UTILITIES  (§16)
   ══════════════════════════════════════════════════════════════════ */

/* Screen-reader-only, but focusable variants stay reachable. */
.tp-visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Skip link — visible on focus, above everything. */
.tp-skip-link {
    position: absolute;
    inset-inline-start: var(--tp-space-3);
    inset-block-start: calc(var(--tp-safe-top) + var(--tp-space-3));
    z-index: var(--tp-z-critical);
    transform: translateY(-200%);
    background: var(--tp-surface-card);
    color: var(--tp-text-primary);
    border: var(--tp-border-strong);
    border-radius: var(--tp-radius-sm);
    padding: var(--tp-space-3) var(--tp-space-4);
    font-weight: var(--tp-weight-bold);
    text-decoration: none;
    transition: transform var(--tp-motion-fast) var(--tp-ease);
}

.tp-skip-link:focus-visible {
    transform: translateY(0);
}

/* Every interactive control must meet the 44×44 minimum target (§16).
   Use on small/icon controls whose visual box is deliberately smaller. */
.tp-target {
    position: relative;
    min-width: var(--tp-target-min);
    min-height: var(--tp-target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Expands the hit area of a small control without changing its visual size. */
.tp-target-expand::after {
    content: "";
    position: absolute;
    inset: 50% 50% 50% 50%;
    width: var(--tp-target-min);
    height: var(--tp-target-min);
    transform: translate(-50%, -50%);
}

/* Safe-area padding for sticky footers / action bars (§23). */
.tp-safe-bottom { padding-bottom: calc(var(--tp-space-4) + var(--tp-safe-bottom)); }

/* Contained horizontal scroller — the ONLY sanctioned horizontal scroll (§7). */
.tp-scroll-x {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* ══════════════════════════════════════════════════════════════════
   8. PRINT  (§20, §23) — monochrome-safe, no nav or commercial controls
   ══════════════════════════════════════════════════════════════════ */
@media print {
    body {
        background: var(--tp-print-paper);
        background-image: none;
        color: var(--tp-print-ink);
    }

    .tp-no-print,
    .tp-skip-link {
        display: none !important;
    }

    .tp-surface,
    .tp-card {
        border: 1px solid var(--tp-print-ink);
        box-shadow: none;
    }
}