/* ═══════════════════════════════════════════════════════════════════════
   Strideward — shared base styles (Bento: light canvas, soft gradient tiles)
   Loaded by onboarding.html, career.html, academic.html, college.html BEFORE
   their inline <style>. Holds only rules identical (by value) across pages.
   Page-divergent rules (.nav-icon-btn, .content, .btn-primary[:hover],
   .btn-ghost) and @media blocks stay inline per file.
   ═══════════════════════════════════════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }
/* Form controls don't inherit color/font — keep them on the ink palette so
   native buttons/inputs read correctly on white cards. Explicit rules win. */
button, input, select, textarea { color: inherit; font-family: inherit; }
/* Give text inputs a subtle gray field (low specificity via :where so any
   explicit rule still wins) — reads as a recessed field on white cards. */
input:where(:not([type=range]):not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]):not([type=button]):not([type=submit])), textarea { background: var(--bg2); }
:root {
    /* Tell the browser the UI is light so UA-rendered pieces (autofill, form
       controls, scrollbars) paint light, not dark. */
    color-scheme: light;
    /* ── Bento: light premium — off-white canvas, indigo accent ── */
    --navy: #13151C; --blue: #38A8E8; --light-blue: rgba(56,168,232,.14);
    --green: #10B981; --amber: #F59E0B; --red: #EF4444;
    --purple: #8B5CF6; --teal: #14B8A6; --bg: #F2F3F7;
    --card: #FFFFFF; --text: #13151C; --muted: #6A7080; --border: #E7E9F0;
    --green-deep: #059669; --green-soft: rgba(16,185,129,.12);
    --purple-deep: #7C3AED; --purple-soft: rgba(255,176,32,.12);
    --amber-deep: #B45309; --blue-deep: #2563EB; --teal-deep: #0D9488;
    /* ── Strideward Brand (bento indigo: the single accent) ───────────── */
    --brand: #F4623C;          /* indigo: the single accent */
    --brand-soft: rgba(244,98,60,.10);      /* accent tint for backgrounds */
    --brand-dark: #C2451F;     /* accent hover */
    /* ── Bento structure ────────────────────────────────────────────── */
    --line: #E7E9F0;           /* hairline borders / dividers */
    --mono: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --r: 20px;                 /* corner radius dial */
    --bg2: #F2F3F7;            /* recessed field / subtle surface on white */
    --glow: 0 1px 2px rgba(19,21,28,.04), 0 12px 30px rgba(19,21,28,.07);
    --shadow-h: 0 4px 10px rgba(19,21,28,.08), 0 24px 50px rgba(19,21,28,.12);
    --orange-2: #F4623C; --violet: #8B5CF6;
    /* ── Bento gradient-tile palette ────────────────────────────────── */
    --indigo: #F4623C; --grape: #8B5CF6; --rose: #F0568A;
    --tang: #FB7A1E; --mint: #10B981; --sky: #38A8E8;
    --ink: #13151C; --ink2: #2C303B; --faint: #9DA3B2;
  }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; letter-spacing: -0.01em;
  background:
    radial-gradient(900px 600px at 85% -12%, rgba(244,98,60,.06), transparent 60%),
    radial-gradient(720px 560px at 4% 8%, rgba(255,176,32,.05), transparent 60%),
    var(--bg);
  background-attachment: fixed; }
.topnav { background: rgba(242,243,247,.82); backdrop-filter: saturate(170%) blur(20px); -webkit-backdrop-filter: saturate(170%) blur(20px); padding: 0 28px; display: flex; align-items: center; justify-content: space-between; height: 60px; position: sticky; top: 0; z-index: 100; border-bottom: 1px solid var(--line); }
.logo { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-decoration: none; }
.logo-row { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(145deg, var(--indigo), var(--grape)); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(244,98,60,.35); }
.logo-text { font-family:'Poppins',sans-serif; color: var(--ink); font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.logo-tagline { color: var(--muted); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; display: none; padding-left: 46px; }
@media (min-width: 900px) { .logo-tagline { display: block; } }
.nav-right { display: flex; align-items: center; gap: 18px; }
.nav-icon-btn:hover { color: var(--ink); background: rgba(19,21,28,.05); }
.avatar { width: 34px; height: 34px; background: linear-gradient(145deg, var(--indigo), var(--grape)); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; border: 1px solid rgba(255,255,255,.6); box-shadow: 0 4px 12px rgba(244,98,60,.3); }
.main { display: flex; flex: 1; max-width: 1100px; margin: 0 auto; width: 100%; padding: 32px 24px; gap: 28px; align-items: flex-start; }
.sidebar { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 88px; }
.sidebar-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 11px; cursor: pointer; color: var(--muted); font-size: 14px; font-weight: 500; transition: all 0.15s; border: none; background: none; text-align: left; width: 100%; text-decoration: none; font-family: inherit; }
.sidebar-item:hover { background: rgba(19,21,28,.04); color: var(--ink); }
.sidebar-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 700; box-shadow: inset 0 0 0 1px rgba(244,98,60,.22); }
.sidebar-item .si-icon { font-size: 18px; width: 22px; text-align: center; }
.sidebar-section { font-size: 10.5px; font-weight: 700; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 14px 4px; }
.page-head h1 { font-size: 24px; font-weight: 850; letter-spacing: -0.03em; }
.page-head p { font-size: 14px; color: var(--muted); margin-top: 4px; }
.btn-ghost:hover { background: var(--brand); color: #fff; }
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 12px 20px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-h); z-index: 999; opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap; }
.hidden { display: none !important; }
.bottom-nav { display: none; }
.bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--muted); text-decoration: none; background: none; border: none; font-family: inherit; cursor: pointer; }
.bn-item span { font-size: 20px; line-height: 1; }
.bn-item.active { color: var(--brand); }

/* ── Strideward card motif: white panel + left accent bar ─────────────── */
.ns-card { background: var(--card); border-radius: var(--r); padding: 24px; border: 1px solid var(--line); position: relative; box-shadow: var(--glow); }
.ns-card::before { content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--domain-accent, var(--brand)); }

/* ── Ask Strideward avatar (brand arrow) ──────────────────────────────── */
.ns-avatar { background: var(--brand); color: #fff; font-weight: 700; font-size: 16px; }

/* ═══ BENTO: keyboard focus stays unmistakable on the light canvas ═══ */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }