:root {
  --bg: #141414;
  --panel: #1d1d1f;
  --panel-2: #262628;
  --line: #333336;
  --text: #f4f4f4;
  --muted: #9a9aa0;
  --yellow: #f2e52b;
  --green: #8cf34f;
  --red: #f23d3d;
  --blue: #2f9bff;
  --orange: #ff8a00;
  --ink: #101010;
  --radius: 14px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --topbar-pad: 10px;
  font-synthesis: none;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  margin: 0;
  /* The strip below the layout viewport is the home-indicator area; match the
     tab bar so it reads as part of the chrome. */
  background: #171718;
  color: var(--text);
  overflow: hidden;
  font-family: "Helvetica Neue", ui-sans-serif, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overscroll-behavior: none;
}

body { -webkit-user-select: none; user-select: none; }

.app {
  /* Set from JS to the layout viewport height; falls back to viewport units. */
  height: 100vh;
  height: var(--app-height, 100dvh);
  background: var(--bg);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* ---------------- top bar ---------------- */
.topbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: var(--topbar-pad, 10px) 14px 8px;
  min-height: 56px;
}
.topbar__left { justify-self: start; display: flex; min-width: 0; }
.topbar__right { justify-self: end; display: flex; gap: 6px; min-width: 0; }
.topbar__title {
  justify-self: center;
  text-align: center;
  display: grid;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
}
.icon-btn.icon-btn--pill {
  width: auto;
  height: auto;
  min-height: 46px;
  padding: 5px 10px 6px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: var(--panel);
  border-radius: 14px;
  color: var(--text);
  font-size: 9px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.icon-btn.icon-btn--pill svg { width: 17px; height: 17px; }
.icon-btn.icon-btn--pill:active { background: var(--panel-2); }
.topbar__mode {
  font-size: 12px;
  letter-spacing: .12em;
  color: #c9c9cf;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.topbar__total {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.icon-btn {
  background: none;
  border: 0;
  color: var(--muted);
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  cursor: pointer;
}
.icon-btn svg { width: 22px; height: 22px; fill: currentColor; }
.icon-btn:hover { color: var(--text); }
.icon-btn:active { background: var(--panel-2); }

/* ---------------- timer screen ---------------- */
.view { display: grid; min-height: 0; overflow: hidden; }
.view > * { min-height: 0; }
.timer {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 14px 14px;
  min-height: 0;
}
.side { display: grid; gap: 10px; align-content: end; }
.phase-panel {
  border-radius: var(--radius);
  background: var(--yellow);
  color: var(--ink);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 16px;
  min-height: 34vh;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.phase-panel[data-phase="work"] { background: var(--green); }
.phase-panel[data-phase="rest"] { background: var(--red); color: #fff; }
.phase-panel[data-phase="cycle-rest"] { background: var(--yellow); }
.phase-panel[data-phase="cooldown"] { background: var(--blue); color: #fff; }
.phase-panel[data-phase="prepare"] { background: var(--yellow); }
.phase-panel[data-phase="done"] { background: var(--panel-2); color: var(--text); }
.phase-panel[data-phase="stopwatch"] { background: var(--blue); color: #fff; }

.phase-name {
  font-size: clamp(13px, 4vw, 17px);
  letter-spacing: .22em;
  font-weight: 800;
  opacity: .82;
}
.phase-count {
  font-size: clamp(88px, 34vw, 190px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  font-stretch: condensed;
  margin: 4px 0;
}
.phase-count.small { font-size: clamp(54px, 20vw, 120px); }
.phase-context {
  font-size: clamp(11px, 3.2vw, 13px);
  letter-spacing: .14em;
  font-weight: 800;
  opacity: .7;
}

.next-strip {
  border-radius: 10px;
  background: var(--panel-2);
  padding: 8px 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--muted);
  min-height: 44px;
}
.next-strip strong { color: var(--text); font-size: 14px; letter-spacing: .1em; }
.next-strip .dot { width: 8px; height: 8px; border-radius: 3px; background: var(--green); }
.next-strip[data-next="rest"] .dot { background: var(--red); }
.next-strip[data-next="cooldown"] .dot { background: var(--blue); }
.next-strip[data-next="prepare"] .dot { background: var(--yellow); }

.controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding-top: 4px;
}
.counter { display: grid; justify-items: center; gap: 2px; }
.counter__num {
  font-size: clamp(30px, 10vw, 44px);
  font-weight: 900;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.counter__label {
  font-size: 9.5px;
  letter-spacing: .12em;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  text-align: center;
}
.counter--rounds .counter__num { color: var(--blue); }
.counter--cycles .counter__num { color: var(--yellow); }
.counter--button {
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  padding: 6px 10px;
  border-radius: 14px;
  cursor: pointer;
  -webkit-appearance: none;
}
.counter--button:active { background: var(--panel-2); }

.ring-btn {
  width: clamp(96px, 30vw, 128px);
  height: clamp(96px, 30vw, 128px);
  border: 0;
  padding: 0;
  background: none;
  position: relative;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--text);
}
.ring-btn svg.ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: #2c2c2f; stroke-width: 7; }
.ring-progress {
  fill: none;
  stroke: var(--green);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset .1s linear;
}
.ring-btn[data-phase="rest"] .ring-progress { stroke: var(--red); }
.ring-btn[data-phase="prepare"] .ring-progress,
.ring-btn[data-phase="cycle-rest"] .ring-progress { stroke: var(--yellow); }
.ring-btn[data-phase="cooldown"] .ring-progress,
.ring-btn[data-phase="stopwatch"] .ring-progress { stroke: var(--blue); }
.ring-btn[data-phase="done"] .ring-progress { stroke: var(--muted); }
.ring-btn svg.glyph { width: 38%; height: 38%; fill: currentColor; position: relative; z-index: 1; }
.ring-btn:active { transform: scale(.97); }

/* ---------------- editor ---------------- */
.editor, .settings {
  padding: 4px 14px 22px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.editor__head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-bottom: 12px;
  gap: 8px;
}
.editor__title {
  text-align: center;
  font-size: 13px;
  letter-spacing: .16em;
  font-weight: 800;
  text-transform: uppercase;
}
.text-btn {
  background: none;
  border: 0;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 4px;
  cursor: pointer;
}
.text-btn--accent { color: var(--green); }
.text-btn--right { text-align: right; }

.name-row {
  display: flex;
  gap: 10px;
  align-items: center;
  background: var(--panel);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.name-row input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 8px 0;
  -webkit-user-select: text;
  user-select: text;
}
.name-row input:focus { outline: none; }
.name-dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }

.rows { display: grid; gap: 8px; }
.row {
  display: grid;
  grid-template-columns: 14px 1fr auto 8px;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: var(--panel);
  border: 0;
  border-radius: 12px;
  padding: 12px 12px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-height: 62px;
}
.row:active { background: var(--panel-2); }
.row__dot { width: 12px; height: 12px; border-radius: 50%; }
.row__body { display: grid; gap: 3px; min-width: 0; }
.row__label { font-size: 15px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.row__hint { font-size: 11px; color: var(--muted); line-height: 1.25; }
.row__value { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.row__chevron { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); }

.color-yellow { background: var(--yellow); }
.color-green { background: var(--green); }
.color-red { background: var(--red); }
.color-blue { background: var(--blue); }
.color-orange { background: var(--orange); }

.total-row {
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 4px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: .12em;
  font-weight: 800;
  text-transform: uppercase;
}
.total-row strong { color: var(--text); font-size: 17px; letter-spacing: 0; }

.wide-btn {
  width: 100%;
  margin-top: 10px;
  background: var(--panel);
  border: 1px dashed var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 14px;
  font: inherit;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  cursor: pointer;
}
.wide-btn:active { background: var(--panel-2); }

/* ---------------- settings ---------------- */
.section-title {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  margin: 18px 4px 8px;
}
.setting {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--panel);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 8px;
  min-height: 58px;
}
.setting__label { display: grid; gap: 3px; }
.setting__label b { font-size: 14px; font-weight: 700; }
.setting__label small { color: var(--muted); font-size: 11px; line-height: 1.3; }
.switch {
  width: 52px; height: 32px; border-radius: 999px;
  background: #3a3a3d; border: 0; position: relative; cursor: pointer;
  transition: background .15s;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; transition: transform .15s;
}
.switch[aria-checked="true"] { background: var(--green); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.segmented {
  display: flex; gap: 4px; background: var(--panel-2);
  border-radius: 10px; padding: 3px;
}
.segmented button {
  border: 0; background: none; color: var(--muted); font: inherit;
  font-size: 12px; font-weight: 700; padding: 8px 9px; border-radius: 8px; cursor: pointer;
}
.segmented button[aria-pressed="true"] { background: #3d3d40; color: var(--text); }
input[type="range"] { width: 100%; accent-color: var(--green); }

.note {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  padding: 4px 6px 0;
}

/* ---------------- tab bar ---------------- */
.tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #171718;
  border-top: 1px solid var(--line);
  padding: 6px 6px calc(6px + var(--safe-b));
}
.tab {
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: 10px; font-weight: 700; letter-spacing: .06em;
  display: grid; justify-items: center; gap: 3px; padding: 6px 2px;
  border-radius: 10px; cursor: pointer;
  text-transform: uppercase;
}
.tab svg { width: 21px; height: 21px; fill: currentColor; opacity: .8; }
.tab[aria-selected="true"] { color: var(--text); }
.tab[aria-selected="true"] svg { opacity: 1; }

/* ---------------- sheets ---------------- */
.sheet-root[hidden] { display: none; }
.sheet-root {
  position: fixed; inset: 0; z-index: 40;
  display: grid; align-items: end;
  background: rgba(0, 0, 0, .55);
  animation: fade .12s ease-out;
}
@keyframes fade { from { opacity: 0; } }
@keyframes slideup { from { transform: translateY(14px); opacity: .6; } }

.sheet {
  background: #1b1b1d;
  border-radius: 18px 18px 0 0;
  padding: 10px 14px calc(16px + var(--safe-b));
  max-height: 88dvh;
  overflow-y: auto;
  animation: slideup .16s ease-out;
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
  box-shadow: 0 -20px 50px rgba(0,0,0,.45);
}
.sheet__grab { width: 40px; height: 4px; border-radius: 2px; background: #3a3a3d; margin: 4px auto 12px; }
.sheet__head {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.sheet__title { text-align: center; font-weight: 800; letter-spacing: .14em; font-size: 13px; text-transform: uppercase; }

.wheels { display: flex; gap: 8px; justify-content: center; margin: 6px 0 12px; }
.wheel {
  height: 220px; overflow-y: auto; scroll-snap-type: y mandatory;
  background: var(--panel); border-radius: 12px; position: relative;
  padding: 88px 0; width: 96px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wheel::-webkit-scrollbar { display: none; }
.wheel button {
  display: block; width: 100%; height: 44px; scroll-snap-align: center;
  border: 0; background: none; color: var(--muted); font: inherit;
  font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.wheel button[aria-selected="true"] { color: var(--text); font-size: 24px; }
.wheel-label {
  text-align: center; font-size: 9px; letter-spacing: .16em; color: var(--muted);
  font-weight: 800; margin-top: 6px;
}
.wheel-stack { display: grid; }
.wheel-marker {
  position: absolute; left: 6px; right: 6px; top: 88px; height: 44px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  pointer-events: none; border-radius: 6px;
}

.swatches { display: flex; gap: 10px; justify-content: center; margin: 4px 0 14px; }
.swatch {
  width: 44px; height: 44px; border-radius: 50%; border: 3px solid transparent;
  cursor: pointer; padding: 0;
}
.swatch[aria-pressed="true"] { border-color: #fff; }

.preset-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.chip {
  background: var(--panel-2); border: 0; color: var(--text);
  border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 12px;
  font-weight: 700; cursor: pointer;
}
.chip:active { background: #3a3a3d; }

/* ---------------- library ---------------- */
.lib { display: grid; gap: 8px; }
.lib-item {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
  background: var(--panel); border-radius: 12px; padding: 12px;
}
.lib-item__main { display: grid; gap: 4px; cursor: pointer; border: 0; background: none; color: inherit; font: inherit; text-align: left; padding: 0; }
.lib-item__name { font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 15px; }
.lib-item__meta { color: var(--muted); font-size: 11px; letter-spacing: .04em; }
.lib-item__actions { display: flex; gap: 4px; }
.icon-mini {
  background: var(--panel-2); border: 0; color: var(--muted);
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  cursor: pointer;
}
.icon-mini svg { width: 17px; height: 17px; fill: currentColor; }
.icon-mini:active { color: var(--text); }

/* ---------------- landscape ---------------- */
@media (orientation: landscape) and (max-height: 560px) {
  .app { max-width: none; }
  .timer {
    grid-template-columns: minmax(0, 1fr) 132px;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
  }
  .phase-panel { min-height: 0; }
  .side {
    display: grid;
    grid-template-rows: auto 1fr auto 1fr;
    gap: 6px;
    align-content: stretch;
  }
  .next-strip {
    flex-direction: column; gap: 2px; padding: 6px; font-size: 8.5px; min-height: 0;
  }
  .next-strip strong { font-size: 10.5px; }
  .controls { display: contents; }
  .counter { padding: 2px 0; align-content: center; }
  .counter__num { font-size: 30px; }
  .counter__label { font-size: 8px; }
  .ring-btn { width: 86px; height: 86px; justify-self: center; align-self: center; }
  .phase-count { font-size: clamp(80px, 27vh, 190px); }
  .phase-context { font-size: 10px; }
  .topbar { min-height: 42px; padding-top: 2px; padding-bottom: 2px; }
  .topbar__total { font-size: 16px; }
  .topbar__mode { font-size: 9px; }
  .tabbar { padding: 2px 6px calc(2px + var(--safe-b)); }
  .tab { font-size: 8.5px; padding: 3px 2px; gap: 1px; }
  .tab svg { width: 17px; height: 17px; }
}

.sound-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.sound-chip {
  justify-self: stretch;
  text-align: center;
  padding: 13px 6px;
  font-size: 12px;
  min-height: 46px;
}
.sound-chip:active { background: var(--green); color: var(--ink); }

.lab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}
.lab-item {
  display: grid;
  gap: 3px;
  text-align: left;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  color: var(--text);
  font: inherit;
  cursor: pointer;
  min-height: 58px;
}
.lab-item__name { font-weight: 800; font-size: 14px; }
.lab-item__hint { color: var(--muted); font-size: 11px; }
.lab-item__credit { color: #6f6f76; font-size: 9.5px; letter-spacing: .03em; }

.cue-controls { display: flex; align-items: center; gap: 8px; }
.cue-select {
  max-width: 168px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 8px;
  font: inherit;
  font-size: 12px;
}
.cue-select:focus { outline: 2px solid var(--green); outline-offset: 1px; }
.lab-item:active { background: var(--panel-2); }

/* ---------------- flash overlay ---------------- */
.flash-layer {
  position: fixed; inset: 0; background: #fff; opacity: 0;
  pointer-events: none; z-index: 60; transition: opacity .18s linear;
}
.flash-layer.on { opacity: .82; transition: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}