/* ====================================================================
   COZMIC LITE — PARENT DESIGN SYSTEM           (2026-10-04)

   One stylesheet for every Cozmic Lite parent surface: the dashboard,
   Reports, Time Limits, Manage Students, Email Preferences, Updates
   and the Lesson Plan library.

   Owner-approved direction: the editorial flow of langfontes.com —
   a statement, numbered wayfinding, alternating sections, a
   full-width expansion, a narrowing close — carried in the Cozmic
   theme lifted off near-black into twilight.

   DESIGN ONLY. No route, handler, query or template logic is touched
   by this file; it restyles markup that already exists.

   The rules every Lite page follows:
     1. Nothing is a card. Entries, indexes and hairline rules.
     2. One measure — every band shares the same column.
     3. Fraunces carries the voice, Inter carries the text.
     4. Colour means something: cyan interactive, gold money,
        green on track, amber needs attention. Never decoration.
     5. Numbers are typeset — tabular figures, one scale.
     6. Air at every conceptual shift.

   Scoped to .cozmic-lite on <body> so no other product is affected.
   ==================================================================== */

.cozmic-lite {
    --cl-sky:        #131a2e;
    --cl-sky-2:      #1b2340;
    --cl-panel:      #1d2644;
    --cl-rule:       rgba(255, 255, 255, .10);
    --cl-rule-soft:  rgba(255, 255, 255, .06);
    --cl-ink:        #eef2fa;
    --cl-ink-2:      #b4bed4;
    --cl-muted:      #7d89a6;
    --cl-cyan:       #00f2ff;
    --cl-cyan-soft:  #7fe9f3;
    --cl-ok:         #6fe0ab;
    --cl-watch:      #ffc36b;
    --cl-gold:       #ffd54f;
    --cl-disp: 'Fraunces', 'Poppins', ui-serif, Georgia, serif;
    --cl-body: 'Inter', 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* ---- the ground: twilight, not the void --------------------------- */
body.cozmic-lite {
    background:
        radial-gradient(1px 1px at 14% 9%,  rgba(255,255,255,.30), transparent),
        radial-gradient(1px 1px at 78% 16%, rgba(255,255,255,.22), transparent),
        radial-gradient(1px 1px at 42% 30%, rgba(255,255,255,.16), transparent),
        radial-gradient(1px 1px at 88% 52%, rgba(255,255,255,.20), transparent),
        radial-gradient(1px 1px at 24% 71%, rgba(255,255,255,.14), transparent),
        linear-gradient(180deg, var(--cl-sky) 0%, var(--cl-sky-2) 46%, var(--cl-sky) 100%);
    background-attachment: fixed;
    color: var(--cl-ink);
    font-family: var(--cl-body);
    font-size: 17px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
.cozmic-lite .stars { display: none; }

/* ---- one measure -------------------------------------------------- */
.cozmic-lite .container,
.cozmic-lite .content-wrapper,
.cozmic-lite main > .container {
    max-width: 1080px;
    padding-left: 40px;
    padding-right: 40px;
}

/* ---- page headers: a statement, left-aligned, with air ------------ */
.cozmic-lite .page-header {
    text-align: left;
    margin: 0 0 54px;
    padding: 72px 0 0;
    border-bottom: 1px solid var(--cl-rule);
    padding-bottom: 34px;
}
.cozmic-lite .page-title {
    font-family: var(--cl-disp);
    font-weight: 400;
    font-size: clamp(32px, 4.6vw, 48px);
    line-height: 1.16;
    letter-spacing: -.022em;
    margin: 0;
    max-width: 20ch;
    /* the gradient-text treatment is what read as "vibecoded" */
    background: none;
    -webkit-background-clip: border-box;
    -webkit-text-fill-color: var(--cl-ink);
    background-clip: border-box;
    color: var(--cl-ink);
}
.cozmic-lite .page-subtitle {
    font-size: 19px;
    line-height: 1.65;
    color: var(--cl-ink-2);
    max-width: 54ch;
    margin: 22px 0 0;
}

/* ---- panels become sections, not glass boxes ---------------------- */
.cozmic-lite .control-box,
.cozmic-lite .card,
.cozmic-lite .panel,
.cozmic-lite .settings-box,
.cozmic-lite .form-box {
    max-width: none;
    width: auto;
    margin: 0 0 40px;
    background: none;
    border: 0;
    border-top: 1px solid var(--cl-rule-soft);
    border-radius: 0;
    padding: 34px 0 0;
    box-shadow: none;
    backdrop-filter: none;
}
.cozmic-lite .control-box:first-of-type,
.cozmic-lite .card:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.cozmic-lite .card-title,
.cozmic-lite .section-title,
.cozmic-lite .box-title {
    font-family: var(--cl-disp);
    font-weight: 500;
    font-size: 15px;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--cl-ink);
    margin: 0 0 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    -webkit-text-fill-color: var(--cl-ink);
}

/* ---- the index: how every list of destinations looks -------------- */
.cozmic-lite .action-grid,
.cozmic-lite .link-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 16px;
    border-top: 1px solid var(--cl-rule-soft);
}
@media (min-width: 760px) {
    .cozmic-lite .action-grid,
    .cozmic-lite .link-grid { grid-template-columns: 1fr 1fr; column-gap: 56px; }
}
.cozmic-lite .action-card {
    background: none !important;
    border: 0;
    border-bottom: 1px solid var(--cl-rule-soft);
    border-radius: 0;
    padding: 16px 0;
    text-align: left;
    box-shadow: none;
    display: flex;
    align-items: baseline;
    gap: 14px;
    color: var(--cl-ink);
    transition: color .16s;
}
.cozmic-lite .action-card:hover {
    background: none !important;
    transform: none;
    box-shadow: none;
    color: var(--cl-cyan-soft);
}
.cozmic-lite .action-icon { font-size: 1rem; margin: 0; opacity: .75; }
.cozmic-lite .action-title {
    font-size: 16.5px; font-weight: 500; color: inherit; margin: 0;
}

