@font-face {
    font-family: "Manrope";
    src: url("../fonts/Manrope-Variable.ttf") format("truetype-variations");
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans Malayalam";
    src: url("../fonts/NotoSansMalayalam-Variable.ttf") format("truetype-variations");
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 62.5% 100%;
    font-display: swap;
}

@font-face {
    font-family: "Noto Sans Tamil";
    src: url("../fonts/NotoSansTamil-Variable.ttf") format("truetype-variations");
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 62.5% 100%;
    font-display: swap;
}

/* ========================================================================== 
   Better Luck Next Time — Kerala Lottery Data & Analysis Platform
   ==========================================================================

   Layered over Bootstrap 5.3. The tone is deliberately calm: this is a data
   product about a subject that preys on excitement, so there is no gold, no
   confetti, no urgency, nothing that flashes. Confidence comes from spacing,
   typography and restraint rather than decoration.

   Contents
     1. Tokens          colour, type, space, elevation, motion
     2. Theming         light, dark, manual override
     3. Base            resets, typography, focus
     4. Layout          shell, containers, section rhythm
     5. Header & nav    desktop bar, mobile drawer, bottom tab bar
     6. Surfaces        cards, panels, stat tiles
     7. Data            tables, ticket numbers, badges, charts
     8. Forms           inputs, selects, buttons, chips
     9. Content         hero, prose, alerts, empty states
    10. Footer
    11. Utilities & motion
   ========================================================================== */

/* ------------------------------------------------------------------ 1. tokens
   One ramp per hue. Everything downstream references these, so a rebrand is a
   change in this block and nowhere else. */

:root {
    /* Brand — Kerala green, deepened so it reads as considered rather than
       agricultural, with a teal accent for interactive elements. */
    --c-brand-50:  #ecfdf5;
    --c-brand-100: #d1fae5;
    --c-brand-200: #a7f3d0;
    --c-brand-300: #6ee7b7;
    --c-brand-400: #34d399;
    --c-brand-500: #10b981;
    --c-brand-600: #059669;
    --c-brand-700: #047857;
    --c-brand-800: #065f46;
    --c-brand-900: #064e3b;
    --c-brand-950: #022c22;

    --c-accent-400: #38bdf8;
    --c-accent-500: #0ea5e9;
    --c-accent-600: #0284c7;
    --c-accent-700: #0369a1;

    /* Neutrals — very slightly green-shifted so they sit with the brand. */
    --c-n-0:   #ffffff;
    --c-n-25:  #fbfdfc;
    --c-n-50:  #f6f9f8;
    --c-n-100: #eef2f1;
    --c-n-200: #e2e8e6;
    --c-n-300: #cbd5d2;
    --c-n-400: #94a3a0;
    --c-n-500: #64748b;
    --c-n-600: #4b5563;
    --c-n-700: #374151;
    --c-n-800: #1f2937;
    --c-n-900: #111827;
    --c-n-950: #0a0f16;

    --c-amber-400: #fbbf24;
    --c-amber-500: #f59e0b;
    --c-amber-700: #b45309;
    --c-rose-500:  #f43f5e;
    --c-rose-600:  #e11d48;
    --c-violet-500: #8b5cf6;

    /* Type. Indic faces are named first for their own scripts so Malayalam and
       Tamil do not fall back to a face with no conjunct support. */
    --font-sans: "Manrope", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-ml: "Noto Sans Malayalam", "Manjari", "Meera", "AnjaliOldLipi",
               "Chilanka", var(--font-sans);
    --font-ta: "Noto Sans Tamil", "Latha", "Nirmala UI", "InaiMathi",
               var(--font-sans);
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
                 Menlo, Consolas, "Liberation Mono", monospace;

    /* Fluid scale: comfortable on a 360px phone, generous on a desktop. */
    --fs-xs:   0.775rem;
    --fs-sm:   0.875rem;
    --fs-base: 1rem;
    --fs-md:   1rem;
    --fs-lg:   clamp(1.0625rem, 0.98rem + 0.4vw, 1.1875rem);
    --fs-xl:   clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    --fs-2xl:  clamp(1.5rem, 1.28rem + 1.05vw, 2rem);
    --fs-3xl:  clamp(1.875rem, 1.5rem + 1.7vw, 2.75rem);
    --fs-4xl:  clamp(2.25rem, 1.6rem + 2.9vw, 3.75rem);

    --lh-tight: 1.15;
    --lh-snug: 1.35;
    --lh-normal: 1.6;
    --lh-relaxed: 1.75;

    --tracking-tight: -0.02em;
    --tracking-wide: 0.04em;
    --tracking-caps: 0.08em;

    /* Space — a 4px base, named by use rather than by number. */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --sp-7: 3rem;
    --sp-8: 4rem;
    --sp-9: 6rem;

    --radius-sm: 0.5rem;
    --radius: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 999px;

    --dur-fast: 120ms;
    --dur: 200ms;
    --dur-slow: 380ms;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    --header-h: 4rem;
    --tabbar-h: 4.25rem;
    --container-max: 78rem;
}

/* ----------------------------------------------------------------- 2. theming
   Semantic names only below this point. Light is the default; dark comes from
   the OS, and either can be forced with data-theme on <html>. */

:root,
:root[data-theme="light"] {
    color-scheme: light;

    --bg: var(--c-n-50);
    --bg-subtle: var(--c-n-100);
    --surface: var(--c-n-0);
    --surface-raised: var(--c-n-0);
    --surface-sunken: var(--c-n-50);
    --surface-hover: var(--c-n-50);

    --text: var(--c-n-900);
    --text-secondary: var(--c-n-600);
    --text-muted: var(--c-n-500);
    --text-inverse: var(--c-n-0);

    --border: var(--c-n-200);
    --border-strong: var(--c-n-300);

    --brand: var(--c-brand-700);
    --brand-hover: var(--c-brand-800);
    --brand-soft: var(--c-brand-50);
    --brand-soft-text: var(--c-brand-800);
    --on-brand: #ffffff;

    --accent: var(--c-accent-600);
    --accent-soft: #e0f2fe;

    --warn: var(--c-amber-700);
    --warn-soft: #fffbeb;
    --warn-border: #fde68a;

    --danger: var(--c-rose-600);
    --danger-soft: #fff1f2;

    --header-bg: rgba(255, 255, 255, 0.82);
    --header-border: rgba(15, 23, 42, 0.08);

    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow: 0 4px 12px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.10), 0 2px 8px rgba(15, 23, 42, 0.05);
    --shadow-brand: 0 8px 24px rgba(4, 120, 87, 0.18);

    --chart-grid: rgba(100, 116, 139, 0.14);
    --chart-text: #4b5563;
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --bg: #080c11;
        --bg-subtle: #0d131a;
        --surface: #111820;
        --surface-raised: #16202a;
        --surface-sunken: #0b1117;
        --surface-hover: #1a242f;

        --text: #e8edf2;
        --text-secondary: #a5b3c2;
        --text-muted: #7d8b9a;
        --text-inverse: #0a0f16;

        --border: #243040;
        --border-strong: #33445a;

        --brand: var(--c-brand-400);
        --brand-hover: var(--c-brand-300);
        --brand-soft: rgba(16, 185, 129, 0.12);
        --brand-soft-text: var(--c-brand-300);
        --on-brand: #04231a;

        --accent: var(--c-accent-400);
        --accent-soft: rgba(56, 189, 248, 0.12);

        --warn: var(--c-amber-400);
        --warn-soft: rgba(245, 158, 11, 0.10);
        --warn-border: rgba(245, 158, 11, 0.28);

        --danger: #fb7185;
        --danger-soft: rgba(244, 63, 94, 0.10);

        --header-bg: rgba(13, 19, 26, 0.82);
        --header-border: rgba(255, 255, 255, 0.07);

        --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
        --shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
        --shadow-brand: 0 8px 24px rgba(0, 0, 0, 0.5);

        --chart-grid: rgba(148, 163, 184, 0.13);
        --chart-text: #a5b3c2;
    }
}

