:root {
  --bg: #0b0b0c;

  /* Glass */
  --glass: rgba(255, 255, 255, 0.055);
  --glass-strong: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --blur: blur(24px) saturate(160%);

  /* Warm ink (no cold whites at night) */
  --ink: #f4efeb;
  --ink-2: #aaa29c;
  --ink-3: #6c6661;
  --line: rgba(255, 255, 255, 0.07);

  --accent-rgb: 255, 68, 51;   /* follows the selected tone (set from app.js) */
  --accent: rgb(var(--accent-rgb));
  --accent-light: #ff8a6e;      /* lighter tint for status text */
  --on-accent: #ffffff;         /* text/icons on solid accent */
  --accent-soft: rgba(var(--accent-rgb), 0.14);

  /* Live light (set from app.js) */
  --tone: #ff0000;
  --level: 0.6;

  --radius: 26px;
  --tabbar-space: 104px; /* tab bar height + its bottom offset + breathing room */
  --font: "Inter", "Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

/* The root background is what the browser paints behind the status bar (clock, Wi‑Fi) and in overscroll.
   On the Light screen it is the light colour (set from app.js); elsewhere it is charcoal. */
html {
  /* Safari (iOS 26) paints both its status-bar area and its bottom toolbar with the page background,
     so it stays dark. Installed to the Home Screen, the light colour shows behind the clock instead. */
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 300 15px/1.55 var(--font);
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button { font: inherit; color: inherit; -webkit-user-select: none; user-select: none; }
b, strong { font-weight: 500; }

/* While a session runs, the page background (status bar area, overscroll) becomes the light colour. */
html.in-session, html.in-session body { background: var(--session-bg, #000); overflow: hidden; }

/* ================= Glass ================= */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi), 0 20px 50px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

/* ================= Ambient glow (Info & Stats) ================= */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(70% 35% at 50% 0%, color-mix(in srgb, var(--tone) 16%, transparent), transparent 75%);
  transition: opacity 0.6s var(--ease);
}
body[data-view="light"] .ambient { display: none; }

/* ================= Top light layer (status-bar tint) ================= */
.top-light {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Topmost at the top edge (Safari tints the status bar from it) and always above the sheet backdrop (50):
     it dims itself in step with the backdrop, so nothing jumps between layers when the sheet closes. */
  z-index: 55;
  height: calc(var(--hero-h, 40vh) + 1px); /* 1px overlap hides sub-pixel seams with the fade below */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 22px) 16px 0;
  text-align: center;
  background: var(--top-light, var(--bg));
  /* No pointer-events: none here; Safari skips non-hit-testable layers when choosing the bar colour. */
}
.top-light > * { transition: opacity 0.4s ease; }
body.sheet-open .top-light > * { opacity: 0.35; }
body:not([data-view="light"]) .top-light, html.in-session .top-light { display: none; }
/* With the sheet open it sits above the backdrop, already dimmed, so the bar and the page match. */
html.chrome-fade .top-light { transition: background-color 0.4s ease; }

/* ================= Views ================= */
.app { position: relative; z-index: 1; min-height: 100vh; min-height: 100dvh; }

.view {
  display: none;
  max-width: 520px;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 18px) 16px calc(env(safe-area-inset-bottom) + 108px);
}
.view.is-active { display: block; animation: viewIn 0.5s var(--ease); }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.view-head { margin: 10px 6px 22px; }
.eyebrow {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.view-head h1 {
  margin: 0;
  font-size: 34px;
  font-weight: 300;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  line-height: 1.05;
}

/* ================= Light view ================= */
/* The home screen always fits one screen: no scrolling, nothing under the tab bar. */
/* The home screen never scrolls: it is pinned to the viewport (a scroll would also misalign the fixed light layer). */
body[data-view="light"] { overflow: hidden; overscroll-behavior: none; }
#view-light.is-active {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  padding: 0 0 calc(env(safe-area-inset-bottom) + var(--tabbar-space));
  overflow: hidden;
}

/* Light colour as it appears on screen: tone mixed toward the background by intensity. */
/* Light colour as it appears on screen (tone mixed toward the background by intensity); set from app.js. */
#view-light { --lit: var(--lit-hex, #990000); }

