/* TeachMeSheets skin, loaded last on every page.
   Google surfaces (light background, white cards on soft elevation, rounded
   corners) with house personality (condensed Bricolage headlines, the Sheets
   green family, pressable buttons, fill-handle corners). Base files hold the
   layout; this file holds the look. */

:root {
  --bg: #f8fafd;
  --ink: #0f2a1a;
  --muted: #444746;
  --hair: #e1e3e1;
  --soft: #eef2f6;
  --ok: #137333;  /* 5.3:1 on --ok-soft; #188038 was 4.4:1 */
  --ok-soft: #e6f4ea;
  --mint: #e6f4ea;
  --r-panel: 28px;
  --r-card: 24px;
  --r-node: 16px;
  --lift: 0 1px 2px rgba(60, 64, 67, 0.2), 0 2px 6px 2px rgba(60, 64, 67, 0.08);
}
.nav, .player-bar { background: #fff; }
.hero { background: #e6f4ea; }
.hero-meta { color: #0d652d; }

/* Buttons: Sheets green, tactile press, no ink outline */
/* Secondary: a real green outline so the button edge reads at 3:1+ on
   white and on the pale green hero (#188038 vs #e6f4ea is about 4.4:1). */
.btn { border: 2px solid #188038; background: #fff; color: #0d652d; box-shadow: 0 3px 0 #0d652d; }
.btn:hover { box-shadow: 0 4px 0 #0d652d; background: #f3faf5; }
.btn:active { box-shadow: 0 0 0 #0d652d; }
.btn.primary { background: #188038; border-color: #188038; color: #fff; box-shadow: 0 3px 0 #0a4a22; }
.btn.primary:hover { box-shadow: 0 4px 0 #0a4a22; background: #188038; }
.btn.primary:active { box-shadow: 0 0 0 #0a4a22; }
.btn.quiet { border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); }

/* Cards: white on soft elevation, with a green fill-handle corner */
.hero-sheet, .card, .aud, .cert,
.fn-card, .gs-window, .exam, .next-card {
  position: relative;
  border: 0;
  box-shadow: var(--lift);
}
.hero-sheet, .card, .cert, .fn-card,
.gs-window, .exam { background-color: #fff; }
.hero-sheet { overflow: visible; }
.hero-sheet .hs-formula { border-radius: var(--r-card) var(--r-card) 0 0; }
.card::after, .aud::after, .hero-sheet::after, .cert::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -5px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #188038;
  border: 2px solid #fff;
}
.cert::before { border-color: #e6f4ea; }
.cert { box-shadow: var(--lift); }

.cur-section, .cur-section:last-child { border-color: var(--hair); border-width: 1px; }
.cur-section summary .num { border: 0; box-shadow: inset 0 0 0 1.5px rgba(15, 42, 26, 0.15); }
.swatch { border: 0; }
.status { border-color: #c4c7c5; border-radius: 6px; }
.done .status { background: #188038; border-color: #188038; }
.outcomes li::before { background-color: #188038; }
.bar { border: 0; background: #e1e3e1; }
.bar > span { background: #188038; }
.hero-progress .bar { background: #fff; }
.avatar { border: 0; background: #ceead6; color: #0d652d; }
.curriculum { background: #fff; }
.side-row.active { border-radius: 0 999px 999px 0; margin-right: 12px; width: calc(100% - 12px); }
.soon { border-style: solid; border-color: #c4d7cb; background: #fff; }
.xp { background: #e6f4ea; color: #0d652d; }

.stat, .inst-card { position: relative; border: 0; background: #fff; box-shadow: var(--lift); }
.stat-num { color: #0d652d; }
.cta-band { background: #0d3b22; color: #fff; }
.cta-band h2 { color: #fff; }
.cta-band .btn.primary { background: #fff; border-color: #fff; color: #0d652d; box-shadow: 0 3px 0 #a8dab5; }
.nav-links a.active::after { background: #188038; }
.nav { background: color-mix(in srgb, #fff 90%, transparent); }
.plan { border: 0; box-shadow: var(--lift); }
.plan.featured { box-shadow: 0 0 0 2px #188038, var(--lift); }
.order { box-shadow: var(--lift); }
.table-wrap { box-shadow: var(--lift); }