/* onlineclock.app — shared styles */
@font-face{font-family:"DSEG7";src:url(/assets/fonts/DSEG7Classic-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:block}

:root{
  --bg:#F5F7FA;
  --surface:#FFFFFF;
  --text:#18212C;
  --muted:#556170;
  --line:#DCE2EA;
  --accent:#2457C5;
  --accent-ink:#FFFFFF;
  --danger:#B42318;
  --radius-s:6px;
  --radius-m:10px;
  --measure:68ch;
  --nav-h:56px;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --digits:"DSEG7",ui-monospace,"Cascadia Mono",Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#10151C;--surface:#171E27;--text:#E6EBF1;--muted:#9AA6B4;--line:#2A3441;--accent:#7FA6FF;--accent-ink:#0C1420;--danger:#FF8A80;color-scheme:dark}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--font)}
img,svg{max-width:100%}
a{color:var(--accent);text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;z-index:99}
.skip:focus{left:8px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:40;height:var(--nav-h);display:flex;align-items:center;gap:16px;padding:0 16px;background:var(--surface);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px;color:var(--text);text-decoration:none;white-space:nowrap}
.brand svg{width:26px;height:26px}

.nav-links{display:flex;gap:2px;margin-left:auto;list-style:none;padding:0;margin-top:0;margin-bottom:0}
.nav-links a{display:block;padding:8px 10px;border-radius:var(--radius-s);color:var(--text);text-decoration:none;font-size:15px}
.nav-links a:hover{background:var(--bg)}
.nav-links a[aria-current=page]{color:var(--accent);font-weight:600}
.nav-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:var(--radius-s);color:var(--text);padding:6px 10px;font:inherit;font-size:15px;cursor:pointer}
@media (max-width:900px){
  .nav-toggle{display:block}
  .nav-links{display:none;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;background:var(--surface);border-bottom:1px solid var(--line);padding:8px 12px 12px}
  .nav.open .nav-links{display:flex}
  .nav-links a{padding:10px 8px}
}

/* ---------- clock stage ---------- */
.stage{
  --stage-bg:#0C1A22;--digit:#7FF0D2;--ghost:rgba(127,240,210,.07);--glow:0 0 .06em rgba(127,240,210,.55),0 0 .3em rgba(127,240,210,.18);--stage-muted:#5F8C88;--stage-font:var(--digits);--stage-line:rgba(127,240,210,.18);
  position:relative;background:var(--stage-bg);color:var(--digit);
  min-height:calc(100svh - var(--nav-h));display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px 16px 88px;overflow:hidden;
}
.stage.compact{min-height:min(70svh,640px)}
.stage[data-theme=red]{--stage-bg:#140A0A;--digit:#FF4B3E;--ghost:rgba(255,75,62,.08);--glow:0 0 .06em rgba(255,75,62,.6),0 0 .3em rgba(255,75,62,.2);--stage-muted:#9C5A54;--stage-line:rgba(255,75,62,.22)}
.stage[data-theme=amber]{--stage-bg:#130F07;--digit:#FFB23F;--ghost:rgba(255,178,63,.08);--glow:0 0 .06em rgba(255,178,63,.55),0 0 .3em rgba(255,178,63,.18);--stage-muted:#9C7B4C;--stage-line:rgba(255,178,63,.2)}
.stage[data-theme=lcd]{--stage-bg:#B9C4A6;--digit:#1F2A1A;--ghost:rgba(31,42,26,.09);--glow:none;--stage-muted:#4C5A44;--stage-line:rgba(31,42,26,.18)}
.stage[data-theme=white]{--stage-bg:#000000;--digit:#FFFFFF;--ghost:transparent;--glow:none;--stage-muted:#8A8F96;--stage-font:var(--font);--stage-line:rgba(255,255,255,.18)}
.stage[data-theme=paper]{--stage-bg:#FFFFFF;--digit:#000000;--ghost:transparent;--glow:none;--stage-muted:#5B6370;--stage-font:var(--font);--stage-line:rgba(0,0,0,.14)}

.readout{position:relative;font-family:var(--stage-font);font-weight:700;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:.02em;text-shadow:var(--glow);font-size:16vw;user-select:none}
.stage[data-theme=white] .readout,.stage[data-theme=paper] .readout{letter-spacing:-.02em;font-weight:600}
.readout .ghost{position:absolute;inset:0;color:var(--ghost);text-shadow:none;pointer-events:none}
.readout .live{position:relative}
.readout .ampm{font-family:var(--font);font-size:.22em;font-weight:700;letter-spacing:.04em;margin-left:.18em;vertical-align:top;position:relative;top:.08em;text-shadow:none}
.subline{font-family:var(--font);color:var(--stage-muted);font-size:clamp(16px,2.4vw,30px);margin-top:.9em;text-align:center}
.subline[hidden]{display:none}

.toolbar{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;flex-wrap:wrap;gap:6px;padding:0 12px;transition:opacity .4s}
.stage.idle .toolbar{opacity:0}
.tbtn{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--stage-muted);border:1px solid var(--stage-line);border-radius:999px;padding:7px 13px;font:500 14px/1 var(--font);cursor:pointer}
.tbtn:hover{color:var(--digit);border-color:var(--digit)}
.tbtn[aria-pressed=true]{color:var(--digit);border-color:var(--digit)}
.tbtn svg{width:16px;height:16px;flex:none}
.stage:fullscreen{min-height:100vh}
.stage:fullscreen .toolbar{bottom:24px}

/* big controls inside stage (stopwatch / timer) */
.controls{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:28px}
.cbtn{min-width:120px;padding:14px 22px;border-radius:999px;border:2px solid var(--digit);background:transparent;color:var(--digit);font:600 18px/1 var(--font);cursor:pointer}
.cbtn.primary{background:var(--digit);color:var(--stage-bg)}
.cbtn:disabled{opacity:.35;cursor:default}
.stage-input{display:flex;gap:8px;align-items:flex-end;justify-content:center;margin-top:22px;font-family:var(--font)}
.stage-input label{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--stage-muted);font-size:13px}
.stage-input input,.stage-input select{width:84px;padding:10px 6px;text-align:center;border-radius:var(--radius-s);border:1px solid var(--stage-line);background:transparent;color:var(--digit);font:600 22px/1 var(--font)}
.stage-input input[type=time]{width:auto;padding:10px 12px}
.stage-input select{width:auto;font-size:16px;padding:12px 8px}
.stage-input select option{color:#000}
.presets{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:16px;max-width:720px}
.presets button,.presets a{background:transparent;border:1px solid var(--stage-line);color:var(--stage-muted);border-radius:999px;padding:6px 12px;font:500 14px/1 var(--font);cursor:pointer;text-decoration:none}
.presets button:hover,.presets a:hover{color:var(--digit);border-color:var(--digit)}
.laps{font-family:var(--font);color:var(--stage-muted);margin-top:22px;max-height:30vh;overflow:auto;min-width:min(420px,90vw);font-variant-numeric:tabular-nums}
.laps table{width:100%;border-collapse:collapse}
.laps td,.laps th{padding:6px 10px;border-bottom:1px solid var(--stage-line);text-align:right}
.laps th{font-weight:500;font-size:13px}
.laps td:first-child,.laps th:first-child{text-align:left}
.laps .best{color:var(--digit)}
.ringing .readout{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.ringing .readout{animation:none}}
.progress{width:min(720px,90%);height:4px;background:var(--stage-line);border-radius:2px;margin-top:22px;overflow:hidden}
.progress i{display:block;height:100%;width:0;background:var(--digit)}

/* flip clock */
.flip{display:flex;gap:2vw;align-items:center;font-family:var(--font);font-weight:700;font-variant-numeric:tabular-nums}
.flip .group{display:flex;gap:.8vw}
.flip .card{position:relative;width:min(13vw,22vh);height:min(19vw,32vh);background:#1E2329;color:#F2F2F2;border-radius:min(1.2vw,14px);font-size:min(15vw,26vh);line-height:min(19vw,32vh);text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.4) inset;perspective:600px}
.flip .card::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.55);z-index:3}
.flip .half{position:absolute;left:0;right:0;height:50%;overflow:hidden;background:#1E2329;backface-visibility:hidden}
.flip .top{top:0;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.flip .bottom{bottom:0;border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}
.flip .bottom span{display:block;transform:translateY(-50%)}
.flip .top span{display:block}
.flip .flipper{top:0;transform-origin:bottom;z-index:2;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.flip .flipper.go{animation:fliptop .3s ease-in forwards}
@keyframes fliptop{to{transform:rotateX(-90deg)}}
@media (prefers-reduced-motion:reduce){.flip .flipper.go{animation:none;display:none}}
.flip .sep{font-size:min(10vw,18vh);color:var(--stage-muted);line-height:1}
.flip .sec{opacity:.9}
.stage[data-theme=paper] .flip .card,.stage[data-theme=paper] .flip .half,.stage[data-theme=lcd] .flip .card,.stage[data-theme=lcd] .flip .half{background:#EDEFF2;color:#111}

/* ---------- page content ---------- */
.content{max-width:calc(var(--measure) + 32px);margin:0 auto;padding:48px 16px 24px}
.content.wide{max-width:1040px}
.content h1{font-size:clamp(28px,4vw,40px);line-height:1.15;letter-spacing:-.01em;margin:0 0 .5em}
.content h2{font-size:24px;line-height:1.25;margin:2em 0 .5em}
.content h3{font-size:19px;margin:1.6em 0 .35em}
.content p,.content li{max-width:var(--measure)}
.content .lede{font-size:19px;color:var(--muted)}
.content table{border-collapse:collapse;width:100%;margin:1em 0;font-variant-numeric:tabular-nums}
.content th,.content td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left}
.content th{font-size:14px;color:var(--muted);font-weight:600}
.content code,.content kbd{font-family:ui-monospace,Consolas,monospace;font-size:.9em;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.answer{font-size:clamp(22px,3vw,30px);font-weight:700;margin:.2em 0 .6em}
.answer b{color:var(--accent)}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:18px}
.faq details p{margin:.6em 0 0}
.crumbs{font-size:14px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}

/* panels (tools that live on the light page) */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);padding:20px}
.panel + .panel{margin-top:16px}
.field{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.field input,.field select{font:500 17px/1.2 var(--font);color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius-s);padding:10px 12px;min-width:0}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));align-items:end}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 16px/1 var(--font);padding:12px 18px;border-radius:var(--radius-s);border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--accent)}
.result{font-size:clamp(24px,3.4vw,34px);font-weight:700;margin:16px 0 4px;font-variant-numeric:tabular-nums}
.result-note{color:var(--muted);margin:0}
.big-result{font-size:clamp(40px,7vw,72px);font-weight:700;letter-spacing:-.02em;line-height:1.05;font-variant-numeric:tabular-nums;margin:.2em 0}

