/* Ritka — a Hungarian exercise book (füzet): ruled paper, royal-blue pen, teacher's red pen. */
:root {
  --paper: #f5f6f1;
  --rule: #d3e0ec;
  --margin: #e9a3a7;
  --ink: #1c2a6b;
  --pen: #2448d8;
  --red: #d42a30;
  --pencil: #646b7a;
  --marker: #fbe68a;
  --line: 34px;
  --printed: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --hand: 'Caveat', 'Segoe Print', cursive;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--line) - 1px), var(--rule) calc(var(--line) - 1px) var(--line));
  color: var(--ink);
  font-family: var(--printed);
  font-size: 17px;
  /* One text line = one ruled line; js/ruling.js puts each baseline exactly on a rule. */
  line-height: var(--line);
  font-optical-sizing: auto;
}
/* Tool pages (host controls, answer review) use plain paper: dense UI, no rules. */
body.plain { background-image: none; line-height: 1.45; }

button, input { font: inherit; color: inherit; }
a { color: var(--pen); text-underline-offset: 3px; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 3px; border-radius: 4px; }

/* the page: a column with the red margin line on its left */
.page {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  padding: 18px 20px 48px 58px;
  min-height: 100vh;
  min-height: 100dvh;
}
.page::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 38px;
  width: 2px;
  background: var(--margin);
}

.hand { font-family: var(--hand); font-weight: 600; }
.pen { font-family: var(--hand); font-weight: 600; color: var(--pen); }
.red { color: var(--red); }
.muted { color: var(--pencil); }

