/* ==========================================================================
   ONLINECLOCK.NET — "Station" design system
   Grounded in public-clock / railway-signal design language.
   Light dial by default, signal red reserved for the second hand + stop states,
   signal green for go states. Hairline rules instead of drop shadows.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --dial:       #edeff2;
  --dial-2:     #e4e8ed;
  --panel:      #ffffff;
  --panel-2:    #f6f7f9;
  --panel-3:    #eef1f5;

  --ink:        #11151b;
  --ink-2:      #3a424e;
  --rail:       #667180;
  --rail-2:     #8b95a3;

  --line:       #d7dce3;
  --line-2:     #bcc4ce;
  --line-3:     #11151b;

  --signal:     #d81f16;   /* stop / seconds paddle / alarm */
  --signal-ink: #ffffff;
  --go:         #0a6b4d;   /* start / running */
  --go-ink:     #ffffff;
  --amber:      #a86a00;   /* paused / caution */
  --link:       #12459b;

  --radius:     8px;
  --radius-sm:  5px;
  --radius-lg:  14px;

  --shell:      1180px;
  --gutter:     20px;

  --step--1: clamp(.78rem, .76rem + .12vw, .84rem);
  --step-0:  clamp(.96rem, .93rem + .16vw, 1.05rem);
  --step-1:  clamp(1.12rem, 1.05rem + .34vw, 1.32rem);
  --step-2:  clamp(1.38rem, 1.24rem + .66vw, 1.78rem);
  --step-3:  clamp(1.68rem, 1.42rem + 1.2vw, 2.5rem);
  --step-4:  clamp(2.05rem, 1.6rem + 2.1vw, 3.4rem);

  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  color-scheme: light;
}

[data-theme="dark"]{
  --dial:       #0d1015;
  --dial-2:     #0a0d11;
  --panel:      #151a21;
  --panel-2:    #1b2129;
  --panel-3:    #222932;

  --ink:        #eef1f5;
  --ink-2:      #c2cad4;
  --rail:       #8e99a7;
  --rail-2:     #6f7a88;

  --line:       #262e38;
  --line-2:     #37414e;
  --line-3:     #eef1f5;

  --signal:     #ff4d3d;
  --signal-ink: #14181d;
  --go:         #34c48c;
  --go-ink:     #0c1116;
  --amber:      #e0a33a;
  --link:       #7fb0ff;

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}
body{
  margin:0;
  background:var(--dial);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:var(--step-0);
  line-height:1.62;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,h5{ font-family:var(--f-display); font-weight:700; line-height:1.12; letter-spacing:-.022em; margin:0 0 .5em; color:var(--ink); text-wrap:balance; }
h1{ font-size:var(--step-4); font-weight:800; letter-spacing:-.032em; }
h2{ font-size:var(--step-3); font-weight:750; letter-spacing:-.028em; }
h3{ font-size:var(--step-2); }
h4{ font-size:var(--step-1); }
h5{ font-size:var(--step-0); letter-spacing:0; }
p{ margin:0 0 1em; max-width:74ch; }
ul,ol{ margin:0 0 1em; padding-left:1.15em; }
li{ margin-bottom:.35em; max-width:72ch; }
a{ color:var(--link); text-decoration-thickness:1px; text-underline-offset:.18em; }
a:hover{ text-decoration-thickness:2px; }
hr{ border:0; border-top:1px solid var(--line); margin:2.4rem 0; }
strong,b{ font-weight:650; }
small{ font-size:var(--step--1); }
:focus-visible{ outline:2px solid var(--link); outline-offset:2px; border-radius:3px; }
::selection{ background:var(--signal); color:var(--signal-ink); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--ink); color:var(--dial); padding:.7rem 1rem; font-weight:650;
}
.skip:focus{ left:.75rem; top:.75rem; }

