/* Round 15 · Home is a prompt box, the planner's exchange, appointments, My time, private/public, agents, sign-in.
   From design/round-15/return/patterns.css (the Round 15 block), without the board-only classes (the OS alert and
   picker, the Stripe stand-in, the emails, the face spec). In the app the screen grows with its page. */
/* Tokens first; aliases on :root and every [data-theme] so they re-resolve in dark. No new brand hex values (the OS alert's are the OS's).
   Hard rule: no dashboards. No week grids, no calendars drawn as grids, no tiles. Sentences and faces, one subject a screen. Taps only (a PWA: no swipes). */
:root,[data-theme]{
--pb15-edge:var(--line-strong);--pb15-on:var(--kopi);--pb15-ring:var(--kopi-soft);--pb15-fill:var(--paper-raised);--pb15-ink:var(--ink);--pb15-hint:var(--ink-3);
--pb15-go:var(--kopi);--pb15-go-ink:var(--on-kopi);--pb15-side:var(--ink-2);--pb15-ok:var(--ink);--pb15-ok-ink:var(--on-ink);
--pick15:var(--kopi);--pick15-rule:color-mix(in srgb,var(--kopi) 40%,transparent);--pick15-sep:var(--ink-3);--pick15-off:var(--ink-3);
--sp15-ink:var(--ink);--me15-ink:var(--ink-2);--guess15:var(--ink-3);
--clash15:var(--maybe);--clash15-soft:var(--maybe-soft);--clash15-ink:var(--paper);
--agent15-word:var(--ink-2);--agent15-edge:var(--line-strong);--agent15-fill:var(--paper-raised);
--live15:var(--in);--live15-soft:var(--in-soft);
--run15-head:var(--ink-2);--run15-rule:var(--line);
}
:root{
--r-box15:20px;--box15-min:84px;--t-box15:18px;--t-pick15:17px;--run15-gap:56px;--tap15-ring:5px;
--dur-runs15:320ms; /* @kind other */
--os15-alert:rgba(242,242,242,.97);--os15-ink:#000000;--os15-link:#007AFF;--os15-rule:rgba(60,60,67,.29);
}
[data-theme="dark"]{--os15-alert:rgba(44,44,46,.97);--os15-ink:#FFFFFF;--os15-link:#0A84FF;--os15-rule:rgba(84,84,88,.65)}
/* the screen */
.s15{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;padding-bottom:40px}
.top15{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 20px 12px;min-height:56px}
.me15{display:flex;align-items:center;gap:8px;min-height:44px;font:600 15px var(--font-body);color:var(--ink)}
.si15{min-height:44px;padding:0 4px;font:600 16px var(--font-body);color:var(--kopi)}
.bk15{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-8px;padding-right:8px;font:600 16px var(--font-body);color:var(--ink)}
.tt15{font:500 var(--t-title)/1.15 var(--font-display);letter-spacing:-.01em;padding:0 20px 16px}
.vis15{display:flex;align-items:center;gap:10px}.vis15 b{font:500 22px/1.2 var(--font-display)}
/* G · the prompt box: the one thing the eye lands on. Two lines, the mic inside, ↵ or ↺ outside in a slot that never moves the box */
.pbw15{display:flex;align-items:center;gap:8px;padding:0 12px 0 20px}
.pb15{flex:1;min-width:0;min-height:var(--box15-min);border:1.5px solid var(--pb15-edge);border-radius:var(--r-box15);background:var(--pb15-fill);display:flex;align-items:center;gap:2px;padding:10px 4px 10px 4px;transition:border-color var(--dur-tap),box-shadow var(--dur-tap)}
.pb15.on{border-color:var(--pb15-on);box-shadow:0 0 0 4px var(--pb15-ring)}
.pb15 .tx{flex:1;min-width:0;font:400 var(--t-box15)/1.4 var(--font-body);color:var(--pb15-ink);min-height:50px;display:flex;align-items:flex-start;text-wrap:pretty}
.pb15 .hint{color:var(--pb15-hint)}
.pb15 .in{display:flex;align-items:center;flex:none}
.mic15,.clip15{width:44px;height:44px;display:grid;place-items:center;border-radius:22px;color:var(--ink)}
.clip15{color:var(--ink-3);align-self:center;flex:none}
.pb15.noclip{padding-left:16px}
.mic15 .ic{width:24px;height:24px}
.mic15.on{background:var(--kopi);color:var(--on-kopi)}
.lv15{display:flex;align-items:center;gap:3px;height:22px;margin-right:6px}
.lv15 i{width:3px;border-radius:2px;background:var(--kopi);height:8px;animation:lv15 900ms var(--ease-helper) infinite}
.lv15 i:nth-child(2){height:16px;animation-delay:-200ms}.lv15 i:nth-child(3){height:22px;animation-delay:-400ms}.lv15 i:nth-child(4){height:12px;animation-delay:-600ms}.lv15 i:nth-child(5){height:6px;animation-delay:-100ms}
@keyframes lv15{50%{transform:scaleY(.45)}}
.sd15{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:22px;color:var(--pb15-side);border:1.5px solid var(--line-strong)}
.sd15.go{background:var(--pb15-go);color:var(--pb15-go-ink);border-color:transparent}
.sd15.none{border:0}
/* ✓ ✗ centred under the box itself: the row matches the box's edges (20px left; ↵ slot 44 + gap 8 + 12 right) */
.ck15{display:flex;justify-content:center;gap:8px;padding:2px 64px 0 20px;margin-bottom:-8px}
.ck15 button{width:40px;height:40px;display:grid;place-items:center;border-radius:20px;color:var(--ink-2)}
.ck15 button .ic{width:18px;height:18px;stroke-width:2}
.ck15 .ok{color:var(--kopi)}
.tap15{box-shadow:0 0 0 3px var(--paper),0 0 0 var(--tap15-ring) var(--kopi)!important}
/* B · the exchange under the box, latest on top. ✦ left in the sans with its mark; the person right, in the serif, in their own words; no bubbles */
.ex15{display:flex;flex-direction:column;gap:20px;padding:20px 20px 0}
.ln15{display:flex;gap:10px;align-items:flex-start}
.ln15 .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.ln15 p{font:400 17px/1.45 var(--font-body);color:var(--sp15-ink);text-wrap:pretty}
.ln15.sp .mk15{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--ink);margin-top:0}
.ln15.me{justify-content:flex-end;padding-left:48px}
.ln15.me p{text-align:right;font:400 18px/1.4 var(--font-display);color:var(--me15-ink)}
.ln15.me .av{margin:2px 0 0}
.ln15.clash{background:var(--clash15-soft);border-radius:16px;padding:10px 12px 8px 10px;margin:0 -10px}
.warn15{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:10px;background:var(--clash15);color:var(--clash15-ink);font:700 13px/1 var(--font-body);margin-right:7px;vertical-align:2px}
.gs15{text-decoration:underline dotted var(--guess15);text-decoration-thickness:1.5px;text-underline-offset:4px}
/* the pick type: the answer in a person's words, weight 600, kopi, a soft rule under it. Never a button shape */
.pks15{display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}
.pks15 i{font-style:normal;color:var(--pick15-sep)}
.pk15{display:inline;padding:10px 0;margin:-10px 0;font:600 var(--t-pick15)/1.3 var(--font-body);color:var(--pick15);text-decoration:underline;text-decoration-color:var(--pick15-rule);text-decoration-thickness:1.5px;text-underline-offset:5px;text-align:left}
.pks15 .pk15{display:inline-flex;align-items:center;gap:4px;min-height:40px;margin:0;padding:0;flex:none;max-width:100%;white-space:nowrap}
.pk15{cursor:pointer}
.pk15.sm{font-size:15px}.pk15.lg{font-size:20px}
.pk15.on{color:var(--ink);text-decoration:none}.pk15.off{color:var(--pick15-off);text-decoration:none;font-weight:400}
.pk15 .ic{width:16px;height:16px}
.fcs15{display:flex;flex-wrap:wrap;gap:0 16px}
.fpk15{white-space:nowrap;display:inline-flex;align-items:center;gap:7px;min-height:40px;font:600 var(--t-pick15) var(--font-body);color:var(--pick15)}
.fpk15 .av{margin:0}
.fpk15.on{color:var(--ink)}.fpk15.on .av{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--kopi)}
.fpk15.off{color:var(--pick15-off);font-weight:400}.fpk15.off .av{opacity:.45}
/* A · an agent: a rounded square face in its owner's colour, and the word, always. Neutral ink, never a warning colour */
.agf15{border-radius:30%!important;background:var(--agent15-fill)!important;color:var(--agc,var(--ink-2))!important;box-shadow:inset 0 0 0 2px var(--agc,var(--ink-2))!important;font-weight:700}
.agf15.given{background:repeating-linear-gradient(135deg,var(--paper-sunk) 0 4px,var(--line) 4px 8px)!important;box-shadow:inset 0 0 0 1px var(--line-strong)!important}
.stk .agf15{box-shadow:inset 0 0 0 2px var(--agc,var(--ink-2)),0 0 0 2.5px var(--paper)!important}
.aw15{display:inline-block;font:600 11px/1 var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--agent15-word);border:1px solid var(--agent15-edge);border-radius:6px;padding:3px 5px 2px;margin-left:6px;vertical-align:2px}
.ln15.ag .who15{font:600 15px var(--font-body);color:var(--ink);display:flex;align-items:baseline}
.ln15.ag .agf15{margin:0}
/* G · the two runs beneath: two blank lines below ✦, then Yours and Open to anyone. They slide down while a talk is on */
.runs15{display:flex;flex-direction:column;gap:30px;padding:var(--run15-gap) 20px 0;transition:transform var(--dur-runs15) var(--ease-sheet),opacity var(--dur-runs15)}
.runs15.away{transform:translateY(140px);opacity:.3}
.s15 .run15 h2{font:600 13px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--run15-head);margin-bottom:8px}
.ld15{font:500 21px/1.3 var(--font-display);color:var(--ink);text-wrap:pretty;padding-bottom:12px}
.runs15{padding-bottom:24px}
.nn15{font:500 19px/1.35 var(--font-display);color:var(--ink-2);padding-bottom:4px}
.rw15{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--run15-rule)}
.rw15 .stk{flex:none;align-self:flex-start;padding-top:4px}
.rw15>.img{flex:none}
.ldw15{display:flex;flex-direction:column;gap:10px;padding-bottom:12px}.ldw15 .ld15{padding-bottom:0}
.rt15{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ra15{font:600 16px/1.35 var(--font-body);color:var(--ink)}.rb15{font-size:15px;line-height:1.4;color:var(--ink-2)}
.agl15{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);padding-top:5px}.agl15 .av{margin:0}
.ft15{display:flex;gap:22px;flex-wrap:wrap;margin-top:-10px}
/* a sitting today or now leads, under the box, with its live line */
.now15{margin:16px 20px 0;padding:10px 12px 10px 14px;border-radius:16px;background:var(--live15-soft);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.now15 p{font:600 16px/1.35 var(--font-body);flex:1 1 150px;color:var(--ink)}
.now15 .pk15{color:var(--ink);text-decoration-color:var(--live15)}
.dot15{width:10px;height:10px;border-radius:5px;background:var(--live15);box-shadow:0 0 0 4px color-mix(in srgb,var(--live15) 25%,transparent);flex:none}
/* B · the offered-later lines under a done sitting, and how they fade */
.lt15{display:flex;flex-direction:column;padding-top:2px}
.lt15 p{font-size:15px!important;color:var(--ink-2)!important;min-height:36px;display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap}
.lt15 p.ans{color:var(--ink)!important}.lt15 p.faded{color:var(--ink-3)!important}
.lt15 .ic{width:16px;height:16px;color:var(--in)}
/* B · the pouch, inside ✦'s line */
.pch15{display:flex;flex-direction:column}
.pi15{display:flex;align-items:center;gap:12px;min-height:52px;text-align:left;font-size:16px;color:var(--ink)}
.pi15 span{flex:1;min-width:0}
.pi15.on .img{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--kopi)}
.pi15.on span{font-weight:600}
/* C · a sitting's page, the same for two and for more */
.kd15{font:600 13px var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:var(--kopi)}
.why15{font:400 17px/1.45 var(--font-display);color:var(--ink-2)}
.ppl15{display:flex;flex-wrap:wrap;gap:10px 18px;padding-top:16px}
.pp15{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--ink-2)}.pp15 b{color:var(--ink);font-weight:600}.pp15 .av{margin:0}
.pp15 .aw15{margin-left:2px}
.pay15{padding-top:14px;padding-bottom:14px}
.lks15{display:flex;gap:22px;flex-wrap:wrap;padding-top:14px}
.lks15.quiet .pk15{color:var(--ink-2);text-decoration-color:var(--line-strong)}
.pc15{display:flex;align-items:center;gap:6px;padding:8px 20px 0;font-size:14px;color:var(--ink-2)}
.sg15{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
/* D · My time: sentences, each with change; the booked list, one line with a face */
.mt15{display:flex;flex-direction:column;gap:12px}
.mt15>p{font:400 19px/1.4 var(--font-display);color:var(--ink);text-wrap:pretty}
.mt15>p.rd15{font:500 16px/1.45 var(--font-body)}
.mt15>p.q{font:400 14px/1.45 var(--font-body);color:var(--ink-2)}
.s15 .mt15 h2{font:600 13px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--run15-head);padding-top:8px}
.bkd15{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--run15-rule);font-size:16px}.bkd15 .av{margin:0}
/* F · private and public */
.vz15{font:400 19px/1.4 var(--font-display);text-wrap:pretty}
.s15 .h15{font:600 13px var(--font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--run15-head);padding-top:10px}
.plist15{display:flex;flex-direction:column}
.pr15{display:flex;align-items:center;gap:12px;padding:9px 0;border-top:1px solid var(--run15-rule)}.pr15 .av{margin:0}
.pr15>div{display:flex;flex-direction:column;gap:1px}.pr15 b{font:600 16px var(--font-body)}.pr15 span{font-size:14px;color:var(--ink-2)}
.pr15.ag{padding-left:20px}
.pv15{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:var(--ink-2);padding-bottom:140px}.pv15 .t-title{color:var(--ink)}
.ctx15{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:12px;background:var(--paper-sunk);font-size:15px;line-height:1.4;color:var(--ink-2)}.ctx15 b{color:var(--ink);font-weight:600}
.tb15{display:flex;gap:10px;align-items:flex-start;max-width:88%}.tb15 .av{margin:2px 0 0}
.tb15>div{background:var(--paper-sunk);border-radius:14px 14px 14px 4px;padding:8px 12px;display:flex;flex-direction:column;gap:2px}
.tb15 b{font:600 13px var(--font-body);color:var(--ink-2)}.tb15 p{font-size:16px;line-height:1.4}
/* E · sign in, check your email, the email */
.sin15{display:flex;flex-direction:column;gap:16px}
.cb15{display:flex;align-items:center;gap:10px;min-height:44px;font-size:16px;color:var(--ink)}.cb15 .bx{width:22px;height:22px;border-radius:6px;border:1.5px solid var(--line-strong);flex:none}
.kept15{display:flex;gap:8px;align-items:flex-start;background:var(--paper-sunk);border-radius:12px;padding:10px 12px;font-size:15px;line-height:1.4}.kept15 .ic{color:var(--in);flex:none;margin-top:2px}
.code15{display:flex;gap:8px;align-items:center}.code15 span{width:44px;height:54px;border:1.5px solid var(--line-strong);border-radius:12px;background:var(--paper-raised)}.code15 i{width:8px}
.junk15{font-size:16px;line-height:1.5;color:var(--ink);background:var(--paper-sunk);border-radius:14px;padding:12px 14px;text-wrap:pretty}
:lang(zh) :is(.aw15,.kd15,.s15 .run15 h2,.s15 .h15,.s15 .mt15 h2){letter-spacing:.02em}
:lang(zh) .ln15.me p,:lang(zh) .why15,:lang(zh) .mt15>p{line-height:1.6}
:lang(vi) .ln15.me p{line-height:1.4}
@media (prefers-reduced-motion:reduce){.lv15 i{animation:none}.runs15{transition:none}}
.s15 h2.t-head{font:500 var(--t-head)/1.25 var(--font-display);letter-spacing:0}
.si15,.me15,.bk15,.pp15 b,.aw15,.sd15,.kd15{white-space:nowrap}
.lks15 .pk15,.ft15 .pk15,.pc15 .pk15,.now15 .pk15{flex:none;white-space:nowrap}
/* the app: the board's phone frame is fixed-height; the page is not */
#app>.s15{height:auto;min-height:100dvh;overflow:visible}
#app.home15{padding-bottom:40px}
:where(.s15) button{background:none;border:0;cursor:pointer;font:inherit;color:inherit}
.s15 .sd15{border:1.5px solid var(--line-strong)}.s15 .sd15.go{border-color:transparent}.s15 .sd15.none{border:0}
.pb15 .tx textarea{flex:1;min-width:0;min-height:50px;border:0;outline:0;background:none;resize:none;padding:0 0 0 12px;font:inherit;color:inherit;field-sizing:content;max-height:40dvh}
.pb15 .tx textarea::placeholder{color:var(--pb15-hint);opacity:1}
.pb15:not(.noclip) .tx textarea{padding-left:0}
.rw15{color:inherit;text-decoration:none}
.rw15>.img{width:60px;height:60px;border-radius:12px;overflow:hidden}
.ldw15>.img{border-radius:16px;overflow:hidden}
.ft15:empty{display:none}
@media (min-width:1024px){#app.home15{width:var(--col-desktop)}}  /* CO 2026-10-13: one column width on every screen */
.s15 a.si15{display:inline-flex;align-items:center;text-decoration:none}.s15 a.me15{text-decoration:none}