/*
 * Freemato. #FREEMATO protest edition.
 *
 * System fonts only: CSP font-src is 'self' and no font file ships, so the
 * display face is a heavy-condensed system stack. Impact and Arial Black are
 * present on effectively every Windows and macOS install and are what the OG
 * cards are rendered in, so the site and its social previews match.
 *
 * LOUD CHROME, CALM FOCUS
 * -----------------------
 * The design is a protest placard, and it behaves like one. While a focus
 * block is actually running the page goes quiet: the ticker stops, the frame
 * stops shouting, the neon drops back. The moment a break starts, everything
 * turns lime. app.js stamps the root element:
 *
 *   <html data-phase="focus|short|long" data-running="true|false">
 *
 * so every rule below keys off those two attributes. A visitor with no
 * JavaScript never gets the attributes and sees the loud resting state, which
 * is the correct fallback: nothing is running, so nothing needs to be calm.
 */

:root {
  --obsidian: #121212;
  --panel: #1a1a1a;
  --sunken: #0d0d0d;
  --hotpink: #ff1493;
  --tomato: #e63946;
  --lime: #39ff14;
  --cyber: #ccff00;

  --ink: #ffffff;
  --ink-soft: rgba(255, 255, 255, 0.68);
  /* 0.42 looked right and measured 4.12:1 on this ground, which fails AA for
   * small text. This token carries the byline, the advertisement label and
   * the affiliate disclosure, so it is exactly the text that must be legible.
   * 0.55 measures 6.18:1 and still reads as secondary. */
  --ink-faint: rgba(255, 255, 255, 0.55);
  --line: rgba(255, 255, 255, 0.24);

  /* The one token that carries the whole phase story. */
  --accent: var(--hotpink);
  --accent-ink: #000000;

  --font-display: Impact, "Arial Black", Haettenschweiler, "Franklin Gothic Bold", sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Courier New", monospace;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 16px;
  --frame: 4px;
  color-scheme: dark;
}

/* Break states flip the entire system to lime. */
:root[data-phase="short"],
:root[data-phase="long"] {
  --accent: var(--lime);
}

/* Running focus: the lockdown. Neon recedes so the page is liveable.
 * This value is not chosen by eye. --accent is a text colour (the phase
 * label, links) as well as a frame colour, so it has to clear 4.5:1 on the
 * obsidian ground AND carry black button text. A first pass at #b3126a looked
 * right and measured 2.86:1, which is a fail on both counts. #d44a8c is
 * 4.60:1 as text and 5.16:1 behind black, and still reads as clearly muted
 * next to the full #ff1493. */
:root[data-phase="focus"][data-running="true"] {
  --accent: #d44a8c;
}

/* Quiet theme: same bones, neon dialled right down for long sessions. */
:root[data-theme="quiet"] {
  --accent: #909090;
  --cyber: #bdbdbd;
  --lime: #8fd48a;
}

:root[data-theme="quiet"][data-phase="short"],
:root[data-theme="quiet"][data-phase="long"] {
  --accent: #8fd48a;
}

/* Paper theme: light and high contrast, for reading the guides. */
:root[data-theme="paper"] {
  --obsidian: #f4f2ee;
  --panel: #ffffff;
  --sunken: #e8e5df;
  --ink: #141210;
  --ink-soft: rgba(20, 18, 16, 0.74);
  --ink-faint: rgba(20, 18, 16, 0.66);
  --line: rgba(20, 18, 16, 0.26);
  --accent: #c2185b;
  --cyber: #6f6100;
  --accent-ink: #ffffff;
  color-scheme: light;
}

:root[data-theme="paper"][data-phase="short"],
:root[data-theme="paper"][data-phase="long"] {
  --accent: #1b7a2f;
}

:root[data-theme="paper"][data-phase="focus"][data-running="true"] {
  --accent: #8e1142;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--obsidian);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
a { color: var(--accent); }

/* The markdown pipeline wraps every heading in a self-anchor, so without this
 * every h2 in a guide renders as a full accent-coloured underlined link and
 * competes with the real links in the prose. The anchor stays, it just stops
 * announcing itself until you reach for it. */
h1 > a, h2 > a, h3 > a { color: inherit; text-decoration: none; }
h1 > a:hover, h2 > a:hover, h3 > a:hover { color: var(--accent); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.04;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 6vw, 3.4rem); margin: 0 0 0.4em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 1.7em 0 0.5em; }
h3 { font-size: 1.15rem; margin: 1.4em 0 0.4em; }

