/* Layout: one calm column. A progress dial is the hero, a frosted card lists
   the three timers, and the break overlay takes over the screen in the colour
   of its break type. Solarized base tones, a pastel pair for each break type,
   and gradients only as soft washes. */
:root {
  /* Solarized light base */
  --bg: #fdf6e3;            /* base3 */
  --bg-2: #eee8d5;          /* base2 */
  --surface: rgba(255, 251, 240, 0.72);
  --surface-solid: #fffbf0;
  --text: #586e75;          /* base01: soft, never pure black */
  --strong: #073642;        /* base02 */
  --muted: #657b83;         /* base00 */
  --faint: #93a1a1;         /* base1 */
  --line: rgba(88, 110, 117, 0.14);
  --shadow: 0 1px 2px rgba(7, 54, 66, 0.04), 0 8px 28px rgba(7, 54, 66, 0.07);
  --on-pastel: #073642;
  /* Background washes: colour comes from the time of day (sun.js sets
     --sun-1..3), strength from the theme. */
  --sun-1: 42 161 152;
  --sun-2: 108 113 196;
  --sun-3: 181 137 0;
  --wash-a1: 0.15;
  --wash-a2: 0.13;
  --wash-a3: 0.10;
  --sky-line: rgba(88, 110, 117, 0.28);

  /* One pastel pair per break type: a/b draw rings and bars, pa/pb fill
     buttons, ink is text-safe, wash tints the overlay. */
  --eye-a: #5cbfb6;     --eye-b: #6aa8e0;
  --eye-pa: #c6ebe5;    --eye-pb: #d2e3f6;
  --eye-ink: #1d7a72;   --eye-wash: rgba(42, 161, 152, 0.16);
  --breathe-a: #eda183; --breathe-b: #e58f9a;
  --breathe-pa: #f9dccf; --breathe-pb: #f6d3d8;
  --breathe-ink: #a14a2a; --breathe-wash: rgba(203, 75, 22, 0.11);
  --hands-a: #e08fbd;   --hands-b: #c99be0;
  --hands-pa: #f6d8e8;  --hands-pb: #ecdcf5;
  --hands-ink: #a0407a; --hands-wash: rgba(211, 54, 130, 0.11);
  --water: #268bd2;     --water-soft: rgba(38, 139, 210, 0.12);
  --stretch-a: #9195d9; --stretch-b: #7fa6e6;
  --stretch-pa: #dfdff7; --stretch-pb: #d6e2f7;
  --stretch-ink: #5257a8; --stretch-wash: rgba(108, 113, 196, 0.16);
  --move-a: #a8b84a;    --move-b: #dcb24f;
  --move-pa: #e7eec3;   --move-pb: #f7e7b9;
  --move-ink: #66750a;  --move-wash: rgba(181, 137, 0, 0.13);

  --font: "Lexend", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 20px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #002b36;          /* base03 */
    --bg-2: #073642;        /* base02 */
    --surface: rgba(7, 54, 66, 0.62);
    --surface-solid: #073642;
    --text: #93a1a1;        /* base1 */
    --strong: #eee8d5;      /* base2 */
    --muted: #839496;       /* base0 */
    --faint: #657b83;
    --line: rgba(147, 161, 161, 0.14);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.25);
    --on-pastel: #002b36;
    --wash-a1: 0.17;
    --wash-a2: 0.15;
    --wash-a3: 0.08;
    --sky-line: rgba(147, 161, 161, 0.3);
    --eye-a: #6fd0c5;     --eye-b: #7fb6ec;
    --eye-pa: #a3d9d1;    --eye-pb: #acc9ea;
    --eye-ink: #7fd6cc;   --eye-wash: rgba(42, 161, 152, 0.2);
  --breathe-a: #f2b199; --breathe-b: #eda0aa;
  --breathe-pa: #ecbca9; --breathe-pb: #e8b0b8;
  --breathe-ink: #f2b199; --breathe-wash: rgba(203, 75, 22, 0.17);
    --breathe-a: #f2b199; --breathe-b: #eda0aa;
    --breathe-pa: #ecbca9; --breathe-pb: #e8b0b8;
    --breathe-ink: #f2b199; --breathe-wash: rgba(203, 75, 22, 0.17);
    --hands-a: #ea9fca;   --hands-b: #d3b0ea;
    --hands-pa: #e8b9d3;  --hands-pb: #d6c0e8;
    --hands-ink: #f0a9d0; --hands-wash: rgba(211, 54, 130, 0.18);
    --water: #7fb6ec;     --water-soft: rgba(38, 139, 210, 0.2);
    --stretch-a: #a6a9ee; --stretch-b: #93b6ee;
    --stretch-pa: #bfc1f0; --stretch-pb: #b5c8ea;
    --stretch-ink: #b9bcf2; --stretch-wash: rgba(108, 113, 196, 0.22);
    --move-a: #bccb5e;    --move-b: #e6c062;
    --move-pa: #cdd894;   --move-pb: #e9d08f;
    --move-ink: #cbd77a;  --move-wash: rgba(181, 137, 0, 0.16);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #002b36;
  --bg-2: #073642;
  --surface: rgba(7, 54, 66, 0.62);
  --surface-solid: #073642;
  --text: #93a1a1;
  --strong: #eee8d5;
  --muted: #839496;
  --faint: #657b83;
  --line: rgba(147, 161, 161, 0.14);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 10px 30px rgba(0, 0, 0, 0.25);
  --on-pastel: #002b36;
  --wash-a1: 0.17;
  --wash-a2: 0.15;
  --wash-a3: 0.08;
  --sky-line: rgba(147, 161, 161, 0.3);
  --eye-a: #6fd0c5;     --eye-b: #7fb6ec;
  --eye-pa: #a3d9d1;    --eye-pb: #acc9ea;
  --eye-ink: #7fd6cc;   --eye-wash: rgba(42, 161, 152, 0.2);
  --hands-a: #ea9fca;   --hands-b: #d3b0ea;
  --hands-pa: #e8b9d3;  --hands-pb: #d6c0e8;
  --hands-ink: #f0a9d0; --hands-wash: rgba(211, 54, 130, 0.18);
  --water: #7fb6ec;     --water-soft: rgba(38, 139, 210, 0.2);
  --stretch-a: #a6a9ee; --stretch-b: #93b6ee;
  --stretch-pa: #bfc1f0; --stretch-pb: #b5c8ea;
  --stretch-ink: #b9bcf2; --stretch-wash: rgba(108, 113, 196, 0.22);
  --move-a: #bccb5e;    --move-b: #e6c062;
  --move-pa: #cdd894;   --move-pb: #e9d08f;
  --move-ink: #cbd77a;  --move-wash: rgba(181, 137, 0, 0.16);
  color-scheme: dark;
}