/* buttons: a solid ink stamp for the main action, plain links for the rest */
.btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 22px;
  font-weight: 650;
  font-size: 1.05rem;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.08s ease, background 0.15s ease;
}
.btn:hover { background: #24358a; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.quiet {
  background: var(--paper);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn.quiet:hover { background: #ebece6; }

/* Füzetcímke: the name label stuck on an exercise book. Too big for one ruled line, so it's a
   piece of paper on top of the page; the rules can't run behind it. */
.label-sticker {
  position: relative;
  display: inline-block;
  padding: 0.16em 0.5em 0.2em 0.32em;
  background: #fffefa;
  border: 2px solid var(--ink);
  border-radius: 0.2em;
  box-shadow:
    inset 0 0 0 4px #fffefa,
    inset 0 0 0 5.5px rgba(28, 42, 107, 0.32),
    0 1px 0 rgba(28, 42, 107, 0.08),
    0 14px 26px -16px rgba(28, 42, 107, 0.45);
  transform: rotate(-1.4deg);
  line-height: 1;
}
.linkish {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--pen);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* the red-pen grade mark (built in common.js) */
.mark { display: inline-block; width: 1em; height: 1em; vertical-align: middle; overflow: visible; }
.mark .ring { fill: none; stroke: var(--red); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.mark .num { fill: var(--red); font-family: var(--hand); font-weight: 700; font-size: 62px; }
.mark .star { fill: var(--red); }
.mark.draw .ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ring 0.55s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
.mark.draw .num, .mark.draw .star { clip-path: inset(0 100% 0 0); animation: write 0.32s 0.42s ease-out forwards; }
@keyframes ring { to { stroke-dashoffset: 0; } }
@keyframes write { to { clip-path: inset(0 0 0 0); } }

/* yellow highlighter stroke whose length is the answer's share */
.bar { display: block; height: 0.62em; }
.bar i {
  display: block;
  height: 100%;
  width: max(8px, calc(var(--w, 0.3) * 100%));
  background: var(--marker);
  border-radius: 3px 9px 4px 10px;
  transform: skewX(-10deg);
}

.icon-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px;
  cursor: pointer;
  color: var(--pencil);
  border-radius: 8px;
}
.icon-btn:hover { color: var(--ink); background: rgba(28, 42, 107, 0.06); }
.icon-btn svg { width: 22px; height: 22px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .mark.draw .ring { animation: none; stroke-dashoffset: 0; }
  .mark.draw .num, .mark.draw .star { animation: none; clip-path: none; }
  * { transition: none !important; }
}

/* ---------- Ritka madár: the Papírmadár lockups (design/brand/assets/origami/README.md, Lockups) ----------
   The wordmark always sits in the füzetcímke (.label-sticker). The bird never takes part in layout: it stands in a
   .crane-slot, an absolutely placed 120-unit box on the label that cancels the label's tilt, so the bird's heading
   (-24°) is in page space. A static bird is the slot's background; js/crane.js perches the flying bird on exactly
   the same box. Orange belongs to the bird alone: nothing here colours text, links, buttons or focus rings. */
:root {
  /* the compact lockup's static bird: MARK-SMALL (every lockup bird under a 200 px box) at heading -24°, wings at
     the mark's p .87, over its rest shadow; a file of its own, so that it diffs against the kit's mark-small.svg */
  --crane-rest: url("/img/crane-rest.svg");
}
.crane-slot {
  position: absolute;
  display: block;
  transform: rotate(1.4deg);
  pointer-events: none;
  background: no-repeat 0 0 / 100% 100%;
}

/* Primary lockup: „Ritka madár” in the label, the red csillagos ötös on its top-right corner, and the bird landed on
   the top border above the „m” (centre 2.957em from the padding box, 0.26em above the border, box 1.875em). One
   font-size scales it all; the 2 px frame stays in px. The box keeps the reference width (571.75 px at 96 px), so a
   fallback face can't move the perch or the lap while the web font loads.
   <h1 class="lockup label-sticker" data-free>Ritka madár<span class="lockup-star" aria-hidden="true">[5-star gradeMark]</span>
     <span class="crane-slot" data-crane-slot="label" aria-hidden="true"></span></h1> */
.lockup {
  box-sizing: border-box;
  width: 5.956em;
  margin: 0;
  font-size: 1em; /* sized by its container (an h1 would double it) */
  font-weight: 800;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--ink);
}
/* the 5-star never draws smaller than a 35 px box (its ring stays legible on phones); its centre stays put */
.lockup-star {
  --s: max(0.62em, 35px);
  position: absolute;
  right: calc(-0.11em - var(--s) / 2);
  top: calc(0.01em - var(--s) / 2);
  width: var(--s);
  height: var(--s);
}
/* a block: as .mark's inline-block it would sit in the label's tall line box and drop ~0.25em below the corner */
.lockup-star .mark { display: block; width: 100%; height: 100%; }
.crane-slot[data-crane-slot='label'] { left: 2.019em; top: calc(-1.198em - 2px); width: 1.875em; height: 1.875em; }

/* Compact header lockup (40 px of ink at 19 px; 16 px is the minimum): the label without its 5-star, the inner
   hairline dropped (it would cut through 19 px text), a smaller drop shadow, and the bird perched on its left end.
   .no-bird hides the bird while another one is on screen: there is only ever one orange bird.
   <a class="lockup-compact" href="/" aria-label="Ritka madár"><span class="label-sticker" data-free>Ritka madár
     <span class="crane-slot" data-crane-slot="compact" aria-hidden="true"></span></span></a> */
.lockup-compact { display: inline-flex; flex: none; color: var(--ink); text-decoration: none; line-height: 1; }
/* as a link, a 44 px tall tap target round the 26–31 px label, without moving it */
a.lockup-compact { position: relative; }
a.lockup-compact::after { content: ''; position: absolute; inset: -10px -6px; }
.lockup-compact .label-sticker {
  font-size: 19px;
  font-weight: 800;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.03em;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(28, 42, 107, 0.08), 0 6px 10px -6px rgba(28, 42, 107, 0.45);
}
.crane-slot[data-crane-slot='compact'] {
  left: calc(2.5px - 0.8em);
  top: calc(-0.91em - 2px);
  width: 1.6em;
  height: 1.6em;
  background-image: var(--crane-rest);
}
/* data-bird="off" does the same for a page that toggles it: ruling.js re-snaps the page on every class change */
.lockup-compact:is(.no-bird, [data-bird='off']) .crane-slot { visibility: hidden; }
/* The header row that holds a compact lockup on the ruled pages (stream, hang, 404). The lockup is a sticker, so
   ruling.js leaves it alone: this 31 px row is centred on the first rule. Plain paper has no rule to keep to. */
.brand-row { display: flex; align-items: center; height: 31px; margin: 0 0 19px; }
.plain .brand-row { margin-bottom: 0; }

/* The flying bird's layer (js/crane.js): over the whole page and in nobody's way. No opacity, transform or z-index
   on it, so the shadow's multiply blends with the page itself. */
body:has(> .crane-layer) { position: relative; }
.crane-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }

/* A csillagos ötös the bird lands on: its star waits for the bird (.crane-wait), then pops 0 -> 1.18 -> 1 in
   180 ms (.crane-pop). The CSS transform restates the star's own translate(72 30) rotate(12) scale(1.05).
   data-crane="wait|pop" on the mark's container works the same and, unlike a class, doesn't re-snap the page. */
:is(.crane-wait, [data-crane='wait']) .mark .star { animation: none; clip-path: none; opacity: 0; }
:is(.crane-pop, [data-crane='pop']) .mark .star { clip-path: none; animation: crane-star-pop 180ms ease-out both; }
@keyframes crane-star-pop {
  0% { transform: translate(72px, 30px) rotate(12deg) scale(0); }
  60% { transform: translate(72px, 30px) rotate(12deg) scale(1.24); }
  100% { transform: translate(72px, 30px) rotate(12deg) scale(1.05); }
}