/* ---------- Layout ---------- */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--gutter); }
.shell-narrow{ max-width:820px; }
.stack > * + *{ margin-top:1rem; }
.grid{ display:grid; gap:18px; }
.g-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.g-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
.g-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
@media (max-width:900px){ .g-3,.g-4{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .g-2,.g-3,.g-4{ grid-template-columns:minmax(0,1fr); } }

.section{ padding-block:clamp(2.4rem,5vw,4.2rem); border-top:1px solid var(--line); }
.section:first-of-type{ border-top:0; }
.section-tight{ padding-block:clamp(1.8rem,3.4vw,2.8rem); }

/* Eyebrow: a small caps label that names the kind of content below it */
.eyebrow{
  font-family:var(--f-mono);
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rail);
  margin:0 0 .7rem;
  display:flex; align-items:center; gap:.6rem;
}
.eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); }
.eyebrow-plain::after{ display:none; }

.lede{ font-size:var(--step-1); color:var(--ink-2); line-height:1.5; max-width:68ch; font-weight:450; }
.muted{ color:var(--rail); }
.mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.tabular{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.center{ text-align:center; }
.center p{ margin-inline:auto; }

/* ---------- Header ---------- */
.masthead{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--dial) 88%, transparent);
  backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line);
}
.masthead-in{
  display:flex; align-items:center; gap:14px;
  min-height:62px; padding-block:9px;
}
.brand{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--ink); flex-shrink:0;
}
.brand-mark{
  width:30px; height:30px; flex:0 0 30px;
  border-radius:50%;
  border:2px solid var(--ink);
  position:relative;
  background:var(--panel);
}
.brand-mark::before,
.brand-mark::after{
  content:""; position:absolute; left:50%; top:50%;
  background:var(--ink); border-radius:2px; transform-origin:50% 100%;
}
.brand-mark::before{ width:2px; height:9px; margin-left:-1px; margin-top:-9px; transform:rotate(28deg); }
.brand-mark::after{ width:2px; height:7px; margin-left:-1px; margin-top:-7px; transform:rotate(168deg); background:var(--signal); }
.brand-name{
  font-family:var(--f-display); font-weight:800;
  font-size:.94rem; letter-spacing:.06em; line-height:1;
  white-space:nowrap;
}
.brand-name .b-net{ color:var(--signal); }

.mainnav{ flex:1; min-width:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; }
.mainnav::-webkit-scrollbar{ display:none; }
.mainnav ul{ display:flex; gap:2px; list-style:none; margin:0; padding:0; }
.mainnav li{ margin:0; }
.mainnav a{
  display:block; white-space:nowrap;
  padding:.42rem .66rem;
  font-size:.85rem; font-weight:550; letter-spacing:-.005em;
  color:var(--ink-2); text-decoration:none;
  border-radius:var(--radius-sm);
}
.mainnav a:hover{ background:var(--panel-3); color:var(--ink); }
.mainnav a[aria-current="page"]{
  color:var(--ink); font-weight:650;
  box-shadow:inset 0 -2px 0 var(--signal);
  border-radius:0;
}
.mast-tools{ display:flex; align-items:center; gap:6px; flex-shrink:0; }

/* ---------- Buttons ---------- */
.btn,
button.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
  font-family:var(--f-body); font-size:.88rem; font-weight:600; letter-spacing:-.005em;
  padding:.55rem .95rem; min-height:38px;
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--panel); color:var(--ink);
  cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background .14s ease, border-color .14s ease, color .14s ease, transform .06s ease;
}
.btn:hover{ background:var(--panel-3); border-color:var(--line-3); }
.btn:active{ transform:translateY(1px); }
.btn[disabled],.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-sm{ padding:.34rem .62rem; min-height:31px; font-size:.79rem; }
.btn-lg{ padding:.75rem 1.35rem; min-height:48px; font-size:.98rem; }
.btn-block{ width:100%; }
.btn-go{ background:var(--go); border-color:var(--go); color:var(--go-ink); }
.btn-go:hover{ background:var(--go); border-color:var(--ink); color:var(--go-ink); filter:brightness(1.08); }
.btn-stop{ background:var(--signal); border-color:var(--signal); color:var(--signal-ink); }
.btn-stop:hover{ background:var(--signal); border-color:var(--ink); filter:brightness(1.08); }
.btn-solid{ background:var(--ink); border-color:var(--ink); color:var(--dial); }
.btn-solid:hover{ background:var(--ink-2); border-color:var(--ink-2); color:var(--dial); }
.btn-ghost{ background:transparent; border-color:var(--line); }
.btn-ghost:hover{ background:var(--panel-3); }
.btn-icon{ padding:.5rem .6rem; min-width:38px; }
.btn-row{ display:flex; flex-wrap:wrap; gap:8px; }
.btn-row-center{ justify-content:center; }