/* world clock list */
.zones{list-style:none;padding:0;margin:16px 0;border-top:1px solid var(--line)}
.zones li{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:baseline;padding:14px 4px;border-bottom:1px solid var(--line);max-width:none}
.zones .city{font-weight:600}
.zones .meta{display:block;font-size:14px;color:var(--muted);font-weight:400}
.zones .t{font-size:clamp(24px,3vw,32px);font-weight:700;font-variant-numeric:tabular-nums}
.zones button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:20px;padding:4px 8px}
.zones .you{color:var(--accent);font-weight:500;font-size:14px;margin-left:6px}

/* timecard */
.timecard{width:100%;border-collapse:collapse}
.timecard th,.timecard td{padding:6px 4px;border-bottom:1px solid var(--line)}
.timecard input{width:100%;font:500 16px var(--font);padding:8px;border:1px solid var(--line);border-radius:var(--radius-s);background:var(--bg);color:var(--text)}
.timecard td.out{font-weight:700;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
@media (max-width:640px){.timecard th:nth-child(4),.timecard td:nth-child(4){display:none}}

/* tool index */
.tools{list-style:none;padding:0;margin:20px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.tools li{border-right:1px solid var(--line);border-bottom:1px solid var(--line);max-width:none}
.tools a{display:block;padding:16px 18px;color:var(--text);text-decoration:none;height:100%}
.tools a:hover{background:var(--surface)}
.tools strong{display:block;font-size:17px;color:var(--accent)}
.tools span{display:block;font-size:14px;color:var(--muted);line-height:1.45;margin-top:2px}
.linkgrid{display:flex;flex-wrap:wrap;gap:6px;padding:0;list-style:none}
.linkgrid li{max-width:none}
.linkgrid a{display:inline-block;padding:5px 10px;border:1px solid var(--line);border-radius:var(--radius-s);text-decoration:none;font-size:15px;font-variant-numeric:tabular-nums;background:var(--surface)}
.linkgrid a[aria-current=page]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

.ad-slot{max-width:970px;margin:24px auto;min-height:0}
.ad-slot:empty{display:none}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:var(--radius-s);font-size:15px;z-index:100;opacity:0;transition:opacity .25s;pointer-events:none}
.toast.show{opacity:1}

/* footer */
.footer{border-top:1px solid var(--line);margin-top:48px;padding:32px 16px;color:var(--muted);font-size:15px}
.footer-inner{max-width:1040px;margin:0 auto;display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.footer h2{font-size:14px;color:var(--text);margin:0 0 8px}
.footer ul{list-style:none;padding:0;margin:0}
.footer li{margin:4px 0}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--text);text-decoration:underline}
.footer .legal{max-width:1040px;margin:24px auto 0;font-size:14px}

