/* ============================================================
   Shared page furniture - background patterns and scrollbar
   ============================================================

   Each pattern is an SVG used as a CSS mask rather than a picture: the mask
   supplies the shape and a theme variable supplies the colour underneath, so
   all six follow light and dark mode without a second copy of anything.

   Three fixed layers, back to front:
     .bgpat   z-index -3   the pattern itself
     .bgwash  z-index -2   radial wash pulling the middle back to the page
                           colour, so nothing sits behind the reading matter
     #bg      z-index -1   the puzzle pages' ambient-mote canvas

   Opacity runs inversely to density: the busiest patterns are the faintest,
   or they compete with the text.
   ============================================================ */

/* ---------------- background patterns ----------------
   One fixed layer, coloured by a theme variable and cut to shape by a mask.
   "plain" simply leaves it at zero opacity. */
.bgpat{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background-color:var(--accent); opacity:0;
  transition:opacity .4s ease;
  -webkit-mask-repeat:repeat; mask-repeat:repeat;
  -webkit-mask-position:center center; mask-position:center center;
}
/* Washes the middle of the page back towards the page colour, so the pattern
   stays at the edges and never sits behind the reading matter. */
.bgwash{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:radial-gradient(62% 46% at 50% 36%, var(--bg) 0%, transparent 76%);
}
@media (prefers-reduced-motion:reduce){ .bgpat{transition:none} }
html[data-pat="motes"] .bgpat{opacity:0.14;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'118'%20height%3D'118'%20viewBox%3D'0%200%20118%20118'%3E%3Cg%20fill%3D'black'%3E%20%3Ccircle%20cx%3D'15'%20cy%3D'22'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'10'%20r%3D'1.1'%2F%3E%20%3Ccircle%20cx%3D'101'%20cy%3D'56'%20r%3D'1.9'%2F%3E%3Ccircle%20cx%3D'43'%20cy%3D'79'%20r%3D'1.3'%2F%3E%20%3Ccircle%20cx%3D'88'%20cy%3D'101'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'7'%20cy%3D'68'%20r%3D'1.1'%2F%3E%20%3Cpath%20d%3D'M58%2042%20l2.4%205.6%205.6%202.4%20-5.6%202.4%20-2.4%205.6%20-2.4%20-5.6%20-5.6%20-2.4%205.6%20-2.4z'%2F%3E%20%3Cpath%20d%3D'M22%20103%20l1.7%204%204%201.7%20-4%201.7%20-1.7%204%20-1.7%20-4%20-4%20-1.7%204%20-1.7z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'118'%20height%3D'118'%20viewBox%3D'0%200%20118%20118'%3E%3Cg%20fill%3D'black'%3E%20%3Ccircle%20cx%3D'15'%20cy%3D'22'%20r%3D'1.7'%2F%3E%3Ccircle%20cx%3D'72'%20cy%3D'10'%20r%3D'1.1'%2F%3E%20%3Ccircle%20cx%3D'101'%20cy%3D'56'%20r%3D'1.9'%2F%3E%3Ccircle%20cx%3D'43'%20cy%3D'79'%20r%3D'1.3'%2F%3E%20%3Ccircle%20cx%3D'88'%20cy%3D'101'%20r%3D'1.5'%2F%3E%3Ccircle%20cx%3D'7'%20cy%3D'68'%20r%3D'1.1'%2F%3E%20%3Cpath%20d%3D'M58%2042%20l2.4%205.6%205.6%202.4%20-5.6%202.4%20-2.4%205.6%20-2.4%20-5.6%20-5.6%20-2.4%205.6%20-2.4z'%2F%3E%20%3Cpath%20d%3D'M22%20103%20l1.7%204%204%201.7%20-4%201.7%20-1.7%204%20-1.7%20-4%20-4%20-1.7%204%20-1.7z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:118px 118px;mask-size:118px 118px}
html[data-pat="lattice"] .bgpat{opacity:0.11;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'52'%20height%3D'52'%20viewBox%3D'0%200%2052%2052'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%3E%20%3Cpath%20d%3D'M26%201%20L51%2026%20L26%2051%20L1%2026%20Z'%2F%3E%20%3Cpath%20d%3D'M26%2014%20L38%2026%20L26%2038%20L14%2026%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'52'%20height%3D'52'%20viewBox%3D'0%200%2052%2052'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1'%3E%20%3Cpath%20d%3D'M26%201%20L51%2026%20L26%2051%20L1%2026%20Z'%2F%3E%20%3Cpath%20d%3D'M26%2014%20L38%2026%20L26%2038%20L14%2026%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:52px 52px;mask-size:52px 52px}
html[data-pat="trigons"] .bgpat{opacity:0.085;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'44'%20height%3D'44'%20viewBox%3D'0%200%2044%2044'%3E%3Cg%20fill%3D'black'%3E%20%3Cpath%20d%3D'M11%204%20L19%2018%20L3%2018%20Z'%2F%3E%20%3Cpath%20d%3D'M33%2022%20L41%2036%20L25%2036%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'44'%20height%3D'44'%20viewBox%3D'0%200%2044%2044'%3E%3Cg%20fill%3D'black'%3E%20%3Cpath%20d%3D'M11%204%20L19%2018%20L3%2018%20Z'%2F%3E%20%3Cpath%20d%3D'M33%2022%20L41%2036%20L25%2036%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:44px 44px;mask-size:44px 44px}
html[data-pat="weave"] .bgpat{opacity:0.1;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'76'%20height%3D'76'%20viewBox%3D'0%200%2076%2076'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.2'%3E%20%3Cpath%20d%3D'M38%206%20L64%2021%20L64%2051%20L38%2066%20L12%2051%20L12%2021%20Z'%2F%3E%20%3Cpath%20d%3D'M38%2024%20L50%2031%20L50%2044%20L38%2051%20L26%2044%20L26%2031%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'76'%20height%3D'76'%20viewBox%3D'0%200%2076%2076'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.2'%3E%20%3Cpath%20d%3D'M38%206%20L64%2021%20L64%2051%20L38%2066%20L12%2051%20L12%2021%20Z'%2F%3E%20%3Cpath%20d%3D'M38%2024%20L50%2031%20L50%2044%20L38%2051%20L26%2044%20L26%2031%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:76px 76px;mask-size:76px 76px}
html[data-pat="sigils"] .bgpat{opacity:0.12;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'196'%20height%3D'196'%20viewBox%3D'0%200%20196%20196'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%3E%20%3Cpath%20d%3D'M52%2020%20L84%2052%20L52%2084%20L20%2052%20Z'%2F%3E%20%3Cpath%20d%3D'M52%2040%20L64%2052%20L52%2064%20L40%2052%20Z'%2F%3E%20%3Cpath%20d%3D'M146%20112%20L178%20144%20L146%20176%20L114%20144%20Z'%2F%3E%20%3Cpath%20d%3D'M148%2028%20L176%2076%20L120%2076%20Z'%2F%3E%20%3Cpath%20d%3D'M50%20122%20L78%20170%20L22%20170%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'196'%20height%3D'196'%20viewBox%3D'0%200%20196%20196'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'2'%3E%20%3Cpath%20d%3D'M52%2020%20L84%2052%20L52%2084%20L20%2052%20Z'%2F%3E%20%3Cpath%20d%3D'M52%2040%20L64%2052%20L52%2064%20L40%2052%20Z'%2F%3E%20%3Cpath%20d%3D'M146%20112%20L178%20144%20L146%20176%20L114%20144%20Z'%2F%3E%20%3Cpath%20d%3D'M148%2028%20L176%2076%20L120%2076%20Z'%2F%3E%20%3Cpath%20d%3D'M50%20122%20L78%20170%20L22%20170%20Z'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:196px 196px;mask-size:196px 196px}
html[data-pat="orbits"] .bgpat{opacity:0.09;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'260'%20height%3D'260'%20viewBox%3D'0%200%20260%20260'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%3E%20%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'56'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'37'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'18'%2F%3E%20%3Ccircle%20cx%3D'196'%20cy%3D'192'%20r%3D'48'%2F%3E%3Ccircle%20cx%3D'196'%20cy%3D'192'%20r%3D'27'%2F%3E%20%3Ccircle%20cx%3D'210'%20cy%3D'48'%20r%3D'14'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'214'%20r%3D'9'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'260'%20height%3D'260'%20viewBox%3D'0%200%20260%20260'%3E%3Cg%20fill%3D'none'%20stroke%3D'black'%20stroke-width%3D'1.5'%3E%20%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'56'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'37'%2F%3E%3Ccircle%20cx%3D'66'%20cy%3D'66'%20r%3D'18'%2F%3E%20%3Ccircle%20cx%3D'196'%20cy%3D'192'%20r%3D'48'%2F%3E%3Ccircle%20cx%3D'196'%20cy%3D'192'%20r%3D'27'%2F%3E%20%3Ccircle%20cx%3D'210'%20cy%3D'48'%20r%3D'14'%2F%3E%3Ccircle%20cx%3D'38'%20cy%3D'214'%20r%3D'9'%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E");-webkit-mask-size:260px 260px;mask-size:260px 260px}

/* ---------------- scrollbar ----------------

   The standard properties, not ::-webkit-scrollbar. Since Chrome 121 the two
   cannot be combined: setting scrollbar-color to anything but auto makes the
   browser ignore every -webkit-scrollbar rule, which the CSS Working Group
   resolved deliberately. Choosing the standard pair costs rounded thumbs and
   pixel widths, and buys Firefox - the right way round for a site nobody is
   going to admire the scrollbar of.

   Colours are mixed from tokens both stylesheets already define, so this one
   rule themes the home page and the puzzles alike and follows light and dark
   without a second copy. scrollbar-color inherits, so the suggestion dropdown
   and any other scrolling panel pick it up for free.

   Width is left at auto on purpose. "thin" looks sleeker and is meaningfully
   worse to actually grab, particularly on a trackpad.

   scrollbar-gutter reserves the space permanently. The puzzle pages grow as
   each clue is revealed, so without it the whole column shifts sideways the
   moment the content passes the fold. */
html{
  scrollbar-color: color-mix(in oklab, var(--accent) 45%, var(--line)) var(--sunken);
  scrollbar-gutter: stable;
}

/* ---------------- the next-puzzle line ----------------

   Mounted by /assets/countdown.js under a finished puzzle. Deliberately
   quiet: a hairline above it, a small uppercase label, and the figure
   itself in tabular numerals so the digits do not jitter as they tick.
   Colours come from tokens every section already defines, so one rule
   dresses the trivia pages, Star Miner, Objectivity and Towerpath
   alike. */
.tg-countdown{
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  margin:1.15rem auto 0; padding-top:1rem;
  border-top:1px solid var(--line);
}
.tg-cd-label{
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-faint);
}
.tg-cd-time{
  font-family:var(--mono); font-size:1.45rem; font-weight:500;
  letter-spacing:.06em; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.tg-countdown.ready .tg-cd-label{ color:var(--accent); }
@media (prefers-reduced-motion:reduce){ .tg-countdown{ transition:none } }
/* A weekly section says its piece on one line; the figure slot would
   otherwise leave a gap where a number used to be. */
.tg-countdown.weekly .tg-cd-time{ display:none }

/* Under the subline rather than at the foot of the results. The footer form
   is a full-width block with a rule above it and a 1.45rem figure; up here it
   has to sit quietly under the date without competing with the crest, so it
   folds onto one row and loses the rule. */
.tg-countdown.top{
  flex-direction:row; align-items:baseline; justify-content:center;
  gap:.5rem; margin:.45rem auto 0; padding-top:0; border-top:0;
}
.tg-countdown.top .tg-cd-label{ font-size:.55rem }
.tg-countdown.top .tg-cd-time{ font-size:.95rem; letter-spacing:.08em }
/* A weekly section's label is the whole sentence, so it cannot go as small
   as a two-word caption. */
.tg-countdown.top.weekly .tg-cd-label{ font-size:.62rem; letter-spacing:.13em }