/* The toggle must beat the media query in both directions. */
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #080c11;
    --bg-subtle: #0d131a;
    --surface: #111820;
    --surface-raised: #16202a;
    --surface-sunken: #0b1117;
    --surface-hover: #1a242f;

    --text: #e8edf2;
    --text-secondary: #a5b3c2;
    --text-muted: #7d8b9a;
    --text-inverse: #0a0f16;

    --border: #243040;
    --border-strong: #33445a;

    --brand: var(--c-brand-400);
    --brand-hover: var(--c-brand-300);
    --brand-soft: rgba(16, 185, 129, 0.12);
    --brand-soft-text: var(--c-brand-300);
    --on-brand: #04231a;

    --accent: var(--c-accent-400);
    --accent-soft: rgba(56, 189, 248, 0.12);

    --warn: var(--c-amber-400);
    --warn-soft: rgba(245, 158, 11, 0.10);
    --warn-border: rgba(245, 158, 11, 0.28);

    --danger: #fb7185;
    --danger-soft: rgba(244, 63, 94, 0.10);

    --header-bg: rgba(13, 19, 26, 0.82);
    --header-border: rgba(255, 255, 255, 0.07);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
    --shadow-brand: 0 8px 24px rgba(0, 0, 0, 0.5);

    --chart-grid: rgba(148, 163, 184, 0.13);
    --chart-text: #a5b3c2;
}

/* Hand the palette to Bootstrap so its own components inherit the theme
   instead of fighting it. */
:root {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: var(--fs-base);
    --bs-border-color: var(--border);
    --bs-primary: var(--brand);
    --bs-link-color: var(--brand);
    --bs-link-hover-color: var(--brand-hover);
    --bs-secondary-color: var(--text-secondary);
    --bs-emphasis-color: var(--text);
}

/* -------------------------------------------------------------------- 3. base */

*,
*::before,
*::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
    margin: 0;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    overflow-x: hidden;
}

/* Malayalam and Tamil need their own faces and a touch more line height —
   their conjuncts are taller than Latin at the same size. */
html[lang="ml"] body {
    font-family: var(--font-ml);
    line-height: 1.72;
    font-feature-settings: normal;
}

html[lang="ta"] body {
    font-family: var(--font-ta);
    line-height: 1.68;
    font-feature-settings: normal;
}
html[lang="ml"] h1, html[lang="ml"] h2, html[lang="ml"] h3,
html[lang="ta"] h1, html[lang="ta"] h2, html[lang="ta"] h3 {
    line-height: 1.42;
    letter-spacing: 0;
}

html[lang="ml"] .eyebrow,
html[lang="ta"] .eyebrow,
html[lang="ml"] .stat__label,
html[lang="ta"] .stat__label,
html[lang="ml"] .table > thead > tr > th,
html[lang="ta"] .table > thead > tr > th {
    letter-spacing: 0;
    text-transform: none;
}

/* A heading that now stacks over two or three lines needs tighter leading than
   the 1.7 the body copy wants - and `break-word`, because a Malayalam compound
   often has no space in it to break at. */
html[lang="ml"] .table > thead > tr > th,
html[lang="ta"] .table > thead > tr > th {
    line-height: 1.35;
}

/* Long labels in a data cell wrap too, rather than holding a column open.
   Malayalam and Tamil need `anywhere` and not `break-word`: a compound like
   "വലതുവശത്തുനിന്നുള്ള" is nineteen characters with no space to break at, and
   only `anywhere` lets the column narrow past its longest word.

   The numeric columns are excluded below - a figure broken across two lines
   reads as a different figure. */
html[lang="ml"] .table > tbody > tr > td,
html[lang="ta"] .table > tbody > tr > td {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--sp-3);
    font-weight: 650;
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text);
    text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-3xl); }
h2, .h2 { font-size: var(--fs-2xl); }
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5 { font-size: var(--fs-md); }
h6, .h6 { font-size: var(--fs-base); font-weight: 600; }

p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--brand-hover); }

hr {
    border: 0;
    border-top: 1px solid var(--border);
    opacity: 1;
    margin: var(--sp-5) 0;
}

small, .small { font-size: var(--fs-sm); }

code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }

::selection { background: var(--brand-soft); color: var(--brand-soft-text); }

/* One visible focus ring everywhere, keyboard only. */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.skip-link {
    position: absolute;
    top: var(--sp-2);
    left: var(--sp-2);
    z-index: 2000;
    padding: var(--sp-2) var(--sp-4);
    background: var(--brand);
    color: var(--on-brand);
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
}

/* ------------------------------------------------------------------ 4. layout */

.container,
.container-fluid,
.container-lg,
.container-xl {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--sp-4);
}

@media (min-width: 768px) {
    .container, .container-lg, .container-xl { padding-inline: var(--sp-5); }
}

.section { padding-block: var(--sp-6); }
.section-lg { padding-block: var(--sp-7); }

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.section-head h2,
.section-head h1 { margin-bottom: 0; }

.section-head .section-sub {
    margin: var(--sp-1) 0 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.page-head { margin-bottom: var(--sp-5); }
.page-head h1 { margin-bottom: var(--sp-2); }
.page-head .lede {
    max-width: 62ch;
    color: var(--text-secondary);
    font-size: var(--fs-md);
    margin-bottom: 0;
}

.page-head--featured {
    max-width: 52rem;
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 95% 0, rgba(16, 185, 129, 0.13), transparent 38%),
        var(--surface);
    box-shadow: var(--shadow-sm);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--brand);
    margin-bottom: var(--sp-2);
}

/* --------------------------------------------------------- 5. header and nav */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    height: var(--header-h);
}

/* Brand ------------------------------------------------------------------- */

.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-3);
    text-decoration: none;
    color: var(--text);
    flex-shrink: 1;
    min-width: 0;
}

.brand:hover { color: var(--text); }

.brand__mark {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-brand);
    flex-shrink: 0;
    overflow: hidden;
}

.brand__mark img { display: block; width: 100%; height: 100%; }

/* Sign-in ----------------------------------------------------------------
   One card on an empty page. Nobody arrives here to browse, so the screen
   does one thing: make the two fields obvious and everything else quiet. */

.auth-body {
    min-height: 100vh;
    padding-bottom: 0 !important;
    background:
        radial-gradient(circle at 10% 0%, var(--brand-soft) 0, transparent 34rem),
        radial-gradient(circle at 100% 100%, var(--accent-soft) 0, transparent 30rem),
        var(--bg);
}

.auth-main {
    display: grid;
    min-height: 100vh;
    padding: clamp(2rem, 7vh, 5rem) var(--sp-4);
    place-items: center;
}

.auth-shell { width: min(100%, 28rem); }

.auth-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
    color: var(--text);
    text-decoration: none;
}

.auth-brand:hover { color: var(--text); }

.auth-logo {
    display: block;
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    box-shadow: var(--shadow-brand);
}

.auth-brand__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.auth-brand__name {
    max-width: 20rem;
    overflow: hidden;
    font-size: var(--fs-lg);
    font-weight: 750;
    letter-spacing: var(--tracking-tight);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.auth-brand__section {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

/* Card -------------------------------------------------------------------- */

.auth-card {
    border-color: color-mix(in srgb, var(--border) 76%, var(--brand));
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

/* A brand hairline along the top edge, so the card is identifiably ours
   without putting colour anywhere it would compete with the fields. A
   pseudo-element, because .card sets the background with the shorthand and
   would drop a background-image declared here. The card already clips. */
.auth-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--c-brand-600), var(--c-accent-500));
}

.auth-card__body { padding: clamp(1.5rem, 5vw, 2.25rem); }

.auth-card__heading { margin-bottom: var(--sp-3); }

.auth-card__heading h1 {
    margin: var(--sp-3) 0 0;
    font-size: var(--fs-2xl);
    font-weight: 750;
    letter-spacing: var(--tracking-tight);
}

