/* hold that on the web — the site's look (design/site-cooler.html) outside the phone,
   the app's own look (native/theme.ts, brand-kit) inside it. */
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/hanken-grotesk-latin.woff2) format("woff2"); }
:root {
  --green: #3a6a4f;
  --green-deep: #2d5640;
  --ink: #222221;
  --muted: #5f5e5a;
  --label: #6b6b68;
  --page: #f4f4f3;
  --card: #ffffff;
  --line: #e2e2df;
  --tint: #e7efe9;
  --frame: #1a1a19;
  /* the app's own grays, used inside the phone and on app-look pieces */
  --app-muted: #8a8a87;
  --app-label: #a0a09c;
  --app-line: #ececea;
  --app-ring: #b9b9b5;
  --app-done: #a6a6a2;
  --gutter: 48px;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Hanken Grotesk", -apple-system, sans-serif;
  background: var(--page); color: var(--ink); line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: rgba(244,244,243,.86);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
}
.brand, .bm { display: flex; align-items: center; gap: .39em; font-weight: 700; font-size: var(--brand, 21px); white-space: nowrap; }
.brand .ht, .bm .ht { color: var(--green); font-weight: 800; letter-spacing: -.011em; }
.brand .ht i, .bm .ht i { font-style: normal; display: inline-block; transform: translateY(.1025em); }
.brand .wm, .bm .wm { display: inline-block; letter-spacing: -.022em; transform: translateY(.1845em); }
.headleft { --brand: 21px; display: flex; align-items: baseline; gap: 40px; transform: translateY(-2px); }
.menu { display: flex; gap: 26px; font-size: 15px; font-weight: 600; color: var(--muted); transform: translateY(calc(var(--brand) * .1845)); }
.menu a { padding: 10px 0; }
.menu a:hover, .menu a.on { color: var(--green); }
.headright { display: flex; align-items: center; gap: 24px; font-size: 15px; transform: translateY(2px); }
.headright .where { color: var(--label); white-space: nowrap; }
.headright button, .headright a { font-weight: 700; white-space: nowrap; padding: 10px 0; }
.headright button:hover, .headright a:hover { color: var(--green); }
.pillbtn, .cta { display: inline-block; background: var(--green); color: #fff; font-weight: 700; border-radius: 999px; padding: 12px 24px; white-space: nowrap; }
.cta:hover { filter: brightness(1.08); }
.cta.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.cta.ghost:hover { filter: none; color: var(--green); }
.cta:disabled { opacity: .5; }

/* ---------- pages ---------- */
.view { min-height: calc(100svh - 69px - 70px); }
.page { padding: 28px var(--gutter) 40px; display: flex; flex-direction: column; justify-content: center; }

/* ---------- set up: the words on the left, the phone on the right ---------- */
.setup { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px; align-items: center; }
.walk h2 { white-space: nowrap; font-size: min(clamp(30px, 4.8vw, 76px), 9.4svh, 8.6vw); line-height: .94; letter-spacing: -.045em; font-weight: 800; margin-bottom: 22px; }
.walklist { list-style: none; counter-reset: w; border-top: 1px solid var(--line); max-width: 560px; }
.walklist li { counter-increment: w; border-bottom: 1px solid var(--line); position: relative; }
.walklist .wrow { display: grid; grid-template-columns: 48px 1fr; align-items: start; width: 100%; text-align: left; padding: 11px 0; }
.walklist i { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--app-ring); display: grid; place-items: center; font-style: normal; font-size: 14px; font-weight: 800; color: var(--label); margin-top: 1px; }
.walklist i::before { content: counter(w); }
.walklist b { display: block; font-size: clamp(19px, 1.7vw, 24px); font-weight: 800; letter-spacing: -.015em; line-height: 1.2; color: var(--label); transition: font-size .3s ease, color .3s ease; }
.walklist li.on i { border-color: var(--green); color: var(--green); }
.walklist li.on b, .walklist li.done b { color: var(--ink); }
.walklist li.on b { font-size: clamp(22px, 2vw, 28px); }
.walklist li.done i { background: var(--green); border-color: var(--green); animation: pop .5s cubic-bezier(.3,1.6,.5,1) both; }
.walklist li.done i::before { content: ""; width: 11px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; rotate: -45deg; translate: 0 -1.5px; }
.walklist .wrow:hover b { color: var(--green); }
.walklist .why { display: none; font-size: 17px; color: var(--muted); line-height: 1.45; margin: 2px 0 10px; max-width: 32em; }
.walklist li.on .why { display: block; }
.walklist .got { display: none; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.walklist li.on .got, .walklist li.done .got { display: flex; }
.walklist .got span { font-size: 14px; font-weight: 700; color: var(--green); background: var(--tint); border-radius: 999px; padding: 4px 11px; animation: pop .35s cubic-bezier(.3,1.5,.5,1) both; }
.walkend { display: flex; align-items: center; gap: 22px; margin-top: 22px; flex-wrap: wrap; }
.again { font-size: 15px; font-weight: 700; color: var(--label); }
.again:hover { color: var(--ink); }
.walknote { font-size: 15px; color: var(--label); margin-top: 14px; max-width: 34em; }
.walknote.err { color: #b4243a; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* the keep card: sign in or make an account, in the site's look */
.keep { max-width: 440px; margin-top: 10px; }
.keep .seg { display: inline-flex; background: #ececea; border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 16px; }
.keep .seg button { font-size: 14px; font-weight: 600; color: var(--app-muted); border-radius: 999px; padding: 8px 18px; }
.keep .seg button.on { color: var(--ink); background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.keep label { display: block; font-size: 13px; font-weight: 600; color: var(--app-muted); margin: 10px 0 6px; }
.keep input { width: 100%; font-size: 16px; color: var(--ink); background: #fbfbfb; border: 1px solid #e4e4df; border-radius: 12px; padding: 12px 14px; outline: 0; }
.keep input:focus { border-color: var(--green); }
.keep .cta { margin-top: 16px; }

/* ---------- the phone (the app's own look, from the site mock) ---------- */
.phonecol { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.phone {
  --s: .8;
  width: calc(400px * var(--s) + 20px); height: calc(830px * var(--s) + 20px);
  background: var(--frame); border-radius: 52px; padding: 10px;
  box-shadow: 0 40px 80px -30px rgba(34,34,33,.5);
}
.phone .glass { width: 100%; height: 100%; border-radius: 42px; overflow: hidden; background: var(--page); }
.phone .fit { width: 400px; height: 830px; transform: scale(var(--s)); transform-origin: 0 0; display: flex; flex-direction: column; position: relative; font-size: 17px; }
.p-status { height: 54px; background: #fff; position: relative; flex: none; }
.p-status b { position: absolute; left: 44px; top: 20px; font-size: 16px; }
.p-status i { position: absolute; left: 50%; top: 13px; translate: -50% 0; width: 112px; height: 32px; border-radius: 999px; background: #000; }
.p-top { flex: none; background: #fff; display: flex; align-items: center; justify-content: space-between; padding: 10px 18px 12px; box-shadow: 0 6px 14px -10px rgba(34,34,33,.25); position: relative; z-index: 2; }
.p-top .bm { --brand: 23px; }
.p-top .tr { display: flex; align-items: center; gap: 16px; color: var(--app-muted); }
.p-top .av { width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--green); font-weight: 700; font-size: 15px; display: grid; place-items: center; }
.p-body { flex: 1; overflow-y: auto; position: relative; scrollbar-width: none; }
.p-body::-webkit-scrollbar { display: none; }
.p-pad { padding: 16px 20px 170px; display: flex; flex-direction: column; gap: 6px; }
.p-date { background: #fff; padding: 16px 20px 18px; }
.p-date h3 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; }
.p-date p { font-size: 15.5px; font-weight: 700; color: var(--green); margin-top: 6px; line-height: 1.4; }
.p-date p em { font-style: normal; font-weight: 500; color: var(--app-muted); }
.p-date p .dot { color: var(--app-muted); font-weight: 500; margin: 0 7px; }
.p-date p.bump { animation: pop .4s cubic-bezier(.3,1.5,.5,1) both; }
.p-hero { background: var(--green); color: #fff; font-size: 22px; font-weight: 800; line-height: 1.3; border-radius: 16px; padding: 16px 18px; }
.r {
  display: grid; grid-template-columns: 84px 1fr 30px; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--app-line); border-radius: 16px;
  padding: 15px 14px; box-shadow: 0 2px 8px rgba(34,34,33,.04); text-align: left; width: 100%;
}
.r.plain { grid-template-columns: 1fr 30px; }
.r .t { font-size: 14px; font-weight: 700; color: var(--green-deep); white-space: nowrap; }
.r .t.q { font-weight: 500; color: var(--app-label); }
.r .t.went { color: var(--green); font-weight: 700; }
.r .x { font-size: 18.5px; line-height: 1.3; overflow-wrap: anywhere; }
.r .c { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--app-ring); display: grid; place-items: center; justify-self: end; }
.r.done .x { color: var(--app-done); }
.r.done .t { color: var(--app-label); }
.r.done .c { background: var(--green); border-color: var(--green); }
.r.done .c::after { content: ""; width: 10px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; rotate: -45deg; translate: 0 -1.5px; }
.r .go { justify-self: end; color: var(--app-muted); font-size: 20px; }
.r.landed, .bub.landed { animation: landed 1.1s ease both; }
@keyframes landed { from { box-shadow: 0 0 0 3px rgba(58,106,79,.55); } to { box-shadow: 0 0 0 3px rgba(58,106,79,0); } }
.p-lab { display: flex; justify-content: space-between; font-size: 13.5px; font-weight: 700; letter-spacing: .12em; color: var(--app-label); text-transform: uppercase; margin: 18px 2px 4px; }
.p-lab:first-child { margin-top: 0; }
.p-none { font-size: 16px; color: var(--app-label); margin: 0 2px; }
.p-listhead { background: #fff; padding: 12px 20px 16px; }
.p-listhead .back { color: var(--green); font-weight: 700; font-size: 16px; display: block; }
.p-listhead h3 { font-size: 20px; font-weight: 800; }
.p-listhead input.name { font-size: 22px; font-weight: 800; letter-spacing: -.01em; width: 100%; border: 0; border-bottom: 2px solid var(--app-line); outline: 0; padding: 2px 0 4px; background: transparent; color: var(--ink); }
.p-listhead input.name:focus { border-bottom-color: var(--green); }
.p-listhead .sub { font-size: 14px; color: var(--app-muted); margin-top: 6px; }
.p-track { height: 5px; border-radius: 99px; background: #e6e6e3; margin-top: 14px; overflow: hidden; }
.p-track b { display: block; height: 100%; background: var(--green); border-radius: 99px; transition: width .3s ease; }
.bub { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid var(--app-line); border-radius: 18px; padding: 17px 20px; font-size: 18.5px; box-shadow: 0 2px 8px rgba(34,34,33,.04); overflow-wrap: anywhere; }
.p-form {
  position: absolute; left: 14px; right: 14px; bottom: 96px; z-index: 3; display: flex; align-items: center; gap: 8px;
  background: #fbfbfb; border: 1.5px solid #e4e4df; border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: 0 6px 16px -10px rgba(34,34,33,.3);
}
.p-form:focus-within { border-color: var(--green); }
.p-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 18px; color: var(--ink); padding: 9px 0; }
.p-form input::placeholder { color: var(--app-label); }
.p-form button { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.p-fab { position: absolute; right: 20px; bottom: 104px; width: 56px; height: 56px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 10px 20px -8px rgba(34,34,33,.45); z-index: 3; }
.p-tabs { flex: none; height: 84px; background: #fff; border-top: 1px solid var(--app-line); display: grid; grid-template-columns: repeat(4, 1fr); padding: 10px 6px 0; position: relative; z-index: 4; }
.p-tabs button { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 13px; font-weight: 500; color: var(--app-muted); height: 56px; }
.p-tabs button svg { color: #6d8c7b; }
.p-tabs button.on { color: var(--ink); font-weight: 700; }
.p-tabs button.on svg { color: var(--green-deep); }
/* a card up over the screen */
.p-sheet { position: absolute; inset: 0; z-index: 6; background: rgba(34,34,33,.34); display: grid; align-items: end; padding: 0 10px 12px; }
.p-card { position: relative; background: #f4f4f3; border-radius: 26px; padding: 24px 20px 20px; box-shadow: 0 24px 50px -20px rgba(0,0,0,.45); }
.p-card h4 { font-size: 23px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; padding-right: 44px; }
.p-card .shut { position: absolute; right: 14px; top: 14px; width: 34px; height: 34px; border-radius: 50%; background: #e6e6e3; color: var(--app-muted); font-size: 16px; display: grid; place-items: center; }
.p-card .lab { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--app-label); margin: 18px 0 8px; }
.p-card input { width: 100%; border: 1.5px solid var(--app-line); border-radius: 14px; background: #fff; outline: 0; padding: 12px 14px; font-size: 18px; color: var(--ink); }
.p-card input:focus { border-color: var(--green); }
.opts { display: flex; flex-wrap: wrap; gap: 7px; }
.opts button { background: #fff; border: 1.5px solid var(--app-line); border-radius: 999px; padding: 9px 15px; font-size: 16px; font-weight: 700; }
.opts button.on { background: var(--green); border-color: var(--green); color: #fff; }
.p-save { display: block; width: 100%; margin-top: 22px; background: var(--green); color: #fff; font-size: 18px; font-weight: 700; border-radius: 16px; padding: 14px; }
.p-save:disabled { opacity: .45; }
.p-link { display: inline-block; color: var(--green); font-weight: 700; font-size: 17px; margin-top: 10px; }
.p-empty { font-size: 16.5px; line-height: 1.45; color: var(--app-muted); }
.phone button:focus:not(:focus-visible) { outline: none; }

/* ---------- the presses, in the app's pieces ---------- */
.presses { max-width: 1100px; }
.presses .head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.presses .date { font-size: clamp(34px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.presses .under { font-size: 17px; font-weight: 700; color: var(--green); margin-top: 10px; line-height: 1.5; }
.presses .under em { font-style: normal; font-weight: 500; color: var(--app-muted); }
.presses .under .dot { color: var(--app-muted); font-weight: 500; margin: 0 9px; }
.presses .vol { font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--app-label); }
.hero { background: var(--green); color: #fff; border-radius: 16px; padding: 22px 24px; margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: end; }
.hero .voice { font-size: clamp(20px, 2.1vw, 28px); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; }
.hero .where { font-size: 13.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 8px; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 92px; }
.bars .bar { flex: 1; background: rgba(255,255,255,.55); border-radius: 3px 3px 0 0; position: relative; min-width: 0; }
.bars .bar.rain { background: #fff; }
.bars .bar span { position: absolute; top: -17px; left: 0; right: 0; text-align: center; font-size: 11px; font-weight: 700; color: rgba(255,255,255,.85); }
.bars .bar i { position: absolute; bottom: -17px; left: 0; right: 0; text-align: center; font-style: normal; font-size: 10.5px; color: rgba(255,255,255,.65); }
.hero .fine { font-size: 12.5px; color: rgba(255,255,255,.7); margin-top: 24px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin-top: 10px; }
.col .p-lab { margin: 26px 2px 8px; }
.col .r { margin-bottom: 6px; }
.col .lists .r { grid-template-columns: 1fr 30px; }
.col .lines { font-size: 14px; color: var(--app-muted); margin-top: 4px; line-height: 1.5; }
.note { background: var(--tint); border-radius: 14px; padding: 14px 16px; margin-bottom: 8px; color: var(--green); font-weight: 600; font-size: 16px; line-height: 1.45; }
.story { font-size: 17px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 18px; margin-top: 28px; }

/* ---------- a tab that's next ---------- */
.soon h1 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; }
.soon p { font-size: 19px; color: var(--muted); margin-top: 12px; }

@media (max-width: 980px) {
  :root { --gutter: 20px; }
  .headleft { gap: 20px; }
  .menu { gap: 16px; font-size: 14px; }
  .setup { grid-template-columns: 1fr; gap: 28px; }
  .phonecol { order: -1; }
  .phone { --s: .68; }
}
@media (max-width: 420px) {
  .phone { --s: .6; }
  .walk h2 { white-space: normal; }
  .hero { grid-template-columns: 1fr; }
  .cols { grid-template-columns: 1fr; }
}

/* ---------- the four tabs: the app's pieces on the page ---------- */
.tabpage { padding-top: 22px; }
.tab { max-width: 720px; display: flex; flex-direction: column; gap: 6px; position: relative; }
.tab .p-date.flat { background: transparent; padding: 0 0 12px; }
.tab .p-date.flat h3 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -.03em; }
.tab .p-date.flat p { font-size: 17px; }
.tab .p-hero { cursor: pointer; }
.tab .r { cursor: pointer; }
.tab .r .pl { font-style: normal; color: var(--app-muted); font-size: 14px; }
.tab .r .t small { display: block; font-size: 12.5px; font-weight: 500; color: var(--app-label); }
.tab .r .c { cursor: pointer; }
.tab .r.done .c { background: var(--green); }
.tab .r .c:hover { border-color: var(--green); }
.tab .p-lab.wide { width: 100%; cursor: pointer; }
.tab .linkish { font-size: 13.5px; font-weight: 700; color: var(--green); letter-spacing: 0; text-transform: none; }
.tab .bub { cursor: pointer; }
.tab .bub.sel { border-color: var(--green); background: #f3f8f5; box-shadow: 0 0 0 1.5px var(--green) inset; }
.tab .bub .facts { display: block; font-size: 13.5px; color: var(--app-muted); margin-top: 6px; }
.holdbar {
  position: sticky; bottom: 16px; z-index: 3; display: flex; align-items: center; gap: 8px; margin-top: 10px;
  background: #fbfbfb; border: 1.5px solid #e4e4df; border-radius: 999px; padding: 6px 6px 6px 20px;
  box-shadow: 0 6px 16px -10px rgba(34,34,33,.3);
}
.holdbar:focus-within { border-color: var(--green); }
.holdbar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 18px; color: var(--ink); padding: 9px 0; }
.holdbar input::placeholder { color: var(--app-label); }
.holdbar button { flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; }
.dock { position: sticky; bottom: 16px; z-index: 3; background: #fff; border: 1px solid var(--app-line); border-radius: 22px; padding: 13px 12px 14px; box-shadow: 0 -8px 24px -12px rgba(34,34,33,.3); margin-top: 10px; }
.dock .say { font-size: 14px; font-weight: 600; color: var(--app-muted); margin: 0 6px 10px; }
.dock .chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chip { font-size: 15.5px; font-weight: 700; color: var(--green); border: 1.5px solid #cfe0d6; border-radius: 999px; padding: 9px 14px; background: #fff; }
.chip:hover { background: var(--tint); }
.chip.solid { background: var(--green); border-color: var(--green); color: #fff; }
.tab .p-listhead.flat { background: transparent; padding: 0 0 12px; }
.tab .p-listhead.flat h3 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.03em; margin-top: 4px; }
.tab .p-listhead .back { cursor: pointer; }
.note-body { background: #fff; border: 1px solid var(--app-line); border-radius: 16px; padding: 16px 18px; font-size: 17px; line-height: 1.5; white-space: pre-wrap; }
.p-seg.wide { display: grid; grid-template-columns: 1fr 1fr; background: #ececea; border-radius: 12px; padding: 3px; margin-bottom: 10px; max-width: 360px; }
.p-seg.wide button { padding: 9px; border-radius: 10px; color: var(--app-muted); font-size: 16px; font-weight: 700; }
.p-seg.wide button.on { background: #fff; color: var(--green); box-shadow: 0 1px 4px rgba(34,34,33,.12); }
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(34,34,33,.34); display: grid; place-items: center; padding: 16px; }
.sheet .p-card { width: min(100%, 460px); max-height: 90vh; overflow: auto; }
.sheet .p-card .where { color: var(--green); font-weight: 700; font-size: 16.5px; margin-top: 5px; }
.sheet .p-card .more { color: var(--muted); font-size: 16px; margin-top: 10px; line-height: 1.45; }
.sheet .factlist { margin-top: 12px; font-size: 15px; display: grid; gap: 4px; }
.sheet .factlist b { color: var(--app-muted); font-weight: 600; }
.sheet .factlist a { color: var(--green); font-weight: 600; }
.sheet .four { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.sheet .four button { background: #fff; border: 1.5px solid var(--app-line); border-radius: 16px; padding: 14px 8px; font-size: 17px; font-weight: 700; text-align: center; }
.sheet .four button:hover { border-color: var(--green); }
.sheet .four button.quiet { color: var(--app-muted); }
.sheet .p-days { display: grid; gap: 6px; margin-top: 16px; }
.sheet .p-days button { display: flex; justify-content: space-between; align-items: baseline; background: #fff; border: 1.5px solid var(--app-line); border-radius: 14px; padding: 12px 16px; font-size: 17px; font-weight: 700; }
.sheet .p-days button:hover { border-color: var(--green); }
.sheet .p-days button span { font-weight: 500; color: var(--app-muted); font-size: 15px; }
.notice { position: fixed; left: 50%; bottom: 28px; translate: -50% 20px; opacity: 0; background: var(--ink); color: #fff; font-weight: 600; font-size: 15px; border-radius: 999px; padding: 12px 18px; z-index: 50; transition: opacity .2s, translate .2s; pointer-events: none; max-width: min(90vw, 520px); text-align: center; }
.notice.on { opacity: 1; translate: -50% 0; }

/* ---------- the bottom bar, the site's ---------- */
body { min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1; }
footer { background: #fff; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 22px var(--gutter); font-size: 14px; color: var(--label); }
footer .links { display: flex; gap: 22px; }
footer a:hover { color: var(--ink); }
/* ---------- sign in: a page of its own ---------- */
.signpage { max-width: 440px; }
.signpage h1 { font-size: clamp(34px, 4.6vw, 64px); font-weight: 800; letter-spacing: -.04em; line-height: 1; margin-bottom: 22px; }
.signpage .lede { font-size: 17px; color: var(--muted); margin: -8px 0 22px; }

/* where the weather is for */
.hero .where .linkish { font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.8); margin-left: 8px; letter-spacing: 0; text-transform: none; }
.hero .where .linkish:hover { color: #fff; }
.askplace { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 14px; }
.placeform { display: flex; gap: 8px; align-items: center; }
.placeform input { font-size: 15px; padding: 9px 14px; border-radius: 999px; border: 1.5px solid rgba(255,255,255,.45); background: rgba(255,255,255,.12); color: #fff; outline: 0; min-width: 180px; }
.placeform input::placeholder { color: rgba(255,255,255,.7); }
.placeform input:focus { border-color: #fff; }
.cta.small { padding: 9px 16px; font-size: 14px; background: #fff; color: var(--green); }
.cta.small.ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6); }
.askplace .walknote { width: 100%; color: rgba(255,255,255,.85); margin-top: 0; }
.askplace .walknote.err { color: #ffd3d3; }

/* ---------- the calendar ---------- */
.calpage { max-width: 1320px; }
.calhead { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 10px; }
.calhead .nav { display: flex; align-items: center; gap: 10px; }
.calhead .nav h2 { font-size: clamp(26px, 3vw, 36px); font-weight: 800; letter-spacing: -.03em; min-width: 7.5em; }
.calhead .nav button { width: 38px; height: 38px; border-radius: 50%; background: #fff; border: 1px solid var(--app-line); font-size: 20px; display: grid; place-items: center; }
.calhead .nav button:hover { border-color: var(--green); color: var(--green); }
.calhead .nav .linkish { width: auto; height: auto; border: 0; background: none; font-size: 14px; font-weight: 700; color: var(--green); border-radius: 0; }
.p-seg.wide.three { grid-template-columns: 1fr 1fr 1fr; max-width: 420px; margin-bottom: 0; }
.calbody { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.grid .dow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--app-label); padding: 0 6px 4px; }
.cell { height: calc((100svh - 236px) / var(--rows, 5)); min-height: 72px; overflow: hidden; background: #fff; border: 1px solid var(--app-line); border-radius: 12px; padding: 8px 8px 6px; text-align: left; display: flex; flex-direction: column; gap: 3px; align-items: stretch; font: inherit; cursor: pointer; }
.cell.blank { background: transparent; border-color: transparent; cursor: default; }
.cell.wk { background: #fafaf8; }
.cell.past { opacity: .8; }
.cell:hover { border-color: var(--green); }
.cell.on { border-color: var(--green); box-shadow: 0 0 0 1.5px var(--green) inset; }
.cell .dn { font-size: 13px; font-weight: 700; color: var(--app-muted); margin-bottom: 2px; }
.cell.today .dn { color: #fff; background: var(--green); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; margin: -2px 0 2px; }
.cell .chip { font-size: 12px; line-height: 1.2; font-weight: 600; color: var(--ink); background: var(--tint); border-radius: 6px; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell .chip b { color: var(--green); font-weight: 800; }
.cell .chip.cal { background: transparent; border: 1px solid var(--app-line); color: var(--muted); }
.cell .chip.back { background: #fff; border: 1px solid #cfe0d6; }
.cell .chip.back::before { content: "↩ "; color: var(--green); }
.cell .chip.list { background: transparent; color: var(--app-muted); font-weight: 600; padding-left: 2px; }
.cell .more { font-size: 12px; font-weight: 700; color: var(--app-muted); padding-left: 2px; }
.cell .went { margin-top: auto; font-size: 11.5px; font-weight: 700; color: var(--app-label); padding-left: 2px; }
.dayside { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 6px; }
.dayside .p-lab:first-child { margin-top: 2px; }
@media (max-width: 1100px) {
  .calbody { grid-template-columns: 1fr; }
  .dayside { position: static; }
  .cell { height: auto; min-height: 84px; padding: 6px; }
  .cell .chip { font-size: 11.5px; }
}

/* ---------- the desk ---------- */
.tabpage { padding-top: 22px; }
.desk { display: grid; grid-template-columns: 190px minmax(0, 1fr) 440px; gap: 32px; align-items: start; max-width: 1360px; }
.desk.wide { grid-template-columns: 190px minmax(0, 1fr); }
.desk .side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 2px; }
.desk .side a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--muted); }
.desk .side a:hover { color: var(--ink); }
.desk .side a.on { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(34,34,33,.06); }
.desk .side a i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-ring); flex: none; }
.desk .side a.on i { background: var(--green); }
.desk .side a .n { margin-left: auto; color: var(--app-muted); font-weight: 600; font-size: 13px; }
.desk .side a svg { width: 20px; height: 20px; flex: none; color: #8f9c95; }
.desk .side a.on svg { color: var(--green); }
.desk .side .lab { font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--app-label); padding: 16px 10px 5px; }
.desk .side .lab:first-child { padding-top: 2px; }
.desk .side .gap { height: 12px; }
.desk .mid .presses { max-width: none; }
.desk .mid .calpage { max-width: none; }
.desk .rpane { position: sticky; top: 84px; }
.sidepane { display: flex; flex-direction: column; gap: 6px; }
.sidepane .p-lab:first-child { margin-top: 2px; }
.sidepane .r { padding: 11px 12px; grid-template-columns: 64px 1fr 26px; }
.sidepane .r .x { font-size: 15px; }
.sidepane .r .t { font-size: 12.5px; }
.minimonth { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.minimonth .dow { font-size: 10.5px; font-weight: 700; color: var(--app-label); text-align: center; padding-bottom: 2px; }
.minimonth .m { height: 40px; background: #fff; border: 1px solid var(--app-line); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 12px; cursor: pointer; }
.minimonth .m.blank { background: transparent; border-color: transparent; cursor: default; }
.minimonth .m:hover { border-color: var(--green); }
.minimonth .m b { font-weight: 700; color: var(--app-muted); }
.minimonth .m.past b { color: var(--app-label); }
.minimonth .m.today b { color: #fff; background: var(--green); width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; }
.minimonth .m i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--green); }
.minimonth .m.past i { color: var(--app-label); }
@media (max-width: 1100px) {
  .desk, .desk.wide { grid-template-columns: 1fr; gap: 18px; }
  .desk .side { position: static; flex-direction: row; flex-wrap: wrap; }
  .desk .rpane { position: static; }
}

/* the plus by the date */
.dateline { display: flex; align-items: center; gap: 14px; }
.dateline .plus { width: 36px; height: 36px; border-radius: 50%; background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 6px 14px -8px rgba(34,34,33,.5); transition: transform .15s; }
.dateline .plus.on { transform: rotate(45deg); }
.tab .holdbar { position: static; margin: 10px 0 12px; }
.sidepane .r { grid-template-columns: 72px 1fr 26px; }

/* set me up: one question per screen */
.walk.one h2 { white-space: normal; font-size: clamp(32px, 4vw, 58px); line-height: 1.02; letter-spacing: -.04em; margin: 14px 0 16px; max-width: 14em; }
.walk.one .lede { font-size: 19px; color: var(--muted); max-width: 30em; margin-bottom: 22px; line-height: 1.45; }
.walk.one .got { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 22px; }
.walk.one .got span { font-size: 14px; font-weight: 700; color: var(--green); background: var(--tint); border-radius: 999px; padding: 4px 11px; }
.walk .dots { display: flex; gap: 6px; }
.walk .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--app-ring); }
.walk .dots i.on { background: var(--green); width: 22px; border-radius: 4px; }
.walk .dots i.done { background: var(--green); opacity: .5; }
.walkend .again { padding: 10px 0; }

.p-card .tog { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; margin-top: 16px; color: var(--ink); }
.p-card .tog input { width: 20px; height: 20px; accent-color: var(--green); }

/* the dot with words: what to do, said right where you do it (the site mock's hint) */
.phone .hint { position: relative; }
.phone .hint::before { content: ""; position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--green); animation: pulse 1.6s ease-out infinite; left: 8px; bottom: calc(100% + 16px); z-index: 6; }
.phone .hint::after { content: attr(data-coach); position: absolute; white-space: nowrap; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; border-radius: 12px 12px 12px 4px; padding: 8px 12px; left: 26px; bottom: calc(100% + 10px); z-index: 5; box-shadow: 0 10px 24px -12px rgba(34,34,33,.5); }
.phone .p-fab.hint::before { left: 50%; margin-left: -7px; top: -22px; margin-top: 0; }
.phone .p-fab.hint::after { left: auto; right: 0; bottom: calc(100% + 28px); border-radius: 12px 12px 4px 12px; }
.phone .p-form.hint { border-color: var(--green); box-shadow: 0 0 0 4px rgba(58,106,79,.18), 0 6px 16px -10px rgba(34,34,33,.3); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(58,106,79,.45); } 100% { box-shadow: 0 0 0 12px rgba(58,106,79,0); } }

.walk.one .eg { font-size: 15px; color: var(--app-muted); margin: -10px 0 22px; }
.walk.one .eg b { color: var(--label); font-weight: 700; margin-right: 6px; }
.walk.one .lede { margin-bottom: 18px; }

/* the sidebar's two groups */
.desk .side hr { border: 0; border-top: 1px solid var(--line); margin: 10px 8px; }
.headrow { display: flex; align-items: baseline; gap: 14px; }
.headrow .linkish { font-size: 14px; font-weight: 700; color: var(--green); }

/* ---------- the calendar, closer to Google's: the lines are the grid ---------- */
.gcal .grid { gap: 0; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.gcal .grid .dow { background: #fff; padding: 8px 8px 6px; margin: 0; text-align: left; }
.gcal .cell { border: 0; border-radius: 0; background: #fff; padding: 6px 8px; gap: 2px; }
.gcal .cell.blank { background: #fafaf8; }
.gcal .cell.wk { background: #fcfcfb; }
.gcal .cell.past { opacity: 1; }
.gcal .cell.past .chip, .gcal .cell.past .dn { opacity: .55; }
.gcal .cell:hover { background: #f4f8f5; }
.gcal .cell .dn { font-size: 12.5px; }
.gcal .cell .chip { background: transparent; border-radius: 4px; padding: 2px 4px; border-left: 3px solid var(--green); }
.gcal .cell .chip.cal { border-left-color: #c9c9c5; color: var(--muted); border-top: 0; border-right: 0; border-bottom: 0; }
.gcal .cell .chip.back { border-left-color: var(--green); background: var(--tint); }
.gcal .cell .chip.list { border-left-color: transparent; color: var(--app-muted); }
.gcal .cell .went { font-size: 11px; }
.gcal .cell { height: calc((100svh - 236px) / var(--rows, 5)); }
.daycard { width: min(100%, 520px); }
.daycard .r { margin-bottom: 6px; }
.sheet .backdrop { position: absolute; inset: 0; }
.sheet .p-card { position: relative; }

/* ---------- under the date ---------- */
.underpage { max-width: 1100px; }
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.stat { background: #fff; border: 1px solid var(--app-line); border-radius: 16px; padding: 16px 18px 14px; box-shadow: 0 2px 8px rgba(34,34,33,.04); }
.stat .name { font-size: 17px; font-weight: 700; }
.stat .big { font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; margin: 6px 0 4px; color: var(--green); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.stat .big small { font-size: 15px; font-weight: 600; color: var(--app-muted); letter-spacing: 0; }
.stat .sub { font-size: 13.5px; color: var(--app-muted); }
.stat .dots { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.stat .dot { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--app-ring); display: inline-block; }
.stat .dot.on { background: var(--green); border-color: var(--green); }
.stat .dot.miss { border-color: var(--app-line); background: var(--app-line); }
.stat .dot.off { border-color: transparent; background: transparent; }
.stat .dot.future { border-color: #f0f0ee; background: transparent; }
.stat .dot.lg { width: 16px; height: 16px; }
.stat .hist { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.stat .hist .dot { width: 10px; height: 10px; }
.stat .hist span { font-size: 12.5px; color: var(--app-muted); margin-left: 4px; }
.stat .hitline { margin-top: 12px; font-weight: 700; color: var(--green); }
.stat.goal.hit { background: var(--green); border-color: var(--green); color: #fff; }
.stat.goal.hit .big, .stat.goal.hit .hitline { color: #fff; }
.stat.goal.hit .sub, .stat.goal.hit .big small, .stat.goal.hit .hist span { color: rgba(255,255,255,.75); }
.stat.goal.hit .dot.on { background: #fff; border-color: #fff; }
.stat.goal.hit .dot { border-color: rgba(255,255,255,.5); background: transparent; }
.stat .week { display: flex; gap: 10px; margin-top: 12px; }
.stat .week .day { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.stat .week .day b { font-size: 11px; color: var(--app-label); font-weight: 700; }
.stat .week .day b.today { color: var(--green); }
.stat .grid12 { display: flex; gap: 4px; margin-top: 14px; }
.stat .grid12 .col { display: flex; flex-direction: column; gap: 4px; }
.stat .grid12 .dot { width: 9px; height: 9px; border-width: 1.5px; }
.stat .months { display: flex; justify-content: space-between; font-size: 11px; color: var(--app-label); margin-top: 4px; }
.stat.words .line { font-size: 20px; font-weight: 700; color: var(--green); }
.stat.ended { opacity: .7; }
.stat.ended .big { color: var(--app-muted); }

/* the month, again (her 10/18 night: "this sucks") — nothing squashes, timed things are solid bars, past days are quiet */
.gcal .cell { padding: 6px 6px 6px; gap: 3px; }
.gcal .cell > * { flex: none; }
.gcal .cell .chip { font-size: 12px; line-height: 16px; padding: 2px 7px; border-radius: 5px; border: 0; background: var(--tint); color: var(--green-deep); font-weight: 600; }
.gcal .cell .chip b { color: inherit; font-weight: 800; }
.gcal .cell .chip:has(b) { background: var(--green); color: #fff; }
.gcal .cell .chip.cal { background: transparent; box-shadow: inset 0 0 0 1px var(--app-line); color: var(--muted); }
.gcal .cell .chip.cal:has(b) { background: transparent; color: var(--muted); }
.gcal .cell .chip.back { background: #fff; box-shadow: inset 0 0 0 1px #cfe0d6; color: var(--green-deep); }
.gcal .cell .chip.back::before { content: "↩ "; }
.gcal .cell .lists { font-size: 11.5px; color: var(--app-label); font-weight: 600; padding-left: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gcal .cell .went { margin-top: auto; width: 6px; height: 6px; border-radius: 50%; background: var(--app-ring); display: block; }
.gcal .cell.past { background: #fafaf8; }
.gcal .cell.past .chip, .gcal .cell.past .dn, .gcal .cell.past .lists { opacity: .5; }
.gcal .cell.today { background: var(--tint); }
.gcal .cell .more { font-size: 11.5px; }
.gcal .grid .dow { font-size: 11.5px; }

/* ---------- settings ---------- */
.settings { max-width: 720px; }
.settings h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; }
.settings .back { color: var(--green); font-weight: 700; font-size: 15px; display: inline-block; margin-bottom: 14px; }
.settings .row { background: #fff; border: 1px solid var(--app-line); border-radius: 14px; padding: 14px 16px; margin-bottom: 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 18px; align-items: center; }
.settings .row > div:first-child b { font-size: 16px; font-weight: 700; display: block; }
.settings .row .sub { display: block; font-size: 13.5px; color: var(--app-muted); margin-top: 3px; line-height: 1.4; }
.settings .inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.settings .inline input { font-size: 15px; padding: 9px 12px; border: 1px solid #e4e4df; border-radius: 10px; background: #fbfbfb; color: var(--ink); outline: 0; min-width: 200px; }
.settings .inline input:focus { border-color: var(--green); }
.settings .inline code { font-size: 14px; background: var(--tint); color: var(--green-deep); border-radius: 8px; padding: 7px 10px; }
.settings .cta.small2 { padding: 9px 14px; font-size: 14px; }
.settings .linkish { font-size: 14px; font-weight: 700; color: var(--green); }
.settings .linkish.danger, .settings b.danger { color: #b4243a; }
.settings .walknote { grid-column: 1 / -1; margin-top: 0; }
.settings .signout { margin-top: 28px; }
.settings .signout .again { color: var(--muted); font-size: 15px; }
.settings .delete { max-width: 560px; }
.settings .delete h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 18px 0 12px; }
.settings .delete h2.danger { color: #b4243a; }
.settings .delete p { font-size: 16px; color: var(--muted); line-height: 1.5; margin-bottom: 12px; }
.settings .delete .word { color: #b4243a; font-weight: 600; }
.settings .cta.danger { background: #b4243a; margin-top: 8px; }
.settings .cta.danger.armed { background: #8f1c2e; }
.settings .delete .again { display: block; margin-top: 14px; color: var(--muted); }

/* =====================================================================
   THE SYSTEM (the 10/18 design review: "nothing is a system"). One type
   scale, a 4px spacing scale, three radii, one elevation rule, one grey
   palette on the desk (the --app-* greys stay inside .phone). Everything
   below is scoped to the signed-in app (body.inapp / .desk) and overrides
   what came before; the walk's phone keeps its phone-native sizes.
   ===================================================================== */
:root {
  --t11: 11px; --t12: 12px; --t13: 13px; --t14: 14px; --t15: 15px; --t17: 17px; --t20: 20px; --t24: 24px; --t32: 32px; --t44: 44px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-ctl: 8px; --r-card: 12px; --r-sheet: 16px;
  --shadow-float: 0 8px 24px -8px rgba(34,34,33,.18), 0 1px 2px rgba(34,34,33,.06);
  --shadow-sheet: 0 24px 48px -16px rgba(34,34,33,.35);
  --bar: 56px;
}

/* ---- the app's own bar ---- */
body.inapp header { padding: 0 var(--s5); height: var(--bar); background: #fff; border-bottom: 1px solid var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
body.inapp .headleft { gap: var(--s4); transform: none; align-items: center; }
body.inapp .brand { --brand: 19px; }
.roomname { font-size: var(--t14); font-weight: 600; color: var(--label); padding-left: var(--s4); border-left: 1px solid var(--line); line-height: 1; }
body.inapp .headright { transform: none; }
.who { position: relative; }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--tint); color: var(--green-deep); font-weight: 700; font-size: var(--t13); display: grid; place-items: center; border: 1px solid #cfe0d6; }
.avatar:hover { border-color: var(--green); }
.whomenu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow-float); min-width: 180px; padding: var(--s2); display: flex; flex-direction: column; z-index: 40; }
.whomenu .whoname { font-size: var(--t12); color: var(--label); padding: var(--s2) var(--s3) var(--s1); }
.whomenu a, .whomenu button { text-align: left; font-size: var(--t14); font-weight: 500; padding: var(--s2) var(--s3); border-radius: var(--r-ctl); color: var(--ink); }
.whomenu a:hover, .whomenu button:hover { background: #f4f4f3; }
body.inapp footer { display: none; }
body.inapp main { padding: 0; }
body.inapp .tabpage { padding: 0; }

/* ---- the desk: a pinned sidebar, the middle scrolls, the right pane one step smaller ---- */
body.inapp .desk { max-width: none; grid-template-columns: 220px minmax(0, 1fr) 360px; gap: 0; min-height: calc(100svh - var(--bar)); align-items: stretch; }
body.inapp .desk.wide { grid-template-columns: 220px minmax(0, 1fr); }
body.inapp .desk .side { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); padding: var(--s4) var(--s3); border-right: 1px solid var(--line); background: #fbfbfa; display: flex; flex-direction: column; gap: 2px; }
body.inapp .desk .side a { padding: 7px 10px; border-radius: 6px; font-size: var(--t14); font-weight: 500; color: var(--ink); gap: 10px; box-shadow: none; }
body.inapp .desk .side a i { display: none; }
body.inapp .desk .side a:hover { background: #ebebe9; color: var(--ink); }
body.inapp .desk .side a.on { background: var(--tint); color: var(--green-deep); font-weight: 600; }
body.inapp .desk .side a .n { font-size: var(--t12); color: var(--label); font-variant-numeric: tabular-nums; }
body.inapp .desk .side hr { margin: var(--s3) 10px; }
body.inapp .desk .side .foot { margin-top: auto; padding: var(--s4) 10px 0; display: flex; flex-wrap: wrap; gap: 4px 10px; }
body.inapp .desk .side .foot a { padding: 0; font-size: var(--t12); color: var(--label); background: none; }
body.inapp .desk .side .foot a:hover { color: var(--ink); }
body.inapp .desk .mid { padding: var(--s5) 40px var(--s8); min-width: 0; }
body.inapp .desk .mid .tab { max-width: 760px; gap: 0; }
body.inapp .desk .rpane { position: sticky; top: var(--bar); height: calc(100svh - var(--bar)); overflow-y: auto; padding: var(--s5) var(--s5) var(--s5) var(--s5); border-left: 1px solid var(--line); background: #fbfbfa; }

/* ---- type and greys on the desk ---- */
.desk .p-lab { font-size: var(--t11); font-weight: 600; letter-spacing: .08em; color: var(--label); margin: var(--s5) 0 var(--s2); padding: 0 2px; }
.desk .p-lab:first-child, .desk .p-seg + .p-lab { margin-top: 0; }
.desk .p-lab span:last-child { font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.desk .p-none { font-size: var(--t14); color: var(--muted); margin: var(--s1) 2px; }
.desk .r .x { font-size: var(--t15); line-height: 1.4; }
.desk .r .t { font-size: var(--t12); font-variant-numeric: tabular-nums; color: var(--green-deep); }
.desk .r .t.q { color: var(--label); }
.desk .r .t small, .desk .r .pl, .desk .stat .sub, .desk .col .lines { font-size: var(--t13); color: var(--muted); }
.desk .r .pl { color: var(--muted); }
.desk .r.done .x { color: var(--label); }

/* ---- rows contained: one surface per list, hairlines, no per-row cards ---- */
.desk .list { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; margin: 0; }
.desk .list .r, .desk .list .bub { border: 0; border-radius: 0; box-shadow: none; margin: 0; border-top: 1px solid var(--line); padding: 11px 16px; min-height: 44px; background: #fff; transition: background .12s; }
.desk .list > :first-child { border-top: 0; }
.desk .list .r:hover, .desk .list .bub:hover { background: #fafaf8; }
.desk .list .r:active, .desk .list .bub:active { background: #f4f4f3; }
.desk .r { grid-template-columns: 72px 1fr 24px; gap: var(--s3); }
.desk .r.plain { grid-template-columns: 1fr 24px; }
.desk .r .c { width: 20px; height: 20px; border-width: 1.5px; border-color: var(--app-ring); }
.desk .r .c:hover { border-color: var(--green); background: var(--tint); }
.desk .r.done .c { background: var(--green); border-color: var(--green); }
.desk .list .bub { font-size: var(--t15); }
.desk .list .bub.sel { background: var(--tint); box-shadow: inset 3px 0 0 var(--green); }
.desk .list .bub .facts { font-size: var(--t13); color: var(--muted); margin-top: 4px; }
.desk .tab > .r, .desk .tab > .bub { margin-bottom: var(--s2); } /* a stray row outside a list keeps a gap */
.desk .p-hero { border-radius: var(--r-card); padding: var(--s4) 18px; font-size: var(--t20); margin-bottom: var(--s2); }
:where(button, a, [tabindex]):focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.desk .list .r:focus-visible { outline-offset: -2px; }

/* ---- controls: one set at 32px ---- */
.desk .holdbar { position: static; margin: var(--s3) 0 var(--s3); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-float); padding: 4px 4px 4px 16px; }
.desk .holdbar input { font-size: var(--t15); padding: 7px 0; }
.desk .holdbar button { width: 32px; height: 32px; }
.desk .dock { position: sticky; bottom: var(--s4); border-radius: var(--r-card); box-shadow: var(--shadow-float); border-color: var(--line); padding: var(--s3); }
.desk .dock .say { font-size: var(--t13); margin: 0 4px var(--s2); }
.desk .chip { font-size: var(--t14); padding: 7px 12px; border-radius: 999px; }
.desk .cta.small, .desk .cta.small2, .settings .cta.small2 { height: 32px; padding: 0 14px; font-size: var(--t13); font-weight: 600; border-radius: var(--r-ctl); display: inline-flex; align-items: center; }
.desk .linkish, .desk .again, .desk .walknote { font-size: var(--t13); }
.desk .p-seg.wide { height: 32px; padding: 2px; border-radius: var(--r-ctl); margin-bottom: var(--s4); background: #ebebe9; }
.desk .p-seg.wide button { font-size: var(--t13); border-radius: 6px; padding: 0 12px; }
.desk .p-seg.wide button.on { box-shadow: none; border: 1px solid var(--line); }
.desk input[type="text"], .desk input[type="date"], .desk input[type="time"], .desk input[type="email"], .desk input[type="password"], .desk .settings .inline input { background: #fff; border: 1px solid var(--line); border-radius: var(--r-ctl); height: 32px; padding: 0 10px; font-size: var(--t14); }
.desk .holdbar input { border: 0; height: auto; padding: 7px 0; font-size: var(--t15); }
.desk .placeform input { height: 32px; border-radius: var(--r-ctl); }

/* ---- Today's header as a page-title band ---- */
.desk .tab .p-date.flat { padding: 0 0 var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.desk .tab .p-date.flat h3 { font-size: var(--t32); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.desk .tab .p-date.flat p { font-size: var(--t14); font-weight: 600; margin-top: var(--s2); }
.desk .tab .p-date.flat p .dot { margin: 0 8px; color: var(--label); }
.desk .dateline .plus { width: 32px; height: 32px; border-radius: var(--r-ctl); background: #fff; border: 1px solid var(--line); color: var(--green); box-shadow: none; }
.desk .dateline .plus:hover { border-color: var(--green); }
.desk .tab .p-listhead.flat { padding: 0 0 var(--s4); border-bottom: 1px solid var(--line); margin-bottom: var(--s4); }
.desk .tab .p-listhead.flat h3 { font-size: var(--t32); font-weight: 700; letter-spacing: -.02em; }
.desk .tab .p-listhead .sub { font-size: var(--t13); color: var(--muted); }
.desk .tab .p-listhead .back { font-size: var(--t13); }
.desk .p-track { margin-top: var(--s3); }

/* ---- the right pane, one step smaller ---- */
.desk .sidepane .p-lab { margin-top: var(--s4); }
.desk .sidepane .p-lab:first-child { margin-top: 0; }
.desk .sidepane .list .r { padding: 9px 12px; min-height: 40px; grid-template-columns: 60px 1fr 20px; }
.desk .sidepane .r .x { font-size: var(--t14); }
.desk .sidepane .r .t { font-size: var(--t11); }
.desk .sidepane .r .c { width: 18px; height: 18px; }

/* ---- the calendar's numbers ---- */
.desk .calhead { margin-bottom: var(--s4); }
.desk .calhead .nav h2 { font-size: var(--t24); font-weight: 700; }
.desk .calhead .nav button { width: 32px; height: 32px; border-radius: var(--r-ctl); border: 1px solid var(--line); font-size: var(--t17); box-shadow: none; }
.desk .calhead .nav .linkish { border: 0; }
.desk .gcal .grid { border-radius: var(--r-card); }
.desk .gcal .grid .dow { font-size: var(--t11); font-weight: 600; letter-spacing: .06em; color: var(--label); padding: var(--s2); border-bottom: 1px solid var(--line); text-align: center; }
.desk .gcal .cell { padding: 6px 8px; gap: 2px; height: calc((100svh - var(--bar) - 140px) / var(--rows, 5)); }
.desk .gcal .cell .dn { font-size: var(--t13); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.desk .gcal .cell .chip { height: 20px; line-height: 20px; padding: 0 6px; border-radius: 3px; font-size: var(--t12); font-weight: 500; }
.desk .gcal .cell .chip b { font-weight: 700; }
.desk .gcal .cell .lists { font-size: var(--t11); color: var(--label); }
.desk .gcal .cell.past .chip, .desk .gcal .cell.past .dn, .desk .gcal .cell.past .lists { opacity: 1; }
.desk .gcal .cell.past .chip { background: #eeeeec; color: var(--muted); }
.desk .gcal .cell.past .chip:has(b) { background: #dcdcd9; color: var(--muted); }
.desk .gcal .cell.past .dn { color: var(--label); }
.desk .gcal .cell:hover { background: #f4f8f5; }
.desk .p-seg.wide.three { max-width: 360px; }
.desk .daycard { border-radius: var(--r-sheet); box-shadow: var(--shadow-sheet); }

/* ---- under the date ---- */
.desk .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.desk .stat { padding: var(--s5); border-radius: var(--r-card); border: 1px solid var(--line); box-shadow: none; }
.desk .stat .name { font-size: var(--t14); font-weight: 600; color: var(--muted); }
.desk .stat .big { font-size: 40px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: var(--s2) 0 2px; }
.desk .stat .big small { font-size: var(--t14); }
.desk .stat .sub { color: var(--label); }
.desk .stat .dot { width: 10px; height: 10px; border: 0; background: #e2e2df; }
.desk .stat .dot.on { background: var(--green); }
.desk .stat .dot.miss { background: #e2e2df; }
.desk .stat .dot.future { background: #f0f0ee; }
.desk .stat .dot.off { background: transparent; }
.desk .stat .grid12 .dot { width: 8px; height: 8px; }
.desk .stat .week .day b { font-size: var(--t11); }
.desk .stat.goal.hit .dot { background: rgba(255,255,255,.35); }
.desk .stat.goal.hit .dot.on { background: #fff; }
@media (max-width: 1100px) { .desk .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .desk .stats { grid-template-columns: 1fr; } }

/* ---- the presses ---- */
.desk .presses .date { font-size: var(--t44); font-weight: 700; letter-spacing: -.03em; }
.desk .presses .under { font-size: var(--t15); }
.desk .presses .vol { font-size: var(--t11); letter-spacing: .08em; }
.desk .hero { padding: var(--s5); border-radius: var(--r-card); grid-template-columns: minmax(0, 1fr) 320px; gap: var(--s6); align-items: center; margin-top: var(--s5); }
.desk .hero .voice { font-size: var(--t20); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; }
.desk .hero .where { font-size: var(--t11); letter-spacing: .08em; }
.desk .cols { gap: 0 var(--s6); }
.desk .col .p-lab { margin: var(--s5) 0 var(--s2); }
.desk .note { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: var(--r-ctl); padding: var(--s3) 14px; margin-bottom: var(--s2); font-size: var(--t14); font-weight: 500; color: var(--ink); }
.desk .note b { color: var(--green-deep); }
.desk .story { font-size: var(--t15); }
.desk .cta.small, .desk .cta.small.ghost { height: 32px; }

/* ---- settings ---- */
.desk .settings h1 { font-size: var(--t32); font-weight: 700; }
.desk .settings .group { background: #fff; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.desk .settings .row { border: 0; border-radius: 0; border-top: 1px solid var(--line); margin: 0; padding: var(--s3) var(--s4); }
.desk .settings .group .row:first-child { border-top: 0; }
.desk .settings .row > div:first-child b { font-size: var(--t15); }
.desk .settings .row .sub { font-size: var(--t13); }
.desk .settings .inline code { border-radius: 6px; font-size: var(--t13); }
.desk .settings .delete h2 { font-size: var(--t24); }
.desk .settings .delete p { font-size: var(--t15); }

/* ---- elevation: nothing at rest casts a shadow ---- */
.desk .r, .desk .bub, .desk .stat, .desk .side a.on, .desk .p-seg.wide button.on, .desk .keep .seg button.on { box-shadow: none; }
.desk .sheet .p-card { border-radius: var(--r-sheet); box-shadow: var(--shadow-sheet); }
.desk .sheet .four button, .desk .sheet .p-days button { border-radius: var(--r-ctl); }
.desk .notice { box-shadow: var(--shadow-float); }
@media (prefers-reduced-motion: reduce) { .desk *, .desk *::before, .desk *::after { animation: none !important; transition: none !important; } }
@media (max-width: 1100px) {
  body.inapp .desk, body.inapp .desk.wide { grid-template-columns: 1fr; }
  body.inapp .desk .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  body.inapp .desk .side .lab { width: 100%; padding: 6px 10px 0; }
  body.inapp .desk .side .gap { display: none; }
  body.inapp .desk .side .foot { display: none; }
  body.inapp .desk .rpane { position: static; height: auto; border-left: 0; }
}

/* ---- THE INTRO (10/19): the dock in the drawn phone, a selected bubble, a tickable line, the clock button ---- */
.phone .p-dock { position: absolute; left: 10px; right: 10px; bottom: 92px; z-index: 3; background: #fff; border: 1px solid var(--app-line); border-radius: 22px; padding: 14px 14px 12px; box-shadow: 0 -8px 30px -14px rgba(34,34,33,.35); }
.phone .p-dock .say { font-size: 13.5px; font-weight: 600; color: var(--app-muted); margin: 0 4px 10px; }
.phone .p-dock .chips { display: flex; gap: 7px; flex-wrap: wrap; }
.phone .bub { cursor: pointer; }
.phone .bub.sel { border-color: var(--green); background: #f3f8f5; box-shadow: 0 0 0 1.5px var(--green) inset; }
.phone button.c { cursor: pointer; background: #fff; }
.phone button.c.hint::before { left: 50%; translate: -50% 0; bottom: calc(100% + 12px); }
.phone button.c.hint::after { left: auto; right: -4px; border-radius: 12px 12px 4px 12px; bottom: calc(100% + 8px); }
.walk .cta.jump { background: var(--ink); }
.walk.one .lede.small { font-size: 16px; color: var(--label); }
.walk.one .lede.small b { color: var(--ink); font-weight: 700; }
.phone .p-fab.hint { position: absolute; }
.phone .p-fab.hint::before { left: 50%; translate: -50% 0; bottom: calc(100% + 14px); }
.phone .p-fab.hint::after { left: auto; right: 0; border-radius: 12px 12px 4px 12px; bottom: calc(100% + 10px); }

/* ---- THE INTRO, rebuilt (10/19): the phone big and bottom-anchored, the words top-left, the tab that glows ---- */
.view.intro, .tabpage.intro { overflow: hidden; min-height: calc(100svh - 69px); padding-bottom: 0; justify-content: flex-start; }
.setup.intro { align-items: start; min-height: calc(100svh - 69px - 28px); grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; }
.tabpage.intro .desk { max-width: none; }
.tabpage.intro .desk .mid { min-height: calc(100svh - 69px - 28px); }
.setup.intro .walk { padding-top: 8vh; max-width: 36em; }
.setup.intro .phonecol { align-self: end; transform: translateY(26px); } /* the chin runs off the page; the tab bar stays in view */
.setup.intro .phone { box-shadow: 0 30px 60px -30px rgba(34,34,33,.45); }
.walk.one .lede.small { font-size: 16px; color: var(--label); }
.walk.one .lede.small b { color: var(--ink); font-weight: 700; }
.walk .map { list-style: none; margin: 4px 0 6px; padding: 0; border-top: 1px solid var(--line); }
.walk .map li { font-size: 15.5px; color: var(--muted); line-height: 1.45; padding: 9px 0; border-bottom: 1px solid var(--line); }
.walk .map a { color: var(--green); font-weight: 700; }
.walkend .cta.jump { background: var(--ink); }
.p-date.ahead h3 { color: var(--green); } /* the clock is off today */
.p-hintline { font-size: 13.5px; line-height: 19px; color: var(--app-muted); padding: 6px 4px 0; }
.p-dock input[type=time] { font: inherit; font-size: 16px; padding: 7px 10px; border: 1.5px solid var(--app-line); border-radius: 999px; background: #fff; color: var(--ink); }
.p-tabs button.glow { color: var(--ink); font-weight: 700; }
.p-tabs button.glow svg { color: var(--green); animation: glowpulse 1.1s ease-out 1; }
@keyframes glowpulse { 0% { filter: drop-shadow(0 0 0 rgba(58,106,79,.0)); transform: scale(1); } 35% { filter: drop-shadow(0 0 10px rgba(58,106,79,.75)); transform: scale(1.18); } 100% { filter: drop-shadow(0 0 0 rgba(58,106,79,0)); transform: scale(1); } }

/* the map (Set me up on an account that already has things) */
.maprows { display: flex; flex-direction: column; border-top: 1px solid var(--line); margin-top: 6px; max-width: 36em; }
.maprow { display: flex; flex-direction: column; gap: 3px; text-align: left; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.maprow b { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }
.maprow span { font-size: 15px; color: var(--muted); }
.maprow:hover b { color: var(--green); }

/* ---- MORE IT CAN DO: tiles on the left, the drawn phone on the right ---- */
.more { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
.more h1 { font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.035em; line-height: 1.05; }
.more .lede { font-size: 17px; color: var(--muted); margin: 8px 0 18px; }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: 40em; }
.tile { text-align: left; font-size: 15.5px; font-weight: 700; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 13px 14px; }
.tile:hover { border-color: var(--green); }
.tile.on { background: var(--tint); border-color: var(--green); color: var(--green-deep); }
.mdetail { margin-top: 22px; max-width: 40em; }
.mdetail h2 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; }
.mdetail p { font-size: 16.5px; color: var(--muted); line-height: 1.45; margin-top: 8px; }
.mdetail p.how { color: var(--ink); }
.mpick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 14px; }
.mpick > span { font-size: 13px; font-weight: 700; color: var(--label); text-transform: uppercase; letter-spacing: .08em; margin-right: 4px; }
.mform { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; }
.mform label { font-size: 14px; font-weight: 700; color: var(--label); }
.mform input { font: inherit; font-size: 16px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); min-width: 10em; }
.mform input:focus { outline: 0; border-color: var(--green); }
.mform code { font-size: 15px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.mform .mnote { font-size: 15px; color: var(--muted); }
.seg2 { display: flex; gap: 6px; }
.mfoot { margin-top: 28px; font-size: 14px; font-weight: 700; color: var(--label); }
.mfoot a:hover { color: var(--green); }
.more .phonecol { position: sticky; top: 80px; }
.more .phone { --s: .72; }
/* the drawn phone's extra faces for the room */
.p-days { display: flex; gap: 6px; margin-top: 10px; }
.p-days .dd { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--app-ring); font-size: 14px; font-weight: 700; color: var(--app-muted); background: #fff; }
.p-days .dd.on { background: var(--green); border-color: var(--green); color: #fff; }
.p-seg { display: inline-flex; background: #ececea; border-radius: 999px; padding: 3px; gap: 2px; margin-bottom: 14px; }
.p-seg span { font-size: 14px; font-weight: 600; color: var(--app-muted); border-radius: 999px; padding: 7px 16px; }
.p-seg span.on { color: var(--ink); background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.1); }
.p-cardv { background: #fff; border: 1px solid var(--app-line); border-radius: 18px; padding: 18px; }
.p-cardv .x { font-size: 20px; font-weight: 700; line-height: 1.3; }
.p-cardv .when { font-size: 14px; color: var(--green); font-weight: 700; margin-top: 6px; }
.p-cardv .tags, .p-cardv .facts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.p-cardv .tagc { font-size: 13.5px; font-weight: 700; color: var(--green); background: var(--tint); border-radius: 999px; padding: 4px 10px; }
.p-cardv .factc { font-size: 14px; color: var(--ink); background: #f4f4f3; border: 1px solid var(--app-line); border-radius: 10px; padding: 6px 10px; }
.p-cardv .factc b { color: var(--app-muted); font-weight: 600; margin-right: 4px; }
.p-cardv .p-none { margin-top: 10px; }
.bub.faint { color: var(--app-label); border-style: dashed; }
.bub .facts { display: block; font-size: 13.5px; color: var(--app-muted); margin-top: 6px; }
@media (max-width: 980px) {
  .setup.intro { grid-template-columns: 1fr; }
  .setup.intro .walk { padding-top: 10px; }
  .setup.intro .phonecol { order: 1; transform: none; align-self: center; padding-bottom: 24px; }
  .more { grid-template-columns: 1fr; }
  .more .phonecol { position: static; }
}

/* ---------- edit on the web: the card's ledger (10/20) ---------- */
.p-card textarea { width: 100%; border: 1.5px solid var(--app-line); border-radius: 14px; background: #fff; outline: 0; padding: 12px 14px; font-size: 18px; color: var(--ink); line-height: 1.35; resize: vertical; min-height: 66px; }
.p-card textarea:focus { border-color: var(--green); }
.p-card .row { display: flex; align-items: center; gap: 12px; }
.p-card .row input { flex: 1; min-width: 0; }
.p-card .row .p-link { margin-top: 0; white-space: nowrap; }
.p-card .p-cancel { display: block; margin: 14px auto 0; color: var(--app-muted); font-weight: 700; font-size: 16px; }
.p-card .p-del { display: block; margin: 26px auto 0; color: #b4243a; font-weight: 700; font-size: 16px; border-radius: 999px; padding: 10px 16px; }
.p-card .p-del.armed { background: #fbeaec; }
.p-card .p-empty.center { text-align: center; margin-top: 26px; }


/* ---------- the Tags room (10/20) ---------- */
.tagrow .x b { font-weight: 800; }
.tagword { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 4px 0 2px; }
.tagcounts { color: var(--app-muted); font-size: 16px; margin-bottom: 12px; }
.tagtools { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.tagrename { display: flex; align-items: center; gap: 8px; }
.tagrename input { font-size: 17px; padding: 9px 12px; border: 1.5px solid var(--app-line); border-radius: 12px; background: #fff; outline: 0; width: 200px; }
.tagrename input:focus { border-color: var(--green); }
.linkish.danger { color: #b4243a; }
/* the Tags row on the card's edit form */
.tagedit { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tagchip { display: inline-flex; align-items: center; gap: 7px; background: var(--tint); color: var(--green-deep); font-weight: 700; border-radius: 999px; padding: 7px 12px; font-size: 15px; }
.tagchip button { color: var(--green); font-size: 17px; line-height: 1; padding: 0 2px; }
.p-card .tagedit input { flex: 1; min-width: 150px; width: auto; }

/* the App Store, under the rooms (10/20: the hour Apple said yes) */
.desk .side a.store { color: var(--app-muted); font-weight: 600; }
.desk .side a.store:hover { color: var(--ink); }
/* the right pane's rows are narrow: the "from Oct 20" under a time stays on Today's own page (10/21) */
.desk .rpane .r .t small { display: none; }