/* ===================================================================
   samesecond — "departure board" aesthetic.
   A shared countdown clock deserves to look like the boards that have
   run every airport and station clock for the last 60 years: split-flap
   tiles, riveted steel chassis, amber signal, mechanical everything.
   =================================================================== */
:root{
  --board:oklch(0.14 0.012 260);         /* app background */
  --board-deep:oklch(0.10 0.01 260);
  --panel:oklch(0.23 0.014 260);         /* elevated surface / card */
  --panel-line:oklch(0.36 0.015 260);    /* border, strong */
  --flap:oklch(0.94 0.004 260);          /* split-flap tile face */
  --flap-ink:oklch(0.14 0.012 260);
  --amber:oklch(0.72 0.16 265);          /* accent — link-blue */
  --amber-deep:oklch(0.62 0.18 265);
  --paper-text:oklch(0.94 0.004 260);    /* body copy on dark chassis */
  --paper-dim:oklch(0.62 0.012 260);
  --ok:oklch(0.72 0.16 152);
  --display:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --sans:"Inter",-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);background:var(--board);color:var(--paper-text);
  min-height:100vh;font-size:16px;line-height:1.55;
  background-image:
    radial-gradient(ellipse 120% 60% at 50% -10%, oklch(0.72 0.16 265 / .07), transparent 55%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px);
}
::selection{background:var(--amber);color:var(--board)}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{
  outline:2px solid var(--amber);outline-offset:2px;
}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition-duration:.001s!important}}

/* visually hidden, still read by screen readers (live announcements etc.) */
.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;
}
/* keyboard users jump straight to the tool; invisible until focused */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  font-family:var(--mono);font-size:.75rem;color:var(--flap-ink);background:var(--amber);
  padding:10px 16px;border-radius:0 0 6px 0;text-decoration:none;
}
.skip-link:focus{left:0}

.wrap{max-width:1000px;margin:0 auto;padding:0 20px}
@media(min-width:640px){.wrap{padding:0 32px}}

