/* The two free courses, SQL and Python.
 *
 * Both pages carried their own inline styles and all three of the faults that
 * came with them. site.css resets every heading to inherit, so h1, h2 and h3 all
 * rendered at body size in weight 400, and the same reset strips list markers,
 * so the numbered contents showed no numbers. Everything was written in fixed
 * light colours, so in dark mode five panels fell to about 1.1 to 1 contrast,
 * which is cream text on a near white box.
 *
 * Everything here is expressed in the site's own tokens. Those are already
 * redefined for html[data-theme="dark"] and for html[data-theme="system"] under
 * prefers-color-scheme, so light, dark and system all follow with no extra
 * rules. The only values stated outright are the two reds, which have no token,
 * and the fixed navy panels that are meant to stay dark in both themes.
 *
 * The two pages use different class prefixes because each carries its own
 * JavaScript hooks. The selectors are paired rather than renamed, so no markup
 * and no script had to change.
 */

.fsq, .fpy {
  --fc-err:       #A32015;              /* 5.9:1 on white */
  --fc-warn-line: #C0392B;
  --fc-warn-bg:   color-mix(in srgb, #C0392B 8%, var(--bg-card));
  --fc-code-bg:   var(--navy);          /* fixed dark panel in both themes */
  --fc-code-ink:  #EDE5D5;
  max-width: 820px;
}

html[data-theme="dark"] .fsq, html[data-theme="dark"] .fpy {
  --fc-err: #FF9B8F;                    /* a dark red is unreadable on night navy */
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] .fsq, html[data-theme="system"] .fpy { --fc-err: #FF9B8F; }
}

/* ─── Headings ──────────────────────────────────────────────────────────────── */
/* site.css sets h1 to h6 to font-size:inherit, so a page states its own. */

.fsq h1, .fpy h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 .5em;
}
.fsq-topic h2, .fpy-topic h2 {
  font-size: clamp(1.3rem, 3vw, 1.65rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-primary);
  margin: .2em 0 .6em;
}
.fsq-topic h3, .fpy-topic h3,
.fsq-idea h3, .fpy-idea h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 1.1em 0 .4em;
}
.fsq-box h2, .fpy-box h2 {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--fc-code-ink);
  margin: .1em 0 .4em;
}

/* ─── Lists ─────────────────────────────────────────────────────────────────── */
/* site.css sets ul, ol to list-style:none, so a page states its own. */

.fsq-contents, .fpy-contents {
  list-style: decimal;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 18px 14px 36px;
  margin: 1.4em 0;
}
.fsq-contents li, .fpy-contents li { margin: .3em 0; }

.fsq-idea ul, .fpy-idea ul,
.fsq-obj ul, .fpy-obj ul,
.fsq-recap ul, .fpy-recap ul,
.fsq-words ul, .fpy-words ul {
  list-style: disc;
  padding-left: 1.4em;
  margin: .5em 0;
}
.fsq-idea li, .fpy-idea li,
.fsq-obj li, .fpy-obj li,
.fsq-recap li, .fpy-recap li { margin: .25em 0; }
.fsq-idea li::marker, .fpy-idea li::marker,
.fsq-obj li::marker, .fpy-obj li::marker,
.fsq-recap li::marker, .fpy-recap li::marker,
.fsq-contents li::marker, .fpy-contents li::marker { color: var(--gold); }

/* ─── Body ──────────────────────────────────────────────────────────────────── */

.fsq .fsq-lede, .fpy .fpy-lede {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.fsq-topic, .fpy-topic {
  border-top: 2px solid var(--border);
  margin-top: 34px;
  padding-top: 14px;
}
.fsq-num, .fpy-num {
  display: inline-block;
  min-width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
  text-align: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: .72em;
  vertical-align: .18em;
  margin-right: 8px;
}
.fsq-words dl, .fpy-words dl {
  display: grid;
  grid-template-columns: minmax(8em, 14em) 1fr;
  gap: 6px 16px;
  margin: 0;
}
.fsq-words dt, .fpy-words dt { font-weight: 700; color: var(--text-primary); }
.fsq-words dd, .fpy-words dd { margin: 0; color: var(--text-primary); }

.fsq-idea, .fpy-idea { margin: 20px 0; }

.fsq-means, .fpy-means {
  background: var(--accent-muted);
  border-left: 4px solid var(--accent);
  padding: 10px 14px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-primary);
}
.fsq-lbl, .fpy-lbl { font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }

