/* One phone screen, read top to bottom: what's running, one huge tap, second-tap options, then Top 2–5 and check-ins.
   The sky takes the colour of what's running and drifts the longer it runs; the circle takes the colour of the guess. */
@property --h { syntax: "<number>"; inherits: true; initial-value: 330; }
@property --gh { syntax: "<number>"; inherits: true; initial-value: 330; }
:root {
  color-scheme: dark;
  --h: 330;
  --gh: 330;
  --bg: #0c0a11;
  --ink: #f4f1f8;
  --ink-dim: rgba(244, 241, 248, .7);
  --ink-faint: rgba(244, 241, 248, .45);
  --line: rgba(255, 255, 255, .14);
  --glass: rgba(18, 14, 26, .44);
  --ok: #7fe0a8;
  --warn: #ffd38a;
  --err: #ff9a8a;
  --display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  transition: --h 1.6s ease, --gh 1.2s ease;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--display); font-size: 16px; line-height: 1.4;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}
[hidden] { display: none !important; }
button, input { font: inherit; }
input { font-size: 16px; } /* stops iOS zooming into fields */

.sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 48% at 18% 12%, hsl(var(--h) 88% 56% / .62), transparent 70%),
    radial-gradient(52% 42% at 88% 34%, hsl(calc(var(--h) + 42) 82% 52% / .5), transparent 70%),
    radial-gradient(72% 58% at 45% 104%, hsl(calc(var(--h) - 38) 78% 46% / .58), transparent 72%),
    var(--bg);
  background-size: 150% 150%;
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift { from { background-position: 0% 0%; } to { background-position: 100% 100%; } }

.app {
  position: relative; z-index: 1;
  max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 22px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 14px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.eyebrow { font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); }
.note { font-size: .8rem; color: var(--ink-faint); }
.row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; color: var(--ink-dim); font-size: .88rem; }
.row.tight { gap: 12px; justify-content: flex-end; }
.grow { flex: 1; }

.demoBar { align-self: flex-start; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: hsl(40 90% 55% / .2); border: 1px solid hsl(40 90% 65% / .45); color: var(--warn); }

/* Setup */
.setup { min-height: 100vh; justify-content: center; }
.setupTitle { font-size: clamp(1.8rem, 8vw, 2.4rem); font-weight: 800; line-height: 1.08; margin: 0; text-wrap: balance; }
.setupText { margin: 0; color: var(--ink-dim); max-width: 40ch; }
.field.col { flex-direction: column; }

/* What's running */
.now { display: grid; gap: 6px; }
.nowName {
  all: unset; cursor: pointer; font-family: var(--display);
  font-size: clamp(1.55rem, 7.4vw, 2.1rem); font-weight: 800; line-height: 1.08;
  text-wrap: balance; overflow-wrap: anywhere;
}
.nowName:disabled { cursor: default; color: var(--ink-dim); font-weight: 650; font-size: 1.2rem; }
.nowName:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 4px; }
.nowMeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-dim); font-size: .88rem; }
.chip {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: hsl(var(--h) 70% 60% / .22); border: 1px solid hsl(var(--h) 80% 70% / .4);
}
.clock {
  font-family: var(--mono); font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: clamp(2.7rem, 14vw, 3.6rem); letter-spacing: -.02em; line-height: 1; margin-top: 4px;
}
.planLine { font-size: .88rem; color: var(--ink-faint); }
.rename { display: flex; gap: 8px; }

/* The one tap */
.stage { display: grid; place-items: center; padding-block: 8px; }
.tap {
  position: relative;
  width: min(64vw, 250px); aspect-ratio: 1;
  border: 0; border-radius: 50%; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 16% 12%; overflow: hidden;
  text-align: center; color: #fff; font-family: var(--display);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .35);
  background: radial-gradient(circle at 34% 26%, hsl(var(--gh) 92% 64%), hsl(var(--gh) 80% 47%) 56%, hsl(calc(var(--gh) - 24) 74% 31%));
  box-shadow: 0 0 0 10px hsl(var(--gh) 90% 62% / .13), 0 26px 64px -14px hsl(var(--gh) 90% 40% / .75);
  transition: transform .14s ease, opacity .2s;
  touch-action: manipulation; -webkit-user-select: none; user-select: none;
}
.tap::before {
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid hsl(var(--gh) 90% 70% / .45);
  animation: ring 2.8s ease-out infinite;
}
@keyframes ring { from { transform: scale(1); opacity: .9; } to { transform: scale(1.16); opacity: 0; } }
.tap:active:not(:disabled) { transform: scale(.955); }
.tap:disabled { cursor: default; opacity: .6; }
.tap:disabled::before { animation: none; opacity: 0; }
.tap:focus-visible { outline: 3px solid var(--ink); outline-offset: 14px; }
.tapVerb { font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .9; white-space: nowrap; }
.tapName {
  font-size: clamp(1.1rem, 5vw, 1.4rem); font-weight: 800; line-height: 1.12; text-wrap: balance; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 100%;
}
.tapWhy { font-size: .8rem; opacity: .9; line-height: 1.3; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Gap + past blocks */
.gapRow {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 14px; font-weight: 600;
  background: hsl(40 90% 55% / .18); border: 1px solid hsl(40 90% 65% / .5);
}
.past, .pitem, .alt, .sheetBody { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.past { display: grid; gap: 10px; padding: 14px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); }
.times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.times label { display: grid; gap: 4px; font-size: .8rem; color: var(--ink-dim); min-width: 0; }
input[type="time"], .times input, .startAt input { color: var(--ink); padding: 10px 12px; border-radius: 12px; background: var(--glass); border: 1px solid var(--line); min-width: 0; min-height: 44px; }
.chips2 { display: flex; flex-wrap: wrap; gap: 6px; }
.chip2 { color: var(--ink); padding: 8px 12px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); cursor: pointer; max-width: 100%; overflow-wrap: anywhere; text-align: left; font-size: .88rem; }
.marker { width: 100%; }
.startAt { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: .88rem; color: var(--ink-dim); }

