/* Create Anywhere — looks (colour schemes), shared by index, play and skills.
   Each page defines the Classic tokens on :root. A look redefines them on html[data-look="…"],
   which outranks :root. Component rules here are prefixed with the same selector so they also
   outrank the page's own rules. Every text/background pair was checked to WCAG AA (axe, all
   pages × all looks, 2026-10-03); the colours were first mocked up in A007 "Colourways". */
@import url("fonts/fonts.css");

/* ── The picker (every page footer) ───────────────────────── */
.look-picker { border: 0; margin: 10px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 520px; }
.look-picker legend { width: 100%; text-align: center; font-size: 0.8125rem; margin-bottom: 4px; color: var(--text-dim); }
.look-picker input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.look-picker label {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px 4px 6px;
  border: 1.5px solid var(--control); border-radius: 999px; background: var(--surface); color: var(--text);
  font-size: 0.8125rem; cursor: pointer;
}
.look-picker input:checked + label { border-width: 2.5px; font-weight: 700; padding: 3px 9px 3px 5px; }
.look-picker input:checked + label::after { content: "✓"; }
.look-picker input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 2px; }
.look-dots { display: inline-flex; }
.look-dots i { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); margin-right: -3px; }
.look-dots i:last-child { margin-right: 0; }
.card-group { display: none; }

