/* ==========================================================================
   pov.hk — 7-segment + signal console
   ========================================================================== */

:root {
  --bg-0:       #050403;
  --bg-1:       #0b0907;
  --bg-2:       #14110d;
  --rule:       rgba(244, 236, 221, 0.08);
  --rule-bold:  rgba(244, 236, 221, 0.18);

  --ink:        #f4ecdd;
  --ink-dim:    rgba(244, 236, 221, 0.78);
  --ink-fade:   rgba(244, 236, 221, 0.46);
  --ink-ghost:  rgba(244, 236, 221, 0.16);

  --accent:     #ffcf78;
  --seg-off:    rgba(255, 207, 120, 0.18);

  --mono: "JetBrains Mono", "IBM Plex Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}

/* State accents */
body[data-state="clear"][data-period="day"]   { --accent: #ffcf78; --seg-off: rgba(255, 207, 120, 0.18); }
body[data-state="clear"][data-period="dusk"]  { --accent: #e89759; --seg-off: rgba(232, 151, 89, 0.18); }
body[data-state="clear"][data-period="night"] { --accent: #8a6db0; --seg-off: rgba(138, 109, 176, 0.20); }
body[data-state="cloudy"]       { --accent: #99a6b0; --seg-off: rgba(153, 166, 176, 0.18); }
body[data-state="rain"]         { --accent: #7aa0bd; --seg-off: rgba(122, 160, 189, 0.18); }
body[data-state="thunderstorm"] { --accent: #d4a63c; --seg-off: rgba(212, 166, 60, 0.18); }
body[data-state="fog"]          { --accent: #c6c1b0; --seg-off: rgba(198, 193, 176, 0.18); }
body[data-theme="light"][data-design="terminal"] {
  --bg-0: #efe9dc;
  --bg-1: #f8f2e7;
  --bg-2: #e4dccd;
  --rule: rgba(34, 30, 24, 0.09);
  --rule-bold: rgba(34, 30, 24, 0.24);
  --ink: #211e18;
  --ink-dim: rgba(34, 30, 24, 0.72);
  --ink-fade: rgba(34, 30, 24, 0.48);
  --ink-ghost: rgba(34, 30, 24, 0.14);
  --accent: #6f5a35;
  --seg-off: rgba(34, 30, 24, 0.13);
}

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

html, body {
  margin: 0; padding: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--bg-0); color: var(--ink);
  font-family: var(--mono);
  font-size: 13px; line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  letter-spacing: 0.01em;
}

body::before {
  content: "";
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 140% 90% at 50% 50%, transparent 40%, rgba(0,0,0,0.7) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.012) 0 1px, transparent 1px 3px);
  pointer-events: none; z-index: 1;
}
body[data-theme="light"][data-design="terminal"]::before {
  background:
    radial-gradient(ellipse 140% 90% at 50% 50%, transparent 50%, rgba(80, 66, 48, 0.12) 100%),
    repeating-linear-gradient(0deg, rgba(34, 30, 24, 0.018) 0 1px, transparent 1px 3px);
}

.console {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100vh; height: 100dvh;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
}

/* =========================================================================
   TOP BAR
   ========================================================================= */
.topbar {
  position: absolute;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  border-bottom: 0;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-dim);
  pointer-events: none;
}
.brand {
  appearance: none;
  display: none;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--ink-dim);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  font-weight: 400;
  font-family: var(--mono);
  cursor: pointer;
  pointer-events: auto;
}
.brand:hover { color: var(--accent); }
.topbar__actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  pointer-events: auto;
}
.design-btn {
  appearance: none;
  height: 24px;
  min-width: 86px;
  padding: 0 10px;
  border: 1px solid var(--rule-bold);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.design-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.settings-btn {
  appearance: none;
  width: 24px; height: 24px;
  border: 1px solid var(--rule-bold);
  background: transparent;
  color: var(--ink-dim);
  cursor: pointer;
  position: relative;
}
.settings-btn::before,
.settings-btn::after {
  content: "";
  position: absolute;
  inset: 5px;
  border: 2px solid currentColor;
  transform: rotate(45deg);
}
.settings-btn::after { inset: 9px; border-width: 1px; }
.settings-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.settings-btn:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

/* =========================================================================
   WIDGET GRID
   ========================================================================= */
.widget-grid {
  --grid-gap: 14px;
  --grid-cell: 48px;
  --grid-board-width: 0px;
  --grid-board-height: 0px;
  --grid-board-left: 0px;
  --grid-board-top: 0px;
  min-height: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
body[data-customizing="true"] .widget-grid {
  opacity: 1;
  pointer-events: auto;
  background: color-mix(in oklab, var(--bg-0) 90%, transparent);
}
body[data-design="terminal"] .widget-grid {
  opacity: 1;
  pointer-events: none;
}
body[data-design="terminal"][data-customizing="true"] .widget-grid {
  pointer-events: auto;
  background: transparent;
}

.redesign-root {
  position: absolute;
  inset: 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-0);
  transition: opacity 160ms ease;
}
.redesign-root > div {
  position: absolute !important;
  inset: 0 !important;
}
body[data-customizing="true"] .redesign-root {
  opacity: 0;
  pointer-events: none;
}
body[data-design="terminal"] .redesign-root {
  opacity: 0;
  pointer-events: none;
}

.widget {
  position: absolute;
  background: var(--bg-1);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.widget.is-dragging { box-shadow: 0 8px 30px rgba(0,0,0,0.5); cursor: grabbing; }

.widget__body { position: absolute; inset: 0; container-type: size; }
.mod {
  position: absolute; inset: 0;
  padding: 7cqmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5cqmin;
  text-align: center;
  overflow: hidden;
}

/* =========================================================================
   DESIGN VARIANTS — adapted from povhk_redesigns
   ========================================================================= */
body[data-design="terminal"]:not([data-theme="light"]) {
  --bg-0: #050403;
  --bg-1: #0b0907;
  --bg-2: #14110d;
  --rule: rgba(244, 236, 221, 0.08);
  --rule-bold: rgba(244, 236, 221, 0.18);
  --ink: #f4ecdd;
  --ink-dim: rgba(244, 236, 221, 0.78);
  --ink-fade: rgba(244, 236, 221, 0.46);
  --ink-ghost: rgba(244, 236, 221, 0.16);
}
body[data-design="terminal"] .topbar {
  top: 26px;
  left: 0;
  right: 0;
  height: 31px;
  padding: 0 28px;
  border-bottom: 1px solid var(--rule-bold);
  justify-content: space-between;
  align-items: center;
}
body[data-design="terminal"] .brand {
  display: inline-flex;
  align-items: center;
  height: 24px;
  font-size: 13.5px;
  letter-spacing: 0.18em;
  text-transform: lowercase;
  color: var(--accent);
}
body[data-design="terminal"] .topbar__actions {
  height: 24px;
}
body[data-design="terminal"] .widget-grid { --grid-gap: 12px; }
body[data-design="terminal"] .widget-grid::before {
  content: none;
}
body[data-design="terminal"] .widget,
body[data-design="terminal"] .editor__panel,
body[data-design="terminal"] .editor__rail,
body[data-design="terminal"] .palette__preview,
body[data-design="terminal"] .palette-ghost {
  background: var(--bg-1);
  border-color: var(--rule);
}
body[data-design="terminal"] .widget {
  box-shadow: none;
}
body[data-design="terminal"] .widget::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.58;
  background:
    linear-gradient(var(--accent), var(--accent)) left 5px top 5px / 7px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 5px top 5px / 1px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 5px top 5px / 7px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 5px top 5px / 1px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 5px bottom 5px / 7px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) left 5px bottom 5px / 1px 7px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 5px bottom 5px / 7px 1px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right 5px bottom 5px / 1px 7px no-repeat;
}
body[data-design="terminal"] .widget::after {
  content: attr(data-panel-label);
  position: absolute;
  top: 15px;
  left: 16px;
  z-index: 4;
  color: var(--ink-fade);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}
body[data-design="terminal"] .mod {
  padding: 14px;
}
body[data-design="terminal"] .mod--clock,
body[data-design="terminal"] .mod--temperature,
body[data-design="terminal"] .mod--sky {
  gap: 8px;
}
body[data-design="terminal"] .unit-toggle {
  display: none;
}
body[data-design="terminal"] .temp__body {
  gap: 10px;
  width: 100%;
  min-width: 0;
}
body[data-design="terminal"] .temp__display .seg-svg {
  height: min(44cqmin, 126px);
}
body[data-design="terminal"] .temp__range-col {
  flex: none;
  height: min(30cqmin, 86px);
  min-width: 92px;
  padding: 0;
  align-items: flex-start;
}
body[data-design="terminal"] .temp__range-row {
  gap: 8px;
  justify-content: flex-start;
  width: 100%;
}
body[data-design="terminal"] .temp__range-display {
  display: flex;
  align-items: center;
  min-width: 66px;
}
body[data-design="terminal"] .temp__range-display .seg-svg {
  flex: 0 0 auto;
  height: min(12cqmin, 32px);
}
body[data-design="terminal"] .temp__range-arrow {
  width: min(8cqmin, 18px);
  height: min(7cqmin, 16px);
}
body[data-design="terminal"] .mod--sky .glyph {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: min(13cqmin, 34px);
}
body[data-design="terminal"] .mod--sky .stat__label,
body[data-design="terminal"] .meter__label span:first-child,
body[data-design="terminal"] .mod--feels .stat__label,
body[data-design="terminal"] .mod--dew .stat__label,
body[data-design="terminal"] .mod--uv .stat__label,
body[data-design="terminal"] .mod--wind .stat__label,
body[data-design="terminal"] .mod--visibility .stat__label {
  display: none;
}
body[data-design="terminal"] .mod--sky .stat__value--text {
  font-size: min(9cqmin, 22px);
}
body[data-design="terminal"] .meter {
  justify-content: flex-end;
  padding-top: 24px;
}
body[data-design="terminal"] .meter__label {
  gap: 0;
}
body[data-design="terminal"] .warnings {
  font-size: min(7.4cqmin, 28px);
  line-height: 1.35;
  text-align: left;
  letter-spacing: 0.05em;
}
body[data-design="terminal"] .warnings li {
  text-align: left;
  padding: 2.3cqmin 4cqmin;
}

body[data-design="bento"] {
  --bg-0: #d8d7cf;
  --bg-1: #eceae3;
  --bg-2: #ffffff;
  --rule: rgba(21, 22, 15, 0.12);
  --rule-bold: rgba(21, 22, 15, 0.22);
  --ink: #15160f;
  --ink-dim: rgba(21, 22, 15, 0.68);
  --ink-fade: rgba(21, 22, 15, 0.44);
  --ink-ghost: rgba(21, 22, 15, 0.14);
  --accent: #d2f24a;
  --seg-off: rgba(21, 22, 15, 0.1);
}
body[data-design="bento"]::before,
body[data-design="editorial"]::before { background: none; }
body[data-design="bento"] .topbar,
body[data-design="editorial"] .topbar { border-bottom-color: var(--rule-bold); }
body[data-design="bento"] .widget,
body[data-design="bento"] .editor__panel,
body[data-design="bento"] .editor__rail,
body[data-design="bento"] .palette__preview {
  border: 0;
  border-radius: 28px;
  background: #eceae3;
}
body[data-design="bento"] .widget[data-widget="temperature"] {
  background: #d2f24a;
  --accent: #15160f;
  --seg-off: rgba(21, 22, 15, 0.12);
}
body[data-design="bento"] .widget[data-widget="humidity"],
body[data-design="bento"] .widget[data-widget="date"] {
  background: #15160f;
  color: #ffffff;
  --ink: #ffffff;
  --ink-dim: rgba(255, 255, 255, 0.62);
  --ink-fade: rgba(255, 255, 255, 0.42);
  --ink-ghost: rgba(255, 255, 255, 0.14);
  --accent: #d2f24a;
}
body[data-design="bento"] .widget[data-widget="warnings"],
body[data-design="bento"] .widget[data-widget="rain"],
body[data-design="bento"] .widget[data-widget="uv"] { background: #c7c8bd; }
body[data-design="bento"] .stat__value,
body[data-design="bento"] .meter__val { font-weight: 800; letter-spacing: -0.02em; }

body[data-design="editorial"] {
  --bg-0: #f4f2ea;
  --bg-1: #f4f2ea;
  --bg-2: #ebe7dc;
  --rule: #cbc7bb;
  --rule-bold: #1b1a16;
  --ink: #1b1a16;
  --ink-dim: #46443b;
  --ink-fade: #86837a;
  --ink-ghost: rgba(27, 26, 22, 0.13);
  --accent: #cf2e22;
  --seg-off: rgba(27, 26, 22, 0.09);
  --mono: "Archivo", "Inter", ui-sans-serif, system-ui, sans-serif;
}
body[data-design="editorial"] .console { padding: 22px 34px 14px; }
body[data-design="editorial"] .brand { font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
body[data-design="editorial"] .brand::after { content: "."; color: var(--accent); }
body[data-design="editorial"] .widget,
body[data-design="editorial"] .editor__panel,
body[data-design="editorial"] .editor__rail,
body[data-design="editorial"] .palette__preview {
  border-radius: 0;
  background: transparent;
  border-color: var(--rule);
}
body[data-design="editorial"] .widget[data-widget="temperature"] {
  border-right-color: var(--rule-bold);
  border-right-width: 2px;
}
body[data-design="editorial"] .temp__display .seg-svg,
body[data-design="editorial"] .clock-time .seg-svg { filter: grayscale(1); }
body[data-design="editorial"] .stat__label,
body[data-design="editorial"] .meter__label span:first-child {
  font-weight: 700;
  letter-spacing: 0.22em;
}
body[data-design="editorial"] .warnings li {
  background: transparent;
  border-left-color: var(--accent);
  border-top: 1px solid var(--rule);
}

/* ---- customize affordances ---- */
body[data-customizing="true"] .widget { cursor: grab; }
body[data-customizing="true"] .widget::after { content: none; }
body[data-design="terminal"][data-customizing="true"] .widget::after { content: attr(data-panel-label); }
.widget__remove,
.rsz { display: none; }
body[data-customizing="true"] .widget.is-selected .widget__remove,
body[data-customizing="true"] .widget.is-selected .rsz { display: flex; }

.widget__remove {
  position: absolute; top: 5px; right: 5px;
  width: 20px; height: 20px;
  align-items: center; justify-content: center;
  background: var(--bg-2); border: 1px solid var(--rule-bold);
  color: var(--ink); font-size: 14px; line-height: 1;
  cursor: pointer; z-index: 6;
}
.widget__remove:hover { border-color: var(--accent); color: var(--accent); }

.rsz {
  position: absolute; z-index: 6;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
}
.rsz--n { top: 2px;  left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.rsz--s { bottom: 2px; left: 50%; transform: translateX(-50%); cursor: ns-resize; }
.rsz--e { right: 2px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.rsz--w { left: 2px;  top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.rsz__chev { width: 9px; height: 9px; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); }
.rsz--e .rsz__chev { transform: rotate(45deg); }
.rsz--s .rsz__chev { transform: rotate(135deg); }
.rsz--w .rsz__chev { transform: rotate(-135deg); }
.rsz--n .rsz__chev { transform: rotate(-45deg); }

/* ---- outline overlay: dashed module bounds always painted above backgrounds ---- */
.widget-outlines { position: absolute; inset: 0; z-index: 9000; pointer-events: none; }
body[data-customizing="true"] .widget-outlines::before {
  content: "";
  position: absolute;
  left: var(--grid-board-left); top: var(--grid-board-top);
  width: var(--grid-board-width); height: var(--grid-board-height);
  border: 1px dashed var(--rule-bold);
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: calc(var(--grid-cell) + var(--grid-gap)) calc(var(--grid-cell) + var(--grid-gap));
  background-position: var(--grid-gap) var(--grid-gap);
}
.widget-outline { position: absolute; border: 1px dashed var(--rule-bold); }
.widget-outline.is-selected { border-color: var(--accent); border-style: solid; }
body[data-design="terminal"] .widget-outlines::after {
  content: "";
  position: absolute;
  left: calc(var(--grid-board-left) - 14px);
  top: calc(var(--grid-board-top) - 14px);
  width: calc(var(--grid-board-width) + 28px);
  height: calc(var(--grid-board-height) + 28px);
  pointer-events: none;
  background:
    linear-gradient(var(--rule-bold), var(--rule-bold)) left top / 30px 1px no-repeat,
    linear-gradient(var(--rule-bold), var(--rule-bold)) left top / 1px 30px no-repeat,
    linear-gradient(var(--rule-bold), var(--rule-bold)) right top / 30px 1px no-repeat,
    linear-gradient(var(--rule-bold), var(--rule-bold)) right top / 1px 30px no-repeat,
    linear-gradient(var(--rule-bold), var(--rule-bold)) left bottom / 30px 1px no-repeat,
    linear-gradient(var(--rule-bold), var(--rule-bold)) left bottom / 1px 30px no-repeat,
    linear-gradient(var(--rule-bold), var(--rule-bold)) right bottom / 30px 1px no-repeat,
    linear-gradient(var(--rule-bold), var(--rule-bold)) right bottom / 1px 30px no-repeat;
}

/* =========================================================================
   MODULE CONTENT — sizes scale to each module box via container queries
   ========================================================================= */
.seg-svg { display: block; }
.seg-on  { fill: var(--accent); }
.seg-off { fill: var(--seg-off); }
.seg-muted { fill: var(--accent); opacity: 0.22; }

/* ---- clock ---- */
.clock-time { display: flex; align-items: center; justify-content: center; gap: 1.5cqmin; width: 100%; }
.clock-time .seg-svg { width: auto; height: 34cqmin; }

/* ---- temperature ---- */
.temp__body { display: flex; align-items: center; justify-content: center; gap: 3cqmin; }
.temp__display { display: flex; align-items: center; justify-content: center; gap: 2px; }
.temp__display .seg-svg { width: auto; height: 42cqmin; }
.temp__range-col {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 34cqmin; padding: 1cqmin 0; opacity: 0.45;
}
.temp__range-row { display: flex; align-items: center; gap: 2cqmin; }
.temp__range-display .seg-svg { width: auto; height: 14cqmin; }
.temp__range-arrow {
  position: relative;
  display: inline-block;
  width: 6cqmin;
  height: 5cqmin;
  border: 0;
  flex: none;
}
.temp__range-arrow::before,
.temp__range-arrow::after {
  content: "";
  position: absolute;
  top: 48%;
  width: 58%;
  height: max(1px, 0.8cqmin);
  background: var(--accent);
}
.temp__range-arrow::before {
  left: 0;
}
.temp__range-arrow::after {
  right: 0;
}
.temp__range-arrow--up::before { transform: rotate(-42deg); transform-origin: right center; }
.temp__range-arrow--up::after { transform: rotate(42deg); transform-origin: left center; }
.temp__range-arrow--down::before { transform: rotate(42deg); transform-origin: right center; }
.temp__range-arrow--down::after { transform: rotate(-42deg); transform-origin: left center; }
.unit-toggle { position: absolute; top: 6cqmin; right: 6cqmin; display: inline-flex; gap: 3px; z-index: 2; }
.unit-btn { appearance: none; background: transparent; border: none; padding: 2px; cursor: pointer; line-height: 0; }
.unit-btn .seg-svg { width: auto; height: 13cqmin; }

/* ---- glyph (sky) ---- */
.glyph {
  margin: 0; font-family: var(--mono); white-space: pre;
  font-size: 9cqmin; line-height: 1.05; color: var(--accent); text-align: center;
}

/* ---- generic stat (feels / dew / uv / wind / vis / date / sky label) ---- */
.stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqmin; min-width: 0; }
.stat--split { flex-direction: row; gap: 12cqmin; }
.stat--split > div { display: flex; flex-direction: column; align-items: center; gap: 3cqmin; }
.stat__label {
  font-size: 8.5cqmin; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-dim);
}
.stat__value {
  color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums;
  font-size: 24cqmin; letter-spacing: 0.02em; white-space: nowrap;
}
.stat__value--text { font-size: 12cqmin; text-transform: lowercase; }
.stat--split { gap: 7cqmin; }
.stat--split .stat__label { font-size: 6.5cqmin; }
.stat--split .stat__value { font-size: 12cqmin; }

/* ---- meters (rain / humidity) ---- */
.meter { display: flex; flex-direction: column; align-items: center; gap: 4cqmin; width: 100%; height: 100%; min-height: 0; }
.meter__label { display: flex; flex-direction: column; align-items: center; gap: 2cqmin; text-align: center; }
.meter__label span:first-child { font-size: 8cqmin; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); }
.meter__val { color: var(--ink); font-weight: 500; font-size: 14cqmin; font-variant-numeric: tabular-nums; }
.meter__cells {
  flex: 1; min-height: 0;
  display: grid; grid-template-rows: repeat(24, 1fr); gap: 2px;
  width: 22cqmin;
}
.meter__cells span { background: var(--ink-ghost); transition: background 300ms ease; }
.meter__cells span.on { background: var(--accent); }
.meter__icon { position: relative; display: block; width: 16cqmin; height: 16cqmin; color: var(--accent); }
.meter__icon--rain::before, .meter__icon--rain::after {
  content: ""; position: absolute; top: 12%; width: 12%; height: 70%;
  background: var(--accent); transform: skewX(-18deg);
}
.meter__icon--rain::before { left: 28%; }
.meter__icon--rain::after { left: 64%; }
.meter__icon--drop::before {
  content: ""; position: absolute; left: 26%; top: 14%; width: 52%; height: 52%;
  border: 2px solid var(--accent); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}

/* ---- warnings ---- */
.mod--warnings { justify-content: flex-start; align-items: stretch; }
.warnings {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4cqmin;
  overflow-y: auto; width: 100%;
  font-size: 11cqmin; letter-spacing: 0.04em; color: var(--ink);
}
.warnings li { padding: 3cqmin 5cqmin; border-left: 2px solid var(--accent); background: color-mix(in oklab, var(--accent) 6%, transparent); }
.warnings .warning--cancelled { border-left-color: var(--rule-bold); background: color-mix(in oklab, var(--ink) 4%, transparent); color: var(--ink-fade); }
.warnings .warning--none { border-left-color: var(--rule-bold); background: transparent; color: var(--ink-fade); font-style: italic; }
.warning__meta { display: block; margin-top: 2cqmin; font-size: 8cqmin; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-ghost); }

/* =========================================================================
   MODULE LIBRARY (editor sidebar)
   ========================================================================= */
.editor {
  /* top / left / height / --panel-w are positioned by script.js so the panel
     fills the freed right margin next to the shifted board. */
  position: fixed;
  display: flex; flex-direction: row;
  z-index: 9500;
  transition: left 0.22s ease, top 0.22s ease, height 0.22s ease;
}
.editor[aria-hidden="true"] { display: none; }
.editor__rail {
  width: 36px; flex: none;
  appearance: none; cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--rule-bold);
  color: var(--ink-dim);
  display: flex; align-items: center; justify-content: center;
}
.editor__rail:hover { color: var(--accent); }
.editor__rail-text { writing-mode: vertical-rl; text-orientation: mixed; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; }
.editor__panel {
  width: var(--panel-w, 0px); overflow: hidden;
  background: var(--bg-1); border: 1px solid var(--rule); border-left: none;
  transition: width 0.22s ease;
  display: flex; flex-direction: column;
}
.editor__title { margin: 0; padding: 18px 16px 4px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.editor__hint { margin: 0; padding: 0 16px 14px; font-size: 10px; letter-spacing: 0.04em; color: var(--ink-fade); white-space: nowrap; }
.editor__reset {
  appearance: none;
  margin: 0 14px 14px;
  height: 28px;
  border: 1px solid var(--rule-bold);
  background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.editor__reset:hover {
  color: var(--accent);
  border-color: var(--accent);
}
.palette { padding: 0 14px 18px; overflow-y: auto; display: grid; gap: 14px; align-content: start; }
.palette__item {
  appearance: none; cursor: grab; text-align: left;
  background: transparent; border: none; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  touch-action: none;
}
.palette__item:active { cursor: grabbing; }
.palette__preview {
  position: relative; width: 100%;
  aspect-ratio: var(--ar, 1);
  min-height: 42px; max-height: 116px;
  background: var(--bg-1); border: 1px solid var(--rule);
  overflow: hidden;
  transition: border-color 160ms ease;
}
.palette__item:hover .palette__preview { border-color: var(--accent); }
.palette__preview .widget__body { position: absolute; inset: 0; container-type: size; }
.palette__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.palette__name { font-size: 11.5px; letter-spacing: 0.06em; text-transform: lowercase; color: var(--ink-dim); }
.palette__size { font-size: 10px; letter-spacing: 0.1em; color: var(--ink-fade); font-variant-numeric: tabular-nums; }
.palette__empty { padding: 0 18px; font-size: 11px; color: var(--ink-fade); font-style: italic; }

/* dragged-out module ghost */
.palette-ghost {
  position: fixed; z-index: 9999; pointer-events: none;
  background: var(--bg-1); border: 1px solid var(--accent);
  overflow: hidden; opacity: 0.72;
  box-shadow: 0 12px 44px rgba(0,0,0,0.55);
  animation: ghostpop 0.16s ease-out;
}
.palette-ghost .widget__body { position: absolute; inset: 0; container-type: size; }
@keyframes ghostpop { from { transform: scale(0.82); opacity: 0.2; } to { transform: scale(1); opacity: 0.72; } }

/* =========================================================================
   STATE SELECTOR
   ========================================================================= */
.states { display: none; }
body[data-debug="on"] .states {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 10px 0 0;
  border-top: 1px solid var(--rule);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-fade);
}
.states__label { color: var(--ink-fade); }
.states__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.state-btn {
  appearance: none; border: 1px solid var(--rule); background: transparent;
  color: var(--ink-dim);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 10px 5px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.state-btn__num { color: var(--ink-fade); font-size: 9px; }
.state-btn:hover { color: var(--ink); border-color: var(--rule-bold); }
.state-btn[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in oklab, var(--accent) 8%, transparent);
}
.state-btn[aria-pressed="true"] .state-btn__num { color: var(--accent); }
.autoplay { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-dim); cursor: pointer; user-select: none; }
.autoplay input { display: none; }
.autoplay__box { width: 10px; height: 10px; border: 1px solid var(--rule-bold); display: inline-block; }
.autoplay input:checked + .autoplay__box { background: var(--accent); border-color: var(--accent); }

/* =========================================================================
   TICKER
   ========================================================================= */
.console > .ticker {
  display: none !important;
  visibility: hidden;
  height: 0 !important;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--rule-bold);
  border-bottom: 1px solid var(--rule-bold);
  font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-dim);
  display: flex; align-items: center;
}
.console > .ticker .ticker__track { display: none; white-space: nowrap; will-change: transform; }
.console > .ticker .ticker__track span { margin-right: 14px; flex: none; }
.console > .ticker .ticker__track .bullet { color: var(--accent); margin-right: 14px; }
body[data-design="terminal"] .console > .ticker {
  display: flex !important;
  visibility: visible;
  height: 30px !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 28px;
  border-top: 1px solid var(--rule-bold);
  border-bottom: 0;
  color: var(--ink-fade);
  background: transparent;
  z-index: 9001;
}
body[data-design="terminal"] .console > .ticker .ticker__track {
  display: flex !important;
  white-space: nowrap;
  will-change: transform;
}

