/* The pencil-puzzle kit's look (ADR 0023, docs/puzzles.md): a puzzle book.
   Every puzzle on the kit is printed in graphite on the same warm paper, set
   in Gloock (a high-contrast serif, for titles) and Figtree
   (for everything you read or press), and each wears an accent of its
   own (games/static/games/<slug>/<slug>.css, loaded after this) as the card
   games share the card room. This is the kit's root: the house tokens
   (docs/design-system.md), the kit's own, and what every puzzle page draws
   the same, in the game and in its Django-served pages (static/puzzles/pages.css).
   The game's interface is kit.css beside it.

   Paper, ink and the heavy and light lines are the book; the accent is the
   one loud thing (the filled button, the ribbon at the top, a title's star);
   everything else is graphite. See docs/design-system.md, "The pencil-puzzle kit".

   The paper itself (its colors, the faces and their fonts, the grain) is
   the house's, games/house/paper.css, loaded before this: the hub and the
   technical guide are printed on it too (ADR 0036). */

:root {
  /* (the paper, its ink and lines, --good and --bad and the faces are paper.css's) */
  /* colors with jobs (the rule colors-have-jobs); each puzzle sets its own accent */
  --accent: #3b3f8f;         /* the one filled button */
  --accent-ink: #ffffff;
  --pick: #2f6db5;           /* yours, picked: the cursor, your row on a board */
  /* the paper's warm shadow, as an rgb for rgba(): what the kit's interface
     casts (kit.css), on the paper and in the toy box alike */
  --shade: 60, 48, 20;
  /* a celebration's colors (house/celebrate.js): the puzzle's own accent
     first, then the paper's green and ink, and the accent washed pale */
  --house-cheer: var(--accent), var(--good), var(--ink), color-mix(in srgb, var(--accent) 45%, var(--paper-2));
  /* pale washes for a grid's regions: neighbors never share one */
  --tint-1: #e5eedb;
  --tint-2: #f6e0d9;
  --tint-3: #dde9f3;
  --tint-4: #f6eecd;
  --tint-5: #eae1f3;
  --tint-6: #f8e3ce;
  --tint-7: #d8eee9;
  /* the house tokens */
  --t-display: 44px;
  --t-heading: 20px;
  --t-body: 16px;
  --t-label: 16px;
  --t-note: 14px;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 40px;
  --pick-tint: color-mix(in srgb, currentColor 9%, transparent);
  --pick-ring: inset 0 0 0 2px currentColor;
  --pick-weight: 700;
  --radius: 8px;
  --focus: var(--ink);       /* the focus ring: 2px, the ink, a 2px gap; yellow is never focus */
  /* What the house kit reads (games/static/games/house/house.css; docs/design-language.md,
     "Using the house kit"): sheets, the result sheet, toasts and Options are drawn from these. */
  --house-surface: var(--paper-2);
  --house-ink: var(--ink);
  --house-soft: var(--soft);
  --house-edge: 1px solid var(--paper-edge);
  --house-display: var(--display);
  --house-display-weight: 400;
  --house-font: var(--ui);
  --house-radius: 14px;
  --house-line: var(--paper-edge);
  --house-field-edge: 1px solid var(--line);
  --house-btn-radius: var(--radius);
  --house-focus: var(--focus);
  --house-scrim: rgba(34, 30, 20, .5);
  --house-shadow: 0 28px 70px rgba(34, 30, 20, .45);
  --house-toast-edge: 1px solid var(--paper-edge);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink); font: var(--t-body)/1.5 var(--ui); -webkit-font-smoothing: antialiased;
  background-image: var(--paper-grain);
}
/* The ribbon: a strip of the puzzle's accent along the top of every page. */
body::before { content: ""; position: fixed; z-index: 40; top: 0; left: 0; right: 0; height: 4px; background: var(--accent); pointer-events: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn.primary:focus-visible { outline-color: var(--accent); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* the page skeleton (house rule 10) */
.kicker { margin: 0 0 var(--s1); font: 700 var(--t-kicker)/1.3 var(--ui); letter-spacing: var(--kicker-spacing); text-transform: uppercase; color: var(--accent); }
h1 { margin: 0; font: 400 var(--t-display)/1.1 var(--display); letter-spacing: -.005em; }
h2 { margin: 0; font: 700 var(--t-heading)/var(--lh-heading) var(--ui); }
.lead { margin: 0; max-width: 38em; font-size: var(--t-lead); line-height: var(--lh-body); color: var(--ink); }
.note { margin: 0; font-size: var(--t-note); line-height: var(--lh-note); color: var(--soft); }

/* three button weights (house rule 2): outlined, filled, words */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--btn-h); padding: 0 var(--btn-pad); border: 2px solid var(--ink); border-radius: var(--radius);
  background: transparent; color: var(--ink); font: 700 var(--t-label)/1 var(--ui); text-decoration: none; cursor: pointer;
  transition: background-color var(--m-press, 120ms) ease, transform var(--m-press, 120ms) ease, box-shadow var(--m-press, 120ms) ease;
}
@media (hover: hover) { .btn:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); } }
.btn:active { transform: translateY(1px); }
.btn.small { min-height: var(--tool-h); padding: 0 12px; font-size: var(--t-small); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000); }
@media (hover: hover) { .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); } }
.btn.primary:active { box-shadow: none; transform: translateY(2px); }
.btn.quiet, .quiet {
  border: 0; background: none; padding: var(--s1) var(--s2); border-radius: 6px; cursor: pointer; min-height: 0;
  font: 600 var(--t-note)/1.2 var(--ui); color: var(--soft); text-decoration: none; box-shadow: none;
}
@media (hover: hover) { .quiet:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; background: none; } }
.btn.danger { border-color: var(--bad); color: var(--bad); }
.btn[aria-disabled="true"], .btn:disabled { border-style: dashed; border-color: var(--soft); color: var(--soft); background: transparent; box-shadow: none; cursor: default; transform: none; }

/* choosing isn't doing (house rule 3): a pick is a tint, a ring and bold */
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 2px); background: color-mix(in srgb, var(--paper-2) 60%, transparent); }
.seg > a, .seg > button {
  min-width: 6em; min-height: 40px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  border: 0; border-radius: var(--radius); background: none; color: var(--soft); text-decoration: none; font: 600 var(--t-note)/1.2 var(--ui); cursor: pointer;
}
@media (hover: hover) { .seg > a:hover, .seg > button:hover { color: var(--ink); } }
.seg > .on, .seg > [aria-pressed="true"], .seg > [aria-current="true"] { color: var(--ink); background: var(--pick-tint); box-shadow: var(--pick-ring); font-weight: var(--pick-weight); }

/* Reduced motion: nothing travels or celebrates; the house's short fades (sheets, toasts) stay. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  *:not([class*="house-"]), *::before, *::after { animation: none !important; }
}