.hero {
  flex: 1 1 auto;
  min-height: calc(env(safe-area-inset-top) + 118px);
  width: 100%;
}
.eyebrow-light { color: rgba(255, 240, 236, 0.75); }
.brand {
  margin: 0;
  font-size: clamp(28px, 8.5vw, 34px);
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase; /* thin uppercase, like "LIGHT IS A NUTRIENT" */
  white-space: nowrap;
  line-height: 1.1;
  color: #fff6f3;
}
.hero-sub {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: rgba(255, 240, 236, 0.78);
  font-variant-numeric: tabular-nums;
}

/* The fade starts at the top edge of the regulator and is fully dark by its baseline. */
.dial-zone {
  flex: none;
  width: 100%;
  display: flex;
  justify-content: center;
  /* Eased fade (smooth at both ends) from the light colour into the background. */
  background: linear-gradient(to bottom,
    var(--lit) 0%,
    color-mix(in srgb, var(--lit) 93%, var(--bg)) 8%,
    color-mix(in srgb, var(--lit) 78%, var(--bg)) 18%,
    color-mix(in srgb, var(--lit) 58%, var(--bg)) 30%,
    color-mix(in srgb, var(--lit) 38%, var(--bg)) 42%,
    color-mix(in srgb, var(--lit) 21%, var(--bg)) 55%,
    color-mix(in srgb, var(--lit) 9%, var(--bg)) 68%,
    color-mix(in srgb, var(--lit) 3%, var(--bg)) 80%,
    var(--bg) 92%);
}

.dial {
  position: relative;
  /* Shrinks on short screens so the whole home screen fits without scrolling. */
  width: clamp(250px, calc((100dvh - 475px) * 1.75), 372px);
  max-width: calc(100vw - 20px);
  padding-top: 14px;
  touch-action: none;
  cursor: grab;
  outline: none;
  -webkit-user-select: none;
  user-select: none;
}
.dial:active { cursor: grabbing; }
.dial svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Readiness-style arc: a faint track, a glowing fill that brightens toward its end, and a bright dot. */
.arc-track { fill: none; stroke: rgba(255, 255, 255, 0.12); stroke-width: 9; stroke-linecap: round; }
.arc-fill {
  fill: none;
  stroke: url(#arcFill);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 60 100;
}
.knob-core { fill: #ffffff; }
.dial:focus-visible .knob-core { stroke: var(--accent); stroke-width: 3; }

.dial-readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6%;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}
.big {
  display: flex;
  align-items: flex-start;
  font-size: clamp(48px, 17vw, 64px);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: proportional-nums; /* Inter's tabular digits are wide; keep the score compact */
}
.big .pct { font-size: 0.38em; font-weight: 300; margin: 0.25em 0 0 0.08em; color: var(--ink-2); }
.sub {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.sub-dot { color: var(--ink-3); }
.status {
  margin-top: 8px;
  font-size: 14px;
  font-weight: 400;
  color: var(--accent-light); /* warm accent, like the coloured status under a readiness score */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.status .sub-dot, .status #nmChip { color: var(--ink-2); }

/* Bottom block: tones + controls */
.home-bottom {
  flex: none;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.6dvh, 24px);
  padding: clamp(8px, 1.6dvh, 16px) 16px 0;
}

.tones {
  display: flex;
  gap: 4px;
  padding: 5px;
  border-radius: 999px;
}
.tones button {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.tones button[aria-checked="true"] {
  background: rgba(255, 255, 255, 0.1);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.35);
}
.tones i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px color-mix(in srgb, var(--c) 70%, transparent);
}

.controls-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}
.ctl {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border: 0;
  background: none;
  cursor: pointer;
}
.ctl-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 4px;
  transition: transform 0.2s ease;
}
.ctl:active .ctl-icon { transform: scale(0.94); }
.ctl svg { width: 21px; height: 21px; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ctl-label { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); }
.ctl b { font-size: 14px; font-weight: 400; color: var(--ink); }