/* ============ HEADER ============ */
header{
  padding:10px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
@media(min-width:640px){header{padding:18px 32px}}
/* the tagline is desktop garnish — on a phone it costs a header row that
   pushes the actual timer further from the fold */
.head-meta{display:none}
@media(min-width:640px){.head-meta{display:block}}
.logo{
  font-family:var(--display);font-weight:800;font-size:1.4rem;letter-spacing:-.01em;text-decoration:none;color:var(--paper-text);
  display:flex;align-items:center;gap:10px;line-height:1;
}
.logo::before{
  content:"";width:9px;height:9px;background:var(--amber);border-radius:50%;flex:none;
  box-shadow:0 0 8px 1px oklch(0.72 0.16 265 / .7);
}
.head-meta{font-family:var(--mono);font-size:.66rem;color:var(--paper-dim);letter-spacing:.02em;line-height:1.6}
.head-meta b{color:var(--amber);font-weight:500}

/* Site-wide nav — a second, thin row below the header so every page (not
   just the footer) links to the legal/trust pages AdSense review looks for:
   How It Works, Compare, About, Privacy, Terms, Contact. Deliberately quiet
   (small, muted, no border until hover) so it reads as utility chrome, not
   a competing content block above the fold. */
.main-nav{
  display:flex;flex-wrap:nowrap;gap:4px 5px;padding:0 20px 10px;border-bottom:1px solid var(--panel-line);
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none; /* one swipeable row on mobile, never two */
}
.main-nav::-webkit-scrollbar{display:none}
@media(min-width:640px){.main-nav{padding:0 32px 10px}}
.main-nav a{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.02em;color:var(--paper-dim);text-decoration:none;
  padding:3px 8px;border-radius:99px;border:1px solid transparent;white-space:nowrap;
}
.main-nav a:hover{color:var(--amber);border-color:var(--panel-line)}
.main-nav a.active{color:var(--paper-text);border-color:var(--panel-line);background:var(--panel)}

/* ============ HERO ============ */
/* Mobile: deliberately shallow — a title strip, not a landing-page hero.
   The tool itself must sit inside the first viewport at 375×667 (the pro-tool
   pattern: vClock/online-stopwatch put the clock first, prose after). */
.hero{padding:14px 0 6px}
@media(min-width:640px){.hero{padding:44px 0 32px}}
.eyebrow{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  margin-bottom:8px;display:inline-flex;align-items:center;gap:8px;
}
@media(min-width:640px){.eyebrow{margin-bottom:14px}}
.eyebrow::before{content:"";width:14px;height:1px;background:var(--amber-deep)}
h1{
  font-family:var(--display);font-weight:800;font-size:clamp(1.55rem,5.5vw,3.6rem);
  line-height:1.05;letter-spacing:-.02em;color:var(--paper-text);max-width:24ch;text-transform:none;
}
@media(min-width:640px){h1{line-height:1.02;max-width:16ch}}
.lede{margin-top:8px;font-size:.86rem;line-height:1.55;color:var(--paper-dim);max-width:52ch}
@media(min-width:640px){.lede{margin-top:14px;font-size:.98rem;line-height:1.6;max-width:44ch}}
/* a recipient opening a shared link came for the timer, not the pitch —
   app.js adds body.viewing when the URL hash carries one */
body.viewing .hero{display:none}
body.viewing .stage-section{padding-top:18px}
.lede b{color:var(--paper-text);font-weight:600}
/* A quiet caption, not a row of chip buttons — states the use cases without
   competing visually with the actual product (the timer, one scroll below).
   The same list is a real, clickable nav in the footer; this is context only. */
.use-line{display:none;margin-top:10px;font-size:.78rem;color:var(--paper-dim);opacity:.8;max-width:42ch;line-height:1.5}
@media(min-width:640px){.use-line{display:block}}
.hero-fact{display:none}
@media(min-width:760px){
  .hero{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
  .hero-fact{
    display:block;text-align:right;font-family:var(--mono);font-size:.7rem;color:var(--paper-dim);
    line-height:1.9;min-width:180px;
  }
  .hero-fact .n{font-family:var(--display);font-weight:800;font-size:2rem;color:var(--amber);display:block;line-height:1}
  .hero-inner{grid-column:1}
}

/* ============ BOARD / STAGE ============ */
.stage-section{padding:12px 0 0}
@media(min-width:640px){.stage-section{padding:36px 0 0}}
.board{
  /* Tile size lives here, not on .tile, so .tiles can reserve its own height
     via var(--th) BEFORE any .tile element exists in the DOM (they're injected
     by assets/app.js). Without this, the board has zero height until JS runs,
     then snaps to full size — a real, measured CLS hit on every page load. */
  --tw:34px;--th:48px;--fs:1.7rem;
  background:linear-gradient(180deg,var(--panel),var(--board-deep));
  border:1px solid var(--panel-line);border-radius:10px;
  padding:24px 8px 22px;text-align:center;position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 24px hsl(260 30% 4% / .30), 0 2px 6px hsl(260 30% 4% / .24);
}
@media(min-width:360px){.board{--tw:38px;--th:54px;--fs:1.9rem}}
@media(min-width:420px){.board{padding:26px 16px 24px;--tw:50px;--th:68px;--fs:2.5rem}}
@media(min-width:640px){.board{padding:40px 32px 34px;--tw:64px;--th:88px;--fs:3.3rem}}
@media(min-width:900px){.board{padding:52px 40px 44px;--tw:78px;--th:110px;--fs:4rem}}
@media(min-width:1200px){.board{--tw:92px;--th:130px;--fs:4.8rem}}
/* corner bolts — purely decorative, sells the "physical chassis" idea */
.board::before,.board::after,.board .bolt-br,.board .bolt-bl{
  content:"";position:absolute;width:7px;height:7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#6b6a63,#111 70%);
}
.board::before{top:9px;left:9px}
.board::after{top:9px;right:9px}
.board .bolt-bl{bottom:9px;left:9px}
.board .bolt-br{bottom:9px;right:9px}

/* style toggle — a viewer's own local preference, never encoded in the shared
   link, since the sync mechanic only needs everyone to agree on the TIME, not
   the skin. Small and out of the way on purpose: this is a corner setting,
   not a feature. */
/* In-flow and centered on narrow screens (an absolute corner position risks
   overlapping a long event label when there's no room beside it); only
   floats into the corner once there's enough width for both to coexist. */
.style-toggle{
  display:flex;justify-content:center;gap:2px;margin:0 0 14px;
  background:var(--board-deep);border:1px solid var(--panel-line);border-radius:99px;padding:2px;
  width:max-content;margin-left:auto;margin-right:auto;
}
.style-toggle button{
  font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--paper-dim);
  border:none;background:none;padding:5px 9px;border-radius:99px;min-height:0;width:auto;
}
.style-toggle button.active{background:var(--panel-line);color:var(--paper-text)}
@media(min-width:640px){
  .style-toggle{position:absolute;top:28px;right:26px;margin:0}
  .style-toggle button{padding:6px 12px;font-size:.64rem}
}

.evt{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--amber);text-transform:uppercase;
  min-height:1.4em;margin-bottom:14px;
}
.tiles{
  display:flex;justify-content:center;align-items:center;gap:3px;flex-wrap:nowrap;
  min-height:var(--th); /* reserves the row's height before JS injects any .tile — see .board */
}
@media(min-width:420px){.tiles{gap:5px}}
@media(min-width:480px){.tiles{gap:7px}}
@media(min-width:900px){.tiles{gap:10px}}
@media(min-width:1200px){.tiles{gap:13px}}
.tile{
  width:var(--tw);height:var(--th);position:relative;perspective:240px;flex:none;
  transition:width .2s,height .2s;
}
.tile .num{
  position:absolute;left:0;right:0;top:0;height:var(--th);line-height:var(--th);
  font-family:var(--mono);font-weight:700;font-size:var(--fs);color:var(--flap-ink);text-align:center;
}
.tile .half{position:absolute;left:0;right:0;height:calc(var(--th) / 2);overflow:hidden;background:var(--flap)}
.tile .half.top{top:0;border-radius:5px 5px 0 0;box-shadow:inset 0 -1px 0 rgba(0,0,0,.28)}
.tile .half.bottom{bottom:0;border-radius:0 0 5px 5px}
.tile .half.bottom .num{top:calc(var(--th) / -2)}
.tile .flap{
  position:absolute;left:0;right:0;top:0;height:calc(var(--th) / 2);overflow:hidden;background:var(--flap);
  border-radius:5px 5px 0 0;transform-origin:bottom;backface-visibility:hidden;z-index:4;
  box-shadow:0 1px 2px rgba(0,0,0,.3);
}
.tile .flap.flipping{animation:flipDown .34s cubic-bezier(.55,0,.75,1) forwards}
@keyframes flipDown{
  0%{transform:rotateX(0);filter:brightness(1)}
  100%{transform:rotateX(-92deg);filter:brightness(.75)}
}
.tile::after{ /* center seam shadow, always on top */
  content:"";position:absolute;left:0;right:0;top:calc(var(--th)/2 - 1px);height:2px;
  background:rgba(0,0,0,.35);z-index:5;pointer-events:none;
}
/* "Minimal" style — same tiles, same flip mechanic, no physical card chrome.
   Toggled via .board.style-minimal by assets/app.js; pure CSS, no separate
   render path needed. */
