/* ------------------------------------------------------------------
   RasiMitra - global styles
   Deep indigo and gold on soft white: a modern, premium surface for a
   traditional subject. Two shells share these tokens - the public site
   and the signed-in workspace (sidebar + top bar).
   ------------------------------------------------------------------ */

:root {
    /* text - both greys clear WCAG AA (4.5:1) on the white *and* on the tinted surfaces, so the
       small uppercase labels do not read as washed out. */
    --ink: #14152b;
    --ink-2: #2d2f52;
    --muted: #5a5e82;
    --muted-2: #666a94;

    /* surfaces */
    --bg: #f5f6fc;
    --bg-tint: #eceffb;
    --surface: #ffffff;
    --surface-2: #fafbff;
    --surface-3: #f1f3fb;
    --border: #e5e7f4;
    --border-strong: #d2d6ea;

    /* brand */
    --primary: #312e81;
    --primary-600: #3d3aa0;
    --primary-500: #4b45c6;
    --primary-100: #e7e8fb;
    --primary-50: #f2f3fd;
    --gold: #c08a1e;
    --gold-400: #d9ac4f;
    --gold-200: #f0dcae;
    --gold-100: #fbf3e0;
    --gold-700: #8b6110;

    /* sidebar (night blue) */
    --sidebar: #161a3c;
    --sidebar-2: #1e2352;
    --sidebar-ink: #ecedfb;
    --sidebar-muted: #a5a9d6;

    /* state */
    --success: #0f7a5c;
    --warn: #8a6100;
    --error: #c0392b;
    --danger: #b42318;
    --danger-soft: #fef2f1;
    --error-soft: #f7d7d2;

    /* shape */
    --radius: 16px;
    --radius-sm: 12px;
    --radius-xs: 10px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgba(18, 20, 56, .05), 0 4px 14px rgba(18, 20, 56, .05);
    --shadow-2: 0 14px 38px rgba(18, 20, 56, .10);
    --shadow-3: 0 30px 70px rgba(18, 20, 56, .16);

    /* type */
    --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
    --font-display: "Iowan Old Style", "Palatino Linotype", Georgia, "Noto Serif", serif;

    --sidebar-w: 268px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--primary-600);
}

h1,
h2,
h3,
h4 {
    color: var(--ink);
    font-weight: 650;
    letter-spacing: -.01em;
    margin: 0 0 .4em;
    line-height: 1.22;
}

h1 {
    font-size: 1.75rem;
}

h2 {
    font-size: 1.3rem;
}

h3 {
    font-size: 1.08rem;
}

p {
    margin: 0 0 .75em;
}

:focus-visible {
    outline: 3px solid rgba(217, 172, 79, .65);
    outline-offset: 2px;
}

/* FocusOnNavigate hands the keyboard focus to the page heading after a navigation so a screen
   reader starts at the right place. The ring belongs on controls the reader can operate, so the
   heading - which nobody can type into - does not draw one. */
h1:focus,
h1:focus-visible,
h2:focus,
h2:focus-visible {
    outline: none;
}

/* ==================================================================
   Public shell (anonymous visitors)
   ================================================================== */

.public-shell {
    min-height: 100vh;
    /* Safari's 100vh is taller than the area actually on screen, so the shell is a scroll taller than
       it should be. dvh is the same thing measured on the visible area; the line above is the fallback. */
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(1200px 560px at 8% -10%, #e9ecff 0%, rgba(233, 236, 255, 0) 62%),
        radial-gradient(900px 460px at 100% 0%, #fdf4e4 0%, rgba(253, 244, 228, 0) 55%),
        var(--bg);
}

.public-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem 1.75rem;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
}

.public-nav {
    display: flex;
    align-items: center;
    gap: .25rem;
    margin-left: auto;
}

.public-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding-left: 1rem;
    border-left: 1px solid var(--border);
}

.public-main {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 1.75rem 3.5rem;
}

.public-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    padding: 2.25rem 1.75rem 2.5rem;
    color: var(--muted);
    font-size: .88rem;
}

.public-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr));
    gap: 1.5rem;
}

.public-footer h4 {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted-2);
}

.public-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.public-footer .legal {
    max-width: 1180px;
    margin: 1.5rem auto 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    font-size: .8rem;
}

/* ==================================================================
   Signed-in shell (sidebar + top bar)
   ================================================================== */

.app-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: stretch;
    background: var(--bg);
}

.app-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    flex: 0 0 var(--sidebar-w);
    width: var(--sidebar-w);
    height: 100vh;
    /* The drawer is laid over the page, so it is as tall as the area on screen, not as tall as Safari
       thinks the window is; without this its last rows hide under the browser's own bars. */
    height: 100dvh;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.1rem .9rem 1rem;
    background: linear-gradient(178deg, var(--sidebar), var(--sidebar-2));
    color: var(--sidebar-ink);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .35rem .5rem;
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-sm);
}

.sidebar-brand:hover {
    background: rgba(255, 255, 255, .06);
}