.play {
  position: relative;
  width: clamp(70px, 10dvh, 84px);
  height: clamp(70px, 10dvh, 84px);
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--accent);
  box-shadow: 0 14px 40px -8px rgba(var(--accent-rgb), 0.6);
  transition: transform 0.2s ease;
}
.play:active { transform: scale(0.95); }
.play svg { display: block; width: 30px; height: 30px; fill: var(--on-accent); }
.play-ring { position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.06); }

/* ================= Cards ================= */
.card {
  position: relative;
  margin-bottom: 14px;
  padding: 20px;
  border-radius: var(--radius);
}
.card h2 { margin: 0 0 8px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.card p { margin: 0 0 12px; font-weight: 300; color: var(--ink-2); }
.card p:last-child { margin-bottom: 0; }
.card em { font-style: normal; color: var(--ink); font-weight: 500; }
.card-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-row h2 { margin-bottom: 14px; }
.value { font-variant-numeric: tabular-nums; font-weight: 400; }
.muted { font-size: 13px; color: var(--ink-3); }
.fine { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3) !important; }

/* ================= Buttons ================= */
.primary {
  width: 100%;
  min-height: 54px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(var(--accent-rgb), 0.6);
}
.ghost {
  display: block;
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink-2);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}

/* ================= Tab bar ================= */
.tabbar {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 14px);
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 14px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(30, 28, 28, 0.55);
}
.nav-items { display: flex; gap: 14px; }
.nav-brand, .nav-foot, .tab-label { display: none; }
.tab {
  width: 56px;
  height: 56px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.tab svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tab.is-active {
  color: #fff;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--accent) 45%, transparent), color-mix(in srgb, var(--accent) 12%, transparent) 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 24px -4px color-mix(in srgb, var(--accent) 60%, transparent);
}

/* ================= Info ================= */
.notice-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-color: rgba(var(--accent-rgb), 0.3);
}
.notice-card strong { display: block; margin-bottom: 2px; }
.notice-card p { margin: 0; font-size: 14px; }
.notice-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 500;
}

