/* ============================================================
   Clock & Weather PWA — layout shell (zero-overlap by STRUCTURE)
   Floor: iOS Safari 13.4+, Android 7+ WebView, Tizen, Fire TV Silk.
   clamp()/min()/max()/grid-gap are SAFE at this floor — used freely.
   ============================================================ */

:root{
  /* Per-side title-safe insets: 5vmin floor, but expand to the device's real
     safe-area on each edge so the Dynamic Island / notch never clips content
     (portrait => top; landscape => the island sits on a side). */
  --safe-top:max(5vmin,env(safe-area-inset-top,0px));
  --safe-right:max(5vmin,env(safe-area-inset-right,0px));
  --safe-bottom:max(5vmin,env(safe-area-inset-bottom,0px));
  --safe-left:max(5vmin,env(safe-area-inset-left,0px));
  --safe-inset:var(--safe-top);             /* back-compat alias */
  --shift-budget:8px;                       /* < smallest safe inset, always */
  --chrome-band:clamp(48px,9vmin,96px);
  --gap:clamp(8px,2vmin,24px);

  /* palette (near-black, no large bright fills) */
  --bg:#000;
  --fg:#e8e8ea;
  --fg-dim:#9a9aa2;
  --accent:#4fa3ff;
  --focus:#ffd23f;
  --hand:#e8e8ea;
  --hand-sec:#ff5a5f;
  --face:#16181d;
  --tick:#5a5d66;

  /* Block Matrix (dot-matrix LED) palette — overridable by night-dim */
  --led-on:#87ceeb;
  --led-off:rgba(135,206,235,.06);
  --led-glow:rgba(135,206,235,.35);
}

/* night-dim palette: applied via .app.night, orthogonal to chrome state */
.app.night{
  --fg:#7c7c84;
  --fg-dim:#55555c;
  --hand:#7c7c84;
  --hand-sec:#a85357;
  --tick:#34363c;
  /* dim the LEDs at night too */
  --led-on:#4a6b78;
  --led-off:rgba(135,206,235,.04);
  --led-glow:rgba(135,206,235,.18);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--fg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}

/* Weather FX canvas sits behind the app content; never blocks input. */
.fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;
  opacity:0;transition:opacity .8s ease}

.app{
  position:fixed;inset:0;
  padding:var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left);
  display:grid;gap:var(--gap);
  z-index:1;
  transform:translate(var(--shift-x,0px),var(--shift-y,0px));
  transition:transform 2s ease-in-out;
}

/* ---- Orientation via @media ONLY (no JS reflow, no reload) ---- */
@media (orientation:portrait){
  .app{
    grid-template-columns:1fr;
    grid-template-rows:auto minmax(0,1fr) var(--chrome-band); /* minmax(0,…) load-bearing */
    grid-template-areas:"weather" "stage" "chrome";
  }
}
@media (orientation:landscape){
  .app{
    grid-template-columns:clamp(180px,26vw,340px) 1fr;
    grid-template-rows:minmax(0,1fr) var(--chrome-band);
    grid-template-areas:"weather stage" "weather chrome";
  }
}

/* ---- Forced orientation (settings override). Class specificity (0,2,0)
   beats the @media `.app` rules (0,1,0), so device orientation is ignored. ---- */
.app.force-portrait{
  grid-template-columns:1fr;
  grid-template-rows:auto minmax(0,1fr) var(--chrome-band);
  grid-template-areas:"weather" "stage" "chrome";
}
.app.force-landscape{
  grid-template-columns:clamp(180px,26vw,340px) 1fr;
  grid-template-rows:minmax(0,1fr) var(--chrome-band);
  grid-template-areas:"weather stage" "weather chrome";
}

/* ---- Regions ---- */
.stage{grid-area:stage;min-width:0;min-height:0;display:grid;place-items:center;
  padding:clamp(4px,2.4vmin,40px)} /* min:0 lets it shrink below content; padding gives the clock air */
.weather{grid-area:weather;min-width:0;min-height:0;overflow:hidden;display:flex;align-items:flex-start}
@media (orientation:landscape){
  .weather{align-items:center} /* vertically balanced rail card on wide screens */
}
.chrome{
  grid-area:chrome;min-width:0;display:flex;align-items:center;justify-content:center;
  gap:clamp(8px,3vmin,32px);opacity:0;pointer-events:none;transition:opacity .4s ease; /* band ALWAYS reserved */
}
.chrome.is-visible{opacity:1;pointer-events:auto}

/* clock fills its CELL, never the viewport */
.stage>svg,.stage>.digital{width:100%;height:100%}

