/* The site's components: everything a page is built from. Loaded by every
 * page right after tokens.css; a page's own sheet (home.css, pages.css)
 * comes after it and only places these pieces on that page. A new page
 * composes what is here and writes its own sheet for layout alone; a piece
 * a second page wants moves here, under a name that is not a page's.
 *
 * Every colour is a token (tokens.css); the artwork carries its own. A
 * picture named by url() here is NOT cache-busted, and /web is cached
 * immutable for a year — so a changed picture is a RENAMED file (the -v2,
 * -v6 names). The big pictures are <img> in the templates, which are.
 */

/* ---- base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--void-black); }
body { margin: 0; background: var(--void-black); color: var(--aged-paper); font-family: var(--font-body); line-height: 1.5; }
a { color: inherit; }
button { font: inherit; }
.skip-link { position: fixed; top: 0; left: 1rem; z-index: 20; transform: translateY(-120%); padding: .7rem 1rem; background: var(--aged-paper); color: var(--ink); font-weight: 700; }
.skip-link:focus { transform: translateY(0); }
h1, h2 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }

/* ---- chrome: the header ---- */
.site-header, .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* The board's header: room above the logo, the nav level with its top. */
.site-header { width: var(--container); min-height: 84px; margin: 0 auto; padding-top: var(--space-24); align-items: flex-start; }
/* The board's header row: the links and START centred on one line. */
.site-actions { display: flex; align-items: center; gap: var(--space-32); }
/* The compact logo, the eye and the wordmark: the file is 400x250. */
.brand { display: inline-flex; align-items: center; color: var(--aged-paper); text-decoration: none; white-space: nowrap; }
.brand img { display: block; width: auto; height: clamp(56px, 5vw, 80px); }
.main-nav { display: flex; align-items: center; gap: var(--space-32); }
.nav-toggle { display: none; }
/* Light, as the board's thin type: American Typewriter has a light cut on
   Apple systems; elsewhere the regular one stands in. */
.main-nav a { color: var(--type-on-dark); font-size: clamp(1rem, 1.25vw, 1.25rem); font-weight: 300; text-decoration: none; }
.main-nav a:hover, .main-nav a:focus-visible { text-decoration: underline; text-underline-offset: .3em; }
.main-nav a[aria-current] { text-decoration: underline; text-underline-offset: .3em; }

/* ---- buttons ---- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 48px; padding: .75rem 1.05rem; border: 1px solid var(--aged-paper); border-radius: var(--radius-md); background: var(--aged-paper); color: var(--ink); font-size: .94rem; font-weight: 800; text-decoration: none; transition: transform 160ms ease, background 160ms ease; }
.button:hover { transform: translateY(-2px); background: var(--paper-dim); }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--aged-paper); outline-offset: 3px; }
.button-small { min-height: 38px; padding: .48rem .8rem; font-size: .84rem; }
.button-dark { border-color: var(--void-black); background: var(--void-black); color: var(--aged-paper); }
.button-dark:hover { background: var(--panel-raised); }
/* A dark button sits on parchment (creator panel) and on dark panels alike,
   so its focus ring is two: aged-paper against the button, void-black
   outside it — whichever the surface hides, the other shows. */
.button-dark:focus-visible { outline-color: var(--void-black); box-shadow: 0 0 0 3px var(--aged-paper); }
.button-quiet { border-color: var(--line); background: transparent; color: var(--aged-paper); }
.button-quiet:hover { background: var(--panel-raised); }

/* ---- torn labels ---- */
/* The board's torn red label with a word on it (header START, a sheet's
   START, the folder's headings and buttons). The picture is a url() here,
   so a changed label is a renamed file (/web is cached immutable). Every
   torn label — red, or the tan one Public wears — is padded 8px by 24px
   around its word and is as tall as that makes it: no minimum height or
   width anywhere, so no label is stretched past its padding — and no
   shorter than its word either (auto: a flex column cannot squash it).
   The torn art is stretched to the box by the file itself
   (preserveAspectRatio="none", the -v2 files): an SVG otherwise keeps its
   own ratio inside 100% 100%, and a long label drew its art narrower than
   its words. */
