/* ════════════════════════════════════════════════════════
   Study notes — skin
   Each note ships its own token names; this file maps them
   onto the portfolio palette and type so they read as one site.
   Selectors carry `html:root` so they outrank the notes' own
   :root / [data-theme] rules regardless of order.
   ════════════════════════════════════════════════════════ */

html:root {
  --f-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

html:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:          #08090c;
  --ink:         #e9ebf2;
  --line:        rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .16);
  --faint:       #6e7488;

  /* express drill */
  --surface:     #101219;
  --muted:       #a2a8ba;
  --accent:      #7c6cff;
  --accent-soft: rgba(124, 108, 255, .14);
  --code-bg:     #0b0d12;

  /* python cheatsheet */
  --panel:       #101219;
  --mute:        #a2a8ba;
  --acc:         #8f82ff;
  --hl:          rgba(124, 108, 255, .12);
  --hlb:         #7c6cff;
  --code:        #0b0d12;
}

html:root[data-theme="light"] {
  color-scheme: light;
  --bg:          #f7f7f9;
  --ink:         #14161d;
  --line:        rgba(10, 12, 20, .10);
  --line-strong: rgba(10, 12, 20, .20);
  --faint:       #7d8395;

  --surface:     #ffffff;
  --muted:       #4f5567;
  --accent:      #5b46f0;
  --accent-soft: rgba(91, 70, 240, .10);
  --code-bg:     #f1f1f5;

  --panel:       #ffffff;
  --mute:        #4f5567;
  --acc:         #5b46f0;
  --hl:          rgba(91, 70, 240, .08);
  --hlb:         #5b46f0;
  --code:        #f1f1f5;
}

/* the drill toggles panels with [hidden]; keep it winning over display:grid */
[hidden]:not([hidden="until-found" i]) { display: none !important; }

::selection { background: var(--accent, var(--acc)); color: var(--bg); }

body.notes-page {
  -webkit-font-smoothing: antialiased;
  letter-spacing: -.005em;
}

/* ── top bar (shared) ─────────────────────────────────── */
.nb {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 0 4px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .04em;
}
.notes-python .nb { max-width: 852px; padding-inline: 16px; }

.nb__back,
.nb__theme {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-size: 15px;
  text-decoration: none;
  transition: color .2s, border-color .2s, transform .2s cubic-bezier(.22, 1, .36, 1);
}
.nb__back:hover,
.nb__theme:hover { color: var(--accent); border-color: var(--line-strong); transform: translateY(-1px); }
.nb__theme { margin-left: auto; padding: 0; cursor: pointer; }

.nb__crumb { color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb__crumb a { color: var(--muted); text-decoration: none; }
.nb__crumb a:hover { color: var(--accent); }

/* ── express drill ────────────────────────────────────── */
.notes-express h1 { font-size: clamp(30px, 5.4vw, 46px); letter-spacing: -.035em; }
.notes-express h2 { letter-spacing: -.02em; }
.notes-express .layer,
.notes-express .pocket .card,
.notes-express .bcard,
.notes-express .issue,
.notes-express .summary .s,
.notes-express pre.tree,
.notes-express pre.code,
.notes-express .refl,
.notes-express .rwork textarea,
.notes-express .callout { border-radius: 14px; }
.notes-express .btn,
.notes-express .mode { border-radius: 999px; }
.notes-express .btn.primary { color: #fff; }
.notes-express .mode button[aria-pressed="true"] { color: #fff; }
.notes-express .layer,
.notes-express .bcard,
.notes-express .issue { transition: border-color .25s; }
.notes-express .layer:hover { border-color: var(--accent); }
/* pocket cards overflowed narrow phones: let the min track shrink and long code wrap */
.notes-express .pocket { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.notes-express .pocket dt,
.notes-express .pocket dd { min-width: 0; overflow-wrap: anywhere; }

/* ── python cheatsheet ────────────────────────────────── */
.notes-python { font-family: var(--f-body); }
.notes-python h1,
.notes-python h2,
.notes-python h3 { font-family: var(--f-display); }
.notes-python h1,
.notes-python h2 { font-weight: 700; letter-spacing: -.03em; }
.notes-python #th { display: none; }              /* the top bar's toggle replaces it */
.notes-python header { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.notes-python nav a { font-family: var(--f-mono); font-size: .76rem; transition: color .2s, border-color .2s; }
.notes-python nav a:hover { color: var(--acc); border-color: var(--acc); }
.notes-python #q { border-radius: 12px; }
.notes-python #q:focus { border-color: var(--acc); outline: none; }
.notes-python pre { border-radius: 12px; font-family: var(--f-mono); }
.notes-python .mn { border-radius: 0 10px 10px 0; }
.notes-python th { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; }