.sidebar-brand .brand-mark {
    /* On the dark sidebar the navy tile needs a hairline to read as a tile. */
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.sidebar-brand .brand-text strong {
    color: #fff;
}

.sidebar-brand .brand-text small {
    color: var(--sidebar-muted);
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: .25rem .1rem;
    scrollbar-width: thin;
}

.sidebar-group {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.sidebar-group-title {
    padding: 0 .6rem .3rem;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--sidebar-muted);
    opacity: .85;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-top: .9rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.app-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .7rem 1.5rem;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.topbar-heading {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    margin-right: auto;
    min-width: 0;
}

.topbar-title {
    font-weight: 650;
    font-size: 1.02rem;
}

.topbar-sub {
    font-size: .78rem;
    color: var(--muted);
}

.app-main {
    flex: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 1.6rem 1.6rem 3rem;
}

.app-footer {
    padding: 1rem 1.6rem 2rem;
    color: var(--muted-2);
    font-size: .8rem;
    text-align: center;
}

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

.nav-menu {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .65rem;
    border-radius: var(--radius-xs);
    color: var(--sidebar-muted);
    text-decoration: none;
    font-size: .93rem;
    font-weight: 500;
    line-height: 1.2;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

/* The icon markup carries no size of its own, so every context has to give it one - without a rule
   an inline svg stretches to fill its container, which is what a sign-out arrow at 200px was. */
.nav-link svg,
.signout-link svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    opacity: .85;
}

/* An icon inside a button follows the button's own text size. */
.btn > svg {
    flex: 0 0 1.05em;
    width: 1.05em;
    height: 1.05em;
}

.nav-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

.nav-link.active {
    background: rgba(217, 172, 79, .16);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--gold-400);
}

.nav-link.active svg {
    opacity: 1;
    color: var(--gold-400);
}

/* Public pages reuse the same class on a light background. */
.public-nav .nav-link {
    color: var(--ink-2);
    border-radius: var(--radius-pill);
    padding: .45rem .85rem;
    font-weight: 550;
}

.public-nav .nav-link:hover {
    background: var(--surface-3);
    color: var(--primary);
}

.public-nav .nav-link.active {
    background: var(--primary-50);
    color: var(--primary);
    box-shadow: none;
}

.sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
}

.nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.sidebar-backdrop {
    display: none;
}

/* ---------------------------------------------------------------- brand */

.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    text-decoration: none;
    color: inherit;
}

/* The supplied logo tile (wwwroot/brand/rasimitra-icon-96.png), used at every brand mark. */
.brand-mark {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: block;
    flex: none;
    box-shadow: 0 6px 16px rgba(16, 22, 48, .3);
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}

.brand-text strong {
    font-family: var(--font-display);
    font-size: 1.08rem;
    letter-spacing: 0;
}

.brand-text small {
    color: var(--muted);
    font-size: .75rem;
}

/* ---------------------------------------------------------------- account */

.account-menu {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.account-name {
    font-weight: 600;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-chip {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem .5rem;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, .06);
}

.avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--gold-400), #f4e2b8);
    color: #3d2c05;
    font-weight: 700;
    font-size: .85rem;
}

.account-chip .account-name {
    display: block;
    color: #fff;
    font-size: .88rem;
    max-width: 12rem;
}

.account-meta {
    display: block;
    font-size: .74rem;
    color: var(--sidebar-muted);
}

.signout-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .55rem;
    border-radius: var(--radius-xs);
    color: var(--sidebar-muted);
    text-decoration: none;
    font-size: .87rem;
}

.signout-link:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
}

/* ==================================================================
   Cards, helpers
   ================================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.35rem;
    margin-bottom: 1.25rem;
    box-shadow: var(--shadow-1);
}

.card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.card-head h2,
.card-head h3 {
    margin-bottom: .15rem;
}

.muted {
    color: var(--muted);
}

.small {
    font-size: .85rem;
}

.mono {
    font-family: Consolas, "Cascadia Mono", ui-monospace, monospace;
    font-variant-numeric: tabular-nums;
}

.eyebrow {
    display: inline-block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-700);
}

.divider {
    height: 1px;
    background: var(--border);
    border: 0;
    margin: 1.25rem 0;
}

/* ==================================================================
   Landing page
   ================================================================== */

.hero {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: 2.5rem;
    margin: 1.75rem 0 2.5rem;
    padding: 3rem;
    border-radius: 26px;
    color: #fff;
    background: linear-gradient(135deg, #191c46 0%, var(--primary) 46%, #4a44c9 100%);
    box-shadow: var(--shadow-3);
}

.hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -60% 42%;
    height: 420px;
    background: radial-gradient(closest-side, rgba(217, 172, 79, .32), rgba(217, 172, 79, 0));
    pointer-events: none;
}

.hero-text {
    position: relative;
    z-index: 1;
}

.hero h1,
.hero-text h1 {
    font-family: var(--font-display);
    font-size: clamp(2.1rem, 3.6vw, 3rem);
    color: #fff;
    margin-bottom: .6rem;
}

.hero-text p {
    max-width: 34rem;
    color: #d9dcfb;
    font-size: 1.05rem;
}

.hero .hero-actions {
    margin-top: 1.5rem;
}

.hero-note {
    margin-top: 1rem;
    font-size: .85rem;
    color: #b9bdec;
}

