/* Two Inks: the look of two-inks.html. Transitions only on transform and opacity. */
:root{
  --ground:#EDEFF3;--paper:#FFFFFF;--raise:#F4F5F8;--ink:#1B1F28;--mute:#5E6573;--faint:#9AA1AD;--line:#DDE1E8;
  --shadow:0 18px 40px rgba(27,31,40,.10);
  --plum:#8B3F7A;--pine:#2E6E5B;--ochre:#B07A1E;--slate:#4F6078;--rust:#A4502F;--teal:#1F7A85;
  --mine:var(--plum);--theirs:var(--pine);
  --display:"Gabarito","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Atkinson Hyperlegible","Helvetica Neue",Arial,system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  color-scheme:dark;
  --ground:#14171D;--paper:#1F232B;--raise:#2A2F39;--ink:#EDEFF3;--mute:#A2A9B5;--faint:#6F7684;--line:#323844;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --plum:#D48CC3;--pine:#7FC6AB;--ochre:#E0B25E;--slate:#9DB0CC;--rust:#E08E6D;--teal:#6CC3CC;
}}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#14171D;--paper:#1F232B;--raise:#2A2F39;--ink:#EDEFF3;--mute:#A2A9B5;--faint:#6F7684;--line:#323844;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --plum:#D48CC3;--pine:#7FC6AB;--ochre:#E0B25E;--slate:#9DB0CC;--rust:#E08E6D;--teal:#6CC3CC;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ground);color:var(--ink);font:16px/1.5 var(--body)}
#app{max-width:480px;margin:0 auto;min-height:100dvh;padding:22px 18px 14px;display:flex;flex-direction:column}
/* the card on Now: one height, that of the fullest card; the title large on two lines, or smaller on three, then …; the step on two lines */
.card{background:var(--paper);border-radius:26px;padding:20px 20px 18px;margin-top:22px;box-shadow:var(--shadow)}
.card.full,.card.empty{height:352px;display:flex;flex-direction:column}
.card .who{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--mine)}
.card .who i{width:9px;height:9px;border-radius:50%;background:currentColor;display:inline-block}
.card .who.theirs{color:var(--theirs)}
.card .usmark{margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--mute);font-weight:700}
.card .usmark svg{width:17px;height:17px}
.card .title{font:800 34px/1.04 var(--display);letter-spacing:-.02em;margin:10px 0 12px;text-wrap:balance;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;padding-bottom:2px}
.card .title.sm{font-size:22px;line-height:1.14;-webkit-line-clamp:3}
.card .step{display:flex;align-items:baseline;gap:8px;font-size:16px;margin:0 0 6px}
.card .step .arrow{color:var(--mine);font-weight:700}
.card .step .st{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.card .step .sd{margin-left:auto;align-self:center;border:0;font:700 13px/1 var(--display);padding:8px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--mine) 14%,var(--paper));color:var(--mine);white-space:nowrap}
.card .line{color:var(--mute);font-size:14.5px;margin:0 0 18px}
.card .line b{font-weight:700;color:var(--ink)}
.card.full .btn{margin-top:auto}
.card.empty .title{font:800 24px/1.04 var(--display);letter-spacing:-.02em;color:var(--mute);margin:14px 0 18px}
/* the voice line, just above the bar */
.voice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--mute);font-size:14.5px;padding:8px 10px}
.voice p{margin:0}
.voice .undo{border:0;background:none;color:var(--mine);font-weight:700;margin-left:8px;padding:6px}
.voice .sending{font-size:12.5px;color:var(--faint)}
/* the bar */
.tabs{display:flex;justify-content:space-between;align-items:center;padding:10px 6px calc(4px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.tab{border:0;background:none;font:700 12px/1 var(--body);color:var(--faint);display:flex;flex-direction:column;align-items:center;gap:5px;width:64px;padding:4px 0}
.tab svg{width:22px;height:22px}
.tab.on{color:var(--ink)}.tab.on svg{stroke:var(--mine)}
.plus{width:48px;height:48px;border:0;border-radius:16px;background:var(--ink);color:var(--ground);font:500 30px/1 var(--display)}
svg.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Add: one box above the keyboard */
#add{position:fixed;inset:0;z-index:10}
#add .shade{position:absolute;inset:0;background:rgba(27,31,40,.28)}
.addbox{position:absolute;left:14px;right:14px;bottom:14px;max-width:452px;margin:0 auto}
.pile{display:flex;flex-direction:column;gap:5px;margin-bottom:10px}
.pill{background:var(--paper);border-radius:12px;padding:8px 8px 8px 14px;font-size:15px;font-weight:700;display:flex;align-items:center;gap:10px}
.pill .pt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.scope{display:flex;background:var(--raise);border-radius:999px;padding:3px;font:700 12.5px/1 var(--display)}
.pill .scope + .scope{margin-left:-6px}
.scope button{border:0;background:none;padding:6px 10px;border-radius:999px;color:var(--faint);white-space:nowrap;font:inherit}
.scope button.on{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px rgba(27,31,40,.12)}
.box{background:var(--paper);border-radius:22px;padding:18px 18px 14px;box-shadow:var(--shadow)}
.box input{width:100%;border:0;outline:0;background:none;color:var(--ink);font:700 24px/1.2 var(--display);padding:0}
.box input::placeholder{color:var(--faint);font-weight:500}
.box .under{display:flex;align-items:center;justify-content:space-between;margin-top:12px}
.box .fire{border:0;font:800 16px/1 var(--display);background:var(--mine);color:#fff;padding:12px 20px;border-radius:14px}
/* the top of a screen: the title and the avatar */
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.top h2{font:800 26px/1.05 var(--display);letter-spacing:-.015em;margin:0}
.me{border:0;padding:0;width:34px;height:34px;border-radius:50%;background:var(--mine);color:#fff;font:700 13px/34px var(--display);text-align:center;flex:0 0 34px}
/* buttons */
button{font:inherit;color:inherit;cursor:pointer}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:16px;font:800 18px/1 var(--display);text-align:center;color:#fff;background:var(--mine)}
button:disabled{cursor:default}
.btn:disabled{opacity:.7}
.ghost{display:block;width:100%;border:0;border-radius:16px;padding:14px;margin-top:8px;text-align:center;font:700 16px/1 var(--display);color:var(--mute);background:var(--raise)}
/* the door: sign-in, name and ink, Together? */
.door{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}
.door h1{font:800 34px/1.05 var(--display);letter-spacing:-.02em;margin:0 0 16px}
.door form{display:flex;flex-direction:column;gap:10px}
.door input{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--paper);color:var(--ink);font:500 18px/1.2 var(--body)}
.hint{color:var(--mute);font-size:14.5px;margin:0}
.said{color:var(--mute);font-size:14.5px;min-height:1.5em;margin:4px 0 0;text-align:center}
.inks{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:6px 0 8px}
.ink{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:10px 12px;background:var(--paper);font:700 14px/1 var(--display)}
.ink i{width:22px;height:22px;border-radius:50%;background:var(--c);flex:none}
.ink.on{border-color:var(--c);box-shadow:0 0 0 2px var(--c)}
.ink:disabled{opacity:.3;cursor:default}
/* the screen scrolls on List, never on Now */
#app{height:100dvh;min-height:0}
#app[data-tab="list"] #screen,#app[data-tab="us"] #screen{flex:1;overflow-y:auto;margin:0 -18px;padding:0 18px}
#app[data-tab="list"] .voice,#app[data-tab="us"] .voice{flex:none}
/* List */
.find{display:block;width:100%;border:0;border-radius:14px;padding:12px 14px;margin-top:16px;background:var(--paper);color:var(--ink);font:15px/1.3 var(--body)}
.find::placeholder{color:var(--faint)}
.sec{font:700 13px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:18px 4px 8px}
.swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-bottom:6px;border-radius:16px;background:var(--raise)}
.swipe::-webkit-scrollbar{display:none}
.lrow{flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:16px;padding:12px 12px 12px 14px}
.lrow .t{flex:1;min-width:0;font-size:15.5px;line-height:1.3;font-weight:700;cursor:pointer}
.lrow .t small{display:block;font-weight:400;color:var(--mute);font-size:13px;margin-top:1px}
.ck{width:24px;height:24px;border-radius:50%;border:2px solid var(--faint);background:none;flex:none;padding:0}
.ck.on{background:var(--mine);border-color:var(--mine)}
.ck.off{border-style:dashed;opacity:.5}
.rowus{display:inline-flex;align-items:center;gap:4px;color:var(--mute);font:700 12.5px/1 var(--body);white-space:nowrap}
.rowus svg{width:15px;height:15px}
.tools{display:flex;flex:none;scroll-snap-align:end}
.tools button{border:0;background:none;padding:0 14px;font:700 13px/1 var(--display);color:var(--ink);white-space:nowrap}
.tools button.ask{color:var(--theirs)}
.fold{display:flex;justify-content:space-between;width:100%;border:0;background:none;margin:14px 0 8px;padding:6px;font:700 14.5px/1.3 var(--body);color:var(--mute)}
.fold small{font-weight:400;color:var(--faint);font-size:14.5px}
/* the sheet */
#sheet{position:fixed;inset:0;z-index:20}
#sheet .shade{position:absolute;inset:0;background:rgba(27,31,40,.28)}
.sheet{position:absolute;left:0;right:0;bottom:0;max-width:480px;margin:0 auto;max-height:92dvh;overflow-y:auto;background:var(--paper);
  border-radius:26px 26px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -10px 30px rgba(27,31,40,.14);transition:transform .2s}
.sheet .grab{width:40px;height:5px;border-radius:3px;background:var(--line);margin:0 auto 14px}
.sheet .acts{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.sheet .pa{border:0;font:700 13.5px/1 var(--display);padding:9px 12px;border-radius:999px;background:var(--raise);color:var(--ink)}
.sheet .pa.done{background:var(--mine);color:#fff}
.sheet .pa.pinned{background:color-mix(in srgb,var(--mine) 14%,var(--paper));color:var(--mine)}
.sheet .pa.ask{background:color-mix(in srgb,var(--theirs) 14%,var(--paper));color:var(--theirs)}
.sheet .x{margin-left:auto;border:0;background:none;color:var(--faint);font-size:18px;padding:6px}
.sheet textarea{width:100%;border:0;outline:0;resize:none;background:none;color:var(--ink);font:15.5px/1.4 var(--body);padding:0;overflow:hidden}
.sheet textarea::placeholder{color:var(--faint)}
.sheet .ttl{font:800 28px/1.08 var(--display);letter-spacing:-.02em;margin:18px 0 12px}
.fld{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid var(--line);font-size:15.5px}
.fld.top{align-items:flex-start}
.fld .k{width:62px;flex:none;color:var(--faint);font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding-top:2px}
.fld small{color:var(--mute);font-size:13px}
.fld .steps{flex:1;display:flex;flex-direction:column;gap:6px}
.fld .steps s{color:var(--faint)}
.whenbtn{border:0;background:none;padding:0;font:15.5px/1.4 var(--body);color:var(--ink);text-align:left}
.sdate{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.wmenu{background:var(--raise);border-radius:14px;overflow:hidden;margin:0 0 8px}
.wmenu .h{font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:10px 14px 3px;border-top:1px solid var(--line)}
.wmenu .h:first-child{border-top:0}
.wmenu .r{display:flex;width:100%;justify-content:space-between;align-items:baseline;border:0;border-top:1px solid var(--line);background:none;padding:9px 14px;font:600 14.5px/1.25 var(--body);color:var(--ink);text-align:left}
.wmenu .h + .r,.wmenu .r:first-child{border-top:0}
.wmenu .r small{color:var(--mute);font-size:12px;margin-left:6px}
.sheet .low{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13.5px;color:var(--faint)}
.sheet .never{border:0;background:none;color:var(--mute);font:700 13.5px/1 var(--body);padding:6px 0 6px 14px}
.pill .pt{cursor:pointer}
/* Us */
.feed{display:flex;align-items:center;gap:12px;background:var(--paper);border-radius:16px;padding:12px 14px;margin-bottom:6px;cursor:pointer}
.feed .t{flex:1;min-width:0;font-size:15.5px;line-height:1.3;font-weight:700}
.feed .t small{display:block;font-weight:400;color:var(--mute);font-size:13px;margin-top:1px}
.alone{color:var(--mute);font-size:14.5px;margin:18px 4px 0}
#tadabox{margin:14px 0 8px}
.tada{display:block;width:100%;border:0;border-radius:16px;padding:14px;text-align:center;font:700 16px/1 var(--display);background:var(--paper);color:var(--ink)}
.tadaform{display:flex;gap:8px}
.tadaform input{flex:1;min-width:0;border:1px solid var(--line);border-radius:14px;padding:12px 14px;background:var(--paper);color:var(--ink);font:500 16px/1.2 var(--body)}
.tadaform .btn{width:auto;padding:12px 18px;font-size:16px}
/* Settings */
.sheet .head{font:700 20px/1 var(--display)}
.fld input{flex:1;min-width:0;border:0;outline:0;background:none;color:var(--ink);font:15.5px/1.4 var(--body);padding:0}
.fld .inks{flex:1;min-width:0;margin:0;grid-template-columns:repeat(2,1fr)}
.couple{flex:1;display:flex;flex-direction:column;gap:6px}
.couple .ghost{margin:0;padding:10px}
.couple form{display:flex;gap:8px}
.couple input{flex:1;min-width:0;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:var(--paper);color:var(--ink);font:15px/1.2 var(--body)}
.couple .btn{width:auto;padding:10px 16px;font-size:15px}
.signout{border:0;background:none;padding:0;color:var(--mute);font:700 15px/1 var(--body)}
.sheet.set .fld .k{width:96px}