/* ---- forms: quiet, serious, aligned ------------------------------- */
.cozmic-lite label,
.cozmic-lite .field-label {
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--cl-muted);
}
.cozmic-lite input[type="text"],
.cozmic-lite input[type="email"],
.cozmic-lite input[type="number"],
.cozmic-lite input[type="password"],
.cozmic-lite select,
.cozmic-lite textarea {
    background: rgba(0, 0, 0, .22);
    border: 1px solid var(--cl-rule);
    border-radius: 6px;
    color: var(--cl-ink);
    font-family: var(--cl-body);
    font-size: 16px;
    padding: 12px 14px;
    transition: border-color .16s;
}
.cozmic-lite input:focus,
.cozmic-lite select:focus,
.cozmic-lite textarea:focus {
    outline: none;
    border-color: rgba(0, 242, 255, .5);
}

/* one primary action per page; everything else is a quiet link */
.cozmic-lite .btn,
.cozmic-lite .btn-primary,
.cozmic-lite button[type="submit"],
.cozmic-lite .save-btn {
    background: rgba(0, 242, 255, .10);
    border: 1px solid rgba(0, 242, 255, .42);
    border-radius: 7px;
    color: var(--cl-cyan-soft);
    font-family: var(--cl-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
    padding: 12px 22px;
    box-shadow: none;
    text-transform: none;
    transition: background .16s, border-color .16s;
}
.cozmic-lite .btn:hover,
.cozmic-lite .btn-primary:hover,
.cozmic-lite button[type="submit"]:hover,
.cozmic-lite .save-btn:hover {
    background: rgba(0, 242, 255, .17);
    border-color: rgba(0, 242, 255, .6);
    transform: none;
    box-shadow: none;
}
.cozmic-lite .btn-secondary,
.cozmic-lite .btn-ghost {
    background: none;
    border: 1px solid var(--cl-rule);
    color: var(--cl-ink-2);
    box-shadow: none;
}

/* ---- data: tables and figures ------------------------------------- */
.cozmic-lite table { width: 100%; border-collapse: collapse; }
.cozmic-lite th {
    text-align: left;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cl-muted);
    padding: 12px 0;
    border-bottom: 1px solid var(--cl-rule);
}
.cozmic-lite td {
    padding: 15px 0;
    border-bottom: 1px solid var(--cl-rule-soft);
    font-size: 16px;
    color: var(--cl-ink-2);
}
.cozmic-lite td strong, .cozmic-lite td b { color: var(--cl-ink); font-weight: 600; }
.cozmic-lite .num,
.cozmic-lite .stat-value,
.cozmic-lite .metric-value {
    font-family: var(--cl-disp);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    color: var(--cl-ink);
}