/* The brand promise, set in the display face in gold so it reads as the slogan under the title. */
.hero-slogan {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.5vw, 1.3rem);
    font-style: italic;
    color: var(--gold-200);
    margin-bottom: .7rem;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .8rem;
    margin-bottom: 1.1rem;
    border-radius: var(--radius-pill);
    background: rgba(217, 172, 79, .16);
    border: 1px solid rgba(217, 172, 79, .38);
    color: #f4e2b8;
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.hero-actions {
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* CSS-only rasi kattam illustration */
.hero-visual {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
}

.kattam-mock {
    width: min(320px, 100%);
    aspect-ratio: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 5px;
    padding: 9px;
    border-radius: 18px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(217, 172, 79, .35);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.kattam-mock span {
    display: grid;
    place-items: center;
    border: 1px solid rgba(217, 172, 79, .32);
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    font-size: .7rem;
    letter-spacing: .04em;
    color: #e7dcc0;
    text-transform: uppercase;
    text-align: center;
    padding: 2px;
}

/* The fixed-sign ring: signs run clockwise from Pisces in the top-left corner. */
.kattam-mock span:nth-child(1) { grid-area: 1 / 1; }
.kattam-mock span:nth-child(2) { grid-area: 1 / 2; }
.kattam-mock span:nth-child(3) { grid-area: 1 / 3; }
.kattam-mock span:nth-child(4) { grid-area: 1 / 4; }
.kattam-mock span:nth-child(5) { grid-area: 2 / 4; }
.kattam-mock span:nth-child(6) { grid-area: 3 / 4; }
.kattam-mock span:nth-child(7) { grid-area: 4 / 4; }
.kattam-mock span:nth-child(8) { grid-area: 4 / 3; }
.kattam-mock span:nth-child(9) { grid-area: 4 / 2; }
.kattam-mock span:nth-child(10) { grid-area: 4 / 1; }
.kattam-mock span:nth-child(11) { grid-area: 3 / 1; }
.kattam-mock span:nth-child(12) { grid-area: 2 / 1; }

.kattam-mock .kattam-center {
    grid-area: 2 / 2 / 4 / 4;
    background: linear-gradient(135deg, rgba(217, 172, 79, .3), rgba(217, 172, 79, .08));
    border-color: rgba(217, 172, 79, .6);
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
}

.hero-caption {
    margin-top: .9rem;
    text-align: center;
    font-size: .8rem;
    color: #b9bdec;
}

.section-head {
    max-width: 42rem;
    margin: 0 auto 1.75rem;
    text-align: center;
}

.section-head h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem;
    margin-bottom: 3rem;
}

.feature-grid .card {
    margin-bottom: 0;
    padding: 1.5rem;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

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

.feature-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--primary-50);
    color: var(--primary);
    margin-bottom: .8rem;
}

.feature-icon svg {
    width: 22px;
    height: 22px;
}

.feature-grid h3 {
    font-size: 1.05rem;
}

.feature-grid p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: .93rem;
}

ol.steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.1rem;
    counter-reset: step;
}

ol.steps li {
    counter-increment: step;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    box-shadow: var(--shadow-1);
}

ol.steps li::before {
    content: counter(step);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-bottom: .8rem;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
}

ol.steps h3 {
    font-size: 1.02rem;
}

ol.steps p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: .93rem;
}

.trust-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 1.5rem 1.75rem;
    margin-bottom: 3rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
}

.trust-strip h3 {
    margin-bottom: .2rem;
}

.trust-strip p {
    margin-bottom: 0;
    color: var(--muted);
    font-size: .92rem;
}

.language-pills {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.language-pills span {
    padding: .35rem .8rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface-3);
    color: var(--ink-2);
    font-size: .85rem;
}

.cta-band {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    padding: 2.25rem 2.5rem;
    margin-bottom: 1rem;
    border-radius: 24px;
    color: #fff;
    background: linear-gradient(120deg, #1c2050, var(--primary) 60%, #4a44c9);
    box-shadow: var(--shadow-2);
}

.cta-band h2 {
    color: #fff;
    font-family: var(--font-display);
    margin-bottom: .3rem;
}

.cta-band p {
    margin-bottom: 0;
    color: #ccd0f6;
}

/* ==================================================================
   Auth pages
   ================================================================== */

.auth-shell {
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    gap: 0;
    max-width: 1020px;
    margin: 2.5rem auto 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-2);
}

.auth-aside {
    padding: 2.5rem 2.25rem;
    color: #fff;
    background: linear-gradient(160deg, #191c46, var(--primary) 62%, #4a44c9);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.auth-aside h2 {
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.6rem;
}

.auth-aside p {
    color: #d3d7f8;
    margin-bottom: 0;
}

.auth-logo {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 12px 26px rgba(6, 9, 28, .45);
}

.auth-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .7rem;
}

.auth-points li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    font-size: .93rem;
    color: #e8eaff;
}

.auth-points li::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: .2rem;
    border-radius: 50%;
    background: var(--gold-400);
    box-shadow: inset 0 0 0 4px rgba(25, 28, 70, .35);
}

