/* Counter — dark only, sized for iPhone 16e (390×844pt), fluid elsewhere. */
:root {
  --bg: #000;
  --card: #1c1c1e;
  --card-2: #2c2c2e;
  --sep: #38383a;
  --text: #fff;
  --muted: #8e8e93;
  --accent: #ff9f0a;
  --danger: #ff453a;
  --up: #30d158;
  --down: #ff453a;
  --gutter: 16px;
  --tabbar-h: 54px;
  --bar: #161618;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.3 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Pinned to the edges of the area iOS gives the page. With the opaque status
   bar (index.html) that area runs from below the status bar to the real screen
   bottom, so the tab bar's safe-area padding sits over the home indicator. */
body {
  background: var(--bg);
  position: fixed;
  inset: 0;
  height: auto; /* must not inherit height:100%, or `bottom: 0` is ignored */
  display: flex;
  flex-direction: column;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
}

[hidden] { display: none !important; }

.press { transition: transform 0.08s ease, filter 0.08s ease; }
.press:active { transform: scale(0.94); filter: brightness(1.25); }

/* ---- top nav bar ------------------------------------------------------- */

.nav {
  flex: none;
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: env(safe-area-inset-top) calc(var(--gutter) + env(safe-area-inset-right)) 0 calc(var(--gutter) + env(safe-area-inset-left));
  background: var(--bg);
  border-bottom: 0.5px solid var(--sep);
}
.nav-side { display: flex; min-width: 0; }
.nav-side.end { justify-content: flex-end; }
.nav-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- total, pinned above the tab bar ------------------------------------ */

.totalbar {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 6px calc(var(--gutter) + env(safe-area-inset-right)) 4px calc(var(--gutter) + env(safe-area-inset-left));
  text-align: center;
  background: var(--bar);
  border-top: 0.5px solid var(--sep);
}

.total-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.total {
  min-width: 0;
  max-width: 100%;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.total.len-m { font-size: 32px; }
.total.len-l { font-size: 26px; }

.total.pulse-up { animation: pulse-up 0.35s ease-out; }
.total.pulse-down { animation: pulse-down 0.35s ease-out; }
@keyframes pulse-up {
  30% { transform: scale(1.07); color: var(--up); }
  100% { transform: scale(1); color: var(--text); }
}
@keyframes pulse-down {
  30% { transform: scale(1.07); color: var(--down); }
  100% { transform: scale(1); color: var(--text); }
}

.update-banner {
  flex: none;
  width: 100%;
  padding: 10px var(--gutter);
  background: var(--accent);
  color: #000;
  font-size: 15px;
  font-weight: 600;
}

/* ---- panes ------------------------------------------------------------- */

.panes {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 0 calc(var(--gutter) + env(safe-area-inset-right)) 24px calc(var(--gutter) + env(safe-area-inset-left));
}

.pane { padding-top: 14px; }

.link-btn { color: var(--accent); font-size: 17px; min-height: 44px; padding: 0 4px; }
.link-btn.strong { font-weight: 600; }

.empty { color: var(--muted); text-align: center; margin: 40px 0 16px; }

.add-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  margin-top: 12px;
  border: 1.5px dashed var(--sep);
  border-radius: 16px;
  color: var(--accent);
  font-weight: 600;
}

/* ---- counter rows ------------------------------------------------------ */

.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.row {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 84px;
  padding: 10px;
  background: var(--card);
  border-radius: 16px;
}
.row-info { flex: 1; min-width: 0; text-align: center; }
.row-name {
  font-size: 15px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row-value {
  font-size: 34px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.step {
  flex: none;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--card-2);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  display: grid;
  place-items: center;
}
.step.plus { background: #0f3d1f; color: #5be584; }
.step.minus { background: #47130f; color: #ff7a70; }
.step.small { font-size: 17px; }

.handle {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--muted);
  touch-action: none;
  cursor: grab;
}
.handle svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2; stroke-linecap: round; fill: none; }
.chev { color: var(--muted); font-size: 22px; padding-right: 6px; }

.editing .row { cursor: pointer; }
.dragging { opacity: 0.85; outline: 2px solid var(--accent); outline-offset: -2px; transform: scale(1.02); z-index: 1; position: relative; }

/* ---- quick grid -------------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}

.tile {
  position: relative;
  min-height: 104px;
  padding: 12px;
  border-radius: 18px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
  display: grid;
  place-items: center;
  overflow-wrap: anywhere;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
.tile .handle {
  position: absolute;
  top: 2px;
  right: 2px;
  color: inherit;
  opacity: 0.8;
}
.editing .tile { cursor: pointer; }

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

.group {
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 8px;
}
.group-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  text-align: left;
  color: var(--accent);
}
.group-row + .group-row { border-top: 0.5px solid var(--sep); }
.group-row.static { color: var(--text); }
.group-row.danger { color: var(--danger); }
.group-row.solo { background: var(--card); border-radius: 14px; margin-top: 20px; justify-content: center; }
.group-row .press:active, .group-row.press:active { transform: none; background: var(--card-2); }
.muted { color: var(--muted); font-size: 15px; }
.note { color: var(--muted); font-size: 13px; margin: 8px 16px 24px; line-height: 1.4; }

/* ---- tab bar ----------------------------------------------------------- */

.tabbar {
  flex: none;
  display: flex;
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--bar);
}
.tab {
  flex: 1;
  height: var(--tabbar-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}
.tab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.active { color: var(--accent); }

/* ---- sheets & dialogs -------------------------------------------------- */

dialog {
  color: var(--text);
  border: 0;
  padding: 0;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }

.sheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0 auto;
  width: 100%;
  max-width: 560px;
  max-height: 92dvh;
  overflow-y: auto;
  background: #161618;
  border-radius: 18px 18px 0 0;
  padding: 0 var(--gutter) calc(env(safe-area-inset-bottom) + 20px);
}
.sheet[open] { animation: sheet-in 0.22s ease-out; }
@keyframes sheet-in { from { transform: translateY(40%); opacity: 0.4; } }

.sheet-head {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 56px;
}
.sheet-head h2 { margin: 0; font-size: 17px; font-weight: 600; }
.sheet-head .link-btn:first-child { justify-self: start; }
.sheet-head .link-btn:last-child { justify-self: end; }

.field { display: block; margin-top: 14px; }
.field > span { display: block; font-size: 13px; color: var(--muted); margin: 0 4px 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.field input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: inherit;
  font-size: 17px; /* ≥16px so iOS doesn't zoom on focus */
  -webkit-user-select: text;
  user-select: text;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.field textarea {
  width: 100%;
  height: 180px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  font: 13px/1.4 ui-monospace, Menlo, monospace;
  font-size: 16px; /* ≥16px so iOS doesn't zoom on focus */
  resize: none;
  -webkit-user-select: text;
  user-select: text;
}
.sheet-error { color: var(--danger); font-size: 14px; margin: 10px 4px 0; min-height: 1em; }
.file-btn { margin-top: 12px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--card);
  border-radius: 12px;
}
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span {
  display: grid;
  place-items: center;
  height: 42px;
  border-radius: 9px;
  font-weight: 600;
  color: var(--muted);
}
.seg input:checked + span { background: var(--card-2); color: var(--text); }

.swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.swatches label { position: relative; display: grid; place-items: center; }
.swatches input { position: absolute; opacity: 0; pointer-events: none; }
.swatches span {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.swatches input:checked + span { box-shadow: 0 0 0 3px #161618, 0 0 0 5px var(--text); }

.confirm {
  width: min(300px, calc(100% - 48px));
  background: #262628;
  border-radius: 16px;
  text-align: center;
  overflow: hidden;
}
.confirm p { margin: 0; padding: 22px 18px 18px; font-size: 16px; line-height: 1.35; }
.confirm-btns { display: grid; grid-template-columns: 1fr 1fr; border-top: 0.5px solid var(--sep); }
.confirm-btns button { min-height: 48px; color: var(--accent); font-size: 17px; }
.confirm-btns button + button { border-left: 0.5px solid var(--sep); font-weight: 600; }
.confirm-btns .danger { color: var(--danger); }
.confirm-btns button:active { background: var(--card-2); }

@media (prefers-reduced-motion: reduce) {
  .total.pulse-up, .total.pulse-down, .sheet[open] { animation: none; }
}

.group-row:disabled { opacity: 0.4; cursor: default; }
.group-row.solo + .group-row.solo { margin-top: 12px; }

/* ---- daily ----------------------------------------------------------------- */

.daily-row { min-height: 64px; padding: 8px 10px 8px 6px; gap: 6px; }
.daily-name {
  flex: 1;
  min-width: 0;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.daily-row { cursor: pointer; }

.check {
  flex: none;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}
.check .ring {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--muted);
  display: grid;
  place-items: center;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.check .ring svg { width: 20px; height: 20px; fill: none; stroke: transparent; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.check:active .ring { transform: scale(0.88); }
.check.done .ring { background: var(--up); border-color: var(--up); }
.check.done .ring svg { stroke: #000; }
.check.nope .ring { animation: nope 0.3s ease; }
@keyframes nope {
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.sheet-note { margin: 10px 4px 0; }

/* calendar */

.cal-month { margin-top: 14px; }
.cal-month:first-child { margin-top: 0; }
.cal-month h3 { margin: 0 4px 8px; font-size: 17px; font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-wd { text-align: center; font-size: 12px; font-weight: 600; color: var(--muted); padding-bottom: 2px; }
.cal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  background: var(--card);
}
.cal-day.on { background: var(--up); color: #000; font-weight: 700; }
.cal-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-day.future { opacity: 0.3; }
.cal-stats { color: var(--muted); font-size: 15px; text-align: center; margin: 18px 0 0; }

/* No text selection / callout on rapid taps -- but only on the tap targets.
   Applying user-select:none to html/body (as before) can stop iOS from
   bringing up the keyboard for inputs inside the page, even when the inputs
   themselves set user-select:text, so text fields and the sheets are left
   with the browser defaults. */
button, .tab, .row, .tile, .nav, .totalbar, .cal-month, .group-row.static, .note, .empty, .cal-stats {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input, textarea {
  -webkit-user-select: auto;
  user-select: auto;
  -webkit-touch-callout: default;
}

/* Settings: each note sits directly above the group it describes, so the
   gap goes before the note and the note hugs its group. */
.pane > .note { margin: 24px 16px 0; }
.pane > .note:first-child { margin-top: 8px; }
.pane > .group + .group { margin-top: 24px; }

/* "---- DANGER ZONE ----" divider above the destructive group. */
.zone-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 32px 4px 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  -webkit-user-select: none;
  user-select: none;
}
.zone-sep::before, .zone-sep::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--danger);
  opacity: 0.5;
}

/* ---- reminder controls (Settings) ----------------------------------------- */

.switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 51px;
  height: 31px;
  margin: 0;
  border-radius: 16px;
  background: var(--card-2);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
.switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease;
}
.switch:checked { background: var(--up); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: 0.4; cursor: default; }

.time-input {
  font: inherit;
  font-size: 17px; /* >=16px so iOS doesn't zoom */
  color: var(--accent);
  background: none;
  border: 0;
  padding: 4px 0;
  text-align: right;
  color-scheme: dark;
}
.time-input:disabled { color: var(--muted); }