/* ============================================================
   GEMS XL ACADEMY — Stage A theme layer (Figma "Gems Launchpad XL")
   DROP-IN OVERRIDE: link AFTER academy-theme.css so these win.
   <link href="academy-theme.css" rel="stylesheet">
   <link href="stage-a-theme.css" rel="stylesheet">

   Fonts (replace old Google Fonts line in <head>):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">

   F37 Incise swap plan: when licensed woff2 files arrive, add
   @font-face { font-family:'F37 Incise'; src:url(f37incise-*.woff2)... }
   and change ONLY --font-head / --font-body below.
   ============================================================ */

/* ---------- 1. Token remap ---------- */
:root {
  --green: #2F9B77;           /* CTA deep muted green — TO-CONFIRM exact hex */
  --mint-dark: #257a5e;       /* darker text-safe accent of the same family */
  --teal: #12262b;            /* ink, slightly softened vs #02171d */
  --gray: #E2E9EC;            /* page background */
  --panel: #ECF5F9;           /* card + button surface */
  --filler: #D1DBDF;          /* placeholder / skeleton / input filler */
  --border: rgba(18, 38, 43, .14);   /* hairline ink border */
  --muted: #55696d;
  --amber: #e88f35;           /* kept */
  --coral: #fc4f52;           /* kept */
  --wash: #6FDEC5;            /* top gradient wash color (used at 30% alpha) — mint, measured from the 2x Figma export (peak #c7eee9 over #ecf5f9); was #45B5B3 which rendered too blue-grey */
  --shadow: 0 1px 2px rgba(18, 38, 43, .05);           /* flat: near-none */
  --shadow-lift: 0 2px 8px rgba(18, 38, 43, .08);
  --shadow-deep: 0 2px 10px rgba(18, 38, 43, .10);
  --font-head: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-body: 'Schibsted Grotesk', system-ui, sans-serif;
  --font-serif: var(--font-body);   /* serif accents removed per Figma */
  --chevron: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%232F9B77' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* ---------- 2. Backdrop: one top wash, no radial mint blobs ---------- */
body {
  background:
    linear-gradient(180deg, rgba(111,222,197,.30) 0%, rgba(111,222,197,0) 340px),
    var(--gray);
  background-attachment: fixed;
  color: var(--teal);
}
::selection { background: rgba(111, 222, 197, .35); color: var(--teal); }
::placeholder { color: #7f9499; opacity: 1; }

/* Reusable top-wash treatment for any page/panel header area */
.wash-top {
  background:
    linear-gradient(180deg, rgba(111,222,197,.30) 0%, rgba(111,222,197,0) 100%);
}
/* Auth/login full-screen gates get the same single wash */
#authGate {
  background:
    linear-gradient(180deg, rgba(111,222,197,.30) 0%, rgba(111,222,197,0) 340px),
    var(--gray);
}

/* ---------- 3. Typography: interim grotesque, serif accents off ---------- */
h1, h2, h3 { letter-spacing: -0.015em; }
em, .quote em, .quote { font-style: normal; }
.quote {
  font-family: var(--font-body);
  font-size: .98rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--green);
}

/* ALL-CAPS micro-labels: keep, recolor gray-green, drop mint dash */
.page-tag, .mini .k, .stepbox .n, .brand-sub, .f-stage .lbl, #dash .sub,
.auth-card label, label {
  color: var(--mint-dark);
  letter-spacing: .14em;
}
.page-tag::before, .brand-sub::before, #dash .sub::before { display: none; }

/* ---------- 4. Kill glass: flat cards, hairline borders ---------- */
.card, .mini, .tier, .stepbox, .f-stage, .auth-card, #login {
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow);
}
.mini:hover, .stepbox:hover, .f-stage:hover, .tier:hover {
  transform: none;
  box-shadow: var(--shadow-lift);
  border-color: rgba(47, 155, 119, .5);
}
.auth-card, #login { box-shadow: var(--shadow-deep); }
#detail { background: rgba(18, 38, 43, .45); backdrop-filter: none; }
#detail .panel { background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-deep); }
#detail .item { background: var(--filler); }