.label-red { display: inline-flex; align-items: center; justify-content: center; min-height: auto; padding: var(--space-8) var(--space-24); border: 0; border-radius: 0; background: url(/web/images/label-red-37-v2.svg) center / 100% 100% no-repeat; color: var(--aged-paper); font-family: var(--font-display); font-size: 1.1rem; font-weight: 400; letter-spacing: .06em; line-height: 1.2; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform 160ms ease; }
.label-red:hover { transform: translateY(-2px); background: url(/web/images/label-red-37-v2.svg) center / 100% 100% no-repeat; }
/* A label that is a link or a button answers the pointer plainly: it lifts,
   brightens and casts a shadow. A label that is a heading does none of it. */
a.label-red:hover, button.label-red:hover { transform: translateY(-3px); filter: brightness(1.25) drop-shadow(0 4px 6px color-mix(in srgb, var(--void-black) 40%, transparent)); }
.label-red { transition: transform 160ms ease, filter 160ms ease; }
/* Two rings: a label sits on black (the header) and on paper (a sheet, the
   folder), and a cream ring alone vanished into the paper. */
.label-red:focus-visible { outline: 3px solid var(--void-black); outline-offset: 3px; box-shadow: 0 0 0 3px var(--aged-paper); }
.label-small { font-size: .95rem; }
/* The board's brown torn label (label-brown-v2.svg): the quiet action
   beside a red one — Choose photo, Sign out, the YOUR PLAN tag. Ink on
   tan, the same lift as the red label when it is a button. */
.label-brown { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--space-8) var(--space-24); border: 0; border-radius: 0; background: url(/web/images/label-brown-v2.svg) center / 100% 100% no-repeat; color: var(--ink); font-family: var(--font-display); font-size: 1rem; font-weight: 700; letter-spacing: .08em; line-height: 1.2; text-decoration: none; text-transform: uppercase; cursor: pointer; transition: transform 160ms ease, filter 160ms ease; }
a.label-brown:hover, button.label-brown:hover, label.label-brown:hover { transform: translateY(-3px); filter: brightness(1.08) drop-shadow(0 4px 6px color-mix(in srgb, var(--void-black) 40%, transparent)); }
.label-brown:focus-visible, label.label-brown:focus-within { outline: 3px solid var(--void-black); outline-offset: 3px; box-shadow: 0 0 0 3px var(--aged-paper); }
span.label-brown { min-height: auto; cursor: default; }
/* A heading on the label is not a button: it neither lifts nor points. */
legend > .label-red, legend > .label-red:hover { cursor: default; transform: none; }