.board.style-minimal .tile .half,
.board.style-minimal .tile .flap{background:transparent;box-shadow:none}
.board.style-minimal .tile .num{color:var(--paper-text)}
.board.style-minimal .tile::after{display:none}
.board.style-minimal .tile .flap{box-shadow:none}

/* "Light" style — for projecting in a bright room: dark backgrounds wash out
   to gray under ambient light, dark-on-light stays legible. Re-declares the
   board's CSS custom properties in this one scope only (the marketing page
   around it — hero, header, footer — is untouched; nobody projects that).
   Everything inside .board already reads these variables, so this is the
   entire theme — no per-element overrides needed. */
.board.style-light{
  /* Design-system light-theme neutrals + accent (both already WCAG AA on
     their own surfaces — see design-system/tokens/colors.css). */
  --board:oklch(0.985 0.004 260); --board-deep:oklch(1 0 0); --panel:oklch(0.975 0.005 260); --panel-line:oklch(0.88 0.008 260);
  --flap:oklch(1 0 0); --flap-ink:oklch(0.19 0.014 260); --paper-text:oklch(0.19 0.014 260); --paper-dim:oklch(0.50 0.014 260);
  --amber:oklch(0.56 0.19 265); --amber-deep:oklch(0.46 0.20 265); --ok:oklch(0.52 0.15 152);
  background:var(--board);border-color:var(--panel-line);
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset, 0 8px 24px hsl(260 30% 60% / .16), 0 2px 6px hsl(260 30% 60% / .10);
}
/* on the darkened light-theme amber, dark ink no longer clears 4.5:1 — white does */
.board.style-light .btn.primary{color:#fff}
.board.style-light .btn.primary:hover{color:#fff}

/* The separator is the text ":" in the DOM (for screen readers / copy-paste
   of the rendered time), but drawn as two CSS dots rather than the glyph
   itself — a mono font's ":" glyph doesn't sit at the same optical center
   as the tile seam line (var(--th)/2), so the text would float off-seam.
   align-self:stretch fills the tile row's height (var(--th)), giving the
   dots a box to center within that always matches the seam. */
.tile-sep{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(var(--th) * .12);width:5px;align-self:stretch;flex:none;
  font-size:0;color:transparent;
}
.tile-sep::before,.tile-sep::after{
  content:"";flex:none;border-radius:50%;background:var(--amber);opacity:.85;
  width:calc(var(--th) * .09);height:calc(var(--th) * .09);
}
@media(min-width:420px){.tile-sep{width:7px}}
@media(min-width:900px){.tile-sep{width:12px}}
/* days-mode display ("172d 04:31:22") — a single text line instead of flip
   tiles, but it IS the timer on date-countdown pages, so it renders at
   display size, not caption size. */
.tile-day{
  font-family:var(--mono);font-weight:700;font-size:calc(var(--fs) * .72);color:var(--paper-text);
  align-self:center;letter-spacing:.04em;line-height:var(--th);
}

.sub{font-family:var(--mono);font-size:.72rem;color:var(--paper-dim);margin-top:16px}
.sub b{color:var(--amber);font-weight:500}
.bar{height:2px;background:var(--panel-line);margin:20px auto 0;max-width:420px;position:relative;border-radius:2px;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;background:var(--amber);width:0%}

/* Mobile: primary action full-width, secondaries share one compact row —
   a stack of 4+ full-width buttons was most of a screen by itself.
   auto-fit means hidden (display:none) buttons don't leave an empty track
   as the board moves through its ready/running/finished states. */
.stage-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.stage-btns .btn{flex:1 1 88px;width:auto}
.stage-btns .primary{flex-basis:100%}
.stage-btns .btn{padding:12px 6px;font-size:.66rem}
.stage-btns .btn.primary{padding:14px 12px;font-size:.72rem}
@media(min-width:480px){
  .stage-btns{justify-content:center;gap:9px;margin-top:26px}
  .stage-btns .btn,.stage-btns .btn.primary{padding:14px 20px;font-size:.72rem;flex:0 1 auto}
}
.btn{
  font-family:var(--mono);font-weight:500;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;
  padding:14px 20px;min-height:46px;border:1px solid var(--panel-line);background:var(--board-deep);color:var(--paper-text);
  transition:background .15s,color .15s,border-color .15s;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
}
@media(min-width:480px){.btn{width:auto}}
.btn:hover{border-color:var(--amber);color:var(--amber)}
/* fixed dark ink, not board-deep/board — amber stays a mid-tone accent in
   every theme, so dark text reads correctly on it regardless of dark/light. */
.btn.primary{background:var(--amber);color:var(--flap-ink);border-color:var(--amber-deep);font-weight:700}
.btn.primary:hover{background:var(--amber-deep);color:var(--flap-ink);border-color:var(--amber-deep)}
.btn.copied{background:var(--ok);border-color:var(--ok);color:#fff}
.sync-note{
  display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-family:var(--mono);font-size:.7rem;color:var(--paper-dim);
}
/* A hard on/off toggle, not a soft pulse — reads as an indicator lamp bolted
   to the panel (matches the corner bolts / amber signal language) instead of
   a glowing "live" dot, which felt like generic web-app chrome against a
   mechanical board. steps(2,jump-none) snaps between two states instead of
   fading. Squared off (small border-radius, not a circle) for the same reason. */
.sync-note .dot{
  width:7px;height:7px;background:var(--amber);border-radius:2px;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.4);
  animation:hardblink 1.6s steps(2,jump-none) infinite;
}
@keyframes hardblink{0%{opacity:1}100%{opacity:.2}}

/* ============ AD SLOT — placed exactly where vClock places theirs: ============ */
/* directly below the timer stage/controls, above supporting content.        */
.ad-slot{margin:0 auto;max-width:1000px;padding:16px 20px 0}
@media(min-width:640px){.ad-slot{padding:18px 32px 0}}
.ad-frame{
  border:1px dashed var(--panel-line);background:var(--panel);
  min-height:90px;display:flex;align-items:center;justify-content:center;text-align:center;padding:12px;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--paper-dim);
  border-radius:6px;
}
/*
  PRODUCTION: replace .ad-frame contents with your AdSense unit, e.g.:
  <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
       data-ad-slot="XXXXXXXXXX" data-ad-format="horizontal" data-full-width-responsive="true"></ins>
  <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  See docs/monetization.md for the full setup checklist.
*/

/* ============ SETUP ============ */
.setup-section{padding:30px 0 0}
@media(min-width:640px){.setup-section{padding:40px 0 0}}
.panel{padding:22px 18px;background:var(--panel);border:1px solid var(--panel-line);border-radius:10px}
@media(min-width:640px){.panel{padding:28px 30px}}
.panel h2{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;margin-bottom:4px;text-transform:none;color:var(--paper-text)}
.panel .hint{font-size:.8rem;color:var(--paper-dim);margin-bottom:16px;line-height:1.55}
label{display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-dim);margin:14px 0 6px}
input,select{
  width:100%;padding:12px 12px;font-family:var(--sans);font-size:1rem;color:var(--paper-text);
  background:var(--board-deep);border:1px solid var(--panel-line);border-radius:10px;min-height:46px;
  transition:border-color .15s;color-scheme:dark;
}
input:focus,select:focus{outline:none;border-color:var(--amber)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
.dir-toggle{grid-template-columns:repeat(2,1fr)}
.dir-toggle .q.active{background:var(--amber);color:var(--flap-ink);border-color:var(--amber-deep);font-weight:600}
.q{
  font-family:var(--mono);font-size:.72rem;border:1px solid var(--panel-line);background:var(--board-deep);color:var(--paper-dim);
  padding:11px 6px;transition:all .15s;border-radius:10px;min-height:44px;
}
.q:hover{border-color:var(--amber);color:var(--amber)}
.stack2{display:flex;flex-direction:column}
@media(min-width:520px){.stack2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}}
.share-box{
  margin-top:16px;background:var(--board-deep);border:1px solid var(--panel-line);padding:12px 14px;border-radius:10px;
  font-size:.72rem;color:var(--amber);word-break:break-all;font-family:var(--mono);
}