/* ---------- Panels ---------- */
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:clamp(1.1rem,2.4vw,1.7rem);
}
.panel-flush{ padding:0; overflow:hidden; }
.panel-2{ background:var(--panel-2); }
.panel-quiet{ background:transparent; }
.panel h3:last-child,.panel p:last-child,.panel ul:last-child,.panel ol:last-child{ margin-bottom:0; }

/* Instrument: the dark bezel frame used for live readouts */
.instrument{
  background:var(--panel);
  border:1px solid var(--line-2);
  border-radius:var(--radius-lg);
  padding:clamp(1.2rem,3vw,2.2rem) clamp(1rem,3vw,2rem);
  position:relative;
  overflow:hidden;
}
.instrument::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--signal) 0 22%, var(--line) 22% 100%);
}
[data-theme="dark"] .instrument{ background:var(--panel-2); }

/* ---------- Readout (big digits) ---------- */
.readout{
  font-family:var(--f-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1,"ss01" 1;
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.95;
  color:var(--ink);
  text-align:center;
  word-break:keep-all;
}
.readout-xl{ font-size:clamp(3rem, 13.5vw, 9.5rem); }
.readout-lg{ font-size:clamp(2.5rem, 9vw, 6rem); }
.readout-md{ font-size:clamp(2rem, 6.5vw, 4rem); }
.readout-sm{ font-size:clamp(1.4rem, 4vw, 2.2rem); }
.readout .sep{ color:var(--rail-2); font-weight:400; }
.readout .ampm{ font-size:.28em; letter-spacing:.1em; font-weight:600; color:var(--rail); vertical-align:.9em; margin-left:.12em; }
.readout-meta{
  display:flex; flex-wrap:wrap; gap:.4rem .9rem; justify-content:center; align-items:center;
  margin-top:1rem; font-size:.86rem; color:var(--rail);
}
.readout-meta .dot{ color:var(--line-2); }

/* ---------- Signature: the seconds rail ---------- */
/* 60 ticks, one per second, with a red paddle that sweeps left to right.
   Echoes the paddle second hand of the Hilfiker station clock. */
.secrail{
  --sec: 0;
  position:relative;
  margin:1.4rem auto 0;
  max-width:640px;
  height:26px;
  user-select:none;
}
.secrail-ticks{
  position:absolute; inset:auto 0 0 0; height:14px;
  display:grid; grid-template-columns:repeat(60,1fr); align-items:end;
}
.secrail-ticks i{
  display:block; width:1px; height:5px; margin-inline:auto;
  background:var(--line-2);
}
.secrail-ticks i:nth-child(5n+1){ height:11px; background:var(--rail-2); }
.secrail-paddle{
  position:absolute; bottom:0; left:0;
  width:10px; height:22px;
  margin-left:-5px;
  transform:translateX(calc(var(--sec) * (100% / 1) * 0));
  transition:left .18s cubic-bezier(.2,.9,.25,1);
  pointer-events:none;
}
.secrail-paddle::before{
  content:""; position:absolute; left:50%; bottom:0; width:2px; height:22px;
  margin-left:-1px; background:var(--signal);
}
.secrail-paddle::after{
  content:""; position:absolute; left:0; top:0; width:10px; height:10px;
  border-radius:50%; background:var(--signal);
}
.secrail-label{
  position:absolute; top:-2px; right:0;
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em;
  color:var(--rail-2); text-transform:uppercase;
}
@media (max-width:560px){ .secrail{ height:20px; } .secrail-paddle,.secrail-paddle::before{ height:17px; } }

/* ---------- Form controls ---------- */
.field{
  display:block; width:100%;
  font-family:var(--f-body); font-size:.95rem; color:var(--ink);
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--radius-sm);
  padding:.58rem .7rem; min-height:42px;
}
.field:focus{ outline:2px solid var(--link); outline-offset:1px; border-color:var(--link); }
.field-mono{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.field-big{ font-size:1.5rem; text-align:center; padding:.5rem; font-weight:600; }
textarea.field{ min-height:140px; resize:vertical; line-height:1.55; }
select.field{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--rail) 50%),linear-gradient(135deg,var(--rail) 50%,transparent 50%); background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:2.2rem; }
.label{
  display:block; font-family:var(--f-mono); font-size:.68rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--rail); margin-bottom:.34rem;
}
.field-group{ margin-bottom:1rem; }
.hint{ font-size:.8rem; color:var(--rail); margin-top:.35rem; }