/* ---- type and layout ---- */
.kicker { margin: 0; color: var(--aged-paper); font-size: .73rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.dark-kicker { color: var(--ink); }
.section { width: var(--container); margin: 0 auto; padding: 7rem 0 0; }
.text-link { color: var(--aged-paper); font-size: .92rem; font-weight: 760; text-decoration: none; white-space: nowrap; }
.text-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.card-meta { color: var(--aged-paper); font-size: .71rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

/* ---- chrome: the footer ---- */
/* The board's footer: a slim red bar with ink thrown across it. The
   splatter is one picture used twice — as a mask over the red, so red
   flecks rise above the bar onto the black, and as itself, darkened, on
   the bar. */
.site-footer { position: relative; isolation: isolate; min-height: 0; margin-top: var(--space-96); padding: .6rem calc((100% - var(--container)) / 2); background: var(--brand-mark-red); color: var(--aged-paper); font-size: .78rem; }
/* One splatter across the bar's top edge, the board's: the same picture in
 * both layers so the flecks run on unbroken, red over the page above the
 * bar and dark on the bar itself. */
.site-footer::before, .site-footer::after { content: ""; position: absolute; top: -64px; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none; -webkit-mask: url(/web/images/splatter.webp) right 10% top -410px / 720px auto no-repeat; mask: url(/web/images/splatter.webp) right 10% top -410px / 720px auto no-repeat; }
.site-footer::before { background: var(--brand-mark-red); clip-path: inset(0 0 calc(100% - 64px) 0); }
.site-footer::after { background: var(--void-black); opacity: .8; clip-path: inset(64px 0 0 0); }
.site-footer a { color: var(--aged-paper); }
.site-footer .brand { font-family: var(--font-display); font-size: .9rem; }
/* Terms, Privacy, Refunds: on every page, as Paddle's review asks. */
.footer-legal { display: flex; flex-wrap: wrap; gap: 1rem; }
.site-footer p { margin: 0 0 0 auto; }

@media (max-width: 780px) {
  /* Logo, START and the hamburger on the first row; the five links fold out
     on a row of their own below it (header.is-open, site_header.html).
     .site-actions dissolves so START and the nav are the header's own items. */
  .site-header { min-height: 70px; padding-top: var(--space-16); flex-wrap: wrap; align-items: center; row-gap: var(--space-8); }
  .brand img { height: 48px; }
  .nav-toggle { order: 2; display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-right: -10px; padding: 10px; border: 0; background: none; color: var(--type-on-dark); cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; background: currentColor; transition: transform 160ms ease, opacity 160ms ease; }
  .is-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .is-open .nav-toggle span:nth-child(2) { opacity: 0; }
  .is-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .site-actions { display: contents; }
  .site-actions .button { order: 1; margin-left: auto; }
  .main-nav { display: none; order: 3; flex: 1 0 100%; flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--line); }
  .is-open .main-nav { display: flex; }
  .main-nav a { padding: var(--space-16) 0; border-bottom: 1px solid var(--line); font-size: 1.125rem; }
  .section { padding-top: 4.5rem; }
  .site-footer { flex-wrap: wrap; gap: .4rem 1rem; padding-block: .7rem; }
  .site-footer p { margin-left: 0; }
}

/* ---- notices and hints ---- */
/* What the last action did, said where its result is: large enough to be
   read at a glance on the dark page, in a box that sets it apart (Aldy,
   staging test 2026-10-11 — a .9rem line went unnoticed). */
.profile-notice { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 4px solid var(--aged-paper); background: color-mix(in srgb, var(--aged-paper) 12%, transparent); color: var(--aged-paper); font-size: 1.1rem; line-height: 1.5; }
.profile-notice.is-failed { border-left-color: var(--status-failed); background: color-mix(in srgb, var(--status-failed) 14%, transparent); color: var(--status-failed); }
.profile-hint { margin: 0; color: var(--paper-muted); font-size: .78rem; line-height: 1.4; }
.cover-missing { position: absolute; inset: 0; display: grid; place-items: center; color: var(--aged-paper); font-size: 3rem; opacity: .35; }

/* ---- filter pill: a thin grey edge on black, the words in the board's
   light grey at the weight of the nav, sized with the page ---- */
.pill { position: relative; display: flex; align-items: center; gap: var(--space-8); box-sizing: border-box; min-width: clamp(13rem, 19vw, 18rem); min-height: clamp(44px, 3.6vw, 56px); padding: 0 var(--space-16); border: 1px solid var(--line-light); background: var(--void-black); color: var(--type-on-dark); font: inherit; font-size: clamp(1rem, 1.6vw, 1.4rem); font-weight: 300; }
.pill:hover { border-color: var(--type-on-dark); }
.pill:focus-within, .pill:focus-visible { outline: 3px solid var(--type-on-dark); outline-offset: 3px; }
.pill svg { flex: none; width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pill input, .pill select { flex: 1; min-width: 0; padding: var(--space-8) 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; }
.pill input { width: 100%; }
.pill input::placeholder { color: var(--type-on-dark); opacity: 1; }
.pill select { appearance: none; text-align: center; text-align-last: center; cursor: pointer; }
.pill option { background: var(--panel); color: var(--type-on-dark); }

/* ---- marks on a word ---- */
/* The worn highlight (highlight-worn.webp: the board's grey with a grain,
   faint rust and scratches, ragged edges) behind a word, the word black. */
.worn { padding: 0 .3em; background: url(/web/images/highlight-worn.webp) center / 100% 100% no-repeat; color: var(--void-black); }
/* A scratch drawn by hand under a word, back and forth
   (scratch-underline.webp: three wavering passes, tapered, the ink
   skipping, stray flicks at the turns), as a mask, so it takes a colour. */
.underlined { position: relative; }
.underlined::after { content: ""; position: absolute; right: -.05em; bottom: -.26em; left: 0; height: .42em; background: var(--type-on-dark); -webkit-mask: url(/web/images/scratch-underline.webp) center / 100% 100% no-repeat; mask: url(/web/images/scratch-underline.webp) center / 100% 100% no-repeat; }

/* ---- paper ---- */
/* A torn sheet (paper-featured-v2.webp: the paper torn along its top and
   sides, bites out of it, a corner torn away, a pale fibre rim at the tear,
   and a shade where it curls), its shadow following the tear. The page
   gives it its size and padding. */
.torn-sheet { background: url(/web/images/paper-featured-v2.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 14px 22px color-mix(in srgb, var(--void-black) 55%, transparent)); color: var(--ink); }
/* A title on a torn strip of its own, as long as the title. The strip's
   paint starts about a quarter down its picture and curls over at its right
   end, so the words keep clear of both; the strip is a layer under them
   with a shadow of its own, lifting it off the sheet without blurring the
   words. The page gives it its size. */
.strip-title { position: relative; isolation: isolate; padding: .7em 1.6em .45em .8em; color: var(--brand-mark-red); font-family: var(--font-display); font-weight: 400; line-height: 1.2; overflow-wrap: anywhere; }
.strip-title::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(/web/images/paper-strip.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 3px 4px color-mix(in srgb, var(--void-black) 35%, transparent)); }
/* A picture as a print: a light border, laid a degree off square, a
   shadow under it. The page gives the picture its shape (aspect-ratio). */
.print { margin: 0; padding: var(--space-8); background: var(--aged-paper); box-shadow: 0 6px 14px color-mix(in srgb, var(--void-black) 35%, transparent); rotate: -1.2deg; }
.print img { display: block; width: 100%; height: auto; object-fit: cover; background: var(--paper-dim); }
/* Frosted glass under words laid on a picture (a card's caption, the
   popup's title strip): the blur takes the detail out from under the
   words and the tint takes the light, so cream text reads over the
   brightest render; with no blur to be had, the tint alone carries them. */
.glass { border-top: 1px solid color-mix(in srgb, var(--aged-paper) 22%, transparent); background: color-mix(in srgb, var(--void-black) 62%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.15); backdrop-filter: blur(14px) saturate(1.15); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: color-mix(in srgb, var(--void-black) 82%, transparent); }
}
/* Five red stars, inked up to the rating: the star icon as a mask over one
   gradient, so three and a half is three and a half. The markup sets
   --rating per room; none inked is the honest default. */