/* =========================================================================
   MOBILE — stack modules, pin content to fixed readable sizes
   ========================================================================= */
@media (max-width: 860px) {
  html, body { overflow: hidden; }
  .console {
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
  }
  .widget-grid { height: 100%; }
  .redesign-root { min-height: 100dvh; }
  .editor { display: none; }
  .widget {
    position: relative;
    left: auto !important; top: auto !important;
    width: auto !important; height: auto !important;
    z-index: auto !important;
  }
  .widget__body { position: static; container-type: normal; }
  .mod { position: static; padding: 16px; gap: 10px; min-height: 110px; }
  .clock-time { gap: 4px; }
  .clock-time .seg-svg { height: 56px; }
  .temp__display .seg-svg { height: 56px; }
  .temp__range-col { height: 58px; padding: 4px 0; }
  .temp__range-display .seg-svg { height: 24px; }
  .temp__range-arrow { border-left-width: 5px; border-right-width: 5px; }
  .temp__range-arrow--up { border-bottom-width: 6px; }
  .temp__range-arrow--down { border-top-width: 6px; }
  .unit-toggle { top: 10px; right: 12px; }
  .unit-btn .seg-svg { height: 22px; }
  .glyph { font-size: 15px; }
  .stat { gap: 4px; }
  .stat__label { font-size: 10px; }
  .stat__value { font-size: 24px; }
  .stat__value--text { font-size: 15px; }
  .stat--split { gap: 28px; }
  .stat--split .stat__label { font-size: 10px; }
  .stat--split .stat__value { font-size: 18px; }
  .temp__body { gap: 8px; }
  .temp__range-row { gap: 3px; }
  .warning__meta { font-size: 9px; margin-top: 3px; }
  .meter { gap: 8px; }
  .meter__label { gap: 4px; }
  .meter__cells { width: 24px; height: 120px; flex: none; }
  .meter__label span:first-child { font-size: 10px; }
  .meter__val { font-size: 14px; }
  .meter__icon { width: 22px; height: 22px; }
  .warnings { font-size: 12px; gap: 6px; }
  .warnings li { padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; }
}