:focus-visible { outline: 3px solid var(--cyber); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -70px; z-index: 60;
  background: var(--cyber); color: #000; padding: 10px 16px;
  border: var(--frame) solid #000; font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0.12em; text-decoration: none;
}
.skip:focus { top: 10px; }

/* ----------------------------------------------------------- ticker tape */

.marquee {
  overflow: hidden;
  border-top: var(--frame) solid var(--accent);
  border-bottom: var(--frame) solid var(--accent);
  background: var(--obsidian);
  color: var(--cyber);
  font-family: var(--font-display);
  font-size: 0.92rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  user-select: none;
  transition: border-color 300ms, color 300ms;
}
.marquee-track {
  display: flex;
  width: max-content;
  padding: 6px 0;
  animation: marquee 34s linear infinite;
}
.marquee-track span { white-space: nowrap; padding-right: 2.5rem; }

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* The lockdown: the ticker stops while a focus block runs. */
:root[data-phase="focus"][data-running="true"] .marquee-track { animation-play-state: paused; }
:root[data-phase="focus"][data-running="true"] .marquee { color: var(--ink-faint); }

/* --------------------------------------------------------------- header */

.site-header {
  display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap;
  padding: 12px var(--gutter);
  background: var(--obsidian);
  border-bottom: 2px solid var(--line);
}

.logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.logo .hash { color: var(--accent); transition: color 300ms; }
.logo-mark {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--tomato);
  box-shadow: 0 0 0 2px var(--obsidian), 0 0 0 4px var(--accent);
}

.preset-nav { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.preset-nav a {
  display: inline-block; padding: 3px 9px;
  border: 2px solid var(--line);
  background: var(--panel); color: var(--ink-soft);
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  text-decoration: none; white-space: nowrap;
  transition: border-color 120ms, color 120ms;
}
.preset-nav a:hover { border-color: var(--cyber); color: var(--cyber); }
.preset-nav a[aria-current="page"] {
  background: var(--accent); border-color: #000; color: var(--accent-ink);
  box-shadow: 3px 3px 0 0 var(--ink);
}

.header-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.header-tools select, .header-tools button {
  font-family: var(--font-display); font-size: 0.86rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 10px; border: 2px solid var(--line);
  background: var(--panel); color: var(--ink); cursor: pointer;
}
.header-tools select { font-family: var(--font-mono); letter-spacing: 0; text-transform: none; }
.header-tools button:hover, .header-tools select:hover { border-color: var(--cyber); color: var(--cyber); }
#presets-toggle { display: none; }

/* ---------------------------------------------------------------- timer */

.timer {
  position: relative;
  max-width: 900px;
  margin: 34px auto 10px;
  padding: 30px var(--gutter) 26px;
  border: 6px solid var(--accent);
  background: var(--obsidian);
  box-shadow: 8px 8px 0 0 var(--accent);
  text-align: center;
  transition: border-color 300ms, box-shadow 300ms;
}
:root[data-phase="short"] .timer,
:root[data-phase="long"] .timer { border-style: dashed; }

.phase-row {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 14px; margin-bottom: 4px;
}

.pill {
  display: inline-block; padding: 3px 12px;
  border: 3px solid var(--accent); background: transparent; color: var(--accent);
  font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  transition: color 300ms, border-color 300ms, background-color 300ms;
}
:root[data-phase="short"] .pill,
:root[data-phase="long"] .pill { background: var(--accent); color: var(--accent-ink); }

.dots { display: flex; gap: 6px; }
.dots .dot { width: 10px; height: 10px; border: 2px solid var(--accent); background: transparent; }
.dots .dot.on { background: var(--accent); }

.round-label {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}

.clock {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 18px 34px; margin: 20px 0 6px;
}

/* ---- the booking photo ---- */

.mugshot { margin: 0; display: flex; flex-direction: column; gap: 10px; align-items: center; }

.mugshot-frame {
  position: relative; width: 150px;
  border: var(--frame) solid var(--accent);
  background: #000;
  box-shadow: 6px 6px 0 0 var(--accent);
  transform: rotate(-2deg);
  transition: border-color 300ms, box-shadow 300ms, transform 400ms;
}
:root[data-phase="short"] .mugshot-frame,
:root[data-phase="long"] .mugshot-frame { transform: rotate(2deg); }

.mugshot-frame img { display: block; width: 100%; height: auto; }

.mugshot-tint {
  position: absolute; inset: 0; pointer-events: none;
  background: var(--accent); opacity: 0.26; mix-blend-mode: multiply;
  transition: background-color 300ms;
}

.served { width: 150px; }
.served-label {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.6rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint);
}
.served-bar {
  margin-top: 4px; height: 12px;
  border: 2px solid var(--line); background: var(--sunken);
}
.served-fill {
  display: block; height: 100%;
  width: calc(var(--fill, 0) * 100%);
  background: var(--accent);
  transition: background-color 300ms;
}

