:root{
  --bg:#0f1416;
  --line:#26312f;
  --fg:#f4f2ea;
  --fg-dim:#8a9490;

  /* overwritten by js/settings.js */
  --accent:#c9b28a;
  --accent-2:#5c7a70;
  --ui-scale:1;
  --font-stack:'Helvetica Neue',Arial,sans-serif;
  /* only Kal Studio mode splits these off from the body face / base weight */
  --font-display:'Helvetica Neue',Arial,sans-serif;
  --time-weight:200;

  --panel-bg:var(--bg);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{
  width:100%;height:100%;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font-stack);
  overflow:hidden;
  transition:background-color 0.4s ease, color 0.4s ease;
}

.stage{
  position:relative;
  width:100vw;height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:
    radial-gradient(circle at 15% 85%, color-mix(in srgb, var(--accent-2) 16%, transparent), transparent 55%),
    radial-gradient(circle at 85% 15%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 50%),
    var(--bg);
  transition:background 0.4s ease;
}

.center{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:calc(clamp(18px, 3vh, 34px) * var(--ui-scale));
  z-index:2;
}

.time{
  font-family:var(--font-display);
  font-size:calc(clamp(72px, 15vw, 190px) * var(--ui-scale));
  font-weight:var(--time-weight);
  letter-spacing:-0.02em;
  line-height:1;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
  color:var(--fg);
}
.time .colon{
  display:inline-block;
  color:var(--accent);
  animation:blink 2s steps(1) infinite;
  padding:0 0.02em;
}
@keyframes blink{ 0%,45%{opacity:1;} 50%,95%{opacity:0.15;} 100%{opacity:1;} }

.date-row{
  display:flex;
  align-items:center;
  gap:calc(16px * var(--ui-scale));
  font-size:calc(clamp(13px,1.6vw,18px) * var(--ui-scale));
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.date-row .dot{
  width:calc(5px * var(--ui-scale));
  height:calc(5px * var(--ui-scale));
  border-radius:50%;
  background:var(--accent-2);
}

.divider{
  width:1px;
  height:calc(clamp(28px,5vh,56px) * var(--ui-scale));
  background:linear-gradient(var(--line), transparent);
}

.weather{
  position:relative;
  display:flex;
  align-items:center;
  gap:calc(clamp(20px,3vw,40px) * var(--ui-scale));
  transition:opacity 0.6s ease;
}
.weather.stale{ opacity:0.55; }

.glyph{
  width:calc(56px * var(--ui-scale));
  height:calc(56px * var(--ui-scale));
  flex-shrink:0;
  color:var(--fg-dim);
}
.glyph svg{ width:100%; height:100%; display:block; }

.temp-block{
  display:flex;
  align-items:baseline;
  gap:calc(6px * var(--ui-scale));
}
.temp{
  font-family:var(--font-display);
  font-size:calc(clamp(40px,6vw,64px) * var(--ui-scale));
  font-weight:300;
  letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;
}
.unit{
  font-size:calc(clamp(18px,2.2vw,26px) * var(--ui-scale));
  color:var(--fg-dim);
  font-weight:300;
}

.condition-block{
  display:flex;
  flex-direction:column;
  gap:calc(6px * var(--ui-scale));
}
.condition{
  font-size:calc(clamp(14px,1.7vw,19px) * var(--ui-scale));
  color:var(--fg);
  letter-spacing:0.02em;
}
.place{
  font-size:calc(clamp(11px,1.3vw,14px) * var(--ui-scale));
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

.range{
  display:flex;
  font-family:var(--font-display);
  gap:calc(14px * var(--ui-scale));
  font-size:calc(clamp(12px,1.4vw,15px) * var(--ui-scale));
  color:var(--fg-dim);
  letter-spacing:0.04em;
  font-variant-numeric:tabular-nums;
}
.range .hi{ color:var(--accent); }

/* small dim mark when the reading is a cached fallback */
.stale-dot{
  position:absolute;
  top:50%;
  right:calc(-18px * var(--ui-scale));
  width:4px;height:4px;
  margin-top:-2px;
  border-radius:50%;
  background:var(--fg-dim);
  opacity:0;
  transition:opacity 0.6s ease;
}
.weather.stale .stale-dot{ opacity:0.8; }

.seconds-track{
  position:absolute;
  bottom:0; left:0;
  height:2px;
  background:var(--accent-2);
  opacity:0.55;
  transition:width 1s linear;
}
/* no easing when the bar wraps back to zero at the top of a minute */
.seconds-track.no-transition{ transition:none; }

/* Mirrors the settings toggle's 30px inset so the two bottom corners sit as a pair.
   Only shown in Kal mode. */
.brandmark{
  position:absolute;
  bottom:30px; left:30px;
  z-index:3;
  font-size:calc(clamp(10px,1.1vw,12px) * var(--ui-scale));
  font-weight:300;
  letter-spacing:0.14em;
  color:var(--fg-dim);
  opacity:0;
  pointer-events:none;
  transition:opacity 0.5s ease;
}
body.kal .brandmark{ opacity:0.75; }

/* ---- settings ---- */

.settings-toggle{
  position:absolute;
  bottom:30px; right:30px;
  z-index:4;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  width:16px; height:11px;
  padding:0;
  background:none;
  border:none;
  cursor:pointer;
  opacity:0;
  transition:opacity 0.5s ease, transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
/* Ride out ahead of the opening panel — otherwise the toggle ends up underneath it
   with no visible way to close again. */
body.panel-open .settings-toggle{ transform:translateX(-270px); }
.settings-toggle span{
  display:block;
  height:1px;
  background:var(--fg-dim);
}
.settings-toggle span:nth-child(2){ width:70%; }
.settings-toggle span:nth-child(3){ width:40%; }
/* only ever visible while the pointer is moving, or the panel is open */
body.pointer-active .settings-toggle{ opacity:0.35; }
.settings-toggle:hover,
body.panel-open .settings-toggle{ opacity:0.75; }
.settings-toggle:focus-visible{ opacity:0.75; outline:1px solid var(--fg-dim); outline-offset:6px; }

.panel{
  position:fixed;
  top:0; right:0;
  z-index:5;
  display:flex;
  flex-direction:column;
  gap:34px;
  width:270px;
  height:100vh;
  padding:44px 32px;
  background:var(--panel-bg);
  border-left:1px solid var(--line);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
}
.panel[hidden]{ display:flex; }
body.panel-open .panel{ transform:translateX(0); }

.panel-title{
  font-size:11px;
  font-weight:400;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--fg-dim);
}

.field{ display:flex; flex-direction:column; gap:14px; }
/* .field sets display:flex, which outranks the UA rule for [hidden] — same trap the
   .panel[hidden] line above documents. */
.field[hidden]{ display:none; }
/* Kal Studio drives colour and typeface itself; `inert` in settings.js does the real
   work, this is the visual half. */
.field[data-disabled]{ opacity:0.3; }
.field-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg-dim);
}
.field-value{ color:var(--fg); letter-spacing:0.08em; }
.field-note{
  font-size:12px;
  line-height:1.5;
  color:var(--fg-dim);
}