.stage:fullscreen ~ *{display:none}
@media print{.nav,.toolbar,.footer,.ad-slot{display:none}}

/* world clock planner */
.zones li{grid-template-columns:1fr auto 64px}
.zones li > span:last-child{display:flex;justify-content:flex-end}
.planner-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);margin:12px 0}
.planner{border-collapse:separate;border-spacing:0;font-size:13px;font-variant-numeric:tabular-nums;width:max-content;min-width:100%}
.planner th,.planner td{padding:0;text-align:center;border-bottom:1px solid var(--line)}
.planner tbody th{position:sticky;left:0;background:var(--surface);text-align:left;padding:8px 12px;font-weight:600;font-size:14px;white-space:nowrap;z-index:1}
.planner thead th{padding:0}
.planner thead th:first-child{position:sticky;left:0;background:var(--surface);z-index:2;padding:8px 12px;text-align:left;color:var(--muted);font-weight:500}
.planner thead button{background:none;border:0;color:var(--muted);font:600 12px var(--font);padding:8px 0;width:48px;cursor:pointer}
.planner td{width:48px;min-width:48px;height:36px;color:var(--text);font-size:12px;letter-spacing:-.02em}
.planner td.work{background:color-mix(in srgb,var(--accent) 18%,transparent)}
.planner td.edge{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.planner td.night{color:var(--muted)}
.planner td.midnight{box-shadow:inset 2px 0 0 var(--muted)}
.planner .now{outline:2px solid var(--accent);outline-offset:-2px}
.planner .pick{background:var(--accent)!important;color:var(--accent-ink)!important}
.planner .pick button{color:var(--accent-ink)}
.planner sup{font-size:9px;margin-left:1px}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:0}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:6px}
.subline.sync{font-size:clamp(13px,1.3vw,16px);margin-top:.6em;opacity:.85}