.pro-link{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.03em;color:var(--amber);text-decoration:underline;text-underline-offset:3px;
  background:none;border:none;padding:8px 0;display:inline-block;min-height:44px;white-space:nowrap;
}
.pro-link:hover{color:var(--paper-text)}

/* ============ RECENT TIMERS (localStorage only — see app.js saveRecent) ============ */
.recent-section{padding:20px 0 0}
.recent-item{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:11px 12px;margin-top:8px;background:var(--board-deep);border:1px solid var(--panel-line);
  border-radius:10px;text-decoration:none;transition:border-color .15s;
}
.recent-item:hover{border-color:var(--amber)}
.recent-item .rl{
  font-size:.84rem;color:var(--paper-text);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
.recent-item .rs{font-family:var(--mono);font-size:.64rem;color:var(--paper-dim);white-space:nowrap;flex:none}

/* ============ FAQ (visible copy matching the FAQPage JSON-LD in <head>) ============ */
.faq{padding:36px 0 8px;border-top:1px solid var(--panel-line);margin-top:34px}
.faq h2{font-family:var(--display);font-weight:800;font-size:1.3rem;letter-spacing:-.01em;text-transform:none;margin-bottom:16px;color:var(--paper-text)}
.faq-grid{display:flex;flex-direction:column;gap:18px}
@media(min-width:760px){.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px}}
.faq-item h3{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--paper-text);margin-bottom:6px}
.faq-item dd{font-size:.84rem;color:var(--paper-dim);line-height:1.6;margin:0}