/* figures with room to breathe */
.cozmic-lite .stats-grid,
.cozmic-lite .metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 36px;
    margin: 0;
}
.cozmic-lite .stat-box,
.cozmic-lite .metric-box {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    text-align: left;
}
.cozmic-lite .stat-box h3,
.cozmic-lite .metric-label {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--cl-muted);
    margin-top: 10px;
}
.cozmic-lite .stat-box p {
    font-family: var(--cl-disp);
    font-weight: 400;
    font-size: 44px;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--cl-ink);
    margin: 0;
}

/* ---- status, the only place colour is allowed to mean -------------- */
.cozmic-lite .status-ok,    .cozmic-lite .on-level  { color: var(--cl-ok); }
.cozmic-lite .status-watch, .cozmic-lite .needs-work{ color: var(--cl-watch); }

/* ---- empty states: a sentence, not a shrug ------------------------- */
.cozmic-lite .empty-state,
.cozmic-lite .no-data {
    text-align: left;
    padding: 34px 0;
    color: var(--cl-muted);
    font-size: 16.5px;
    border-top: 1px solid var(--cl-rule-soft);
}
.cozmic-lite .empty-state-icon { display: none; }

/* ---- back links --------------------------------------------------- */
.cozmic-lite .back-link,
.cozmic-lite a.back {
    display: inline-block;
    margin-bottom: 26px;
    font-size: 15px;
    color: var(--cl-ink-2);
    text-decoration: none;
    border-bottom: 1px solid var(--cl-rule);
    padding-bottom: 2px;
    background: none;
}
.cozmic-lite .back-link:hover { color: var(--cl-cyan-soft); }

@media (max-width: 720px) {
    .cozmic-lite .container,
    .cozmic-lite .content-wrapper { padding-left: 22px; padding-right: 22px; }
    .cozmic-lite .page-header { padding-top: 48px; margin-bottom: 38px; }
}

/* ---- sitewide chrome that fights the editorial voice ---------------- */

/* style.css:276 draws a rainbow bar under every .page-title. */
.cozmic-lite .page-title::after,
.cozmic-lite h1::after { display: none; }

/* Pages centre their own headers inline; the voice is left-aligned. */
.cozmic-lite .page-header,
.cozmic-lite .page-header * { text-align: left; }

/* `background-attachment: fixed` paints only the viewport, so scrolling a
   long page revealed the sitewide near-black beneath the twilight. Letting
   the gradient scroll with the document fixes it with one property and no
   root-element rule — an unscoped `html {}` here would reach every page on
   the site, not just Cozmic Lite. */
body.cozmic-lite {
    min-height: 100vh;
    background-color: var(--cl-sky);
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

/* Preset / chip buttons: one calm set, cyan only on the chosen one. */
.cozmic-lite .btn-preset,
.cozmic-lite .preset-btn,
.cozmic-lite .chip {
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--cl-rule);
    border-radius: 7px;
    color: var(--cl-ink-2);
    font-family: var(--cl-body);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 18px;
    box-shadow: none;
    transition: border-color .16s, color .16s, background .16s;
}
.cozmic-lite .btn-preset:hover,
.cozmic-lite .preset-btn:hover,
.cozmic-lite .chip:hover {
    border-color: rgba(0, 242, 255, .45);
    color: var(--cl-ink);
    background: rgba(0, 242, 255, .06);
    transform: none;
}
.cozmic-lite .btn-preset.active,
.cozmic-lite .preset-btn.active,
.cozmic-lite .chip.active {
    border-color: rgba(0, 242, 255, .55);
    color: var(--cl-cyan-soft);
    background: rgba(0, 242, 255, .10);
}

/* Info panels ("How it works") read as an aside, not a glowing box. */
.cozmic-lite .info-box,
.cozmic-lite .help-box,
.cozmic-lite .note-box {
    background: none;
    border: 0;
    border-left: 1px solid var(--cl-rule);
    border-radius: 0;
    padding: 4px 0 4px 20px;
    box-shadow: none;
    color: var(--cl-ink-2);
}
.cozmic-lite .info-box h4,
.cozmic-lite .info-box strong:first-child {
    font-family: var(--cl-disp);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cl-muted);
}
.cozmic-lite .info-box li { font-size: 15.5px; padding: 3px 0; }