.auth-note {
    margin-top: auto;
    font-size: .8rem;
    color: #b7bbeb;
}

.auth-card {
    margin: 0;
    padding: 2.5rem 2.25rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-card .form-grid {
    grid-template-columns: 1fr;
}

.auth-alt {
    margin: 1.1rem 0 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--border);
    font-size: .9rem;
    color: var(--muted);
}

/* ==================================================================
   Dashboard
   ================================================================== */

.dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-bottom: 1.35rem;
}

.dash-header h1 {
    font-family: var(--font-display);
    font-size: clamp(1.6rem, 2.4vw, 2.1rem);
    margin-bottom: .2rem;
}

.dash-header p {
    margin-bottom: 0;
    color: var(--muted);
}

.dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

.dash-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.dash-column .card {
    margin-bottom: 0;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
    /* Equal rows, so a card that carries an extra line does not make its neighbour look stunted. */
    grid-auto-rows: 1fr;
}

.stat-card {
    padding: .8rem .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface-2);
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.stat-card .stat-detail {
    margin-top: auto;
}

.stat-card.gold {
    border-left: 3px solid var(--gold-400);
}

.stat-label {
    display: block;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.stat-value {
    display: block;
    font-weight: 650;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.stat-detail {
    display: block;
    font-size: .8rem;
    color: var(--muted);
}

.dasa-chain {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.dasa-step {
    display: grid;
    grid-template-columns: 8.5rem 1fr auto;
    align-items: center;
    gap: .75rem;
    padding: .6rem .85rem;
    border: 1px solid var(--border);
    border-left: 3px solid var(--gold-400);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
}

.dasa-step .level-name {
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.dasa-step .level-lord {
    font-weight: 650;
}

.dasa-step .level-when {
    font-size: .8rem;
    color: var(--muted);
    text-align: right;
}

.dasa-step.running {
    background: var(--gold-100);
    border-color: var(--gold-200);
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .85rem;
}

.quick-tile {
    display: flex;
    gap: .8rem;
    align-items: flex-start;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    text-decoration: none;
    color: inherit;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.quick-tile:hover {
    transform: translateY(-2px);
    border-color: var(--primary-500);
    box-shadow: var(--shadow-1);
}

.quick-tile strong {
    display: block;
    color: var(--ink);
}

.quick-tile span {
    font-size: .84rem;
    color: var(--muted);
}

.quick-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: var(--primary-50);
    color: var(--primary);
}

.quick-icon svg {
    width: 18px;
    height: 18px;
}

.family-list {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.family-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    text-decoration: none;
    color: inherit;
}

.family-row:hover {
    border-color: var(--primary-500);
}

.family-row.current {
    border-color: var(--gold-400);
    background: var(--gold-100);
}

.family-row .relation-tag {
    font-size: .74rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--muted-2);
}

.today-card {
    border-left: 4px solid var(--primary);
}

/* The card now runs the width of the page, so its prose is held to a readable measure. */
.today-card .forecast-summary {
    max-width: 78ch;
}

/* ==================================================================
   Forms
   ================================================================== */

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}

.field {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.field > span {
    font-weight: 600;
    font-size: .88rem;
    color: var(--ink-2);
}

.field input,
.field select,
.field textarea {
    padding: .55rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-xs);
    background: var(--surface);
    font: inherit;
    color: inherit;
    width: 100%;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(75, 69, 198, .18);
}

/* The place field pairs a text box with the lookup button. The grid gives the cell about 240px, which
   is not enough for both, so the row wraps the button under the box instead of squeezing the box to a
   sliver - a city name needs the room. When there is space (one field per row on a phone) they sit
   side by side again. */
.place-input {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.place-input input {
    flex: 1 1 10rem;
    min-width: 10rem;
}

.place-input .btn {
    flex: 1 1 auto;
    white-space: nowrap;
}

.place-matches {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: 1rem;
}

.place-match-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .92rem;
}

.checkbox input {
    width: 1rem;
    height: 1rem;
}

.form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: .5rem;
}

/* Keeps the save option next to the button it applies to, on the right of the row. */
.form-actions-submit {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.validation-errors {
    margin: 0 0 .75rem;
    padding-left: 1.25rem;
    color: var(--error);
    font-size: .9rem;
}

.validation-message {
    color: var(--error);
    font-size: .85rem;
}

/* ==================================================================
   Buttons
   ================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem 1.1rem;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-strong);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-weight: 550;
    cursor: pointer;
    text-decoration: none;
    /* A label that wraps and doubles the height of a pill button reads as a broken button. */
    white-space: nowrap;
    transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease;
}

.btn:hover {
    border-color: var(--primary-500);
    color: var(--primary);
    box-shadow: var(--shadow-1);
}

.btn.primary {
    background: linear-gradient(135deg, var(--primary), var(--primary-500));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 20px rgba(49, 46, 129, .24);
}

.btn.primary:hover {
    background: linear-gradient(135deg, #292767, var(--primary-600));
    color: #fff;
    box-shadow: 0 12px 26px rgba(49, 46, 129, .3);
}

.btn.gold {
    background: linear-gradient(135deg, var(--gold), var(--gold-400));
    border-color: transparent;
    color: #2f2404;
    font-weight: 650;
}

.btn.gold:hover {
    color: #2f2404;
    box-shadow: 0 12px 26px rgba(192, 138, 30, .3);
}

.btn.ghost-light {
    background: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .38);
    color: #fff;
}

.btn.ghost-light:hover {
    background: rgba(255, 255, 255, .18);
    color: #fff;
    box-shadow: none;
}

.btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.btn:disabled {
    opacity: .55;
    cursor: default;
    transform: none;
    box-shadow: none;
}

.btn.small {
    padding: .35rem .7rem;
    font-size: .85rem;
}

.btn.danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}

/* ==================================================================
   Alerts
   ================================================================== */

.alert {
    border-radius: var(--radius-sm);
    padding: .8rem 1rem;
    margin-top: .75rem;
    font-size: .93rem;
}

.alert.error {
    background: #fdecea;
    border: 1px solid #f2b8b5;
    color: var(--error);
    overflow-wrap: anywhere;
}

.alert.warn {
    background: var(--gold-100);
    border: 1px solid var(--gold-200);
    color: var(--warn);
}

.alert.info {
    background: var(--primary-50);
    border: 1px solid var(--primary-100);
    color: var(--primary);
}

.alert.success {
    background: #e8f6ee;
    border: 1px solid #b6dfc6;
    color: #17693b;
}

/* ==================================================================
   Result header, view switch, summary strip
   ================================================================== */

.result-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.result-header h2 {
    margin-bottom: .15rem;
}

.view-tabs,
.browse-actions,
.chart-toolbar {
    display: flex;
    gap: .4rem;
    align-items: center;
    flex-wrap: wrap;
}

.view-tabs {
    padding: .25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface-3);
}

.view-tabs .btn {
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--muted);
    font-size: .88rem;
}

.view-tabs .btn:hover {
    color: var(--primary);
}

.view-tabs .btn.active {
    background: var(--surface);
    color: var(--primary);
    box-shadow: var(--shadow-1);
}

.chart-toolbar {
    margin-bottom: 1rem;
}

.toolbar-label {
    color: var(--muted);
    font-size: .9rem;
}

.summary-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.summary-chip {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--gold-400);
    border-radius: var(--radius-sm);
    padding: .7rem .9rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    box-shadow: var(--shadow-1);
}

.chip-label {
    font-size: .72rem;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--muted-2);
}

.chip-value {
    font-weight: 700;
    font-family: var(--font-display);
    color: var(--ink);
}

.chip-detail {
    font-size: .82rem;
    color: var(--muted);
}

/* ==================================================================
   Chart layout
   ================================================================== */

.chart-row {
    display: grid;
    grid-template-columns: minmax(300px, 560px) 1fr;
    gap: 1.25rem;
    align-items: start;
}

.chart-row > * {
    margin-bottom: 0;
}

.novice-cards {
    display: flex;
    flex-direction: column;
}

.novice-cards .card:last-child {
    margin-bottom: 0;
}

.pro-tables {
    overflow-x: auto;
}

.pro-tables .table {
    min-width: 560px;
}

/* Centre box content (provided by the page, so kept global). */
.chart-center {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    align-items: center;
    text-align: center;
    font-size: .82rem;
    padding: .35rem;
}

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

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

.table th,
.table td {
    border-bottom: 1px solid var(--border);
    padding: .45rem .55rem;
    text-align: left;
    vertical-align: top;
}

.table thead th {
    background: var(--primary-50);
    color: var(--primary);
    font-weight: 650;
    white-space: nowrap;
}

.table tbody tr:hover {
    background: var(--surface-2);
}

.table tr.current {
    background: var(--gold-100);
}

.table tr.current td {
    font-weight: 600;
}

.table tr.selected {
    outline: 2px solid var(--gold-400);
    outline-offset: -2px;
}

.table tr.asc-row {
    background: var(--primary-50);
}

/* ==================================================================
   Saved charts list (My charts page)
   ================================================================== */

.table-scroll {
    overflow-x: auto;
}

/* One compact line per chart: nothing wraps, so the whole row is read at a glance. */
.chart-list {
    min-width: 620px;
    font-size: .85rem;
}

.chart-list th,
.chart-list td {
    padding: .4rem .5rem;
    vertical-align: middle;
    white-space: nowrap;
}

.chart-list tbody tr.selectable {
    cursor: pointer;
}

.chart-list .chart-name {
    font-weight: 600;
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chart-list .actions-column {
    text-align: right;
    width: 1%;
}

.chart-list .row-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: .3rem;
    align-items: center;
    justify-content: flex-end;
}

.chart-list .row-actions .btn {
    padding: .25rem .6rem;
    font-size: .76rem;
}

.chart-list .row-actions .muted {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.danger-text {
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border-strong));
}

.danger-text:hover:not(:disabled) {
    background: var(--danger-soft);
    border-color: var(--danger);
}

.badge {
    display: inline-block;
    padding: .1rem .55rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--gold), var(--gold-400));
    color: #33260a;
    font-size: .74rem;
    font-weight: 650;
    white-space: nowrap;
}