/* Any element tagged with a break type picks up that type's colours. */
body, [data-kind="eye"] {
  --k-a: var(--eye-a); --k-b: var(--eye-b); --k-pa: var(--eye-pa); --k-pb: var(--eye-pb);
  --k-ink: var(--eye-ink); --k-wash: var(--eye-wash);
}
[data-kind="hands"] {
  --k-a: var(--hands-a); --k-b: var(--hands-b); --k-pa: var(--hands-pa); --k-pb: var(--hands-pb);
  --k-ink: var(--hands-ink); --k-wash: var(--hands-wash);
}
[data-kind="breathe"] {
  --k-a: var(--breathe-a); --k-b: var(--breathe-b); --k-pa: var(--breathe-pa); --k-pb: var(--breathe-pb);
  --k-ink: var(--breathe-ink); --k-wash: var(--breathe-wash);
}
[data-kind="stretch"] {
  --k-a: var(--stretch-a); --k-b: var(--stretch-b); --k-pa: var(--stretch-pa); --k-pb: var(--stretch-pb);
  --k-ink: var(--stretch-ink); --k-wash: var(--stretch-wash);
}
[data-kind="move"] {
  --k-a: var(--move-a); --k-b: var(--move-b); --k-pa: var(--move-pa); --k-pb: var(--move-pb);
  --k-ink: var(--move-ink); --k-wash: var(--move-wash);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(42rem 32rem at 0% 0%, rgb(var(--sun-1) / var(--wash-a1)), transparent 70%),
    radial-gradient(40rem 34rem at 100% 100%, rgb(var(--sun-2) / var(--wash-a2)), transparent 70%),
    radial-gradient(30rem 22rem at 100% 0%, rgb(var(--sun-3) / var(--wash-a3)), transparent 70%);
  background-attachment: fixed;
  color: var(--text);
  font: 400 16px/1.6 var(--font);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
}

p { margin: 0; }
button { font: inherit; color: inherit; }

kbd {
  font: 500 10px/1 var(--font);
  letter-spacing: 0.04em;
  opacity: 0.55;
  margin-left: 6px;
  border: 1px solid currentColor;
  border-radius: 5px;
  padding: 2px 5px;
}

/* ---------- home ---------- */