.stars { --rating: 0; display: block; width: 5.5em; height: 1em; font-size: var(--text-lg); background: linear-gradient(90deg, var(--brand-mark-red) calc(var(--rating) / 5 * 100%), var(--paper-dim) 0); -webkit-mask: url(/web/images/icons/star-red-full.svg) left / 1.1em 1em repeat-x; mask: url(/web/images/icons/star-red-full.svg) left / 1.1em 1em repeat-x; }

/* ---- the torn slab: a dark band torn top and bottom ---- */
/* Two pictures made from the board's torn edge: the whole torn sheet in
   cream (torn-edge-v6), and the same sheet shrunk evenly all round
   (torn-inner-v6), which masks the dark fill — so an even cream rim runs
   along every tear, steep or flat. Both stretch to the slab, whatever its
   size; it casts its shadow up over what lies above it. Put what fills it
   (photographs) in a .torn-cut: cut by the slab's inner shape, it lies
   under the rim wherever a tear crosses it. */
.torn-slab { position: relative; isolation: isolate; color: var(--aged-paper); }
.torn-slab::before, .torn-slab::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.torn-slab::before { background: url(/web/images/torn-edge-v6.webp) center / 100% 100% no-repeat; filter: drop-shadow(0 -14px 22px var(--void-black)); }
/* 3px inside the tear at top and foot: under a photograph's soft torn
   edge lies the cream, never this dark, which drew a black line there. */
