/* 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; }
}

/* ─── The free course cards ─────────────────────────────────────────────────── */
/* Shared by the home page, the catalogue and /free-courses/. Tokens only, so the
   cards follow the theme the same way the course pages do. */

.fc-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0;
}
.fc-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.15rem 1.25rem;
  background: var(--bg-card);
  color: var(--text-primary);
}
.fc-card:hover { border-color: var(--gold); }
.fc-card-tag {
  font-size: .68rem;
  font-weight: 700;
  color: var(--on-gold);
  background: var(--gold);
  border-radius: 20px;
  padding: .15rem .6rem;
  align-self: flex-start;
  margin: 0 0 .6rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fc-card-name { font-size: 1rem; font-weight: 800; color: var(--text-primary); line-height: 1.35; }
.fc-card-summary { font-size: .88rem; color: var(--text-muted); line-height: 1.55; margin: .5rem 0 0; }
.fc-card-teaches { list-style: disc; padding-left: 1.3em; margin: .7rem 0 0; }
.fc-card-teaches li { font-size: .86rem; color: var(--text-primary); margin: .15rem 0; }
.fc-card-teaches li::marker { color: var(--gold); }
.fc-card-meta { font-size: .82rem; color: var(--text-muted); margin: .7rem 0 0; }
.fc-card-not { font-size: .82rem; font-weight: 700; color: var(--text-primary); margin: .35rem 0 0; }
.fc-card-go { font-size: .85rem; font-weight: 700; color: var(--gold); margin: .9rem 0 0; }

/* The band the free course cards sit on, on the home page and the catalogue.
   Asked for on 8 October 2026 so the free courses catch the eye: on the cream
   page they were white cards like every other card. The accent pair is the
   site's own, so it is navy with white type in the light theme and gold with
   dark ink in the dark one, and the white cards stand out against either. */
.fc-band {
  background: var(--accent);
  color: var(--on-accent);
  border-radius: var(--radius-lg, 18px);
  padding: 2rem 1.5rem;
}
.fc-band-title { font-size: 1.6rem; font-weight: 800; line-height: 1.25; color: var(--on-accent); margin: 0 0 .5rem; }
.fc-band-intro { font-size: 1rem; line-height: 1.7; max-width: 65ch; color: var(--on-accent); opacity: .88; margin: 0 0 .5rem; }
.fc-band .fc-card { border-color: transparent; border-left-color: var(--gold); }
.fc-band .fc-card:hover { border-color: var(--gold); }

/* ─── The start panel ───────────────────────────────────────────────────────── */
/* Every control states its own colour and its own background, which is what
   config/test_free_course_controls.py requires and why the practice box was
   once invisible. */

.fc-start {
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  padding: 1.1rem 1.25rem;
  margin: 1.5rem 0;
}
.fc-start-head { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .4rem; }
.fc-start-note { font-size: .92rem; color: var(--text-primary); line-height: 1.6; margin: 0 0 .9rem; max-width: 62ch; }
.fc-start-form { display: flex; flex-direction: column; gap: .55rem; max-width: 34rem; }
.fc-start-label { font-size: .82rem; font-weight: 700; color: var(--text-primary); }
.fc-start-input {
  font-size: 1rem;
  padding: .6rem .7rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-primary);
}
.fc-start-input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.fc-start-consent { display: flex; gap: .55rem; align-items: flex-start; font-size: .88rem; color: var(--text-primary); line-height: 1.5; }
.fc-start-consent input {
  margin: .2rem 0 0;
  accent-color: var(--gold);
  background: var(--bg-card);
  color: var(--text-primary);
}
.fc-start-btn {
  align-self: flex-start;
  background: var(--gold);
  color: var(--on-gold);
  border: 0;
  border-radius: 8px;
  padding: .6rem 1.2rem;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
}
.fc-start-btn:hover { background: var(--gold-hover); }
.fc-start-btn[disabled] { opacity: .6; cursor: default; }
.fc-start-msg { font-size: .9rem; color: var(--text-primary); margin: .3rem 0 0; }
.fc-start-skip { font-size: .85rem; color: var(--text-muted); margin: .8rem 0 0; }
.fc-start-link {
  background: none;
  color: var(--gold);
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}
/* The honeypot. Off-screen rather than display:none, which some bots skip. */
.fc-start-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fc-start-hp input { background: var(--bg-card); color: var(--text-primary); }

/* ─── The free book frame ───────────────────────────────────────────────────── */
/* Every control states its own colour and background, as the guard requires. */

.fd-frame {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 1.25rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  /* A card, not the deeper parchment. Gold on --bg-elevated measures 4.1 to 1
     in the light theme, under the AA floor of 4.5, which is what put the
     Check panel on this background too. */
  background: var(--bg-card);
  padding: 1.25rem;
  margin: 2rem 0;
}
.fd-cover {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--navy);
  color: #EDE5D5;
  border-radius: 8px;
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: .1em;
  min-height: 150px;
}
.fd-tag {
  font-size: .72rem; font-weight: 700; color: var(--gold);
  text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .2rem;
}
.fd-title { font-size: 1.3rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .2rem; }
.fd-sub { font-size: .95rem; color: var(--text-primary); margin: 0 0 .5rem; }
.fd-summary { font-size: .92rem; color: var(--text-primary); line-height: 1.6; margin: 0 0 .5rem; max-width: 60ch; }
.fd-meta { font-size: .85rem; color: var(--text-muted); margin: 0 0 .9rem; }
.fd-form { display: flex; flex-direction: column; gap: .55rem; max-width: 34rem; }
.fd-label { font-size: .82rem; font-weight: 700; color: var(--text-primary); }
.fd-input {
  font-size: 1rem; padding: .6rem .7rem; border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card); color: var(--text-primary);
}
.fd-input:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.fd-consent {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .86rem; color: var(--text-primary); line-height: 1.5;
}
.fd-consent input {
  margin: .2rem 0 0; accent-color: var(--gold);
  background: var(--bg-card); color: var(--text-primary);
}
.fd-btn {
  align-self: flex-start; background: var(--gold); color: var(--on-gold);
  border: 0; border-radius: 8px; padding: .6rem 1.2rem;
  font-weight: 700; font-size: .95rem; cursor: pointer;
}
.fd-btn:hover { background: var(--gold-hover); }
.fd-btn[disabled] { opacity: .6; cursor: default; }
.fd-msg { font-size: .9rem; color: var(--text-primary); margin: .3rem 0 0; }
.fd-note { font-size: .82rem; color: var(--text-muted); margin: .9rem 0 0; max-width: 60ch; }
.fd-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fd-hp input { background: var(--bg-card); color: var(--text-primary); }

@media (max-width: 640px) {
  .fd-frame { grid-template-columns: 1fr; }
  .fd-cover { min-height: 90px; }
}