/* ---------- 5. Buttons: deep muted green CTA, white text ---------- */
.btn, #gGo, #login button {
  background: var(--green);
  border-color: var(--green);
  color: #ffffff;
  box-shadow: none;
}
.btn:hover, #gGo:hover, #login button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(47, 155, 119, .6);
  filter: brightness(1.04);
}
.btn.ghost {
  background: var(--panel);
  color: var(--teal);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn.ghost:hover { border-color: var(--green); }
.btn:focus-visible, .opt:focus-visible, a:focus-visible, button:focus-visible {
  outline: 2px solid var(--mint-dark);
  outline-offset: 2px;
}

/* ---------- 6. Inputs: filler-tinted fills, hairline, muted focus ring ---------- */
input[type="text"], input[type="password"], input[type="email"], select, textarea,
.auth-card input, #login input, .tools input {
  background: #f4f9fb;               /* panel-family fill */
  border: 1px solid var(--border);
  box-shadow: none;
  color: var(--teal);
}
input:focus, select:focus, textarea:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(47, 155, 119, .18);
}
select:hover { border-color: rgba(47, 155, 119, .55); }
select option { background: var(--panel); }

/* skeleton / placeholder blocks, if present */
.skeleton, .placeholder { background: var(--filler); }

/* ---------- 7. Sidebar: light surface (Figma), not ink ---------- */
aside {
  background: var(--panel);
  color: var(--muted);
  border-right: 1px solid var(--border);
}
aside .brand { color: var(--teal); }
aside .brand-sub { color: var(--mint-dark); }
.nav-item { color: var(--muted); }
.nav-item:hover { background: rgba(111, 222, 197, .12); transform: none; }
.nav-item.active {
  background: rgba(47, 155, 119, .12);
  box-shadow: inset 2px 0 0 var(--green);
  color: var(--teal);
}
.nav-item .num { border-color: var(--green); color: var(--mint-dark); }
.nav-item.done .num { background: var(--green); color: #fff; border-color: var(--green); }
.nav-item .t small { color: var(--muted); }
.side-progress { border-top-color: var(--border); color: var(--muted); }
.side-bar { background: var(--filler); }
.side-bar > span { background: var(--green); }
.user-chip { border-top-color: var(--border); color: var(--muted); }
.user-chip a, .auth-skip a { color: var(--mint-dark); }

/* ---------- 8. Quiz ---------- */
#qOpts .opt {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}
#qOpts .opt:hover {
  border-color: var(--green) !important;
  transform: none;
  box-shadow: var(--shadow-lift);
}
.done-banner {
  background: var(--teal);
  box-shadow: var(--shadow-deep);
}

/* ---------- 9. Tables: light header band instead of ink ---------- */
table { border: 1px solid var(--border); box-shadow: var(--shadow); }
th {
  background: #d7e3e7;               /* light gray-green band */
  color: var(--teal);
}
tbody tr:hover td { background: rgba(111, 222, 197, .08); }
.pt-table th { background: #d7e3e7; color: var(--teal); }

/* ---------- 10. Admin bits ---------- */
.tools button { background: var(--teal); }
#login button { width: 100%; }
#dash tbody tr:hover td { background: rgba(111, 222, 197, .08); }

/* ---------- 11. Creator / drafts ---------- */
#gGoal, #gPlatform { background-color: var(--panel); }
#gDraft, [id^="tpl-"] {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
}

/* ---------- 12. Errors / warnings kept ---------- */
.auth-err, .notice.err {
  background: rgba(252, 79, 82, .08);
  border: 1px solid rgba(252, 79, 82, .35);
  color: #b71f22;
}
.disclaimer {
  background: rgba(232, 143, 53, .1);
  border-color: rgba(232, 143, 53, .35);
  color: #8a5417;
}

/* ---------- 13. mnav (mobile shell) + misc component surfaces ---------- */
.mnav-appbar, .mnav-bottom {
  background: var(--panel);
  border-color: var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow);
}
.mnav-tab { background: var(--panel); border: 1px solid var(--border); color: var(--muted); }
.mnav-tab.mnav-on, .mnav-tab.active { background: var(--green); border-color: var(--green); color: #fff; }
.mnav-bitem.mnav-on { color: var(--mint-dark); }
.pt-panel, .lc-panel, .lc-tile, .c3-panel, .lib4-row, .cc-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: var(--shadow);
}
.pt-chip, .lc-chip, .c3-seg-btn {
  background: var(--panel);
  border: 1px solid var(--border);
}
.lc-badge, .pub5-approved { background: rgba(47,155,119,.12); color: var(--mint-dark); border-color: rgba(47,155,119,.3); }