.muted-badge {
    background: var(--surface-3);
    color: var(--muted);
    border: 1px solid var(--border);
}

/* ==================================================================
   Prediction cards
   ================================================================== */

.pred-card {
    padding: 1rem 1.1rem;
}

.pred-card h4 {
    margin: .25rem 0 .35rem;
}

.pred-card.highlight {
    border-color: var(--gold-200);
    background: var(--gold-100);
}

.tag {
    display: inline-block;
    font-size: .7rem;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--primary);
    background: var(--primary-50);
    border-radius: var(--radius-pill);
    padding: .15rem .6rem;
}

/* ==================================================================
   Definition lists
   ================================================================== */

.details-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .35rem 1.25rem;
    margin: 0;
}

.details-grid dt {
    color: var(--muted);
}

.details-grid dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* ==================================================================
   AI predictions
   ================================================================== */

.prediction-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin: 0;
}

/* Each fragment is its own item, so the gap separates them and no fragment can be glued to the
   next one the way a stray dropped space used to glue "UTC" to "via". */
.prediction-meta > span:not(.badge) {
    white-space: nowrap;
    color: var(--muted);
}

.prediction-meta > span + span:not(.badge)::before {
    content: "·";
    margin-right: .5rem;
    color: var(--border-strong);
}

.prediction-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1rem;
}

.pred-section h3 {
    margin-bottom: .35rem;
}

.pred-section p {
    margin: 0;
    white-space: pre-line;
}

.action-buttons {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
}

.forecast-heading {
    margin: 1.25rem 0 .5rem;
    font-family: var(--font-display);
}

.forecast-card {
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.rating-row {
    display: flex;
    align-items: baseline;
    gap: .3rem;
}

.rating-value {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.rating-max {
    color: var(--muted);
}

.rating-bar {
    height: 10px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    border: 1px solid var(--border);
    overflow: hidden;
}

.rating-bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--gold-400));
}

.forecast-summary {
    margin: 0;
}

.forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.list-card h4 {
    margin-bottom: .4rem;
}

.list-card ul {
    margin: 0;
    padding-left: 1.1rem;
}

.list-card li {
    margin-bottom: .3rem;
}

.list-card.good {
    border-left: 4px solid var(--success);
}

.list-card.caution {
    border-left: 4px solid var(--gold);
}

/* ==================================================================
   Language and chart pickers
   ================================================================== */

.header-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.language-picker {
    display: flex;
    align-items: center;
}

.language-picker select {
    padding: .45rem .6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font: inherit;
    color: var(--ink-2);
    cursor: pointer;
}

.language-picker select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(75, 69, 198, .18);
}

.chart-picker {
    display: flex;
    align-items: center;
}

.chart-picker select {
    padding: .45rem .6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font: inherit;
    color: var(--ink);
    font-weight: 550;
    cursor: pointer;
    max-width: 16rem;
}

.chart-picker select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(75, 69, 198, .18);
}

/* ==================================================================
   Prediction tabs
   ================================================================== */

.pred-tabs {
    display: flex;
    gap: .35rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1rem;
}

.pred-tab {
    padding: .55rem .9rem;
    border: 1px solid transparent;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: .93rem;
    margin-bottom: -1px;
}

.pred-tab:hover {
    color: var(--primary);
    background: var(--surface-3);
}

.pred-tab.active {
    color: var(--primary);
    background: var(--surface);
    border-color: var(--border);
    border-bottom-color: var(--surface);
}

.pred-views {
    margin-bottom: 1.25rem;
}

/* ==================================================================
   Chart page: browse mode
   ================================================================== */

.browse-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.scope-note {
    margin-top: -.2rem;
}

/* ==================================================================
   Ask AI chat
   ================================================================== */

.chat-card {
    display: flex;
    flex-direction: column;
    gap: .9rem;
}

.chat-thread {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-height: 28rem;
    overflow-y: auto;
    padding: .25rem;
}

.chat-empty {
    margin: 0;
}

.chat-turn {
    max-width: 44rem;
    padding: .65rem .85rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: var(--shadow-1);
}

.chat-turn.from-user {
    align-self: flex-end;
    background: var(--primary-50);
    border-color: var(--primary-100);
}

.chat-turn.from-astrologer {
    align-self: flex-start;
    border-left: 3px solid var(--gold-400);
}

.chat-turn.pending {
    opacity: .75;
}

.chat-role {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    font-size: .78rem;
    font-weight: 650;
    color: var(--muted);
    margin-bottom: .3rem;
}

.chat-text {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.chat-composer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.chat-input {
    width: 100%;
    resize: vertical;
    font: inherit;
    padding: .6rem .75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: inherit;
}

.chat-input:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px rgba(75, 69, 198, .18);
}

.chat-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.chat-suggestions .action-buttons {
    gap: .4rem;
}

.chat-suggestions .chip,
.chat-followups .chip {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-size: .85rem;
    padding: .4rem .8rem;
    cursor: pointer;
    text-align: left;
}

.chat-suggestions .chip:hover:not(:disabled),
.chat-followups .chip:hover:not(:disabled) {
    border-color: var(--primary-500);
    color: var(--primary);
}