.torn-slab::after { top: 3px; bottom: 3px; background: linear-gradient(180deg, var(--panel), var(--void-black)); -webkit-mask: url(/web/images/torn-inner-v6.webp) center / 100% 100% no-repeat; mask: url(/web/images/torn-inner-v6.webp) center / 100% 100% no-repeat; }
.torn-cut { position: relative; -webkit-mask: url(/web/images/torn-inner-v6.webp) 0 0 / 100% 100% no-repeat; mask: url(/web/images/torn-inner-v6.webp) 0 0 / 100% 100% no-repeat; }

/* A round arrow button, for a strip that scrolls. */
.feed-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--paper-dim); cursor: pointer; }
.feed-arrow svg { width: 1.4rem; height: 1.4rem; fill: currentColor; }
.feed-arrow:hover { color: var(--aged-paper); }
.feed-arrow:focus-visible { outline: 3px solid var(--aged-paper); outline-offset: 3px; }

/* ---- the create folder ---- */
/* The Create Mission panel (D46): an open case folder read like a book.
   The left leaf holds the choices (who may play, then the level, two by
   two), the right leaf the brief (the theme, its hint, Surprise me and
   START). The folder is a url() (a changed picture is a renamed file); the
   leaves are the two columns and the spine their gap. Each leaf runs the
   page's full height, so the level grid and the buttons share a bottom
   edge. Below 1024px of viewport (a tablet; /create, whose panel sits
   narrower, the same) the leaves would be too short, so they stack on a
   single sheet instead. */
.create-section { padding-bottom: 5rem; }
.create-section h2 { margin: .5rem 0 1.2rem; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.02; }
/* The folder spans the whole container (12 columns): its contents are in
   em and scale with it, 16px at 1200px wide up to 19.2px at the full
   1440 — so a wider folder is not the same form with more empty paper. */
.create-panel { --spine: 11%; position: relative; font-size: clamp(1rem, calc(var(--container) / 75), 1.2rem); display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--spine); aspect-ratio: 1600 / 1174; padding: 9% 7% 9%; background: url(/web/images/folder-open.webp) center / 100% 100% no-repeat; color: var(--ink); }
/* The folder's binder clip (folder-clip.webp: cut from folder-open.webp,
   the page behind its wire made transparent) laid back over the picture at
   its own place — the crop's box in the 1600x1174 picture, in percent of
   the panel — so it holds the idea box instead of sitting under it. */
.create-panel::after { content: ""; position: absolute; top: 32.7939%; left: 89.6875%; z-index: 1; width: 10.3125%; height: 11.0733%; background: url(/web/images/folder-clip.webp) center / 100% 100% no-repeat; pointer-events: none; }
.create-panel .label-red { font-size: 1.1em; }
/* The three section labels, one size, a step over the body. */
.create-panel .label-small { font-size: 1.05em; }
.create-leaf { display: flex; flex-direction: column; gap: 1.5em; min-width: 0; }
.create-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.create-choice legend, .create-theme-label { padding: 0 0 .8em; }
.create-theme-label { display: block; }
/* The label over its box, one block filling what the leaf has left. */
.create-theme { display: flex; flex: 1; flex-direction: column; min-height: 0; }
.create-panel textarea::placeholder { color: color-mix(in srgb, var(--ink) 55%, transparent); font-style: italic; opacity: 1; }
/* Who can play fills the left leaf down to Level: its two boxes share
   the height, their words centred in them, so the leaf has no empty paper
   against the tall theme box beside it. */