/* per-page "extra" block (OBS setup steps, Zoom comparison, exam Light-style
   callout) — a distinct structural element beyond prose, per the SXO/content
   audit finding that a reworded intro alone reads as thin/templated */
.obs-extra{
  margin:26px 0 0;padding:20px 22px;background:var(--panel);border:1px solid var(--panel-line);border-radius:10px;
}
.obs-extra h3{font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:-.01em;text-transform:none;margin-bottom:10px;color:var(--paper-text)}
.obs-extra p{font-size:.86rem;color:var(--paper-dim);line-height:1.6;margin-bottom:10px}
.obs-extra p:last-child{margin-bottom:0}
.obs-extra ol{margin:0 0 10px 1.2em;font-size:.86rem;color:var(--paper-dim);line-height:1.7}
.obs-extra ol li::marker{color:var(--amber);font-family:var(--mono)}

/* ============ FOOTER (also carries the internal SEO links — see docs/monetization.md) ============ */
footer{border-top:1px solid var(--panel-line);padding:24px 0 28px;margin-top:34px}
.foot-links{
  display:flex;flex-wrap:wrap;gap:7px 10px;padding-bottom:18px;margin-bottom:18px;
  border-bottom:1px solid var(--panel-line);
}
.foot-links a{
  font-family:var(--mono);font-size:.68rem;color:var(--paper-dim);text-decoration:none;
  border:1px solid var(--panel-line);border-radius:99px;padding:5px 10px;white-space:nowrap;
}
.foot-links a:hover{color:var(--amber);border-color:var(--amber-deep)}
.foot-in{display:flex;flex-direction:column;gap:16px;font-size:.76rem;color:var(--paper-dim);line-height:1.8}
@media(min-width:640px){.foot-in{flex-direction:row;justify-content:space-between;gap:24px}}
.foot-in .fb{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--paper-text);margin-bottom:2px;letter-spacing:-.01em}
.foot-in a{text-decoration:underline;color:var(--paper-dim)}
.foot-in a:hover{color:var(--amber)}