/* ====================================================================
   HOMESCHOOL PAGES (2026-10-04)

   The Cozmic Full homeschool surface — Gradebook, Assignments, Lesson
   Plans, Curriculum Map, Assignment Wizard, Safety — shares an `hs-*`
   class convention plus a few page-local names. Bringing them into the
   same system means a parent crossing from the dashboard into any tool
   stays in one visual world.
   ==================================================================== */

/* page heroes become statements, not slabs */
.cozmic-lite .hs-hero,
.cozmic-lite .header-box {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--cl-rule);
    border-radius: 0;
    padding: 56px 0 30px;
    margin: 0 0 34px;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 22px;
}
.cozmic-lite .hs-hero h1,
.cozmic-lite .header-box h1 {
    font-family: var(--cl-disp);
    font-weight: 400;
    font-size: clamp(28px, 3.8vw, 42px);
    line-height: 1.16;
    letter-spacing: -.022em;
    margin: 0;
    color: var(--cl-ink);
    background: none;
    -webkit-text-fill-color: var(--cl-ink);
}
.cozmic-lite .hs-hero p,
.cozmic-lite .header-box p {
    font-size: 18px;
    color: var(--cl-ink-2);
    margin: 10px 0 0;
    max-width: 56ch;
}
/* Cozmo keeps his place, quieter — he is the guide, not a badge */
.cozmic-lite .cozmo-pose {
    width: 64px; height: 64px;
    border-radius: 50%;
    border: 1px solid rgba(0, 242, 255, .3);
    box-shadow: 0 0 22px rgba(0, 242, 255, .10);
    flex: 0 0 auto;
}

/* cards become entries */
.cozmic-lite .hs-card,
.cozmic-lite .card-body,
.cozmic-lite .info-box {
    background: none;
    border: 0;
    border-top: 1px solid var(--cl-rule-soft);
    border-radius: 0;
    padding: 26px 0;
    margin: 0;
    box-shadow: none;
    backdrop-filter: none;
}
.cozmic-lite .hs-card:first-of-type { border-top: 0; padding-top: 0; }
.cozmic-lite .hs-card h2,
.cozmic-lite .hs-card h3 {
    font-family: var(--cl-disp);
    font-weight: 500;
    letter-spacing: -.01em;
    color: var(--cl-ink);
}

/* one button idiom across every homeschool tool */
.cozmic-lite .hs-btn,
.cozmic-lite .gen-btn {
    background: rgba(0, 242, 255, .10);
    border: 1px solid rgba(0, 242, 255, .42);
    border-radius: 7px;
    color: var(--cl-cyan-soft);
    font-family: var(--cl-body);
    font-size: 15px;
    font-weight: 500;
    padding: 11px 20px;
    box-shadow: none;
    text-transform: none;
    letter-spacing: 0;
    transition: background .16s, border-color .16s;
}
.cozmic-lite .hs-btn:hover,
.cozmic-lite .gen-btn:hover {
    background: rgba(0, 242, 255, .17);
    border-color: rgba(0, 242, 255, .6);
    transform: none;
    box-shadow: none;
}
/* colour still means something: destructive is the one exception */
.cozmic-lite .hs-btn.danger {
    background: rgba(255, 138, 160, .09);
    border-color: rgba(255, 138, 160, .4);
    color: #ff8aa0;
}
.cozmic-lite .hs-btn.ghost {
    background: none;
    border-color: var(--cl-rule);
    color: var(--cl-ink-2);
}
.cozmic-lite .hs-btn.active,
.cozmic-lite .brand.active { color: var(--cl-cyan-soft); }

/* empty states: a sentence, left-aligned, no shrug icon */
.cozmic-lite .hs-empty {
    background: none;
    border: 0;
    border-top: 1px solid var(--cl-rule-soft);
    border-radius: 0;
    padding: 32px 0;
    text-align: left;
    color: var(--cl-muted);
    font-size: 16.5px;
    box-shadow: none;
}

/* score / status pills read as status, not decoration */
.cozmic-lite .score-pill,
.cozmic-lite .overall-pill,
.cozmic-lite [class*="-pill"] {
    font-family: var(--cl-disp);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    border-radius: 999px;
    box-shadow: none;
}

/* the brand lockup in each tool's own topbar */
.cozmic-lite .brand {
    font-family: var(--cl-disp);
    font-weight: 600;
    color: var(--cl-ink);
    background: none;
    -webkit-text-fill-color: var(--cl-ink);
}