/* ---------- Chips / tags / presets ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-family:var(--f-mono); font-size:.72rem; font-weight:500; letter-spacing:.06em;
  padding:.22rem .55rem; border:1px solid var(--line-2); border-radius:999px;
  color:var(--rail); background:var(--panel-2); white-space:nowrap;
}
.chip-live{ color:var(--signal); border-color:currentColor; }
.chip-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.kbd{
  font-family:var(--f-mono); font-size:.76rem; font-weight:600;
  padding:.1rem .38rem; border:1px solid var(--line-2); border-bottom-width:2px;
  border-radius:4px; background:var(--panel-2); color:var(--ink-2);
}
.presets{ display:flex; flex-wrap:wrap; gap:6px; }
.preset{
  font-family:var(--f-mono); font-size:.8rem; font-weight:500;
  padding:.38rem .7rem; border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--panel); color:var(--ink); cursor:pointer;
}
.preset:hover{ border-color:var(--line-3); background:var(--panel-3); }
.preset[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--dial); }

/* ---------- Status strip ---------- */
.status{
  display:flex; flex-wrap:wrap; gap:.5rem 1.4rem; align-items:center;
  padding:.7rem 1rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--panel-2); font-size:.85rem;
}
.status b{ font-family:var(--f-mono); font-weight:600; color:var(--ink); }
.status-go{ border-left:3px solid var(--go); }
.status-stop{ border-left:3px solid var(--signal); }
.status-idle{ border-left:3px solid var(--line-2); }

/* ---------- Progress ---------- */
.progress{
  height:8px; border-radius:999px; overflow:hidden;
  background:var(--panel-3); border:1px solid var(--line);
}
.progress > i{ display:block; height:100%; width:0; background:var(--go); transition:width .28s linear; }
.progress-stop > i{ background:var(--signal); }

/* ---------- Data list / table ---------- */
.dtable{ width:100%; border-collapse:collapse; font-size:.9rem; }
.dtable th,.dtable td{ text-align:left; padding:.55rem .7rem; border-bottom:1px solid var(--line); }
.dtable thead th{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rail); font-weight:600; border-bottom:1px solid var(--line-2);
}
.dtable tbody tr:hover{ background:var(--panel-2); }
.dtable td.num,.dtable th.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; }
.table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--panel); }

.laps{ list-style:none; margin:0; padding:0; max-height:340px; overflow-y:auto; }
.laps li{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.5rem .2rem; border-bottom:1px solid var(--line);
  font-family:var(--f-mono); font-size:.88rem; margin:0;
}
.laps li span:first-child{ color:var(--rail); font-size:.76rem; letter-spacing:.1em; }
.laps-empty{ color:var(--rail); font-size:.85rem; padding:.6rem .2rem; }