/* The suggestions the astrologer returns with its answer: quieter than the starter list,
   because the conversation itself is now the main thing on screen. */
.chat-followups {
    padding-top: .85rem;
    border-top: 1px dashed var(--border);
}

.chat-followups p {
    margin-bottom: .45rem;
}

.chat-followups .chip {
    background: var(--primary-50);
    border-color: var(--primary-100);
    color: var(--primary);
}

.chat-disclaimer {
    margin: 0;
}

/* ==================================================================
   Dasa drill-down
   ================================================================== */

.dasa-levels {
    margin-bottom: .85rem;
}

.dasa-levels summary {
    cursor: pointer;
    font-size: .9rem;
    color: var(--primary);
}

.dasa-levels[open] summary {
    margin-bottom: .4rem;
}

.dasa-level {
    margin-top: 1rem;
}

.dasa-level h4 {
    margin: 0 0 .35rem;
    font-size: 1rem;
}

/* Indent each deeper level so the drill-down path reads as a hierarchy. */
.dasa-level:not([data-level="1"]) {
    border-left: 3px solid var(--border);
    padding-left: .85rem;
}

.dasa-level[data-level="2"] {
    margin-left: .75rem;
}

.dasa-level[data-level="3"] {
    margin-left: 1.5rem;
}

.dasa-level[data-level="4"] {
    margin-left: 2.25rem;
}

.dasa-level[data-level="5"] {
    margin-left: 3rem;
}

/* ==================================================================
   Responsive
   ================================================================== */

@media (max-width: 1100px) {
    .hero {
        grid-template-columns: 1fr;
        padding: 2.25rem;
    }

    .hero-visual {
        order: -1;
    }

    .kattam-mock {
        width: min(260px, 70%);
    }

    .dash-grid {
        grid-template-columns: 1fr;
    }

    .public-footer-inner {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 960px) {
    .auth-shell {
        grid-template-columns: 1fr;
        margin: 1.25rem auto;
    }

    .auth-aside {
        padding: 1.75rem;
    }

    .auth-card {
        padding: 1.75rem;
    }
}

/* The sidebar becomes a drawer, opened by the checkbox in the top bar. */
@media (max-width: 1023px) {
    .app-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: var(--shadow-3);
    }

    .nav-toggle:checked ~ .app-sidebar {
        transform: none;
    }

    .nav-toggle:checked ~ .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 35;
        background: rgba(12, 14, 34, .45);
    }

    .sidebar-toggle {
        display: inline-flex;
    }
}

@media (max-width: 900px) {
    .chart-row {
        grid-template-columns: 1fr;
    }

    .dasa-step {
        grid-template-columns: 1fr;
        gap: .2rem;
    }

    .dasa-step .level-when {
        text-align: left;
    }
}

@media (max-width: 720px) {
    .public-topbar {
        padding: .7rem 1.1rem;
        flex-wrap: wrap;
    }

    .public-nav {
        order: 3;
        width: 100%;
        margin-left: 0;
        overflow-x: auto;
    }

    .public-actions {
        border-left: 0;
        padding-left: 0;
    }

    .public-main {
        padding: 0 1.1rem 2.5rem;
    }

    .hero {
        padding: 1.75rem;
        border-radius: 20px;
    }

    .public-footer-inner {
        grid-template-columns: 1fr;
    }

    .app-main,
    .app-topbar {
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }

    .dasa-level[data-level="2"] { margin-left: .3rem; }
    .dasa-level[data-level="3"] { margin-left: .6rem; }
    .dasa-level[data-level="4"] { margin-left: .9rem; }
    .dasa-level[data-level="5"] { margin-left: 1.2rem; }
}

/* ------------------------------------------------------------------ the closed beta
   The feedback dialog, the administrator's tables and the little status pills. */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* --- feedback dialog --- */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 1rem 2rem;
    overflow-y: auto;
    background: rgba(22, 26, 60, .55);
    backdrop-filter: blur(2px);
}

.modal {
    width: 100%;
    max-width: 640px;
    padding: 1.4rem 1.5rem 1.2rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(22, 26, 60, .28);
}

.modal-head h2 {
    margin: 0 0 .3rem;
    font-size: 1.25rem;
}

.modal-head p {
    margin: 0 0 1rem;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    margin-top: 1.2rem;
}

.feedback-categories {
    margin: 0 0 1rem;
    padding: .75rem .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.feedback-categories legend {
    padding: 0 .35rem;
}

.feedback-choice {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-right: 1.1rem;
    font-size: .92rem;
    cursor: pointer;
}

.feedback-choice input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--primary);
}

.feedback-image {
    margin-top: .35rem;
}

.feedback-image-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* The browser's own file control, dressed in the app's colours: it is the reader's surest way to
   attach a screenshot, so it is shown rather than hidden behind a label. */
.feedback-image input[type=file] {
    max-width: 100%;
    font: inherit;
    font-size: .9rem;
    color: var(--muted);
}

.feedback-image input[type=file]::file-selector-button {
    margin-right: .6rem;
    padding: .5rem 1rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    background: var(--surface);
    color: var(--ink-2);
    font: inherit;
    font-weight: 550;
    cursor: pointer;
    transition: border-color .14s ease, color .14s ease;
}

