/* ===================================================================
   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:#1c1c1a;         /* chassis / page background */
  --board-deep:#131311;
  --panel:#232320;         /* raised panel steel */
  --panel-line:#3a3a35;
  --flap:#f0ead9;          /* split-flap tile face, aged cream */
  --flap-ink:#211f1a;
  --amber:#e8a53d;         /* signal color — think station indicator lamps */
  --amber-deep:#b87a1e;
  --paper-text:#e9e5d8;    /* body copy on dark chassis */
  --paper-dim:#a29c8c;
  --ok:#5c8f6d;
  --display:"Bebas Neue",sans-serif;
  --mono:"Martian Mono",monospace;
  --sans:"Archivo",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%, rgba(232,165,61,.05), 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}}

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

/* ============ HEADER ============ */
header{
  padding:13px 20px;display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
}
@media(min-width:640px){header{padding:18px 32px}}
.logo{
  font-family:var(--display);font-size:1.5rem;letter-spacing:.03em;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 rgba(232,165,61,.7);
}
.head-meta{font-family:var(--mono);font-size:.62rem;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:wrap;gap:4px 5px;padding:0 20px 10px;border-bottom:1px solid var(--panel-line);
}
@media(min-width:640px){.main-nav{padding:0 32px 10px}}
.main-nav a{
  font-family:var(--mono);font-size:.64rem;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 ============ */
.hero{padding:26px 0 24px}
@media(min-width:640px){.hero{padding:56px 0 40px}}
.eyebrow{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--amber);
  margin-bottom:14px;display:inline-flex;align-items:center;gap:8px;
}
.eyebrow::before{content:"";width:14px;height:1px;background:var(--amber-deep)}
h1{
  font-family:var(--display);font-weight:400;font-size:clamp(2.1rem,8vw,3.6rem);
  line-height:1.02;letter-spacing:.005em;color:var(--paper-text);max-width:16ch;text-transform:uppercase;
}
.lede{margin-top:14px;font-size:.98rem;line-height:1.6;color:var(--paper-dim);max-width:44ch}
.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{margin-top:10px;font-size:.78rem;color:var(--paper-dim);opacity:.8;max-width:42ch;line-height:1.5}
.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-size:2rem;color:var(--amber);display:block;line-height:1}
  .hero-inner{grid-column:1}
}

/* ============ BOARD / STAGE ============ */
.stage-section{padding:26px 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 30px 60px -30px rgba(0,0,0,.8);
}
@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:.58rem;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(--display);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{
  --board:#f7f4ec; --board-deep:#ffffff; --panel:#f7f4ec; --panel-line:#ddd6c4;
  --flap:#ffffff; --flap-ink:#1c1a16; --paper-text:#1c1a16; --paper-dim:#6e6858;
  --amber:#c07f2a; --amber-deep:#9c631c; --ok:#2f6b45;
  background:var(--board);border-color:var(--panel-line);
  box-shadow:0 1px 0 rgba(0,0,0,.03) inset, 0 24px 50px -26px rgba(0,0,0,.16);
}

.tile-sep{
  font-family:var(--display);font-size:1.3rem;color:var(--amber);align-self:center;
  width:5px;text-align:center;line-height:1;opacity:.85;flex:none;
}
@media(min-width:420px){.tile-sep{font-size:1.8rem;width:7px}}
@media(min-width:640px){.tile-sep{font-size:2.4rem;width:10px}}
@media(min-width:900px){.tile-sep{font-size:2.9rem;width:12px}}
@media(min-width:1200px){.tile-sep{font-size:3.4rem;width:14px}}
.tile-day{
  font-family:var(--mono);font-size:.8rem;color:var(--paper-dim);align-self:center;margin-right:4px;
}

.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%}

.stage-btns{display:flex;flex-direction:column;gap:9px;margin-top:26px}
@media(min-width:480px){.stage-btns{flex-direction:row;flex-wrap:wrap;justify-content:center}}
.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:5px;
  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:.66rem;color:var(--paper-dim);
}
.sync-note .dot{width:6px;height:6px;background:var(--ok);border-radius:50%;flex:none;box-shadow:0 0 4px 0 rgba(92,143,109,.4);animation:blink 1.8s infinite}
@keyframes blink{50%{opacity:.25}}

/* ============ 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:400;font-size:1.3rem;letter-spacing:.02em;margin-bottom:4px;text-transform:uppercase;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:.6rem;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:5px;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:5px;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:5px;
  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)}

/* ============ 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:400;font-size:1.3rem;letter-spacing:.02em;text-transform:uppercase;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:400;font-size:1.05rem;letter-spacing:.02em;text-transform:uppercase;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-size:1.15rem;color:var(--paper-text);margin-bottom:2px;letter-spacing:.02em}
.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)}

/* 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}