/* ── 1 · Five Colours (default) — the card's colour is its skill group ─────────── */
html[data-look="five"] {
  --bg: #f1eff7; --surface: #ffffff; --text: #1b1530; --text-dim: #5a5470; --border: #1b1530;
  --accent: #1b1530; --on-accent: #ffffff; --accent2: #6a4bdb; --on-accent2: #ffffff; --accent2-ink: #5b3cc4;
  --control: #1b1530; --tint: #fff6d6; --focus: #0b57d0;
  --font-display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --g-foundational: #ff7a59; --g-essential: #ffc93c; --g-engagement: #2bb3a3; --g-emotions: #ff9ec4; --g-future: #6a4bdb;
}
html[data-look="five"] h1 .place { color: var(--text); background: var(--g-essential); padding: 0 0.2em; border-radius: 6px; }
html[data-look="five"] .card { border: 2px solid var(--text); border-radius: 18px; box-shadow: 0 4px 0 var(--text); }
html[data-look="five"] #card { padding: 0; overflow: hidden; }
html[data-look="five"] #card > :not(.card-head) { margin-left: 20px; margin-right: 20px; }
html[data-look="five"] #card > :last-child { margin-bottom: 20px; }
html[data-look="five"] .card-head { --grp: #ffffff; --on-grp: var(--text); background: var(--grp); color: var(--on-grp); padding: 16px 20px 14px; border-bottom: 2px solid var(--text); margin-bottom: 14px; display: flex; flex-direction: column; gap: 4px; }
html[data-look="five"] .card[data-group="foundational"] .card-head { --grp: var(--g-foundational); }
html[data-look="five"] .card[data-group="essential"] .card-head { --grp: var(--g-essential); }
html[data-look="five"] .card[data-group="engagement"] .card-head { --grp: var(--g-engagement); }
html[data-look="five"] .card[data-group="emotions"] .card-head { --grp: var(--g-emotions); }
html[data-look="five"] .card[data-group="future"] .card-head,
html[data-look="five"] .card[data-group="joker"] .card-head { --grp: var(--g-future); --on-grp: #ffffff; }
html[data-look="five"] .card-group { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
html[data-look="five"] .card-head .skill-badge,
html[data-look="five"] .card.joker .card-head .skill-badge { color: inherit; border-color: currentColor; align-self: flex-start; margin: 0; }
html[data-look="five"] .card-head .skill-def { color: inherit; margin: 0; }
html[data-look="five"] .card-head h2 { margin: 2px 0 0; font-size: 1.75rem; line-height: 1.1; }
html[data-look="five"] .capture { border-left: 0; border: 1.5px dashed var(--text); border-radius: 10px; }
html[data-look="five"] .btn { border-radius: 12px; }
html[data-look="five"] .btn-primary { box-shadow: 0 3px 0 var(--g-essential); }
html[data-look="five"] .deck-count { color: var(--text); }
/* skills page: the group key uses the same five colours */
html[data-look="five"] .group.foundational { --g: var(--g-foundational); } html[data-look="five"] .group.essential { --g: var(--g-essential); }
html[data-look="five"] .group.engagement { --g: var(--g-engagement); } html[data-look="five"] .group.emotions { --g: var(--g-emotions); }
html[data-look="five"] .group.future { --g: var(--g-future); }

/* ── 2 · Riso Print — two inks on paper ───────────────────── */
html[data-look="riso"] {
  --bg: #f3f2ee; --surface: #fbfaf7; --text: #1d2b3a; --text-dim: #4f5864; --border: #0068a8;
  --accent: #0068a8; --on-accent: #ffffff; --accent2: #ff5cb4; --on-accent2: #1d2b3a; --accent2-ink: #a3195f;
  --control: #1d2b3a; --tint: #ffe3f2; --focus: #1d2b3a;
  --font-display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-look="riso"] body { background-image: radial-gradient(rgba(29, 43, 58, 0.07) 0.7px, transparent 0.8px); background-size: 5px 5px; }
html[data-look="riso"] h1 { letter-spacing: -0.02em; }
html[data-look="riso"] h1 .place { color: var(--text); background: var(--accent2); padding: 0 0.2em; }
html[data-look="riso"] .card { border: 2px solid var(--accent); border-radius: 4px; box-shadow: 7px 7px 0 var(--accent2); }
html[data-look="riso"] .card.joker { background: var(--accent2); border-color: var(--text); box-shadow: 7px 7px 0 var(--accent); }
html[data-look="riso"] .card.joker .skill-def, html[data-look="riso"] .card.joker .capture strong { color: var(--text); }
html[data-look="riso"] .card h2, html[data-look="riso"] .card h3 { color: var(--accent); }
html[data-look="riso"] .card.joker h2 { color: var(--text); }
html[data-look="riso"] .skill-badge { border-radius: 0; background: var(--accent2); color: var(--text); border-color: var(--accent2); }
html[data-look="riso"] .card.joker .skill-badge { background: var(--text); color: var(--bg); border-color: var(--text); }
html[data-look="riso"] .capture { background: transparent; border-left: 0; border-top: 2px dotted var(--accent); border-radius: 0; padding: 10px 0 0; }
html[data-look="riso"] .card.joker .capture { border-top-color: var(--text); }
html[data-look="riso"] .btn { border-radius: 4px; }
html[data-look="riso"] .btn-primary { box-shadow: 4px 4px 0 var(--accent2); }
html[data-look="riso"] .btn-joker { box-shadow: 4px 4px 0 var(--accent); }

/* ── 3 · Field Kit — an explorer's notebook ───────────────── */
html[data-look="field"] {
  --bg: #d6bf97; --surface: #fffdf6; --text: #23271f; --text-dim: #45493a; --border: #8a7a5c;
  --accent: #4a5a24; --on-accent: #ffffff; --accent2: #b9400b; --on-accent2: #ffffff; --accent2-ink: #842d07;
  --control: #23271f; --tint: #f4eedf; --focus: #1f3d8a;
  --font-display: "Zilla Slab", Georgia, serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Courier Prime", ui-monospace, monospace;
}
html[data-look="field"] .card { border: 0; border-radius: 3px; box-shadow: 0 2px 0 rgba(35, 39, 31, 0.3); }
html[data-look="field"] #card { padding-left: 34px;
  background-image: linear-gradient(to right, transparent 20px, #d98b7a 20px, #d98b7a 22px, transparent 22px); }
html[data-look="field"] .skill-badge { font-family: var(--font-mono); color: var(--accent2-ink); border: 2px solid var(--accent2-ink); border-radius: 2px; transform: rotate(-2deg); background: var(--surface); }
html[data-look="field"] .card.joker .skill-badge { color: var(--accent); border-color: var(--accent); }
html[data-look="field"] .capture { font-family: var(--font-mono); background: var(--tint); border-left: 0; border-radius: 2px; }
html[data-look="field"] .capture strong { color: var(--accent2-ink); text-transform: uppercase; }
html[data-look="field"] .btn { border-radius: 6px; }
html[data-look="field"] .done-count, html[data-look="field"] .deck-label { font-family: var(--font-mono); }

/* ── 4 · Night Walk — signage colours after dark ──────────── */
html[data-look="night"] {
  color-scheme: dark;
  --bg: #14123a; --surface: #25216a; --text: #f4f1ff; --text-dim: #c9c3ee; --border: #4a44a8;
  --accent: #ffd23f; --on-accent: #14123a; --accent2: #62f0c4; --on-accent2: #14123a; --accent2-ink: #62f0c4;
  --control: #c9c3ee; --tint: #1b1850; --focus: #62f0c4;
  --font-display: "Big Shoulders Display", "Arial Narrow", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
html[data-look="night"] h1 { text-transform: uppercase; letter-spacing: 0.05em; font-size: 1.75rem; }
html[data-look="night"] .card { border: 1px solid var(--border); box-shadow: none; }
html[data-look="night"] #card h2 { color: var(--accent); text-transform: uppercase; letter-spacing: 0.02em; font-size: 2rem; line-height: 1.05; }
html[data-look="night"] .skill-badge { color: var(--accent2); border-color: var(--accent2); }
html[data-look="night"] .capture { border-left-color: var(--accent2); }
html[data-look="night"] .btn { border-radius: 999px; }
html[data-look="night"] .deck-count { font-family: var(--font-display); font-size: 5rem; }