/* ════════════════════════════════════════════════════════════════════
   World Clock widget — core/world-clock.css
   Vanilla port of the standalone Next.js WorldClock app. EVERY selector
   is scoped under .dl-wclock (the #dlWClock mount div carries the state
   classes the original put on .world-clock-app). All @keyframes carry a
   wc- prefix so nothing collides with the 22 other tools on this page.
   The widget is self-lit: every colour/background is explicit, so it
   renders identically under the suite's light and dark themes.
   ════════════════════════════════════════════════════════════════════ */

/* ── Root: placement + design tokens (shadow the suite vars inside the
      widget subtree only — original :root + .world-clock-app merged) ── */
.dl-wclock {
  --ink: #071018;
  --panel: #0a141f;
  --panel-2: #101e2c;
  --card: #142433;
  --text: #f6faff;
  --muted: #91a1b5;
  --line: rgba(255, 255, 255, 0.1);
  --cyan: #4dd6ff;
  --violet: #8b7cff;
  --amber: #ffcb66;
  --lime: #a9f58c;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --strip-height: 64px;
  --widget-accent: #4dd6ff;
  --quick-panel: rgba(6, 16, 25, 0.96);
  --quick-card: rgba(255, 255, 255, 0.045);
  --quick-card-hover: rgba(255, 255, 255, 0.08);
  --quick-line: rgba(255, 255, 255, 0.12);
  --quick-text: #f3f9fc;
  --quick-muted: #7e94a5;
  --wc-top: 70px; /* clears the fixed site navbar; drops to 10px when the header is hidden */
  position: sticky;
  top: var(--wc-top);
  z-index: 46;
  margin: 0 14px 16px;
  display: block;
  color: var(--text);
  font-family: 'Montserrat', "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

.dl-wclock:empty { display: none; }

@media (max-width: 1099px) {
  .dl-wclock { position: static; margin: 0 10px 14px; }
}

/* Site header hidden (Pro "more vertical space") → no 70px navbar to clear,
   so pin near the top like the left rail does, or content shows through the gap. */
body.head-hidden .dl-wclock { --wc-top: 10px; }

.dl-wclock,
.dl-wclock *,
.dl-wclock *::before,
.dl-wclock *::after { box-sizing: border-box; }

.dl-wclock button,
.dl-wclock input {
  margin: 0;
  font: inherit;
}

.dl-wclock button,
.dl-wclock a { -webkit-tap-highlight-color: transparent; }

.dl-wclock button {
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.dl-wclock button:focus-visible,
.dl-wclock a:focus-visible,
.dl-wclock input:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.dl-wclock button:disabled { cursor: not-allowed; }

.dl-wclock ::selection { background: rgba(77, 214, 255, 0.25); }

.dl-wclock .sr-status {
  position: fixed;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Root state: home daylight flips the shared palette */
.dl-wclock.home-is-day {
  --text: #102936;
  --muted: #506e7d;
  --line: rgba(15, 51, 67, 0.14);
  --quick-panel: rgba(246, 251, 250, 0.97);
  --quick-card: rgba(18, 68, 85, 0.055);
  --quick-card-hover: rgba(22, 110, 137, 0.1);
  --quick-line: rgba(17, 67, 84, 0.15);
  --quick-text: #153642;
  --quick-muted: #617d87;
}

.dl-wclock.weather-clear { --widget-accent: #ffcb66; }
.dl-wclock.weather-clouds { --widget-accent: #76d4eb; }
.dl-wclock.weather-rain { --widget-accent: #64b9ff; }
.dl-wclock.weather-snow { --widget-accent: #a9e9ff; }
.dl-wclock.weather-storm { --widget-accent: #9a8cff; }
.dl-wclock.weather-fog { --widget-accent: #a5c7cf; }

/* ── Dock (positioning anchor for the drop-down panel; keeps working
      when the root goes position:static below 1100px) ── */
.dl-wclock .clock-dock {
  position: relative;
  z-index: 46;
  color: var(--text);
}

.dl-wclock .clock-strip {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 16px);
  min-height: var(--strip-height);
  padding: 0 clamp(14px, 2.4vw, 34px);
  overflow: visible;
  background:
    radial-gradient(circle at 13% 0%, rgba(77, 214, 255, 0.13), transparent 28%),
    radial-gradient(circle at 72% 160%, rgba(139, 124, 255, 0.12), transparent 34%),
    linear-gradient(96deg, #071018 0%, #0a1520 55%, #071018 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  box-shadow: 0 12px 42px rgba(1, 7, 12, 0.2);
  transition: color 700ms var(--ease-out), background 900ms var(--ease-out), border-color 700ms var(--ease-out), box-shadow 700ms var(--ease-out);
}

.dl-wclock.clock-is-open .clock-strip { border-radius: 14px 14px 0 0; }

.dl-wclock .strip-ambient::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.32;
  background-image: linear-gradient(115deg, transparent 20%, rgba(255, 255, 255, 0.035) 38%, transparent 55%);
  transform: translateX(-70%);
  animation: wc-rail-shimmer 11s var(--ease-out) infinite;
}

.dl-wclock .strip-cal-wrap,
.dl-wclock .strip-weather,
.dl-wclock .clock-style-control,
.dl-wclock .strip-toggle,
.dl-wclock .time-strip {
  position: relative;
  z-index: 1;
}
/* world-clocks pill sits at the far right; everything else clusters left */
.dl-wclock .strip-toggle { margin-left: auto; }
/* soundscape parked for now (kept in DOM, hidden) */
.dl-wclock soundscape-widget { display: none !important; }

.dl-wclock .panel-footnote i {
  position: relative;
  width: 6px;
  height: 6px;
  background: var(--lime);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(169, 245, 140, 0.09), 0 0 14px rgba(169, 245, 140, 0.7);
}

.dl-wclock .strip-cal-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}
/* day-step arrows flanking the calendar pill — shown ONLY in Workspace (root .pm-active) */
.dl-wclock .strip-cal-nav {
  display: none;
  width: 28px;
  height: 42px;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  color: #cfe3f0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
}
.dl-wclock .strip-cal-wrap.pm-active .strip-cal-nav { display: inline-flex; }
.dl-wclock .strip-cal-nav:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(77, 214, 255, 0.35); }
.dl-wclock .strip-cal-nav:active { transform: translateY(1px); }
.dl-wclock.home-is-day .strip-cal-nav { color: #17475c; background: rgba(255, 255, 255, 0.55); border-color: rgba(28, 139, 173, 0.22); }
.dl-wclock.home-is-day .strip-cal-nav:hover { background: rgba(255, 255, 255, 0.78); border-color: rgba(28, 139, 173, 0.4); }

.dl-wclock .location-pulse {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  background: rgba(77, 214, 255, 0.08);
  border: 1px solid rgba(77, 214, 255, 0.17);
  border-radius: 50%;
}

.dl-wclock .location-pulse::before,
.dl-wclock .location-pulse::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(77, 214, 255, 0.16);
  border-radius: 50%;
}

.dl-wclock .location-pulse::before { inset: 4px; }
.dl-wclock .location-pulse::after { inset: 8px; }
.dl-wclock .location-pulse i { width: 3px; height: 3px; background: var(--cyan); border-radius: 50%; box-shadow: 0 0 9px var(--cyan); }

.dl-wclock .strip-place {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
}

.dl-wclock .strip-place b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: #9fb4c6;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-wclock .strip-place b::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 7px var(--cyan);
}

.dl-wclock .strip-place small {
  color: #76889a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.dl-wclock .time-display {
  display: inline-flex;
  align-items: baseline;
  color: #f8fbff;
  font-family: "SFMono-Regular", "Roboto Mono", Consolas, "Liberation Mono", monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.075em;
  white-space: nowrap;
}

.dl-wclock .time-visual {
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
}

.dl-wclock .time-display b {
  color: rgba(255, 255, 255, 0.45);
  font-weight: inherit;
  animation: wc-colon-blink 2s steps(1, end) infinite;
}

/* AM/PM: the two letters stack vertically (upright), which frees them to be
   ~80% larger than the old inline tag without widening the clock. */
.dl-wclock .time-display em {
  margin-left: 0.3em;
  color: rgba(255, 255, 255, 0.68);
  font-family: 'Montserrat', "Avenir Next", sans-serif;
  font-size: 0.45em;
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

/* ── Flip clock colour themes ── */
.dl-wclock .flip-theme-pure-dark {
  --flip-card: #000;
  --flip-top: #050505;
  --flip-bottom: #000;
  --flip-ink: #fff;
  --flip-border: #151515;
  --flip-seam: #181818;
  --flip-colon: #ccc;
  --flip-highlight: rgba(255, 255, 255, 0.08);
  --flip-shadow: rgba(0, 0, 0, 0.44);
}

.dl-wclock .flip-theme-dark {
  --flip-card: #000;
  --flip-top: #101111;
  --flip-bottom: #080909;
  --flip-ink: #ccc;
  --flip-border: #1c1c1c;
  --flip-seam: #252626;
  --flip-colon: #777;
  --flip-highlight: rgba(255, 255, 255, 0.07);
  --flip-shadow: rgba(0, 0, 0, 0.38);
}

.dl-wclock .flip-theme-light {
  --flip-card: #f8f9fa;
  --flip-top: #f8f9fa;
  --flip-bottom: #eceef0;
  --flip-ink: #1c1c1c;
  --flip-border: #e5e5e5;
  --flip-seam: #cfd4da;
  --flip-colon: #666;
  --flip-highlight: rgba(255, 255, 255, 0.72);
  --flip-shadow: rgba(0, 0, 0, 0.16);
}

.dl-wclock .flip-theme-green {
  --flip-card: #1b1f1a;
  --flip-top: #222820;
  --flip-bottom: #171b16;
  --flip-ink: #cceac4;
  --flip-border: #2a342a;
  --flip-seam: #344034;
  --flip-colon: #cceac4;
  --flip-highlight: rgba(204, 234, 196, 0.08);
  --flip-shadow: rgba(4, 8, 3, 0.4);
}

.dl-wclock .flip-theme-blue {
  --flip-card: #1b1c20;
  --flip-top: #22242a;
  --flip-bottom: #17181d;
  --flip-ink: #c6c9f5;
  --flip-border: #2a2b30;
  --flip-seam: #363843;
  --flip-colon: #c6c9f5;
  --flip-highlight: rgba(198, 201, 245, 0.08);
  --flip-shadow: rgba(3, 4, 9, 0.4);
}

.dl-wclock .flip-theme-red {
  --flip-card: #261e1e;
  --flip-top: #302424;
  --flip-bottom: #211919;
  --flip-ink: #dd6d6a;
  --flip-border: #3a2e2e;
  --flip-seam: #483333;
  --flip-colon: #dd6d6a;
  --flip-highlight: rgba(221, 109, 106, 0.08);
  --flip-shadow: rgba(12, 3, 3, 0.38);
}

.dl-wclock .flip-theme-orange {
  --flip-card: #211e18;
  --flip-top: #2a261d;
  --flip-bottom: #1c1913;
  --flip-ink: #f2ae55;
  --flip-border: #2f2c28;
  --flip-seam: #443a29;
  --flip-colon: #f2ae55;
  --flip-highlight: rgba(242, 174, 85, 0.09);
  --flip-shadow: rgba(8, 5, 1, 0.38);
}

.dl-wclock .flip-theme-yellow {
  --flip-card: #14161a;
  --flip-top: #1d2025;
  --flip-bottom: #101216;
  --flip-ink: #f8d568;
  --flip-border: #24262a;
  --flip-seam: #37382e;
  --flip-colon: #f8d568;
  --flip-highlight: rgba(248, 213, 104, 0.08);
  --flip-shadow: rgba(2, 3, 6, 0.4);
}

.dl-wclock .flip-theme-purple {
  --flip-card: #211d23;
  --flip-top: #2a242d;
  --flip-bottom: #1b181e;
  --flip-ink: #dfcfeb;
  --flip-border: #312d33;
  --flip-seam: #413946;
  --flip-colon: #dfcfeb;
  --flip-highlight: rgba(223, 207, 235, 0.08);
  --flip-shadow: rgba(6, 2, 8, 0.4);
}

.dl-wclock .flip-theme-pink {
  --flip-card: #f0c1ce;
  --flip-top: #f4cad5;
  --flip-bottom: #e8b7c4;
  --flip-ink: #fff;
  --flip-border: #e6b1be;
  --flip-seam: #d89dac;
  --flip-colon: #fff;
  --flip-highlight: rgba(255, 255, 255, 0.42);
  --flip-shadow: rgba(81, 31, 48, 0.2);
}

.dl-wclock .clock-renderer-flip {
  perspective: 1200px;
  letter-spacing: 0;
}

.dl-wclock .clock-renderer-flip .time-visual {
  align-items: center;
  gap: 0.1em;
}

.dl-wclock .flip-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
}

.dl-wclock .flip-digit {
  position: relative;
  display: inline-block;
  width: 1.3em;
  min-width: 1.3em;
  height: 1.6em;
  overflow: hidden;
  color: var(--flip-ink, #1c1c1c);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  font-size: 1em;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  line-height: 1;
  text-shadow: 0 1px var(--flip-highlight, rgba(255, 255, 255, 0.16));
  background: var(--flip-card, #f8f9fa);
  border: 1px solid var(--flip-border, #e5e5e5);
  border-radius: 0.075em;
  box-shadow: 0 0.045em 0.1em var(--flip-shadow, rgba(0, 0, 0, 0.14)), inset 0 1px var(--flip-highlight, rgba(255, 255, 255, 0.62));
  transform-style: preserve-3d;
}

.dl-wclock .flip-digit::before {
  position: absolute;
  z-index: 5;
  top: calc(50% - 0.5px);
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--flip-seam, #cfd4da);
  box-shadow: 0 1px var(--flip-highlight, rgba(255, 255, 255, 0.42));
}

.dl-wclock .flip-digit::after { display: none; }

.dl-wclock .flip-half,
.dl-wclock .flip-flap {
  position: absolute;
  left: 0;
  width: 100%;
  height: 50%;
  overflow: hidden;
  background: var(--flip-top, #f8f9fa);
}

.dl-wclock .flip-half > span,
.dl-wclock .flip-flap > span {
  position: absolute;
  left: 0;
  display: grid;
  width: 100%;
  height: 200%;
  place-items: center;
}

.dl-wclock .flip-half-top {
  top: 0;
  border-radius: 0.07em 0.07em 0 0;
  box-shadow: inset 0 1px var(--flip-highlight, rgba(255, 255, 255, 0.65));
}

.dl-wclock .flip-half-top > span,
.dl-wclock .flip-flap-top > span { top: 0; }

.dl-wclock .flip-half-bottom {
  bottom: 0;
  background: var(--flip-bottom, #eceef0);
  border-radius: 0 0 0.07em 0.07em;
  box-shadow: inset 0 1px var(--flip-highlight, rgba(255, 255, 255, 0.34)), inset 0 -1px rgba(0, 0, 0, 0.08);
}

.dl-wclock .flip-half-bottom > span,
.dl-wclock .flip-flap-bottom > span { bottom: 0; }

.dl-wclock .flip-flap {
  z-index: 3;
  backface-visibility: hidden;
  will-change: transform, filter;
}

.dl-wclock .flip-flap-top {
  top: 0;
  background: var(--flip-top, #f8f9fa);
  border-radius: 0.07em 0.07em 0 0;
  transform-origin: 50% 100%;
  animation: wc-mechanical-flip-top 310ms cubic-bezier(0.48, 0.04, 0.72, 0.38) both;
}

.dl-wclock .flip-flap-bottom {
  bottom: 0;
  background: var(--flip-bottom, #eceef0);
  border-radius: 0 0 0.07em 0.07em;
  transform: rotateX(90deg);
  transform-origin: 50% 0;
  animation: wc-mechanical-flip-bottom 330ms 295ms cubic-bezier(0.18, 0.68, 0.26, 1) both;
}

.dl-wclock .flip-separator {
  position: relative;
  display: inline-flex;
  width: 0.18em;
  height: 1.6em;
  flex: 0 0 0.18em;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0.25em;
}

.dl-wclock .flip-separator i {
  width: 0.1em;
  height: 0.1em;
  background: var(--flip-colon, #666);
  border-radius: 50%;
}

.dl-wclock .clock-renderer-flip em {
  align-self: center;
  margin: 0 0 0 0.26em;
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.45em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
}

.dl-wclock .clock-renderer-flip.time-strip { margin-right: clamp(12px, 1.5vw, 22px); margin-left: clamp(12px, 1.5vw, 22px); font-size: clamp(18px, 1.55vw, 23px); }
/* Hero sizes fit the WIDEST face: 12H + seconds + the vertical AM/PM stack. */
.dl-wclock .clock-renderer-flip.time-hero { font-size: clamp(26px, 2.45vw, 35px); }
/* Card is narrow — flip tiles are the widest face, so the 12H + seconds + vertical
   AM/PM row must be smaller here or the AM/PM clips off the card's right edge. */
.dl-wclock .clock-renderer-flip.time-card { font-size: clamp(16px, 1.42vw, 20px); }
.dl-wclock .clock-renderer-flip.time-preview { font-size: 7px; }

/* ── True seven-segment digital faces ── */
.dl-wclock .clock-renderer-seven-segment,
.dl-wclock .clock-renderer-plain { letter-spacing: 0; }

.dl-wclock .clock-renderer-seven-segment .time-visual,
.dl-wclock .clock-renderer-plain .time-visual {
  align-items: center;
  color: var(--clock-lit);
  background: var(--clock-surface);
  border: 1px solid var(--clock-border);
  border-radius: 0.12em;
  box-shadow: 0 0.08em 0.22em rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.045);
}

.dl-wclock .clock-renderer-seven-segment .time-visual {
  gap: 0.11em;
  padding: 0.17em 0.2em 0.19em;
}

.dl-wclock .seven-pair {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
}

.dl-wclock .seven-digit {
  position: relative;
  display: inline-block;
  width: 0.62em;
  height: 1em;
  flex: 0 0 0.62em;
}

.dl-wclock .seven-segment {
  position: absolute;
  display: block;
  color: inherit;
  background: currentColor;
  opacity: 0.055;
  transition: opacity 80ms linear;
}

.dl-wclock .seven-segment.is-on {
  opacity: 1;
  filter: drop-shadow(0 0 0.055em color-mix(in srgb, currentColor 58%, transparent));
}

.dl-wclock .segment-a,
.dl-wclock .segment-d,
.dl-wclock .segment-g {
  left: 0.1em;
  width: 0.42em;
  height: 0.085em;
  clip-path: polygon(10% 0, 90% 0, 100% 50%, 90% 100%, 10% 100%, 0 50%);
}

.dl-wclock .segment-a { top: 0; }
.dl-wclock .segment-g { top: calc(50% - 0.0425em); }
.dl-wclock .segment-d { bottom: 0; }

.dl-wclock .segment-b,
.dl-wclock .segment-c,
.dl-wclock .segment-e,
.dl-wclock .segment-f {
  width: 0.085em;
  height: 0.39em;
  clip-path: polygon(50% 0, 100% 10%, 100% 90%, 50% 100%, 0 90%, 0 10%);
}

.dl-wclock .segment-b { top: 0.075em; right: 0.02em; }
.dl-wclock .segment-c { right: 0.02em; bottom: 0.075em; }
.dl-wclock .segment-e { bottom: 0.075em; left: 0.02em; }
.dl-wclock .segment-f { top: 0.075em; left: 0.02em; }

.dl-wclock .seven-colon {
  position: relative;
  display: inline-block;
  width: 0.14em;
  height: 1em;
  flex: 0 0 0.14em;
}

.dl-wclock .seven-colon i {
  position: absolute;
  left: 0.035em;
  width: 0.075em;
  height: 0.075em;
  background: currentColor;
  border-radius: 20%;
}

.dl-wclock .seven-colon i:first-child { top: 0.31em; }
.dl-wclock .seven-colon i:last-child { bottom: 0.31em; }

.dl-wclock .clock-renderer-seven-segment em,
.dl-wclock .clock-renderer-plain em {
  align-self: center;
  margin: 0 0 0 0.22em;
  color: var(--clock-lit);
  font-size: 0.45em;
}

.dl-wclock .clock-renderer-seven-segment.time-strip { margin: 0 clamp(12px, 1.5vw, 22px); font-size: clamp(22px, 1.9vw, 28px); }
.dl-wclock .clock-renderer-seven-segment.time-hero { font-size: clamp(42px, 4vw, 57px); }
.dl-wclock .clock-renderer-seven-segment.time-card { font-size: clamp(27px, 2.25vw, 31px); }
.dl-wclock .clock-renderer-seven-segment.time-preview { font-size: 9px; }

/* ── Plain digital templates ── */
.dl-wclock .clock-renderer-plain .time-visual { padding: 0.16em 0.24em 0.19em; }
.dl-wclock .plain-time-text {
  color: var(--clock-lit);
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.dl-wclock .clock-template-classic .plain-time-text {
  font-family: "Courier New", Monaco, monospace;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.dl-wclock .clock-renderer-plain.time-strip { margin: 0 clamp(12px, 1.5vw, 22px); font-size: clamp(22px, 1.95vw, 29px); }
.dl-wclock .clock-renderer-plain.time-hero { font-size: clamp(43px, 4.05vw, 58px); }
.dl-wclock .clock-renderer-plain.time-card { font-size: clamp(27px, 2.3vw, 32px); }
.dl-wclock .clock-renderer-plain.time-preview { font-size: 9px; }

.dl-wclock .clock-template-digital { --clock-surface: #000; --clock-lit: #fff; --clock-border: #141414; }
.dl-wclock .clock-template-digital-blue { --clock-surface: #000; --clock-lit: #73b6ee; --clock-border: #18222c; }
.dl-wclock .clock-template-digital-red { --clock-surface: #000; --clock-lit: #d05540; --clock-border: #2b1815; }
.dl-wclock .clock-template-digital-amber { --clock-surface: #000; --clock-lit: #e0933b; --clock-border: #2b2115; }
.dl-wclock .clock-template-digital-orange { --clock-surface: #f58325; --clock-lit: #222; --clock-border: #ff9a4e; }
.dl-wclock .clock-template-pure-dark { --clock-surface: #000; --clock-lit: #fff; --clock-border: #151515; }
.dl-wclock .clock-template-dark { --clock-surface: #1a1a1a; --clock-lit: #f2f2f2; --clock-border: #2b2b2b; }
.dl-wclock .clock-template-light { --clock-surface: #f8f9fa; --clock-lit: #111; --clock-border: #d8dde1; }
.dl-wclock .clock-template-classic { --clock-surface: #000; --clock-lit: #fff; --clock-border: #151515; }

.dl-wclock .time-strip {
  justify-self: center;
  margin: 0 clamp(12px, 1.5vw, 22px);
  font-size: clamp(22px, 1.9vw, 29px);
  font-weight: 470;
}

.dl-wclock .time-strip .seconds { color: inherit; }

.dl-wclock .strip-weather {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-self: start;
  gap: 9px;
  padding-left: clamp(12px, 2vw, 28px);
  border-left: 1px solid var(--line);
}

.dl-wclock .mini-sky {
  position: relative;
  flex: 0 0 auto;
  width: 34px;
  height: 28px;
  overflow: hidden;
  background: #122638;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 9px;
}

.dl-wclock .mini-sky.weather-clear.is-day { background: linear-gradient(145deg, #55bee0, #9edbe7 70%, #ffd88b); }
.dl-wclock .mini-sky.weather-clouds.is-day { background: linear-gradient(145deg, #8eb0bd, #c6d5d8); }
.dl-wclock .mini-sky.weather-rain.is-day { background: linear-gradient(145deg, #4f8597, #8aabb4); }
.dl-wclock .mini-sky.weather-snow.is-day { background: linear-gradient(145deg, #a7c8d4, #e5eff0); }
.dl-wclock .mini-sky.weather-storm.is-day { background: linear-gradient(145deg, #566d91, #8797ad); }
.dl-wclock .mini-sky.weather-fog.is-day { background: linear-gradient(145deg, #9bafb5, #d4dcdb); }

.dl-wclock .strip-wx {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}

.dl-wclock .strip-wx-top {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 6px;
}

.dl-wclock .strip-weather .strip-wx-top strong {
  color: #f7fbff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.06em;
}

.dl-wclock .strip-weather .strip-wx-top span {
  overflow: hidden;
  color: #8fa1b2;
  font-size: 10px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-wclock .strip-toggle {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 15px;
  color: #e9f3fb;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dl-wclock .strip-toggle:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(77, 214, 255, 0.32);
}

.dl-wclock .strip-toggle > span {
  font-size: 10px;
  font-weight: 750;
  white-space: nowrap;
}

/* ── Calendar pill (strip dock) — shares the .strip-toggle chrome ── */
.dl-wclock .strip-cal {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 8px;
  padding: 0 13px;
  color: #e9f3fb;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.dl-wclock .strip-cal:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(77, 214, 255, 0.32); }
.dl-wclock .strip-cal:active { transform: translateY(1px); }
.dl-wclock .strip-cal[aria-expanded="true"] { background: rgba(77, 214, 255, 0.16); border-color: rgba(77, 214, 255, 0.42); }
.dl-wclock .strip-cal-ico {
  width: 16px; height: 16px; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  opacity: 0.92;
}
.dl-wclock .strip-cal-lbl { font-size: 10.5px; font-weight: 750; letter-spacing: 0.02em; white-space: nowrap; }
/* day-mode strip (light) — mirror the .strip-toggle day treatment */
.dl-wclock.home-is-day .strip-cal { color: #0d2a38; background: rgba(255, 255, 255, 0.62); border-color: rgba(28, 139, 173, 0.22); }
.dl-wclock.home-is-day .strip-cal:hover { background: rgba(255, 255, 255, 0.78); border-color: rgba(28, 139, 173, 0.4); }
.dl-wclock.home-is-day .strip-cal[aria-expanded="true"] { background: rgba(28, 139, 173, 0.14); border-color: rgba(28, 139, 173, 0.45); }

/* ── Calendar popover — theme-matched glass card (dark default · light in day mode) ── */
.dl-wclock .wc-cal-pop {
  position: fixed;
  z-index: 60;
  width: 300px;
  padding: 13px 13px 11px;
  border-radius: 15px;
  border: 1px solid var(--cal-line);
  background: var(--cal-bg);
  box-shadow: 0 22px 60px rgba(1, 7, 12, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  color: var(--cal-text);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  font-family: inherit;
  --cal-bg: linear-gradient(150deg, #0b1622 0%, #0a1421 100%);
  --cal-line: rgba(255, 255, 255, 0.12);
  --cal-text: #eaf3fb;
  --cal-muted: #8aa0b3;
  --cal-accent: #4dd6ff;
  --cal-hover: rgba(255, 255, 255, 0.09);
  --cal-hol: #f4b24d;
  --cal-lv: #38d6c0;
}
.dl-wclock .wc-cal-pop.is-day {
  --cal-bg: linear-gradient(150deg, #ffffff 0%, #f1f6fb 100%);
  --cal-line: rgba(9, 40, 58, 0.12);
  --cal-text: #0f2a3a;
  --cal-muted: #5f7688;
  --cal-accent: #0e86a8;
  --cal-hover: rgba(9, 40, 58, 0.06);
  --cal-hol: #d98713;
  --cal-lv: #159c8a;
  box-shadow: 0 20px 48px rgba(9, 40, 58, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.dl-wclock .wc-cal-pop[hidden] { display: none; }
.dl-wclock .wc-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.dl-wclock .wc-cal-title { font-size: 13px; font-weight: 800; letter-spacing: 0.01em; }
.dl-wclock .wc-cal-nav {
  width: 28px; height: 28px; display: grid; place-items: center;
  font-size: 17px; line-height: 1; color: var(--cal-text);
  background: var(--cal-hover); border: 1px solid var(--cal-line); border-radius: 8px; cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.dl-wclock .wc-cal-nav:hover { border-color: var(--cal-accent); }
.dl-wclock .wc-cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 4px; }
.dl-wclock .wc-cal-dows span { text-align: center; font-size: 9.5px; font-weight: 750; letter-spacing: 0.04em; color: var(--cal-muted); text-transform: uppercase; }
.dl-wclock .wc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dl-wclock .wc-cal-day {
  position: relative; aspect-ratio: 1 / 1; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: 9px; cursor: pointer;
  background: transparent; color: var(--cal-text); font: inherit;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.dl-wclock .wc-cal-num { font-size: 12px; font-weight: 650; }
.dl-wclock .wc-cal-day:hover { background: var(--cal-hover); }
.dl-wclock .wc-cal-day.is-out { color: var(--cal-muted); opacity: 0.5; }
.dl-wclock .wc-cal-day.is-today { border-color: var(--cal-accent); }
.dl-wclock .wc-cal-day.is-today .wc-cal-num { color: var(--cal-accent); font-weight: 800; }
.dl-wclock .wc-cal-day.is-sel { background: var(--cal-accent); border-color: var(--cal-accent); }
.dl-wclock .wc-cal-day.is-sel .wc-cal-num { color: #04121b; font-weight: 800; }
.dl-wclock .wc-cal-day.is-hol { background: color-mix(in srgb, var(--cal-hol) 16%, transparent); }
.dl-wclock .wc-cal-day.is-sel.is-hol { background: var(--cal-accent); }
.dl-wclock .wc-cal-holdot {
  position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: var(--cal-hol);
}
.dl-wclock .wc-cal-lvbadge {
  position: absolute; top: 1px; right: 1px;
  min-width: 13px; height: 13px; padding: 0 3px; display: grid; place-items: center;
  font-size: 8.5px; font-weight: 800; line-height: 1; color: #04121b;
  background: var(--cal-lv); border-radius: 7px;
}
.dl-wclock .wc-cal-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--cal-line);
}
.dl-wclock .wc-cal-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 9.5px; font-weight: 650; color: var(--cal-muted); }
.dl-wclock .wc-cal-sw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 1px; }
.dl-wclock .wc-cal-sw.hol { background: var(--cal-hol); }
.dl-wclock .wc-cal-sw.lv { background: var(--cal-lv); }
.dl-wclock .wc-cal-today {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--cal-accent);
  background: var(--cal-hover); border: 1px solid var(--cal-line); border-radius: 8px;
  padding: 5px 12px; cursor: pointer; transition: border-color 140ms ease;
}
.dl-wclock .wc-cal-today:hover { border-color: var(--cal-accent); }
@media (max-width: 640px) { .dl-wclock .strip-cal-lbl { display: none; } }
@media (prefers-reduced-motion: reduce) { .dl-wclock .strip-cal, .dl-wclock .wc-cal-day, .dl-wclock .wc-cal-nav { transition: none; } }

/* Soundscape dock (shadow-DOM web component) — themed via its --sw-dock-* hooks
   to match the strip pills in night and day modes. */
.dl-wclock soundscape-widget {
  justify-self: end;
  --sw-dock: rgba(255, 255, 255, 0.07);
  --sw-dock-line: rgba(255, 255, 255, 0.11);
  --sw-dock-shadow: none;
  --sw-dock-ink: #e9f3fb;
  --sw-dock-sub: rgba(233, 243, 251, 0.62);
  --sw-dock-hover: rgba(255, 255, 255, 0.11);
  --sw-dock-accent: #7cd8f0;
  --sw-dock-playing: #7cd8f0;
  --sw-dock-playing-bg: rgba(77, 214, 255, 0.14);
}

.dl-wclock.home-is-day soundscape-widget {
  --sw-dock: rgba(255, 255, 255, 0.54);
  --sw-dock-line: rgba(19, 66, 83, 0.15);
  --sw-dock-shadow: 0 5px 18px rgba(31, 91, 110, 0.09);
  --sw-dock-ink: #173746;
  --sw-dock-sub: rgba(23, 55, 70, 0.62);
  --sw-dock-hover: rgba(255, 255, 255, 0.76);
  --sw-dock-accent: #1e566b;
  --sw-dock-playing: #0d655f;
  --sw-dock-playing-bg: rgba(13, 101, 95, 0.12);
}

.dl-wclock .chevron {
  width: 7px;
  height: 7px;
  margin: -3px 1px 0 4px;
  border-right: 1.5px solid #a7bacb;
  border-bottom: 1.5px solid #a7bacb;
  transform: rotate(45deg);
  transition: transform 260ms var(--ease-out), margin 260ms var(--ease-out);
}

.dl-wclock.clock-is-open .chevron {
  margin-top: 4px;
  transform: rotate(225deg);
}

/* ── Expanded drawer ── */
.dl-wclock .clock-scrim {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100%;
  background: rgba(1, 7, 12, 0.55);
  cursor: default;
  backdrop-filter: blur(7px) saturate(0.7);
  animation: wc-scrim-in 260ms ease both;
}

.dl-wclock .clock-scrim[hidden],
.dl-wclock .clock-panel[hidden] { display: none; }

.dl-wclock .clock-panel {
  position: absolute;
  z-index: 2;
  top: 100%;
  right: 0;
  left: 0;
  max-height: calc(100dvh - var(--wc-top) - var(--strip-height) - 24px);
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--text);
  background:
    radial-gradient(circle at 15% -20%, rgba(77, 214, 255, 0.11), transparent 28%),
    radial-gradient(circle at 92% 0%, rgba(139, 124, 255, 0.1), transparent 32%),
    linear-gradient(145deg, #09131d, #071018 68%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 0;
  border-radius: 0 0 26px 26px;
  box-shadow: 0 32px 80px rgba(0, 4, 8, 0.48), inset 0 1px rgba(255, 255, 255, 0.04);
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  animation: wc-drawer-in 380ms var(--ease-out) both;
  transform-origin: 50% 0;
  transition: color 700ms var(--ease-out), background 900ms var(--ease-out), border-color 700ms var(--ease-out), box-shadow 700ms var(--ease-out);
}

.dl-wclock .panel-inner {
  width: min(1480px, 100%);
  margin: 0 auto;
  padding: clamp(20px, 2.5vw, 36px);
}

/* ── Panel tabs: World clocks | Settings ── */
.dl-wclock .panel-tabbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: clamp(16px, 2vw, 24px);
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.dl-wclock .panel-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 13px;
}
.dl-wclock .panel-tab {
  padding: 8px 20px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}
.dl-wclock .panel-tab:hover { color: var(--text); }
.dl-wclock .panel-tab.is-active { color: #071018; background: #dff8ff; }
.dl-wclock .panel-tab:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.dl-wclock .wc-pane[hidden] { display: none; }
.dl-wclock .wc-settings-pane { max-width: 620px; margin: 0 auto; }
.dl-wclock .wc-settings-pane .clock-settings-content { padding: 0; overflow: visible; }

.dl-wclock .panel-heading,
.dl-wclock .world-section-heading,
.dl-wclock .panel-footnote {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dl-wclock .panel-heading {
  gap: 24px;
  margin-bottom: 20px;
}

.dl-wclock .eyebrow,
.dl-wclock .city-manager header p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px;
  color: #83daee;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.17em;
}

.dl-wclock .eyebrow > span {
  width: 5px;
  height: 5px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--cyan);
}

.dl-wclock .panel-heading h2 {
  margin: 0;
  font-size: clamp(24px, 2.3vw, 37px);
  font-weight: 580;
  letter-spacing: -0.045em;
}

.dl-wclock .panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
}

.dl-wclock .clock-style-control {
  position: relative;
  z-index: 30;
  justify-self: end;
}

.dl-wclock .clock-style-control.is-open .clock-settings-button {
  border-color: color-mix(in srgb, var(--widget-accent) 58%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--widget-accent) 12%, transparent), 0 9px 24px rgba(0, 0, 0, 0.18);
}

/* Matches .strip-toggle chrome — the two strip pills share one design. */
.dl-wclock .clock-settings-button {
  display: flex;
  min-width: 132px;
  height: 42px;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 10px;
  color: #e9f3fb;
  text-align: left;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 12px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.dl-wclock .clock-settings-button:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(77, 214, 255, 0.32);
}

.dl-wclock .clock-settings-button > span { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 1px; }
.dl-wclock .clock-settings-button small { color: #718598; font-size: 7px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.dl-wclock .clock-settings-button b { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
/* Same drawn chevron as .strip-toggle's, flipping up when open. */
.dl-wclock .clock-settings-button > em {
  width: 7px;
  height: 7px;
  margin: -3px 1px 0 4px;
  font-size: 0;
  font-style: normal;
  border-right: 1.5px solid #a7bacb;
  border-bottom: 1.5px solid #a7bacb;
  transform: rotate(45deg);
  transition: transform 260ms var(--ease-out), margin 260ms var(--ease-out);
}
.dl-wclock .clock-style-control.is-open .clock-settings-button > em { margin-top: 4px; transform: rotate(225deg); }

.dl-wclock .clock-style-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  right: 0;
  width: min(390px, calc(100vw - 30px));
  max-height: min(570px, calc(100dvh - 138px));
  padding: 13px;
  overflow-x: hidden;
  overflow-y: auto;
  color: var(--quick-text);
  background:
    radial-gradient(circle at 92% -4%, color-mix(in srgb, var(--widget-accent) 18%, transparent), transparent 32%),
    var(--quick-panel);
  border: 1px solid var(--quick-line);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 5, 10, 0.36), inset 0 1px rgba(255, 255, 255, 0.08);
  scrollbar-color: color-mix(in srgb, var(--widget-accent) 35%, transparent) transparent;
  backdrop-filter: blur(24px) saturate(1.18);
  animation: wc-quick-style-in 180ms var(--ease-out) both;
  transform-origin: 88% 0;
}

.dl-wclock .clock-style-popover[hidden] { display: none; }

.dl-wclock .clock-style-popover::before {
  position: absolute;
  top: -9px;
  right: 0;
  left: 0;
  height: 9px;
  content: "";
}

.dl-wclock .clock-style-popover > header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding: 2px 2px 11px;
  border-bottom: 1px solid var(--quick-line);
}

.dl-wclock .clock-style-popover > header div { display: flex; flex-direction: column; gap: 2px; }
.dl-wclock .clock-style-popover > header span {
  color: var(--widget-accent);
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.14em;
}
.dl-wclock .clock-style-popover > header h2 { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.025em; }
.dl-wclock .clock-style-popover > header > b {
  max-width: 160px;
  overflow: hidden;
  color: var(--quick-muted);
  font-size: 8px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-wclock .quick-template-setting,
.dl-wclock .quick-flip-theme-setting {
  min-width: 0;
  padding: 0;
  margin: 13px 0 0;
  border: 0;
}

.dl-wclock .quick-template-setting legend,
.dl-wclock .quick-flip-theme-setting legend {
  width: 100%;
  padding: 0 1px;
  margin-bottom: 8px;
  color: var(--quick-muted);
  font-size: 8px;
  font-weight: 780;
  letter-spacing: 0.04em;
}

.dl-wclock .quick-flip-theme-setting legend { display: flex; align-items: center; justify-content: space-between; }
.dl-wclock .quick-flip-theme-setting legend span { color: color-mix(in srgb, var(--quick-muted) 72%, transparent); font-size: 7px; font-weight: 580; letter-spacing: 0; }

.dl-wclock .quick-template-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.dl-wclock .quick-template-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 56px;
  grid-template-columns: 68px minmax(0, 1fr) 12px;
  align-items: center;
  gap: 7px;
  padding: 6px 7px;
  color: var(--quick-text);
  background: var(--quick-card);
  border: 1px solid var(--quick-line);
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.dl-wclock .quick-template-option:hover { background: var(--quick-card-hover); transform: translateY(-1px); }
.dl-wclock .quick-template-option.is-selected {
  background: color-mix(in srgb, var(--widget-accent) 10%, var(--quick-card));
  border-color: color-mix(in srgb, var(--widget-accent) 72%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--widget-accent) 10%, transparent);
}
.dl-wclock .quick-template-option > input { position: absolute; opacity: 0; pointer-events: none; }
.dl-wclock .quick-template-option:has(input:focus-visible) { outline: 2px solid var(--widget-accent); outline-offset: 2px; }
.dl-wclock .quick-template-option > .template-clock-preview {
  display: grid;
  width: 68px;
  height: 40px;
  overflow: hidden;
  place-items: center;
  background: var(--clock-surface, rgba(0, 0, 0, 0.28));
  border: 1px solid var(--clock-border, rgba(255, 255, 255, 0.08));
  border-radius: 7px;
}
.dl-wclock .quick-template-option > .clock-renderer-flip { font-size: 7px; }
.dl-wclock .quick-template-option > .clock-renderer-seven-segment,
.dl-wclock .quick-template-option > .clock-renderer-plain { font-size: 11px; }
.dl-wclock .quick-template-option > span:last-of-type { overflow: hidden; font-size: 8px; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
.dl-wclock .quick-template-option > i { color: var(--widget-accent); font-size: 9px; font-style: normal; opacity: 0; }
.dl-wclock .quick-template-option.is-selected > i { opacity: 1; }

.dl-wclock .clock-style-popover > footer { padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--quick-line); }
.dl-wclock .clock-style-popover > footer button {
  display: flex;
  width: 100%;
  min-height: 34px;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  color: var(--quick-text);
  font-size: 9px;
  font-weight: 720;
  background: color-mix(in srgb, var(--widget-accent) 10%, var(--quick-card));
  border: 1px solid color-mix(in srgb, var(--widget-accent) 26%, var(--quick-line));
  border-radius: 9px;
  cursor: pointer;
}
.dl-wclock .clock-style-popover > footer button:hover { background: color-mix(in srgb, var(--widget-accent) 17%, var(--quick-card)); }
.dl-wclock .clock-style-popover > footer button span { color: var(--widget-accent); font-size: 14px; }

.dl-wclock .flip-theme-picker {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 9px;
}

.dl-wclock .flip-theme-option {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 8px 5px 7px;
  color: #b8bec7;
  background: #090909;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.dl-wclock .flip-theme-option:hover { background: #111; border-color: #3b3b3b; transform: translateY(-1px); }
.dl-wclock .flip-theme-option.is-selected { color: #fff; border-color: #2787f5; box-shadow: 0 0 0 1px rgba(39, 135, 245, 0.18); }
.dl-wclock .flip-theme-option > input { position: absolute; opacity: 0; pointer-events: none; }
.dl-wclock .flip-theme-option:has(input:focus-visible) { outline: 2px solid #8bc5ff; outline-offset: 2px; }
.dl-wclock .flip-theme-option > span:not(.flip-theme-swatch) { overflow: hidden; max-width: 100%; font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.dl-wclock .flip-theme-option > b {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  color: #fff;
  font-size: 8px;
  background: #147ff3;
  border: 2px solid #090909;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 140ms ease, transform 140ms ease;
}
.dl-wclock .flip-theme-option.is-selected > b { opacity: 1; transform: none; }

.dl-wclock .flip-theme-swatch {
  display: flex;
  width: 100%;
  height: 42px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px;
  background: var(--flip-card);
  border: 1px solid var(--flip-border);
  border-radius: 7px;
  box-shadow: inset 0 1px var(--flip-highlight), 0 5px 10px var(--flip-shadow);
}

.dl-wclock .flip-theme-swatch i {
  position: relative;
  display: grid;
  width: 22px;
  height: 29px;
  place-items: center;
  overflow: hidden;
  color: var(--flip-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  font-size: 21px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  font-weight: 550;
  line-height: 1;
  background: linear-gradient(to bottom, var(--flip-top) 0 49%, var(--flip-seam) 49% 51%, var(--flip-bottom) 51% 100%);
  border: 1px solid var(--flip-border);
  border-radius: 3px;
}

.dl-wclock .flip-theme-picker.is-compact { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.dl-wclock .flip-theme-picker.is-compact .flip-theme-option {
  gap: 4px;
  padding: 5px 4px 4px;
  color: var(--quick-muted);
  background: var(--quick-card);
  border-color: var(--quick-line);
  border-radius: 8px;
}
.dl-wclock .flip-theme-picker.is-compact .flip-theme-option:hover { background: var(--quick-card-hover); }
.dl-wclock .flip-theme-picker.is-compact .flip-theme-option.is-selected { color: var(--quick-text); border-color: var(--widget-accent); }
.dl-wclock .flip-theme-picker.is-compact .flip-theme-swatch { height: 30px; gap: 2px; padding: 4px; border-radius: 5px; }
.dl-wclock .flip-theme-picker.is-compact .flip-theme-swatch i { width: 15px; height: 21px; font-size: 15px; }
.dl-wclock .flip-theme-picker.is-compact .flip-theme-option > span:not(.flip-theme-swatch) { font-size: 6.5px; }
.dl-wclock .flip-theme-picker.is-compact .flip-theme-option > b { top: 2px; right: 2px; width: 12px; height: 12px; font-size: 6px; border-width: 1px; }

.dl-wclock .segmented {
  display: flex;
  height: 37px;
  padding: 3px;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.dl-wclock .segmented button {
  min-width: 39px;
  padding: 0 9px;
  color: #718497;
  font-size: 9px;
  font-weight: 850;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease;
}

.dl-wclock .segmented button[aria-pressed="true"] {
  color: #f3fbff;
  background: #1e3040;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.dl-wclock .manage-button,
.dl-wclock .world-section-heading > button {
  display: flex;
  height: 37px;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  color: #0a1720;
  font-size: 10px;
  font-weight: 850;
  background: linear-gradient(135deg, #e8fbff, #9eeaff);
  border-radius: 11px;
  cursor: pointer;
  box-shadow: 0 7px 22px rgba(77, 214, 255, 0.12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.dl-wclock .manage-button:hover,
.dl-wclock .world-section-heading > button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(77, 214, 255, 0.2);
}

.dl-wclock .manage-button i {
  position: relative;
  width: 13px;
  height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.dl-wclock .manage-button i::before,
.dl-wclock .manage-button i::after {
  position: absolute;
  content: "";
  background: currentColor;
}

.dl-wclock .manage-button i::before { top: 5px; right: 2px; left: 2px; height: 1px; }
.dl-wclock .manage-button i::after { top: 2px; bottom: 2px; left: 5px; width: 1px; }

.dl-wclock .collapse-button {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}

.dl-wclock .collapse-button:hover { background: rgba(255, 255, 255, 0.09); }
.dl-wclock .collapse-button span { width: 9px; height: 9px; margin-top: 4px; border-top: 1.5px solid #b9c7d3; border-left: 1.5px solid #b9c7d3; transform: rotate(45deg); }

.dl-wclock .weather-surface {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #122434;
}

.dl-wclock .weather-surface::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: "";
  background: linear-gradient(125deg, rgba(4, 13, 22, 0.2), rgba(7, 16, 24, 0.76));
}

.dl-wclock .weather-surface.is-day::before { background: linear-gradient(125deg, rgba(8, 41, 53, 0.16), rgba(9, 34, 49, 0.54)); }
.dl-wclock .weather-surface.weather-clear.is-day { background: linear-gradient(135deg, #2397bd, #50b5cd 58%, #7cc9d5); }
.dl-wclock .weather-surface.weather-clear.is-night { background: linear-gradient(135deg, #17243c, #10182e 55%, #111128); }
.dl-wclock .weather-surface.weather-clouds.is-day { background: linear-gradient(135deg, #7697a3, #8ca7af 58%, #637e8b); }
.dl-wclock .weather-surface.weather-clouds.is-night { background: linear-gradient(135deg, #283846, #172535 58%, #111b2a); }
.dl-wclock .weather-surface.weather-rain.is-day { background: linear-gradient(135deg, #477c8c, #648b98 58%, #3f6475); }
.dl-wclock .weather-surface.weather-rain.is-night { background: linear-gradient(135deg, #164453, #162d43 58%, #101b2c); }
.dl-wclock .weather-surface.weather-snow.is-day { background: linear-gradient(135deg, #89aebc, #a8c2ca 58%, #7894a4); }
.dl-wclock .weather-surface.weather-snow.is-night { background: linear-gradient(135deg, #506d78, #354f64 58%, #243649); }
.dl-wclock .weather-surface.weather-storm.is-day { background: linear-gradient(135deg, #536786, #465774 58%, #38445f); }
.dl-wclock .weather-surface.weather-storm.is-night { background: linear-gradient(135deg, #322d54, #1b2844 58%, #121a2e); }
.dl-wclock .weather-surface.weather-fog.is-day { background: linear-gradient(135deg, #82999f, #9aabad 58%, #73888f); }
.dl-wclock .weather-surface.weather-fog.is-night { background: linear-gradient(135deg, #53646d, #344a58 58%, #243341); }

.dl-wclock .home-weather {
  min-height: 274px;
  color: #f6faff;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 23px;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 22px 50px rgba(0, 5, 10, 0.22);
}

.dl-wclock .home-content {
  position: relative;
  z-index: 3;
  display: grid;
  min-height: 274px;
  grid-template-columns: minmax(190px, 0.72fr) minmax(330px, 1.18fr) minmax(270px, 0.95fr);
  align-items: end;
  gap: clamp(24px, 4vw, 70px);
  padding: clamp(24px, 3vw, 42px);
}

.dl-wclock .home-location { align-self: center; }

.dl-wclock .home-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 17px;
  padding: 6px 8px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.14em;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  backdrop-filter: blur(8px);
}

.dl-wclock .home-chip i {
  width: 5px;
  height: 5px;
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: 0 0 9px var(--cyan);
}

.dl-wclock .home-location h2 {
  margin: 0;
  font-size: clamp(30px, 3vw, 49px);
  font-weight: 520;
  letter-spacing: -0.055em;
}

.dl-wclock .home-location p,
.dl-wclock .home-clock > p {
  margin: 8px 0 0;
  color: rgba(255, 255, 255, 0.63);
  font-size: 11px;
  font-weight: 600;
}

.dl-wclock .home-location p span { margin: 0 5px; opacity: 0.5; }

.dl-wclock .home-clock {
  align-self: center;
  text-align: center;
}

.dl-wclock .time-hero {
  font-size: clamp(52px, 6.6vw, 106px);
  font-weight: 340;
  line-height: 0.9;
  text-shadow: 0 8px 36px rgba(0, 0, 0, 0.18);
}

.dl-wclock .time-hero .seconds { color: inherit; }

.dl-wclock .home-clock > p {
  margin-top: 15px;
  font-size: 10px;
  letter-spacing: 0.04em;
}

.dl-wclock .weather-summary {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 12, 20, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  backdrop-filter: blur(18px) saturate(1.1);
}

.dl-wclock .weather-reading {
  display: flex;
  align-items: center;
  gap: 17px;
}

.dl-wclock .weather-reading > strong {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: clamp(37px, 3.2vw, 52px);
  font-weight: 420;
  letter-spacing: -0.08em;
}

.dl-wclock .weather-reading h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}

.dl-wclock .weather-reading p {
  margin: 5px 0 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 9px;
}

.dl-wclock .weather-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.dl-wclock .weather-metrics > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.dl-wclock .weather-metrics span {
  overflow: hidden;
  color: rgba(255, 255, 255, 0.49);
  font-size: 7px;
  font-weight: 750;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.dl-wclock .weather-metrics b {
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
  font-weight: 500;
}

.dl-wclock .retry-weather {
  align-self: flex-start;
  margin-top: 13px;
  padding: 7px 10px;
  color: #dff7ff;
  font-size: 9px;
  font-weight: 750;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  cursor: pointer;
}

.dl-wclock .world-section-heading {
  gap: 20px;
  margin: 27px 2px 15px;
}

.dl-wclock .world-section-heading h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.dl-wclock .world-section-heading p {
  margin: 4px 0 0;
  color: #728498;
  font-size: 9px;
}

.dl-wclock .world-section-heading > button {
  color: #dff8ff;
  background: rgba(77, 214, 255, 0.08);
  border: 1px solid rgba(77, 214, 255, 0.22);
  box-shadow: none;
}

.dl-wclock .world-section-heading > button span { font-size: 17px; font-weight: 400; }

.dl-wclock .city-rail {
  display: grid;
  grid-auto-columns: minmax(235px, 1fr);
  grid-auto-flow: column;
  gap: 13px;
  overflow-x: auto;
  padding: 2px 2px 11px;
  scroll-padding: 2px;
  scroll-snap-type: x proximity;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}

.dl-wclock .city-card,
.dl-wclock .add-city-card {
  min-height: 196px;
  scroll-snap-align: start;
  border-radius: 18px;
}

.dl-wclock .city-card {
  color: #f6faff;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.05);
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.dl-wclock .city-card:hover {
  z-index: 1;
  border-color: rgba(77, 214, 255, 0.24);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.08), 0 14px 30px rgba(0, 5, 10, 0.2);
  transform: translateY(-2px);
}

.dl-wclock .city-card-content {
  position: relative;
  z-index: 3;
  display: flex;
  min-height: 196px;
  flex-direction: column;
  padding: 17px;
}

.dl-wclock .city-card-content > header {
  display: flex;
  justify-content: space-between;
}

.dl-wclock .city-card-content > header > div > span {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.12em;
  background: rgba(0, 0, 0, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 6px;
}

.dl-wclock .city-card h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 650;
  letter-spacing: -0.025em;
}

.dl-wclock .city-card header p {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.74);
  font-size: 8px;
  text-shadow: 0 1px 2px rgba(0, 8, 16, 0.4);
}

.dl-wclock .remove-city {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: rgba(255, 255, 255, 0.62);
  font-size: 18px;
  font-weight: 300;
  background: rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 8px;
  cursor: pointer;
  opacity: 0.72;
  transition: opacity 160ms ease, background 160ms ease;
}

.dl-wclock .remove-city:hover { color: #fff; background: rgba(255, 255, 255, 0.1); opacity: 1; }

.dl-wclock .time-card {
  margin-top: auto;
  font-size: clamp(29px, 2.3vw, 39px);
  font-weight: 390;
  line-height: 1;
}

.dl-wclock .time-card .seconds,
.dl-wclock .time-card .seconds-colon {
  color: inherit;
  font-size: 1em;
}

.dl-wclock .city-date {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 8px;
  text-shadow: 0 1px 2px rgba(0, 8, 16, 0.4);
}

.dl-wclock .city-date > span {
  padding: 4px 6px;
  color: #d7f7ff;
  font-weight: 750;
  background: rgba(77, 214, 255, 0.1);
  border-radius: 5px;
}

.dl-wclock .city-date > b { font-weight: 650; }

.dl-wclock .city-card footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 8px;
  text-shadow: 0 1px 2px rgba(0, 8, 16, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.dl-wclock .card-weather {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-wclock .card-weather b {
  margin-right: 3px;
  color: #fff;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 10px;
}

.dl-wclock .add-city-card {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  color: #8fa3b5;
  background: rgba(255, 255, 255, 0.025);
  border: 1px dashed rgba(255, 255, 255, 0.17);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.dl-wclock .add-city-card:hover {
  color: #e7f8ff;
  background: rgba(77, 214, 255, 0.045);
  border-color: rgba(77, 214, 255, 0.38);
}

.dl-wclock .add-city-card > span {
  position: relative;
  display: grid;
  width: 39px;
  height: 39px;
  margin-bottom: 13px;
  place-items: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
}

.dl-wclock .add-city-card i::before,
.dl-wclock .add-city-card i::after {
  position: absolute;
  top: 18px;
  left: 12px;
  width: 14px;
  height: 1px;
  content: "";
  background: currentColor;
}

.dl-wclock .add-city-card i::after { transform: rotate(90deg); }
.dl-wclock .add-city-card b { color: inherit; font-size: 11px; }
.dl-wclock .add-city-card small { margin-top: 5px; color: #5c7083; font-size: 8px; }

.dl-wclock .panel-footnote {
  gap: 20px;
  margin: 17px 2px 0;
  color: #93a8b8;
  font-size: 11px;
}

.dl-wclock .panel-footnote > span:first-child { display: flex; align-items: center; gap: 8px; }
.dl-wclock .panel-footnote a { color: #86cfe1; text-decoration: none; }
.dl-wclock .panel-footnote a:hover { text-decoration: underline; }

/* ── Home-clock daylight skin ── */
.dl-wclock.home-is-day .clock-strip {
  background:
    radial-gradient(circle at 76% -50%, rgba(255, 210, 112, 0.66), transparent 32%),
    radial-gradient(circle at 14% 140%, rgba(52, 172, 210, 0.3), transparent 36%),
    linear-gradient(100deg, #f5fbfa, #dff2f4 55%, #edf7f5);
  border-color: rgba(19, 61, 77, 0.14);
  box-shadow: 0 12px 38px rgba(37, 88, 104, 0.16);
}

.dl-wclock.home-is-day.weather-clouds .clock-strip {
  background: linear-gradient(100deg, #edf3f1, #d7e4e5 55%, #e8eeec);
}

.dl-wclock.home-is-day.weather-rain .clock-strip {
  background: linear-gradient(100deg, #dbe8e8, #c3d8dc 55%, #d3e1e2);
}

.dl-wclock.home-is-day.weather-snow .clock-strip {
  background: linear-gradient(100deg, #fbfcfa, #e8f2f3 55%, #f3f7f5);
}

.dl-wclock.home-is-day.weather-storm .clock-strip {
  background: linear-gradient(100deg, #d9e1e5, #bccbd3 55%, #d3dce1);
}

.dl-wclock.home-is-day.weather-fog .clock-strip {
  background: linear-gradient(100deg, #eff2ef, #dfe7e5 55%, #e9edeb);
}

.dl-wclock.home-is-day .clock-strip .time-display,
.dl-wclock.home-is-day .clock-strip .strip-weather .strip-wx-top strong {
  color: #102b39;
}

.dl-wclock.home-is-day .clock-strip .strip-place small,
.dl-wclock.home-is-day .clock-strip .strip-weather .strip-wx-top span,
.dl-wclock.home-is-day .clock-strip .time-display em {
  color: #537181;
}

.dl-wclock.home-is-day .clock-strip .strip-place b { color: #3f5f6f; }

.dl-wclock.home-is-day .clock-strip .time-display b { color: rgba(16, 43, 57, 0.42); }
.dl-wclock.home-is-day .location-pulse { background: rgba(27, 143, 181, 0.09); border-color: rgba(27, 143, 181, 0.2); }
.dl-wclock.home-is-day .strip-toggle {
  color: #173746;
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(19, 66, 83, 0.15);
  box-shadow: 0 5px 18px rgba(31, 91, 110, 0.09);
}
.dl-wclock.home-is-day .strip-toggle:hover { background: rgba(255, 255, 255, 0.76); border-color: rgba(28, 139, 173, 0.38); }
.dl-wclock.home-is-day .chevron { border-color: #355d6c; }

.dl-wclock.home-is-day .clock-scrim {
  background: rgba(33, 68, 78, 0.17);
  backdrop-filter: blur(8px) saturate(0.9);
}

.dl-wclock.home-is-day .clock-panel {
  color: #102936;
  background:
    radial-gradient(circle at 12% -20%, rgba(56, 185, 218, 0.2), transparent 31%),
    radial-gradient(circle at 90% -10%, rgba(255, 204, 101, 0.22), transparent 29%),
    linear-gradient(145deg, #f8fbf8, #eaf3f2 68%);
  border-color: rgba(17, 58, 75, 0.14);
  box-shadow: 0 32px 80px rgba(26, 63, 76, 0.2), inset 0 1px rgba(255, 255, 255, 0.82);
}

.dl-wclock.home-is-day.weather-clouds .clock-panel {
  background: radial-gradient(circle at 84% 0%, rgba(255, 255, 255, 0.7), transparent 28%), linear-gradient(145deg, #f2f5f2, #dfe9e8 68%);
}
.dl-wclock.home-is-day.weather-rain .clock-panel {
  background: radial-gradient(circle at 15% 0%, rgba(71, 151, 174, 0.18), transparent 30%), linear-gradient(145deg, #eef4f1, #d4e3e3 68%);
}
.dl-wclock.home-is-day.weather-snow .clock-panel {
  background: radial-gradient(circle at 82% 0%, rgba(255, 255, 255, 0.92), transparent 29%), linear-gradient(145deg, #fbfcfa, #e7f0f0 68%);
}
.dl-wclock.home-is-day.weather-storm .clock-panel {
  background: radial-gradient(circle at 84% 0%, rgba(102, 121, 166, 0.19), transparent 30%), linear-gradient(145deg, #edf1f0, #d2dde0 68%);
}
.dl-wclock.home-is-day.weather-fog .clock-panel {
  background: radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.72), transparent 32%), linear-gradient(145deg, #f3f5f2, #e0e8e6 68%);
}

.dl-wclock.home-is-day .eyebrow { color: #1d7188; }
.dl-wclock.home-is-day .segmented { background: rgba(22, 66, 83, 0.06); border-color: rgba(18, 58, 73, 0.13); }
.dl-wclock.home-is-day .segmented button { color: #5b7481; }
.dl-wclock.home-is-day .segmented button[aria-pressed="true"] { color: #f3fbff; background: #1e566b; box-shadow: 0 3px 10px rgba(28, 74, 91, 0.18); }
.dl-wclock.home-is-day .clock-settings-button {
  color: #173746;
  background: rgba(255, 255, 255, 0.54);
  border-color: rgba(19, 66, 83, 0.15);
  box-shadow: 0 5px 18px rgba(31, 91, 110, 0.09);
}
.dl-wclock.home-is-day .clock-settings-button:hover { background: rgba(255, 255, 255, 0.76); border-color: rgba(28, 139, 173, 0.38); }
.dl-wclock.home-is-day .clock-settings-button small { color: #607d89; }
.dl-wclock.home-is-day .clock-settings-button > em { border-color: #355d6c; }
.dl-wclock.home-is-day .collapse-button { background: rgba(255, 255, 255, 0.45); border-color: rgba(17, 59, 75, 0.13); }
.dl-wclock.home-is-day .collapse-button:hover { background: rgba(255, 255, 255, 0.74); }
.dl-wclock.home-is-day .collapse-button span { border-color: #395f6e; }
.dl-wclock.home-is-day .world-section-heading p { color: #59717e; }
.dl-wclock.home-is-day .world-section-heading > button { color: #185d72; background: rgba(255, 255, 255, 0.46); border-color: rgba(24, 119, 146, 0.24); }
.dl-wclock.home-is-day .add-city-card { color: #4e7180; background: rgba(255, 255, 255, 0.32); border-color: rgba(29, 87, 107, 0.26); }
.dl-wclock.home-is-day .add-city-card:hover { color: #185d72; background: rgba(255, 255, 255, 0.58); border-color: rgba(28, 137, 170, 0.46); }
.dl-wclock.home-is-day .add-city-card > span { background: rgba(255, 255, 255, 0.46); border-color: rgba(28, 83, 103, 0.14); }
.dl-wclock.home-is-day .add-city-card small { color: #68808a; }
.dl-wclock.home-is-day .panel-footnote { color: #4c6875; }
.dl-wclock.home-is-day .panel-footnote a { color: #176d84; }
.dl-wclock.home-is-day .city-rail { scrollbar-color: rgba(31, 81, 99, 0.24) transparent; }

/* ── CSS weather system ── */
.dl-wclock .weather-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.dl-wclock .sky-wash {
  position: absolute;
  inset: -50%;
  opacity: 0.7;
  background:
    radial-gradient(circle at 28% 35%, rgba(77, 214, 255, 0.28), transparent 24%),
    radial-gradient(circle at 75% 55%, rgba(139, 124, 255, 0.22), transparent 25%);
  animation: wc-sky-breathe 9s ease-in-out infinite alternate;
}

.dl-wclock .is-day .celestial,
.dl-wclock .is-night .celestial {
  position: absolute;
  top: 14%;
  right: 33%;
  width: 82px;
  height: 82px;
  border-radius: 50%;
}

.dl-wclock .is-day .celestial {
  background: rgba(255, 209, 115, 0.86);
  box-shadow: 0 0 25px rgba(255, 203, 102, 0.55), 0 0 80px rgba(255, 203, 102, 0.28), 0 0 145px rgba(255, 232, 166, 0.16);
  animation: wc-sun-float 7s ease-in-out infinite alternate;
}

.dl-wclock .is-night .celestial {
  width: 66px;
  height: 66px;
  background: #d8e9f2;
  box-shadow: 0 0 35px rgba(183, 219, 239, 0.25), inset -15px -6px 0 rgba(102, 131, 158, 0.17);
}

.dl-wclock .weather-scene.weather-rain .celestial,
.dl-wclock .weather-scene.weather-storm .celestial,
.dl-wclock .weather-scene.weather-fog .celestial { opacity: 0.18; }

.dl-wclock .star-field { opacity: 0; }
.dl-wclock .is-night .star-field { opacity: 0.85; }

.dl-wclock .star-field i {
  position: absolute;
  top: calc(10% + var(--i) * 5%);
  left: calc(4% + var(--i) * 10%);
  width: calc(1px + (var(--i) * 0.12px));
  height: calc(1px + (var(--i) * 0.12px));
  background: #f6fdff;
  border-radius: 50%;
  box-shadow: 0 0 5px #d8f7ff;
  animation: wc-star-twinkle calc(2.2s + var(--i) * 0.27s) ease-in-out infinite alternate;
}

.dl-wclock .cloud {
  position: absolute;
  width: 138px;
  height: 34px;
  background: rgba(220, 237, 242, 0.5);
  border-radius: 40px;
  filter: blur(0.2px);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.28), 0 12px 25px rgba(6, 18, 29, 0.13);
}

.dl-wclock .cloud i {
  position: absolute;
  bottom: 5px;
  width: 50px;
  height: 50px;
  background: inherit;
  border-radius: 50%;
}

.dl-wclock .cloud i:nth-child(1) { left: 18px; width: 42px; height: 42px; }
.dl-wclock .cloud i:nth-child(2) { left: 48px; width: 64px; height: 64px; }
.dl-wclock .cloud i:nth-child(3) { right: 7px; width: 40px; height: 40px; }
.dl-wclock .cloud-one { top: 32%; right: 5%; opacity: 0.7; animation: wc-cloud-drift-one 18s ease-in-out infinite alternate; }
.dl-wclock .cloud-two { top: 62%; left: 13%; opacity: 0.31; transform: scale(0.72); animation: wc-cloud-drift-two 22s ease-in-out infinite alternate; }
.dl-wclock .cloud-three { top: 8%; left: 44%; opacity: 0.24; transform: scale(0.54); animation: wc-cloud-drift-one 26s ease-in-out infinite alternate-reverse; }
.dl-wclock .weather-scene.weather-clear .cloud-one { opacity: 0.21; }
.dl-wclock .weather-scene.weather-clear .cloud-two,
.dl-wclock .weather-scene.weather-clear .cloud-three { opacity: 0.09; }
.dl-wclock .weather-scene.weather-rain .cloud,
.dl-wclock .weather-scene.weather-storm .cloud { color: #8ea6b2; background: rgba(142, 166, 178, 0.54); }
.dl-wclock .weather-scene.weather-fog .cloud { opacity: 0.15; }

.dl-wclock .rain-field,
.dl-wclock .snow-field,
.dl-wclock .fog-field,
.dl-wclock .lightning {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.dl-wclock .weather-scene.weather-rain .rain-field,
.dl-wclock .weather-scene.weather-storm .rain-field,
.dl-wclock .weather-scene.weather-snow .snow-field,
.dl-wclock .weather-scene.weather-fog .fog-field,
.dl-wclock .weather-scene.weather-storm .lightning { opacity: 1; }

.dl-wclock .rain-field i {
  position: absolute;
  top: -25%;
  left: calc(3% + var(--i) * 9%);
  width: 1px;
  height: 27px;
  background: linear-gradient(transparent, rgba(174, 230, 255, 0.74));
  transform: rotate(13deg);
  animation: wc-rain-fall calc(1.1s + var(--i) * 0.06s) linear infinite;
  animation-delay: calc(var(--i) * -0.17s);
}

.dl-wclock .snow-field i {
  position: absolute;
  top: -8%;
  left: calc(5% + var(--i) * 9.4%);
  width: calc(3px + var(--i) * 0.2px);
  height: calc(3px + var(--i) * 0.2px);
  background: rgba(246, 253, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  animation: wc-snow-fall calc(5.5s + var(--i) * 0.35s) linear infinite;
  animation-delay: calc(var(--i) * -0.65s);
}

.dl-wclock .fog-field i {
  position: absolute;
  right: -18%;
  left: -18%;
  height: 20px;
  background: linear-gradient(90deg, transparent, rgba(220, 237, 242, 0.28), transparent);
  filter: blur(7px);
  border-radius: 50%;
  animation: wc-fog-drift 10s ease-in-out infinite alternate;
}

.dl-wclock .fog-field i:nth-child(1) { top: 24%; }
.dl-wclock .fog-field i:nth-child(2) { top: 43%; animation-delay: -3s; }
.dl-wclock .fog-field i:nth-child(3) { top: 61%; animation-delay: -6s; }
.dl-wclock .fog-field i:nth-child(4) { top: 78%; animation-delay: -9s; }

.dl-wclock .lightning {
  background: radial-gradient(circle at 72% 18%, rgba(215, 220, 255, 0.32), transparent 23%);
  animation: wc-storm-glow 8s steps(1, end) infinite;
}

.dl-wclock .weather-grain {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image:
    repeating-linear-gradient(116deg, transparent 0 8px, rgba(255, 255, 255, 0.06) 8.5px 9px),
    linear-gradient(transparent, rgba(0, 0, 0, 0.14));
  mix-blend-mode: soft-light;
}

.dl-wclock .weather-scene.is-compact .celestial { top: 7px; right: 6px; width: 12px; height: 12px; box-shadow: 0 0 10px rgba(255, 203, 102, 0.52); }
.dl-wclock .weather-scene.is-compact .cloud { width: 31px; height: 9px; }
.dl-wclock .weather-scene.is-compact .cloud i { display: none; }
.dl-wclock .weather-scene.is-compact .cloud-one { top: 14px; right: 7px; }
.dl-wclock .weather-scene.is-compact .cloud-two { top: 5px; left: 2px; }
.dl-wclock .weather-scene.is-compact .cloud-three { display: none; }
.dl-wclock .weather-scene.is-compact .rain-field i { height: 8px; }
.dl-wclock .weather-scene.is-compact .star-field i { width: 1px; height: 1px; }

.dl-wclock .strip-ambient {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.34;
  border-radius: inherit;
}
.dl-wclock.home-is-day .strip-ambient { opacity: 0.46; }
.dl-wclock .strip-ambient .sky-wash { opacity: 0.32; }
.dl-wclock .strip-ambient .celestial { top: -58px; right: 18%; width: 130px; height: 130px; }
.dl-wclock .strip-ambient .weather-scene.is-night .celestial { top: -28px; right: 19%; width: 78px; height: 78px; }
.dl-wclock .strip-ambient .cloud-one { top: 47%; right: 3%; }
.dl-wclock .strip-ambient .cloud-two { top: 35%; left: 21%; }
.dl-wclock .strip-ambient .cloud-three { top: -8%; left: 52%; }
.dl-wclock .strip-ambient .rain-field i { height: 15px; }
.dl-wclock .strip-ambient .fog-field i { height: 10px; filter: blur(4px); }
.dl-wclock .city-card .weather-scene.is-compact .celestial { top: 15px; right: 45px; width: 36px; height: 36px; }
.dl-wclock .city-card .weather-scene.is-compact .cloud { width: 78px; height: 20px; }
.dl-wclock .city-card .weather-scene.is-compact .cloud-one { top: 43px; right: 8px; }
.dl-wclock .city-card .weather-scene.is-compact .cloud-two { top: 7px; left: 44%; }
.dl-wclock .city-card .weather-scene.is-compact .rain-field i { height: 19px; }

/* ── City manager dialog ── */
.dl-wclock .city-dialog {
  width: min(780px, calc(100vw - 30px));
  max-width: none;
  max-height: min(820px, calc(100dvh - 30px));
  padding: 0;
  overflow: visible;
  /* Explicit (not var(--text)): the manager surface is always dark, but the
     root's home-is-day state flips --text to a dark ink — self-lit rule. */
  color: #f6faff;
  background: transparent;
  border: 0;
}

.dl-wclock .city-dialog::backdrop {
  background: rgba(1, 6, 10, 0.78);
  backdrop-filter: blur(14px) saturate(0.75);
}

.dl-wclock .city-dialog[open] { animation: wc-dialog-in 300ms var(--ease-out) both; }

.dl-wclock .city-manager {
  display: flex;
  max-height: min(820px, calc(100dvh - 30px));
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 4% 0%, rgba(77, 214, 255, 0.09), transparent 25%),
    linear-gradient(145deg, #0d1924, #08121c);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 25px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.06);
}

.dl-wclock .city-manager > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 27px 28px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dl-wclock .city-manager header h2 {
  margin: 0;
  font-size: 29px;
  font-weight: 570;
  letter-spacing: -0.045em;
}

.dl-wclock .city-manager header > div > span {
  display: block;
  margin-top: 5px;
  color: #718497;
  font-size: 10px;
}

.dl-wclock .city-manager header > button {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: #a7b6c4;
  font-size: 22px;
  font-weight: 300;
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 11px;
  cursor: pointer;
}

.dl-wclock .home-selector {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 20px 28px 0;
  padding: 13px 14px;
  background: rgba(77, 214, 255, 0.055);
  border: 1px solid rgba(77, 214, 255, 0.14);
  border-radius: 14px;
}

.dl-wclock .home-selector > div {
  display: flex;
  align-items: center;
  gap: 11px;
}

.dl-wclock .home-selector p {
  display: flex;
  margin: 0;
  flex-direction: column;
  gap: 3px;
}

.dl-wclock .home-selector small {
  color: #6f8798;
  font-size: 7px;
  font-weight: 850;
  letter-spacing: 0.12em;
}

.dl-wclock .home-selector b { font-size: 11px; }

.dl-wclock .home-selector > button {
  min-height: 34px;
  padding: 0 12px;
  color: #cceff7;
  font-size: 9px;
  font-weight: 750;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  cursor: pointer;
}

.dl-wclock .home-selector > button:disabled { opacity: 0.55; }

.dl-wclock .location-status {
  margin: 8px 30px 0;
  color: #85a5b7;
  font-size: 9px;
}

.dl-wclock .location-status[hidden] { display: none; }

.dl-wclock .city-search {
  display: block;
  margin: 18px 28px 13px;
}

.dl-wclock .city-search > span {
  display: block;
  margin-bottom: 7px;
  color: #7f91a2;
  font-size: 8px;
  font-weight: 750;
}

.dl-wclock .city-search > div { position: relative; }

.dl-wclock .city-search i {
  position: absolute;
  z-index: 1;
  top: 13px;
  left: 14px;
  width: 11px;
  height: 11px;
  border: 1.5px solid #6f8395;
  border-radius: 50%;
}

.dl-wclock .city-search i::after {
  position: absolute;
  right: -5px;
  bottom: -3px;
  width: 6px;
  height: 1.5px;
  content: "";
  background: #6f8395;
  transform: rotate(45deg);
  transform-origin: left center;
}

/* !important on background/border: the suite's dark theme sets
   `html.dark input{background:#11151b !important;border-color:… !important}`
   (core/dark-tools.css) which would otherwise restyle this field. */
.dl-wclock .city-search input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 39px;
  color: #eef9ff;
  font-size: 11px;
  background: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 11px;
}

.dl-wclock .city-search input::placeholder { color: #536679; }

.dl-wclock .city-options {
  display: grid;
  min-height: 210px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  overflow-y: auto;
  padding: 0 28px 20px;
  scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.dl-wclock .city-option {
  position: relative;
  min-width: 0;
}

.dl-wclock .city-choice {
  display: grid;
  width: 100%;
  min-height: 67px;
  grid-template-columns: 37px minmax(90px, 1fr) auto auto;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  color: #dbe8f1;
  text-align: left;
  background: rgba(255, 255, 255, 0.032);
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: 12px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}

.dl-wclock .city-choice:hover:not(:disabled),
.dl-wclock .city-option.is-selected .city-choice {
  background: rgba(77, 214, 255, 0.06);
  border-color: rgba(77, 214, 255, 0.21);
}

.dl-wclock .city-option.is-home .city-choice {
  background: rgba(169, 245, 140, 0.045);
  border-color: rgba(169, 245, 140, 0.15);
  cursor: default;
}

.dl-wclock .city-code {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  color: #9edbeb;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.05em;
  background: #142534;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
}

.dl-wclock .city-choice-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.dl-wclock .city-choice-copy b {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-wclock .city-choice-copy small {
  overflow: hidden;
  color: #677b8e;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-wclock .time-preview {
  color: #cbd8e2;
  font-size: 13px;
  font-weight: 500;
}

.dl-wclock .selection-mark {
  min-width: 42px;
  color: #6d8498;
  font-size: 8px;
  font-weight: 800;
  text-align: right;
}

.dl-wclock .is-selected .selection-mark { color: #92e2f4; }
.dl-wclock .is-home .selection-mark { color: #b7eba5; }

.dl-wclock .make-home {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: -5px;
  padding: 3px 6px;
  color: #70879a;
  font-size: 7px;
  font-weight: 750;
  background: #0e1c27;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 5px;
  cursor: pointer;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 140ms ease, transform 140ms ease, color 140ms ease;
}

.dl-wclock .city-option:hover .make-home,
.dl-wclock .make-home:focus-visible {
  color: #a7dbe7;
  opacity: 1;
  transform: none;
}

@media (hover: none) {
  .dl-wclock .make-home {
    opacity: 1;
    transform: none;
  }
}

.dl-wclock .no-cities {
  grid-column: 1 / -1;
  display: grid;
  place-content: center;
  color: #617688;
  text-align: center;
}

.dl-wclock .no-cities > span { margin-bottom: 8px; font-size: 28px; }
.dl-wclock .no-cities b { color: #c4d4df; font-size: 12px; }
.dl-wclock .no-cities p { margin: 5px 0 0; font-size: 9px; }

.dl-wclock .city-manager > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  background: rgba(4, 10, 16, 0.35);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.dl-wclock .city-manager footer p { margin: 0; color: #708395; font-size: 9px; }
.dl-wclock .city-manager footer p b { color: #d7e6ef; }
.dl-wclock .city-manager footer > button {
  min-width: 94px;
  height: 36px;
  color: #071018;
  font-size: 10px;
  font-weight: 850;
  background: linear-gradient(135deg, #e8fbff, #9eeaff);
  border-radius: 10px;
  cursor: pointer;
}

/* ── Clock settings dialog ── */
.dl-wclock .clock-settings-dialog {
  width: min(760px, calc(100vw - 30px));
  max-width: none;
  max-height: min(860px, calc(100dvh - 30px));
  padding: 0;
  overflow: visible;
  color: #f7f9fb;
  background: transparent;
  border: 0;
}

.dl-wclock .clock-settings-dialog::backdrop {
  background: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(15px) saturate(0.72);
}

.dl-wclock .clock-settings-dialog[open] { animation: wc-dialog-in 280ms var(--ease-out) both; }

.dl-wclock .clock-settings-panel {
  display: flex;
  max-height: min(860px, calc(100dvh - 30px));
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 0%, rgba(42, 108, 255, 0.11), transparent 27%),
    #050505;
  border: 1px solid #252525;
  border-radius: 25px;
  box-shadow: 0 42px 110px rgba(0, 0, 0, 0.72), inset 0 1px rgba(255, 255, 255, 0.055);
}

.dl-wclock .clock-settings-panel > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 25px 27px 21px;
  background: rgba(5, 5, 5, 0.92);
  border-bottom: 1px solid #232323;
}

.dl-wclock .clock-settings-panel header p {
  margin: 0 0 5px;
  color: #5da4ff;
  font-size: 8px;
  font-weight: 850;
  letter-spacing: 0.16em;
}

.dl-wclock .clock-settings-panel header h2 {
  margin: 0;
  font-size: 27px;
  font-weight: 620;
  letter-spacing: -0.035em;
}

.dl-wclock .clock-settings-panel header > div > span {
  display: block;
  margin-top: 4px;
  color: #777f8b;
  font-size: 10px;
}

.dl-wclock .clock-settings-panel header > button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  color: #acb2bb;
  font-size: 22px;
  font-weight: 300;
  background: #171717;
  border: 1px solid #2b2b2b;
  border-radius: 11px;
  cursor: pointer;
}

.dl-wclock .clock-settings-content {
  overflow-y: auto;
  padding: 22px 27px 28px;
  scrollbar-color: #303030 transparent;
}

.dl-wclock .clock-format-setting,
.dl-wclock .clock-template-setting,
.dl-wclock .flip-theme-setting {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.dl-wclock .clock-format-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 52px;
  border-bottom: 1px solid #202020;
}

.dl-wclock .clock-format-setting legend,
.dl-wclock .clock-template-setting legend,
.dl-wclock .flip-theme-setting legend {
  padding: 0;
  color: #f2f4f7;
  font-size: 14px;
  font-weight: 690;
}

.dl-wclock .clock-format-setting legend { float: left; }

.dl-wclock .settings-segments {
  display: flex;
  padding: 3px;
  background: #1d1d1d;
  border: 1px solid #282828;
  border-radius: 10px;
}

.dl-wclock .settings-segments label { position: relative; cursor: pointer; }
.dl-wclock .settings-segments input { position: absolute; opacity: 0; pointer-events: none; }
.dl-wclock .settings-segments span {
  display: grid;
  min-width: 48px;
  height: 30px;
  place-items: center;
  color: #a2a5ab;
  font-size: 12px;
  font-weight: 720;
  border-radius: 7px;
}
.dl-wclock .settings-segments .is-selected span { color: #fff; background: #147ff3; box-shadow: 0 4px 13px rgba(20, 127, 243, 0.28); }
.dl-wclock .settings-segments label:has(input:focus-visible) span { outline: 2px solid #8bc5ff; outline-offset: 2px; }

.dl-wclock .clock-setting-switch {
  position: relative;
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #202020;
  cursor: pointer;
}

.dl-wclock .clock-setting-switch > span { display: flex; flex-direction: column; gap: 3px; }
.dl-wclock .clock-setting-switch b { font-size: 14px; font-weight: 650; }
.dl-wclock .clock-setting-switch small { color: #707781; font-size: 9px; }
.dl-wclock .clock-setting-switch > input { position: absolute; opacity: 0; pointer-events: none; }
.dl-wclock .clock-setting-switch > i {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
  background: #303033;
  border-radius: 30px;
  box-shadow: inset 0 0 0 1px #39393d;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.dl-wclock .clock-setting-switch > i > span {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #f7f7f7;
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.34);
  transition: transform 180ms var(--ease-out);
}
.dl-wclock .clock-setting-switch > input:checked + i { background: #147ff3; box-shadow: inset 0 0 0 1px #258bf8, 0 0 15px rgba(20, 127, 243, 0.18); }
.dl-wclock .clock-setting-switch > input:checked + i > span { transform: translateX(18px); }
.dl-wclock .clock-setting-switch > input:focus-visible + i { outline: 2px solid #8bc5ff; outline-offset: 3px; }

.dl-wclock .clock-template-setting { margin-top: 25px; }
.dl-wclock .clock-template-setting > legend { margin-bottom: 14px; font-size: 16px; }

.dl-wclock .clock-template-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.dl-wclock .clock-template-option {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 82px;
  grid-template-columns: 100px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 12px;
  padding: 11px 13px;
  color: #f5f7fa;
  background: #050505;
  border: 2px solid #282828;
  border-radius: 11px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.dl-wclock .clock-template-option:hover { background: #090b0f; border-color: #3b414a; transform: translateY(-1px); }
.dl-wclock .clock-template-option.is-selected { background: #060c1a; border-color: #3e78fc; box-shadow: 0 0 0 1px rgba(62, 120, 252, 0.14), 0 12px 30px rgba(0, 0, 0, 0.25); }
.dl-wclock .clock-template-option > input { position: absolute; opacity: 0; pointer-events: none; }
.dl-wclock .clock-template-option:has(input:focus-visible) { outline: 2px solid #9ac8ff; outline-offset: 3px; }

.dl-wclock .clock-template-sample {
  display: grid;
  width: 100px;
  height: 50px;
  overflow: hidden;
  place-items: center;
  background: var(--clock-surface, #000);
  border: 1px solid var(--clock-border, #171717);
  border-radius: 8px;
}

.dl-wclock .template-clock-preview { margin: 0; }
.dl-wclock .template-clock-preview.clock-renderer-flip { font-size: 5.6px; }
.dl-wclock .template-clock-preview.clock-renderer-seven-segment { font-size: 12px; }
.dl-wclock .template-clock-preview.clock-renderer-plain { font-size: 12px; }
.dl-wclock .template-clock-preview .time-visual { box-shadow: none; }
.dl-wclock .clock-template-sample .clock-renderer-seven-segment .time-visual,
.dl-wclock .clock-template-sample .clock-renderer-plain .time-visual {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.dl-wclock .clock-template-copy { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.dl-wclock .clock-template-copy b { overflow: hidden; font-size: 13px; font-weight: 630; text-overflow: ellipsis; white-space: nowrap; }
.dl-wclock .clock-template-copy small { overflow: hidden; color: #747b85; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.dl-wclock .template-check { display: grid; width: 20px; height: 20px; place-items: center; color: #fff; font-size: 10px; font-style: normal; background: #147ff3; border-radius: 50%; opacity: 0; transform: scale(0.7); transition: opacity 150ms ease, transform 150ms var(--ease-out); }
.dl-wclock .clock-template-option.is-selected .template-check { opacity: 1; transform: none; }

.dl-wclock .flip-theme-setting {
  padding-top: 24px;
  margin-top: 25px;
  border-top: 1px solid #202020;
}

.dl-wclock .flip-theme-setting > legend { margin-bottom: 5px; font-size: 16px; }
.dl-wclock .flip-theme-setting > p { margin: 0 0 14px; color: #747b85; font-size: 9px; }

.dl-wclock .clock-settings-panel > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 27px calc(14px + env(safe-area-inset-bottom));
  color: #717781;
  font-size: 9px;
  background: rgba(5, 5, 5, 0.96);
  border-top: 1px solid #242424;
}

.dl-wclock .clock-settings-panel > footer > button {
  min-width: 96px;
  height: 38px;
  color: #fff;
  font-size: 11px;
  font-weight: 780;
  background: #147ff3;
  border-radius: 10px;
  cursor: pointer;
}

/* ── Motion (all names wc-prefixed to avoid page-wide collisions) ── */
@keyframes wc-rail-shimmer { 0%, 68% { transform: translateX(-80%); } 88%, 100% { transform: translateX(130%); } }
@keyframes wc-colon-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.45; } }
@keyframes wc-mechanical-flip-top {
  0% { filter: brightness(1); transform: rotateX(0); }
  100% { filter: brightness(0.55); transform: rotateX(-90deg); }
}
@keyframes wc-mechanical-flip-bottom {
  0% { filter: brightness(0.56); transform: rotateX(90deg); }
  72% { filter: brightness(1.08); transform: rotateX(-5deg); }
  100% { filter: brightness(1); transform: rotateX(0); }
}
@keyframes wc-scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes wc-drawer-in { from { opacity: 0; transform: translateY(-18px) scaleY(0.96); } to { opacity: 1; transform: none; } }
@keyframes wc-dialog-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes wc-quick-style-in { from { opacity: 0; transform: translateY(-7px) scale(0.975); } to { opacity: 1; transform: none; } }
@keyframes wc-sky-breathe { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(3%, 2%, 0) scale(1.05); } }
@keyframes wc-sun-float { from { transform: translateY(-4px) scale(0.96); } to { transform: translateY(5px) scale(1.02); } }
@keyframes wc-star-twinkle { from { opacity: 0.25; transform: scale(0.75); } to { opacity: 1; transform: scale(1.2); } }
@keyframes wc-cloud-drift-one { from { transform: translate3d(-12px, 0, 0) scale(0.88); } to { transform: translate3d(26px, -4px, 0) scale(0.92); } }
@keyframes wc-cloud-drift-two { from { transform: translate3d(14px, 0, 0) scale(0.68); } to { transform: translate3d(-30px, 5px, 0) scale(0.74); } }
@keyframes wc-rain-fall { from { transform: translate3d(0, -20%, 0) rotate(13deg); } to { transform: translate3d(-32px, 145vh, 0) rotate(13deg); } }
@keyframes wc-snow-fall { 0% { transform: translate3d(0, -10%, 0) rotate(0); } 50% { transform: translate3d(15px, 60vh, 0) rotate(130deg); } 100% { transform: translate3d(-7px, 125vh, 0) rotate(260deg); } }
@keyframes wc-fog-drift { from { transform: translateX(-8%) scaleX(0.86); opacity: 0.35; } to { transform: translateX(10%) scaleX(1.05); opacity: 0.72; } }
@keyframes wc-storm-glow { 0%, 72%, 75%, 100% { opacity: 0; } 73% { opacity: 0.55; } 74% { opacity: 0.14; } }

/* ── Responsive ── */
@media (max-width: 1120px) {
  .dl-wclock .clock-strip { grid-template-columns: minmax(92px, 0.58fr) max-content minmax(115px, 0.9fr) auto auto auto; }
  .dl-wclock .home-content { grid-template-columns: 0.7fr 1.12fr 0.9fr; gap: 24px; }
  .dl-wclock .time-hero { font-size: clamp(50px, 7vw, 78px); }
  .dl-wclock .city-rail { grid-auto-columns: minmax(230px, 31%); }
}

@media (max-width: 940px) {
  .dl-wclock .clock-strip { grid-template-columns: minmax(82px, 0.5fr) max-content minmax(100px, 0.85fr) auto auto auto; }
  .dl-wclock .strip-local { padding-right: 15px; border-right: 1px solid var(--line); }
  .dl-wclock .strip-weather { border-left: 0; }
  .dl-wclock .clock-strip .clock-style-control { width: 42px; min-width: 42px; }
  .dl-wclock .clock-strip .clock-settings-button { width: 42px; min-width: 42px; justify-content: center; gap: 0; padding: 0; }
  .dl-wclock .clock-strip .clock-settings-button > span { display: none; }
  .dl-wclock .clock-strip .clock-settings-button > em { margin: -3px 0 0; }
  .dl-wclock .panel-heading { align-items: flex-start; flex-direction: column; }
  .dl-wclock .panel-actions { width: 100%; justify-content: flex-start; }
  .dl-wclock .manage-button { margin-left: auto; }
  .dl-wclock .home-weather,
  .dl-wclock .home-content { min-height: 390px; }
  .dl-wclock .home-content { grid-template-columns: 0.75fr 1.25fr; align-items: center; }
  .dl-wclock .weather-summary { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 24px; align-self: end; }
  .dl-wclock .weather-metrics { flex: 1; margin-top: 0; padding-top: 0; padding-left: 20px; border-top: 0; border-left: 1px solid rgba(255, 255, 255, 0.1); }
  .dl-wclock .city-rail { grid-auto-columns: minmax(235px, 48%); }
}

@media (max-width: 620px) {
  .dl-wclock soundscape-widget { display: none; } /* strip is icon-only tight here — soundscape yields */
  .dl-wclock .clock-strip {
    grid-template-columns: minmax(58px, 1fr) max-content max-content 36px 36px;
    column-gap: 4px;
    min-height: var(--strip-height);
    padding-right: 10px;
    padding-left: 12px;
  }
  .dl-wclock .strip-local { min-width: 0; gap: 7px; padding-right: 9px; }
  .dl-wclock .location-pulse { width: 22px; height: 22px; }
  .dl-wclock .strip-place small { display: none; }
  .dl-wclock .time-strip { margin: 0 6px; font-size: 19px; }
  .dl-wclock .strip-weather { gap: 6px; padding-left: 9px; }
  .dl-wclock .strip-weather .strip-wx-top span { display: none; }
  .dl-wclock .mini-sky { width: 30px; height: 27px; }
  .dl-wclock .strip-toggle { width: 36px; min-height: 36px; padding: 0; justify-content: center; }
  .dl-wclock .strip-toggle > span,
  .dl-wclock .strip-toggle > b { display: none; }
  .dl-wclock .strip-toggle .chevron { margin: -3px 0 0; }
  .dl-wclock.clock-is-open .strip-toggle .chevron { margin-top: 4px; }
  .dl-wclock .clock-panel { right: 0; left: 0; max-height: calc(100dvh - var(--strip-height) - 70px); border-right: 0; border-left: 0; border-radius: 0 0 22px 22px; }
  .dl-wclock .panel-inner { padding: 18px 15px 20px; }
  .dl-wclock .panel-heading { gap: 14px; margin-bottom: 15px; }
  .dl-wclock .panel-heading h2 { font-size: 24px; }
  .dl-wclock .panel-actions { gap: 6px; }
  .dl-wclock .clock-strip .clock-style-control { width: 36px; min-width: 36px; flex: none; }
  .dl-wclock .clock-strip .clock-settings-button { width: 36px; min-width: 36px; height: 36px; justify-content: center; gap: 0; padding: 0; }
  .dl-wclock .clock-strip .clock-settings-button > span { display: none; }
  .dl-wclock .clock-strip .clock-settings-button > em { margin: -3px 0 0; }
  .dl-wclock .clock-strip .clock-style-popover {
    position: fixed;
    top: 78px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100dvh - 96px);
    transform-origin: calc(100% - 50px) 0;
  }
  .dl-wclock .segmented { height: 35px; }
  .dl-wclock .segmented button { min-width: 35px; padding: 0 7px; }
  .dl-wclock .manage-button { width: 35px; height: 35px; padding: 0; justify-content: center; font-size: 0; }
  .dl-wclock .collapse-button { width: 35px; height: 35px; }
  .dl-wclock .home-weather,
  .dl-wclock .home-content { min-height: 424px; }
  .dl-wclock .home-content { grid-template-columns: 1fr; gap: 7px; padding: 22px; }
  .dl-wclock .home-location { align-self: start; }
  .dl-wclock .home-chip { margin-bottom: 11px; }
  .dl-wclock .home-location h2 { font-size: 34px; }
  .dl-wclock .home-clock { align-self: center; text-align: left; }
  .dl-wclock .time-hero { font-size: clamp(48px, 15vw, 68px); }
  .dl-wclock .clock-renderer-flip.time-hero { font-size: clamp(21px, calc(10.2vw - 7.5px), 36px); }
  .dl-wclock .clock-renderer-flip.time-strip { margin-right: 6px; margin-left: 6px; font-size: clamp(13px, 3.8vw, 15px); }
  .dl-wclock .clock-renderer-seven-segment.time-strip,
  .dl-wclock .clock-renderer-plain.time-strip { margin-right: 6px; margin-left: 6px; font-size: clamp(18px, 5.6vw, 22px); }
  .dl-wclock .clock-renderer-seven-segment.time-hero,
  .dl-wclock .clock-renderer-plain.time-hero { font-size: clamp(38px, 12.2vw, 48px); }
  .dl-wclock .home-clock > p { margin-top: 10px; }
  .dl-wclock .weather-summary { grid-column: auto; flex-direction: column; align-items: stretch; gap: 0; align-self: end; padding: 15px; }
  .dl-wclock .weather-reading > strong { font-size: 39px; }
  .dl-wclock .weather-metrics { margin-top: 13px; padding-top: 12px; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.1); border-left: 0; }
  .dl-wclock .world-section-heading { margin-top: 22px; }
  .dl-wclock .world-section-heading p { display: none; }
  .dl-wclock .world-section-heading > button { height: 35px; padding: 0 10px; }
  .dl-wclock .city-rail { grid-auto-columns: minmax(238px, 86%); }
  .dl-wclock .panel-footnote { align-items: flex-start; flex-direction: column; gap: 6px; }
  .dl-wclock .city-dialog { width: 100vw; max-height: 93dvh; margin: auto 0 0; }
  .dl-wclock .city-manager { max-height: 93dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 23px 23px 0 0; }
  .dl-wclock .city-manager > header { padding: 22px 18px 18px; }
  .dl-wclock .city-manager header h2 { font-size: 25px; }
  .dl-wclock .home-selector { margin: 16px 18px 0; }
  .dl-wclock .location-status { margin-right: 20px; margin-left: 20px; }
  .dl-wclock .city-search { margin: 16px 18px 12px; }
  .dl-wclock .city-options { grid-template-columns: 1fr; padding: 0 18px 18px; }
  .dl-wclock .city-choice { grid-template-columns: 37px minmax(95px, 1fr) auto auto; }
  .dl-wclock .make-home { opacity: 1; transform: none; }
  .dl-wclock .city-manager > footer { padding: 14px 18px calc(14px + env(safe-area-inset-bottom)); }
  .dl-wclock .clock-settings-dialog { width: 100vw; max-height: 94dvh; margin: auto 0 0; }
  .dl-wclock .clock-settings-panel { max-height: 94dvh; border-right: 0; border-bottom: 0; border-left: 0; border-radius: 23px 23px 0 0; }
  .dl-wclock .clock-settings-panel > header { padding: 21px 18px 17px; }
  .dl-wclock .clock-settings-panel header h2 { font-size: 24px; }
  .dl-wclock .clock-settings-content { padding: 16px 18px 22px; }
  .dl-wclock .clock-template-grid { grid-template-columns: 1fr; gap: 12px; }
  .dl-wclock .clock-template-option { min-height: 72px; grid-template-columns: 80px minmax(0, 1fr) 20px; gap: 11px; padding: 8px 10px; border-radius: 10px; }
  .dl-wclock .clock-template-sample { width: 80px; height: 42px; }
  .dl-wclock .clock-template-copy b { font-size: 14px; }
  .dl-wclock .clock-template-copy small { display: none; }
  .dl-wclock .clock-settings-panel > footer { padding-right: 18px; padding-left: 18px; }
}

@media (max-width: 380px) {
  .dl-wclock .strip-weather .strip-wx-top strong { font-size: 13px; }
  .dl-wclock .mini-sky { display: none; }
  .dl-wclock .time-strip { margin-right: 4px; margin-left: 4px; font-size: 17px; }
  .dl-wclock .clock-renderer-flip.time-strip { margin-right: 4px; margin-left: 4px; font-size: clamp(13px, 3.7vw, 13.5px); }
  .dl-wclock .clock-renderer-seven-segment.time-strip,
  .dl-wclock .clock-renderer-plain.time-strip { margin-right: 4px; margin-left: 4px; font-size: clamp(17px, 5.4vw, 19px); }
  .dl-wclock .strip-local { padding-right: 7px; }
  .dl-wclock .location-pulse { display: none; }
  .dl-wclock .panel-actions .unit-switcher { display: none; }
  .dl-wclock .clock-template-option { grid-template-columns: 80px minmax(0, 1fr) 20px; gap: 10px; }
  .dl-wclock .city-choice { grid-template-columns: 34px 1fr auto; }
  .dl-wclock .city-choice .time-preview { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-wclock,
  .dl-wclock *,
  .dl-wclock *::before,
  .dl-wclock *::after {
    scroll-behavior: auto !important;
    animation-delay: 0ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   WEATHER REALISM PASS
   The scenes were readable but mechanical: 11 identical rain drops on an even
   9% grid at one slant, clouds built from three circles, a static sun. Real
   weather has depth, variation and drift, so each effect below is layered into
   near / mid / far bands that move at different speeds.

   PERFORMANCE: this widget is sticky and on screen the whole session, so every
   animation here is transform/opacity ONLY (compositor work, no layout or
   paint). No filters are animated — the cloud blur is static and rasterised
   once. Reduced-motion is honoured at the end of the block.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Clouds: vector silhouettes, three parallax depths ── */
/* was `background: none !important` when clouds were inline SVG; the mask
   fill below needs this slot, so the !important is gone deliberately. */
.dl-wclock .cloud { border-radius: 0; }
.dl-wclock .cloud i { display: none; }          /* retire the old 3-circle body */
.dl-wclock .cloud svg {
  width: 100%; height: 100%; display: block;
  fill: currentColor;
  filter: blur(0.6px);                          /* static — softens the vector edge */
  /* SVG clips at its viewport by default, which sliced the blurred crown flat
     and drew a thin line across the top of every cloud. The viewBox is padded
     (see CLOUD_SVG) and this lets any remaining softness spill rather than cut. */
  overflow: visible;
}
.dl-wclock .cloud-one   { width: 112px; height: 50px; top: 26%; right: 4%;  opacity: .70; color: rgba(255,255,255,.86);
  animation: wc-cloud-near 34s linear infinite; }
.dl-wclock .cloud-two   { width: 86px;  height: 38px; top: 58%; left: 10%;  opacity: .34; color: rgba(255,255,255,.72);
  animation: wc-cloud-mid 52s linear infinite; }
.dl-wclock .cloud-three { width: 64px;  height: 28px; top: 8%;  left: 40%;  opacity: .22; color: rgba(255,255,255,.6);
  animation: wc-cloud-far 74s linear infinite; }
.dl-wclock .weather-scene.weather-clouds .cloud-one   { opacity: .82; }
.dl-wclock .weather-scene.weather-clouds .cloud-two   { opacity: .5; }
.dl-wclock .weather-scene.weather-clouds .cloud-three { opacity: .34; }
.dl-wclock .weather-scene.weather-rain .cloud,
.dl-wclock .weather-scene.weather-storm .cloud { color: rgba(150,168,181,.9); }
.dl-wclock .weather-scene.weather-storm .cloud-one { color: rgba(120,134,150,.95); }

@keyframes wc-cloud-near { from { transform: translate3d(14%,0,0); } to { transform: translate3d(-128%,0,0); } }
@keyframes wc-cloud-mid  { from { transform: translate3d(-118%,0,0) scale(.86); } to { transform: translate3d(150%,0,0) scale(.86); } }
@keyframes wc-cloud-far  { from { transform: translate3d(150%,0,0) scale(.7); } to { transform: translate3d(-160%,0,0) scale(.7); } }

/* ── Sun: slow ray turn + a breathing bloom on the disc ── */
.dl-wclock .celestial { position: relative; }
.dl-wclock .sun-rays {
  /* Sized in px and centred with negative margins — NOT inset:-120%, which
     resolved against the .celestial box and produced a 442px ray field inside
     a 62px strip. Margin centring also leaves `transform` free for the slow
     turn; a translate(-50%,-50%) here would be overwritten by the animation. */
  position: absolute; left: 50%; top: 50%;
  width: 72px; height: 72px; margin: -36px 0 0 -36px;
  stroke: rgba(255,226,150,.5); stroke-width: 2.5; stroke-linecap: round;
  opacity: 0; transition: opacity .6s ease;
  animation: wc-sun-turn 120s linear infinite;
}
.dl-wclock .weather-scene.weather-clear.is-day .sun-rays { opacity: .55; }
.dl-wclock .weather-scene.weather-clear.is-day .celestial > span { animation: wc-sun-bloom 7s ease-in-out infinite; }
@keyframes wc-sun-turn  { to { transform: rotate(360deg); } }
@keyframes wc-sun-bloom { 0%,100% { transform: scale(1); opacity: .95; } 50% { transform: scale(1.06); opacity: 1; } }

/* ── Rain: depth bands, varied streaks, wind slant ──
   --d 0 near / 1 mid / 2 far. Horizontal step uses 5.7% (not a round number)
   so drops never form a visible grid. */
.dl-wclock .rain-field { --wind: 14deg; }
.dl-wclock .weather-scene.weather-storm .rain-field { --wind: 22deg; }
.dl-wclock .rain-field i {
  position: absolute;
  top: -30%;
  left: calc(-4% + var(--i) * 5.7%);
  width: 1px;
  height: calc(26px - var(--d) * 7px);
  background: linear-gradient(transparent, rgba(186,234,255,calc(.82 - var(--d) * .22)));
  transform: rotate(var(--wind));
  transform-origin: top center;
  opacity: calc(1 - var(--d) * .25);
  animation: wc-rain-streak calc(.78s + var(--d) * .3s + var(--i) * .012s) linear infinite;
  animation-delay: calc(var(--i) * -0.113s);
}
/* Splashes where the near drops land — the detail that sells rain as falling
   ON something rather than just past the frame. */
.dl-wclock .splash-field { position: absolute; inset: 0; opacity: 0; }
.dl-wclock .weather-scene.weather-rain .splash-field,
.dl-wclock .weather-scene.weather-storm .splash-field { opacity: 1; }
.dl-wclock .splash-field i {
  position: absolute;
  bottom: 4%;
  left: calc(8% + var(--i) * 16%);
  width: 9px; height: 3px;
  border: 1px solid rgba(198,238,255,.5);
  border-top: 0; border-radius: 0 0 9px 9px;
  transform: scale(0);
  animation: wc-splash calc(1.4s + var(--i) * .21s) ease-out infinite;
  animation-delay: calc(var(--i) * -0.37s);
}
@keyframes wc-rain-streak { to { transform: rotate(var(--wind)) translate3d(0, 210px, 0); } }
@keyframes wc-splash {
  0%       { transform: scale(.2); opacity: 0; }
  12%      { transform: scale(1);  opacity: .75; }
  40%,100% { transform: scale(1.5); opacity: 0; }
}

/* ── Snow: sway as it falls, three depths ── */
.dl-wclock .snow-field i {
  position: absolute;
  top: -8%;
  left: calc(2% + var(--i) * 7.1%);
  width: calc(4px - var(--d) * 1px);
  height: calc(4px - var(--d) * 1px);
  background: rgba(248,253,255,calc(.92 - var(--d) * .22));
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255,255,255,.45);
  animation: wc-snow-drift calc(6s + var(--d) * 2.5s + var(--i) * .22s) linear infinite;
  animation-delay: calc(var(--i) * -0.54s);
}
@keyframes wc-snow-drift {
  0%   { transform: translate3d(0,0,0); }
  25%  { transform: translate3d(7px, 26%, 0); }
  50%  { transform: translate3d(-5px, 52%, 0); }
  75%  { transform: translate3d(6px, 76%, 0); }
  100% { transform: translate3d(0, 210px, 0); }
}

/* ── Storm: a real strike reads as a double flash, not a single fade ── */
.dl-wclock .weather-scene.weather-storm .lightning {
  background:
    radial-gradient(circle at 70% 12%, rgba(226,232,255,.55), transparent 34%),
    radial-gradient(circle at 30% 0%,  rgba(200,214,255,.22), transparent 46%);
  animation: wc-strike 9s steps(1,end) infinite;
}
@keyframes wc-strike {
  0%, 3.5%, 5.5%, 100% { opacity: 0; }
  1.5%  { opacity: 1; }
  4.5%  { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-wclock .cloud,
  .dl-wclock .sun-rays,
  .dl-wclock .celestial > span,
  .dl-wclock .rain-field i,
  .dl-wclock .splash-field i,
  .dl-wclock .snow-field i,
  .dl-wclock .weather-scene.weather-storm .lightning { animation: none; }
  .dl-wclock .splash-field i { opacity: .4; transform: scale(1); }
}

/* The strip is much shorter than the hero card, so it carries its own smaller
   scene sizes (see .strip-ambient rules above). Those predate the depth bands
   and flatten them — restate them here as depth-aware so near/mid/far still
   differ in the strip, just at strip scale. Specificity (0,3,1) matches the
   originals and wins on document order. */
.dl-wclock .strip-ambient .rain-field i { height: calc(17px - var(--d) * 4px); }
.dl-wclock .strip-ambient .snow-field i { width: calc(3px - var(--d) * .6px); height: calc(3px - var(--d) * .6px); }
.dl-wclock .strip-ambient .cloud-one   { width: 74px; height: 33px; }
.dl-wclock .strip-ambient .cloud-two   { width: 58px; height: 26px; }
.dl-wclock .strip-ambient .cloud-three { width: 44px; height: 20px; }
.dl-wclock .strip-ambient .splash-field i { width: 7px; height: 2px; }

/* Ray field scales with the host: the strip is 62px tall and the mini sky is
   12px, so one size cannot serve all three scenes. */
.dl-wclock .strip-ambient .sun-rays { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
.dl-wclock .weather-scene.is-compact .sun-rays { width: 26px; height: 26px; margin: -13px 0 0 -13px; stroke-width: 4; }

/* ── Idle layers must not animate ──
   The scene keeps every layer in the DOM and switches them with opacity, so
   snow kept falling behind a rain scene and fog kept drifting behind a clear
   one — invisible, but still compositing every frame, in three scenes, for the
   whole session. Park them unless their condition is on. */
.dl-wclock .rain-field i,
.dl-wclock .splash-field i,
.dl-wclock .snow-field i,
.dl-wclock .fog-field i,
.dl-wclock .lightning { animation-play-state: paused; }

.dl-wclock .weather-scene.weather-rain .rain-field i,
.dl-wclock .weather-scene.weather-rain .splash-field i,
.dl-wclock .weather-scene.weather-storm .rain-field i,
.dl-wclock .weather-scene.weather-storm .splash-field i,
.dl-wclock .weather-scene.weather-storm .lightning,
.dl-wclock .weather-scene.weather-snow .snow-field i,
.dl-wclock .weather-scene.weather-fog .fog-field i { animation-play-state: running; }

/* Sun rays only turn when the sun is actually out. */
.dl-wclock .sun-rays { animation-play-state: paused; }
.dl-wclock .weather-scene.weather-clear.is-day .sun-rays { animation-play-state: running; }

/* ── Overcast is a MIX, not one flat tone ──
   A real cloud deck stacks: the low, near cloud is in its own shadow and reads
   dark, while the higher, farther ones still catch light and stay bright. So
   near = dark, far = bright, rather than three identical white shapes.
   Same specificity (0,4,0) as the earlier weather-clouds opacity rules, so
   these win on document order. */
.dl-wclock .weather-scene.weather-clouds .cloud-one   { color: rgba(118,132,150,.92); opacity: .9; }
.dl-wclock .weather-scene.weather-clouds .cloud-two   { color: rgba(190,201,215,.88); opacity: .62; }
.dl-wclock .weather-scene.weather-clouds .cloud-three { color: rgba(255,255,255,.82); opacity: .42; }
/* A soft underside shadow on the near cloud gives it volume instead of reading
   as a flat cut-out. Static filter — rasterised once, never animated. */
/* Diffuse, not a hard offset: a tight 3px shadow traced the cloud's underside
   and read as a drawn line. Wider blur + less offset gives volume without an
   edge. */
.dl-wclock .weather-scene.weather-clouds .cloud-one svg {
  filter: blur(.6px) drop-shadow(0 1px 7px rgba(38,50,68,.22));
}
/* After dark the deck loses its lit tops — everything drops toward slate. */
.dl-wclock .weather-scene.weather-clouds.is-night .cloud-one   { color: rgba(70,82,100,.95); }
.dl-wclock .weather-scene.weather-clouds.is-night .cloud-two   { color: rgba(112,126,146,.85); }
.dl-wclock .weather-scene.weather-clouds.is-night .cloud-three { color: rgba(152,167,186,.72); }

/* The city card's footer divider is the one horizontal rule that actually
   paints inside a card (the cloud "lines" reported earlier were a clipped
   blur, now fixed). Fade its ends to match the treatment used elsewhere —
   a hard rule stopping dead against the card's rounded edge is what made it
   read as a seam. border-image needs its slice (`1`) and overrides
   border-color, so the tone lives in the gradient. */
.dl-wclock .city-card footer {
  border-image: linear-gradient(90deg,
    transparent 0%, rgba(255,255,255,.16) 12%,
    rgba(255,255,255,.16) 88%, transparent 100%) 1;
}

/* ══ Cloud boxes must match the artwork's proportions ══
   The cloud element sizes were inherited from the old three-circle blob, which
   was a wide flat shape: 31×9 in compact scenes (3.44:1) and 78×20 in city
   cards (3.9:1). The drawn cloud is 1.74:1, so stretching it into those boxes
   squashed it vertically by up to 2× — which is what flattened the dome into a
   bar and read as "flat-topped clouds". Measuring the PATH looked fine the
   whole time; the distortion happens at render.

   Two-part fix: the SVG now scales uniformly (preserveAspectRatio="xMidYMid
   meet", see CLOUD_SVG) so it can never distort again, and the boxes below
   derive their height from their width via aspect-ratio so the cloud fills
   them instead of sitting in a letterboxed gap.

   Each selector mirrors an existing one exactly, so it wins on document order
   rather than a specificity fight. */
.dl-wclock .cloud { aspect-ratio: 122 / 70; }
.dl-wclock .cloud-one   { width: 112px; height: auto; }
.dl-wclock .cloud-two   { width: 86px;  height: auto; }
.dl-wclock .cloud-three { width: 64px;  height: auto; }
.dl-wclock .weather-scene.is-compact .cloud { width: 34px; height: auto; }
.dl-wclock .city-card .weather-scene.is-compact .cloud { width: 76px; height: auto; }
.dl-wclock .strip-ambient .cloud-one   { width: 72px; height: auto; }
.dl-wclock .strip-ambient .cloud-two   { width: 56px; height: auto; }
.dl-wclock .strip-ambient .cloud-three { width: 42px; height: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   CLOUDS → PNG MASKS  (replaces the inline SVG entirely)

   Three vector attempts each shipped a visible straight edge: a flat segment in
   the path, then a blur clipped flat by the SVG viewport, then non-uniform
   scaling squashing the dome into a bar. Each fix was real and each time a
   different straight edge appeared. A blurred raster silhouette removes the
   whole class of bug — no path, no viewBox, nothing to clip or stretch wrong.

   The PNG carries ALPHA ONLY and is used as a mask, so the fill still comes
   from currentColor and every existing weather tint keeps working untouched
   (overcast near/far tones, storm grey, night slate).
   mask-size:contain means the aspect can never distort, whatever box it gets.
   ══════════════════════════════════════════════════════════════════════════ */
.dl-wclock .cloud {
  background: currentColor;
  aspect-ratio: 1.5;
  -webkit-mask-image: var(--cloud-src);
          mask-image: var(--cloud-src);
  -webkit-mask-size: contain;  mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  filter: none;                /* the PNG edge is already soft */
}
.dl-wclock .cloud-one   { --cloud-src: url("img/cloud-1.png"); }
.dl-wclock .cloud-two   { --cloud-src: url("img/cloud-2.png"); }
.dl-wclock .cloud-three { --cloud-src: url("img/cloud-3.png"); }
.dl-wclock .cloud svg   { display: none; }   /* belt-and-braces if markup lingers */

/* The near cloud keeps its volume shadow — applied to the element now that the
   shape is a mask rather than a child SVG. */
.dl-wclock .weather-scene.weather-clouds .cloud-one {
  filter: drop-shadow(0 2px 8px rgba(38,50,68,.24));
}