/* day / night map */
.dn-wrap{background:#0E2233;border-radius:var(--radius-m);overflow:hidden;margin:16px 0}
#dn-map{display:block;width:100%;height:auto}
.dn-ocean{fill:#16324A}
.dn-land{fill:#3E6B5A;stroke:#0E2233;stroke-width:.15}

.dn-meridian{stroke:rgba(255,255,255,.07);stroke-width:.25}
.dn-sun{fill:#FFD54F;stroke:rgba(255,213,79,.35);stroke-width:3}
.dn-city circle{fill:#fff}
.dn-city text{font:600 3.3px system-ui,sans-serif;fill:#fff;paint-order:stroke;stroke:rgba(0,0,0,.65);stroke-width:.6px}
@media (max-width:640px){.dn-city text{display:none}}

.zones{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));column-gap:24px;border-top:0}
.zones li{border-bottom:1px solid var(--line);padding:12px 4px}
.zones .t{font-size:22px}
.zones li{grid-template-columns:1fr auto 52px}
.brand .dom{font-weight:400;color:var(--muted)}
.stage-input{flex-wrap:wrap}
@media (max-width:480px){.stage-input input{width:64px;font-size:20px}.stage-input select{font-size:15px}.cbtn{min-width:104px;padding:12px 18px}}

/* articles */
.era{color:var(--muted);font-size:15px;margin:0 0 6px}
.answer-box{font-size:19px;line-height:1.55;border-left:4px solid var(--accent);background:var(--surface);padding:16px 18px;border-radius:0 var(--radius-s) var(--radius-s) 0;margin:0 0 20px;max-width:var(--measure)}
.answer-box b{color:var(--text)}
.content table.facts{max-width:var(--measure)}
.content table.facts th{width:42%;font-size:15px;color:var(--muted);font-weight:500}
.sources li{font-size:15px}
.updated{color:var(--muted);font-size:14px;margin-top:24px}
.pager{display:flex;justify-content:space-between;gap:12px;margin:24px 0;padding-top:16px;border-top:1px solid var(--line)}
.pager a{font-weight:600;text-decoration:none}
.idioms dt{font-weight:700;margin-top:14px}
.idioms dd{margin:2px 0 0;max-width:var(--measure)}
.subtitle{font-size:clamp(18px,2.2vw,22px);color:var(--muted);margin:-.3em 0 1em;font-style:italic}
.usmap{margin:16px 0}
.usmap svg{width:100%;height:auto;display:block}
.usmap path{stroke:var(--bg);stroke-width:1;transition:opacity .15s}
.usmap a:hover path,.usmap a:focus path{opacity:.75}
.legend i.split{background:repeating-linear-gradient(45deg,#4C78A8 0 4px,#59A14F 4px 10px)}
.wt-grid{list-style:none;padding:0;margin:12px 0 8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.wt-card{max-width:none}
.wt-card a{display:block;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius-m);background:var(--surface);text-decoration:none;color:var(--text)}
.wt-card a:hover{border-color:var(--accent)}
.wt-city{font-weight:600;display:block}
.wt-country{font-size:13px;color:var(--muted)}
.wt-time{display:block;font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:4px}
.wt-day{font-size:13px;color:var(--muted)}
.wt-card.night a{background:#14202C;color:#E6EBF1;border-color:#22313F}
.wt-card.night .wt-country,.wt-card.night .wt-day{color:#9AA6B4}
.wt-card.twilight a{background:color-mix(in srgb,#14202C 45%,var(--surface))}
.wt-card a{height:100%}
.wt-country{display:block}
.cs-results{list-style:none;margin:14px 0 0;padding:0}
.cs-results li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 4px;border-top:1px solid var(--line)}
.cs-results a,.cs-results li>span{font-weight:600;color:var(--text)}
.cs-c{display:block;font-weight:400;font-size:13px;color:var(--muted)}
.cs-t{font-variant-numeric:tabular-nums;font-size:18px;text-align:right}
.cs-d{grid-column:2;font-size:13px;color:var(--muted);text-align:right}
table.facts th{text-align:left;width:38%;font-weight:600}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:720px}
.tzm-wrap{position:relative;border:1px solid var(--line);border-radius:var(--radius-m);overflow:hidden;background:#dfe7ee}
.tzm-wrap canvas{display:block;width:100%;height:auto;image-rendering:pixelated;cursor:crosshair}
.tzm-wrap svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tzm-wrap .tzm-land{fill:none;stroke:rgba(20,30,40,.55);stroke-width:.25}
.tzm-sw{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:8px;vertical-align:-2px;border:1px solid rgba(0,0,0,.15)}
#tzm-legend tr{cursor:pointer}#tzm-legend tr.on td{background:var(--surface)}#tzm-legend tr.on td:first-child{font-weight:700}
.an-stage{padding-top:24px}
.an-stage canvas{width:min(78vmin,560px);aspect-ratio:1;height:auto;display:block}
.an-stage .subline{margin-top:10px}
.an-digital{font:600 22px/1.2 var(--font);font-variant-numeric:tabular-nums;color:var(--stage-muted);margin-top:6px}
.an-stage:fullscreen canvas{width:min(88vmin,1000px)}
.ms{font:inherit;opacity:.65;font-size:.42em;vertical-align:baseline}
.exact-ms{font:700 clamp(28px,6vw,60px)/1 "DSEG7",ui-monospace,monospace;color:var(--digit);text-shadow:var(--glow);text-align:center;margin-top:18px;font-variant-numeric:tabular-nums}
.sync-table td:last-child{font-variant-numeric:tabular-nums}
/* interval timer */
.stage[data-phase=work]{--digit:#7FF0A0}.stage[data-phase=rest]{--digit:#FFB23F}.stage[data-phase=prep]{--digit:#8FB8FF}
.iv-phase{font:700 clamp(22px,4vw,40px)/1.1 var(--font);color:var(--digit);text-transform:uppercase;letter-spacing:.08em}
/* chess clock */
.ch-wrap{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:10px;background:#0b1116;min-height:min(72svh,640px)}
.ch-side{border:0;border-radius:18px;background:#1c2630;color:#cfd8e0;display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font:inherit;padding:20px;touch-action:manipulation}
.ch-side.on{background:#7FF0D2;color:#06231c}.ch-side.flag{background:#d23b2c;color:#fff}
.ch-t{font:700 clamp(48px,11vw,150px)/1 "DSEG7",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.ch-m{margin-top:12px;font-size:15px;opacity:.8}
.ch-bar{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;padding:12px;background:#0b1116}
.ch-bar select,.ch-bar button{font:600 16px var(--font);padding:10px 16px;border-radius:999px;border:1px solid #3a4756;background:#151d25;color:#e6ebf1;cursor:pointer}
@media (max-width:640px){.ch-wrap{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.ch-side:first-child{transform:rotate(180deg)}}
/* tell time */
.tt-wrap{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:24px;align-items:center}
.tt-wrap canvas{width:100%;max-width:420px;aspect-ratio:1;height:auto}
#tt-opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.tt-opt{font-size:22px;padding:16px}.tt-opt.ok{background:#1f9d55;border-color:#1f9d55;color:#fff}.tt-opt.no{background:#d23b2c;border-color:#d23b2c;color:#fff}
@media (max-width:720px){.tt-wrap{grid-template-columns:1fr}}
/* calendar */
.cal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:18px}
.cal-month h3{margin:0 0 6px;font-size:17px}
.cal-month table{width:100%;border-collapse:collapse;font-size:14px;text-align:center}
.cal-month th{font-size:11px;color:var(--muted);font-weight:600;padding:3px 0}
.cal-month td{padding:4px 0;border:0}
.cal-month td.wk{color:var(--muted);font-size:11px}
.cal-month td.hol{color:#d23b2c;font-weight:700}
.cal-month td.today,tr.today td{background:var(--accent);color:var(--accent-ink);border-radius:6px}
.wk-big{font:700 clamp(72px,14vw,160px)/1 "DSEG7",ui-monospace,monospace;color:var(--digit);text-shadow:var(--glow)}
@media print{.nav,.footer,.toolbar,.no-print,.skip{display:none!important}body{background:#fff}.cal-grid{grid-template-columns:repeat(3,1fr)}.cal-month{break-inside:avoid}}

/* CSS fullscreen fallback (iPhone etc.) */
.stage.pseudo-fs{position:fixed;inset:0;z-index:1000;min-height:100vh;min-height:100dvh;margin:0}
html.pfs,html.pfs body{overflow:hidden}
.zone-line{font-size:14px;margin-top:4px}
.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}
.sr-only:focus{position:static;width:auto;height:auto;clip:auto;margin:8px}
/* high contrast preference */
@media (prefers-contrast:more){.stage{--ghost:transparent;--glow:none;--stage-muted:#d7e3e0}.stage[data-theme=paper]{--stage-muted:#222}:root{--muted:#3b4652;--line:#5d6975}}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){:root{--muted:#c9d3dd;--line:#8a96a3}}
[hidden]{display:none!important}

/* Ask box */
.ask{max-width:760px;margin:0 auto}
.ask form{display:flex;gap:8px}
.ask input{flex:1;min-width:0;font:500 19px/1.2 var(--font);padding:15px 18px;border-radius:999px;border:2px solid var(--line);background:var(--surface);color:var(--text)}
.ask input:focus{border-color:var(--accent);outline:none}
.ask button[type=submit]{border-radius:999px;padding:0 22px;font:600 17px var(--font);border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer}
.ask-chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.ask-chips button{font:500 14px var(--font);padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer}
.ask-chips button:hover{color:var(--accent);border-color:var(--accent)}
.ask-card{margin-top:16px;padding:20px 22px;border-radius:var(--radius-m);background:var(--surface);border:1px solid var(--line)}
.ask-label{font-size:14px;color:var(--muted);margin-bottom:4px}
.ask-big{font:700 clamp(28px,5vw,44px)/1.15 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ask-sub{margin-top:6px;color:var(--muted)}
.ask-links{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px;font-weight:600}
.ask-home{padding:28px 16px 4px}
/* phones: wide tables scroll sideways inside themselves, long codes wrap */
@media (max-width:640px){.content table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}.content code{word-break:break-all}.content pre{white-space:pre-wrap;word-break:break-all}.content iframe,.content img,.content svg{max-width:100%}}
.moon-panel{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:24px;align-items:center}
@media (max-width:560px){.moon-panel{grid-template-columns:1fr}.moon-panel svg{max-width:180px;margin:0 auto}}
.panel{min-width:0;max-width:100%;box-sizing:border-box}.panel textarea,.panel input,.panel select{max-width:100%;box-sizing:border-box}
#w-preview{overflow-x:auto;max-width:100%}
.wgrid{align-items:start;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
@media (max-width:720px){.wgrid{grid-template-columns:1fr}}
.row>*{min-width:0}
@media (max-width:420px){.big-result{font-size:clamp(20px,6.5vw,30px)!important}.row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}}
/* ---- touch devices: finger-sized targets (Apple/Google guidance ~44-48px) ---- */
@media (pointer:coarse){
  .tbtn,.toolbar select{min-height:44px;padding-left:14px;padding-right:14px}
  .stage button:not(.cbtn):not(.ch-side),.presets button,[data-preset]{min-height:44px}
  .cbtn{min-height:48px}
  .zones button{min-width:44px;min-height:44px;font-size:20px}
  .ask-chips button{min-height:40px}
  .nav-links a{padding-top:12px;padding-bottom:12px}
  .linkgrid a{min-height:40px;display:flex;align-items:center}
}
.zones .meta{white-space:normal}
.zones .meta span,.nowrap{white-space:nowrap}
/* chess clock: bigger digits on phones */
@media (max-width:640px){.ch-t{font-size:clamp(64px,22vw,130px)}}
.cal-month td.wk{font-size:12px}
/* phones in landscape: keep timer controls on screen */
@media (orientation:landscape) and (max-height:500px){
  .stage{padding-top:6px;padding-bottom:64px}
  .stage.compact{min-height:calc(100svh - var(--nav-h))}
  .stage-input{margin-top:6px;gap:8px}
  .stage-input label{font-size:12px}
  .stage-input input,.stage-input select{padding:4px 8px;font-size:18px}
  .controls{margin-top:8px}
  .cbtn{padding:8px 18px;min-height:40px}
  .toolbar{bottom:8px}
  .progress{margin-top:6px}
}
@media (pointer:coarse){.zones li button{min-height:44px!important;min-width:44px!important}.content input:not([type=checkbox]):not([type=radio]),.content select{min-height:44px}}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){.stage-input input,.stage-input select{min-height:40px}}
@media (max-width:340px){.zones li{grid-template-columns:minmax(0,1fr) auto;gap:6px}.zones li>span:last-child{grid-column:1/-1;justify-self:end}.zones .t{font-size:22px}
  .tt-wrap>*{min-width:0}#tt-opts{gap:6px}.tt-opt{font-size:18px;padding:12px 6px}}
.tt-wrap>*{min-width:0}
@media (pointer:coarse){.planner th button{min-height:40px;min-width:40px}.presets input,.presets select{min-height:44px}}
@media (max-width:340px){.zones li{display:flex!important;flex-wrap:wrap;align-items:baseline;justify-content:space-between}.zones li>.city{flex:1 1 100%}}
.zones,.zones li{min-width:0;max-width:100%;box-sizing:border-box}.zones .city,.zones .meta{overflow-wrap:anywhere}