/* Everything fits one screen: sizes and gaps scale with the viewport height
   so nothing ever needs scrolling, from a 560px laptop window to a tall phone. */
.home {
  max-width: 420px;
  margin: 0 auto;
  padding: clamp(8px, 2vh, 16px) 16px clamp(10px, 3vh, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 2.2vh, 24px);
  height: 100%;
}

.bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.bar-actions { justify-self: end; display: flex; align-items: center; gap: 4px; }
.install-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--strong);
  border-radius: 999px; padding: 5px 11px;
  font-size: 13px; font-weight: 500; cursor: pointer;
}
.install-btn:hover { box-shadow: var(--shadow); }
.install-btn:focus-visible { outline: 2px solid var(--k-a); outline-offset: 2px; }

/* Follow the sun: a small arc with the sun (or moon) at the current hour. */
.sky { display: flex; flex-direction: column; align-items: center; gap: 0; }
.sky-arc { width: 92px; height: 31px; overflow: visible; }
.sky-path { fill: none; stroke: var(--sky-line); stroke-width: 1.2; stroke-dasharray: 2 3; }
.sky-horizon { stroke: var(--sky-line); stroke-width: 1; }
.sky-body {
  fill: rgb(var(--sun-1));
  stroke: var(--bg); stroke-width: 2;
  filter: drop-shadow(0 0 4px rgb(var(--sun-1) / 0.6));
  transition: cx 1s ease, cy 1s ease;
}
.sky.moon .sky-body { fill: var(--strong); filter: drop-shadow(0 0 3px rgb(var(--sun-2) / 0.7)); }
.sky-label {
  color: var(--muted);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-top: 2px;
}

.brand {
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--strong);
  display: inline-flex; align-items: center; gap: 10px;
}

/* The logo in miniature: a dot inside two soft rings, breathing slowly. */
.brand-dot {
  width: 8px; height: 8px; border-radius: 50%;
  margin: 0 4px;
  background: linear-gradient(135deg, var(--eye-a), var(--eye-b));
  box-shadow:
    0 0 0 2.5px var(--bg),
    0 0 0 4px color-mix(in srgb, var(--eye-a) 70%, transparent),
    0 0 0 6px var(--bg),
    0 0 0 7.5px color-mix(in srgb, var(--eye-b) 40%, transparent);
  animation: breathe-mark 8s ease-in-out infinite;
}

@keyframes breathe-mark {
  0%, 100% { transform: scale(0.9); }
  45% { transform: scale(1.12); }
}

.icon-btn {
  background: transparent; border: 0; padding: 9px; border-radius: 12px;
  cursor: pointer; color: var(--muted);
  display: grid; place-items: center;
  transition: background 0.2s, color 0.2s;
}
.icon-btn:hover { background: var(--surface); color: var(--strong); }

.next { display: flex; flex-direction: column; align-items: center; gap: clamp(4px, 1.4vh, 14px); }

.dial { position: relative; width: min(260px, 72vw, 28vh); aspect-ratio: 1; max-width: 100%; container-type: inline-size; }
.dial-ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.dial-ring circle { fill: none; stroke-width: 7; }
.dial-track { stroke: var(--line); }
.dial-fill {
  stroke: url(#grad-home);
  stroke-linecap: round;
  stroke-dasharray: 678.58;
  stroke-dashoffset: 678.58;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 2px 6px var(--k-wash));
}
.stop-a { stop-color: var(--k-a); }
.stop-b { stop-color: var(--k-b); }

.dial-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.next-label {
  color: var(--k-ink);
  font-size: clamp(9px, 4.6cqw, 12px); font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.next-clock {
  color: var(--strong);
  font-size: 24cqw;
  font-weight: 300;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.next-note { color: var(--muted); font-size: 14px; font-weight: 300; text-align: center; min-height: 1.6em; }

.paused .next-clock { opacity: 0.4; }
.paused .dial-fill { opacity: 0.35; }

.timers {
  list-style: none; margin: 0; padding: 6px;
  background: var(--surface);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.timers li {
  display: grid;
  grid-template-columns: auto 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: clamp(3px, 1.1vh, 11px) 12px;
}
.timers li + li { border-top: 1px solid var(--line); }
.t-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--k-a), var(--k-b));
}
.t-name { color: var(--strong); font-size: 15px; }
.t-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.t-bar i {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--k-a), var(--k-b));
  transition: width 1s linear;
}
.t-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; min-width: 3.2em; text-align: right; }
.timers li.off { opacity: 0.45; }
.timers li.off .t-time::after { content: "off"; }