/* an unclassed white panel ships inside a shared include; the twilight
   ground must win over it wherever it lands */
.cozmic-lite div[style*="background: #fff"],
.cozmic-lite div[style*="background:#fff"],
.cozmic-lite div[style*="background: white"] {
    background: var(--cl-panel) !important;
    border: 1px solid var(--cl-rule) !important;
    color: var(--cl-ink-2) !important;
}

/* ====================================================================
   SAFETY & MODERATION  (owner 2026-10-04)

   Reached from Family Settings on the Full dashboard. It carried its
   own vocabulary — incident cards, stat tiles, a filter bar — in the
   old boxed idiom. Same information, same controls, our system.
   ==================================================================== */

/* the family's safety numbers: typeset, not tiled */
.cozmic-lite .stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 36px;
    margin: 0 0 40px;
    background: none;
    border: 0;
    padding: 0;
}
.cozmic-lite .stat-card {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    text-align: left;
}
/* 42px is the HERO size: one big number in a stat-card, label beneath.
   It must stay scoped to .stats-row/.stat-card. Unscoped, it also caught
   `.stat-value` where that class means a small field in a per-student
   details grid (homeschool_dashboard's .stats-grid), rendering "Plan",
   "Avg Score" and "Joined" at 42px display serif — they collided with each
   other and sat beside a 14px Email, which is the mismatched-column-sizes
   and overlapping-text bug the owner reported 2026-10-04. */
.cozmic-lite .stats-row .stat-value,
.cozmic-lite .stat-card .stat-value {
    font-family: var(--cl-disp);
    font-weight: 400;
    font-size: 42px;
    letter-spacing: -.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--cl-ink);
}
.cozmic-lite .stats-row .stat-label,
.cozmic-lite .stat-card .stat-label {
    font-size: 14px;
    color: var(--cl-muted);
    margin-top: 10px;
    letter-spacing: 0;
    text-transform: none;
}

/* an incident is an entry in a log, not a card */
.cozmic-lite .incidents-list {
    /* the page's own CSS paints this container WHITE; the pale grey
       text inside it was then unreadable (owner: "it has white on
       white text"). Measured in the browser — the panel itself is
       transparent, so the colour had to be cleared here. */
    background: none;
    border: 0;
    border-top: 1px solid var(--cl-rule-soft);
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}
.cozmic-lite .incident-item {
    background: none;
    border: 0;
    border-bottom: 1px solid var(--cl-rule-soft);
    border-radius: 0;
    padding: 22px 0;
    margin: 0;
    box-shadow: none;
}
.cozmic-lite .incident-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.cozmic-lite .incident-question {
    font-family: var(--cl-disp);
    font-weight: 500;
    font-size: 18px;
    letter-spacing: -.01em;
    color: var(--cl-ink);
    margin: 0 0 6px;
}
.cozmic-lite .incident-meta {
    font-size: 13.5px;
    color: var(--cl-muted);
    font-variant-numeric: tabular-nums;
}
/* the reason a message was blocked is the point of the page */
.cozmic-lite .incident-reason {
    font-size: 15px;
    color: var(--cl-ink-2);
    border-left: 1px solid var(--cl-watch);
    padding: 2px 0 2px 16px;
    margin-top: 10px;
    background: none;
    border-radius: 0;
}

/* filters: one quiet row, the active one in cyan */
.cozmic-lite .filter-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--cl-rule);
    border-radius: 0;
    padding: 0 0 18px;
    margin: 0 0 8px;
    box-shadow: none;
}
.cozmic-lite .filter-bar a,
.cozmic-lite .filter-bar button {
    background: none;
    border: 1px solid var(--cl-rule);
    border-radius: 7px;
    color: var(--cl-ink-2);
    font-size: 14px;
    font-weight: 500;
    padding: 8px 15px;
    text-decoration: none;
    box-shadow: none;
    transition: border-color .16s, color .16s, background .16s;
}
.cozmic-lite .filter-bar a:hover,
.cozmic-lite .filter-bar button:hover {
    border-color: rgba(0, 242, 255, .45);
    color: var(--cl-ink);
    background: rgba(0, 242, 255, .06);
}
.cozmic-lite .filter-bar .active {
    border-color: rgba(0, 242, 255, .55);
    color: var(--cl-cyan-soft);
    background: rgba(0, 242, 255, .10);
}