.create-visibility { display: grid; flex: 1; grid-template-rows: 1fr 1fr; gap: 1em; min-height: 0; }
/* The radio is clipped, never hidden: hidden is out of the tab order. */
.create-option input, .create-pill input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.create-option { display: grid; align-content: center; justify-items: start; gap: .6em; margin: 0; font-size: 1em; line-height: 1.45; cursor: pointer; padding: 1em 1.25em; border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); background: color-mix(in srgb, var(--aged-paper) 30%, transparent); }
/* Each a box like the levels, so both read as choices; the chosen one's
   edge goes solid (no :has, as in Firefox before 121: the cross alone). */
.create-option:has(input:checked) { border-style: solid; border-color: var(--ink); background: color-mix(in srgb, var(--aged-paper) 55%, transparent); }
.create-option .create-tag { font-size: 1.35em; }
/* "Public" on the tan label, ink on it. */
/* Bold: ink on the tan label is 4.1:1, which only large text may be. */
.create-option-public .create-tag { background-image: url(/web/images/label-brown-v2.svg); color: var(--ink); font-weight: 700; }
.create-option-public .create-tag:hover { background-image: url(/web/images/label-brown-v2.svg); }
/* The chosen one carries a tick before the word (Aldy, 2026-10-10; it
   was the board's cross). */
.create-option input:checked + .create-tag::before, .create-pill input:checked + .create-level .create-level-word::before { content: "\2713"; content: "\2713" / ""; margin-right: .5em; font-size: 1.25em; line-height: 1; }
.create-option input:focus-visible + .create-tag, .create-pill input:focus-visible + .create-level { outline: 3px solid var(--ink); outline-offset: 3px; }
.create-note { color: var(--ink); }
.create-pills { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9em; }
.create-pill { display: block; cursor: pointer; }
/* A level is a card like Unlisted and Public: its word, then what a room
   of it holds (puzzles, playtime) and its price. The chosen card's edge
   goes solid and its word wears the torn red label with the tick. The
   label is drawn the way every .label-red is, so its word is live text —
   a baked picture had to be cropped to fit and lost its outer letters. */
.create-level { display: grid; justify-items: center; gap: .3em; padding: .6em .5em .75em; border: 2px dashed color-mix(in srgb, var(--ink) 45%, transparent); background: color-mix(in srgb, var(--aged-paper) 30%, transparent); color: var(--ink); text-align: center; transition: transform 160ms ease; }
.create-pill:hover .create-level { transform: translateY(-2px); }
.create-pill input:checked + .create-level { border-style: solid; border-color: var(--ink); background: color-mix(in srgb, var(--aged-paper) 55%, transparent); }
.create-level-word { display: inline-flex; align-items: center; padding: var(--space-8) var(--space-24); color: var(--brand-mark-red); font-family: var(--font-display); font-size: 1.1em; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase; }
.create-pill input:checked + .create-level .create-level-word { background: url(/web/images/label-red-37-v2.svg) center / 100% 100% no-repeat; color: var(--aged-paper); }
.create-level-meta { font-size: .8em; line-height: 1.35; }
.create-level-price { font-size: .85em; font-weight: 700; line-height: 1.35; }
a.create-pill { text-decoration: none; }
a.create-pill .create-level-price { text-decoration: underline; }
/* The box takes what the leaf has left, so the buttons sit at its foot. */
.create-panel textarea { flex: 1; width: 100%; min-height: 9em; box-sizing: border-box; padding: .9em 1em; border: 2px solid var(--ink); background: color-mix(in srgb, var(--aged-paper) 55%, transparent); color: var(--ink); font: inherit; font-size: 1.05em; line-height: 1.5; resize: none; }
.create-panel textarea:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
/* Surprise me: while the idea is written the box shows three shimmering
   lines and the button says Drafting. Both words sit in one grid cell, so
   the button keeps the width of "Surprise me" and only the dots move. */