.actions { display: flex; gap: 10px; }
.actions .btn { flex: 1; }

.btn {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--strong);
  border-radius: 999px;
  padding: clamp(8px, 1.5vh, 11px) 14px;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 500;
  font-size: 15px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(0); }
.btn.primary {
  border-color: transparent;
  color: var(--on-pastel);
  background: linear-gradient(135deg, var(--k-pa), var(--k-pb));
}
.btn.primary:hover { filter: saturate(1.15); }
.btn.ghost { background: transparent; color: var(--text); }
.btn.soft { background: var(--k-wash); color: var(--k-ink); border-color: transparent; }
.btn:focus-visible, .icon-btn:focus-visible { outline: 2px solid var(--k-a); outline-offset: 3px; }

.foot {
  margin-top: auto;
  display: flex; justify-content: center; align-items: center; gap: 8px;
  min-width: 0;
}
.stats {
  min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--muted);
  font-size: 13px;
  font-weight: 300;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--line);
}

/* Water: a counter chip on the home screen, a gentle suggestion on breaks. */
.drop { width: 14px; height: 14px; fill: var(--water); flex: none; }
.water-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 8px 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--water-soft);
  color: var(--strong);
  font: 400 13px/1.4 var(--font);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.water-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.water-chip:focus-visible, .water-nudge:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
.water-chip .plus {
  display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--water); color: var(--bg);
  font-weight: 500; font-size: 13px; line-height: 1;
}
.water-chip.goal .plus { opacity: 0.4; }
.water-chip.bump { animation: bump 0.4s ease; }
@keyframes bump { 50% { transform: scale(1.08); } }

.water-nudge {
  margin-top: clamp(10px, 2.4vh, 20px);
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  padding: 7px 8px 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--water-soft);
  color: var(--text);
  font: 300 14px/1.4 var(--font);
  cursor: pointer;
}
.water-nudge .plus {
  padding: 3px 10px; border-radius: 999px;
  background: var(--surface-solid); color: var(--strong); font-weight: 500;
}
.water-nudge.logged { cursor: default; }
.water-nudge.logged .plus { display: none; }

/* ---------- overlay ---------- */

.overlay {
  position: fixed; inset: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(38rem 30rem at 50% 0%, var(--k-wash), transparent 70%),
    radial-gradient(34rem 28rem at 50% 110%, var(--k-wash), transparent 70%);
  display: grid; place-items: center;
  padding: 16px;
  z-index: 10;
  animation: fade-in 0.45s ease;
  overflow-y: auto;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.ov-inner {
  max-width: 440px; width: 100%;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.ov-kind {
  color: var(--k-ink);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--k-wash);
}
.ov-title {
  margin: clamp(6px, 1.6vh, 14px) 0 clamp(10px, 3vh, 26px);
  color: var(--strong);
  font-size: clamp(22px, 4vh, 30px); font-weight: 400;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.ov-why {
  max-width: 36ch;
  margin: calc(-1 * clamp(4px, 2vh, 18px)) 0 clamp(10px, 2.4vh, 22px);
  color: var(--muted);
  font-size: clamp(12px, 1.8vh, 14px); font-weight: 300;
  text-wrap: balance;
}

.ov-stage {
  position: relative;
  width: clamp(104px, 26vh, 210px); aspect-ratio: 1; max-width: 100%;
  container-type: inline-size;
}

.ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 5; }
.ring-track { stroke: var(--line); }
.ring-fill {
  stroke: url(#grad-ov);
  stroke-linecap: round;
  stroke-dasharray: 339.29;
  stroke-dashoffset: 339.29;
  transition: stroke-dashoffset 1s linear;
  filter: drop-shadow(0 2px 6px var(--k-wash));
}

.ov-count {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--strong);
  font-size: 28cqw; font-weight: 300;
  font-variant-numeric: tabular-nums;
}

.fig8 { position: absolute; inset: 0; }
.fig8-dot {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--k-a), var(--k-b));
  box-shadow: 0 0 0 8px var(--k-wash);
}
.ov-stage.with-fig8 .ov-count { opacity: 0.15; }

