/* ONLINECLOCK.NET — colour layer.
   Loaded after site.css. Keeps the Station structure (hairlines, tabular
   numerals, the red seconds paddle) and adds a full colour system on top,
   so nothing in the markup has to change. */

:root{
  /* Brand spectrum */
  --c-indigo:   #4f46e5;
  --c-violet:   #7c3aed;
  --c-fuchsia:  #c026d3;
  --c-pink:     #ec4899;
  --c-rose:     #f43f5e;
  --c-orange:   #f97316;
  --c-amber:    #f59e0b;
  --c-lime:     #84cc16;
  --c-emerald:  #10b981;
  --c-teal:     #14b8a6;
  --c-cyan:     #06b6d4;
  --c-sky:      #0ea5e9;
  --c-blue:     #3b82f6;

  /* Re-pointed core tokens */
  --brand:      var(--c-indigo);
  --brand-2:    var(--c-violet);
  --signal:     #e11d48;
  --go:         #059669;
  --amber:      #b45309;
  --link:       #4338ca;

  --dial:       #f4f5fa;
  --dial-2:     #eaecf4;
  --panel:      #ffffff;
  --panel-2:    #f7f8fc;
  --panel-3:    #eef0f8;
  --line:       #e0e3ee;
  --line-2:     #c6cbdd;

  --grad-brand:  linear-gradient(135deg, var(--c-indigo), var(--c-violet) 55%, var(--c-fuchsia));
  --grad-warm:   linear-gradient(135deg, var(--c-amber), var(--c-orange) 55%, var(--c-rose));
  --grad-cool:   linear-gradient(135deg, var(--c-cyan), var(--c-sky) 55%, var(--c-indigo));
  --grad-go:     linear-gradient(135deg, var(--c-emerald), var(--c-teal));
  --grad-stop:   linear-gradient(135deg, var(--c-rose), var(--c-orange));
  --grad-rail:   linear-gradient(90deg, var(--c-indigo), var(--c-violet) 18%, var(--c-fuchsia) 34%,
                                        var(--c-rose) 50%, var(--c-orange) 66%, var(--c-amber) 80%, var(--c-teal));

  --glow-brand: 0 10px 30px -10px rgba(79,70,229,.45);
  --glow-warm:  0 10px 30px -10px rgba(249,115,22,.45);
  --glow-soft:  0 1px 2px rgba(17,21,27,.04), 0 8px 24px -12px rgba(50,50,93,.18);
  --glow-lift:  0 2px 4px rgba(17,21,27,.04), 0 18px 44px -18px rgba(50,50,93,.34);
}

[data-theme="dark"]{
  --dial:       #0b0d14;
  --dial-2:     #11141d;
  --panel:      #151926;
  --panel-2:    #1b2030;
  --panel-3:    #222839;
  --ink:        #eef1f8;
  --ink-2:      #b9c1d4;
  --rail:       #8b95ad;
  --line:       #2a3145;
  --line-2:     #3a4359;

  --brand:      #818cf8;
  --brand-2:    #a78bfa;
  --signal:     #fb7185;
  --go:         #34d399;
  --link:       #a5b4fc;

  --glow-soft:  0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --glow-lift:  0 2px 4px rgba(0,0,0,.4), 0 18px 44px -18px rgba(0,0,0,.8);
}

/* ------------------------------------------------------------------
   Page canvas — a soft colour wash instead of flat grey
   ------------------------------------------------------------------ */
body{
  background:
    radial-gradient(60rem 34rem at 12% -6%,  rgba(79,70,229,.11), transparent 62%),
    radial-gradient(52rem 30rem at 92% 2%,   rgba(236,72,153,.09), transparent 62%),
    radial-gradient(46rem 28rem at 68% 42%,  rgba(20,184,166,.07), transparent 64%),
    var(--dial);
  background-attachment: fixed;
}
[data-theme="dark"] body{
  background:
    radial-gradient(60rem 34rem at 12% -6%, rgba(99,102,241,.18), transparent 62%),
    radial-gradient(52rem 30rem at 92% 2%,  rgba(192,38,211,.13), transparent 62%),
    radial-gradient(46rem 28rem at 68% 42%, rgba(13,148,136,.10), transparent 64%),
    var(--dial);
}

