/* Move — Apple's Fitness and Music for the shape: large titles, cards on grey, a tab bar of glass
 * floating at the foot. Light is the base; dark is a token swap.
 *
 * ~/claude/IOS.md: §1 the glass offset once, on the header; §15 THE DOCUMENT SCROLLS — no fixed
 * full-screen layer, no locked root: the header and the foot (tab bar) are in the flow, sticky;
 * §19 a floor under the top inset in Safari's own window (app.js sets --ios-chrome-t).
 */
:root {
  --bg:      #f2f2f7;
  --panel:   #ffffff;
  --panel-2: #f6f6f9;
  --line:    rgba(60, 60, 67, .16);
  --ink:     #000000;
  --ink-2:   #3c3c43;
  --dim:     #8a8a8e;
  --pill:    #e5e5ea;
  --accent:  #0a8f5b;
  --accent-2:#34c759;
  --ring:    #ff2d55;
  --warn:    #b8730a;
  --bad:     #e5322b;
  --gold:    #c9900c;
  --on-accent: #ffffff;
  --glass:   rgba(255, 255, 255, .72);
  --shadow:  0 1px 2px rgba(0,0,0,.04), 0 6px 20px rgba(0,0,0,.06);
  --r-card: 18px; --r-mid: 12px;
  --font: -apple-system, BlinkMacSystemFont, system-ui, "SF Pro Text", "Helvetica Neue", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --glass-t: 20px;
  --ios-chrome-t: 0px;
  --top: calc(max(var(--safe-t), var(--ios-chrome-t)) + var(--glass-t));
  --side: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000; --panel: #1c1c1e; --panel-2: #2c2c2e; --line: rgba(84, 84, 88, .48);
    --ink: #ffffff; --ink-2: #d7d7db; --dim: #98989f; --pill: #2c2c2e;
    --accent: #30d158; --accent-2: #30d158; --on-accent: #00210f; --warn: #ffd60a; --bad: #ff453a; --gold: #ffd60a;
    --glass: rgba(37, 37, 40, .72);
    --shadow: none;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; }
