/* The family exercise book (front-end spec section 4). Hand-written until
   Plan 03 Task 0 adds the full design system and asset pipeline. */
:root {
  color-scheme: light dark;
  --paper: #FCFDFF; --feint: #D3E0EE; --margin-line: #E0464C; --margin-text: #D2232A;
  --ink: #1B2A55; --pen: #2243B6; --pencil: #3A3D45; --pencil-light: #6A6E78;
  --correction: #B81E25; --wash: #EEF3FC;
  --rule: 32px; --margin-x: 52px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0F1A33; --feint: #22345A; --margin-line: #E2585E; --margin-text: #FF7A7F;
    --ink: #EEF2FA; --pen: #9DB7FF; --pencil: #C9D1E0; --pencil-light: #95A0B5;
    --correction: #FF8A8F; --wash: #18264A;
  }
}
@media (min-width: 640px) { :root { --margin-x: 72px; } }
*, *::before, *::after { box-sizing: border-box; }
html {
  background:
    linear-gradient(to right, transparent calc(var(--margin-x) - 1px), var(--margin-line) calc(var(--margin-x) - 1px) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)),
    repeating-linear-gradient(to bottom, var(--paper) 0 calc(var(--rule) - 1px), var(--feint) calc(var(--rule) - 1px) var(--rule));
  background-color: var(--paper);
}
body {
  margin: 0; padding: 0 16px 64px calc(var(--margin-x) + 16px);
  font: 18px/var(--rule) system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--pencil);
  max-width: 720px;
}
header.site { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; justify-content: space-between; padding-top: var(--rule); }
header.site nav { display: flex; gap: 16px; align-items: baseline; }
.brand { font: italic 700 22px/var(--rule) Georgia, serif; color: var(--ink); text-decoration: none; }
h1 { font: 700 30px/64px Georgia, serif; color: var(--ink); margin: var(--rule) 0 0; }
h2 { font: 700 22px/var(--rule) Georgia, serif; color: var(--ink); margin: var(--rule) 0 0; }
p { margin: 0 0 var(--rule); }
a { color: var(--pen); }
.hint { color: var(--pencil-light); }
label { display: block; color: var(--ink); font-weight: 600; margin-top: 16px; }
input[type=email], input[type=text], input[type=number] {
  display: block; width: 100%; font: 22px/1.4 Georgia, serif; color: var(--ink);
  background: transparent; border: 0; border-bottom: 2px solid var(--ink); padding: 4px 0; margin-bottom: 16px;
}
input:focus { outline: none; border-bottom: 3px solid var(--pen); background: var(--wash); }
button { font: 600 18px/1 system-ui, sans-serif; cursor: pointer; border-radius: 2px; }
button.primary { display: block; min-height: 52px; padding: 0 20px; margin: 16px 0 var(--rule); background: var(--pen); color: #fff; border: 0; }
button.secondary { min-height: 44px; padding: 0 16px; margin: 8px 0; background: transparent; color: var(--pen); border: 2px solid var(--pen); }
button.link { background: none; border: 0; color: var(--pen); text-decoration: underline; padding: 0; min-height: 44px; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; }
.correction { color: var(--correction); font-style: italic; border-left: 3px solid var(--correction); padding-left: 12px; }
.notice { border: 2px solid var(--ink); padding: 0 16px; margin-bottom: var(--rule); background: var(--paper); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; border-bottom: 2px solid var(--ink); padding: 8px 8px 8px 0; }
footer { margin-top: 64px; }