/* ---- Always-present dim layer ---- */
.dim{position:fixed;inset:0;pointer-events:none;background:#000;opacity:0;transition:opacity 1.5s ease;z-index:5}

/* ---- Panel: ZERO layout space when closed ---- */
.panel{display:none}
.panel.is-open{display:grid;position:fixed;inset:0;place-items:center;background:rgba(0,0,0,.85);z-index:10}

/* ============================================================
   Styling on top of the shell
   ============================================================ */

/* Clock — digital */
.digital{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}

/* SVG-based clocks scale by viewBox; capped so they breathe instead of filling edge-to-edge */
.analog-svg, .digital-svg{display:block;max-width:100%;max-height:100%}
.digital-svg{max-width:min(100%,1080px);max-height:min(100%,46vh)}
.analog-svg{max-width:min(100%,64vmin,560px);max-height:min(100%,64vmin,560px)}

/* ---- Flip-clock (split-flap) digital style ---- */
.flip{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(8px,2.4vmin,22px);width:100%;height:100%}
.flip-date{font-size:clamp(12px,2.8vmin,24px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600;order:-1}
.flip-row{display:flex;align-items:center;justify-content:center;gap:var(--flip-gap,14px)}

.flip-group{
  --r:calc(var(--flip-h,120px)*.12);
  position:relative;overflow:hidden;
  width:var(--flip-w,160px);height:var(--flip-h,120px);border-radius:var(--r);
  font-weight:700;font-size:calc(var(--flip-h,120px)*.84);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:var(--fg);
  /* two-tone tile = the upper/lower flap halves; hard line at 50% is the fold */
  background:linear-gradient(180deg,#23272f 0 calc(50% - 1px),#0c0d10 50%,#16191f calc(50% + 1px) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 2px 6px rgba(0,0,0,.4);
}
/* the rolling reel of digit cells (single GPU transform — smooth on mobile) */
.fg-reel{position:absolute;left:0;top:0;width:100%;will-change:transform;
  transform:translateY(0) translateZ(0);backface-visibility:hidden}
.fg-reel.anim{transition:transform .42s cubic-bezier(.33,.68,.28,1)}
.fg-cell{height:var(--flip-h,120px);line-height:var(--flip-h,120px);text-align:center;width:100%}
/* seam line drawn on top of the rolling digits */
.flip-group::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
  transform:translateY(-50%);background:rgba(0,0,0,.6);
  box-shadow:0 1px 0 rgba(255,255,255,.05);z-index:3;pointer-events:none}

.flip-ampm{font-size:calc(var(--flip-h,120px)*.26);font-weight:600;color:var(--fg-dim);
  align-self:flex-start;margin-top:calc(var(--flip-h,120px)*.06);letter-spacing:.04em}

/* ---- Block Matrix (dot-matrix LED) style ---- */
.block{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px,2.4vmin,22px)}
.block-date{font-size:clamp(12px,2.8vmin,24px);letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600;order:-1}
/* SVG fits its cell by viewBox; capped so it never overflows siblings */
.block-svg{display:block;max-width:100%;max-height:min(100%,52vh)}
.led{transform-box:fill-box;transform-origin:center;
  transition:transform .35s ease,opacity .35s ease,fill .35s ease}
.led.on{fill:var(--led-on);opacity:1;transform:scale(1);
  filter:drop-shadow(0 0 1.5px var(--led-glow))}
.led.off{fill:var(--led-off);transform:scale(.62)}
@media (prefers-reduced-motion: reduce){
  .led{transition:none}
}

/* Weather card */
.wx-empty{color:var(--fg-dim);font-size:clamp(14px,3vmin,22px);padding:.6em .2em;letter-spacing:.02em}
/* Seamless: no card chrome — weather floats on the black bg like the clock/date */
.wx-card{
  display:flex;flex-direction:column;gap:clamp(6px,1.4vmin,14px);width:100%;
  background:none;border:0;border-radius:0;padding:0;
}
/* eyebrow: small, uppercase, tracked label above the reading */
.wx-place{order:-1;font-size:clamp(10px,1.8vmin,13px);letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-dim);font-weight:600}
.wx-top{display:flex;align-items:center;gap:clamp(8px,1.6vmin,14px)}
.wx-icon{font-size:clamp(30px,6vmin,52px);line-height:1;filter:grayscale(1);opacity:.92} /* monochrome, no toy color */
/* hero temp: big °F primary + small °C secondary, both always shown */
.wx-temp{display:flex;align-items:baseline;gap:clamp(4px,1.2vmin,12px);min-width:0;
  font-variant-numeric:tabular-nums}