.auth-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-full);
    background: var(--brand-soft);
    color: var(--brand-soft-text);
    font-size: var(--fs-xs);
    font-weight: 750;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
}

.auth-card__eyebrow svg {
    width: 0.8rem;
    height: 0.8rem;
    flex-shrink: 0;
}

.auth-card__intro {
    margin-bottom: var(--sp-5);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

/* Fields ------------------------------------------------------------------ */

.auth-field { margin-bottom: var(--sp-4); }
.auth-field:last-of-type { margin-bottom: var(--sp-5); }

.auth-field__label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-3);
}

.auth-field__label .form-label { margin-bottom: var(--sp-2); }

.auth-input {
    position: relative;
    display: flex;
    align-items: center;
}

.auth-card .form-control-lg {
    min-height: 3.25rem;
    font-size: var(--fs-base);
}

/* Room for the reveal button, so a long password never slides under it. */
.auth-input .form-control { padding-right: 3.25rem; }

.auth-reveal {
    position: absolute;
    right: 0.375rem;
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.auth-reveal:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.auth-reveal:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    color: var(--text);
}

.auth-reveal svg {
    width: 1.15rem;
    height: 1.15rem;
    pointer-events: none;
}

/* Only one of the two glyphs is ever drawn. */
.auth-reveal .auth-reveal__off { display: none; }
.auth-reveal[aria-pressed="true"] .auth-reveal__on { display: none; }
.auth-reveal[aria-pressed="true"] .auth-reveal__off { display: block; }

/* Bootstrap paints a warning glyph inside an invalid field, which lands
   underneath the reveal button. The border and ring say it instead. */
.auth-card .form-control.is-invalid {
    padding-right: 3.25rem;
    border-color: var(--danger);
    background-image: none;
}

.auth-card .form-control.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-soft);
}

.auth-card .invalid-feedback {
    display: block;
    margin-top: var(--sp-2);
    color: var(--danger);
    font-size: var(--fs-xs);
    font-weight: 550;
}

.auth-hint {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: var(--sp-2);
    color: var(--warn);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* Browsers repaint autofilled fields in their own colours, which reads as a
   broken form in dark mode. An inset shadow is the only way to override it. */
.auth-card .form-control:-webkit-autofill,
.auth-card .form-control:-webkit-autofill:hover,
.auth-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 100px var(--surface) inset;
    caret-color: var(--text);
    transition: background-color 100000s ease 0s;
}

.auth-card .btn-lg {
    min-height: 3.25rem;
    font-weight: 650;
}

.auth-card .btn-lg:active { transform: translateY(1px); }

.auth-card .btn:disabled,
.auth-card .form-control:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Notices ----------------------------------------------------------------- */

.auth-notice {
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
}

.auth-notice h2 {
    margin: 0 0 var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 700;
}

.auth-notice p {
    margin: 0 0 var(--sp-3);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.auth-notice pre {
    margin: 0;
    padding: var(--sp-3);
    overflow-x: auto;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
}

/* The throttled state: the form stays visible but plainly out of reach. */
.auth-lock {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
    padding: var(--sp-4);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius);
    background: var(--warn-soft);
    color: var(--text);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.auth-lock svg {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
    color: var(--warn);
}

.auth-lock strong { font-variant-numeric: tabular-nums; }

.auth-back {
    margin-top: var(--sp-5);
    text-align: center;
}

.auth-back a {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 550;
    text-decoration: none;
}

.auth-back a:hover { color: var(--brand); }

@media (max-width: 575.98px) {
    .auth-main {
        align-items: start;
        padding-top: max(2rem, env(safe-area-inset-top));
    }

    .auth-brand {
        justify-content: flex-start;
        margin-bottom: var(--sp-5);
    }

    .auth-logo {
        width: 3.5rem;
        height: 3.5rem;
        border-radius: var(--radius-lg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .auth-card .btn-lg:active { transform: none; }
}

.brand__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
    max-width: 22rem;
}

.brand__name {
    font-size: var(--fs-md);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.brand__slogan {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Desktop nav ------------------------------------------------------------- */

.nav-primary {
    display: none;
    align-items: center;
    gap: var(--sp-1);
    margin-left: auto;
    flex-shrink: 1;
    min-width: 0;
}

@media (min-width: 992px) {
    .nav-primary { display: flex; }
}

.nav-primary__link {
    position: relative;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 550;
    text-decoration: none;
    text-align: center;
    white-space: normal;
    line-height: 1.15;
    max-width: 8.5rem;
    overflow-wrap: anywhere;
    word-break: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.25rem;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.nav-primary__link:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.nav-primary__link.is-active {
    color: var(--brand);
    background: var(--brand-soft);
}

html[lang="ml"] .nav-primary__link,
html[lang="ta"] .nav-primary__link {
    font-size: 0.8125rem;
    line-height: 1.15;
    max-width: 7.5rem;
    padding: 0.2rem 0.45rem;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .brand__text { max-width: 14rem; }
    .nav-primary__link {
        font-size: 0.775rem;
        max-width: 6.75rem;
        padding: 0.2rem 0.35rem;
    }
    html[lang="ml"] .nav-primary__link,
    html[lang="ta"] .nav-primary__link {
        font-size: 0.75rem;
        max-width: 6rem;
        padding: 0.15rem 0.3rem;
    }
}

/* Header actions ---------------------------------------------------------- */

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: 0;
    flex-shrink: 0;
}

@media (min-width: 992px) {
    .header-actions { margin-left: var(--sp-1); }
}

.icon-btn {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.icon-btn:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.icon-btn svg { width: 1.05rem; height: 1.05rem; }

/* Language switcher ------------------------------------------------------- */

.lang-switch { position: relative; }

.lang-switch__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    height: 2.25rem;
    padding: 0 var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 550;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}

.lang-switch__toggle:hover {
    color: var(--text);
    border-color: var(--border-strong);
}

.lang-switch__toggle svg {
    width: 1.05rem;
    height: 1.05rem;
    flex-shrink: 0;
}

.lang-switch__current { max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.lang-switch__menu {
    position: absolute;
    top: calc(100% + var(--sp-2));
    right: 0;
    z-index: 1040;
    min-width: 11rem;
    padding: var(--sp-1);
    background: var(--surface-raised);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    list-style: none;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.35rem);
    transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

.lang-switch.is-open .lang-switch__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-switch__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-sm);
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease);
}

.lang-switch__item:hover { background: var(--surface-hover); color: var(--text); }
.lang-switch__item.is-active { color: var(--brand); font-weight: 600; }
.lang-switch__native { font-size: var(--fs-xs); color: var(--text-muted); }
.lang-switch__item.is-active .lang-switch__native { color: var(--brand); }

@media (max-width: 575.98px) {
    .site-header__inner { gap: var(--sp-2); }

    .brand {
        min-width: 0;
        flex: 1 1 auto;
        gap: var(--sp-2);
    }

    .brand__text { overflow: hidden; }

    .brand__name {
        overflow: hidden;
        font-size: var(--fs-sm);
        text-overflow: ellipsis;
    }

    .brand__slogan {
        display: block;
        font-size: 0.625rem;
    }

    .header-actions {
        flex: 0 0 auto;
        gap: var(--sp-1);
    }

    .lang-switch__toggle {
        justify-content: center;
        width: 2.25rem;
        padding: 0;
    }
}

/* Mobile drawer ----------------------------------------------------------- */

.nav-toggle { display: grid; }
@media (min-width: 992px) { .nav-toggle { display: none; } }

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(8, 12, 17, 0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--dur) var(--ease), visibility var(--dur);
}

.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1060;
    width: min(20rem, 86vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-left: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.drawer.is-open { transform: translateX(0); }

.drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.drawer__body { padding: var(--sp-3); }

.drawer__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-weight: 550;
    text-decoration: none;
    transition: background-color var(--dur-fast) var(--ease);
}

.drawer__link:hover { background: var(--surface-hover); color: var(--text); }
.drawer__link.is-active { background: var(--brand-soft); color: var(--brand); }

.drawer__section-title {
    padding: var(--sp-3) var(--sp-3) var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Bottom tab bar — phones only. The five things people actually came for. */

.tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1020;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    width: 100%;
    max-width: 100vw;
    background: var(--header-bg);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--header-border);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: border-box;
}