.fsq-eg, .fpy-eg {
  border-left: 4px solid var(--gold);
  background: var(--gold-muted);
  padding: 10px 16px;
  border-radius: 0 var(--radius) var(--radius) 0;
  color: var(--text-primary);
}

.fsq-check, .fpy-check {
  /* A card, not the deeper parchment: the gold summary measures 4.1 to 1 on
     --bg-elevated in the light theme, which is under the AA floor of 4.5. */
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 12px 0;
}
.fsq-check summary, .fpy-check summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--gold);
}
.fsq-check p, .fpy-check p { color: var(--text-primary); margin: .6em 0 .2em; }

.fsq-watch, .fpy-watch {
  background: var(--fc-warn-bg);
  border: 1px solid var(--fc-warn-line);
  border-radius: var(--radius);
  padding: 10px 16px;
  color: var(--text-primary);
}
.fsq-recap ul, .fpy-recap ul { margin: 0 0 0 0; }
.fsq-ref, .fpy-ref { color: var(--text-muted); font-size: .9em; }

/* ─── Code, output and the practice box ─────────────────────────────────────── */

.fpy-run {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.fpy-code {
  background: var(--fc-code-bg);
  color: var(--fc-code-ink);
  margin: 0;
  padding: 12px 14px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: .92rem;
  line-height: 1.55;
  white-space: pre;
}
.fpy-shows { margin: 0; padding: 8px 14px 0; background: var(--bg-elevated); }
.fpy-tag {
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .05em;
}
.fpy-out {
  margin: 0;
  padding: 4px 14px 12px;
  background: var(--bg-elevated);
  font-family: var(--font-mono);
  font-size: .92rem;
  white-space: pre-wrap;
  color: var(--text-primary);
}
.fpy-out-err { color: var(--fc-err); }
.fpy-run > p:last-child { margin: 0; padding: 0 14px 12px; background: var(--bg-elevated); }
.fpy-try {
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
  font-size: .86rem;
}
.fpy-try:hover { background: var(--accent-muted); }

.fsq-box, .fpy-box {
  background: var(--fc-code-bg);
  color: var(--fc-code-ink);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  margin: 24px 0;
}
.fsq-box textarea, .fpy-box textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: .95rem;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid transparent;
  line-height: 1.5;
  background: #FFFFFF;
  color: #1B2430;
}
.fsq-box textarea { min-height: 92px; }
.fpy-box textarea { min-height: 150px; }
.fsq-box textarea:focus-visible, .fpy-box textarea:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}
.fsq-btn, .fpy-btn {
  background: var(--gold);
  color: var(--on-gold);
  border: 0;
  border-radius: 8px;
  padding: 9px 18px;
  font-weight: 700;
  cursor: pointer;
}
.fsq-btn:hover, .fpy-btn:hover { background: var(--gold-hover); }
.fsq-btn[disabled], .fpy-btn[disabled] { opacity: .6; cursor: default; }
.fsq-eg-btn, .fpy-eg-btn {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fc-code-ink);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  padding: 6px 12px;
  margin: 4px 5px 0 0;
  cursor: pointer;
  font-size: .86rem;
}
.fsq-eg-btn:hover, .fpy-eg-btn:hover { background: rgba(255, 255, 255, 0.2); }

#fsq-out, #fpy-out {
  background: #FFFFFF;
  color: #1B2430;
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 14px;
  overflow-x: auto;
  min-height: 1.4em;
}
#fpy-out { white-space: pre-wrap; font-family: var(--font-mono); font-size: .92rem; }
#fsq-out table { border-collapse: collapse; font-size: .9rem; }
#fsq-out th, #fsq-out td { border: 1px solid #D8D0C3; padding: 5px 9px; text-align: left; }
#fsq-out th { background: #F2F4F7; }
#fsq-out.fsq-err, #fpy-out.fpy-err, .fsq-err { color: #A32015; }

.fsq-note, .fpy-note { color: var(--text-muted); font-size: .9rem; margin: 6px 0 0; }
.fsq-box .fsq-note, .fpy-box .fpy-note { color: rgba(237, 229, 213, 0.75); }

/* ─── Narrow screens ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .fsq-words dl, .fpy-words dl { grid-template-columns: 1fr; }
  .fsq-words dt, .fpy-words dt { margin-top: 10px; }
  .fsq-contents, .fpy-contents { padding-left: 32px; }
}