input[type=range]{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:1px;
  background:var(--line);
  cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--accent);
}
input[type=range]::-moz-range-thumb{
  width:9px;height:9px;
  border:none;
  border-radius:50%;
  background:var(--accent);
}

.swatches{ display:flex; gap:12px; }
.swatch{
  width:20px;height:20px;
  padding:0;
  border:1px solid transparent;
  border-radius:50%;
  background:none;
  cursor:pointer;
}
.swatch i{
  display:block;
  width:100%;height:100%;
  border-radius:50%;
  opacity:0.85;
}
.swatch[aria-checked=true]{ border-color:var(--fg-dim); outline:none; }
.swatch:focus-visible{ outline:1px solid var(--fg-dim); outline-offset:3px; }

.choices{ display:flex; flex-direction:column; gap:2px; }
.choice{
  padding:7px 0;
  font-size:15px;
  text-align:left;
  color:var(--fg-dim);
  background:none;
  border:none;
  cursor:pointer;
}
.choice[aria-checked=true]{ color:var(--fg); }
.choice:focus-visible{ outline:1px solid var(--fg-dim); outline-offset:2px; }

.switch{
  position:relative;
  flex-shrink:0;
  width:30px; height:16px;
  padding:0;
  background:none;
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  transition:border-color 0.2s ease;
}
.switch i{
  position:absolute;
  top:2px; left:2px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--fg-dim);
  transition:transform 0.2s ease, background-color 0.2s ease;
}
.switch[aria-checked=true]{ border-color:var(--accent); }
.switch[aria-checked=true] i{ transform:translateX(14px); background:var(--accent); }
.switch:focus-visible{ outline:1px solid var(--fg-dim); outline-offset:3px; }

.reset{
  margin-top:auto;
  padding:0;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  text-align:left;
  color:var(--fg-dim);
  background:none;
  border:none;
  cursor:pointer;
}
.reset:hover{ color:var(--fg); }

@media (prefers-reduced-motion: reduce){
  .time .colon{ animation:none; }
  .panel{ transition:none; }
  .seconds-track{ transition:none; }
  html,body,.stage{ transition:none; }
  .switch,.switch i{ transition:none; }
}