.create-box { position: relative; display: flex; flex: 1; min-height: 0; }
.create-shimmer { display: none; position: absolute; inset: 2px; flex-direction: column; gap: .8em; padding: 1.1em 1em; pointer-events: none; }
.create-shimmer i { display: block; height: .9em; border-radius: 2px; background: linear-gradient(100deg, color-mix(in srgb, var(--ink) 14%, transparent) 30%, var(--aged-paper) 50%, color-mix(in srgb, var(--ink) 14%, transparent) 70%) 100% 0 / 300% 100%; animation: shimmer 1.6s linear infinite; }
.create-shimmer i:nth-child(1) { width: 94%; }
.create-shimmer i:nth-child(2) { width: 80%; animation-delay: .15s; }
.create-shimmer i:nth-child(3) { width: 48%; animation-delay: .3s; }
.is-drafting .create-shimmer { display: flex; }
.is-drafting .create-box textarea { color: transparent; }
[data-surprise]:not([hidden]) { display: inline-grid; }
[data-surprise] > span { grid-area: 1 / 1; }
.surprise-busy { visibility: hidden; }
.is-drafting .surprise-idle { visibility: hidden; }
.is-drafting .surprise-busy { visibility: visible; }
.surprise-busy i { font-style: normal; animation: drafting-dot 1.2s infinite; }
.surprise-busy i:nth-child(2) { animation-delay: .2s; }
.surprise-busy i:nth-child(3) { animation-delay: .4s; }
@media (prefers-reduced-motion: reduce) { .create-shimmer i, .surprise-busy i { animation: none; } }
@keyframes shimmer { to { background-position: 0 0; } }
@keyframes drafting-dot { 0%, 100% { opacity: .2; } 40% { opacity: 1; } }
.create-hint { margin: -.75em 0 0; color: var(--ink); font-size: .85em; }
.create-hint [data-count] { float: right; margin-left: 1em; font-weight: 700; }
/* The terms box, between the hint and the buttons: native, so the browser
   holds Start until it is ticked. */
/* The link is beside the label, not inside it: a link in a label is two
   actions on one click, and the click on "terms" would tick the box. */
.create-agree { display: flex; align-items: flex-start; gap: .6em; margin: .2em 0 0; color: var(--ink); font-size: .85em; line-height: 1.45; }
.create-agree label { cursor: pointer; }
.create-agree input { flex: none; width: 1.15em; height: 1.15em; margin: .15em 0 0; accent-color: var(--brand-mark-red); cursor: pointer; }
.create-agree input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.create-agree a { color: var(--brand-mark-red); }
.create-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1em; }
.create-actions [hidden] { display: none; }
.create-panel .create-start { margin-left: auto; font-size: 2em; }
/* The home page's lower backdrop, behind its Create Mission section and
   behind the whole of /create. */
.create-backdrop { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 1024px) {
  .create-panel::after { content: none; }
  .create-panel { grid-template-columns: 1fr; gap: 2rem; font-size: 1rem; aspect-ratio: auto; padding: clamp(1.2rem, 5vw, 2.4rem); background: url(/web/images/paper-sheet.webp) center / cover no-repeat; box-shadow: var(--shadow-md); }
  .create-visibility { gap: 1rem; }
  .create-visibility { flex: none; grid-template-rows: none; }
  .create-panel textarea { resize: vertical; }
}
/* A phone: half a sheet is narrower than a chosen level's label, so one
   card a row. */
@media (max-width: 560px) {
  .create-pills { grid-template-columns: 1fr; }
}

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