@media (min-width: 992px) { .tabbar { display: none; } }

.tabbar__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-height: var(--tabbar-h);
    padding: var(--sp-1) 0.15rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 550;
    line-height: 1.15;
    text-align: center;
    text-decoration: none;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    transition: color var(--dur-fast) var(--ease);
}

.tabbar__link svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.tabbar__link.is-active { color: var(--brand); }

.tabbar__label {
    max-width: 100%;
    width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-align: center;
    line-height: 1.15;
}

@media (max-width: 575.98px) {
    .site-header__inner { gap: var(--sp-2); }
    .brand { min-width: 0; gap: var(--sp-2); }
    .brand__text { max-width: min(11rem, 46vw); }
    .brand__name {
        overflow: hidden;
        font-size: var(--fs-sm);
        text-overflow: ellipsis;
    }
    .header-actions { gap: var(--sp-1); }
    .lang-switch__toggle { width: 2.25rem; padding: 0; justify-content: center; }

    html[lang="ml"] { --tabbar-h: 4.85rem; }
    html[lang="ta"] { --tabbar-h: 4.75rem; }

    html[lang="ml"] body { font-size: 1.025rem; }
    html[lang="ml"] .tabbar__link,
    html[lang="ta"] .tabbar__link {
        font-size: 0.625rem;
        line-height: 1.12;
        padding: 0.25rem 0.1rem;
    }

    html[lang="ml"] .tabbar__label,
    html[lang="ta"] .tabbar__label {
        font-size: 0.625rem;
        line-height: 1.12;
        letter-spacing: -0.01em;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        white-space: normal;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* Clear the bar so it never covers the last row of content. */
@media (max-width: 991.98px) {
    body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
}

/* ---------------------------------------------------------------- 6. surfaces */

.card,
.panel {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}

.card { --bs-card-bg: var(--surface); --bs-card-border-color: var(--border); }

.card-header,
.panel__head {
    padding: var(--sp-4) var(--sp-5);
    background: transparent;
    border-bottom: 1px solid var(--border);
}

.card-header h2,
.card-header h3,
.panel__head h2,
.panel__head h3 { margin-bottom: 0; }

.card-body, .panel__body { padding: var(--sp-5); }

.card-footer, .panel__foot {
    padding: var(--sp-3) var(--sp-5);
    background: var(--surface-sunken);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

@media (max-width: 575.98px) {
    .card-header, .card-body, .panel__head, .panel__body { padding: var(--sp-4); }
    .card-footer, .panel__foot { padding: var(--sp-3) var(--sp-4); }
}

/* A card that is a link to somewhere else. */
.card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
}

.card-link:hover {
    color: inherit;
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--border-strong);
}

.card-link:active { transform: translateY(0); }

/* Stat tiles -------------------------------------------------------------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--sp-3);
}

.stat {
    position: relative;
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* A hairline of brand colour, enough to make a row of tiles feel deliberate. */
.stat::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--c-brand-400), var(--c-brand-700));
    opacity: 0.8;
}

.stat--accent::before { background: linear-gradient(180deg, var(--c-accent-400), var(--c-accent-700)); }
.stat--warn::before { background: linear-gradient(180deg, var(--c-amber-400), var(--c-amber-700)); }
.stat--muted::before { background: var(--border-strong); }

.stat__label {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.stat__value {
    display: block;
    font-size: var(--fs-2xl);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: var(--tracking-tight);
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.stat__meta {
    display: block;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

/* Legacy class names kept so any view not yet migrated still looks right. */
.stat-card { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.stat-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted); }
.stat-value { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); }
.stat-meta { font-size: var(--fs-xs); color: var(--text-muted); }

/* -------------------------------------------------------------------- 7. data */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--text);
    --bs-table-border-color: var(--border);
    margin-bottom: 0;
    font-size: var(--fs-sm);
}

/* `white-space: nowrap` here was a promise that every column could be as wide
   as its own heading, and on a phone that promise is what pushed these tables
   past the card and into a sideways drag - 20 of the 68 analytics tables in
   Malayalam and Tamil, one of them 462px wider than the screen.

   Malayalam feels it worst: "Expected by chance" is 33 characters there, and
   Tamil 28, against 18 in English. But English overflowed too on a narrow
   phone, so the heading wraps in every language rather than only the two that
   made it obvious. Two or three short lines of heading cost a little height;
   a table nobody can read without dragging costs the table.

   `vertical-align: bottom` keeps a wrapped two-line heading sitting on the
   same baseline as the single-line ones beside it. */
.table > thead > tr > th {
    padding: var(--sp-3) var(--sp-4);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: bottom;
}

/* The figures themselves still hold one line. A wrapped heading is readable;
   a wrapped number is a different number. */
.table > tbody > tr > td.text-end,
.table-numeric td {
    white-space: nowrap;
}

.table > tbody > tr > td {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    color: var(--text);
}

.table > tbody > tr:last-child > td { border-bottom: 0; }

.table > tbody > tr { transition: background-color var(--dur-fast) var(--ease); }
.table > tbody > tr:hover { background: var(--surface-hover); }

.table-numeric,
.table td.text-end,
.table th.text-end { font-variant-numeric: tabular-nums; }

.table-active { background: var(--brand-soft) !important; }

.table-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

.table-sticky thead th { position: sticky; top: 0; z-index: 2; }

/* Ticket numbers ---------------------------------------------------------- */

.ticket-number {
    display: inline-block;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.9em;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

a.ticket-number { text-decoration: none; transition: all var(--dur-fast) var(--ease); }
a.ticket-number:hover { border-color: var(--brand); color: var(--brand); }

/* On a text input the class means "use the ticket typeface", not "be a chip" -
   the input needs to keep its own box, padding and full width. */
input.ticket-number,
.form-control.ticket-number {
    display: block;
    width: 100%;
    padding: 0.4rem var(--sp-3);
    background: var(--surface);
    border-radius: var(--radius-sm);
}

/* The class is a chip, so it must never land on something whose display the
   table layout depends on. Belt and braces if one slips back in. */
td.ticket-number,
th.ticket-number { display: table-cell; }

.ticket-number--lg { font-size: 1.05rem; padding: 0.3rem 0.6rem; }

.ticket-number--first {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand-soft-text);
}

/* Chips of numbers on a draw page. */
.number-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: var(--sp-2);
}

.number-chip {
    padding: var(--sp-2);
    text-align: center;
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    font-weight: 600;
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: all var(--dur-fast) var(--ease);
}

.number-chip:hover { border-color: var(--brand); color: var(--brand); }
.number-chip.is-hit { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-soft-text); }

/* Badges ------------------------------------------------------------------ */

.badge,
.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

.pill--brand { background: var(--brand-soft); color: var(--brand-soft-text); }
.pill--accent { background: var(--accent-soft); color: var(--accent); }
.pill--warn { background: var(--warn-soft); color: var(--warn); }
.pill--muted { background: var(--surface-sunken); color: var(--text-muted); border: 1px solid var(--border); }
.pill--danger { background: var(--danger-soft); color: var(--danger); }

/* Prize tiers ------------------------------------------------------------- */

.prize-tier {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
    margin-bottom: var(--sp-4);
}

.prize-tier-first {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.prize-tier-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) var(--sp-5);
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border);
}

.prize-tier-body { padding: var(--sp-4) var(--sp-5); }

.prize-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--brand);
    letter-spacing: var(--tracking-tight);
}

@media (max-width: 575.98px) {
    .prize-tier-header, .prize-tier-body { padding: var(--sp-3) var(--sp-4); }
}

/* Charts ------------------------------------------------------------------ */