html, body { background: var(--bg); color: var(--ink); margin: 0; min-height: 100%; }
body { font: 15px/1.4 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
img { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

#app { display: flex; flex-direction: column; min-height: 100vh; }
#app > main { flex: 1 0 auto; }

/* ── the header ────────────────────────────────────────────────────────── */
.top { position: sticky; top: 0; z-index: 30;
       padding: calc(4px + var(--top)) calc(var(--side) + var(--safe-r)) 6px calc(var(--side) + var(--safe-l));
       background: color-mix(in srgb, var(--bg) 84%, transparent);
       -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
       border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.topin, #main, .foot { max-width: 720px; margin: 0 auto; }
.titlerow { display: flex; align-items: center; gap: 6px; min-height: 46px; }
.titlerow h1 { font-size: 32px; font-weight: 800; letter-spacing: -.035em; margin: 0; flex: 1; min-width: 0;
               white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top.sub .titlerow h1 { font-size: 22px; letter-spacing: -.02em; }
.back { background: none; border: 0; width: 40px; height: 40px; margin-left: -10px; padding: 8px; color: var(--accent); flex: none; }
.back svg { width: 100%; height: 100%; }
.pill { flex: none; border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 650; border: 0; }
.update { background: var(--accent); color: var(--on-accent); }

#main { padding: 4px calc(var(--side) + var(--safe-r)) 28px calc(var(--side) + var(--safe-l)); width: 100%; }

/* ── the foot: the tab bar in the flow (sticky), floating as glass ───────── */
.foot { position: sticky; bottom: 0; z-index: 25; width: 100%; display: flex; flex-direction: column; gap: 8px; pointer-events: none;
        padding: 8px calc(14px + var(--safe-r)) calc(6px + max(0px, var(--safe-b) - 12px)) calc(14px + var(--safe-l)); }
.foot > * { pointer-events: auto; }
.glass { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
         border: 1px solid color-mix(in srgb, var(--ink) 9%, transparent); box-shadow: 0 6px 24px rgba(0,0,0,.14); }
.tabbar { display: flex; height: 60px; padding: 4px; border-radius: 999px; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-radius: 999px;
            color: var(--ink); font-size: 10.5px; font-weight: 600; }
.tabbar a svg { width: 24px; height: 24px; }
.tabbar a.on { color: var(--accent); background: color-mix(in srgb, var(--ink) 7%, transparent); }
.toast { align-self: center; max-width: 100%; padding: 10px 16px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 550;
         box-shadow: 0 6px 24px rgba(0,0,0,.2); }
.toast.bad { background: var(--bad); color: #fff; }

/* ── the doors ─────────────────────────────────────────────────────────── */
.door { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px 12px; gap: 6px; }
.doormark { width: 92px; height: 92px; border-radius: 22px; box-shadow: var(--shadow); margin-bottom: 10px; }
.door h2 { font-size: 28px; letter-spacing: -.03em; margin: 0 0 8px; }
.note { color: var(--dim); font-size: 14px; margin: 8px 0 0; }
.door .note { max-width: 330px; margin: 10px auto 0; }
.err { color: var(--bad); margin: 10px 0 0; font-size: 14px; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn { border: 0; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 650; padding: 10px 18px; min-height: 44px;
       display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn.big { font-size: 17px; padding: 13px 30px; min-width: 200px; }
.btn.wide { width: 100%; }
.btn.quiet { background: var(--pill); color: var(--ink); }
.btn.danger { background: transparent; color: var(--bad); }
.btn:disabled { opacity: .5; }
.btn:active { filter: brightness(.92); }
.btnrow { display: flex; gap: 10px; margin: 12px 0; }
.btnrow > .btn { flex: 1; }

/* ── cards and rows ────────────────────────────────────────────────────── */
.card { background: var(--panel); border-radius: var(--r-card); padding: 16px; margin: 12px 0; box-shadow: var(--shadow); }
.card h3 { margin: 0 0 4px; font-size: 17px; }
h2.sec { font-size: 20px; font-weight: 750; letter-spacing: -.02em; margin: 22px 2px 8px; }
h3.sec { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--dim); margin: 22px 16px 6px; }
.rows { background: var(--panel); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow); }
.row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 10px 16px; border: 0; background: none; text-align: left;
       color: var(--ink); position: relative; }
.rows > .row + .row::before, .rows > .row + form::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; border-top: 1px solid var(--line); }
.rows > a.row:active, .rows > button.row:active { background: var(--panel-2); }
.row-k { flex: 1; min-width: 0; }
.row-k small { display: block; color: var(--dim); font-size: 13px; }
.row-v { color: var(--dim); text-align: right; }
.chev { color: var(--dim); font-size: 20px; line-height: 1; }
.row.danger .row-k { color: var(--bad); }
.row-note { color: var(--dim); font-size: 13px; padding: 0 16px 12px; margin: 0; }
.lockrow { font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.lockrow .lc { color: var(--accent); }
.fineprint { color: var(--dim); font-size: 12px; text-align: center; margin: 18px 0 0; }
.fineprint a { color: var(--dim); text-decoration: underline; }

/* ── the week ──────────────────────────────────────────────────────────── */
.week { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; align-items: center; }
.week .big { font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.week .big small { font-size: 17px; font-weight: 650; color: var(--dim); letter-spacing: 0; }
.week .streak { text-align: right; }
.week .streak b { display: block; font-size: 28px; font-weight: 800; line-height: 1.05; color: var(--ring); }
.week .streak span { color: var(--dim); font-size: 13px; }
.days { grid-column: 1 / -1; display: flex; gap: 6px; margin-top: 8px; }
.days i { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; font-style: normal; font-size: 11px; color: var(--dim); font-weight: 600; }
.days i::before { content: ''; width: 100%; max-width: 38px; aspect-ratio: auto; height: 30px; border-radius: 9px; background: var(--pill); }
.days i.on::before { background: var(--accent-2); }
.days i.today { color: var(--ink); }
.days i.today::before { box-shadow: inset 0 0 0 2px var(--accent); }
.weeknote { grid-column: 1 / -1; color: var(--dim); font-size: 14px; margin: 6px 0 0; }

/* ── the actions ───────────────────────────────────────────────────────── */
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.act { border: 0; background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px 8px 12px; min-height: 96px;
       display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-weight: 650; font-size: 14px; color: var(--ink); }
.act svg { width: 34px; height: 34px; color: var(--accent); }
.act:active { background: var(--panel-2); }
.openbar { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; text-align: left; background: var(--accent); color: var(--on-accent);
           border-radius: var(--r-card); padding: 14px 16px; margin: 12px 0; font-weight: 650; }
.openbar span { flex: 1; }
.openbar small { display: block; font-weight: 500; opacity: .85; }

/* ── an activity row ───────────────────────────────────────────────────── */
.act-row .glyph { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none;
                  background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.act-row .glyph svg { width: 22px; height: 22px; }
.act-row.no .glyph { background: var(--pill); color: var(--dim); }
.tick { color: var(--accent); font-weight: 700; }
.why { color: var(--dim); font-size: 13px; }
.why.yes { color: var(--accent); }

/* ── numbers ───────────────────────────────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.stat b { display: block; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.stat span { color: var(--dim); font-size: 13px; }
table.sets { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
table.sets td, table.sets th { padding: 7px 4px; text-align: left; border-top: 1px solid var(--line); font-size: 14px; }
table.sets th { color: var(--dim); font-weight: 600; font-size: 12px; border-top: 0; }
table.sets td.n { text-align: right; }
svg.hr { width: 100%; height: 120px; display: block; }
svg.hr path.line { fill: none; stroke: var(--ring); stroke-width: 2; vector-effect: non-scaling-stroke; }
svg.hr path.area { fill: color-mix(in srgb, var(--ring) 14%, transparent); }

/* ── forms ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.field label { color: var(--dim); font-size: 13px; font-weight: 600; }
select, input[type=text], input[type=number], textarea, input[type=search] {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-mid); border: 1px solid var(--line); background: var(--panel-2); font-size: 17px; }
textarea { min-height: 72px; resize: vertical; }
.stepper { display: flex; align-items: center; gap: 8px; }
.stepper input { text-align: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.stepper button { flex: none; width: 52px; height: 48px; border-radius: var(--r-mid); border: 0; background: var(--pill); font-size: 22px; font-weight: 700; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.seg { display: flex; background: var(--pill); border-radius: 10px; padding: 2px; gap: 2px; }
.seg button { flex: 1; border: 0; background: none; border-radius: 8px; padding: 7px 0; font-weight: 600; font-size: 14px; min-height: 36px; }
.seg button.on { background: var(--panel); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.switch { appearance: none; -webkit-appearance: none; width: 51px; height: 31px; border-radius: 999px; background: var(--pill); position: relative; flex: none; margin: 0; transition: background .2s; }
.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,.2); transition: transform .2s; }
.switch:checked { background: var(--accent-2); }
.switch:checked::after { transform: translateX(20px); }
.switch:disabled { opacity: .5; }
.linkform { display: flex; gap: 8px; align-items: center; }
.linkform input { flex: 1; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }

/* ── the leaderboard ───────────────────────────────────────────────────── */
.tabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px calc(-1 * var(--side)) 6px; padding: 0 var(--side); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: none; padding: 7px 14px; border-radius: 999px; background: var(--pill); color: var(--ink); font-size: 14px; font-weight: 600; border: 0; min-height: 36px; }
.tabs button.on { background: var(--ink); color: var(--bg); }
.lb .row { min-height: 44px; }
.lb .rank { width: 28px; color: var(--dim); font-weight: 700; font-variant-numeric: tabular-nums; flex: none; }
.lb .row.you { background: color-mix(in srgb, var(--gold) 12%, transparent); }
.lb .row.you .row-k { font-weight: 700; }
.youline { color: var(--dim); font-size: 14px; margin: 8px 4px 0; }

/* ── the feed ──────────────────────────────────────────────────────────── */
.post { background: var(--panel); border-radius: var(--r-card); box-shadow: var(--shadow); margin: 12px 0; overflow: hidden; }
.post header { display: flex; align-items: baseline; gap: 8px; padding: 14px 16px 0; }
.post header b { font-size: 16px; }
.post header span { color: var(--dim); font-size: 13px; }
.post .what { padding: 2px 16px 10px; color: var(--ink-2); }
.post .cap { padding: 0 16px 10px; margin: 0; }
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.photos img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 1; background: var(--pill); }
.photos.one { grid-template-columns: 1fr; }
.photos.one img { aspect-ratio: 4 / 3; }
.post footer { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; }
.cheer { border: 0; background: var(--pill); border-radius: 999px; padding: 7px 14px; font-weight: 650; min-height: 36px; }
.cheer.on { background: color-mix(in srgb, var(--ring) 16%, transparent); color: var(--ring); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; background: var(--pill); }

/* ── the outing ────────────────────────────────────────────────────────── */
.pins { list-style: none; margin: 0; padding: 0; }
.pins li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.pins li:first-child { border-top: 0; }
.pins .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--accent); flex: none; }
.pins img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.status { font-size: 15px; font-weight: 600; margin: 4px 0 0; }
.status.yes { color: var(--accent); }

/* ── Technical ─────────────────────────────────────────────────────────── */
details.card summary { display: flex; align-items: center; list-style: none; cursor: pointer; font-weight: 600; }
details.card summary::-webkit-details-marker { display: none; }
details.card summary .chev { margin-left: auto; transition: transform .2s; }
details.card[open] summary .chev { transform: rotate(90deg); }
dl.kv { margin: 10px 0 0; font-size: 13px; }
dl.kv div { display: flex; gap: 10px; padding: 4px 0; border-top: 1px solid var(--line); }
dl.kv dt { color: var(--dim); width: 96px; flex: none; }
dl.kv dd { margin: 0; overflow-wrap: anywhere; }

@media (min-width: 700px) {
  .acts { grid-template-columns: repeat(3, 1fr); }
  .titlerow h1 { font-size: 36px; }
}

/* ── the camera ────────────────────────────────────────────────────────── */
.cam { position: relative; border-radius: var(--r-card); overflow: hidden; background: #000; aspect-ratio: auto; min-height: 260px; }
.cam video, .cam canvas { width: 100%; display: block; }
.cam canvas { position: absolute; inset: 0; height: 100%; }
.cam .mirror { transform: scaleX(-1); }
.camcount { position: absolute; top: 10px; left: 12px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.camcount b { display: block; font-size: 72px; font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.camcount span { font-weight: 650; }
.camhint { position: absolute; left: 0; right: 0; bottom: 10px; margin: 0; text-align: center; color: #fff; font-weight: 650; font-size: 17px;
           text-shadow: 0 2px 10px rgba(0,0,0,.7); }

/* ── the mini player (in the foot, above the tab bar — Music's shape) ───── */
.mini { display: flex; align-items: center; gap: 2px; height: 56px; padding: 0 8px 0 18px; border-radius: 999px; }
.miniopen { flex: 1; min-width: 0; background: none; border: 0; text-align: left; padding: 0; height: 100%; color: var(--ink); }
.minitxt b, .minitxt span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.minitxt b { font-weight: 600; font-size: 15px; }
.minitxt span { color: var(--dim); font-size: 13px; }
.ibtn { background: none; border: 0; width: 44px; height: 44px; padding: 10px; color: var(--ink); flex: none; }
.ibtn svg { width: 100%; height: 100%; }
.badge { display: inline-block; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: var(--pill); color: var(--dim); }
.badge.new { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.song .n { width: 26px; color: var(--dim); font-variant-numeric: tabular-nums; flex: none; }
.song.now .row-k { color: var(--accent); font-weight: 650; }

/* ── Play: the first control on Today (2026-10-12) ──────────────────────── */
.play { padding: 14px 16px; }
.playrow { display: flex; align-items: center; gap: 14px; }
.playbig { flex: none; width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent); padding: 18px 16px 18px 20px;
           box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.playbig svg { width: 100%; height: 100%; }
.playbig:active { filter: brightness(.92); }
.playpick { flex: 1; min-width: 0; background: none; border: 0; text-align: left; padding: 6px 0; color: var(--ink); }
.playpick b { display: block; font-size: 19px; font-weight: 750; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.playpick small { display: block; color: var(--dim); font-size: 13px; }
.picker { margin-top: 12px; border-top: 1px solid var(--line); }
.picker .row { padding: 10px 2px; }
.picker .row + .row { border-top: 1px solid var(--line); }
.picker .row.on .row-k { color: var(--accent); font-weight: 650; }
.picker .btn { margin-top: 8px; }
.play.moving { background: var(--accent); color: var(--on-accent); }
.play.moving .playhead { display: flex; align-items: baseline; gap: 14px; }
.play .clock { font-size: 48px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.play .playwhat { flex: 1; min-width: 0; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play .playwhat small { display: block; font-weight: 500; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
.play.moving .status { color: var(--on-accent); opacity: .9; min-height: 0; }
.play.moving .status:empty { display: none; }
.play.moving .btn { background: var(--on-accent); color: var(--accent); }
.play.moving .btn.quiet { background: color-mix(in srgb, var(--on-accent) 22%, transparent); color: var(--on-accent); }
.play.moving .err { color: var(--on-accent); }
.play .err:empty, .pebble .err:empty { display: none; }

/* ── Link your Pebble (Today, while a watch waits) ─────────────────────── */
.pebble { position: relative; }
.pebble .x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: none; color: var(--dim); font-size: 22px; }
.pbcode { font: 800 34px/1.2 ui-monospace, Menlo, monospace; letter-spacing: .14em; text-align: center; padding: 12px; margin: 10px 0 0;
          border: 1px dashed var(--line); border-radius: var(--r-mid); }

/* ── the owner's own rule: shown, marked, never ranked ─────────────────── */
.days i.own::before { background: color-mix(in srgb, var(--accent-2) 30%, transparent); box-shadow: inset 0 0 0 2px var(--accent-2); }
.days i.own.today::before { box-shadow: inset 0 0 0 2px var(--accent); }
.tick.own { color: var(--dim); }
.lb small.own { color: var(--dim); font-size: 12px; font-weight: 600; margin-left: 4px; }