.digits {
  margin: 0; padding: 6px 18px;
  border: var(--frame) solid var(--accent);
  box-shadow: 6px 6px 0 0 var(--accent);
  font-family: var(--font-mono); font-weight: 700;
  font-size: clamp(3rem, 13vw, 6.5rem);
  line-height: 1.04; letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  transition: border-color 300ms, box-shadow 300ms;
}

/* ---- controls ---- */

.controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 18px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 11px 24px; min-width: 104px;
  border: var(--frame) solid var(--ink);
  background: var(--obsidian); color: var(--ink);
  box-shadow: 5px 5px 0 0 var(--accent);
  cursor: pointer; text-decoration: none;
  transition: transform 70ms, box-shadow 70ms, color 120ms, border-color 120ms;
}
.btn:hover { color: var(--cyber); border-color: var(--cyber); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }

.btn-primary {
  background: var(--accent); border-color: #000; color: var(--accent-ink);
  box-shadow: 5px 5px 0 0 var(--ink);
}
.btn-primary:hover { color: var(--accent-ink); border-color: #000; filter: brightness(1.08); }

.btn-small {
  font-size: 0.8rem; padding: 4px 12px; min-width: 0;
  border-width: 2px; box-shadow: 3px 3px 0 0 var(--accent);
}

.intervals {
  margin: 14px 0 0;
  font-family: var(--font-mono); font-size: 0.78rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
#edit { margin-left: 10px; }

.edit-form {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px;
  margin-top: 16px; padding: 16px;
  border: 3px solid var(--line); background: var(--panel);
}
.edit-form[hidden] { display: none; }
.edit-form label {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}
.edit-form input {
  font-family: var(--font-mono); font-size: 1rem; width: 5.5rem; padding: 7px 9px;
  border: 2px solid var(--line); background: var(--sunken); color: var(--ink);
}
.edit-form button { align-self: flex-end; }

/* --------------------------------------------------------------- layout */

.layout, .page-hub, .page-article, .page-utility, .page-404 {
  max-width: 1120px; margin: 0 auto; padding: 8px var(--gutter) 56px;
}
.layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; }
.col-main { min-width: 0; }
.col-side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

@media (min-width: 940px) {
  .layout { grid-template-columns: minmax(0, 1fr) 300px; }
}

.copy { max-width: 68ch; }
.copy p, .copy li { color: var(--ink-soft); }
.copy strong { color: var(--ink); }
.page-article article, .page-utility article { max-width: 72ch; margin: 0 auto; }
.page-article p, .page-article li, .page-utility p, .page-utility li { color: var(--ink-soft); }

.byline {
  font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint);
}
.copy .byline { color: var(--ink-faint); }

/* ---------------------------------------------------------------- cards */

.card, .try-it, .disclosure {
  border: 3px solid var(--line); background: var(--panel); padding: 18px;
  box-shadow: 5px 5px 0 0 rgba(255, 255, 255, 0.1);
}
.card h2, .card h3 { margin-top: 0; }
.card p { color: var(--ink-soft); margin-bottom: 0; }
a.card { display: block; text-decoration: none; color: var(--ink); margin-bottom: 12px; }
a.card:hover, .cards li:hover { border-color: var(--accent); box-shadow: 5px 5px 0 0 var(--accent); }

.try-it { border-color: var(--accent); }
.disclosure {
  box-shadow: none; background: var(--sunken);
  font-family: var(--font-mono); font-size: 0.76rem;
  letter-spacing: 0.06em; color: var(--ink-faint);
}
.affiliate .btn { margin-top: 12px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 620px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cards li { border: 3px solid var(--line); background: var(--panel); transition: border-color 120ms, box-shadow 120ms; }
.cards a { display: block; padding: 15px 17px; text-decoration: none; color: var(--ink); }
.cards h3 { margin: 0 0 0.3em; }
.cards p { margin: 0; font-size: 0.9rem; color: var(--ink-soft); }

.group { margin-bottom: 38px; }
.related { margin-top: 38px; }
.lengths { margin-top: 38px; }
.lengths ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 14px; }
.lengths li { margin: 0; }
.more-link { font-family: var(--font-display); text-transform: uppercase; letter-spacing: 0.1em; }

