/* maddyhelps.com shared styles.
   Colour tokens first, then layout, then the bits only the quiz and answer key
   use. Every colour pair here is checked for WCAG AA contrast in both themes. */

:root {
  --paper: #FFF5F9;
  --surface: #FFFFFF;
  --ink: #2B1B3F;
  --muted: #6B5B7E;
  --line: #EBD7E4;

  --pink: #FF7EB6;          /* shapes and fills only, never text */
  --pink-deep: #B0125B;     /* text, links, buttons */
  --pink-soft: #FFE4F0;

  --teal: #2EC4B6;          /* shapes and fills only, never text */
  --teal-deep: #0F766E;     /* text, links, buttons */
  --teal-soft: #E3FAF6;

  --sun: #FFD166;
  --sun-ink: #2B1B3F;

  --good: #0B6B3A;
  --good-soft: #E0F5E9;
  --bad: #B3241B;
  --bad-soft: #FDE7E4;

  --shadow: 0 2px 0 var(--line), 0 10px 24px -18px rgba(43, 27, 63, .5);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1E1430;
    --surface: #2A1D42;
    --ink: #F4ECFA;
    --muted: #C3B2D6;
    --line: #43335E;
    --pink-deep: #FF9ECA;
    --pink-soft: #45213C;
    --teal-deep: #5EE0D0;
    --teal-soft: #123F44;
    --good: #6FD69B;
    --good-soft: #14392A;
    --bad: #FF9E92;
    --bad-soft: #3E1F1C;
    --shadow: 0 2px 0 var(--line), 0 10px 24px -18px rgba(0, 0, 0, .7);
    color-scheme: dark;
  }
}

/* Section colour coding: school leans teal, life leans pink. */
:root, [data-section="life"] { --accent: var(--pink); --accent-deep: var(--pink-deep); --accent-soft: var(--pink-soft); }
[data-section="school"] { --accent: var(--teal); --accent-deep: var(--teal-deep); --accent-soft: var(--teal-soft); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3, .display {
  font-family: Fredoka, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  line-height: 1.24;
  margin: 0;
  font-weight: 600;
}
h1 { font-size: clamp(2rem, 6vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); }
h3 { font-size: 1.18rem; }
p, ul, ol { margin: 0 0 1rem; }
img, svg { max-width: 100%; }

a { color: var(--accent-deep); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--accent-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: 48rem; margin: 0 auto; padding: 0 1.25rem; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  display: inline-flex; align-items: center; min-height: 44px;
  background: var(--surface); color: var(--ink);
  padding: .75rem 1rem; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip:focus { left: 0; }

/* ---------- signature: soft blobs and a hand-drawn underline ---------- */

/* Blobs sit behind the page, so they must never end up behind text: a tint under
   a heading quietly breaks its contrast. They appear only once the window is wide
   enough for them to fit in the clear margin beside the 48rem text column. The
   card blobs below are always safe because only artwork sits on top of them. */
.blob { display: none; position: absolute; z-index: 0; pointer-events: none; opacity: .5; }
.blob-a { background: var(--pink); border-radius: 70% 30% 58% 42% / 40% 64% 36% 60%; }
.blob-b { background: var(--teal); border-radius: 34% 66% 42% 58% / 62% 38% 62% 38%; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .blob { opacity: .34; }
}

/* The squiggle hangs below the span it underlines, so the span must be the LAST
   thing in its heading. Underline something mid-heading and the squiggle lands on
   top of the next line and reads as a strikethrough. The padding keeps it inside
   the heading's own box. */
.u { position: relative; display: inline-block; padding-bottom: .1em; }
.u .squiggle {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: .26em; overflow: visible;
}
.u .squiggle path {
  fill: none; stroke: var(--accent); stroke-width: 7;
  stroke-linecap: round; vector-effect: non-scaling-stroke;
}

/* ---------- header and footer ---------- */

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: relative; z-index: 2;
}
.site-head .wrap {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap; padding-top: .7rem; padding-bottom: .7rem;
}
.brand {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: Fredoka, "Trebuchet MS", system-ui, sans-serif;
  font-weight: 600; font-size: 1.5rem; text-decoration: none;
  letter-spacing: -.01em; padding: .35rem .15rem; line-height: 1.2;
}
.brand .m { color: var(--pink-deep); }
.brand .h { color: var(--teal-deep); }

.site-nav { margin-left: auto; display: flex; gap: .3rem; flex-wrap: wrap; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .3rem .7rem; border-radius: 999px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: .97rem;
}
.site-nav a:hover { background: var(--accent-soft); }
.site-nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent-deep); }