.chart-container { position: relative; width: 100%; height: 20rem; }
.chart-container-sm { height: 14rem; }
.chart-container-lg { height: 26rem; }

@media (max-width: 575.98px) {
    .chart-container { height: 16rem; }
    .chart-container-lg { height: 20rem; }
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    margin-top: var(--sp-3);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.chart-legend__key {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
}

.chart-legend__swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Kerala choropleth ------------------------------------------------------- */

.kerala-map {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-4);
    align-items: start;
}

@media (min-width: 768px) {
    .kerala-map { grid-template-columns: minmax(0, 1fr) 14rem; }
}

.kerala-map__figure { position: relative; }

.kerala-map svg {
    display: block;
    width: 100%;
    height: auto;
    max-height: 34rem;
    margin-inline: auto;
    overflow: visible;
}

/* One ramp, mixed live from the brand colour, so the map re-themes for free. */
.kerala-map__district {
    --level: 0;
    fill: color-mix(in srgb, var(--brand) calc(var(--level) * 100%), var(--surface-sunken));
    stroke: var(--surface);
    stroke-width: 1.2;
    stroke-linejoin: round;
    cursor: pointer;
    transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
}

/* Browsers without color-mix() get a flat but still readable map. */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .kerala-map__district { fill: var(--surface-sunken); }
    .kerala-map__district:not(.is-empty) { fill: var(--brand-soft); }
}

.kerala-map__district.is-empty {
    fill: var(--surface-sunken);
    stroke: var(--border);
}

.kerala-map__district:hover,
.kerala-map__district:focus-visible {
    stroke: var(--text);
    stroke-width: 2;
    outline: none;
}

.kerala-map__label {
    fill: var(--text);
    font-family: var(--font-mono);
    font-size: 26px;
    font-weight: 700;
    paint-order: stroke;
    stroke: var(--surface);
    stroke-width: 5px;
    stroke-linejoin: round;
    pointer-events: none;
}

.kerala-map__readout {
    display: block;
    min-height: 1.5rem;
    margin-top: var(--sp-2);
    text-align: center;
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
}

.kerala-map__side {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.kerala-map__legend {
    padding: var(--sp-3);
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.kerala-map__legend-title {
    display: block;
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.kerala-map__ramp { display: flex; height: 0.75rem; border-radius: var(--radius-full); overflow: hidden; }

.kerala-map__swatch {
    --level: 0;
    flex: 1;
    background: color-mix(in srgb, var(--brand) calc(var(--level) * 100%), var(--surface));
}

.kerala-map__ramp-labels {
    display: flex;
    justify-content: space-between;
    margin-top: var(--sp-1);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.kerala-map__caption {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: var(--lh-normal);
}

/* A one-line bar that lives inside a table cell. */
.microbar {
    position: relative;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--surface-sunken);
    overflow: hidden;
    min-width: 3rem;
}

.microbar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-700));
}

/* ------------------------------------------------------------------- 8. forms */

.form-label {
    display: block;
    margin-bottom: var(--sp-2);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text);
}

.form-text {
    margin-top: var(--sp-2);
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.form-control,
.form-select {
    width: 100%;
    padding: 0.6rem var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: var(--fs-base);
    font-family: inherit;
    line-height: 1.5;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    appearance: none;
}

.form-control::placeholder { color: var(--text-muted); opacity: 1; }

.form-control:focus,
.form-select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
    outline: none;
    background: var(--surface);
    color: var(--text);
}

.form-select {
    padding-right: var(--sp-7);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sp-3) center;
    background-size: 1rem;
}

.form-control-lg { padding: 0.85rem var(--sp-4); font-size: var(--fs-lg); }
.form-control-sm, .form-select-sm { padding: 0.4rem var(--sp-3); font-size: var(--fs-sm); }
.form-select-sm { padding-right: var(--sp-6); }

/* iOS zooms the page when a font under 16px gets focus. */
@media (max-width: 767.98px) {
    .form-control, .form-select { font-size: 16px; }
}

.form-check-input {
    background: var(--surface);
    border-color: var(--border-strong);
}

.form-check-input:checked {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-check-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

/* Buttons ----------------------------------------------------------------- */

.btn {
    --bs-btn-border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: 0.6rem var(--sp-4);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: inherit;
    line-height: 1.5;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--dur) var(--ease);
}

.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: var(--on-brand);
    box-shadow: var(--shadow-xs);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-hover);
    border-color: var(--brand-hover);
    color: var(--on-brand);
    box-shadow: var(--shadow-sm);
}

.btn-outline-secondary,
.btn-outline-primary {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text-secondary);
}

.btn-outline-secondary:hover,
.btn-outline-primary:hover {
    background: var(--surface-hover);
    border-color: var(--border-strong);
    color: var(--text);
}

.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-outline-primary:hover { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }

.btn-light { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-light:hover { background: var(--surface-hover); color: var(--text); }

.btn-link { background: none; border: none; color: var(--brand); padding: 0; }
.btn-link:hover { color: var(--brand-hover); }

.btn-lg { padding: 0.85rem var(--sp-5); font-size: var(--fs-md); }
.btn-sm { padding: 0.4rem var(--sp-3); font-size: var(--fs-xs); }

.btn:disabled, .btn.disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* Segmented control ------------------------------------------------------- */

.segmented {
    display: inline-flex;
    padding: 0.2rem;
    background: var(--surface-sunken);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    gap: 0.2rem;
    overflow-x: auto;
    max-width: 100%;
}

.segmented__item {
    padding: 0.4rem var(--sp-3);
    border-radius: calc(var(--radius-sm) - 0.15rem);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--dur-fast) var(--ease);
}

.segmented__item:hover { color: var(--text); }

.segmented__item.is-active {
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-xs);
}

/* Disclosure --------------------------------------------------------------
   A bare <summary> reads as body text and gets missed entirely, so it is given
   a control's affordances: a border, a hover state and a chevron that turns. */

.disclosure { border-top: 1px solid var(--border); padding-top: var(--sp-3); }

.disclosure__summary {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-sunken);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: all var(--dur-fast) var(--ease);
}

/* Hide the native marker in both engines. */
.disclosure__summary::-webkit-details-marker { display: none; }
.disclosure__summary::marker { content: ""; }

.disclosure__summary:hover {
    color: var(--text);
    border-color: var(--border-strong);
    background: var(--surface-hover);
}

.disclosure__chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    transition: transform var(--dur) var(--ease);
}

.disclosure[open] > .disclosure__summary { color: var(--text); border-color: var(--border-strong); }
.disclosure[open] .disclosure__chevron { transform: rotate(90deg); }

.disclosure__body { margin-top: var(--sp-4); }

/* Search bar: icon, field and action as one control ----------------------- */

.search-bar {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.search-bar:focus-within {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}

.search-bar__icon {
    width: 1.15rem;
    height: 1.15rem;
    margin-left: var(--sp-2);
    color: var(--text-muted);
    flex-shrink: 0;
}

.search-bar .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    padding-inline: var(--sp-2);
    font-size: var(--fs-lg);
    letter-spacing: 0.06em;
}

.search-bar .form-control:focus { box-shadow: none; border: 0; }
.search-bar .btn { flex-shrink: 0; }

@media (max-width: 575.98px) {
    .search-bar { flex-wrap: wrap; }
    .search-bar .form-control { flex-basis: 100%; order: -1; font-size: 16px; }
    .search-bar__icon { display: none; }
    .search-bar .btn { width: 100%; }
}

/* "What this is / is not" ------------------------------------------------- */

.claim {
    display: flex;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid transparent;
    height: 100%;
}

.claim__icon {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    flex-shrink: 0;
    font-size: 0.9rem;
    font-weight: 700;
}

.claim__text { margin: 0; font-size: var(--fs-sm); line-height: var(--lh-normal); }

.claim--is {
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--brand) 24%, transparent);
}