/* ------------------------------------------------------------------ faq */

.faq details { border-bottom: 2px solid var(--line); padding: 14px 0; }
.faq summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 1.05rem;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "[+] "; color: var(--accent); font-family: var(--font-mono); }
.faq details[open] summary::before { content: "[-] "; }
.faq details > *:not(summary) { color: var(--ink-soft); }

/* ------------------------------------------------------------------ ads */
/* Framed sponsor placard: the ad wears the same brutalist frame as
 * everything else, so a bright retail creative reads as deliberate rather
 * than pasted on. The label stays the literal word "Advertisement" because
 * disclosure has to be unambiguous, whatever the house voice would prefer. */

.adslot {
  display: block; margin: 0 0 22px; min-width: 0; text-align: center;
  border: 3px solid var(--line); background: var(--panel); padding: 10px;
}
.adslot[hidden] { display: none; }
.adslot-label {
  display: block; margin-bottom: 8px;
  font-family: var(--font-display); font-size: 0.66rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-faint);
}
.ad-live { display: block; line-height: 0; margin-inline: auto; }
.ad-live img { display: block; width: 100%; height: auto; }
/* A stand-in banner is smaller than the box reserved for the one it replaces
 * (src/app.js). It sits centred in that box, which keeps its size. */
.ad-standin .ad-live { display: grid; align-content: center; }
.adsbygoogle { display: block; }

/* Reserve each banner's box before it loads, so the article does not jump
 * (CLS). build.mjs tags every slot with ad-lg-WxH (>= 940px) and ad-sm-WxH
 * (below), and a test fails if a size it emits has no rule here. The
 * breakpoint must match matchMedia('(min-width:940px)') in app.js. "none"
 * means that width has no banner, so the slot is hidden before any script
 * runs instead of collapsing afterwards. */
@media (min-width: 940px) {
  .ad-lg-728x90 .ad-live { max-width: 728px; aspect-ratio: 728 / 90; }
  .ad-lg-300x250 .ad-live { max-width: 300px; aspect-ratio: 300 / 250; }
  .ad-lg-300x375 .ad-live { max-width: 300px; aspect-ratio: 300 / 375; }
  .ad-lg-none { display: none; }
}
@media (max-width: 939.98px) {
  .ad-sm-300x250 .ad-live { max-width: 300px; aspect-ratio: 300 / 250; }
  .ad-sm-300x375 .ad-live { max-width: 300px; aspect-ratio: 300 / 375; }
  .ad-sm-none { display: none; }
}

/* --------------------------------------------------------------- footer */

.site-footer {
  display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center;
  border-top: var(--frame) solid var(--accent);
  padding: 26px var(--gutter) 34px;
  background: var(--obsidian);
  transition: border-color 300ms;
}
.site-footer a {
  font-family: var(--font-display); font-size: 0.92rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); text-decoration: none;
}
.site-footer a:hover { color: var(--cyber); }

/* --------------------------------------------------------------- phones */