/* "nothing has happened" is good news — say it calmly, in green */
.cozmic-lite .no-incidents {
    background: none;
    border: 0;
    border-left: 1px solid var(--cl-ok);
    border-radius: 0;
    padding: 6px 0 6px 20px;
    margin-top: 26px;
    text-align: left;
    color: var(--cl-ink-2);
    font-size: 16.5px;
    box-shadow: none;
}
.cozmic-lite .no-incidents-icon { display: none; }

/* an alert banner is the one place this page raises its voice */
.cozmic-lite .alert-banner {
    background: linear-gradient(135deg, rgba(255, 195, 107, .06), transparent 60%),
                var(--cl-panel);
    border: 1px solid rgba(255, 195, 107, .3);
    border-radius: 10px;
    box-shadow: none;
    padding: 18px 20px;
}
.cozmic-lite .alert-icon { opacity: .9; }

/* its own topbar joins the rest of the system */
.cozmic-lite .topbar-link {
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    padding: 0 0 2px;
    color: var(--cl-ink-2);
    font-size: 14.5px;
    font-weight: 500;
    box-shadow: none;
}
.cozmic-lite .topbar-link:hover {
    color: var(--cl-ink);
    border-bottom-color: var(--cl-cyan);
    background: none;
}

/* The "About Content Moderation" panel carried an inline
   background:white, which outranks any stylesheet and put pale grey
   text on a white box — unreadable. Now a quiet aside. */
.cozmic-lite .safety-about {
    background: none;
    border: 0;
    border-top: 1px solid var(--cl-rule-soft);
    border-radius: 0;
    padding: 26px 0 0;
    margin-top: 34px;
    box-shadow: none;
    color: var(--cl-ink-2);
}
.cozmic-lite .safety-about h3 {
    font-family: var(--cl-disp);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--cl-muted);
    margin: 0 0 12px;
}
.cozmic-lite .safety-about li { font-size: 15.5px; padding: 4px 0; }
.cozmic-lite .safety-about strong { color: var(--cl-ink); }

/* ====================================================================
   PRODUCT SWITCHER  (owner 2026-10-04: "i dont like how cheap beyond
   the stars, orbit prep, and cozmic lite pills look")

   Each pill was a long inline style= plus two onmouseover handlers, in
   a different colour per product — lavender, cyan, gold — so they read
   as four unrelated buttons rather than one set of doors. Now one
   class, one idiom, hover in CSS.
   ==================================================================== */
.cozmic-lite .product-switcher {
    /* These are not buttons competing with the page — they are the
       doors between products a family owns. A segmented control says
       "you are here, and these are the other rooms"; pills just looked
       like three more things to press (owner 2026-10-04, twice).
       One surface, hairline dividers, no gaps. */
    display: inline-flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0;
    max-width: none;
    margin: 0 0 30px;
    padding: 4px;
    background: rgba(255, 255, 255, .025);
    border: 1px solid var(--cl-rule);
    border-radius: 12px;
    box-shadow: none;
}
.cozmic-lite .product-switcher::before { content: none; }

.cozmic-lite .psw-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border: 0;
    border-radius: 8px;
    background: none;
    /* legible at rest: muted grey made the whole control recede */
    color: var(--cl-ink-2) !important;
    font-family: var(--cl-body);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: none;
    transition: color .18s, background .18s;
    position: relative;
}
/* the product mark carries the colour, the label stays calm */
.cozmic-lite .psw-pill > span:first-child{
    color: var(--cl-cyan-soft);
    opacity: .85;
    display: inline-flex;
    align-items: center;
}
/* hairline between doors, not around each one */
.cozmic-lite .psw-pill + .psw-pill::before {
    content: "";
    position: absolute;
    left: 0; top: 22%; bottom: 22%;
    width: 1px;
    background: var(--cl-rule);
}
.cozmic-lite .psw-pill:hover {
    color: var(--cl-ink) !important;
    background: rgba(255, 255, 255, .05);
    transform: none;
}
.cozmic-lite .psw-pill:hover::before,
.cozmic-lite .psw-pill:hover + .psw-pill::before { opacity: 0; }

/* the room you are standing in */
.cozmic-lite .psw-pill[aria-current],
.cozmic-lite .psw-pill.current {
    background: rgba(0, 242, 255, .11);
    color: var(--cl-cyan-soft) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 242, 255, .3);
}