.figure { margin: 8px 0 14px; }
.spectrum-chart { display: block; width: 100%; height: auto; }
.spectrum-chart .axis { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; }
.spectrum-chart .curve { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; }
.spectrum-chart .curve-fill { fill: url(#curveFill); }
.spectrum-chart .band { fill: rgba(var(--accent-rgb), 0.22); stroke: var(--accent); stroke-width: 1; }
.spectrum-chart .t { fill: var(--ink-2); font: 300 10px var(--font); }
.spectrum-chart .t-accent { fill: var(--accent); font-weight: 500; }
.spectrum-chart .t-dim { fill: var(--ink-3); }

.facts { display: grid; gap: 10px; }
.fact {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}
.fact b { display: block; margin-bottom: 2px; color: var(--ink); }

.power { display: grid; gap: 12px; }
.power-row { display: grid; grid-template-columns: 96px 1fr 52px; align-items: center; gap: 10px; font-size: 13px; }
.power-name { color: var(--ink-2); }
.power-val { text-align: right; font-weight: 400; font-variant-numeric: tabular-nums; }
.power-track {
  position: relative;
  height: 14px;
  border-radius: 4px;
  background: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 33.333%), rgba(255, 255, 255, 0.05);
}
.power-bar { position: absolute; top: 0; bottom: 0; left: var(--from, 0%); width: var(--w); border-radius: 4px; background: #8a2a22; }
.power-bar.strong { background: var(--accent); }
.power-axis {
  display: flex;
  justify-content: space-between;
  margin: 0 62px 0 106px;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.icon-list, .steps, .dont-list, .sources ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 16px; }
.icon-list li, .steps li { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.icon-list b, .steps b { display: block; color: var(--ink); font-size: 15px; margin-bottom: 1px; }
.ic, .steps li > span {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
  color: var(--accent);
  font-size: 16px;
  font-weight: 400;
}
.dont-list li { position: relative; padding-left: 32px; font-size: 14px; color: var(--ink-2); }
.dont-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background:
    linear-gradient(45deg, transparent 46%, var(--accent) 46% 54%, transparent 54%) center / 9px 9px no-repeat,
    linear-gradient(-45deg, transparent 46%, var(--accent) 46% 54%, transparent 54%) center / 9px 9px no-repeat;
}
.sources ul { gap: 8px; }
.sources li { font-size: 12px; color: var(--ink-3); }

/* ================= Stats ================= */
.week-dots { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.wd { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.wd-c {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.wd-c svg { width: 14px; height: 14px; fill: none; stroke: #1a0d0b; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.wd.is-done .wd-c { background: #f1e9e5; }
.wd.is-missed .wd-c { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.wd.future .wd-c { border: 1.5px dashed rgba(255, 255, 255, 0.16); }
.wd.today .wd-c {
  background: radial-gradient(circle, var(--accent-light) 0%, var(--accent) 45%, rgba(var(--accent-rgb), 0.45) 100%);
  box-shadow: 0 0 22px rgba(var(--accent-rgb), 0.55);
}
.wd.today:not(.is-done) .wd-c::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff3ee; }
.wd span { font-size: 11px; color: var(--ink-3); letter-spacing: 0.06em; }
.wd.today span { color: var(--ink); }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.tile { padding: 18px; border-radius: var(--radius); }
.tile-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.tile-value {
  display: block;
  margin-top: 8px;
  font-size: 34px;
  font-weight: 200;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  height: 160px;
  padding-top: 6px;
  background:
    linear-gradient(var(--line), var(--line)) 0 6px / 100% 1px no-repeat,
    linear-gradient(var(--line), var(--line)) 0 calc(6px + (100% - 30px) / 2) / 100% 1px no-repeat;
}
.week .day { display: grid; grid-template-rows: 1fr 24px; align-items: end; justify-items: center; }
.week .bar-hit { width: 100%; height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.week .bar {
  width: min(22px, 60%);
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: rgba(var(--accent-rgb), 0.35);
  transition: height 0.7s var(--ease), background 0.2s ease;
}
.week .day.today .bar { background: var(--accent); box-shadow: 0 0 16px -2px rgba(var(--accent-rgb), 0.6); }
.week .day.is-hover .bar, .week .day:hover .bar { background: var(--accent-light); }
.week .day-label { font-size: 11px; color: var(--ink-3); align-self: center; }
.week .day.today .day-label { color: var(--ink); }
.week::after { content: attr(data-max); position: absolute; top: -12px; right: 0; font-size: 10px; color: var(--ink-3); }
.chart-tip {
  position: absolute;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(40, 36, 36, 0.9);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  white-space: nowrap;
  pointer-events: none;
  transform: translate(-50%, -100%);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.chart-tip b { font-variant-numeric: tabular-nums; }

.fav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fav b { display: block; margin-top: 6px; font-size: 17px; font-weight: 300; }

.sessions { list-style: none; margin: 0; padding: 0; }
.sessions li { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line); }
.sessions li:first-child { border-top: 0; padding-top: 4px; }
.sessions .sw { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.sessions .s-main { flex: 1; min-width: 0; }
.sessions .s-date { display: block; font-size: 15px; font-weight: 500; }
.sessions .s-meta { display: block; font-size: 12px; color: var(--ink-3); }
.sessions .s-dur { font-size: 16px; font-weight: 300; font-variant-numeric: tabular-nums; }
.sessions li { transition: opacity 0.25s ease, transform 0.25s ease; }
.sessions li.is-removing { opacity: 0; transform: translateX(16px); }
.s-del {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  margin-right: -8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.s-del svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.s-del:hover { color: var(--ink-2); background: rgba(255, 255, 255, 0.05); }
.s-del-label { display: none; font-size: 12px; font-weight: 500; }
.s-del.is-armed { color: #fff; background: #d93a2b; border-color: #d93a2b; padding: 0 12px; }
.s-del.is-armed .s-del-label { display: inline; }
.empty { margin: 0; font-size: 14px; color: var(--ink-3); }
.empty b { color: var(--ink-2); }

/* ================= Session (full-screen light) ================= */
/* Safari tints its bars from a full-screen fixed layer's background, so the layer itself is the light colour. */
.session {
  position: fixed;
  inset: 0;
  z-index: 100;
  height: 100lvh;
  background: var(--session-bg, #000);
  transition: background-color 1.2s linear;
}
.session[hidden] { display: none; }
.light {
  position: absolute;
  inset: 0;
  background: var(--session-bg, #000);
  transition: background-color 1.2s linear;
}
.light.breathe { animation: breathe 10s ease-in-out infinite; }
@keyframes breathe {
  0%, 100% { filter: brightness(0.45); }
  40%, 55% { filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
  .light.breathe, body.mode-breathe .bulb, body.mode-breathe .beam { animation-duration: 16s; }
  .view.is-active { animation: none; }
}

.session-ui {
  /* fixed (not absolute) so it sits above Safari's bottom toolbar, like the tab bar */
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 32px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: opacity 0.6s ease;
}
.session-ui.idle { opacity: 0.16; }
.close {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.12);
  color: #fff4f0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 8px 24px rgba(0, 0, 0, 0.2);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.session-time {
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(255, 238, 233, 0.85);
  font-variant-numeric: tabular-nums;
}

.done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #000;
  text-align: center;
  animation: viewIn 0.8s var(--ease);
}
.done[hidden] { display: none; }
.done-title { margin: 0; font-size: 34px; font-weight: 200; color: #b8463c; }
.done-sub { margin: 6px 0 28px; color: #6a2a24; font-size: 14px; }
.done .ghost { max-width: 200px; color: #9a3c33; border-color: #3a1512; background: transparent; }

/* ================= First-run sheet ================= */
.sheet {
  width: min(420px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  overflow-y: auto;
  padding: 26px 22px 22px;
  border: 1px solid var(--glass-border);
  border-radius: 30px;
  background: rgba(28, 24, 24, 0.72);
  color: var(--ink);
  line-height: 1.55;
  box-shadow: var(--glass-hi), 0 30px 80px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
}
.sheet::backdrop { background: rgba(0, 0, 0, 0.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sheet h2 { margin: 0 0 10px; font-size: 24px; font-weight: 500; letter-spacing: -0.02em; }
.sheet p { margin: 0 0 14px; color: var(--ink-2); }
.notice {
  margin: 0 0 14px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--accent-rgb), 0.35);
  border-radius: 18px;
  background: var(--accent-soft);
  font-size: 14px;
  color: var(--ink-2);
}
.notice strong { display: block; color: var(--ink); }
.sheet .primary { margin-top: 18px; }

/* ================= Mode & timer sheet ================= */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.45); /* no blur: it must shade exactly like the dimmed top layer */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.sheet-open .sheet-backdrop { opacity: 1; pointer-events: auto; }

.bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 8px 20px calc(env(safe-area-inset-bottom) + 20px);
  border-radius: 32px 32px 0 0;
  border: 1px solid var(--glass-border);
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(48, 40, 40, 0.72), rgba(22, 20, 20, 0.86));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 -20px 60px rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  transform: translateY(105%);
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.sheet-open .bottom-sheet { transform: translateY(var(--drag, 0px)); }
.bottom-sheet.dragging { transition: none; }
.bottom-sheet:focus { outline: none; }

.sheet-grab { padding: 4px 0 6px; touch-action: none; cursor: grab; text-align: center; }
.sheet-handle { width: 40px; height: 5px; margin: 4px auto 14px; border-radius: 3px; background: rgba(255, 255, 255, 0.25); }
.bottom-sheet h2 { margin: 0; font-size: 20px; font-weight: 500; letter-spacing: -0.01em; }

.sheet-section { margin-top: 22px; }
.sheet-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mode-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mode-cards button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  text-align: left;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.mode-cards button[aria-checked="true"] {
  background: rgba(var(--accent-rgb), 0.12);
  border-color: rgba(var(--accent-rgb), 0.55);
}
.mode-cards b { font-size: 15px; font-weight: 500; }
.mode-cards small { font-size: 12px; font-weight: 300; line-height: 1.35; color: var(--ink-2); }
.mode-ico {
  width: 26px;
  height: 26px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 14px color-mix(in srgb, var(--tone) 70%, transparent);
}
.mode-ico-breathe { animation: icoBreathe 10s ease-in-out infinite; }
@keyframes icoBreathe {
  0%, 100% { opacity: 0.4; transform: scale(0.82); }
  40%, 55% { opacity: 1; transform: scale(1); }
}

.timer-chips { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.timer-chips button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 58px;
  border-radius: 16px;
  border: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.04);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.timer-chips small { font-size: 10px; font-weight: 400; letter-spacing: 0.06em; color: var(--ink-3); }
.timer-chips button[aria-checked="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 8px 20px -8px rgba(var(--accent-rgb), 0.7);
}
.timer-chips button[aria-checked="true"] small { color: var(--on-accent); opacity: 0.8; }
.bottom-sheet .primary { margin-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .bottom-sheet { transition-duration: 0.01s; }
  .mode-ico-breathe { animation-duration: 16s; }
}

/* =====================================================================
   Desktop (≥ 1024px): sidebar · light stage · settings panel
   ===================================================================== */
@media (min-width: 1024px) {
  :root {
    /* Sidebar and settings panel share one width, so the light stage sits exactly in the centre. */
    --side-w: clamp(272px, 22vw, 340px); /* includes a 16px gap on each side */
    --nav-w: var(--side-w);
    --panel-w: var(--side-w);
    --gap: 16px;
  }

  /* ---------- Sidebar ---------- */
  .tabbar {
    left: var(--gap);
    top: var(--gap);
    bottom: var(--gap);
    transform: none;
    width: calc(var(--nav-w) - 2 * var(--gap));
    flex-direction: column;
    gap: 0;
    padding: 22px 14px 18px;
    border-radius: 28px;
    background: rgba(26, 24, 24, 0.6);
  }
  .nav-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px 26px;
    font-size: 19px;
    font-weight: 500;
    letter-spacing: -0.01em;
  }
  .nav-brand img { width: 44px; height: 44px; filter: drop-shadow(0 6px 14px rgba(var(--accent-rgb), 0.3)); } /* the image has its own rounded corners */
  .nav-items { flex-direction: column; gap: 6px; }
  .tab {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border-radius: 16px;
    display: flex;
    justify-content: flex-start;
    gap: 14px;
  }
  .tab:hover:not(.is-active) { color: var(--ink-2); background: rgba(255, 255, 255, 0.04); }
  .tab svg { width: 21px; height: 21px; flex: none; }
  .tab-label { display: inline; font-size: 15px; font-weight: 500; letter-spacing: 0.01em; }
  .nav-foot {
    display: block;
    margin: auto 8px 0;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ink-3);
  }

  /* ---------- Views sit to the right of the sidebar ---------- */
  .view {
    max-width: none;
    margin: 0 0 0 var(--nav-w);
    padding: 40px 40px 48px 24px;
  }
  .view-head { margin: 4px 0 28px; }
  .view-head h1 { font-size: 42px; }

  /* ---------- Light: a stage between sidebar and settings panel ---------- */
  #view-light.is-active {
    margin: var(--gap) var(--panel-w) var(--gap) var(--nav-w);
    height: calc(100dvh - 2 * var(--gap));
    padding: 0 0 28px; /* full width so the fade lines up with the fixed light layer above */
    border-radius: 28px;
    overflow: hidden;
  }
  .top-light {
    top: var(--gap);
    left: var(--nav-w);
    right: var(--panel-w);
    border-radius: 28px 28px 0 0;
    padding-top: 40px;
  }
  .brand { font-size: 40px; }
  .hero { min-height: 170px; }
  .dial { width: clamp(300px, calc((100dvh - 390px) * 1.75), 500px); }
  .big { font-size: 80px; }
  .home-bottom { max-width: 460px; gap: 24px; padding-top: 18px; }
  /* Mode & timer live in the side panel, so only the start button stays here. */
  .controls-row { display: flex; justify-content: center; }
  #modeBtn, #timerBtn { display: none; }
  .play { width: 84px; height: 84px; }

  /* ---------- Settings panel (the mobile bottom sheet, docked) ---------- */
  .bottom-sheet {
    top: var(--gap);
    bottom: var(--gap);
    left: auto;
    right: var(--gap);
    width: calc(var(--panel-w) - 2 * var(--gap));
    max-width: none;
    margin: 0;
    padding: 26px 18px;
    border: 1px solid var(--glass-border);
    border-radius: 28px;
    transform: none;
    transition: none;
    overflow-y: auto;
    z-index: 10;
  }
  body:not([data-view="light"]) .bottom-sheet { display: none; }
  .sheet-grab { cursor: default; text-align: left; padding: 0; }
  .sheet-handle, #sheetDone, .sheet-backdrop { display: none; }
  .bottom-sheet h2 { font-size: 22px; }
  .mode-cards { grid-template-columns: 1fr; }
  .mode-cards button {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 16px;
  }
  .mode-cards .mode-ico { grid-row: 1 / 3; margin: 0; }
  .mode-cards b { align-self: end; }
  .mode-cards small { align-self: start; }
  .timer-chips { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .timer-chips button { height: 64px; }

  /* ---------- Info: structured guide grid ---------- */
  #view-info.is-active {
    max-width: 1180px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-areas:
      "head    head    head    head    head    head"
      "notice  notice  notice  notice  notice  notice"
      "lights  lights  lights  lights  lights  lights"
      "units   units   units   benefit benefit benefit"
      "morning morning morning red     red     red"
      "pen     pen     pen     pen     pen     pen"
      "good    good    how     how     dont    dont"
      "screen  screen  screen  sources sources sources";
    gap: 20px;
    align-items: stretch;
  }
  #view-info > * { margin: 0; }
  #view-info .view-head { grid-area: head; margin-bottom: 4px; }
  #view-info .notice-card { grid-area: notice; }
  #view-info .lights-card { grid-area: lights; }
  #view-info .g-units { grid-area: units; }
  #view-info .g-benefits { grid-area: benefit; }
  #view-info .g-morning { grid-area: morning; }
  #view-info .g-red { grid-area: red; }
  #view-info .pen-card { grid-area: pen; }
  #view-info .g-good { grid-area: good; }
  #view-info .g-how { grid-area: how; }
  #view-info .g-dont { grid-area: dont; }
  #view-info .g-screen { grid-area: screen; }
  #view-info .sources { grid-area: sources; }

  /* Penetration card: text and facts on the left, compact chart on the right */
  #view-info .pen-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: 36px;
    align-content: start;
  }
  #view-info .pen-card > * { grid-column: 1; }
  #view-info .pen-card > .figure { grid-column: 2; grid-row: 1 / span 6; margin: 0; align-self: center; }
  #view-info .pen-card .facts { grid-template-columns: 1fr; }

  /* ---------- Stats: dashboard grid ---------- */
  #view-stats.is-active {
    max-width: 1180px;
    display: grid;
    grid-template-columns: 7fr 5fr;
    grid-template-areas:
      "head   head"
      "tiles  tiles"
      "chart  week"
      "chart  fav"
      "recent recent"
      "clear  clear";
    gap: 20px;
    align-items: start;
  }
  #view-stats > * { margin: 0; }
  #view-stats .view-head { grid-area: head; margin-bottom: 8px; }
  .st-tiles { grid-area: tiles; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .st-chart { grid-area: chart; align-self: stretch; }
  .st-week { grid-area: week; }
  .st-fav { grid-area: fav; }
  .st-recent { grid-area: recent; }
  #clearBtn { grid-area: clear; justify-self: start; width: auto; padding: 0 28px; }
  .week { height: 220px; }
  .wd-c { width: 44px; height: 44px; }
}

/* ================= Penetration infographic ================= */
.pen-chart { display: block; width: 100%; height: auto; font-family: var(--font); }
.pen-chart .pen-group { fill: var(--ink-2); font-size: 8.5px; font-weight: 500; letter-spacing: 0.14em; }
.pen-chart .pen-bracket { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1; }
.pen-chart .pen-nm { fill: var(--ink); font-size: 10px; font-weight: 400; }
.pen-chart .pen-unit { fill: var(--ink-3); font-size: 9px; }
.pen-chart .pen-head { fill: var(--ink-2); font-size: 8.5px; font-weight: 500; letter-spacing: 0.12em; }
.pen-chart .pen-layer { fill: var(--ink); font-size: 10px; font-weight: 400; }
.pen-chart .pen-range { fill: var(--ink-3); font-size: 8.5px; }
.pen-chart .pen-sep { stroke: rgba(255, 255, 255, 0.14); stroke-dasharray: 2 3; }
.pen-chart .pen-legend { fill: var(--ink-2); font-size: 8.5px; font-weight: 500; letter-spacing: 0.12em; }
.pen-chart .pen-legend-sub { fill: var(--ink-3); font-size: 8.5px; }
.pen-facts { margin-bottom: 10px; }
.pen-you { border-color: rgba(var(--accent-rgb), 0.35); background: var(--accent-soft); }


/* ================= Bright light (Morning sun): dark text on light backgrounds ================= */
html.hero-bright .top-light .eyebrow-light { color: rgba(40, 24, 10, 0.6); }
html.hero-bright .top-light .brand { color: #2a1a0c; }
html.hero-bright .top-light .hero-sub { color: rgba(40, 24, 10, 0.7); }
html.session-bright .session-time { color: rgba(40, 24, 10, 0.75); }
html.session-bright .close {
  color: #2a1a0c;
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.06);
}

/* ================= Three lights card ================= */
.light-types { display: grid; gap: 10px; margin-top: 6px; }
.light-type {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-2);
}
.light-type i {
  grid-row: 1 / 4;
  width: 14px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 12px var(--c);
}
.light-type b { color: var(--ink); }
.light-type small { font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
/* Desktop: keep the penetration infographic within one column so it stays compact */
@media (min-width: 1024px) {
  #view-info .light-types { grid-template-columns: repeat(3, 1fr); }
}

/* ================= Keep-awake ================= */
/* Tiny and practically invisible, but still "on screen" so browsers treat it as visible playing video. */
.keep-awake-video {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: 2px;
  opacity: 0.01;
  pointer-events: none;
}
.awake-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  color: rgba(255, 238, 233, 0.85);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.awake-pill i { width: 7px; height: 7px; border-radius: 50%; background: #7dd87d; box-shadow: 0 0 6px #7dd87d; }
.awake-pill[data-state="off"] i { background: #ffb020; box-shadow: 0 0 6px #ffb020; }
html.session-bright .awake-pill { background: rgba(0, 0, 0, 0.06); color: rgba(40, 24, 10, 0.75); }

/* ================= Guide keeps fixed colours (does not follow the selected light) ================= */
body[data-view="info"] {
  --accent-rgb: 255, 68, 51;
  --accent: rgb(255, 68, 51);
  --accent-soft: rgba(255, 68, 51, 0.14);
  --accent-light: #ff8a6e;
  --on-accent: #ffffff;
  --tone: #ff0000;
}

/* ================= Units (nm / K) card ================= */
.units-figure { margin: 6px 0 16px; }
.units-bar {
  position: relative;
  height: 12px;
  margin-top: 38px;
  border-radius: 6px;
  background: linear-gradient(to right, #7a3cff 0%, #3a5bff 13%, #00b7ff 27%, #21e06a 40%, #d8f000 57%, #ff9a00 67%, #ff2a00 80%, #8a0000 100%);
}
.units-mark {
  position: absolute;
  left: var(--x);
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  line-height: 1.25;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.units-mark b { font-size: 11px; font-weight: 500; color: var(--ink); }
.units-mark::after { content: ""; width: 1px; height: 8px; margin-top: 3px; background: var(--ink-2); }
.units-mark:first-child { transform: translateX(-85%); }
.units-mark:last-child { transform: translateX(-15%); }
.units-scale { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--ink-3); }
.g-benefits .ic[style*="--ic"] { color: var(--ic); text-shadow: 0 0 8px var(--ic); font-size: 12px; }
.g-benefits .icon-list { margin-bottom: 16px; }