.site-foot {
  margin-top: auto; background: var(--surface);
  border-top: 1px solid var(--line); padding: 1.6rem 0;
  color: var(--muted); font-size: .95rem;
}
.site-foot .wrap { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; align-items: center; }
.site-foot a {
  color: var(--muted);
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-foot .spacer { margin-left: auto; }

main { flex: 1 0 auto; }

/* ---------- hero ---------- */

.hero { position: relative; overflow: hidden; padding: 3rem 0 2.5rem; }
.hero .wrap { position: relative; z-index: 1; }
@media (min-width: 75rem) {
  .hero .blob { display: block; }
  .hero .blob-a { width: 12rem; height: 12rem; top: 1.5rem; right: 1rem; }
  .hero .blob-b { width: 8rem; height: 8rem; bottom: 1.5rem; left: 1rem; }
}
.hero .eyebrow {
  font-weight: 700; color: var(--accent-deep);
  text-transform: uppercase; letter-spacing: .08em; font-size: .82rem;
  margin: 0 0 .6rem;
}
.hero h1 { max-width: 18ch; }
.lede { max-width: 40rem; font-size: 1.15rem; margin: 1.1rem 0 0; color: var(--muted); }

/* ---------- cards ---------- */

.cards { display: grid; gap: 1.1rem; padding: 0 0 3rem; grid-template-columns: 1fr; }
@media (min-width: 46rem) { .cards.two { grid-template-columns: 1fr 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 1.5rem; box-shadow: var(--shadow);
  text-decoration: none; color: inherit; overflow: hidden;
}
a.card { transition: transform .15s ease, box-shadow .15s ease; }
a.card:hover { transform: translateY(-3px); }
.card h2, .card h3 { color: var(--accent-deep); }
.card p { color: var(--muted); margin: .6rem 0 0; }
.card .card-art { position: relative; margin: 0 0 1rem; height: 5.5rem; }
.card .card-art::before {
  content: ""; position: absolute; z-index: 0;
  left: -.5rem; top: -.55rem; width: 4.8rem; height: 4.8rem;
  background: var(--accent); opacity: .3;
  border-radius: 70% 30% 58% 42% / 40% 64% 36% 60%;
}
.card .card-art svg { position: relative; z-index: 1; height: 100%; width: auto; }
.card .meta {
  margin: .9rem 0 0; font-size: .9rem; font-weight: 700;
  color: var(--accent-deep); display: flex; align-items: center; gap: .4rem;
}
.card .go { margin-top: auto; padding-top: 1.1rem; }

.soon {
  border-style: dashed; box-shadow: none; background: transparent;
}
.soon h3 { color: var(--muted); }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .6rem 1.35rem;
  border-radius: 999px; border: 2px solid transparent;
  font-family: Fredoka, "Trebuchet MS", system-ui, sans-serif;
  font-size: 1.02rem; font-weight: 600; cursor: pointer;
  text-decoration: none; background: var(--pink-deep); color: #fff;
  transition: transform .12s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.teal { background: var(--teal-deep); }
.btn.ghost {
  background: transparent; color: var(--accent-deep);
  border-color: var(--accent-deep);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn { color: #21122F; }
}

/* ---------- prose blocks ---------- */

.prose { padding: 0 0 3rem; max-width: 44rem; }
.prose h2 { margin: 2.2rem 0 .7rem; color: var(--accent-deep); }
.prose h3 { margin: 1.6rem 0 .4rem; }
.prose li { margin-bottom: .35rem; }

.panel {
  background: var(--accent-soft); border-radius: 16px;
  padding: 1.1rem 1.25rem; margin: 1.4rem 0;
}
.panel > :last-child { margin-bottom: 0; }
.panel h3 { margin-top: 0; }

.note { color: var(--muted); font-size: .95rem; }

/* ---------- quiz ---------- */

.part { margin: 0 0 2.5rem; }
.part-head { display: flex; gap: .9rem; align-items: flex-start; margin: 0 0 1.1rem; }
.part-num {
  flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: var(--accent); color: #21122F;
  display: grid; place-items: center;
  font-family: Fredoka, system-ui, sans-serif; font-weight: 600; font-size: 1.2rem;
}
.key {
  background: var(--accent-soft); border-radius: 14px;
  padding: .85rem 1rem; margin: .6rem 0 0; font-size: .98rem;
}

fieldset.q {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.25rem; margin: 0 0 1.1rem;
  box-shadow: var(--shadow);
}
fieldset.q legend {
  font-family: Fredoka, system-ui, sans-serif; font-weight: 600;
  color: var(--accent-deep); padding: 0 .5rem;
}
.prompt { font-weight: 700; margin: 0 0 .9rem; }

.opts { display: grid; gap: .5rem; margin: 0 0 .8rem; }
.opt {
  display: flex; align-items: center; gap: .7rem;
  min-height: 48px; padding: .55rem .9rem;
  border: 2px solid var(--line); border-radius: 12px;
  cursor: pointer; background: var(--surface);
}
.opt:hover { border-color: var(--accent); }
.opt:has(input:checked) { border-color: var(--accent-deep); background: var(--accent-soft); }
.opt:has(input:focus-visible) { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.opt input { width: 1.15rem; height: 1.15rem; accent-color: var(--accent-deep); flex: none; }
.opt .l { font-weight: 700; color: var(--muted); }

details.hint { font-size: .95rem; }
details.hint summary {
  cursor: pointer; font-weight: 700; color: var(--accent-deep);
  min-height: 44px; display: flex; align-items: center;
}
details.hint p { margin: 0 0 .5rem; color: var(--muted); }

.status { margin: .5rem 0 0; font-weight: 700; min-height: 1.5rem; }
.status:empty { display: none; }
.status.ok { color: var(--good); }
.status.no { color: var(--bad); }
.status.none { color: var(--muted); }
fieldset.q.ok { border-color: var(--good); background: var(--good-soft); }
fieldset.q.no { border-color: var(--bad); background: var(--bad-soft); }

@media (prefers-reduced-motion: no-preference) {
  fieldset.q.ok { animation: pop .34s ease; }
}
@keyframes pop {
  0% { transform: scale(1); } 45% { transform: scale(1.015); } 100% { transform: scale(1); }
}

.namebox { margin: 0 0 1.6rem; }
.namebox label { display: block; font-weight: 700; margin-bottom: .35rem; }
.namebox input, .codebox input {
  width: 100%; max-width: 22rem; min-height: 48px;
  padding: .55rem .8rem; font: inherit;
  color: var(--ink); background: var(--surface);
  border: 2px solid var(--line); border-radius: 12px;
}
.namebox input:focus-visible, .codebox input:focus-visible { border-color: var(--accent-deep); }

.scorebar {
  position: sticky; bottom: 0; z-index: 3;
  background: var(--surface); border-top: 1px solid var(--line);
  padding: .7rem 0; box-shadow: 0 -8px 24px -20px rgba(43, 27, 63, .8);
}
.scorebar .wrap { display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; }
.scorebar .count { font-weight: 700; margin: 0; }
.scorebar .btn { min-height: 44px; padding: .4rem 1rem; font-size: .95rem; }
.scorebar .grow { margin-left: auto; }

.result {
  background: var(--accent-soft); border-radius: 18px;
  padding: 1.2rem 1.25rem; margin: 0 0 2rem;
}
.result:empty { display: none; }
.result h2 { margin: 0 0 .5rem; }
.result ul { margin: .5rem 0 0; padding-left: 1.2rem; }

/* ---------- answer key ---------- */

.glance { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: .95rem; }
.glance th, .glance td {
  border: 1px solid var(--line); padding: .5rem .6rem; text-align: left;
}
.glance th { background: var(--accent-soft); color: var(--accent-deep); }
.glance td b { color: var(--accent-deep); }

article.k {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 18px; padding: 1.35rem; margin: 0 0 1.2rem;
  box-shadow: var(--shadow);
}
article.k h3 { color: var(--accent-deep); }
.ans {
  display: inline-block; background: var(--sun); color: var(--sun-ink);
  font-weight: 700; padding: .3rem .8rem; border-radius: 999px; margin: 0 0 .9rem;
}
.sub {
  font-family: Fredoka, system-ui, sans-serif; font-weight: 600;
  font-size: 1.04rem; margin: 1.2rem 0 .4rem;
}
.steps { margin: 0; padding-left: 1.3rem; }
.steps li { margin-bottom: .3rem; }
.watch {
  background: var(--bad-soft); border-left: 4px solid var(--bad);
  border-radius: 0 12px 12px 0; padding: .75rem 1rem; margin: 1.2rem 0 0;
}
.watch b { color: var(--bad); }
.jump { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.jump a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: .3rem .9rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-deep);
  text-decoration: none; font-weight: 700; font-size: .95rem;
}

figure.see {
  margin: .75rem 0 0; padding: 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; overflow-x: auto;
}
figure.see + figure.see { margin-top: .6rem; }
figure.see figcaption { margin-top: .6rem; color: var(--muted); font-size: .93rem; }

/* Diagram colours. The SVGs use these classes so they follow the theme. */
.viz { display: block; width: 100%; height: auto; margin: 0 auto; max-width: 560px; min-width: 300px; }
.viz text { fill: var(--ink); font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }
.viz .muted { fill: var(--muted); }
.viz .on-hl { fill: var(--sun-ink); }
.viz .box { fill: var(--surface); stroke: var(--teal-deep); stroke-width: 2; }
.viz .boxhl { fill: var(--sun); stroke: var(--ink); stroke-width: 2; }
.viz .soft { fill: var(--teal-soft); stroke: var(--teal-deep); stroke-width: 1.5; }
.viz .soft2 { fill: var(--pink-soft); stroke: var(--pink-deep); stroke-width: 1.5; }
.viz .ln { stroke: var(--teal-deep); stroke-width: 1.5; fill: none; }
.viz .ink { stroke: var(--ink); stroke-width: 2; fill: none; }
.viz .strike { stroke: var(--bad); stroke-width: 2.5; stroke-linecap: round; }
.viz .arrow { fill: var(--ink); }

/* ---------- login ---------- */

.codebox { max-width: 26rem; }
.codebox .btn { margin-top: 1rem; }
.alert {
  background: var(--bad-soft); border-left: 4px solid var(--bad);
  border-radius: 0 12px 12px 0; padding: .8rem 1rem; margin: 0 0 1.4rem; font-weight: 700;
}
.alert b { color: var(--bad); }

/* ---------- motion and print ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .site-head, .site-foot, .scorebar, .blob, .skip, details.hint, .jump, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  article.k, fieldset.q, figure.see { break-inside: avoid; box-shadow: none; }
  a { text-decoration: none; color: #000; }
}