/* Breathing orb: JS sets --orb-scale and --orb-time for each step. */
.orb {
  position: absolute; left: 50%; top: 50%;
  width: 72%; height: 72%; margin: -36% 0 0 -36%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.55), transparent 55%),
    linear-gradient(135deg, var(--k-pa), var(--k-a) 60%, var(--k-b));
  box-shadow: 0 0 0 10px var(--k-wash), 0 10px 40px var(--k-wash);
  opacity: 0.9;
  transform: scale(var(--orb-scale, 0.55));
  transition: transform var(--orb-time, 1s) cubic-bezier(0.45, 0, 0.55, 1);
}
.ov-stage.with-orb .ov-count { color: var(--on-pastel); font-size: 21cqw; }
.ov-stage.with-orb .ring-fill { opacity: 0.7; }

.ov-step {
  min-height: 3.2em;
  margin: clamp(10px, 3vh, 24px) 0 clamp(6px, 1.5vh, 14px);
  max-width: 34ch;
  color: var(--text);
  font-size: clamp(15px, 2.4vh, 18px); font-weight: 300;
  line-height: 1.6;
  text-wrap: balance;
}

.ov-dots { list-style: none; display: flex; justify-content: center; gap: 6px; padding: 0; margin: 0 0 clamp(10px, 3vh, 26px); min-height: 4px; }
.ov-dots li { width: 18px; height: 4px; border-radius: 999px; background: var(--line); transition: background 0.3s; }
.ov-dots li.on { background: linear-gradient(90deg, var(--k-a), var(--k-b)); }

.ov-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.ov-inner.done .ov-step { color: var(--k-ink); font-weight: 400; }

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

.settings {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface-solid);
  color: var(--text);
  padding: clamp(14px, 3vh, 24px);
  width: min(420px, calc(100vw - 32px));
  max-height: calc(100dvh - 16px);
  box-shadow: var(--shadow);
}
.settings::backdrop { background: rgba(0, 43, 54, 0.28); backdrop-filter: blur(4px); }
.settings h2 { margin: 0 0 clamp(6px, 1.6vh, 16px); font-size: 20px; font-weight: 500; color: var(--strong); }
.settings fieldset { border: 0; padding: 0; margin: 0 0 clamp(8px, 1.8vh, 18px); min-width: 0; }
.settings legend {
  color: var(--faint); font-size: 11px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 6px;
}
.settings .row { display: flex; align-items: center; gap: 10px; padding: clamp(2px, 0.75vh, 7px) 0; font-size: 15px; }
.settings .row > span:first-of-type { flex: 1; } /* lines the minute boxes up in a column */
.settings input[type="number"] {
  width: 64px; padding: 5px 8px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--strong); font: inherit;
  font-variant-numeric: tabular-nums;
}
.settings input[type="number"]:focus { outline: 2px solid var(--eye-a); outline-offset: 1px; }
.settings input[type="checkbox"] { accent-color: var(--eye-a); width: 17px; height: 17px; flex: none; }
.hint { color: var(--muted); font-size: 13px; font-weight: 300; margin: 4px 0 0; min-height: 1em; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Wider screens: reminders on the left, look and alerts on the right. */
@media (min-width: 680px) {
  .settings { width: min(680px, calc(100vw - 32px)); }
  .settings form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
  .settings h2, .settings .dialog-actions { grid-column: 1 / -1; }
  .settings fieldset:first-of-type { grid-row: span 3; }
}

/* Short screens: a denser settings dialog so it still fits without scrolling. */
@media (max-height: 700px) {
  .settings h2 { font-size: 17px; }
  .settings .row { font-size: 14px; gap: 8px; padding: 1px 0; }
  .settings input[type="number"] { padding: 2px 6px; width: 56px; }
  .settings legend { margin-bottom: 0; }
  .settings .btn { padding-block: 7px; }
}
.hint:empty { display: none; }

/* Short windows: drop the secondary line under the dial. */
@media (max-height: 700px) {
  .next-note { display: none; }
}

/* Very short windows: the densest layout. */
@media (max-height: 660px) {
  .timers li { padding-block: 2px; }
  .t-name, .t-time { font-size: 13px; }
  .btn { padding-block: 7px; }
  .ov-step { min-height: 2.6em; }
  .water-nudge { margin-top: 6px; padding-block: 4px; }
  .ov-title { margin-bottom: 8px; }
}
@media (max-height: 600px) {
  .settings .row { font-size: 13px; padding: 0; }
  .settings fieldset { margin-bottom: 4px; }
  .settings h2 { margin-bottom: 2px; }
  .settings input[type="number"] { padding: 1px 6px; }
}

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .brand-dot, .overlay { animation: none; }
  .ring-fill, .dial-fill, .t-bar i, .sky-body { transition: none; }
  .water-chip.bump { animation: none; }
  .orb { transition-timing-function: linear; }
  .btn:hover { transform: none; }
}