/* ---------- Cards ---------- */
.card{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.1rem 1.15rem; text-decoration:none; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
a.card:hover{ border-color:var(--line-3); transform:translateY(-2px); }
.card h3,.card h4{ margin:0; font-size:var(--step-1); }
.card p{ margin:0; font-size:.9rem; color:var(--ink-2); }
.card-kicker{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rail);
}
.card-go{ margin-top:auto; padding-top:.4rem; font-size:.84rem; font-weight:650; color:var(--link); }

/* ---------- FAQ ---------- */
.faq{ border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{
  cursor:pointer; list-style:none;
  padding:1rem .2rem 1rem 2rem;
  font-family:var(--f-display); font-weight:650; font-size:var(--step-1);
  letter-spacing:-.018em; line-height:1.3; position:relative; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{
  content:"+"; position:absolute; left:.15rem; top:1rem;
  font-family:var(--f-mono); font-weight:500; font-size:1.05rem; color:var(--signal);
  transition:transform .18s ease;
}
.faq details[open] summary::before{ content:"\2212"; }
.faq summary:hover{ color:var(--link); }
.faq-a{ padding:0 .2rem 1.2rem 2rem; color:var(--ink-2); }
.faq-a p:last-child,.faq-a ul:last-child{ margin-bottom:0; }
.faq-a ul{ padding-left:1.1em; }

/* ---------- Note / callout ---------- */
.note{
  border-left:3px solid var(--line-2);
  padding:.15rem 0 .15rem 1rem;
  color:var(--ink-2); font-size:.92rem;
}
.note-signal{ border-left-color:var(--signal); }
.note-go{ border-left-color:var(--go); }
.note strong{ color:var(--ink); }
.note p:last-child{ margin-bottom:0; }

/* ---------- Definition rows ---------- */
.deflist{ margin:0; }
.deflist > div{ display:grid; grid-template-columns:minmax(140px,220px) 1fr; gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line); }
.deflist dt{ font-weight:650; color:var(--ink); }
.deflist dd{ margin:0; color:var(--ink-2); font-size:.93rem; }
@media (max-width:640px){ .deflist > div{ grid-template-columns:1fr; gap:.2rem; } }

/* ---------- Hero ---------- */
.hero{ padding-block:clamp(1.8rem,4vw,3rem) clamp(1.4rem,3vw,2.2rem); }
.hero h1{ margin-bottom:.5rem; }
.hero-sub{ font-size:var(--step-1); color:var(--ink-2); max-width:62ch; margin-bottom:1.2rem; font-weight:450; }
.hero-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.3rem; }

/* ---------- Modal ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:120;
  background:rgba(8,11,15,.62);
  display:none; align-items:center; justify-content:center; padding:16px;
}
.modal-overlay[data-open="true"]{ display:flex; }
.modal{
  width:min(680px,100%); max-height:88vh; overflow:auto;
  background:var(--panel); color:var(--ink);
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1rem 1.2rem; border-bottom:1px solid var(--line);
}
.modal-head h3{ margin:0; font-size:var(--step-1); }
.modal-body{ padding:1.2rem; }

/* ---------- Footer ---------- */
.siteftr{
  border-top:1px solid var(--line);
  background:var(--panel-2);
  margin-top:clamp(3rem,6vw,5rem);
  padding-block:clamp(2.2rem,4vw,3.2rem) 1.4rem;
}
.ftr-grid{ display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:26px; }
@media (max-width:860px){ .ftr-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .ftr-grid{ grid-template-columns:1fr; } }
.ftr-grid h5{
  font-family:var(--f-mono); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--rail); margin-bottom:.8rem; font-weight:600;
}
.ftr-grid ul{ list-style:none; margin:0; padding:0; }
.ftr-grid li{ margin-bottom:.38rem; }
.ftr-grid a{ color:var(--ink-2); text-decoration:none; font-size:.88rem; }
.ftr-grid a:hover{ color:var(--ink); text-decoration:underline; }
.ftr-about p{ font-size:.88rem; color:var(--ink-2); max-width:38ch; }
.ftr-base{
  display:flex; flex-wrap:wrap; gap:.6rem 1.4rem; justify-content:space-between; align-items:center;
  margin-top:2.2rem; padding-top:1.1rem; border-top:1px solid var(--line);
  font-size:.82rem; color:var(--rail);
}
.ftr-base a{ color:var(--rail); }