/* ------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------ */
.masthead{
  background: color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  border-image: var(--grad-rail) 1;
  box-shadow: 0 1px 24px -14px rgba(50,50,93,.5);
}
.brand-mark{
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: var(--glow-brand);
}
.brand-mark::before,
.brand-mark::after{ background:#fff; }
.brand-mark::after{ background: #fde047; }
.brand-name{ letter-spacing:-.02em; }
.brand-name .b-net{
  background: var(--grad-warm);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.mainnav a{ border-radius: 999px; transition: color .16s ease, background .16s ease; }
.mainnav a:hover{
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.mainnav a[aria-current="page"]{
  color:#fff;
  background: var(--grad-brand);
  border-bottom-color: transparent;
  box-shadow: var(--glow-brand);
}
.mast-tools .btn-icon:hover{ border-color: var(--brand); color: var(--brand); }

/* ------------------------------------------------------------------
   Eyebrows — rotate hue by position so sections read as distinct
   ------------------------------------------------------------------ */
.eyebrow{
  background: var(--grad-brand);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.eyebrow::after{ background: linear-gradient(90deg, var(--brand), transparent); }
.section:nth-of-type(3n+2) .eyebrow{ background: var(--grad-warm);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.section:nth-of-type(3n+2) .eyebrow::after{ background: linear-gradient(90deg, var(--c-orange), transparent); }
.section:nth-of-type(3n+3) .eyebrow{ background: var(--grad-cool);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.section:nth-of-type(3n+3) .eyebrow::after{ background: linear-gradient(90deg, var(--c-cyan), transparent); }
.eyebrow-plain{
  background:none; -webkit-text-fill-color: var(--rail); color: var(--rail);
}

/* ------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------ */
.hero h1{
  background: linear-gradient(135deg, var(--ink) 22%, var(--c-indigo) 62%, var(--c-fuchsia));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="dark"] .hero h1{
  background: linear-gradient(135deg, #fff 20%, #a5b4fc 58%, #f0abfc);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ------------------------------------------------------------------
   Chips — pastel rotation
   ------------------------------------------------------------------ */
.chip{
  border-color: transparent;
  background: color-mix(in srgb, var(--c-indigo) 12%, var(--panel));
  color: color-mix(in srgb, var(--c-indigo) 78%, var(--ink));
  font-weight: 600;
}
.chip:nth-child(2){ background: color-mix(in srgb, var(--c-orange) 14%, var(--panel));
                    color: color-mix(in srgb, var(--c-orange) 72%, var(--ink)); }
.chip:nth-child(3){ background: color-mix(in srgb, var(--c-teal) 14%, var(--panel));
                    color: color-mix(in srgb, var(--c-teal) 72%, var(--ink)); }
.chip:nth-child(4){ background: color-mix(in srgb, var(--c-pink) 13%, var(--panel));
                    color: color-mix(in srgb, var(--c-pink) 74%, var(--ink)); }
.chip:nth-child(5){ background: color-mix(in srgb, var(--c-emerald) 14%, var(--panel));
                    color: color-mix(in srgb, var(--c-emerald) 72%, var(--ink)); }
.chip-live{ background: color-mix(in srgb, var(--c-emerald) 15%, var(--panel));
            color: color-mix(in srgb, var(--c-emerald) 76%, var(--ink)); }
.chip-live::before{ background: var(--c-emerald); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-emerald) 25%, transparent); }

/* ------------------------------------------------------------------
   Instrument — rainbow rail and a coloured glow
   ------------------------------------------------------------------ */
.instrument{
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--brand) 4%, var(--panel)));
  border-color: var(--line);
  box-shadow: var(--glow-lift);
  position: relative; overflow: hidden;
}
.instrument::before{
  background: var(--grad-rail);
  height: 4px; left: 0; right: 0; width: auto;
  opacity: 1;
}
.instrument::after{
  content:""; position:absolute; inset:auto -20% -60% -20%; height:150px;
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%);
  pointer-events:none;
}
.readout{
  background: linear-gradient(160deg, var(--ink) 30%, color-mix(in srgb, var(--ink) 62%, var(--c-indigo)));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
[data-theme="dark"] .readout{
  background: linear-gradient(160deg, #fff 28%, #c7d2fe);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.readout .sep{ -webkit-text-fill-color: var(--c-rose); color: var(--c-rose); opacity:.85; }
.readout .ampm{ -webkit-text-fill-color: var(--rail); color: var(--rail); }
.secrail-paddle::after{ background: var(--c-rose); box-shadow: 0 0 12px color-mix(in srgb, var(--c-rose) 60%, transparent); }
.secrail-paddle::before{ background: var(--c-rose); }
.secrail-ticks i:nth-child(5n+1){ background: color-mix(in srgb, var(--brand) 55%, var(--rail)); }

/* ------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------ */
.btn, button.btn{ transition: transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
.btn:hover, button.btn:hover{ transform: translateY(-1px); border-color: var(--brand); color: var(--brand); box-shadow: var(--glow-soft); }
.btn:active, button.btn:active{ transform: translateY(0); }
.btn.btn-solid{
  background: var(--grad-brand); border-color: transparent; color:#fff;
  box-shadow: var(--glow-brand);
}
.btn.btn-solid:hover{ color:#fff; border-color: transparent; filter: brightness(1.07); box-shadow: 0 14px 34px -12px rgba(79,70,229,.6); }
.btn.btn-go{
  background: var(--grad-go); border-color: transparent; color:#fff;
  box-shadow: 0 10px 26px -12px rgba(16,185,129,.55);
}
.btn.btn-go:hover{ color:#fff; border-color:transparent; filter: brightness(1.07); }
.btn.btn-stop{
  background: var(--grad-stop); border-color: transparent; color:#fff;
  box-shadow: 0 10px 26px -12px rgba(244,63,94,.55);
}
.btn.btn-stop:hover{ color:#fff; border-color:transparent; filter: brightness(1.07); }
.btn.btn-ghost:hover{ background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--brand); }

.preset{ transition: all .15s ease; }
.preset:hover{ border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.preset[aria-pressed="true"]{
  background: var(--grad-brand); border-color: transparent; color:#fff;
  box-shadow: var(--glow-brand);
}

/* ------------------------------------------------------------------
   Panels and cards
   ------------------------------------------------------------------ */
.panel{
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--brand) 3%, var(--panel)));
  box-shadow: var(--glow-soft);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.panel:hover{ box-shadow: var(--glow-lift); }
.panel-2{ background: linear-gradient(180deg, var(--panel-2), color-mix(in srgb, var(--brand) 5%, var(--panel-2))); }

.card{
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--brand) 4%, var(--panel)));
  box-shadow: var(--glow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: var(--grad-brand); opacity:.9;
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.card:hover::before{ transform: scaleX(1); }
.card:hover{ transform: translateY(-3px); border-color: color-mix(in srgb, var(--brand) 35%, var(--line)); box-shadow: var(--glow-lift); }
.grid > .card:nth-child(3n+2)::before{ background: var(--grad-warm); }
.grid > .card:nth-child(3n+3)::before{ background: var(--grad-cool); }
.card-kicker{ color: var(--brand); font-weight:700; }
.grid > .card:nth-child(3n+2) .card-kicker{ color: var(--c-orange); }
.grid > .card:nth-child(3n+3) .card-kicker{ color: var(--c-cyan); }
.card-go{ color: var(--brand); font-weight:600; }
.card:hover .card-go{ transform: translateX(2px); }

/* ------------------------------------------------------------------
   Fields, status, progress
   ------------------------------------------------------------------ */
.field:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
  outline: none;
}
.status{ border-left: 3px solid var(--line-2); border-radius: var(--radius); }
.status-go{
  background: color-mix(in srgb, var(--c-emerald) 10%, var(--panel));
  border-left-color: var(--c-emerald);
  color: color-mix(in srgb, var(--c-emerald) 70%, var(--ink));
}
.status-stop{
  background: color-mix(in srgb, var(--c-rose) 10%, var(--panel));
  border-left-color: var(--c-rose);
  color: color-mix(in srgb, var(--c-rose) 72%, var(--ink));
}
.status-idle{
  background: color-mix(in srgb, var(--brand) 7%, var(--panel));
  border-left-color: color-mix(in srgb, var(--brand) 50%, var(--line-2));
}
.progress{ background: color-mix(in srgb, var(--brand) 12%, var(--panel-3)); overflow:hidden; }
.progress > i{ background: var(--grad-brand); }
.progress-stop > i{ background: var(--grad-stop); }

/* ------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------ */
.dtable thead th{
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 10%, var(--panel-2)), var(--panel-2));
  color: color-mix(in srgb, var(--brand) 62%, var(--ink));
  border-bottom: 2px solid color-mix(in srgb, var(--brand) 35%, var(--line));
}
.dtable tbody tr:hover{ background: color-mix(in srgb, var(--brand) 6%, transparent); }
.dtable tbody tr:nth-child(even){ background: color-mix(in srgb, var(--brand) 2.5%, transparent); }
.table-wrap{ border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--glow-soft); }

/* ------------------------------------------------------------------
   FAQ and notes
   ------------------------------------------------------------------ */
.faq details{
  border-radius: var(--radius); margin-bottom:.5rem;
  border:1px solid var(--line);
  background: var(--panel);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq details[open]{ border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); box-shadow: var(--glow-soft); }
.faq summary{ padding:.95rem 1.1rem; border-radius: var(--radius); }
.faq summary::before{ color: var(--brand); font-weight:800; }
.faq summary:hover{ color: var(--brand); background: color-mix(in srgb, var(--brand) 5%, transparent); }
.faq-a{ padding:0 1.1rem 1rem; }
.faq-a a{ color: var(--link); }

.note{ border-radius: var(--radius); border-left-width:4px; }
.note-signal{
  background: color-mix(in srgb, var(--c-amber) 11%, var(--panel));
  border-left-color: var(--c-amber);
}
.note-go{
  background: color-mix(in srgb, var(--c-emerald) 10%, var(--panel));
  border-left-color: var(--c-emerald);
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.siteftr{
  background: linear-gradient(180deg, #12172a, #0a0d18);
  border-top: 3px solid transparent;
  border-image: var(--grad-rail) 1;
  color:#c7cede;
}
.siteftr h5{ color:#fff; }
.siteftr a{ color:#aeb8cd; }
.siteftr a:hover{ color:#fff; }
.ftr-base{ border-top-color: rgba(255,255,255,.09); color:#8892a8; }

/* ------------------------------------------------------------------
   Crumbs, jump links, laps
   ------------------------------------------------------------------ */
.crumbs a{ color: var(--brand); }
.jump a:hover{ border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, transparent); }
.laps li:nth-child(odd){ background: color-mix(in srgb, var(--brand) 4%, transparent); }
.laps li span:nth-child(2){ color: var(--brand); font-weight:700; }
.kbd{ background: color-mix(in srgb, var(--brand) 10%, var(--panel)); border-color: color-mix(in srgb, var(--brand) 26%, var(--line)); color: var(--ink); }

a{ color: var(--link); }

/* ------------------------------------------------------------------
   Reveal on scroll (driven by fx.js)
   ------------------------------------------------------------------ */
.reveal{ opacity:0; transform: translateY(14px); }
.reveal.is-in{ opacity:1; transform:none; transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal.is-in{ opacity:1; transform:none; transition:none; }
  .card, .btn, .panel{ transition:none; }
}

/* ------------------------------------------------------------------
   World clock reference faces
   ------------------------------------------------------------------ */
.faces{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:900px){ .faces{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .faces{ grid-template-columns:repeat(2,1fr); gap:10px; } }
.face-card{
  text-align:center; padding:1.1rem .8rem 1rem;
  border:1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--brand) 5%, var(--panel)));
  box-shadow: var(--glow-soft);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.face-card:hover{ transform: translateY(-3px); box-shadow: var(--glow-lift);
                  border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); }
.face-card .dialwrap{ max-width:150px; margin:0 auto; color: var(--ink); }
.face-card h3{ font-size:var(--step-0); font-weight:700; margin:.75rem 0 .15rem; }
.face-card .t{ font-family:var(--f-mono); font-size:.82rem; color:var(--brand); font-weight:600; margin:0; }
.face-card .z{ font-family:var(--f-mono); font-size:.7rem; color:var(--rail); margin:.15rem 0 0; }

/* ------------------------------------------------------------------
   Ad slots blend in rather than sitting in a grey box
   ------------------------------------------------------------------ */
.adslot{ background: color-mix(in srgb, var(--brand) 3%, transparent); border-radius: var(--radius); }

/* ------------------------------------------------------------------
   Clock over an animated scene — the scene stage is always dark, so the
   readout needs a light gradient regardless of the page theme.
   ------------------------------------------------------------------ */
.stage-clock .readout,
.stage .readout{
  background: linear-gradient(160deg, #ffffff 26%, #dbe4ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  text-shadow: none;
}
.stage-clock .readout .sep,
.stage .readout .sep{ -webkit-text-fill-color:#ff6b81; color:#ff6b81; }
.stage-clock .readout .ampm,
.stage .readout .ampm{ -webkit-text-fill-color: rgba(255,255,255,.6); color: rgba(255,255,255,.6); }
.stage-clock .stage-date{ color: rgba(255,255,255,.82); }
.stage-clock .label{ color: rgba(255,255,255,.7) !important; }

/* ------------------------------------------------------------------
   Round pips (Pomodoro) and round chips (interval trainer)
   ------------------------------------------------------------------ */
.pips{ display:flex; gap:8px; justify-content:center; }
.pip{
  width:11px; height:11px; border-radius:50%;
  background: color-mix(in srgb, var(--brand) 18%, var(--panel-3));
  border:1px solid var(--line-2);
}
.pip.is-done{ background: var(--grad-brand); border-color:transparent; }
.pip.is-now{
  background: var(--grad-go); border-color:transparent;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--c-emerald) 22%, transparent);
}

/* ------------------------------------------------------------------
   Alarm list rows
   ------------------------------------------------------------------ */
.alarm-row{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 1rem; margin-bottom:.55rem;
  border:1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), color-mix(in srgb, var(--brand) 5%, var(--panel)));
  transition: border-color .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.alarm-row:hover{ border-color: color-mix(in srgb, var(--brand) 34%, var(--line)); box-shadow: var(--glow-soft); }
.alarm-row.is-off{ opacity:.55; }
.alarm-main{ min-width:0; }
.alarm-time{
  margin:0; font-family:var(--f-mono); font-weight:600;
  font-size:var(--step-2); font-variant-numeric:tabular-nums;
  background: var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.alarm-row.is-off .alarm-time{ background:none; -webkit-text-fill-color:var(--rail); color:var(--rail); }
.alarm-meta{ margin:.15rem 0 0; font-size:.84rem; color:var(--ink-2); }
.alarm-acts{ display:flex; gap:6px; flex-shrink:0; }
.ringbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.85rem 1rem; margin-bottom:.8rem; border-radius:var(--radius);
  background: var(--grad-stop); color:#fff;
  box-shadow:0 10px 26px -12px rgba(244,63,94,.6);
}
.ringbar .btn{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }
.ringbar .btn:hover{ background:rgba(255,255,255,.28); color:#fff; border-color:#fff; }
@media (max-width:520px){
  .alarm-row{ flex-direction:column; align-items:flex-start; }
}

/* ------------------------------------------------------------------
   Meeting planner grid
   ------------------------------------------------------------------ */
.planner-wrap{ overflow-x:auto; }
.planner{ min-width:900px; }
.planner th, .planner td{ padding:.35rem .2rem; text-align:center; font-size:.76rem; }
.planner th:first-child, .planner td:first-child{
  text-align:left; padding-left:.9rem; padding-right:.9rem;
  white-space:nowrap; position:sticky; left:0; z-index:2;
  background: var(--panel);
}
.planner thead th:first-child{ background: var(--panel-2); }
.planner td.h{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:#0b1220; }
.planner td.good{ background: color-mix(in srgb, var(--c-emerald) 46%, transparent); font-weight:700; }
.planner td.ok{   background: color-mix(in srgb, var(--c-amber) 42%, transparent); }
.planner td.bad{  background: color-mix(in srgb, var(--c-rose) 34%, transparent); color:#fff; }
.planner td.off{  background: color-mix(in srgb, var(--rail) 22%, transparent); color:var(--rail); }
.planner th.best{ background: var(--grad-go); color:#fff; border-radius:6px 6px 0 0; }
[data-theme="dark"] .planner td.h{ color:#e9edf7; }
.legend{ display:flex; flex-wrap:wrap; gap:1.1rem; font-size:.84rem; color:var(--ink-2); }
.legend .sw{ display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:.35rem; vertical-align:-2px; }
.sw-good{ background: color-mix(in srgb, var(--c-emerald) 46%, transparent); }
.sw-ok{   background: color-mix(in srgb, var(--c-amber) 42%, transparent); }
.sw-bad{  background: color-mix(in srgb, var(--c-rose) 34%, transparent); }
.sw-off{  background: color-mix(in srgb, var(--rail) 22%, transparent); }

/* ------------------------------------------------------------------
   Mobile navigation drawer
   ------------------------------------------------------------------ */
.navtoggle{ display:none; }
.burger{ display:block; width:18px; }
.burger i{
  display:block; height:2px; border-radius:2px; background:currentColor;
  margin:3px 0; transition:transform .22s ease, opacity .18s ease;
}
.navtoggle[aria-expanded="true"] .burger i:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.navtoggle[aria-expanded="true"] .burger i:nth-child(2){ opacity:0; }
.navtoggle[aria-expanded="true"] .burger i:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

.navdrawer{
  border-top:1px solid var(--line);
  background: color-mix(in srgb, var(--panel) 96%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  padding:1rem 0 1.2rem;
  max-height:min(70vh, 560px); overflow-y:auto;
  animation: navIn .18s ease;
}
@keyframes navIn{ from{ opacity:0; transform:translateY(-6px) } to{ opacity:1; transform:none } }
.navdrawer ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.navdrawer-more{ grid-template-columns:1fr 1fr; }
.navdrawer a{
  display:block; padding:.7rem .85rem; border-radius:var(--radius-sm);
  font-weight:600; font-size:.94rem; text-decoration:none;
  color:var(--ink); background:var(--panel-2); border:1px solid var(--line);
}
.navdrawer a:hover{ border-color:var(--brand); color:var(--brand); }
.navdrawer a[aria-current="page"]{ background:var(--grad-brand); color:#fff; border-color:transparent; }
.navdrawer-more a{ background:transparent; font-weight:500; font-size:.9rem; }

@media (max-width: 1100px){
  .masthead-in{ gap:.5rem; }
}
@media (max-width: 900px){
  .brand-name{ font-size:.95rem; }
}
@media (max-width: 420px){
  .mast-tools [data-miniclock]{ display:none; }
}

/* ------------------------------------------------------------------
   Collapsible intro blocks — compact on phones, full on desktop.
   All the text stays in the DOM, so nothing is lost to search engines
   or screen readers; only the visual height is reduced.
   ------------------------------------------------------------------ */

@media (max-width: 760px){
  .collapse-toggle::after{ content:"▾"; font-size:.8em; transition:transform .2s ease; }
  .collapse-toggle[aria-expanded="true"]::after{ transform:rotate(180deg); }

  /* Tighter hero rhythm on small screens */
  .hero h1, .section-tight h1{ font-size:clamp(1.65rem,7.4vw,2.3rem); line-height:1.12; }
  .hero .lede, .section-tight .lede{ font-size:1rem; line-height:1.55; }
  .hero-meta{ gap:6px; }
  .hero-meta .chip{ font-size:.72rem; padding:.28rem .55rem; }
  .section{ padding:2.2rem 0; }
  .section-tight{ padding:1.4rem 0; }
}

/* ------------------------------------------------------------------
   Location search
   ------------------------------------------------------------------ */
.locsearch{ position:relative; }
.locsearch-row{ display:flex; gap:8px; }
.locsearch-row .field{ flex:1; min-width:0; }
.locsuggest{
  position:absolute; z-index:40; left:0; right:0; top:100%;
  margin:.35rem 0 0; padding:.3rem; list-style:none;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--radius); box-shadow:var(--glow-lift);
  max-height:320px; overflow-y:auto;
}
.locsuggest li{
  display:grid; grid-template-columns:1fr auto; gap:.1rem .8rem;
  padding:.55rem .7rem; border-radius:var(--radius-sm); cursor:pointer;
}
.locsuggest li:hover, .locsuggest li.is-active{ background:color-mix(in srgb, var(--brand) 12%, transparent); }
.ls-name{ font-weight:600; font-size:.95rem; }
.ls-sub{ grid-column:1; font-size:.78rem; color:var(--rail); }
.ls-time{ grid-row:1 / span 2; align-self:center; font-size:.9rem; color:var(--brand); font-weight:600; }

.loccards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; margin-top:1.3rem; }
.loccard{
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.1rem 1.2rem;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--brand) 5%,var(--panel)));
  box-shadow:var(--glow-soft);
}
.loccard-h{ display:flex; justify-content:space-between; align-items:flex-start; gap:.6rem; }
.loccard h3{ margin:0; font-size:var(--step-1); }
.loccard-sub{ margin:.1rem 0 0; font-size:.8rem; color:var(--rail); }
.loccard-x{ padding:.15rem .45rem; min-height:0; line-height:1; }
.loccard-time{
  margin:.7rem 0 .1rem; font-size:2rem; font-weight:600; font-variant-numeric:tabular-nums;
  background:var(--grad-brand); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.loccard-meta{ margin:0; font-size:.8rem; color:var(--ink-2); }
.loccard-wx{ margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--line); }
.wx-now{ display:flex; align-items:center; gap:.55rem; }
.wx-ico{ font-size:1.5rem; line-height:1; }
.wx-t{ font-size:1.35rem; font-weight:700; }
.wx-d{ font-size:.85rem; color:var(--ink-2); }
.wx-more{ margin:.45rem 0 0; font-size:.78rem; color:var(--rail); line-height:1.5; }
.wx-load{ font-size:.82rem; color:var(--rail); }

/* ------------------------------------------------------------------
   World map
   ------------------------------------------------------------------ */
.wmap{
  width:100%; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-2); background:#0a1020;
  box-shadow:var(--glow-lift);
}
.wmap-svg{ display:block; width:100%; height:auto; }
.band-a{ fill:#101a33; }
.band-b{ fill:#0d1628; }
.wmap-land polygon{ fill:#27407a; stroke:#3d5da8; stroke-width:1.5; opacity:.95; }
.wmap-grid line{ stroke:rgba(255,255,255,.14); stroke-width:1.5; }
.wmap-grid .g-eq{ stroke:rgba(255,255,255,.3); stroke-dasharray:10 8; }
.wmap-grid .g-pm{ stroke:rgba(255,215,120,.45); stroke-dasharray:10 8; }
.wmap-night rect{ fill:rgba(0,0,0,.42); pointer-events:none; }
.wmap-noon{ stroke:#ffd166; stroke-width:3; opacity:.75; }
.wmap-pin{ cursor:pointer; }
.pin-halo{ fill:rgba(255,90,120,.22); }
.pin-dot{ fill:#ff5a78; stroke:#fff; stroke-width:2.5; }
.wmap-pin.is-night .pin-dot{ fill:#8b9bff; }
.wmap-pin.is-night .pin-halo{ fill:rgba(139,155,255,.22); }
.wmap-pin:hover .pin-halo, .wmap-pin:focus .pin-halo{ fill:rgba(255,255,255,.3); }
.pin-city{ fill:#fff; font-family:var(--f-display); font-weight:700; font-size:26px; }
.pin-time{ fill:#c9d4ff; font-family:var(--f-mono); font-size:24px; }
.wmap-legend{
  display:flex; flex-wrap:wrap; gap:1.1rem; align-items:center;
  margin-top:.8rem; font-size:.82rem; color:var(--ink-2);
}
.wmap-legend .sw{ display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:.35rem; vertical-align:-2px; }
.sw-night{ background:rgba(10,16,32,.85); border:1px solid var(--line-2); }
.sw-band{ background:linear-gradient(90deg,#101a33 50%,#0d1628 50%); }
.sw-noon{ background:#ffd166; }
.wmap-hint{ margin-left:auto; color:var(--rail); }
.wmap-read{
  margin:.7rem 0 0; min-height:1.4em; font-size:.9rem; color:var(--ink-2);
  padding:.6rem .9rem; border-radius:var(--radius);
  background:color-mix(in srgb,var(--brand) 7%,transparent);
}
@media (max-width:760px){
  .pin-city{ font-size:34px; }
  .pin-time{ font-size:32px; }
  .pin-dot{ r:9; }
  .wmap-hint{ margin-left:0; width:100%; }
}

/* ------------------------------------------------------------------
   Country page weather panels
   ------------------------------------------------------------------ */
.wx-hero{ display:flex; align-items:center; gap:1rem; }
.wx-ico-lg{ font-size:3.2rem; line-height:1; }
.wx-big{
  margin:0; font-size:2.6rem; font-weight:700; line-height:1;
  font-variant-numeric:tabular-nums;
  background:var(--grad-warm); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.wx-desc{ margin:.25rem 0 0; font-size:.92rem; color:var(--ink-2); }
.wx-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:.8rem; margin-top:1.1rem; padding-top:1rem; border-top:1px solid var(--line);
}
.wx-grid > div{ display:flex; flex-direction:column; gap:.15rem; }
.wx-grid b{ font-size:1.05rem; font-variant-numeric:tabular-nums; }

/* ------------------------------------------------------------------
   Country index
   ------------------------------------------------------------------ */
.ctry-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px; margin-top:.8rem; }
.ctry{
  display:grid; grid-template-columns:1fr auto; gap:.05rem .7rem;
  padding:.75rem .9rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); text-decoration:none;
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.ctry:hover{ border-color:var(--brand); transform:translateY(-2px); box-shadow:var(--glow-soft); }
.ctry-name{ font-weight:700; font-size:.95rem; color:var(--ink); }
.ctry-cap{ grid-column:1; font-size:.76rem; color:var(--rail); }
.ctry-time{ grid-row:1 / span 2; align-self:center; font-size:.95rem; font-weight:600; color:var(--brand); }
/* Halo behind map labels so they stay legible over land and sea alike. */
.pin-city, .pin-time{ paint-order:stroke fill; stroke:rgba(6,10,22,.85); stroke-width:6px; stroke-linejoin:round; }
.wmap-hours text{ fill:rgba(255,255,255,.5); font-family:var(--f-mono); font-size:20px; }
/* Wide container for the dedicated map page */
.shell-wide{ width:100%; max-width:1600px; margin:0 auto; padding:0 clamp(1rem,3vw,2rem); }

/* ------------------------------------------------------------------
   Masthead search
   ------------------------------------------------------------------ */
.navsearch{ position:relative; }
.navsearch-in{
  width:clamp(150px,17vw,230px); padding:.42rem .7rem; min-height:36px;
  font-family:var(--f-body); font-size:.85rem;
  border:1px solid var(--line-2); border-radius:999px;
  background:var(--panel-2); color:var(--ink);
}
.navsearch-in::placeholder{ color:var(--rail); }
.navsearch-in:focus{
  outline:none; border-color:var(--brand); background:var(--panel);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent);
}
.navsearch-list{
  position:absolute; right:0; top:calc(100% + .4rem); z-index:60;
  width:min(340px,84vw); margin:0; padding:.3rem; list-style:none;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--radius); box-shadow:var(--glow-lift);
  max-height:60vh; overflow-y:auto;
}
@media (max-width:1150px){ .navsearch-in{ width:150px; } }
@media (max-width:900px){
  .navsearch{ order:3; flex-basis:100%; margin-top:.5rem; }
  .navsearch-in{ width:100%; }
  .navsearch-list{ left:0; right:0; width:auto; }
  .masthead-in{ flex-wrap:wrap; }
}

/* ------------------------------------------------------------------
   Nav dropdowns
   ------------------------------------------------------------------ */
.mainnav li.hasmenu{ position:relative; }
.navtrigger{
  display:inline-flex; align-items:center; gap:.3rem;
  font-family:var(--f-body); font-size:.86rem; font-weight:600;
  padding:.45rem .7rem; border:0; border-radius:999px;
  background:transparent; color:var(--rail); cursor:pointer;
  white-space:nowrap; transition:color .16s ease, background .16s ease;
}
.navtrigger:hover{ color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,transparent); }
.navtrigger.is-current{ color:#fff; background:var(--grad-brand); box-shadow:var(--glow-brand); }
.caret{
  width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid currentColor; transition:transform .18s ease;
}
.navtrigger[aria-expanded="true"] .caret{ transform:rotate(180deg); }

.navmenu{
  position:absolute; z-index:70; top:calc(100% + .5rem); left:0;
  min-width:270px; padding:.35rem;
  background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--radius); box-shadow:var(--glow-lift);
  animation:navMenuIn .16s ease;
}
@keyframes navMenuIn{ from{ opacity:0; transform:translateY(-5px) } to{ opacity:1; transform:none } }
.navmenu ul{ display:block; list-style:none; margin:0; padding:0; }
.navmenu a{
  display:block; padding:.55rem .7rem; border-radius:var(--radius-sm);
  text-decoration:none; border:0;
}
.navmenu a:hover{ background:color-mix(in srgb,var(--brand) 11%,transparent); }
.navmenu a[aria-current="page"]{ background:var(--grad-brand); }
.navmenu a[aria-current="page"] .nm-t,
.navmenu a[aria-current="page"] .nm-n{ color:#fff; }
.nm-t{ display:block; font-weight:600; font-size:.9rem; color:var(--ink); }
.nm-n{ display:block; font-size:.76rem; color:var(--rail); margin-top:.1rem; }

/* The burger belongs to phones and tablets only. The extra class beats
   `button.btn` from the base sheet, which would otherwise force it visible. */
.btn.navtoggle, button.navtoggle{ display:none; }
@media (max-width: 1100px){
  .btn.navtoggle, button.navtoggle{ display:inline-flex; }
  .mainnav{ display:none; }
}

/* ------------------------------------------------------------------
   Collapsible intros now work at every width
   ------------------------------------------------------------------ */
.btn.collapse-toggle, button.collapse-toggle{
  display:inline-flex; margin-top:.7rem; gap:.35rem; align-items:center;
}
.collapsible.is-collapsed{
  position:relative; overflow:hidden;
  max-height:6.4em;
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
}
.collapsible.is-collapsed > *:not(:first-child){ margin-top:.4rem; }
@media (max-width: 760px){
  .collapsible.is-collapsed{ max-height:8.6em; }
}

/* The base sheet gives .mainnav overflow-x:auto for the old scrolling nav.
   That creates a clipping context, which would cut off the dropdown panels,
   and it also let items scroll out of sight. With seven grouped items there
   is room to lay them out normally. */
.mainnav{ overflow:visible; flex:0 1 auto; }
.mainnav > ul{ flex-wrap:nowrap; }
.mainnav a, .navtrigger{ padding-inline:.6rem; }
.masthead-in{ gap:.4rem; }
.mast-tools{ margin-left:auto; }
@media (max-width:1360px){
  .navsearch-in{ width:170px; }
  .mainnav a, .navtrigger{ padding-inline:.5rem; font-size:.83rem; }
}
@media (max-width:1200px){
  .navsearch-in{ width:140px; }
  .mast-tools [data-miniclock]{ display:none; }
}

/* ------------------------------------------------------------------
   Masthead spans the full viewport rather than the article column, so the
   brand sits hard left and the search and controls hard right. The page
   content keeps its narrower measure for readability.
   ------------------------------------------------------------------ */
.masthead .masthead-in{
  max-width:none;
  padding-inline:clamp(1rem, 2.2vw, 2.4rem);
  gap:clamp(.5rem, 1.4vw, 1.4rem);
}
.masthead .brand{ margin-right:clamp(.4rem, 1.6vw, 1.6rem); flex-shrink:0; }
.masthead .mainnav{ margin-inline:auto 0; }
.masthead .mast-tools{ margin-left:auto; flex-shrink:0; gap:8px; }
@media (min-width:1500px){
  .navsearch-in{ width:260px; }
}

/* ------------------------------------------------------------------
   Charts
   ------------------------------------------------------------------ */
.chartwrap + .chartwrap{ margin-top:1.4rem; }
.ocv{
  margin:0; padding:1.1rem 1.2rem 1rem;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--brand) 4%,var(--panel)));
  box-shadow:var(--glow-soft);
}
.ocv-title{ font-family:var(--f-display); font-weight:700; font-size:var(--step-1); margin-bottom:.7rem; }
.ocv-svg{ display:block; width:100%; height:auto; overflow:visible; }
.ocv-grid{ stroke:var(--line); stroke-width:1.4; stroke-dasharray:5 6; }
.ocv-ylab, .ocv-xlab{ fill:var(--rail); font-family:var(--f-mono); font-size:20px; }
.ocv-bar{ transition:opacity .15s ease; }
.ocv-bar:hover{ opacity:.78; }
.ocv-c1{ fill:var(--c-orange); }
.ocv-c2{ fill:var(--c-cyan); }
.ocv-c3{ fill:var(--c-violet); }
.ocv-line{ fill:none; stroke:var(--brand); stroke-width:4; stroke-linejoin:round; stroke-linecap:round; }
.ocv-fill{ fill:color-mix(in srgb, var(--brand) 18%, transparent); stroke:none; }
.ocv-mark circle{ stroke:var(--panel); stroke-width:3; }
.ocv-mark text{ font-family:var(--f-mono); font-size:21px; font-weight:600; }
.ocv-hi circle{ fill:var(--c-rose); } .ocv-hi text{ fill:var(--c-rose); }
.ocv-lo circle{ fill:var(--c-cyan); } .ocv-lo text{ fill:var(--c-cyan); }
.ocv-legend{ display:flex; gap:1.1rem; flex-wrap:wrap; margin-top:.7rem; font-size:.82rem; color:var(--ink-2); }
.ocv-key{ display:inline-block; width:13px; height:13px; border-radius:3px; margin-right:.35rem; vertical-align:-2px; }
.ocv-key.ocv-c1{ background:var(--c-orange); }
.ocv-key.ocv-c2{ background:var(--c-cyan); }
.ocv-note{ margin:.7rem 0 0; font-size:.79rem; color:var(--rail); line-height:1.5; }

/* Moon and air quality */
.moonface{ font-size:4.6rem; line-height:1; }
.moon-ill{ margin:.1rem 0 0; font-family:var(--f-mono); font-size:1.05rem; color:var(--brand); font-weight:600; }
.aqi-badge{
  display:inline-grid; place-items:center; width:76px; height:76px; border-radius:50%;
  font-family:var(--f-mono); font-size:1.7rem; font-weight:700; color:#fff;
}
.aqi-go{ background:var(--grad-go); }
.aqi-idle{ background:var(--grad-warm); }
.aqi-stop{ background:var(--grad-stop); }
@media (max-width:760px){
  .ocv-ylab, .ocv-xlab{ font-size:28px; }
  .ocv-mark text{ font-size:28px; }
}

/* ------------------------------------------------------------------
   Dual clock, day timeline, device comparison, map
   ------------------------------------------------------------------ */
.dualtime{
  margin:.5rem 0 0; text-align:center;
  font-size:.95rem; color:var(--ink-2); font-variant-numeric:tabular-nums;
}
.dualtime .dual-sep{ color:var(--line-2); margin:0 .5rem; }
.u-alt{ font-weight:500; opacity:.72; }

.dayline{ margin:1.6rem auto 0; max-width:760px; padding:2.6rem 0 2.2rem; }
.dl-track{
  position:relative; height:10px; border-radius:999px;
  background:linear-gradient(90deg,
    #1e2749 0%, #2c3a6b 12%, #d98b4a 24%, #ffd88a 33%,
    #8fd0ff 50%, #ffd88a 67%, #d98b4a 76%, #2c3a6b 88%, #1e2749 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
.dl-fill{
  position:absolute; inset:0 auto 0 0; border-radius:999px;
  background:rgba(255,255,255,.55); mix-blend-mode:overlay;
}
[data-theme="dark"] .dl-fill{ background:rgba(0,0,0,.35); mix-blend-mode:normal; }
.dl-tick{ position:absolute; top:100%; transform:translateX(-50%); text-align:center; }
.dl-tick i{ display:block; width:1px; height:7px; margin:0 auto; background:var(--line-2); }
.dl-tick b{
  display:block; margin-top:.3rem; font-family:var(--f-mono);
  font-size:.68rem; font-weight:500; color:var(--rail); white-space:nowrap;
}
.dl-pin{ position:absolute; top:50%; width:0; height:0; }
.dl-pin::before{
  content:""; position:absolute; left:-7px; top:-7px;
  width:14px; height:14px; border-radius:50%;
  border:3px solid var(--panel); box-shadow:0 1px 5px rgba(0,0,0,.3);
}
.dl-there::before{ background:var(--c-rose); }
.dl-here::before{ background:var(--c-indigo); }
.dl-lab{
  position:absolute; left:0; bottom:16px; transform:translateX(-50%);
  white-space:nowrap; text-align:center;
}
.dl-pin.flip .dl-lab{ bottom:auto; top:16px; }
.dl-lab b{
  display:block; font-family:var(--f-mono); font-size:.86rem; font-weight:700; color:var(--ink);
}
.dl-lab i{ display:block; font-style:normal; font-size:.7rem; color:var(--rail); }
.dl-there .dl-lab b{ color:var(--c-rose); }
.dl-here .dl-lab b{ color:var(--c-indigo); }

.devcompare{
  display:grid; grid-template-columns:1fr auto 1fr; gap:1rem; align-items:center;
  max-width:640px; margin:1.4rem auto 0; padding:1rem 1.2rem;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:color-mix(in srgb, var(--brand) 5%, var(--panel));
}
.dc-cell{ text-align:center; min-width:0; }
.dc-time{ margin:.2rem 0 0; font-size:1.45rem; font-weight:700; font-variant-numeric:tabular-nums; }
.dc-sub{ margin:.15rem 0 0; font-size:.7rem; color:var(--rail); word-break:break-word; }
.dc-gap{ text-align:center; font-size:.78rem; color:var(--ink-2); }
.dc-gap b{ display:block; font-family:var(--f-mono); font-size:1.05rem; color:var(--brand); }
.dc-gap i{ display:block; font-style:normal; font-size:.68rem; color:var(--rail); margin-top:.1rem; }
.dc-arrow{ display:block; font-size:1.2rem; color:var(--brand); line-height:1; }
.dc-same{ font-weight:600; color:var(--go); }
@media (max-width:560px){
  .devcompare{ grid-template-columns:1fr; gap:.7rem; }
  .dl-tick b{ font-size:.6rem; }
}

.mapbox{
  height:clamp(340px, 46vh, 520px); border-radius:var(--radius-lg);
  border:1px solid var(--line-2); overflow:hidden; box-shadow:var(--glow-lift);
  background:var(--panel-3);
}
.mapbox .leaflet-control-layers, .mapbox .leaflet-bar{ border-radius:8px; }
.mapfallback{ display:grid; place-items:center; height:100%; text-align:center; gap:.4rem; }
/* The big weather figure uses gradient text; the secondary unit needs its
   own solid colour or it disappears into the clipped background. */
.wx-big .u-alt{
  -webkit-text-fill-color: var(--ink-2); color: var(--ink-2);
  background: none; font-size:.55em; font-weight:600; margin-left:.15em;
}

/* ------------------------------------------------------------------
   Nav items as buttons
   ------------------------------------------------------------------ */
.mainnav > ul{ gap:6px; }
.mainnav > ul > li > a,
.mainnav .navtrigger{
  border:1px solid var(--line-2);
  border-radius:999px;
  background:var(--panel-2);
  padding:.44rem .8rem;
  font-weight:600; font-size:.85rem;
  color:var(--ink-2);
  transition:border-color .16s ease, color .16s ease, background .16s ease, transform .12s ease;
}
.mainnav > ul > li > a:hover,
.mainnav .navtrigger:hover{
  border-color:var(--brand); color:var(--brand);
  background:color-mix(in srgb, var(--brand) 9%, var(--panel));
  transform:translateY(-1px);
}
.mainnav > ul > li > a[aria-current="page"],
.mainnav .navtrigger.is-current{
  background:var(--grad-brand); border-color:transparent; color:#fff;
  box-shadow:var(--glow-brand);
}
.mainnav .navtrigger[aria-expanded="true"]{
  border-color:var(--brand); color:var(--brand);
  background:color-mix(in srgb, var(--brand) 9%, var(--panel));
}
.mainnav .navtrigger.is-current[aria-expanded="true"]{ color:#fff; background:var(--grad-brand); }

/* ------------------------------------------------------------------
   Country page dashboard grid.
   Two columns from 900px and three from 1400px, so a wide screen shows
   most of the data without scrolling instead of one tall column.
   ------------------------------------------------------------------ */
.dash{ display:grid; grid-template-columns:1fr; gap:16px; margin-top:1.4rem; align-items:stretch; }
@media (min-width:900px){ .dash{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1400px){
  .dash{ grid-template-columns:repeat(3,1fr); }
  .dash-2{ grid-template-columns:repeat(2,1fr); }
  .dash-span2{ grid-column:span 2; }
}
.dash-card{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.15rem 1.25rem 1.2rem;
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--brand) 4%,var(--panel)));
  box-shadow:var(--glow-soft);
  min-width:0;
}
.dash-card > h3, .dash-card > .dash-h{
  margin:0 0 .2rem; font-size:var(--step-1); font-family:var(--f-display); font-weight:700;
}
.dash-card .dash-sub{ margin:0 0 .9rem; font-size:.85rem; color:var(--ink-2); }
.dash-card .dash-h{ margin-top:.2rem; }
.dash-card .table-wrap{ box-shadow:none; }
/* Charts sit flush inside their card rather than nesting two boxes. */
.dash-card .ocv{ border:0; background:none; box-shadow:none; padding:0; }
.dash-card .mapbox{ height:clamp(300px,34vh,420px); }
.dash-card .wx-hero{ gap:.8rem; }
.dash-card .wx-ico-lg{ font-size:2.6rem; }
.dash-card .wx-big{ font-size:2rem; }
.moonrow{ display:grid; grid-template-columns:1fr; gap:.9rem; align-items:center; }
@media (min-width:520px){ .moonrow{ grid-template-columns:auto 1fr; } }
.moonrow-a{ text-align:center; }
.moonrow-a .moonface{ font-size:3.2rem; }
.moonrow-a h3{ font-size:.98rem; margin:.3rem 0 .1rem; }
.moonrow-a .moon-ill{ font-size:.85rem; }
.moonrow-a .hint{ font-size:.72rem; }
/* The map is the tallest card, so it also spans two rows and the weather
   and sun cards stack beside it instead of leaving a hole in the grid. */
@media (min-width:1400px){
  .dash-span2#map{ grid-column:span 2; grid-row:span 2; }
}
@media (min-width:900px) and (max-width:1399px){
  .dash-span2{ grid-column:span 2; }
}
.dash-card#weather, .dash-card#sun{ align-self:stretch; }
.moonrow-a{ display:flex; flex-direction:column; align-items:center; justify-content:center; }
.moonrow-a .moonface{ font-size:2.8rem; }

/* ------------------------------------------------------------------
   Desktop: nav sits next to the search rather than floating mid-header
   ------------------------------------------------------------------ */
.masthead .mainnav{ margin-left:auto; margin-right:0; }
.masthead .mast-tools{ margin-left:.6rem; }
.btn.searchtoggle, button.searchtoggle{ display:none; }

/* ------------------------------------------------------------------
   Phones and tablets: brand left, controls right, search behind an icon
   ------------------------------------------------------------------ */
@media (max-width:1100px){
  .masthead-in{ flex-wrap:nowrap; }
  .masthead .brand{ margin-right:0; }
  .masthead .mast-tools{ margin-left:auto; gap:6px; }

  .btn.searchtoggle, button.searchtoggle{ display:inline-flex; order:1; }
  .mast-tools [data-theme-toggle]{ order:2; }
  .mast-tools .navtoggle{ order:3; }
  .mast-tools [data-miniclock]{ display:none; }

  /* The field drops below the bar and only when asked for. */
  .navsearch{
    order:4; position:absolute; left:0; right:0; top:100%;
    margin:0; padding:.7rem clamp(1rem,4vw,1.4rem);
    background:var(--panel);
    border-bottom:1px solid var(--line);
    box-shadow:var(--glow-soft);
    display:none; z-index:65;
  }
  .navsearch.is-open{ display:block; }
  .navsearch-in{ width:100%; }
  .navsearch-list{ left:clamp(1rem,4vw,1.4rem); right:clamp(1rem,4vw,1.4rem); width:auto; }
  .searchtoggle[aria-expanded="true"]{
    border-color:var(--brand); color:var(--brand);
    background:color-mix(in srgb, var(--brand) 10%, transparent);
  }
  .masthead{ position:relative; }
}

/* Cards in the same row match height, and their content sits top-aligned
   so a short card does not float its text into the middle. */
.dash-card{ display:flex; flex-direction:column; }
.dash-card > :last-child{ margin-bottom:0; }
.dash-card .table-wrap{ overflow-x:auto; }

/* ------------------------------------------------------------------
   On-page notices, used instead of window.alert() for timers and alarms
   ------------------------------------------------------------------ */
.octoasts{
  position:fixed; z-index:200; right:clamp(.7rem,2vw,1.4rem); bottom:clamp(.7rem,2vw,1.4rem);
  display:flex; flex-direction:column; gap:.6rem; width:min(360px, calc(100vw - 1.6rem));
  pointer-events:none;
}
.octoast{
  pointer-events:auto;
  display:flex; align-items:flex-start; gap:.8rem;
  padding:.9rem 1rem; border-radius:var(--radius);
  background:var(--grad-brand); color:#fff;
  box-shadow:0 14px 40px -14px rgba(0,0,0,.55);
  animation:toastIn .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes toastIn{ from{ opacity:0; transform:translateY(12px) } to{ opacity:1; transform:none } }
.octoast.is-out{ opacity:0; transform:translateY(8px); transition:opacity .22s ease, transform .22s ease; }
.octoast strong{ display:block; font-size:.95rem; }
.octoast p{ margin:.2rem 0 0; font-size:.84rem; opacity:.9; line-height:1.45; }
.octoast-x{
  margin-left:auto; background:transparent; border:0; color:#fff;
  font-size:1.3rem; line-height:1; cursor:pointer; opacity:.75; padding:0 .1rem;
}
.octoast-x:hover{ opacity:1; }

/* ==================================================================
   Homepage clock studio
   ================================================================== */
.studio{
  --studio-accent: var(--c-rose);
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:var(--glow-lift);
  overflow:hidden; margin-top:1.4rem;
}
.studio-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem .9rem; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg, color-mix(in srgb,var(--brand) 7%,var(--panel)), var(--panel));
  flex-wrap:wrap;
}
.studio-mode{ display:flex; gap:4px; }
.sbtn{
  font-family:var(--f-body); font-size:.82rem; font-weight:600;
  padding:.4rem .8rem; border:1px solid var(--line-2); border-radius:999px;
  background:var(--panel); color:var(--ink-2); cursor:pointer;
  transition:all .15s ease;
}
.sbtn:hover{ border-color:var(--brand); color:var(--brand); }
.sbtn[aria-pressed="true"]{ background:var(--grad-brand); border-color:transparent; color:#fff; }
.studio-tools{ display:flex; align-items:center; gap:5px; }
.sicon{
  display:inline-grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--line-2); border-radius:9px;
  background:var(--panel); color:var(--ink-2); cursor:pointer;
  transition:all .15s ease;
}
.sicon:hover{ border-color:var(--brand); color:var(--brand); background:color-mix(in srgb,var(--brand) 8%,transparent); }
.sicon[aria-expanded="true"]{ border-color:var(--brand); color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,transparent); }
.ssize{ min-width:44px; text-align:center; font-size:.76rem; color:var(--rail); }
.studio-div{ width:1px; height:22px; background:var(--line-2); margin:0 .3rem; }

.studio-panel{
  padding:1rem 1.1rem; border-bottom:1px solid var(--line);
  background:var(--panel-2);
  animation:navMenuIn .16s ease;
}
.setgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:1.1rem; }

.bgpick{ display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:8px; }
.bgchip{
  position:relative; height:74px; border-radius:10px; overflow:hidden;
  border:2px solid var(--line-2); cursor:pointer; padding:0;
  display:grid; place-items:end center;
}
/* the live preview sits behind the label */
.bgchip .stage-layer{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.bgchip .stage-layer > *{ pointer-events:none; }
.bgchip-label{
  position:relative; z-index:2; width:100%; padding:.22rem .3rem;
  font-size:.68rem; font-weight:700; color:#fff;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.8));
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}
.bgchip-none{ background:var(--panel-3); }
.bgchip-none .bgchip-label{ color:var(--ink-2); background:none; text-shadow:none; }
.bgchip:hover{ border-color:var(--brand); }
.bgchip[aria-pressed="true"]{ border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 25%,transparent); }

.studio-stage{
  position:relative; overflow:hidden;
  min-height:clamp(320px, 46vh, 520px);
  display:grid; place-items:center;
  background:var(--dial-2);
  padding:1.8rem 1rem;
}
.studio-stage[data-bg="none"]{ background:linear-gradient(160deg,var(--panel),var(--dial-2)); }
.studio-stage:not([data-bg="none"]) .studio-clock{ color:#fff; }
.studio-stage:fullscreen{ min-height:100vh; border-radius:0; }

.studio-clock{
  --scale:1;
  position:relative; z-index:3;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(1.2rem, 4vw, 3.4rem);
  transform:scale(var(--scale)); transform-origin:center;
  transition:transform .18s ease;
  flex-wrap:wrap;
}
.studio[data-view="analog"] .sc-digital{ display:none; }
.studio[data-view="digital"] .sc-analog{ display:none; }

.sc-analog{ width:clamp(180px, 26vw, 300px); flex-shrink:0; }
.sc-analog svg{ display:block; width:100%; height:auto; }
.f-dial{ fill:var(--panel); stroke:currentColor; stroke-width:5; }
.studio-stage:not([data-bg="none"]) .f-dial{ fill:rgba(12,16,28,.55); stroke:#fff; }
.f-tick{ stroke:currentColor; opacity:.55; }
.f-tick-h{ opacity:1; }
.f-num{ fill:currentColor; font-family:var(--f-display); font-weight:700; font-size:30px; }
.f-hand{ stroke:currentColor; stroke-linecap:round; }
.f-hour{ stroke-width:16; }
.f-min{ stroke-width:10; }
.f-sec line{ stroke:var(--studio-accent); stroke-width:3.5; stroke-linecap:round; }
.f-sec circle{ fill:var(--studio-accent); }
.f-cap{ fill:currentColor; }

.sc-digital{ text-align:center; min-width:0; }
.sc-digital .readout{ font-size:clamp(2.6rem, 9vw, 6rem); }
.studio-stage:not([data-bg="none"]) .sc-digital .readout{
  background:linear-gradient(160deg,#fff 26%,#dbe4ff);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.sc-digital .ms{ font-size:.34em; color:var(--rail); margin-left:.12em; font-variant-numeric:tabular-nums; }
.sc-meta{
  margin:.6rem 0 0; font-size:.86rem; color:var(--ink-2);
  display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}
.studio-stage:not([data-bg="none"]) .sc-meta{ color:rgba(255,255,255,.82); }
.sexit{ position:absolute; top:14px; right:14px; z-index:5; }

.studio-foot{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.9rem 1rem; border-top:1px solid var(--line); flex-wrap:wrap;
  background:var(--panel);
}
@media (max-width:760px){
  .studio-bar{ justify-content:center; }
  .studio-clock{ flex-direction:column; gap:1.2rem; }
  .sc-analog{ width:min(58vw,230px); }
  .studio-foot{ justify-content:center; }
}
/* [hidden] loses to .sicon's display rule, so restore it explicitly. */
.sicon[hidden], .sbtn[hidden]{ display:none !important; }

/* Colour swatches were only styled inside the night-light page; the studio
   needs them too, so the rules live here now. */
.swatches{ display:flex; flex-wrap:wrap; gap:8px; }
.swatch{
  width:34px; height:34px; border-radius:50%; border:2px solid var(--line-2);
  cursor:pointer; padding:0; transition:transform .12s ease, border-color .12s ease;
}
.swatch:hover{ transform:scale(1.08); }
.swatch[aria-pressed="true"]{ border-color:var(--ink); transform:scale(1.1); }

/* ---- clock studio: layout tweaks and the font picker ---- */
.studio-head{ max-width:760px; margin-inline:auto; }
.studio-head h1{ margin-bottom:.35rem; }
.studio-head .lede{ margin-inline:auto; }

.studio-left{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.studio-mode{ display:flex; gap:4px; }

.sc-cta{ margin-top:1.1rem; display:flex; justify-content:center; }
.sc-cta .btn{ box-shadow:0 10px 30px -12px rgba(244,63,94,.65); }

.studio-foot{ align-items:center; }
.studio-links{ gap:6px; }
.studio-links .btn{ white-space:nowrap; }

/* the chosen face drives both the digital readout and the analog numerals */
.sc-digital .readout{
  font-family:var(--clock-font, var(--f-mono));
  font-weight:var(--clock-weight, 600);
  letter-spacing:var(--clock-ls, -.02em);
}
.f-num{ font-family:var(--clock-font, var(--f-display)); }

.setgrid-wide{ grid-column:1 / -1; }

.fontchip{
  display:grid; gap:.15rem; padding:.55rem .5rem;
  border:1px solid var(--line-2); border-radius:10px;
  background:var(--panel); cursor:pointer; text-align:center;
  transition:border-color .15s ease, background .15s ease, transform .12s ease;
}
.fontchip:hover{ border-color:var(--brand); transform:translateY(-1px); }
.fontchip[aria-pressed="true"]{
  border-color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,var(--panel));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent);
}
.fc-demo{ font-size:1.35rem; line-height:1.1; color:var(--ink); font-variant-numeric:tabular-nums; }
.fc-name{ font-size:.68rem; color:var(--rail); }
@media (max-width:760px){
  .studio-left{ justify-content:center; width:100%; }
  .studio-links{ justify-content:center; }
}

/* ---- settings panel, reorganised into labelled blocks ---- */
.setwrap{ display:grid; gap:1.1rem; }
.setblock{
  padding:.9rem 1rem 1rem; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel);
}
.setblock-t{
  margin:0 0 .7rem; font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--brand); font-family:var(--f-mono);
}
.setrows{ display:grid; gap:.7rem; }
.setrow{ display:grid; grid-template-columns:112px 1fr; gap:.8rem; align-items:center; }
.setrow-l{ font-size:.82rem; color:var(--rail); font-weight:600; }
@media (max-width:640px){
  .setrow{ grid-template-columns:1fr; gap:.35rem; }
}

.fontpick{ display:grid; grid-template-columns:1fr; gap:1rem; }
.fontgroup-t{
  margin:0 0 .4rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--rail); font-family:var(--f-mono);
}
.fontrow{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; }

/* ---- alarm dialog ---- */
.alarmdlg{
  border:0; padding:0; max-width:min(560px, calc(100vw - 2rem)); width:100%;
  border-radius:var(--radius-lg); background:var(--panel); color:var(--ink);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
}
.alarmdlg::backdrop{ background:rgba(8,12,24,.6); backdrop-filter:blur(3px); }
.alarmdlg-in{ display:flex; flex-direction:column; max-height:min(88vh, 780px); }
.alarmdlg-h{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.3rem .8rem; border-bottom:1px solid var(--line);
}
.alarmdlg-h h2{ margin:.1rem 0 0; font-size:var(--step-2); }
.alarmdlg-b{ padding:1.1rem 1.3rem; overflow-y:auto; }
.alarmdlg-f{
  display:flex; justify-content:flex-end; gap:8px;
  padding:.9rem 1.3rem 1.1rem; border-top:1px solid var(--line);
  background:var(--panel-2);
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
}

/* ---- alarm dialog sits near the top, not centred in the viewport ---- */
.alarmdlg{
  margin-top:clamp(1.2rem, 6vh, 5rem);
  margin-bottom:auto;
  margin-inline:auto;
}
.alarmdlg-in{ max-height:min(84vh, 760px); }

/* the clock faces are alarm triggers too */
.is-clickable{ cursor:pointer; }
.sc-analog.is-clickable svg{ transition:transform .18s ease, filter .18s ease; }
.sc-analog.is-clickable:hover svg{ transform:scale(1.02); }
.sc-digital .readout.is-clickable{
  transition:transform .18s ease, opacity .18s ease;
  transform-origin:center;
  border-radius:12px;
  /* The digits are gradient-clipped text, so scale the element itself
     rather than the font size — that keeps the gradient stable. */
  will-change:transform;
}
.sc-digital .readout.is-clickable:hover{ transform:scale(1.02); opacity:.92; }
.is-clickable:focus-visible{ outline:3px solid var(--brand); outline-offset:6px; border-radius:12px; }

/* ---- hero intro: quieter and smaller than a standard lede ---- */
.hero-intro{
  margin:.55rem auto 0;
  max-width:56ch;
  font-size:clamp(.92rem, 1.05vw, 1rem);
  line-height:1.6;
  color:var(--rail);
  font-weight:400;
}

/* ==================================================================
   Alarm dialog, list and ringing overlay
   ================================================================== */
.presets-tight{ gap:6px; }
.preset-xs{ font-size:.74rem; padding:.28rem .6rem; }

/* big time picker */
.tpick{
  display:flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.9rem 0 .2rem;
}
.tpick-col{ display:flex; flex-direction:column; align-items:center; gap:.2rem; }
.tpick-step{
  border:0; background:transparent; color:var(--rail); cursor:pointer;
  font-size:.7rem; line-height:1; padding:.25rem .5rem; border-radius:6px;
}
.tpick-step:hover{ color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,transparent); }
.tpick-in{
  width:2.4em; padding:.1rem .1rem; text-align:center;
  font-family:var(--f-mono); font-size:clamp(2.4rem,9vw,3.4rem); font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1;
  border:0; border-bottom:2px solid transparent; background:transparent; color:var(--ink);
}
.tpick-in:focus{ outline:none; border-bottom-color:var(--brand); }
.tpick-sep{ font-family:var(--f-mono); font-size:clamp(2rem,7vw,2.8rem); color:var(--rail); padding-bottom:.15em; }
.tpick-mer{ display:flex; flex-direction:column; gap:4px; margin-left:.5rem; }
.tpick-am{
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink-2);
  font-size:.74rem; font-weight:700; padding:.25rem .55rem; border-radius:7px; cursor:pointer;
}
.tpick-am[aria-pressed="true"]{ background:var(--grad-brand); border-color:transparent; color:#fff; }
.tpick-when{
  margin:.1rem 0 1rem; text-align:center; font-size:.85rem; color:var(--brand); font-weight:600;
  min-height:1.2em;
}

.daypick{ display:flex; gap:6px; margin-top:.6rem; flex-wrap:wrap; }
.daybtn{
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-2); background:var(--panel);
  font-weight:700; font-size:.82rem; color:var(--ink-2);
}
.daybtn[aria-pressed="true"]{ background:var(--grad-brand); border-color:transparent; color:#fff; }

.dlgmore{ margin-top:1rem; border:1px solid var(--line); border-radius:var(--radius); }
.dlgmore summary{
  cursor:pointer; padding:.65rem .85rem; font-weight:600; font-size:.9rem;
  list-style:none; color:var(--ink-2);
}
.dlgmore summary::-webkit-details-marker{ display:none; }
.dlgmore summary::after{ content:"\25BE"; float:right; transition:transform .2s ease; }
.dlgmore[open] summary::after{ transform:rotate(180deg); }
.dlgmore-in{ padding:0 .85rem .95rem; }
.tune-row{ display:flex; gap:6px; }
.tune-row .field{ flex:1; min-width:0; }
.range{ width:100%; accent-color:var(--brand); }
.dlgcount{ margin-right:auto; font-size:.8rem; color:var(--rail); }

/* alarm list */
.alarmlist-wrap{ margin-top:1.6rem; }
.alarmlist-bar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  flex-wrap:wrap; margin-bottom:1rem;
}
.alarmlist-next{ margin:.15rem 0 0; font-size:1rem; color:var(--ink); font-weight:600; }
.alarmlist{ display:grid; gap:10px; }
.alarmcard{
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1rem; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:var(--glow-soft);
  transition:opacity .18s ease, border-color .18s ease;
}
.alarmcard.is-off{ opacity:.55; }
.alarmcard.is-snoozed{ border-color:var(--c-amber); }
.al-toggle{
  flex-shrink:0; width:50px; height:29px; border-radius:999px; cursor:pointer;
  border:0; background:var(--line-2); position:relative; transition:background .18s ease;
}
.al-toggle[aria-checked="true"]{ background:var(--grad-go); }
.al-toggle span{
  position:absolute; top:3px; left:3px; width:23px; height:23px; border-radius:50%;
  background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.3); transition:transform .18s ease;
}
.al-toggle[aria-checked="true"] span{ transform:translateX(21px); }
.al-main{ flex:1; min-width:0; }
.al-time{ margin:0; font-size:1.6rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.1; }
.al-meta{ margin:.15rem 0 0; font-size:.82rem; color:var(--ink-2); display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
.al-days{ display:inline-flex; gap:3px; }
.al-days i{
  font-style:normal; width:17px; height:17px; border-radius:50%;
  display:grid; place-items:center; font-size:.6rem; font-weight:700;
  background:var(--panel-3); color:var(--rail);
}
.al-days i.on{ background:var(--brand); color:#fff; }
.al-next{ margin:.2rem 0 0; font-size:.78rem; color:var(--rail); }
.al-acts{ display:flex; gap:5px; flex-shrink:0; }
.alarmempty{
  padding:2rem 1rem; text-align:center; border:1px dashed var(--line-2);
  border-radius:var(--radius-lg); color:var(--ink-2);
}
.alarmempty p{ margin:0 0 .4rem; }
.alarmempty .btn{ margin-top:.8rem; }
@media (max-width:560px){
  .alarmcard{ gap:.7rem; padding:.8rem; }
  .al-time{ font-size:1.35rem; }
}

/* ringing overlay */
.ocring{
  position:fixed; inset:0; z-index:300; display:grid; place-items:center;
  background:rgba(8,12,24,.82); backdrop-filter:blur(6px);
  animation:toastIn .2s ease;
}
.ocring[hidden]{ display:none !important; }
.ocring-box{
  text-align:center; padding:2.2rem 2rem; border-radius:var(--radius-lg);
  background:var(--panel); box-shadow:0 30px 90px -20px rgba(0,0,0,.7);
  width:min(440px, calc(100vw - 2rem));
  /* Pulse the glow rather than the box. Scaling the whole panel makes the
     Stop and Snooze buttons drift under the cursor, which is exactly the
     wrong thing to do to someone half awake reaching for them. */
  animation:ringGlow 1.8s ease-in-out infinite;
}
@keyframes ringGlow{
  0%,100%{ box-shadow:0 30px 90px -20px rgba(0,0,0,.7), 0 0 0 0 rgba(244,63,94,.45); }
  50%    { box-shadow:0 30px 90px -20px rgba(0,0,0,.7), 0 0 0 16px rgba(244,63,94,0); }
}
@media (prefers-reduced-motion: reduce){ .ocring-box{ animation:none; } }
.ocring-eyebrow{
  margin:0; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--c-rose);
}
.ocring-time{ margin:.4rem 0 .2rem; font-size:clamp(2.6rem,11vw,4rem); font-weight:700; }
.ocring-label{ margin:0 0 1.4rem; font-size:1rem; color:var(--ink-2); }
.ocring-acts{ display:flex; gap:10px; justify-content:center; }
.ocring-hint{ margin:1rem 0 0; font-size:.76rem; color:var(--rail); }
body.is-ringing{ overflow:hidden; }

/* ---- scroll-wheel time picker ---- */
.wheel{
  --wheel-item:46px;
  position:relative;
  display:flex; align-items:center; justify-content:center; gap:.35rem;
  padding:.6rem 0 .3rem;
  user-select:none;
}
.wheel-band{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(300px, 92%); height:var(--wheel-item);
  border-radius:12px;
  background:color-mix(in srgb, var(--brand) 12%, transparent);
  border-top:1px solid var(--line-2); border-bottom:1px solid var(--line-2);
  pointer-events:none; z-index:0;
}
.wheel-col{
  position:relative; z-index:1;
  height:calc(var(--wheel-item) * 5);
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 26%,#000 74%,transparent);
  text-align:center; outline:none;
  scroll-behavior:auto;
}
.wheel-col::-webkit-scrollbar{ display:none; }
.wheel-col:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 30%,transparent); border-radius:10px; }
.wheel-pad{ height:calc(var(--wheel-item) * 2); }
.wheel-item{
  height:var(--wheel-item); line-height:var(--wheel-item);
  scroll-snap-align:center; scroll-snap-stop:always;
  font-family:var(--f-mono); font-size:2rem; font-weight:700;
  font-variant-numeric:tabular-nums; color:var(--ink);
  transition:opacity .12s linear, transform .12s linear, color .12s linear;
  cursor:grab;
}
.wheel-item.is-sel{ color:var(--brand); }
.wheel-col{ width:3.1em; }
.wheel-col-mer{ width:3.4em; }
.wheel-col-mer .wheel-item{ font-size:1.15rem; letter-spacing:.06em; }
.wheel-sep{
  z-index:1; font-family:var(--f-mono); font-size:1.9rem; font-weight:700;
  color:var(--rail); padding-bottom:.1em;
}
@media (max-width:480px){
  .wheel{ --wheel-item:42px; }
  .wheel-item{ font-size:1.7rem; }
}

/* ---- wheel affordances ---- */
.wheel-unit{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.wheel-nudge{
  border:1px solid var(--line-2); background:var(--panel); color:var(--rail);
  width:38px; height:22px; border-radius:7px; cursor:pointer; line-height:1;
  font-size:.7rem; display:grid; place-items:center; z-index:2;
  transition:all .14s ease;
}
.wheel-nudge:hover{ border-color:var(--brand); color:var(--brand); background:color-mix(in srgb,var(--brand) 10%,transparent); }
.wheel-nudge:active{ transform:scale(.94); }
.wheel-cap{
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--rail); margin-top:.2rem;
}
.wheel-hint{
  margin:.1rem 0 .2rem; text-align:center; font-size:.76rem; color:var(--rail);
}
.wheel-band{ top:calc(50% - .6rem); }

/* one-time nudge so the column visibly moves on a first visit */
.wheel-col.is-hinting{ animation:wheelHint 1.4s ease-in-out; }
@keyframes wheelHint{
  0%,100%{ transform:translateY(0) }
  25%    { transform:translateY(-9px) }
  60%    { transform:translateY(6px) }
}
@media (prefers-reduced-motion: reduce){ .wheel-col.is-hinting{ animation:none } }

#dlgPresets .preset{ font-size:.78rem; }
#dlgTest{ position:relative; }

/* Keep the dialog compact enough that the presets and wheel are both
   visible without scrolling on a laptop screen. */
.alarmdlg-b{ scroll-behavior:auto; }
.alarmdlg .wheel{ --wheel-item:42px; padding:.35rem 0 .1rem; }
#dlgWheel .wheel-col{ height:calc(var(--wheel-item) * 3); }
#dlgWheel .wheel-pad{ height:var(--wheel-item); }
.alarmdlg .wheel-item{ font-size:1.75rem; }
.alarmdlg .wheel-col-mer .wheel-item{ font-size:1rem; }
.alarmdlg .field-group{ margin-top:.8rem; }
.alarmdlg .label{ margin-bottom:.3rem; }

/* The base sheet sets svg{display:block}, which beats the [hidden]
   attribute, so both preview icons were showing at once. */
/* The base sheet sets svg{display:block}, which beats the [hidden] attribute.
   Scoped to any icon button, not just the dialog's, so a second preview
   control cannot show both icons at once. */
.sicon svg[hidden], button svg[hidden]{ display:none !important; }

/* ==================================================================
   Time dial with an editable centre row.
   Five rows are visible so the column obviously continues past the
   selection, and the middle one is a text input, so the same control
   can be scrolled, nudged or typed into.
   ================================================================== */
.alarmdlg .wheel{ --wheel-item:44px; padding:.5rem 0 .2rem; }
#dlgWheel .wheel-col{ height:calc(var(--wheel-item) * 5); }
#dlgWheel .wheel-pad{ height:calc(var(--wheel-item) * 2); }
.alarmdlg .wheel-item{ font-size:1.6rem; }

.wheel-frame{ position:relative; }
.wheel-edit{
  position:absolute; left:0; right:0;
  top:calc(var(--wheel-item) * 2);
  height:var(--wheel-item);
  width:100%; padding:0; margin:0;
  border:0; background:transparent; text-align:center;
  font-family:var(--f-mono); font-size:1.6rem; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:var(--wheel-item);
  color:var(--brand); cursor:text; z-index:3;
  border-radius:10px;
}
.wheel-edit:focus{
  outline:none;
  background:var(--panel);
  box-shadow:0 0 0 2px var(--brand);
}
/* The input is the visible centre value, so the item beneath it is hidden
   rather than showing the same number twice, slightly offset. */
/* Only columns with a typing overlay hide their selected row — the input
   is the visible value there. Plain wheels must still show theirs. */
.wheel-frame.has-edit .wheel-item.is-sel{ visibility:hidden; }
.wheel-frame.is-editing ~ .wheel-nudge{ border-color:var(--brand); color:var(--brand); }

.wheel-unit-mer{ justify-content:center; gap:6px; }
.wheel-unit-mer .wheel-nudge{
  width:46px; height:32px; font-size:.78rem; font-weight:700;
  font-family:var(--f-mono);
}
.wheel-unit-mer .wheel-nudge[aria-pressed="true"]{
  background:var(--grad-brand); border-color:transparent; color:#fff;
}
.wheel-mer-gap{ height:4px; }

.alarmdlg .wheel-band{
  top:calc(50% - .6rem);
  height:var(--wheel-item);
}
/* Line the AM/PM pair up with the selection band, and sit every caption on
   the same baseline as HOUR and MINUTE. */
.alarmdlg .wheel{ align-items:stretch; }
.wheel-unit{ justify-content:flex-start; }
/* Centre the pair on the selection band: two rows of nudge height sit
   above the band, so push the buttons down by that much. */
.wheel-unit-mer{
  justify-content:flex-start;
  padding-top:calc(var(--wheel-item) * 2 + 22px - 17px);
}
.wheel-unit-mer .wheel-cap{ margin-top:auto; }
.wheel-cap{ margin-top:.25rem; }
.alarmdlg .wheel-sep{ align-self:center; margin-bottom:1.6rem; }

/* The selection band should sit behind the hour and minute columns only —
   it was running underneath the AM/PM buttons and tinting them. */
.alarmdlg .wheel-band{
  left:auto; right:auto; transform:none;
  width:auto; inset-inline:0;
}
.alarmdlg .wheel{ position:relative; }
.alarmdlg .wheel-band{
  position:absolute;
  top:calc(50% - .6rem); transform:translateY(-50%);
  left:0; width:var(--band-w, 100%);
}

/* Scrolling the dial must not chain into the dialog body, and scrolling the
   dialog must not drag the dial. Each keeps its own gesture. */
.wheel-col{ overscroll-behavior:contain; touch-action:pan-y; }
.wheel-edit{ overscroll-behavior:contain; touch-action:pan-y; }
.alarmdlg-b{ overscroll-behavior:contain; }
/* Give the band room to wrap the minute column before the AM/PM buttons. */
.wheel-unit-mer{ margin-left:1.1rem; }

/* ==================================================================
   Compact alarm dialog
   ================================================================== */
.alarmdlg{ max-width:min(400px, calc(100vw - 2rem)); }
.alarmdlg-h{ padding:.9rem 1.1rem .7rem; align-items:center; }
.alarmdlg-h h2{ margin:0; font-size:1.15rem; }
.alarmdlg-b{ padding:.9rem 1.1rem 1rem; }
.alarmdlg-f{ padding:.75rem 1.1rem .9rem; }

.fmtrow{ display:flex; justify-content:flex-end; }
.fmtswap{ display:flex; gap:3px; }
.fmtbtn{
  border:1px solid var(--line-2); background:var(--panel); color:var(--rail);
  font-family:var(--f-mono); font-size:.68rem; font-weight:700;
  padding:.2rem .5rem; border-radius:999px; cursor:pointer;
}
.fmtbtn[aria-pressed="true"]{ background:var(--grad-brand); border-color:transparent; color:#fff; }

/* three rows, not five */
.alarmdlg .wheel{ --wheel-item:40px; padding:.3rem 0 .1rem; gap:.3rem; }
#dlgWheel .wheel-col{ height:calc(var(--wheel-item) * 3); }
#dlgWheel .wheel-pad{ height:var(--wheel-item); }
.alarmdlg .wheel-item{ font-size:1.5rem; }
.alarmdlg .wheel-edit{ font-size:1.5rem; }
.alarmdlg .wheel-band{ top:50%; }
.alarmdlg .wheel-sep{ font-size:1.4rem; margin-bottom:0; align-self:center; }

.wheel-unit-mer{ flex-direction:column; gap:4px; margin-left:.8rem; justify-content:center; padding-top:0; }
.merbtn{
  border:1px solid var(--line-2); background:var(--panel); color:var(--ink-2);
  font-family:var(--f-mono); font-size:.7rem; font-weight:700;
  width:42px; padding:.22rem 0; border-radius:7px; cursor:pointer;
}
.merbtn[aria-pressed="true"]{ background:var(--grad-brand); border-color:transparent; color:#fff; }

.alarmdlg .tpick-when{ margin:.35rem 0 .8rem; font-size:.8rem; }

.drow{ margin-bottom:.75rem; }
.drow .label{ margin-bottom:.25rem; }
.drow-switch{ display:flex; align-items:center; justify-content:space-between; }
.drow-switch .label{ margin:0; }

.clearfield{ position:relative; }
.clearfield .field{ padding-right:2.1rem; }
.clearbtn{
  position:absolute; right:.45rem; top:50%; transform:translateY(-50%);
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:0; background:var(--panel-3); color:var(--rail);
  display:grid; place-items:center;
}
.clearbtn:hover{ background:var(--c-rose); color:#fff; }

.snoozewrap{ margin:-.2rem 0 .8rem; }
.wheel-mini{ --wheel-item:34px; padding:0; }
.wheel-mini .wheel-col{ height:calc(var(--wheel-item) * 3); width:auto; }
.wheel-mini .wheel-pad{ height:var(--wheel-item); }
.wheel-mini .wheel-item{
  font-family:var(--f-body); font-size:.92rem; font-weight:600;
  line-height:var(--wheel-item); height:var(--wheel-item);
}
.wheel-mini .wheel-band{ left:0 !important; width:100% !important; height:var(--wheel-item); }
.wheel-mini .wheel-unit{ width:100%; }
.wheel-mini .wheel-frame{ width:100%; }

.alarmdlg .status{ margin-top:.2rem; font-size:.8rem; }
.alarmdlg .status[hidden]{ display:none !important; }

/* ---- compact dialog: centred title, 5-row dial, boxed snooze, confirmation ---- */
.alarmdlg-h{ position:relative; justify-content:center; text-align:center; }
.alarmdlg-h h2{ margin:0; }
.dlg-x{ position:absolute; right:1.1rem; top:50%; transform:translateY(-50%); }

/* Five rows: the extra pair top and bottom fills the space and makes the
   column read as something that continues past the selection. */
#dlgWheel .wheel-col{ height:calc(var(--wheel-item) * 5); }
#dlgWheel .wheel-pad{ height:calc(var(--wheel-item) * 2); }

.snoozebox{
  border:1px solid var(--line-2); border-radius:var(--radius-sm);
  background:var(--panel-2); overflow:hidden;
}
.snoozebox .wheel-mini{ --wheel-item:32px; }
.snoozebox .wheel-mini .wheel-col{ height:calc(var(--wheel-item) * 3); }
.snoozebox .wheel-mini .wheel-band{
  background:color-mix(in srgb, var(--brand) 14%, transparent);
  border-radius:0;
}

.savedbox{
  margin-top:.9rem; padding:.8rem .9rem;
  border:1px solid var(--line-2); border-radius:var(--radius);
  background:var(--panel-2);
}
.savedbox-perm{ margin:0 0 .5rem; font-size:.8rem; line-height:1.45; }
.savedbox-perm.is-ok{ color:var(--go); }
.savedbox-perm.is-warn{ color:var(--c-amber); }
.savedbox-perm.is-stop{ color:var(--c-rose); font-weight:600; }
.savedbox-alarm{
  margin:0; padding-top:.5rem; border-top:1px solid var(--line);
  font-size:.9rem; color:var(--ink);
}
.savedbox-in{ font-size:.78rem; color:var(--rail); }
.alarmdlg .status[hidden], .savedbox[hidden]{ display:none !important; }
.alarmdlg-f .btn[hidden]{ display:none !important; }
.ocring-acts .btn[hidden]{ display:none !important; }

/* ---- dialog: header controls, two columns on desktop ---- */
.alarmdlg-h{
  display:grid; grid-template-columns:34px 1fr 34px; align-items:center; gap:.6rem;
}
.alarmdlg-h h2{ text-align:center; }
.dlg-x, .dlg-ok{ position:static; transform:none; }
.dlg-ok{ border-color:var(--go); color:var(--go); }
.dlg-ok:hover{ background:color-mix(in srgb, var(--go) 14%, transparent); border-color:var(--go); color:var(--go); }
.dlg-ok.is-done{ background:var(--grad-go); border-color:transparent; color:#fff; }

.fmtrow{ justify-content:flex-start; }

.btn-block{ width:100%; justify-content:center; }
.dlg-fasthint{ text-align:center; margin:.45rem 0 0; font-size:.72rem; }

.snoozeopts{ display:flex; flex-wrap:wrap; gap:5px; }
.snoozeopts .preset{ font-size:.75rem; padding:.28rem .55rem; }

.dlgcols{ display:grid; grid-template-columns:1fr; gap:1rem; }
@media (min-width:680px){
  .alarmdlg{ max-width:min(720px, calc(100vw - 2rem)); }
  .dlgcols{ grid-template-columns:1fr 1fr; gap:1.6rem; align-items:start; }
  .dlgcol-time{
    padding-right:1.4rem; border-right:1px solid var(--line);
    display:flex; flex-direction:column; justify-content:center;
  }
  .alarmdlg .wheel{ --wheel-item:46px; }
  .alarmdlg .wheel-item{ font-size:1.7rem; }
  .alarmdlg .wheel-edit{ font-size:1.7rem; }
  .dlgcol-opts .drow:first-child{ margin-top:0; }
}

/* ---- notification recovery instructions ---- */
.permfix{
  margin:.7rem 0; padding:.7rem .8rem;
  border:1px solid color-mix(in srgb, var(--c-rose) 45%, var(--line-2));
  border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--c-rose) 8%, transparent);
}
.permfix[hidden]{ display:none !important; }
.permfix-t{ margin:0 0 .4rem; font-size:.78rem; font-weight:700; color:var(--ink); }
.permfix-steps{ margin:0 0 .6rem; padding-left:1.1rem; font-size:.78rem; line-height:1.6; color:var(--ink-2); }
.permfix-steps li{ margin:0; }
.savedbox-tip{ margin:.5rem 0 0; font-size:.76rem; color:var(--rail); line-height:1.5; }
.savedbox-tip[hidden]{ display:none !important; }

/* ---- alarms under the clock ---- */
.studio-alarms{
  margin-top:1rem; padding:1rem 1.1rem 1.1rem;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--panel);
}
.studio-alarms[hidden]{ display:none !important; }
.studio-alarms-h{ margin-bottom:.8rem; }
.studio-alarms-next{ margin:.15rem 0 0; font-size:.95rem; font-weight:600; color:var(--ink); }

/* ---- inline alarm form ---- */
.alarmform{
  margin-top:1.4rem; padding:1.1rem 1.2rem 1.2rem;
  border:1px solid var(--line-2); border-radius:var(--radius-lg);
  background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--brand) 4%,var(--panel)));
  box-shadow:var(--glow-soft);
}
.alarmform-grid{
  display:grid; grid-template-columns:1fr; gap:.9rem;
}
@media (min-width:620px){
  .alarmform-grid{ grid-template-columns:repeat(3,1fr); }
}
@media (min-width:980px){
  .alarmform-grid{ grid-template-columns:repeat(6,1fr); align-items:end; }
}
.alarmform .field-group{ margin:0; }
.alarmform-go .btn{ width:100%; }
.alarmform .hint{ margin:.7rem 0 0; }
.alarmform .status[hidden]{ display:none !important; }
.alarmform .status{ margin-top:.7rem; }

/* ---- site-wide search dropdown ----
   Names only, laid out in columns, so the panel stays short enough to read
   at a glance instead of scrolling as one long list. */
.navsearch-list{
  width:min(640px, 94vw); padding:.6rem;
  max-height:min(66vh, 460px);
}
.ns-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:.4rem 1rem;
  align-items:start;
}
@media (min-width:1180px){
  .navsearch-list{ width:min(760px, 94vw); }
  .ns-grid{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:640px){
  .navsearch-list{ width:auto; }
  .ns-grid{ grid-template-columns:1fr; }
}
.ns-group{ min-width:0; margin-bottom:.5rem; }
.ns-head{
  display:flex; align-items:center; gap:.35rem;
  margin:0 0 .2rem; padding:.25rem .5rem;
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--rail);
  border-bottom:1px solid var(--line);
}
.ns-head span{ font-size:.85rem; }
.ns-item{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  padding:.32rem .5rem; border-radius:var(--radius-sm);
  text-decoration:none; min-width:0;
}
.ns-item.is-active, .ns-item:hover{ background:color-mix(in srgb,var(--brand) 13%,transparent); }
.ns-name{
  font-weight:600; font-size:.84rem; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.ns-time{ font-size:.74rem; font-weight:600; color:var(--brand); flex-shrink:0; }
.ns-empty, .ns-tip{ margin:0; padding:.5rem .6rem; font-size:.74rem; color:var(--rail); }
.ns-tip{ border-top:1px solid var(--line); margin-top:.35rem; }
/* skipped alarms read differently from off ones */
.alarmcard.is-skipped{ border-color:var(--c-cyan); }
.alarmcard.is-skipped .al-next{ color:var(--c-cyan); }
/* Five actions need room; below 560px they wrap into a compact block. */
.al-acts{ flex-wrap:wrap; justify-content:flex-end; max-width:none; gap:4px; }
.al-acts .sicon{ width:30px; height:30px; }
@media (max-width:560px){
  .al-acts{ max-width:100px; }
  .al-acts .sicon{ width:28px; height:28px; }
}
#alBulkStatus[hidden]{ display:none !important; }
.panel-link{ text-decoration:none; display:block; transition:border-color .16s ease, transform .16s ease; }
.panel-link:hover{ border-color:var(--brand); transform:translateY(-2px); }

/* ---- place search: suggestions as cards, results fully clickable ---- */
.locsuggest{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:8px; padding:.55rem;
}
.locsuggest li.lsug{
  display:grid; grid-template-columns:1fr auto; gap:.1rem .6rem;
  padding:.6rem .7rem; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--panel); cursor:pointer;
  transition:border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.locsuggest li.lsug:hover, .locsuggest li.lsug.is-active{
  border-color:var(--brand); transform:translateY(-1px); box-shadow:var(--glow-soft);
  background:var(--panel);
}
.lsug-name{ font-weight:700; font-size:.92rem; color:var(--ink); }
.lsug-sub{ grid-column:1; font-size:.74rem; color:var(--rail); }
.lsug-time{
  grid-row:1 / span 2; align-self:center;
  font-size:.86rem; font-weight:600; color:var(--brand);
}
@media (max-width:520px){
  .locsuggest{ grid-template-columns:1fr; }
}

/* the whole result card is the link */
.loccard.is-linked{ cursor:pointer; }
.loccard.is-linked:hover{
  border-color:var(--brand); transform:translateY(-3px);
  box-shadow:var(--glow-lift);
}
.loccard.is-linked:focus-visible{ outline:3px solid var(--brand); outline-offset:3px; }
.loccard{ transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.loccard .card-go{
  display:inline-block; margin-top:.8rem; font-size:.82rem;
  font-weight:600; color:var(--brand);
}
.loccard.is-linked:hover .card-go{ text-decoration:underline; }
/* small add-to-compare control on a suggestion row */
.lsug{ position:relative; }
.lsug-add{
  position:absolute; right:6px; bottom:6px;
  width:22px; height:22px; border-radius:50%; cursor:pointer;
  border:1px solid var(--line-2); background:var(--panel-2); color:var(--rail);
  font-size:.9rem; line-height:1; display:grid; place-items:center; padding:0;
  opacity:0; transition:opacity .14s ease, background .14s ease, color .14s ease;
}
.lsug:hover .lsug-add, .lsug.is-active .lsug-add, .lsug-add:focus-visible{ opacity:1; }
.lsug-add:hover{ background:var(--brand); border-color:transparent; color:#fff; }
/* Full screen is for reading the clock across a room, so the controls that
   belong to the page go away — the Set Alarm button included. */
.studio.is-fs .sc-cta{ display:none; }

/* ---- mobile: one column, with Set Alarm sitting between Repeat and Ringtone.
   Flattening the two columns with display:contents lets every field become a
   direct child of the dialog body, so the order can be set field by field
   rather than being fixed by which column the markup put it in. ---- */
@media (max-width:679px){
  .alarmdlg-b{ display:flex; flex-direction:column; }
  .dlgcols, .dlgcol{ display:contents; }

  .fmtrow{ order:1; }
  #dlgWheel{ order:2; }
  .dialwrap{ order:2; }        /* sits where the wheel does, not above it */
  #dlgWhen{ order:3; }
  .drow[data-row="label"]{ order:4; }
  .drow[data-row="repeat"]{ order:5; }
  .saverow{ order:6; margin:.4rem 0 1rem; }
  .drow[data-row="tune"]{ order:7; }
  .drow[data-row="vol"]{ order:8; }
  .drow[data-row="snooze"]{ order:9; }
  .snoozewrap{ order:10; }
  #dlgStatus{ order:11; }
  #dlgSaved{ order:12; }
}

/* ---- search: horizontal quick-access strip ---- */
.ns-quick{
  display:flex; gap:6px; overflow-x:auto; overflow-y:hidden;
  padding:.15rem .1rem .6rem; margin-bottom:.5rem;
  border-bottom:1px solid var(--line);
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.ns-quick::-webkit-scrollbar{ display:none; }
.ns-qchip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:.35rem;
  padding:.4rem .7rem; border-radius:999px; white-space:nowrap;
  border:1px solid var(--line-2); background:var(--panel-2);
  font-size:.8rem; font-weight:600; color:var(--ink); text-decoration:none;
  transition:border-color .14s ease, background .14s ease, transform .12s ease;
}
.ns-qchip span{ font-size:.9rem; line-height:1; }
.ns-qchip:hover, .ns-qchip:focus-visible{
  border-color:var(--brand); background:color-mix(in srgb,var(--brand) 12%,transparent);
  transform:translateY(-1px);
}

/* "add another alarm" under the list */
.addmore{
  display:flex; align-items:center; justify-content:center;
  width:100%; margin-top:10px; padding:.55rem 1rem;
  border:1px dashed var(--line-2); border-radius:var(--radius-lg);
  background:transparent; color:var(--ink-2); cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
/* The plus alone carries the meaning here; the accessible name is on the
   button, so screen readers still get the full description. */
.addmore span{ font-size:1.5rem; line-height:1; font-weight:800; }
.addmore:hover{
  border-color:var(--brand); color:var(--brand);
  background:color-mix(in srgb,var(--brand) 7%,transparent);
}

/* ================= clock-face time picker ================= */
.fmtrow{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.dialbtn{
  display:grid; place-items:center; width:30px; height:26px;
  border:1px solid var(--line-2); border-radius:8px;
  background:var(--panel); color:var(--rail); cursor:pointer;
  transition:all .14s ease;
}
.dialbtn:hover{ border-color:var(--brand); color:var(--brand); }
.dialbtn[aria-pressed="true"]{ background:var(--grad-brand); border-color:transparent; color:#fff; }

.dialwrap[hidden]{ display:none !important; }
/* .wheel is display:flex, which beats the hidden attribute on its own. */
#dlgWheel[hidden]{ display:none !important; }
.dialwrap{ display:flex; flex-direction:column; align-items:center; padding-top:.4rem; }

.dial-readout{ display:flex; align-items:center; gap:.3rem; margin-bottom:.6rem; }
.dial-seg{
  font-family:var(--f-mono); font-size:1.7rem; font-weight:700;
  padding:.1rem .45rem; border-radius:8px; cursor:pointer;
  border:1px solid transparent; background:transparent; color:var(--ink-2);
}
.dial-seg[aria-pressed="true"]{
  background:color-mix(in srgb,var(--brand) 14%,transparent);
  border-color:color-mix(in srgb,var(--brand) 40%,transparent); color:var(--brand);
}
.dial-colon{ font-family:var(--f-mono); font-size:1.5rem; color:var(--rail); }
.dial-mer{ display:flex; flex-direction:column; gap:3px; margin-left:.4rem; }

.dial{
  position:relative; width:min(260px, 78vw); aspect-ratio:1;
  touch-action:none; cursor:pointer; user-select:none;
  color:var(--ink);                 /* the face borrows currentColor, as the studio clock does */
}
.dial.is-dragging{ cursor:grabbing; }
.dial-svg{ display:block; width:100%; height:auto; overflow:visible; }

/* .f-dial, .f-tick, .f-num, .f-cap and .f-hand come from the studio clock,
   so the two faces stay identical without a second set of rules. */
.dial .f-num{
  font-size:30px; pointer-events:none;
  /* Falls back to the display face on pages with no clock studio. */
  font-family:var(--clock-font, var(--f-display));
}
.dial .f-num.is-inner{ font-size:23px; opacity:.6; }
.dial .f-num.is-on{ fill:#fff; }
.dial .f-min{ stroke:var(--brand); stroke-width:9; }
.dial .f-cap{ fill:var(--brand); }
.dial-knob{
  fill:color-mix(in srgb,var(--brand) 26%,transparent);
  stroke:var(--brand); stroke-width:3;
}
.dial-hint{ margin:.6rem 0 0; font-size:.76rem; color:var(--rail); text-align:center; }

/* ---- "where to click" illustrations in the notification panel ---- */
.permshots{ display:grid; gap:.7rem; margin:.2rem 0 .8rem; }
.permshots figure{ margin:0; }
.permshots img{
  display:block; width:100%; height:auto;
  border:1px solid var(--line-2); border-radius:8px; background:#f1f3f4;
}
.permshots figcaption{
  margin-top:.28rem; font-size:.72rem; color:var(--rail); line-height:1.4;
}
@media (min-width:680px){
  .permshots{ grid-template-columns:1fr 1fr; gap:.8rem; }
}