.feedback-image input[type=file]::file-selector-button:hover {
    border-color: var(--primary-500);
    color: var(--primary);
}

.feedback-image-head {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: baseline;
    margin-bottom: .45rem;
}

.feedback-preview {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.feedback-preview img {
    max-width: 160px;
    max-height: 120px;
    border-radius: 8px;
    border: 1px solid var(--border);
}

.feedback-preview p {
    margin: 0 0 .4rem;
    word-break: break-all;
}

/* --- the administrator's lists --- */

.admin-table td {
    vertical-align: top;
}

.admin-detail-row td {
    padding-top: 0;
    color: var(--muted);
}

.admin-reason {
    max-width: 68ch;
    padding: .6rem .75rem;
    border-left: 3px solid var(--gold-200);
    background: var(--gold-100);
    border-radius: 0 8px 8px 0;
    font-size: .92rem;
    white-space: pre-wrap;
}

.status-pill {
    display: inline-block;
    padding: .18rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    border: 1px solid var(--border-strong);
    background: var(--surface-3);
    color: var(--ink-2);
}

.status-requested {
    border-color: var(--gold-200);
    background: var(--gold-100);
    color: var(--gold-700);
}

.status-approved {
    border-color: #b7e2d1;
    background: #e8f6f0;
    color: var(--success);
}

.status-rejected,
.status-terminated {
    border-color: var(--error-soft);
    background: var(--danger-soft);
    color: var(--danger);
}

.feedback-card {
    padding: 1rem 0;
    border-top: 1px solid var(--border);
}

.feedback-card header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
    margin-bottom: .4rem;
}

.feedback-detail {
    margin: 0 0 .6rem;
    white-space: pre-wrap;
}

.feedback-attachment img {
    max-width: min(520px, 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
    .feedback-choice {
        display: flex;
        margin: 0 0 .35rem;
    }

    .modal {
        padding: 1.1rem;
    }
}

/* ------------------------------------------------------------------ the day's almanac */

.panchang-card {
    margin-top: 1.25rem;
}

/* Core and the day's observances stack on the left, and the day's muhurtham windows run the full
   height of the card beside them. */
.panchang-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: .5rem;
}

.panchang-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (max-width: 860px) {
    .panchang-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.panchang-panel {
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
}

.panchang-panel p:last-child {
    margin-bottom: 0;
}

.panchang-panel-title {
    display: block;
    font-size: .72rem;
    font-weight: 650;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted-2);
    margin-bottom: .55rem;
}

.panchang-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .3rem .7rem;
    margin: 0 0 .6rem;
}

.panchang-list dt {
    font-size: .78rem;
    font-weight: 650;
    color: var(--muted);
}

.panchang-list dd {
    margin: 0;
    font-size: .9rem;
}

/* A window to be used and a window to be avoided have to be told apart at a glance. */
.panchang-list.good dt,
.panchang-list.good dd {
    color: var(--success);
}

.panchang-list.avoid dt,
.panchang-list.avoid dd {
    color: var(--danger);
}

.panchang-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 0 0 .6rem;
    padding: 0;
    list-style: none;
}

.panchang-highlights li {
    font-size: .82rem;
    font-weight: 600;
    color: var(--gold-700);
    background: var(--gold-100);
    border-radius: var(--radius-pill);
    padding: .15rem .6rem;
}

.panchang-note {
    margin: .7rem 0 0;
    padding-top: .6rem;
    border-top: 1px dashed var(--border);
}

/* ------------------------------------------------------------------ phones
   Most readers arrive on a phone, so on a narrow screen the app is sized for a finger and for iOS:
   every control is at least 44px tall (Apple's own guideline), no field is under 16px (iOS zooms the
   whole page when one takes focus), and the small uppercase labels are lifted out of the 11px range
   that a phone screen cannot read comfortably. */
@media (max-width: 720px) {
    .nav-link,
    .signout-link,
    .brand,
    .btn,
    .btn.small,
    .pred-tab,
    .checkbox,
    .sidebar-toggle {
        min-height: 44px;
    }

    /* The drawer's own handle, and the small table buttons, are pressed with a thumb. */
    .sidebar-toggle {
        min-width: 44px;
    }

    .btn.small {
        min-width: 44px;
    }

    .checkbox {
        display: flex;
        align-items: center;
    }

    .public-nav .nav-link {
        display: inline-flex;
        align-items: center;
    }

    /* The pickers are dropdowns in the header: a 39px one is a miss with a thumb. */
    select,
    .chart-select,
    .language-select {
        min-height: 44px;
    }

    input,
    select,
    textarea {
        font-size: 16px;
    }

    input[type="checkbox"],
    input[type="radio"] {
        width: 20px;
        height: 20px;
    }

    .eyebrow,
    .tag,
    .chip-label,
    .stat-label,
    .sidebar-group-title,
    .account-meta,
    .panchang-panel-title,
    .hero-badge,
    .muted-badge,
    .kattam-mock span {
        font-size: .78rem;
    }

    /* Named the same way the rule below it does, so the phone wins. */
    .family-row .relation-tag {
        font-size: .78rem;
    }
}