/* ---------- Breadcrumb ---------- */
.crumbs{
  font-family:var(--f-mono); font-size:.72rem; letter-spacing:.08em;
  color:var(--rail); padding-top:1rem; text-transform:uppercase;
}
.crumbs a{ color:var(--rail); text-decoration:none; }
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }
.crumbs span{ margin-inline:.4rem; color:var(--line-2); }

/* ---------- On-page nav (jump links) ---------- */
.jump{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:.8rem 0; border-block:1px solid var(--line); margin-bottom:1.6rem;
}
.jump a{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.05em;
  padding:.3rem .6rem; border:1px solid var(--line); border-radius:var(--radius-sm);
  color:var(--ink-2); text-decoration:none; background:var(--panel);
}
.jump a:hover{ border-color:var(--line-3); color:var(--ink); }

/* ---------- Fullscreen mode ---------- */
:fullscreen .fs-hide,
:-webkit-full-screen .fs-hide{ display:none !important; }
.fs-stage:fullscreen{
  background:var(--dial); display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding:2rem;
}
.fs-stage:fullscreen .readout-xl{ font-size:min(22vw,34vh); }

/* ---------- Utility / compat layer ----------
   A few legacy class names are toggled by page scripts; keep them working. */
.hidden{ display:none !important; }
.flex{ display:flex; }
.items-center{ align-items:center; }
.justify-between{ justify-content:space-between; }
.text-sm{ font-size:.88rem; }
.border{ border:1px solid var(--line); }
.border-b{ border-bottom:1px solid var(--line); }
.rounded-2xl{ border-radius:var(--radius); }
.rounded-3xl{ border-radius:var(--radius-lg); }
.p-5{ padding:1.15rem; }
.px-3{ padding-inline:.75rem; }
.py-2{ padding-block:.5rem; }
.transition{ transition:all .15s ease; }
.mt-0{ margin-top:0; } .mt-1{ margin-top:.4rem; } .mt-2{ margin-top:.75rem; }
.mt-3{ margin-top:1.1rem; } .mt-4{ margin-top:1.5rem; } .mt-5{ margin-top:2rem; }
.mb-0{ margin-bottom:0; } .mb-2{ margin-bottom:.75rem; } .mb-3{ margin-bottom:1.1rem; }
.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;
}
.tab-active{ background:var(--ink); border-color:var(--ink); color:var(--dial); }

/* ---------- Ambient background stages (for /bg/ theme pages) ---------- */
.stage{
  position:relative; width:100%;
  min-height:min(62vh,560px);
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  overflow:hidden; display:grid; place-items:center;
  background:#0b0f16;
  isolation:isolate;
}
.stage:fullscreen{ border-radius:0; border:0; min-height:100vh; }
.stage-clock{
  position:relative; z-index:5; text-align:center; color:#fff;
  padding:1.4rem 2rem; border-radius:var(--radius-lg);
  background:rgba(6,9,14,.42); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
}
.stage-clock .readout{ color:#fff; }
.stage-clock .stage-date{ color:rgba(255,255,255,.76); font-size:.92rem; margin-top:.6rem; }
.stage-tools{
  display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  margin-top:1rem;
}

/* ---------- Print ---------- */
@media print{
  .masthead,.siteftr,.btn-row,.jump,.skip,.adslot{ display:none !important; }
  body{ background:#fff; color:#000; }
  .panel,.instrument{ border:1px solid #999; }
}

/* ---------- Ad slot ---------- */
.adslot{ margin-block:2rem; min-height:0; text-align:center; }