/* Segmented buttons */
.seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.seg.four { grid-template-columns: repeat(4, 1fr); }
.seg.ago { grid-template-columns: auto repeat(4, 1fr); align-items: center; }
.seg .segLabel { margin: 0 4px 0 0; }
.seg button {
  font-weight: 650; color: var(--ink); cursor: pointer; min-height: 44px;
  padding: 10px 0; border-radius: 12px; min-width: 0;
  background: var(--glass); border: 1px solid var(--line);
}
.seg button[aria-pressed="true"] { background: hsl(var(--gh) 80% 55% / .5); border-color: hsl(var(--gh) 90% 72% / .85); }
.segLabel { font-size: .8rem; color: var(--ink-dim); margin-top: 2px; }

/* Second tap */
.alts { display: grid; gap: 10px; }
.chips { display: grid; gap: 8px; }
.alt {
  all: unset; box-sizing: border-box; cursor: pointer; font-family: var(--display);
  display: grid; grid-template-columns: 10px 1fr; align-items: center; column-gap: 12px;
  padding: 12px 14px; border-radius: 14px; min-height: 54px;
  background: var(--glass); border: 1px solid var(--line);
}
.alt:active { transform: scale(.985); }
.alt:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.alt[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.dot { width: 10px; height: 10px; border-radius: 50%; grid-row: span 2; }
.altName { font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.altWhy { font-size: .8rem; color: var(--ink-dim); min-width: 0; }
.field { display: flex; gap: 8px; }
.field input {
  flex: 1; min-width: 0; color: var(--ink); min-height: 46px;
  padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line);
}
.field input::placeholder { color: var(--ink-faint); }
.field input:focus-visible, input[type="time"]:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.btn {
  font-weight: 650; color: var(--bg); cursor: pointer; min-height: 46px;
  padding: 12px 16px; border: 0; border-radius: 14px; background: var(--ink);
}
.btn:disabled { opacity: .5; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.danger { color: var(--err); }
.btn.sm { padding: 8px 12px; font-size: .88rem; border-radius: 10px; min-height: 38px; }

/* Top 2-5 */
.prio { display: grid; gap: 10px; }
.plist { display: grid; gap: 8px; }
.pitem {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  padding: 12px 14px; border-radius: 14px; background: var(--glass); border: 1px solid var(--line);
}
.pitem.ask { border-color: hsl(var(--gh) 90% 72% / .85); }
.pitem.done { opacity: .55; }
.pname { font-weight: 650; min-width: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pmeta { grid-column: 1; font-size: .8rem; color: var(--ink-dim); min-width: 0; }
.pacts { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: center; }

.check { display: grid; gap: 8px; }

/* Footer */
.foot { margin-top: auto; display: grid; gap: 10px; }
.link { all: unset; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: .88rem; padding: 6px 0; }
.link:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.status { font-size: .9rem; line-height: 1.4; color: var(--ink-dim); min-height: 1.3em; }
.status.ok { color: var(--ok); }
.status.err { color: var(--err); }
#syncNote.waiting { color: var(--warn); }

/* Settings sheet */
.sheet { border: 0; padding: 0; background: transparent; color: var(--ink); width: min(520px, 100%); max-width: 100%; margin: auto auto 0; }
.sheet::backdrop { background: rgba(0, 0, 0, .55); }
.sheetBody {
  display: grid; gap: 10px; padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  border-radius: 20px 20px 0 0; background: rgba(24, 20, 32, .92); border: 1px solid var(--line);
}

/* iOS haptic tick: toggling a hidden switch from a tap. */
.haptic { position: fixed; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; left: -10px; top: -10px; }

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .sky, .tap::before { animation: none; }
  .tap, .alt { transition: none; }
}