.seo-intro{padding:12px 0 0;font-size:.92rem;color:var(--paper-dim);line-height:1.7;max-width:60ch}
.seo-intro b{color:var(--paper-text)}

/* ============ SEASONAL PAGE THEMES (occasion pages only) ============ */
/* Set via <body class="theme-..."> by scripts/build-timer-pages.mjs (a
   `theme:` field on the PAGES row). The discipline: this is the SAME
   physical board photographed under different shop lighting — tinted steel
   chassis and a different signal-lamp color, never clip-art, snow, or
   emoji. Flap tiles stay cream so the digits read identically everywhere,
   and the Light/Minimal board styles keep working unchanged (they override
   variables at .board scope, below these body-scope values). */
/* Same hue-shift formula as the design system's semantic accents: identical
   L/C as the base palette, hue rotated (152=success green, 40=warm gold). */
body.theme-christmas{
  --board:oklch(0.15 0.02 152); --board-deep:oklch(0.11 0.016 152); --panel:oklch(0.24 0.03 152); --panel-line:oklch(0.37 0.03 152);
  --paper-dim:oklch(0.66 0.02 152); --amber:oklch(0.72 0.16 152); --amber-deep:oklch(0.62 0.18 152); --ok:oklch(0.72 0.16 152);
}
body.theme-newyear{
  --board:oklch(0.15 0.02 40); --board-deep:oklch(0.11 0.016 40); --panel:oklch(0.24 0.03 40); --panel-line:oklch(0.37 0.03 40);
  --paper-dim:oklch(0.66 0.02 40); --amber:oklch(0.72 0.16 40); --amber-deep:oklch(0.62 0.18 40);
}