@media (max-width: 699px) {
  body { font-size: 16px; }
  .timer { margin-top: 22px; padding: 24px 12px 20px; box-shadow: 5px 5px 0 0 var(--accent); }
  .clock { gap: 14px 20px; }
  .mugshot-frame, .served { width: 118px; }
  #presets-toggle { display: inline-block; }

  /* The bottom sheet is opened by a button app.js builds, so only collapse the
   * nav on pages that actually load app.js. Articles and the utility pages do
   * not, and hiding it there left six pages with no preset navigation at all
   * on a phone and no control to bring it back. There it simply wraps. */
  .has-app .preset-nav {
    display: none;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    max-height: 70vh; overflow-y: auto;
    padding: 16px var(--gutter) calc(16px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    border-top: var(--frame) solid var(--accent);
  }
  .has-app .preset-nav.open { display: flex; }
  .preset-nav a { font-size: 0.92rem; padding: 8px 13px; }

  /* On a page with no sheet to open, the full chip list eats a third of a
   * phone screen before the content starts. Collapse it to the one link that
   * leads everywhere else instead of hiding navigation entirely. */
  body:not(.has-app) .preset-nav a:not(.more) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .marquee-track { animation: none; }
}

/* ---------------------------------------------------------------- looks */
/* The aesthetic timer (/aesthetic) is the same markup in a calmer skin. The
 * build puts data-look on <html> for that page only and app.js switches it,
 * so nothing here can reach another page. Every rule is scoped to
 * :root[data-look] and placed last, so it wins over the theme and phase rules
 * above at equal specificity.
 *
 * Each palette was measured, not eyeballed: body, soft and faint text clear
 * 4.5:1 on both the ground and the panel, the accent clears 4.5:1 as text,
 * and --accent-ink clears 4.5:1 on the accent and on the break colour. */

:root[data-look] {
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-clock: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Roboto, system-ui, sans-serif;
  --accent: var(--look-accent);
}
:root[data-look][data-phase="short"],
:root[data-look][data-phase="long"] { --accent: var(--look-break); }
/* No "lockdown" dimming here: the calm palette is already the quiet state. */
:root[data-look][data-phase="focus"][data-running="true"] { --accent: var(--look-accent); }

:root[data-look="blush"] {
  --obsidian: #fbf1f0; --panel: #ffffff; --sunken: #f3e3e1;
  --ink: #3b2a2e; --ink-soft: rgba(59, 42, 46, 0.82); --ink-faint: rgba(59, 42, 46, 0.72);
  --line: rgba(59, 42, 46, 0.2);
  --look-accent: #a8405f; --look-break: #3f6f4f; --lime: #3f6f4f; --accent-ink: #ffffff; --cyber: #7a4326;
  color-scheme: light;
}
:root[data-look="sage"] {
  --obsidian: #eef2ea; --panel: #fbfcf9; --sunken: #dfe6d9;
  --ink: #26332b; --ink-soft: rgba(38, 51, 43, 0.82); --ink-faint: rgba(38, 51, 43, 0.72);
  --line: rgba(38, 51, 43, 0.2);
  --look-accent: #356148; --look-break: #8a4f2f; --lime: #8a4f2f; --accent-ink: #ffffff; --cyber: #5a4a1e;
  color-scheme: light;
}
:root[data-look="latte"] {
  --obsidian: #f6efe4; --panel: #fffaf2; --sunken: #eadfce;
  --ink: #3a2f25; --ink-soft: rgba(58, 47, 37, 0.82); --ink-faint: rgba(58, 47, 37, 0.72);
  --line: rgba(58, 47, 37, 0.2);
  --look-accent: #85531f; --look-break: #3f665e; --lime: #3f665e; --accent-ink: #ffffff; --cyber: #6b3d2e;
  color-scheme: light;
}
:root[data-look="dusk"] {
  --obsidian: #1f2233; --panel: #292d42; --sunken: #171a28;
  --ink: #eef0fa; --ink-soft: rgba(238, 240, 250, 0.76); --ink-faint: rgba(238, 240, 250, 0.66);
  --line: rgba(238, 240, 250, 0.2);
  --look-accent: #b7a6f5; --look-break: #8fd3c1; --lime: #8fd3c1; --accent-ink: #15172a; --cyber: #f2c98a;
  color-scheme: dark;
}
:root[data-look="ink"] {
  --obsidian: #14161a; --panel: #1d2026; --sunken: #0e1013;
  --ink: #f2f3f5; --ink-soft: rgba(242, 243, 245, 0.76); --ink-faint: rgba(242, 243, 245, 0.66);
  --line: rgba(242, 243, 245, 0.2);
  --look-accent: #e6c07b; --look-break: #9ad1b0; --lime: #9ad1b0; --accent-ink: #14161a; --cyber: #ffffff;
  color-scheme: dark;
}

:root[data-look] .marquee,
:root[data-look] #theme,
:root[data-look] .mugshot-frame,
:root[data-look] .served-label { display: none; }

:root[data-look] h1, :root[data-look] h2, :root[data-look] h3 {
  text-transform: none; letter-spacing: 0; line-height: 1.15;
}
:root[data-look] :focus-visible { outline-color: var(--accent); }

:root[data-look] .site-header { border-bottom-width: 1px; }
:root[data-look] .preset-nav a { border-width: 1px; border-radius: 999px; }
:root[data-look] .preset-nav a[aria-current="page"] { border-color: var(--accent); box-shadow: none; }
:root[data-look] .header-tools select,
:root[data-look] .header-tools button {
  border-width: 1px; border-radius: 999px;
  font-family: var(--font); letter-spacing: 0; text-transform: none;
}

:root[data-look] .timer {
  border: 1px solid var(--line); border-radius: 32px;
  background: var(--panel);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.45);
  padding-block: 44px 36px;
}
:root[data-look] .pill {
  border-width: 1px; border-radius: 999px; padding: 5px 16px;
  font-family: var(--font); font-size: 0.76rem; letter-spacing: 0.22em;
}
:root[data-look] .dots .dot { width: 9px; height: 9px; border-width: 1px; border-radius: 50%; }
:root[data-look] .round-label,
:root[data-look] .intervals,
:root[data-look] .byline,
:root[data-look] .adslot-label { font-family: var(--font); }