.claim--is .claim__icon { background: var(--brand); color: var(--on-brand); }
.claim--is .claim__text { color: var(--brand-soft-text); }

.claim--isnot {
    background: var(--warn-soft);
    border-color: var(--warn-border);
}

.claim--isnot .claim__icon { background: var(--warn); color: #fff; }
.claim--isnot .claim__text { color: var(--text); }

@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .claim--is { border-color: var(--brand); }
}

/* Hints under the search field ------------------------------------------- */

.search-hints {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2) var(--sp-5);
    margin: var(--sp-3) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.search-hints li { display: flex; align-items: baseline; gap: var(--sp-2); }

.search-hints li::before {
    content: "";
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--brand);
    flex-shrink: 0;
}

/* Filter panel ------------------------------------------------------------ */

.filter-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
}

/* Result calendar --------------------------------------------------------- */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--sp-2);
}

.calendar-grid > * { min-width: 0; }

.calendar-cell {
    min-height: 7rem;
    padding: var(--sp-3);
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.calendar-cell.is-empty {
    background: var(--surface-sunken);
    border-style: dashed;
}

.calendar-cell .day-number {
    margin-bottom: var(--sp-2);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

.calendar-cell .draw-link {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-top: var(--sp-1);
    overflow: hidden;
    color: var(--brand);
    font-size: var(--fs-sm);
    font-weight: 650;
    line-height: var(--lh-snug);
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-cell .draw-link:hover { color: var(--brand-hover); text-decoration: underline; }

@media (max-width: 575.98px) {
    .calendar-grid { gap: var(--sp-1); }

    .calendar-cell {
        min-height: 4.5rem;
        padding: var(--sp-1);
        border-radius: var(--radius-sm);
    }

    .calendar-cell .day-number { margin-bottom: var(--sp-1); }

    .calendar-cell .draw-link {
        font-size: 0.625rem;
        letter-spacing: -0.02em;
    }
}

/* ---------------------------------------------------------------- 9. content */

/* Hero -------------------------------------------------------------------- */

.hero {
    position: relative;
    padding-block: var(--sp-7) var(--sp-6);
    overflow: hidden;
    isolation: isolate;
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(19rem, 0.88fr);
    align-items: center;
    gap: clamp(var(--sp-6), 5vw, var(--sp-9));
}

.hero__content { min-width: 0; }

/* Two soft washes of colour behind the text. Quiet, no gradient banding. */
.hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -30%;
    left: 50%;
    width: min(62rem, 130vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle at 50% 50%,
                rgba(16, 185, 129, 0.14), rgba(16, 185, 129, 0) 62%);
    pointer-events: none;
}

.hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -18%;
    right: -12%;
    width: min(34rem, 82vw);
    aspect-ratio: 1;
    background: radial-gradient(circle at 50% 50%,
                rgba(14, 165, 233, 0.10), rgba(14, 165, 233, 0) 66%);
    pointer-events: none;
}

.hero__title {
    font-size: var(--fs-4xl);
    font-weight: 750;
    letter-spacing: -0.03em;
    margin-bottom: var(--sp-4);
    max-width: 20ch;
}

.hero__lede {
    font-size: var(--fs-lg);
    color: var(--text-secondary);
    max-width: 52ch;
    margin-bottom: var(--sp-5);
}

/* The search box people came here to use. */
.hero-search {
    display: flex;
    gap: var(--sp-2);
    max-width: 34rem;
    padding: var(--sp-2);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

/* Compact, translatable visual explainer used on the home page. */
.data-story {
    position: relative;
    padding: var(--sp-5);
    border: 1px solid color-mix(in srgb, var(--brand) 24%, var(--border));
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--surface) 92%, var(--brand-soft));
    box-shadow: var(--shadow-lg);
}

.data-story::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: radial-gradient(circle, var(--border) 1px, transparent 1px);
    background-size: 18px 18px;
    opacity: 0.38;
    pointer-events: none;
}

.data-story > * { position: relative; }

.data-story__title {
    display: block;
    margin-bottom: var(--sp-4);
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.data-story__step {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--sp-3);
    align-items: center;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.data-story__icon,
.trust-flow__icon {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: var(--brand-soft);
    color: var(--brand);
}

.data-story__icon svg,
.trust-flow__icon svg { width: 1.25rem; height: 1.25rem; }

.data-story__step strong { display: block; font-size: var(--fs-sm); }
.data-story__copy,
.data-story__copy > span { display: block; color: var(--text-muted); font-size: var(--fs-xs); }

.data-story__line {
    width: 2px;
    height: var(--sp-4);
    margin-inline-start: calc(var(--sp-3) + 1.25rem);
    background: linear-gradient(var(--brand), var(--accent));
    opacity: 0.55;
}

.data-story__note {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-4) var(--sp-3) 0;
    border-top: 1px dashed var(--border-strong);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.data-story__note svg {
    width: 1rem;
    height: 1rem;
    margin-top: 0.15rem;
    justify-self: center;
    color: var(--warn);
}

/* Disclaimer infographic: the archive can describe the past, never bridge it
   to the next independent draw. */
.trust-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch;
    gap: var(--sp-3);
    margin-block: var(--sp-5) var(--sp-6);
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface-sunken);
}

.trust-flow__item {
    min-width: 0;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.trust-flow__item strong { display: block; margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-sm); }
.trust-flow__item p { color: var(--text-muted); font-size: var(--fs-xs); line-height: var(--lh-normal); }

.trust-flow__arrow {
    display: grid;
    place-items: center;
    color: var(--brand);
}

.trust-flow__arrow svg { width: 1.25rem; height: 1.25rem; }

.trust-flow__item--blocked {
    border-color: var(--warn-border);
    background: var(--warn-soft);
}

.trust-flow__item--blocked .trust-flow__icon { background: var(--warn-soft); color: var(--warn); border: 1px solid var(--warn-border); }

/* Disclaimer --------------------------------------------------------------
   One centred measure keeps the wide visual sections and supporting copy in
   the same rhythm instead of leaving the lower half pinned to the left. */

.legal-page {
    width: min(100%, 70rem);
    margin-inline: auto;
}

/*
 * Vertical rhythm between the blocks of a legal page.
 *
 * The blocks themselves carry no consistent margins - `.legal-hero` and
 * `.legal-prediction` have none at all - so the gaps used to come from
 * whichever element happened to sit between them. That works until a page
 * puts two of the marginless ones next to each other, and then the cards sit
 * flush against one another. Owning the spacing here means any order of
 * sections reads the same. Adjacent margins collapse, so the blocks that do
 * set their own `--sp-5` are unaffected.
 */
.legal-page > * + * {
    margin-top: var(--sp-5);
}

.legal-hero {
    padding: clamp(var(--sp-6), 6vw, var(--sp-8));
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 18% 0, rgba(14, 165, 233, 0.10), transparent 34%),
        radial-gradient(circle at 86% 10%, rgba(16, 185, 129, 0.16), transparent 40%),
        var(--surface);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.legal-hero .eyebrow { justify-content: center; }
.legal-hero h1 { margin-bottom: var(--sp-3); font-size: var(--fs-3xl); }
.legal-hero p {
    max-width: 46rem;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: var(--fs-md);
}

.legal-notices {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-top: var(--sp-5);
}

.legal-notice {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--sp-4);
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.legal-notice--warning {
    border-color: var(--warn-border);
    background: var(--warn-soft);
}

.legal-notice__mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radius);
    background: var(--brand-soft);
    color: var(--brand);
}

.legal-notice--warning .legal-notice__mark {
    border: 1px solid var(--warn-border);
    background: transparent;
    color: var(--warn);
}

.legal-notice__mark svg { width: 1.3rem; height: 1.3rem; }
.legal-notice h2 { margin: 0 0 var(--sp-2); font-size: var(--fs-base); }
.legal-notice p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