/* fullscreen projector mode */
body.fs .wrap>*:not(.stage-section),body.fs header,body.fs footer,body.fs .ad-slot{display:none}
body.fs .stage-section{padding:0}
body.fs .wrap{max-width:none;padding:0}
body.fs{display:grid;place-items:center;min-height:100vh}
body.fs .board{border:none;border-radius:0;width:100vw;min-height:100vh;display:flex;flex-direction:column;justify-content:center;background:var(--board);--tw:42px;--th:60px;--fs:2.1rem}
@media(min-width:420px){body.fs .board{--tw:56px;--th:80px;--fs:2.9rem}}
@media(min-width:640px){body.fs .board{--tw:70px;--th:100px;--fs:3.6rem}}
@media(min-width:900px){body.fs .board{--tw:120px;--th:170px;--fs:6.2rem}}
body.fs .tiles{gap:4px}
@media(min-width:420px){body.fs .tiles{gap:8px}}
@media(min-width:640px){body.fs .tiles{gap:12px}}

/* overlay mode — for OBS/streaming Browser Sources: ?overlay=1 in the URL.
   Transparent page background (no dark chassis) so only the tile digits sit
   on top of the video capture underneath. See docs/battle-plan-sharemytimer.md
   §2 — this closes the OBS-integration gap without needing a native app. */
body.overlay-mode{background:transparent;background-image:none}
body.overlay-mode .wrap>*:not(.stage-section),
body.overlay-mode header,body.overlay-mode footer,body.overlay-mode .ad-slot{display:none}
body.overlay-mode .stage-section{padding:0}
body.overlay-mode .wrap{max-width:none;padding:0}
body.overlay-mode{display:grid;place-items:center;min-height:100vh}
body.overlay-mode .board{
  border:none;background:transparent;box-shadow:none;padding:16px;width:auto;min-height:0;
  --tw:56px;--th:80px;--fs:2.9rem;
}
@media(min-width:640px){body.overlay-mode .board{--tw:78px;--th:110px;--fs:4rem}}
body.overlay-mode .board .bolt-br,body.overlay-mode .board .bolt-bl,
body.overlay-mode .board::before,body.overlay-mode .board::after,
body.overlay-mode .style-toggle,body.overlay-mode .sync-note,
body.overlay-mode .bar,body.overlay-mode .stage-btns{display:none}
body.overlay-mode .tiles{gap:8px}