.wx-temp .big{font-size:clamp(34px,7.5vmin,68px);font-weight:300;line-height:1;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.wx-temp .big .u{font-size:.5em;color:var(--fg-dim);font-weight:400}
.wx-temp .small{font-size:clamp(13px,2.6vmin,20px);color:var(--fg-dim);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wx-cond{font-size:clamp(14px,2.8vmin,22px);color:var(--fg);font-weight:400}
.wx-meta{display:flex;gap:clamp(8px,1.6vmin,16px);flex-wrap:wrap;align-items:center;
  font-size:clamp(12px,2.2vmin,16px);color:var(--fg-dim);font-variant-numeric:tabular-nums}
.wx-meta>span{position:relative}
.wx-meta>span+span{padding-left:clamp(8px,1.6vmin,16px)}
.wx-meta>span+span::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:1px;height:1em;background:rgba(255,255,255,.14)}
.wx-stale{font-size:clamp(11px,2vmin,14px);color:#d9883a;letter-spacing:.02em}

/* Sun-position arc — also seamless, no divider */
.wx-sun{width:100%;margin-top:clamp(4px,1.4vmin,14px)}
.sunarc-svg{display:block;width:100%;height:auto;overflow:visible}
.sunarc-sun{transition:transform 1.2s cubic-bezier(.4,0,.2,1)}
.sunarc-core{animation:sunPulse 3.2s ease-in-out infinite}
@keyframes sunPulse{0%,100%{opacity:1}50%{opacity:.78}}
/* Below-horizon: dim the sun, cool the warm arc */
.sunarc-svg.is-night .sunarc-sun{opacity:.35}
.sunarc-svg.is-night{--sun:#8aa0c8}
@media (prefers-reduced-motion: reduce){
  .sunarc-sun{transition:none}
  .sunarc-core{animation:none}
}

/* Secondary clock — small, subtle, top-right; never takes a grid cell */
.second-clock{position:absolute;top:0;right:0;display:flex;align-items:baseline;
  gap:clamp(4px,1vmin,9px);pointer-events:none;
  padding:clamp(2px,1vmin,10px) clamp(6px,1.6vmin,16px);
  font-size:clamp(11px,2vmin,17px);letter-spacing:.06em;color:var(--fg-dim);
  font-variant-numeric:tabular-nums;max-width:55%;overflow:hidden;white-space:nowrap}
.second-clock[hidden]{display:none}
.sc-label{text-transform:uppercase;font-weight:600;opacity:.85}
.sc-time{color:var(--fg)}
.sc-day{font-size:.78em;opacity:.7}

/* Wake-lock status indicator (lives in the chrome band; shows when chrome is visible) */
.wl-status{display:inline-flex;align-items:center;gap:.45em;font:inherit;
  font-size:clamp(11px,2vmin,15px);color:var(--fg-dim);letter-spacing:.02em;
  padding-right:clamp(4px,1.5vmin,12px)}
.wl-dot{width:.62em;height:.62em;border-radius:50%;background:#6b6f78;flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(0,0,0,0)}
.wl-status.is-on .wl-dot{background:#43d17a;box-shadow:0 0 6px rgba(67,209,122,.6)}
.wl-status.is-off .wl-dot{background:#d9883a}
.wl-status.is-on{color:#9fe7bd}
.wl-status.is-off{color:#d9a06a}

/* Controls */
.ctrl{
  font:inherit;font-size:clamp(13px,2.6vmin,20px);color:var(--fg);
  background:#1b1d23;border:1px solid #2c2f38;border-radius:.6em;
  padding:.5em 1em;min-height:44px;min-width:44px;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.ctrl:hover{background:#23262e}
.ctrl-primary{border-color:var(--accent)}

/* Always-visible high-contrast focus ring (D-pad nav) */
.ctrl:focus,.ctrl:focus-visible,
.city-input:focus,.city-input:focus-visible,
[data-nav].is-focus{
  outline:none;
  box-shadow:0 0 0 3px var(--bg),0 0 0 6px var(--focus);
  border-color:var(--focus);
}

/* Settings panel */
.panel-box{
  width:min(560px,92vw);max-height:92vh;overflow:auto;
  background:#101218;border:1px solid #2c2f38;border-radius:1em;
  padding:clamp(16px,4vmin,32px);display:flex;flex-direction:column;gap:clamp(10px,2vmin,18px);
}
.panel-title{margin:0 0 .3em;font-size:clamp(18px,4vmin,28px)}
.row{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vmin,16px)}
.row-col{flex-direction:column;align-items:stretch}
.row-end{justify-content:flex-end}
.row-label{color:var(--fg-dim);font-size:clamp(13px,2.6vmin,18px)}
.city-wrap{display:flex;gap:8px}
.city-input{
  flex:1;font:inherit;font-size:clamp(13px,2.6vmin,18px);color:var(--fg);
  background:#1b1d23;border:1px solid #2c2f38;border-radius:.6em;padding:.5em .8em;min-height:44px;
  -webkit-user-select:text;user-select:text;
}
.city-status{font-size:clamp(12px,2.4vmin,16px);color:var(--fg-dim);min-height:1.2em}

/* Hidden wake-lock video (off-screen, 1px) */
.wl-video{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none;left:-10px;top:-10px;z-index:-1}

/* Reduced motion: kill the shift transition entirely */
@media (prefers-reduced-motion: reduce){
  .app{transition:none}
}