/*
 * Official government source.
 *
 * Deliberately the loudest block under the hero. The Android app links to this
 * page for its disclaimer, and Play's Misleading Claims policy expects the
 * original government source to be reachable from it - so the section reads as
 * a citation the eye lands on, not a footnote. Each address is printed beneath
 * its label rather than hidden behind link text, which is what makes it
 * visibly a real, checkable link.
 */
.legal-source {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding: clamp(var(--sp-5), 4vw, var(--sp-6));
    border: 1px solid var(--brand);
    border-radius: var(--radius-xl);
    background: var(--brand-soft);
}

.legal-source__mark {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--brand);
    border-radius: var(--radius);
    color: var(--brand);
}

.legal-source__mark svg { width: 1.4rem; height: 1.4rem; }

.legal-source h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); }

.legal-source__body > p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.legal-source__links {
    display: grid;
    gap: var(--sp-2);
    margin: var(--sp-4) 0 0;
    padding: 0;
    list-style: none;
}

.legal-source__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.legal-source__links a:hover,
.legal-source__links a:focus-visible {
    border-color: var(--brand);
    box-shadow: var(--shadow-sm);
}

.legal-source__link-text {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.legal-source__link-text strong { font-size: var(--fs-sm); }

.legal-source__url {
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.legal-source__links svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    color: var(--brand);
}

.legal-source__body > p.legal-source__note {
    margin-top: var(--sp-4);
    color: var(--text);
    font-weight: 600;
}

.legal-visual { margin-block: var(--sp-5); }
.legal-visual .trust-flow { margin: 0; }

.legal-prediction {
    padding: var(--sp-6);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: var(--surface);
}

.legal-section-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.legal-section-head__number,
.legal-detail-card__index {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-full);
    background: var(--brand);
    color: var(--on-brand);
    font-size: var(--fs-xs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.legal-section-head h2 { margin-bottom: var(--sp-2); font-size: var(--fs-xl); }
.legal-section-head p { max-width: 52rem; margin: 0; color: var(--text-secondary); }

.legal-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-4);
    margin-block: var(--sp-5);
}

/*
 * Two across, for a group of four.
 *
 * The default three-column track leaves a group of four as a row of three
 * and one orphan sitting alone against empty space. Defined before the
 * narrow-screen rule below, which still collapses both to a single column.
 */
.legal-detail-grid--pairs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.legal-detail-card {
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-xs);
}

.legal-detail-card--warning {
    border-color: var(--warn-border);
    background: var(--warn-soft);
}

.legal-detail-card__index {
    width: 2rem;
    height: 2rem;
    margin-bottom: var(--sp-5);
    border: 1px solid var(--border);
    background: var(--surface-sunken);
    color: var(--text-muted);
}

.legal-detail-card--warning .legal-detail-card__index {
    border-color: var(--warn-border);
    background: transparent;
    color: var(--warn);
}

.legal-detail-card h2 { margin-bottom: var(--sp-3); font-size: var(--fs-base); }
.legal-detail-card p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
}

.legal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
    padding: var(--sp-5) var(--sp-6);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, var(--c-brand-800), var(--c-brand-950));
    color: var(--c-brand-100);
}

.legal-actions .eyebrow { margin-bottom: var(--sp-1); color: var(--c-brand-300); }
.legal-actions p { max-width: 42rem; margin: 0; color: var(--c-brand-100); font-size: var(--fs-sm); }

.legal-actions__buttons {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--sp-2);
}

.legal-actions .btn-primary {
    border-color: #fff;
    background: #fff;
    color: var(--c-brand-900);
}

.legal-actions .btn-primary:hover,
.legal-actions .btn-primary:focus {
    border-color: var(--c-brand-100);
    background: var(--c-brand-100);
    color: var(--c-brand-950);
}

.legal-actions .btn-outline-secondary {
    border-color: rgba(255, 255, 255, 0.35);
    background: transparent;
    color: #fff;
}

.legal-actions .btn-outline-secondary:hover,
.legal-actions .btn-outline-secondary:focus {
    border-color: #fff;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

@media (max-width: 991.98px) {
    .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
    .hero__content, .data-story { width: 100%; max-width: 38rem; }
}

@media (max-width: 767.98px) {
    .hero { padding-block: var(--sp-6) var(--sp-5); }
    .hero__title { font-size: clamp(2rem, 10vw, 2.75rem); }
    html[lang="ml"] .hero__title,
    html[lang="ta"] .hero__title {
        max-width: 100%;
        overflow-wrap: anywhere;
        font-size: clamp(1.9rem, 8.25vw, 2.3rem);
    }

    .trust-flow {
        grid-template-columns: 1fr;
        padding: var(--sp-4);
    }

    .trust-flow__arrow { transform: rotate(90deg); min-height: 1.25rem; }

    .legal-notices,
    .legal-detail-grid { grid-template-columns: 1fr; }

    .legal-hero {
        padding: var(--sp-5);
        text-align: left;
    }

    .legal-hero .eyebrow { justify-content: flex-start; }
    .legal-notice { padding: var(--sp-4); }
    .legal-prediction { padding: var(--sp-4); }
    .legal-source { padding: var(--sp-4); }

    .legal-actions {
        align-items: flex-start;
        flex-direction: column;
        padding: var(--sp-5);
    }

    .legal-actions__buttons { justify-content: flex-start; }
}

.hero-search .form-control {
    border: 0;
    background: transparent;
    font-size: var(--fs-md);
    font-family: var(--font-mono);
    letter-spacing: 0.04em;
}

.hero-search .form-control:focus { box-shadow: none; }

@media (max-width: 575.98px) {
    .hero-search { flex-direction: column; }
    .hero-search .btn { width: 100%; }

    .legal-notice {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: var(--sp-3);
    }

    .legal-notice__mark { width: 2.25rem; height: 2.25rem; }

    /* The addresses need every pixel of width on a phone, so the icon steps
       out of the way instead of taking a column. */
    .legal-source { grid-template-columns: 1fr; gap: var(--sp-3); }
    .legal-source__links a { align-items: flex-start; }
    .legal-section-head { grid-template-columns: 1fr; }
    .legal-actions__buttons { width: 100%; }
    .legal-actions__buttons .btn { flex: 1 1 auto; }
}

/* Alerts ------------------------------------------------------------------ */

.alert {
    position: relative;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-size: var(--fs-sm);
    margin-bottom: var(--sp-4);
}

.alert-warning, .alert-note {
    background: var(--warn-soft);
    border-color: var(--warn-border);
    color: var(--text);
}

.alert-info { background: var(--accent-soft); border-color: transparent; color: var(--text); }
.alert-secondary { background: var(--surface-sunken); border-color: var(--border); color: var(--text-secondary); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--text); }
.alert-success { background: var(--brand-soft); border-color: var(--brand); color: var(--text); }

.alert-heading { font-size: var(--fs-base); font-weight: 650; margin-bottom: var(--sp-2); }

/* Empty state ------------------------------------------------------------- */

.empty-state {
    padding: var(--sp-7) var(--sp-4);
    text-align: center;
    background: var(--surface);
    border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg);
}

.empty-state-icon { font-size: 2.5rem; line-height: 1; margin-bottom: var(--sp-3); opacity: 0.7; }

/* Generated numbers ------------------------------------------------------- */

.generated-number {
    display: block;
    padding: var(--sp-4) var(--sp-2);
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: 700;
    letter-spacing: 0.12em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    text-decoration: none;
    transition: all var(--dur) var(--ease);
}

a.generated-number:hover,
a.generated-number:focus-visible {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Prose pages ------------------------------------------------------------- */

.prose { max-width: 68ch; }
.prose--wide { max-width: 76rem; }
.prose--wide > p,
.prose--wide > h2,
.prose--wide > ul { max-width: 68ch; }
.prose p, .prose li { color: var(--text-secondary); line-height: var(--lh-relaxed); }
.prose h2 { margin-top: var(--sp-6); }
.prose h3 { margin-top: var(--sp-5); }
.prose > :first-child { margin-top: 0; }

/* Back link --------------------------------------------------------------- */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
    margin-bottom: var(--sp-4);
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 550;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}