/* The clock first, the progress bar under it. */
:root[data-look] .clock { flex-direction: column-reverse; gap: 14px; margin: 26px 0 8px; }
:root[data-look] .digits {
  border: 0; box-shadow: none; padding: 0;
  font-family: var(--font-clock); font-weight: 300;
  font-size: clamp(4.6rem, 21vw, 11.5rem);
  line-height: 1; letter-spacing: -0.02em;
}
:root[data-look] .served { width: min(420px, 78vw); }
:root[data-look] .served-bar {
  margin-top: 0; height: 6px; border: 0; border-radius: 999px; overflow: hidden;
}
:root[data-look] .served-fill { border-radius: 999px; }

:root[data-look] .btn {
  border-width: 1px; border-color: var(--line); border-radius: 999px;
  background: transparent; box-shadow: none;
  font-family: var(--font); font-size: 0.8rem; letter-spacing: 0.16em;
}
:root[data-look] .btn:hover { border-color: var(--accent); color: var(--accent); }
:root[data-look] .btn:active { transform: none; }
:root[data-look] .btn-primary,
:root[data-look] .btn-primary:hover {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
:root[data-look] .edit-form { border-width: 1px; border-radius: 18px; }
:root[data-look] .edit-form input { border-width: 1px; border-radius: 10px; }

:root[data-look] .card,
:root[data-look] .cards li,
:root[data-look] .adslot {
  border-width: 1px; border-radius: 18px; box-shadow: none;
}
:root[data-look] a.card:hover,
:root[data-look] .cards li:hover { box-shadow: none; }

:root[data-look] .faq details { border-bottom-width: 1px; }
:root[data-look] .faq summary { text-transform: none; letter-spacing: 0; font-size: 1.12rem; }
:root[data-look] .faq summary::before { content: "+  "; font-family: var(--font); }
:root[data-look] .faq details[open] summary::before { content: "\2212  "; }

:root[data-look] .site-footer { border-top: 1px solid var(--line); }
:root[data-look] .site-footer a,
:root[data-look] .more-link { font-family: var(--font); letter-spacing: 0.02em; text-transform: none; }

/* The look picker. Swatch colours are set here because the CSP and the
 * inline-style lint both rule out a style attribute. */
.looks {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 900px; margin: 20px auto 14px; padding: 0 var(--gutter);
}
.look-swatch {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink-soft);
  font-family: var(--font); font-size: 0.85rem; cursor: pointer;
}
.look-swatch::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--swatch); border: 1px solid rgba(128, 128, 128, 0.45);
}
.look-swatch:hover { color: var(--ink); border-color: var(--accent); }
.look-swatch[aria-pressed="true"] { color: var(--ink); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.look-swatch[data-set-look="blush"] { --swatch: linear-gradient(135deg, #fbf1f0 50%, #a8405f 50%); }
.look-swatch[data-set-look="sage"] { --swatch: linear-gradient(135deg, #eef2ea 50%, #356148 50%); }
.look-swatch[data-set-look="latte"] { --swatch: linear-gradient(135deg, #f6efe4 50%, #85531f 50%); }
.look-swatch[data-set-look="dusk"] { --swatch: linear-gradient(135deg, #1f2233 50%, #b7a6f5 50%); }
.look-swatch[data-set-look="ink"] { --swatch: linear-gradient(135deg, #14161a 50%, #e6c07b 50%); }

@media (max-width: 699px) {
  :root[data-look] .timer { border-radius: 24px; padding-block: 30px 26px; box-shadow: 0 20px 40px -30px rgba(0, 0, 0, 0.45); }
}