.back-link:hover { background: var(--surface-hover); color: var(--text); }
.back-link svg { width: 1rem; height: 1rem; }

/* -------------------------------------------------------------- 9b. admin
   A back office for one operator. Denser than the public site, and organised
   around a fixed sidebar so the tools stay reachable from every screen. */

.admin-body { background: var(--bg-subtle); }

.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    height: var(--header-h);
    padding-inline: var(--sp-4);
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
}

.admin-topbar__toggle { display: grid; }

@media (min-width: 992px) {
    .admin-topbar__toggle { display: none; }
}

.admin-topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-left: auto;
}

.admin-topbar__actions form { margin: 0; }

.admin-topbar__user {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--text-secondary);
    padding-inline: var(--sp-2);
}

.admin-shell { display: flex; align-items: flex-start; }

/* Sidebar ----------------------------------------------------------------- */

.admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1060;
    width: min(17rem, 84vw);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    transform: translateX(-100%);
    transition: transform var(--dur-slow) var(--ease-out);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.admin-sidebar.is-open { transform: translateX(0); }

@media (min-width: 992px) {
    .admin-sidebar {
        position: sticky;
        top: var(--header-h);
        height: calc(100dvh - var(--header-h));
        transform: none;
        flex-shrink: 0;
        width: 16rem;
    }

    .admin-sidebar__head { display: none; }
}

.admin-sidebar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--border);
}

.admin-sidebar__nav { padding: var(--sp-3); flex: 1; }

.admin-sidebar__group {
    padding: var(--sp-4) var(--sp-3) var(--sp-2);
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
}

.admin-sidebar__group:first-child { padding-top: var(--sp-2); }

.admin-nav__link {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: 0.55rem var(--sp-3);
    margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 550;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}

.admin-nav__link svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.admin-nav__link:hover { background: var(--surface-hover); color: var(--text); }

.admin-nav__link.is-active {
    background: var(--brand-soft);
    color: var(--brand-soft-text);
    font-weight: 600;
}

.admin-sidebar__foot {
    padding: var(--sp-3) var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: var(--fs-xs);
}

.admin-sidebar__foot a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-muted);
    text-decoration: none;
}

.admin-sidebar__foot a:hover { color: var(--brand); }
.admin-sidebar__foot svg { width: 0.9rem; height: 0.9rem; }

/* Main column ------------------------------------------------------------- */

.admin-main {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--sp-5) var(--sp-4);
}

@media (min-width: 992px) {
    .admin-main { padding: var(--sp-5) var(--sp-6); }
}

.admin-main > h1:first-child,
.admin-main > .admin-page-head:first-child { margin-top: 0; }

.admin-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.admin-page-head h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-1); }

.admin-page-head p {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

/* The admin lists are dense; give them a tighter row rhythm than the site. */
.admin-main .table > thead > tr > th,
.admin-main .table > tbody > tr > td { padding: var(--sp-2) var(--sp-3); }

.admin-main .table { font-size: var(--fs-xs); }

/* Breadcrumbs ------------------------------------------------------------- */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: 0;
    margin-bottom: var(--sp-3);
    list-style: none;
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    padding-right: var(--sp-2);
    color: var(--border-strong);
}

.breadcrumb-item a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--brand); }
.breadcrumb-item.active { color: var(--text); font-weight: 600; }

/* Tabs -------------------------------------------------------------------- */

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    padding-bottom: 0;
    margin-bottom: var(--sp-4);
    border-bottom: 1px solid var(--border);
    list-style: none;
}

.nav-tabs .nav-link {
    display: block;
    padding: var(--sp-2) var(--sp-4);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    font-weight: 550;
    text-decoration: none;
    transition: all var(--dur-fast) var(--ease);
}

.nav-tabs .nav-link:hover { color: var(--text); border-bottom-color: var(--border-strong); }

.nav-tabs .nav-link.active {
    color: var(--brand);
    border-bottom-color: var(--brand);
    background: none;
}

/* Import log -------------------------------------------------------------- */

.import-log {
    max-height: 24rem;
    overflow-y: auto;
    padding: var(--sp-3);
    background: var(--c-n-950);
    border-radius: var(--radius-sm);
    color: #cbd5e1;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    line-height: 1.7;
}

.progress {
    height: 0.5rem;
    background: var(--surface-sunken);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--c-brand-500), var(--c-brand-700));
    transition: width var(--dur) var(--ease);
    border-radius: var(--radius-full);
}

/* Before there is a total to divide by, sweep instead of sitting at zero —
   an empty bar and a stalled bar look identical, and one of them is alarming. */
.progress-bar.is-indeterminate {
    width: 35% !important;
    animation: progress-sweep 1.4s var(--ease) infinite;
}

@keyframes progress-sweep {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar.is-indeterminate { animation: none; width: 100% !important; opacity: 0.4; }
}

/* ------------------------------------------------------------------ 10. footer */

.site-footer {
    margin-top: var(--sp-8);
    padding-block: var(--sp-6) var(--sp-5);
    background: var(--surface);
    border-top: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    overflow-x: hidden;
}

.site-footer h2 {
    font-size: var(--fs-xs);
    font-weight: 650;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
}

.site-footer a { color: var(--text-secondary); text-decoration: none; }
.site-footer a:hover { color: var(--brand); }

.site-footer .btn {
    white-space: normal;
    word-break: normal;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
}

.btn {
    white-space: normal;
    word-break: normal;
    max-width: 100%;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: var(--sp-2); }
.footer-links a { overflow-wrap: anywhere; }

/* --------------------------------------------------- 11. utilities and motion */

.text-secondary, .text-body-secondary { color: var(--text-secondary) !important; }
.text-muted, .text-muted-strong { color: var(--text-muted) !important; }
.text-brand { color: var(--brand) !important; }
.bg-surface { background: var(--surface) !important; }
.bg-sunken { background: var(--surface-sunken) !important; }
.border-default { border-color: var(--border) !important; }

.tabular { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); }

.cursor-pointer { cursor: pointer; }

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Entrance animation, used sparingly and only on first paint. */
@keyframes rise {
    from { opacity: 0; transform: translateY(0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.rise { animation: rise var(--dur-slow) var(--ease-out) both; }
.rise-2 { animation-delay: 60ms; }
.rise-3 { animation-delay: 120ms; }
.rise-4 { animation-delay: 180ms; }

/* Anyone who has asked for less motion gets none of it. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .tabbar, .site-footer, .back-link, .drawer, .drawer-backdrop { display: none !important; }
    body { padding-bottom: 0; background: #fff; }
    .card, .panel { break-inside: avoid; border-color: #ccc; box-shadow: none; }
}

/* ------------------------------------------------- narrow-screen tables */

/* On a phone the cell gutters are worth more as table width than as padding,
   and Indic headings need every pixel of it. Desktop keeps the roomier
   spacing, where nothing was overflowing in the first place. */
@media (max-width: 575.98px) {
    /* On a phone the gutters are worth more as table width than as padding,
       and a step down in size buys the rest. Applied in every language - the
       English tables overflowed here too, just by less. Together these two
       are what take a seven-column table from a sideways drag to something
       that fits, and they let the headings settle at two or three lines
       instead of the six they wrapped to when every column was squeezed. */
    .table {
        font-size: var(--fs-xs);
    }

    .table > thead > tr > th,
    .table > tbody > tr > td {
        padding-left: var(--sp-1);
        padding-right: var(--sp-1);
    }

    .table > thead > tr > th {
        font-size: 0.7rem;
    }

    /* The figures still hold one line - a wrapped number is a different
       number - so on the narrowest screens they give up a little letter
       spacing instead, which is the only width left to give.
       Latin only: negative tracking on Malayalam or Tamil pulls conjuncts
       into each other, which is why the headings already sit at 0. */
    html:not([lang="ml"]):not([lang="ta"]) .table > tbody > tr > td {
        letter-spacing: -0.01em;
    }
}