/* Habit Tracker v2 · the calm skin, 17-oct-2026 (version 2.3).
   Loads after tracker.css and only restyles. It brings back the look of the v1 demo Sarah saw on 9-oct
   (../../app/tracker-skin.css): a sand page, white rows that lift, the check on the right, his statement on a dark
   card, the week in a ring, and small movements when he taps. The colors and letters stay Sarah's new brand
   (HANDOVER, 13-oct): ink, moss, sand and oat, Archivo and Manrope. The v1 gold does not come back.
   Why: in the Week End Call (16-oct) Tien found the v2 "overwhelming" and Sarah agreed that "the circles are
   user-friendly, the rounded edges". Moss means done or progress, nothing else.
   To undo: remove the <link> to this file in index.html, coach.html and demo.html. */

/* 19-oct (i4): the colors (the old --ink, --moss, --sand, --oat, --sunk, --white, --muted, --light, --ring-0, --lift,
   --lift-2, --line, --check, --dash) moved to :root at the top of tracker.css, by job, with their dark values. */
.dt{
  --r-sm:10px;--r-md:14px;--r-lg:16px;--r-xl:20px;--r-pill:999px;
  --ease:cubic-bezier(.23,1,.32,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  background:var(--page);color:var(--text-2);font-size:14.5px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.page{background:var(--page)}
.dt svg{stroke-linecap:round;stroke-linejoin:round}

/* ---------- header: the date in small caps, the screen name in Archivo, the week in a ring ---------- */

.dt .dt-bar{background:transparent;border-bottom:0;padding:18px 20px 14px;padding-top:calc(18px + env(safe-area-inset-top,0px));align-items:center;gap:14px}
.dt .dt-bar > div:first-child{min-width:0}
.dt .dt-bar small{display:block;margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.08em;color:var(--muted)}
.dt .dt-bar small::before{content:none}
.dt .dt-bar h1{font-stretch:100%;font-size:30px;font-weight:700;line-height:1.08;letter-spacing:-.018em;text-transform:none;color:var(--text)}

/* rings: a sand track and a moss arc that grows from where it was (tracker.js, ring()) */
.dt .dt-ring{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;flex:none;width:32px;height:32px;color:var(--text)}
.dt .dt-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.dt .dt-ring circle{fill:none;stroke-width:3.4}
.dt .dt-ring-t{stroke:var(--track)}
.dt .dt-ring-a{stroke:var(--done);stroke-linecap:round;stroke-dasharray:100 100}
.dt .dt-ring:not(.grow) .dt-ring-a[style*="dashoffset:100"]{stroke:transparent}
.dt .dt-ring.grow .dt-ring-a{animation:dt-ring 760ms var(--ease) both}
@keyframes dt-ring{from{stroke-dashoffset:var(--from)}}

.dt .dt-bar .dt-score{flex:none;text-align:center}
.dt .dt-score .dt-ring{width:62px;height:62px}
.dt .dt-score .dt-ring circle{stroke-width:2.6}
.dt .dt-bar .dt-score .dt-ring b{position:relative;display:block;font-family:var(--head);font-stretch:100%;font-size:22px;font-weight:700;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.dt .dt-bar .dt-score .dt-ring small{position:relative;display:block;margin:3px 0 0;font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1;text-transform:uppercase;color:var(--muted)}
.dt .dt-score .dt-ring.full{background:var(--accent-tint);border-radius:50%}
/* Sarah's count on a computer ("2 of 6 checked in today") stays text, in the same calm type */
.dt .dt-bar .dt-score > span:not(.dt-ring){font-stretch:100%;font-size:40px;letter-spacing:-.02em;text-transform:none;line-height:1}
.dt .dt-bar .dt-score > small{display:block;margin:6px 0 0;font-size:10.5px;letter-spacing:.08em}

/* ---------- body, text, notes ---------- */

.dt .dt-body{padding:4px 16px 28px}
.dt .dt-lead{font-size:15px;line-height:1.5;color:var(--text-2);margin:2px 2px 18px}
.dt .dt-hint{font-size:13px;line-height:1.45;color:var(--muted)}
.dt .dt-foot{font-size:12.5px;line-height:1.5;color:var(--muted);margin:14px 4px 0}
.dt .dt-saved{font-size:12.5px;color:var(--muted);margin:14px 0 10px}
.dt .dt-note{background:var(--tint-1);color:var(--text);border-radius:var(--r-md);padding:12px 14px;font-size:13.5px;margin:0 0 14px}
.dt .dt-backmsg{align-items:center;background:var(--accent-tint);color:var(--accent-ink);border-radius:var(--r-md);padding:12px 14px;font-size:13.5px;font-weight:600;margin:0 0 14px;
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.dt .dt-backmsg::before{margin-top:0}
.dt .dt-err{border:0;background:var(--surface);border-radius:var(--r-md);box-shadow:inset 0 0 0 1.5px var(--text)}
.dt .dt-link{color:var(--text-2);font-size:13px;text-decoration-color:var(--light)}
.dt a{text-decoration-color:var(--light);text-underline-offset:3px}

/* ---------- Today / Yesterday: a white pill that slides ---------- */

.dt .dt-seg{position:relative;isolation:isolate;background:var(--tint-2);border-radius:var(--r-pill);padding:4px;margin:2px 0 18px}
.dt .dt-seg button{border-radius:var(--r-pill);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted);transition:color 220ms var(--ease)}
.dt .dt-seg button.on{background:var(--surface-up);color:var(--text);box-shadow:var(--shadow-1)}
@supports selector(:has(*)){
  .dt .dt-seg::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:var(--r-pill);background:var(--surface-up);
    box-shadow:var(--shadow-1)}
  .dt .dt-seg:has(> button:last-child.on)::before{transform:translateX(100%)}
  .dt .dt-seg button.on{background:none;box-shadow:none}
  .dt .dt-seg.dt-fx::before{animation:dt-seg-l 340ms var(--ease)}
  .dt .dt-seg.dt-fx:has(> button:last-child.on)::before{animation-name:dt-seg-r}
}
@keyframes dt-seg-r{from{transform:translateX(0)}}
@keyframes dt-seg-l{from{transform:translateX(100%)}}

/* ---------- his identity statement: the dark card on top ---------- */

.dt .dt-app .dt-stmt{position:relative;margin:2px 0 10px;padding:42px 20px 14px;border-radius:22px;
  background:radial-gradient(140% 110% at 100% 0%,var(--glow) 0%,rgba(90,107,74,0) 56%),var(--ink-card);
  color:var(--sand);font-family:var(--head);font-stretch:100%;font-size:21px;font-weight:600;line-height:1.3;letter-spacing:-.012em;text-wrap:pretty;
  box-shadow:var(--shadow-ink)}
.dt .dt-app .dt-stmt::before{content:"Identity statement";position:absolute;top:18px;left:20px;
  font:700 10.5px/1 Manrope,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--moss-light)}
.dt .dt-app .dt-stmt ol{margin:12px 0 2px;padding-left:18px;font-family:Manrope,system-ui,sans-serif;font-size:13.5px;font-weight:400;line-height:1.45;letter-spacing:0;color:rgba(243,237,227,.84)}
.dt .dt-app .dt-stmt ol li{margin:5px 0}
.dt .dt-app .dt-stmt .dt-more{display:inline-flex;align-items:center;margin:2px 0 0;font-family:Manrope,system-ui,sans-serif;font-size:13px;font-weight:500;letter-spacing:0;
  color:var(--oat);text-decoration-color:rgba(230,220,203,.55);text-underline-offset:4px}
.dt .dt-app .dt-stmt .dt-more:hover{color:var(--white)}

/* ---------- section names ---------- */

.dt .dt-app .dt-card:not(.dt-prompt){background:transparent;border:0;padding:0;box-shadow:none;margin-bottom:26px}
.dt .dt-label,.dt .dt-app .dt-label{font-stretch:100%;font-size:21px;font-weight:700;line-height:1.2;letter-spacing:-.012em;text-transform:none;color:var(--text);margin:0 2px 4px}
.dt .dt-app .dt-hint{margin:0 2px 10px}
.dt .dt-sec-h{align-items:baseline;margin:0}
.dt .dt-sec-n{font-size:12.5px;font-weight:600;color:var(--muted)}
.dt .dt-sub{display:block;margin:24px 4px 2px;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.dt .dt-sub::before{content:none}
.dt .dt-sub small{display:block;margin-top:4px;font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.dt .dt-app .dt-label + .dt-sub,.dt .dt-app .dt-sec-h + .dt-sub,.dt .dt-top > .dt-sub:first-child{margin-top:8px}

/* ---------- rows: what's left is a white card that lifts, the check on the right.
   Done sinks back with a moss disc. A habit to break is flat until he slips. ---------- */

.dt .dt-row{gap:12px;min-height:56px;margin-top:8px;padding:12px 14px 12px 16px;border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift);
  font-size:15.5px;font-weight:500;line-height:1.3;letter-spacing:-.005em;color:var(--text);
  transition:transform 160ms var(--ease),box-shadow 220ms var(--ease),background-color 220ms var(--ease)}
.dt .dt-app .dt-row{font-size:15.5px}
.dt .dt-row:active{transform:scale(.985)}
.dt .dt-row .dt-rl{order:1}
.dt .dt-row .dt-mini{order:2}
.dt .dt-row .dt-tag{order:3}
.dt .dt-row .dt-ck{order:4}
.dt .dt-ck{position:relative;width:28px;height:28px;border:1.75px solid var(--ring-0);background:transparent center/14px no-repeat;transition:border-color 200ms var(--ease)}
.dt .dt-cue{margin-top:3px;font-size:12.5px;font-weight:500;color:var(--muted)}
.dt .dt-row .dt-tag{padding:5px 10px;border-radius:var(--r-pill);background:var(--tint-1);font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}

.dt .dt-row.on{background:var(--row-done);box-shadow:none;color:var(--muted)}
.dt .dt-row.on .dt-cue{color:var(--light)}
.dt .dt-row.on .dt-ck{background-color:var(--done);border-color:var(--done);background-image:var(--check);box-shadow:0 0 0 4px var(--done-halo)}

.dt .dt-brk:not(.on){background:transparent;box-shadow:inset 0 0 0 1px var(--ring-1);color:var(--text-2)}
.dt .dt-brk:not(.on) .dt-ck{display:none}
.dt .dt-brk:not(.on) .dt-tag{background:var(--accent-tint);color:var(--accent-ink);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.dt .dt-brk.on{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--text),var(--shadow-2);color:var(--text)}
.dt .dt-brk.on .dt-ck{background-color:var(--fill-strong);border-color:var(--fill-strong);background-image:var(--dash);box-shadow:none}
.dt .dt-brk.on .dt-tag{background:var(--fill-strong);color:var(--on-fill);letter-spacing:.06em;text-transform:uppercase;font-size:10.5px}
.dt.dt-busy .dt-row{opacity:.6}

/* the tap: the disc pops, a ring fades out from it, the tick grows in, the row sinks back */
.dt .dt-row.dt-fx{animation:dt-sink 360ms var(--ease)}
.dt .dt-row.on.dt-fx .dt-ck::before,.dt .dt-nn.on .dt-nnck.dt-fx .dt-ck::before{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--done);
  pointer-events:none;animation:dt-ripple 620ms var(--ease) both}
.dt .dt-brk.on.dt-fx .dt-ck::before{border-color:var(--fill-strong)}
.dt .dt-row.on.dt-fx .dt-ck{animation:dt-pop 440ms var(--spring),dt-tick 380ms var(--ease) 60ms both}
.dt .dt-row:not(.on).dt-fx .dt-ck,.dt .dt-nn:not(.on) .dt-nnck.dt-fx .dt-ck{animation:dt-unpop 260ms var(--ease)}
@keyframes dt-pop{0%{transform:scale(.62)}55%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes dt-unpop{from{transform:scale(.8)}}
@keyframes dt-tick{from{background-size:0 0}to{background-size:14px 14px}}
@keyframes dt-ripple{from{transform:scale(.85);opacity:.55}to{transform:scale(1.9);opacity:0}}
@keyframes dt-sink{from{transform:scale(.985)}}

/* ---------- the parts of the day, folded to one line on a phone (tracker.js, fold()) ---------- */

.dt .dt-fold{margin-top:10px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--lift);transition:box-shadow 220ms var(--ease)}
.dt .dt-fold:first-child{margin-top:0}
.dt .dt-fold-h{display:flex;align-items:center;gap:14px;width:100%;min-height:66px;padding:12px 14px 12px 16px;background:none;border:0;border-radius:inherit;
  text-align:left;color:var(--text);cursor:pointer}
.dt .dt-fold-h:active{transform:scale(.99)}
.dt .dt-fold-t{flex:1;min-width:0}
.dt .dt-fold-t b{display:block;font-family:var(--head);font-stretch:100%;font-size:16.5px;font-weight:650;line-height:1.2;letter-spacing:-.008em;color:var(--text)}
.dt .dt-fold-t small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt .dt-fold.full .dt-ring{background:var(--done) var(--check) center/15px no-repeat;border-radius:50%}
.dt .dt-fold.full .dt-ring svg{display:none}
.dt .dt-chev{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--surface-2);transition:transform 340ms var(--ease),background-color 200ms var(--ease)}
.dt .dt-chev::before{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-5px 0 0 -3.5px;border-right:1.8px solid var(--text);border-bottom:1.8px solid var(--text);
  transform:rotate(45deg);border-radius:0 0 1px 0}
.dt .dt-fold.open .dt-chev{transform:rotate(180deg)}
.dt .dt-fold-b{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 380ms var(--ease),visibility 0s linear 380ms}
.dt .dt-fold.open .dt-fold-b{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows 380ms var(--ease),visibility 0s}
.dt .dt-fold-in{min-height:0;overflow:hidden}
.dt .dt-app .dt-fold-in > .dt-card{margin:0;padding:0 14px 16px}
.dt .dt-fold-in > .dt-card > .dt-sec-h,.dt .dt-fold-in > .dt-card > .dt-label{display:none}
.dt .dt-fold-in > .dt-card > .dt-hint{margin:0 2px 8px}
.dt .dt-fold-in > .dt-card > .dt-sub:first-child,.dt .dt-fold-in > .dt-card > .dt-row:first-child,.dt .dt-fold-in > .dt-card > .dt-read:first-child{margin-top:0}
.dt .dt-fold .dt-fold-in > *{transition:opacity 260ms var(--ease) 60ms}
.dt .dt-fold:not(.open) .dt-fold-in > *{opacity:0;transition-delay:0s}
.dt .dt-cols > .dt-col:last-child > .dt-fold:first-child{margin-top:4px}

/* rows inside a part, the panel on a computer and Week sit on white, so they get a line instead of a lift */
.dt .dt-fold .dt-row,.dt .dt-rail .dt-row,.dt .dt-lesson .dt-row{box-shadow:var(--line)}
.dt .dt-fold .dt-row.on,.dt .dt-rail .dt-row.on,.dt .dt-lesson .dt-row.on{background:var(--row-done-in);box-shadow:none}
.dt .dt-fold .dt-brk.on,.dt .dt-rail .dt-brk.on{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--text)}

/* today's 3 non-negotiables: his words in a row, the check on the right */
.dt .dt-nn{position:relative;display:flex;align-items:center;gap:0;margin-top:8px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--line);transition:background-color 220ms var(--ease)}
.dt .dt-nn .dt-in{order:1;flex:1;min-width:0;margin:0;border:0;border-radius:var(--r-lg);background:transparent;box-shadow:none;padding:15px 4px 15px 16px;font-size:16px}
.dt .dt-nn .dt-in:focus{box-shadow:none;outline:0}
.dt .dt-nn:focus-within{box-shadow:inset 0 0 0 2px var(--text)}
.dt .dt-nnck{order:2;flex:none;width:52px;min-height:52px;display:grid;place-items:center;padding:0;background:none;border:0;border-radius:var(--r-lg);cursor:pointer}
.dt .dt-nn.on{background:var(--row-done-in);box-shadow:none}
.dt .dt-nn.on .dt-nnck{background:none}
.dt .dt-nn.on .dt-in{color:var(--muted);background:transparent}
.dt .dt-nn.on .dt-nnck .dt-ck{background-color:var(--done);border-color:var(--done);background-image:var(--check);box-shadow:0 0 0 4px var(--done-halo)}
.dt .dt-nn.on .dt-nnck.dt-fx .dt-ck{animation:dt-pop 440ms var(--spring),dt-tick 380ms var(--ease) 60ms both}

/* ---------- inputs and buttons ---------- */

.dt input,.dt textarea,.dt select{border:0;border-radius:var(--r-md);background-color:var(--field);color:var(--text);box-shadow:inset 0 0 0 1px var(--ring-2);
  transition:box-shadow 160ms var(--ease)}
.dt input:focus,.dt textarea:focus,.dt select:focus{outline:0;box-shadow:inset 0 0 0 2px var(--text)}
.dt input::placeholder,.dt textarea::placeholder{color:var(--light)}
.dt .dt-save{min-height:52px;padding:15px 16px;border-radius:var(--r-lg);background:var(--fill-strong);color:var(--on-fill)!important;font-size:15px;font-weight:700;letter-spacing:-.005em;text-transform:none;
  box-shadow:var(--shadow-btn);transition:background-color 200ms var(--ease),transform 140ms var(--ease)}
.dt .dt-save:active{transform:scale(.985)}
.dt .dt-save.done{background:var(--accent-fill);color:var(--on-accent)!important}
.dt .dt-btn2{border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--text);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none}
.dt .dt-copy{border:0;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--text);padding:0 18px;font-size:13.5px;font-weight:600;letter-spacing:0;text-transform:none}
.dt .dt-ghost{border:1.5px dashed var(--dash-line);border-radius:var(--r-lg);background:transparent;font-size:14px;font-weight:600}
.dt .dt-plus{border:0;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--line);font-size:13px;font-weight:700}
.dt .dt-chipb{border:0;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--line);padding:0 15px;font-size:13.5px;font-weight:500;color:var(--text-2);
  transition:background-color 200ms var(--ease),color 200ms var(--ease)}
.dt .dt-chipb.on{background:var(--fill-strong);color:var(--on-fill);box-shadow:none}
.dt .dt-chipb.dt-fx{animation:dt-chip 320ms var(--spring)}
@keyframes dt-chip{from{transform:scale(.9)}}
.dt .dt-chips .dt-sub{margin-top:18px}
.dt .dt-val{background:var(--surface);box-shadow:var(--line);color:var(--text)}
.dt .dt-x2{border:0;border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--ring-2)}

/* ---------- cards: prompts, Sarah's view, his setup ---------- */

.dt .dt-card{border:0;border-radius:var(--r-xl);background:var(--surface);padding:16px;margin-bottom:14px;box-shadow:var(--lift)}
.dt .dt-prompt,.dt .dt-app .dt-prompt{background:var(--surface);border:0;border-radius:var(--r-xl);padding:18px 16px 16px;margin-bottom:16px;box-shadow:var(--lift)}
.dt .dt-prompt .dt-save{margin-top:12px}
.dt .dt-app .dt-card.dt-lesson,.dt .dt-lesson{background:var(--surface);border-radius:var(--r-xl);padding:18px 16px 16px;box-shadow:var(--lift);margin-bottom:18px}
.dt .dt-lesson-k{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--muted)}

/* ---------- the tab bar on a phone: frosted sand, ink when picked, a moss dot under it ---------- */

.dt .dt-nav{background:var(--nav-glass);-webkit-backdrop-filter:saturate(1.4) blur(18px);backdrop-filter:saturate(1.4) blur(18px);
  border-top:1px solid var(--hairline);padding:7px 8px calc(8px + env(safe-area-inset-bottom,0px))}
.dt .dt-nav > button{gap:4px;padding:6px 0 12px;border-radius:var(--r-md);color:var(--light);font-size:11px;font-weight:600;letter-spacing:.01em;text-transform:none;
  transition:color 220ms var(--ease)}
.dt .dt-nav > button svg{width:24px;height:24px;stroke-width:1.7}
.dt .dt-nav > button.on,.dt .dt-nav > button.on svg{color:var(--text)}
.dt .dt-nav > button.on svg{stroke-width:2}
.dt .dt-nav > button.on::before{content:none}
.dt .dt-nav > button.on::after{content:"";position:absolute;left:50%;bottom:2px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;background:var(--accent)}
.dt .dt-nav > button.dt-fx::after{animation:dt-dot 380ms var(--spring)}
.dt .dt-nav > button.dt-fx svg{animation:dt-hop 380ms var(--spring)}
@keyframes dt-dot{from{transform:scale(0)}}
@keyframes dt-hop{40%{transform:translateY(-2px) scale(1.06)}}
@media (hover:hover){.dt .dt-nav > button:not(.on):hover{color:var(--text-2)}}

/* a new tab, or Today and Yesterday, comes in from a little below */
.dt .dt-enter{animation:dt-enter 360ms var(--ease) both}
@keyframes dt-enter{from{opacity:0;transform:translateY(8px)}}

/* ---------- his week ---------- */

.dt .dt-wk{grid-template-columns:minmax(0,1fr) repeat(7,16px) 40px;gap:11px 5px;margin-top:10px;padding:16px 14px 14px 16px;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--lift);font-size:13px}
.dt .dt-wk .h{font-size:10.5px;font-weight:700;color:var(--muted)}
.dt .dt-wk .nm{color:var(--text-2);font-weight:500}
.dt .dt-dot{width:16px;height:16px;border:0;background:var(--faint)}
.dt .dt-dot.n{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ring-0)}
.dt .dt-dot.f{background:var(--faint);box-shadow:none}
.dt .dt-dot.y{background:var(--done);box-shadow:none}
.dt .dt-dot.t{box-shadow:0 0 0 1.5px var(--surface),0 0 0 2.5px var(--ring-today)}
.dt .dt-dot.n.t{box-shadow:inset 0 0 0 1.5px var(--ring-0),0 0 0 1.5px var(--surface),0 0 0 2.5px var(--ring-today)}
.dt .dt-cnt{font-size:12px;font-weight:700;color:var(--text)}
.dt .dt-slips{font-size:12.5px;color:var(--muted);margin:12px 4px 0}
.dt .dt-bar2{height:7px;background:var(--track)}
.dt .dt-bar2 span{background:var(--done)}
.dt .dt-big b{font-stretch:100%;font-size:54px;letter-spacing:-.02em}
.dt .dt-tiles span{background:var(--miss-fill);box-shadow:var(--miss-ring)}
.dt .dt-tiles span.f{background:var(--tile-future);box-shadow:none}
.dt .dt-tiles span.y{background:var(--done);box-shadow:none}
.dt .dt-pat span{border-radius:6px;background:var(--track)}
.dt .dt-pat.low span{background:var(--fill-strong)}
.dt .dt-wins li{border-top-color:var(--hairline)}
.dt .dt-read{border:0;border-radius:var(--r-lg);background:var(--surface);padding:14px;box-shadow:var(--line)}
.dt .dt-app .dt-read .dt-sub{margin:0}
.dt .dt-mini i{background:var(--surface);box-shadow:inset 0 0 0 1.2px var(--ring-0)}
.dt .dt-mini i.y{background:var(--done);box-shadow:none}
.dt .dt-mini i.t{box-shadow:inset 0 0 0 1.5px var(--text)}
.dt .dt-mini i.f{background:var(--future-fill);box-shadow:inset 0 0 0 1px var(--future-ring)}

/* ---------- his setup: each list in a white card, a line between items ---------- */

.dt .dt-app .dt-list2{list-style:none;margin:8px 0 0;padding:4px 16px;background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--lift);font-size:14.5px;color:var(--text)}
.dt .dt-app .dt-list2 li{margin:0;padding:12px 0;border-top:1px solid var(--hairline)}
.dt .dt-app .dt-list2 li:first-child{border-top:0}
.dt .dt-app .dt-list2 li small{margin-top:3px}
.dt .dt-sw{border-top-color:var(--hairline)}
.dt .dt-sw-k{background:var(--track);transition:background-color 220ms var(--ease)}
.dt .dt-sw-k::after{box-shadow:var(--shadow-knob);transition:left 260ms var(--spring)}
.dt .dt-ver{color:var(--muted)}

/* ---------- vision ---------- */

.dt .dt-vs{border-radius:var(--r-xl);padding:10px;margin:8px 0 2px;background:var(--ink-card);box-shadow:var(--shadow-ink-2)}
.dt .dt-vs-row{gap:5px}
.dt .dt-vs-row .dt-tile{border-radius:12px}
.dt .dt-app .dt-vs-north{font-size:16px;font-weight:600;line-height:1.35;color:var(--sand);margin:10px 6px 2px}
.dt .dt-vs-cta{margin:4px 6px 4px;font-size:10.5px;letter-spacing:.12em;color:var(--moss-light)}
.dt .dt-board{gap:6px}
.dt .dt-cell{border-radius:var(--r-md);background:var(--placeholder)}
.dt .dt-empty{border-color:var(--dash-line);border-radius:var(--r-md);color:var(--muted)}
.dt .dt-app .dt-north{font-family:var(--head);font-stretch:100%;font-size:19px;font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--text)}
.dt .dt-future{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--lift);padding:14px 16px}
.dt .dt-sheet-in{border-radius:24px 24px 0 0;background:var(--sheet)}
.dt .dt-sheet-h b{font-stretch:100%;text-transform:none;font-size:21px;letter-spacing:-.012em}
.dt .dt-lib{gap:5px}
.dt .dt-lib button{border-radius:12px}

/* ---------- first time ---------- */

.dt .dt-steps span{border-top:3px solid var(--track);border-radius:2px;color:var(--muted);letter-spacing:.06em}
.dt .dt-steps span.on{border-color:var(--accent);color:var(--text)}
.dt .dt-steps span.done{border-color:var(--fill-strong);color:var(--muted)}

/* ---------- Sarah's view on a phone ---------- */

.dt .dt-metrics{gap:8px;margin:0 0 14px}
.dt .dt-m{background:var(--surface);border-radius:var(--r-lg);padding:13px 13px 12px;box-shadow:var(--lift)}
.dt .dt-m b{font-stretch:100%;font-size:28px;letter-spacing:-.02em;line-height:1.05}
.dt .dt-m span{margin-top:5px;font-size:11px;font-weight:600;letter-spacing:.02em;text-transform:none;color:var(--muted)}
.dt .dt-m.k{background:var(--fill-strong);box-shadow:var(--shadow-ink-3)}
.dt .dt-m.k b{color:var(--on-fill)}
.dt .dt-m.k span{color:var(--on-fill-2)}

.dt .dt-card.dt-list{padding:2px 14px}
.dt .dt-tap{margin:12px 2px 2px;font-size:12.5px}
.dt .dt-cl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:2px;align-items:center;padding:14px 0 14px 54px;border-top:1px solid var(--hairline);
  border-radius:0;transition:background-color 160ms var(--ease)}
.dt .dt-cl:first-child,.dt .dt-tap + .dt-cl{border-top:0}
/* as in v1: his name and the chip on one line, the detail and the button under them, the whole width */
.dt .dt-cl > div,.dt .dt-cl > div > p{display:contents}
.dt .dt-cl small{grid-column:1 / -1}
.dt .dt-cl .dt-act,.dt .dt-cl .dt-actnote{grid-column:1 / -1;justify-self:start}
.dt .dt-cl > .dt-chip{grid-column:2;grid-row:1}
.dt .dt-cl p{font-size:15px;font-weight:600;line-height:1.3;color:var(--text)}
.dt .dt-cl small{margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--muted);font-weight:400}
.dt .dt-av{position:absolute;left:0;top:12px;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
  background:var(--track);color:var(--text);font:700 13px/1 Manrope,system-ui,sans-serif;letter-spacing:.04em}
.dt .dt-cl:has(.dt-chip.quiet) .dt-av{background:var(--fill-strong);color:var(--on-fill)}
.dt .dt-cl:has(.dt-chip.back) .dt-av{background:var(--accent-fill);color:var(--on-accent)}
.dt .dt-cl:has(.dt-chip.slip) .dt-av{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--text)}
.dt .dt-cl:has(.dt-chip.new) .dt-av,.dt .dt-cl:has(.dt-chip.setup) .dt-av{background:transparent;box-shadow:inset 0 0 0 1px var(--ring-0);color:var(--muted)}

.dt .dt-chip{padding:5px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:700;letter-spacing:.01em;text-transform:none}
.dt .dt-chip.quiet{background:var(--fill-strong);color:var(--on-fill);box-shadow:none}
.dt .dt-chip.back{background:var(--accent-fill);color:var(--on-accent)}
.dt .dt-chip.ok{background:var(--accent-tint);color:var(--accent-ink)}
.dt .dt-chip.slip{padding:3.5px 8.5px}
.dt .dt-chip.away{background:var(--track);color:var(--text)}
.dt .dt-chip.new,.dt .dt-chip.setup{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--ring-0)}

.dt .dt-act,.dt button.dt-act{position:relative;display:inline-flex;align-items:center;min-height:34px;margin-top:9px;padding:0 14px;border-radius:var(--r-pill);
  background:var(--fill-strong);color:var(--on-fill);font-size:12.5px;font-weight:600;text-decoration:none}
.dt .dt-act::before{content:"";position:absolute;inset:-5px 0}
.dt .dt-act.g,.dt button.dt-act.g{background:var(--accent-tint);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line-2)}
.dt .dt-actnote{margin-top:6px;font-size:12px;color:var(--accent)}
.dt .dt-det{margin:0 0 12px 54px;padding:8px 12px;border-radius:var(--r-md);background:var(--surface-2);font-size:12.5px;color:var(--text-2)}
.dt .dt-det div{padding:5px 0;border-top:1px solid var(--hairline-soft)}
.dt .dt-det div:first-child{border-top:0}
.dt .dt-fri{background:var(--surface-2);border-radius:var(--r-md);padding:12px 14px;font-size:13px;line-height:1.5}

/* ---------- a computer (from 900 px): white menu and panel, the page in sand ---------- */

@container (min-width:900px){
  .dt.dt-is-app > .dt-nav{background:var(--surface);-webkit-backdrop-filter:none;backdrop-filter:none;border-top:0;border-right:1px solid var(--hairline);padding:28px 14px 22px}
  .dt.dt-is-app > .dt-nav > :is(button,a){gap:12px;padding:10px 14px;border-radius:var(--r-md);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--muted)}
  .dt.dt-is-app > .dt-nav > :is(button,a).on{background:var(--surface-2);color:var(--text)}
  .dt.dt-is-app > .dt-nav > :is(button,a).on svg{color:var(--text)}
  .dt.dt-is-app > .dt-nav > button.on::after{left:auto;right:14px;bottom:auto;top:50%;margin:-2.5px 0 0}
  .dt .dt-brand{border-bottom-color:var(--hairline)}
  .dt .dt-brand svg,.dt .dt-hero-mark svg{border-radius:10px}
  .dt .dt-navfoot{border-top-color:var(--hairline)}
  .dt .dt-navnorth small{letter-spacing:.12em;color:var(--muted)}
  .dt .dt-app > .dt-bar{padding:34px 44px 20px}
  .dt .dt-auth > .dt-bar{padding:0 2px 8px}
  .dt .dt-bar h1{font-size:44px;letter-spacing:-.022em}
  .dt .dt-score .dt-ring{width:72px;height:72px}
  .dt .dt-bar .dt-score .dt-ring b{font-size:26px}
  .dt .dt-app > .dt-body{padding:22px 44px 56px}
  .dt .dt-auth > .dt-body{padding:16px 0 0}
  .dt .dt-app .dt-label{font-size:23px}
  .dt .dt-auth .dt-bar h1{font-size:40px}
  .dt .dt-auth{background:var(--auth)}
  .dt .dt-hero-h{text-transform:none;font-stretch:100%;letter-spacing:-.02em;line-height:1}
  .dt .dt-hero-h b{font-size:clamp(48px,5.2cqi,84px)}
  .dt .dt-hero-h span{font-weight:300;font-size:clamp(30px,3.2cqi,52px)}
}
.dt.dt-wide .dt-app > .dt-bar h1{font-size:48px}
.dt.dt-wide .dt-app .dt-stmt{font-size:26px;padding:46px 26px 18px}
.dt.dt-wide .dt-app .dt-stmt::before{top:20px;left:26px}
.dt.dt-wide.dt-is-app > .dt-rail{background:var(--surface);border-left:1px solid var(--hairline)}
.dt .dt-rail .dt-card:not(.dt-prompt){background:transparent;box-shadow:none;border-radius:0}
.dt .dt-rail .dt-card + .dt-card,.dt .dt-rail .dt-wkp + .dt-card{border-top-color:var(--hairline)}
.dt .dt-rail .dt-chipb:not(.on),.dt .dt-rail .dt-ghost,.dt .dt-rail .dt-plus,.dt .dt-rail .dt-val,.dt .dt-rail .dt-future,.dt .dt-rail .dt-read{background:var(--surface)}
.dt .dt-rail .dt-note,.dt .dt-rail .dt-prompt{background:var(--surface-2);box-shadow:none}
.dt .dt-rail .dt-bar2{background:var(--track)}
.dt .dt-rail .dt-tiles span{background:var(--miss-fill)}
.dt .dt-rail .dt-tiles span.f{background:var(--tile-future)}
.dt .dt-rail .dt-tiles span.y{background:var(--done)}
.dt .dt-wkdays i{background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--ring-0)}
.dt .dt-wkdays li.y i{background:var(--done) var(--check) center/56% no-repeat;box-shadow:none}
.dt .dt-wkdays li.t i{box-shadow:inset 0 0 0 2px var(--text)}
.dt .dt-wkdays li.f i{background:var(--faint);box-shadow:none}
.dt .dt-wkdays small{letter-spacing:.06em}
.dt .dt-wkp .dt-big b{font-size:60px}
.dt.dt-wide .dt-wk{grid-template-columns:minmax(160px,1fr) repeat(7,34px) 68px;gap:10px 8px;padding:20px 22px 18px}
.dt.dt-wide .dt-dot{width:26px;height:26px}
.dt.dt-wide .dt-dot.y{background:var(--done) var(--check) center/58% no-repeat}

/* Sarah's table on a computer: in a white card on the sand page */
.dt .dt-filters .dt-chipb{min-height:38px}
.dt .dt-filters .dt-chipb b{opacity:.7}
.dt .dt-tbl{border-collapse:separate;border-spacing:0;background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--lift);overflow:hidden}
.dt .dt-tbl th{padding:16px 12px 12px;border-bottom:1px solid var(--hairline-head);letter-spacing:.1em}
.dt .dt-tbl td{border-bottom:1px solid var(--hairline-soft)}
.dt .dt-tbl tbody tr:last-child td{border-bottom:0}
.dt .dt-tbl tbody tr.sel{background:var(--surface-2)}
.dt .dt-pn-name{font-stretch:100%;text-transform:none;font-size:30px;line-height:1.1;letter-spacing:-.02em}
.dt .dt-pn-lines > div{border-bottom-color:var(--hairline)}
.dt .dt-frisec{border-top-color:var(--hairline-firm)}
@media (hover:hover){
  .dt .dt-row:hover{box-shadow:var(--lift-2)}
  .dt .dt-row.on:hover{box-shadow:inset 0 0 0 1px var(--border)}
  .dt .dt-fold .dt-row:not(.on):hover,.dt .dt-rail .dt-row:not(.on):hover{box-shadow:inset 0 0 0 1px var(--ring-0)}
  .dt .dt-row:hover .dt-ck{border-color:var(--muted)}
  .dt .dt-brk:not(.on):hover{box-shadow:inset 0 0 0 1px var(--ring-hover)}
  .dt .dt-fold:hover{box-shadow:var(--lift-2)}
  .dt .dt-fold-h:hover .dt-chev{background:var(--track)}
  .dt .dt-save:not([disabled]):hover{background:var(--fill-strong-hover)}
  .dt .dt-copy:hover,.dt .dt-btn2:hover{background:var(--fill-strong);color:var(--on-fill)}
  .dt .dt-chipb:not(.on):hover,.dt .dt-plus:hover{box-shadow:inset 0 0 0 1px var(--ring-0)}
  .dt .dt-cl:hover{background:color-mix(in srgb,var(--surface-2) 45%,var(--surface))}
}

/* Reduced motion (an iPhone setting, and Windows with "Show animations" off, as on Tien's laptop):
   nothing slides, pops or turns. The check, a new tab and a new day fade in, and the rings still fill. */
@media (prefers-reduced-motion:reduce){
  .dt .dt-row:active,.dt .dt-save:active,.dt .dt-fold-h:active{transform:none}
  .dt .dt-row.dt-fx,.dt .dt-row:not(.on).dt-fx .dt-ck,.dt .dt-nn:not(.on) .dt-nnck.dt-fx .dt-ck,.dt .dt-nav > button.dt-fx svg{animation:none}
  .dt .dt-row.on.dt-fx .dt-ck,.dt .dt-nn.on .dt-nnck.dt-fx .dt-ck{animation:dt-fade 320ms var(--ease) both}
  .dt .dt-row.on.dt-fx .dt-ck::before,.dt .dt-nn.on .dt-nnck.dt-fx .dt-ck::before{content:none}
  .dt .dt-chipb.dt-fx,.dt .dt-nav > button.dt-fx::after{animation:dt-fade 260ms var(--ease)}
  .dt .dt-seg.dt-fx::before,.dt .dt-seg.dt-fx:has(> button:last-child.on)::before{animation:dt-fade 260ms var(--ease)}
  .dt .dt-enter{animation:dt-fade 300ms var(--ease) both}
  .dt .dt-chev,.dt .dt-fold-b,.dt .dt-fold.open .dt-fold-b,.dt .dt-sw-k::after{transition:none}
}
@keyframes dt-fade{from{opacity:0}}

/* ---------- 19-oct: Today in three parts (tracker.js, dayParts). The numbers sit on the left, every check stays
   on the right. A part's name, its count and "Now" share one line; Sarah's words go under it. ---------- */
.dt .dt-step{margin-top:22px}
.dt .dt-step:first-child{margin-top:0}
.dt .dt-step-b > :first-child{margin-top:0}
.dt .dt-step-n{margin-top:16px;background:var(--surface);color:var(--text-2);box-shadow:var(--line);font-size:11.5px}
.dt .dt-fold .dt-step-n,.dt .dt-rail .dt-step-n{background:var(--surface-2);box-shadow:none}
.dt .dt-step.h .dt-step-n{margin-top:0}
.dt .dt-step.c .dt-step-n{margin-top:14px}
.dt .dt-step-h{font-family:var(--head);font-stretch:100%;font-size:16px;font-weight:650;letter-spacing:-.006em;color:var(--text)}
.dt .dt-step-h small{font-family:Manrope,system-ui,sans-serif;font-size:12.5px;font-weight:600;letter-spacing:0;color:var(--muted)}
.dt .dt-app .dt-step-h + .dt-hint{margin:2px 2px 0}
.dt .dt-app .dt-hint.dt-after{margin:8px 2px 0}
.dt .dt-app .dt-step .dt-stmt{margin-bottom:10px}
.dt .dt-step .dt-chips .dt-sub{margin-top:14px}
.dt .dt-step .dt-chips:first-of-type .dt-chiprow{margin-top:8px}
.dt .dt-now{background:var(--accent-tint);color:var(--accent-ink);font-size:10px;letter-spacing:.12em}
.dt .dt-fold .dt-now{height:18px;padding:0 7px}
.dt .dt-part-h{margin:0 2px 18px}
.dt .dt-part-l{font-size:14px;color:var(--muted)}
.dt .dt-part-f .dt-fold-t small{white-space:normal}
.dt .dt-fold-n{font-size:12.5px;color:var(--muted)}
.dt .dt-plain{border:0;box-shadow:inset 0 0 0 1px var(--border);border-radius:var(--r-lg);padding:15px 16px;font-size:14.5px;color:var(--text-2)}
.dt .dt-jn{margin:0 4px 4px;font-size:14px;color:var(--text-2)}
.dt .dt-jn small{color:var(--muted)}
.dt .dt-jr-open{min-height:40px;margin-top:4px;color:var(--text);font-weight:600}
.dt .dt-go::after{content:"";flex:none;order:5;width:8px;height:8px;margin:0 8px 0 0;border-top:1.8px solid var(--text);border-right:1.8px solid var(--text);transform:rotate(45deg)}
.dt .dt-wkp .dt-big.dt-big-new b{font-size:40px;line-height:1}
.dt .dt-bar .dt-score .dt-ring b.dt-nw{font-size:15px}
.dt.dt-wide .dt-parts .dt-part-h{min-height:58px}

/* ===== 19-oct (i2): reading in pages, "Slipped?" and the bedtime note, in the 2.3 look ===== */
.dt .dt-read-n{margin-top:6px;font-size:12.5px;color:var(--muted)}
.dt .dt-page{font-size:13px;color:var(--text)}
.dt .dt-read-t{font-size:12.5px;color:var(--accent-ink)}
.dt .dt-brk:not(.on) .dt-tag.dt-slipq{background:transparent;box-shadow:inset 0 0 0 1px var(--ring-0);color:var(--muted)}
.dt .dt-plain{box-shadow:none;border-radius:0;padding:0 2px;font-size:14px;line-height:24px;color:var(--muted)}

/* ===== 19-oct (i3): alignment and spacing (research-2026-10-19/05-critic-visual.md, F1-F18 and its section 2) =====
   Two left edges in a column: A, the column edge, for headings, hints, subs, notes, cards, rows, inputs, chips, buttons
   and links; B = A + 16 for the text inside rows, inputs and cards (the two ink cards keep their own inset). A part of
   Today is a column too: its numbers sit on A, and each step's title, hints and rows on the step's own edge.
   Spaces from 4, 8, 12, 16, 24, 32. Heights: 44 chips, pills, small buttons and links; 52 fields and buttons; 56 rows.
   Corners from --r-*. Sizes and spaces only: no colors, no words, no behavior. */

/* F1: no side margins on text blocks, so they start on the column edge */
.dt .dt-label,.dt .dt-app .dt-label,.dt .dt-hint,.dt .dt-app .dt-hint,.dt .dt-sub,.dt .dt-foot,.dt .dt-slips,.dt .dt-lead,
.dt .dt-flabel,.dt .dt-links,.dt .dt-ver,.dt .dt-addmore,.dt .dt-cuelink,.dt .dt-tap,.dt .dt-err,.dt .dt-msg,.dt .dt-step-h,
.dt .dt-jn,.dt .dt-jr-open,.dt .dt-fold-in > .dt-card > .dt-hint{margin-left:0;margin-right:0}
.dt .dt-sw{padding-left:0;padding-right:0}

/* F2: one edge in the side menu, at 28 (14 the menu, 14 the item): logo, icons, North Star, Sign out */
.dt .dt-brand,.dt .dt-navfoot{padding-left:14px;padding-right:14px}

/* F5: the phone header on the page's 16. The date and the title keep their place from tab to tab: the text takes
   the height of the week ring, whether the ring is there or not. */
.dt .dt-bar{padding-left:16px;padding-right:16px}
.dt .dt-app > .dt-bar > div:first-child{display:flex;flex-direction:column;justify-content:center;min-height:62px}

/* between sections: 24 on a phone, 32 on a computer; in the panel 24, the line, 24 */
.dt .dt-app .dt-card:not(.dt-prompt){margin-bottom:24px}
.dt .dt-rail .dt-card:not(.dt-prompt),.dt .dt-rail .dt-wkp{margin-bottom:24px}
@container (min-width:900px){
  .dt .dt-auth > .dt-bar{padding:0 0 8px}
  .dt .dt-app > .dt-bar > div:first-child{min-height:72px;justify-content:flex-start}
  .dt .dt-app .dt-card:not(.dt-prompt){margin-bottom:32px}
}

/* F3, F10: the panel keeps one width (its scrollbar's place is always there) and its first heading starts level
   with the date line of the page header. The page does the same on a computer, so a tab that fits the screen
   doesn't move everything 15 px. */
.dt .dt-rail-in{scrollbar-gutter:stable;padding-top:34px}
@media (min-width:900px){html{scrollbar-gutter:stable}}

/* F4: "Every tap saves on its own." 12 under its card, 24 over the next */
.dt .dt-rail .dt-saved{margin:-12px 0 24px}

/* F6, F7: a sub or a field name 8 over its control, a section's hint 12 over its first control, rows 8 apart */
.dt .dt-sub{margin-top:24px;margin-bottom:8px}
.dt .dt-app .dt-hint,.dt .dt-rail .dt-hint{margin-bottom:12px}
.dt .dt-flabel{margin-bottom:8px}
.dt .dt-times{gap:12px}
.dt .dt-times .dt-flabel{margin:0}
.dt .dt-times .dt-in{margin-top:8px}
.dt .dt-gap{margin-top:16px}
.dt .dt-in + .dt-in,.dt .dt-edrow,.dt .dt-addwin,.dt .dt-book-n,.dt .dt-tiles,.dt .dt-edit-btns{margin-top:8px}
.dt .dt-foot,.dt .dt-slips{margin-top:8px}
.dt .dt-links,.dt .dt-ver,.dt .dt-addmore,.dt .dt-cuelink{margin-top:0}
.dt .dt-lead{margin-top:0;margin-bottom:24px}
.dt .dt-seg{margin:0 0 16px}
.dt .dt-note,.dt .dt-backmsg{margin-bottom:16px}
.dt .dt-fold{margin-top:8px}
/* a copy button on its own line takes the block's spacing: 12 under a hint, 8 under a list */
.dt .dt-copy{display:block}

/* F8, F9: one height per kind of control, and the text in every field 16 in from its edge */
.dt input,.dt select{min-height:52px}
.dt input,.dt textarea{padding-left:16px;padding-right:16px}
.dt select{padding-left:16px}
.dt .dt-nn,.dt .dt-nn .dt-in,.dt .dt-nnck{min-height:56px}
.dt .dt-btn2,.dt .dt-ghost{min-height:52px}
.dt .dt-step-b > .dt-ghost:first-child{min-height:56px}
.dt .dt-jr-open{min-height:44px}

/* F11: Edit on the right of its card's heading line, like "1 of 3 done". Its tap area stays 44 px tall and about
   50 wide, and the line doesn't get taller. */
.dt .dt-sec-h > .dt-link{flex:none;min-height:44px;margin:-13px -12px -13px auto;padding:0 12px}

/* F12: on a very wide screen the page stops at about 1180 px, its header too */
.dt.dt-xwide .dt-app > .dt-bar,.dt.dt-xwide .dt-app > .dt-body{padding-right:max(44px,calc(100% - 1224px))}

/* F13: in an open part on a phone, the numbers start on the ring's edge */
.dt .dt-app .dt-fold-in > .dt-card{margin:0;padding:0 16px 16px}

/* F14: Vision's two columns as wide as on the other tabs */
.dt.dt-xwide .dt-grid-board{grid-template-columns:repeat(2,minmax(0,1fr))}

/* F15: habit names in the week grid 16 in, like the text in a row */
.dt .dt-wk,.dt.dt-wide .dt-wk{margin-top:12px;padding:16px}

/* F16: text 16 in inside notes, the reading card and Sarah's boxes */
.dt .dt-note,.dt .dt-backmsg{padding:12px 16px}
.dt .dt-backmsg{gap:8px}
.dt .dt-read{gap:12px;padding:16px}
.dt .dt-read .dt-sub{margin:0}
.dt .dt-read .dt-bar2,.dt .dt-read-n,.dt .dt-read-t{margin-top:8px}
.dt .dt-fri,.dt .dt-err{padding:12px 16px}
.dt .dt-det{padding:8px 16px}
.dt .dt-m{padding:12px 16px}
.dt .dt-card.dt-list{padding:2px 16px}
/* Sarah's table: text 16 in from both sides of its card, 8 + 8 between columns, so it no longer runs 0.7 px past
   its column at 1521 px (its columns can't get narrower than their words) */
.dt .dt-tbl th,.dt .dt-tbl td{padding-left:8px;padding-right:8px}
.dt .dt-tbl th:first-child,.dt .dt-tbl td:first-child{padding-left:16px}
.dt .dt-tbl th:last-child,.dt .dt-tbl td:last-child{padding-right:16px}

/* F17: Friday wins as wide as the table above them */
.dt .dt-frisec{max-width:none}

/* F18 and the other corners that were typed in */
.dt .dt-app .dt-stmt{border-radius:var(--r-xl)}
.dt .dt-vs-row .dt-tile,.dt .dt-lib button,.dt .dt-brand svg,.dt .dt-hero-mark svg{border-radius:var(--r-sm)}
.dt .dt-sheet-in{border-radius:var(--r-xl) var(--r-xl) 0 0}

/* Today's parts: the header on the column edge with "Now" level with the name, 12 over the first step; a step
   every 24; titles on the step's edge, 4 over their hint and 8 over their first row, field or chips. On a phone the
   number column gives 4 px back to the rows (24 + 8). */
.dt .dt-part-h{margin:0 0 12px}
.dt .dt-part-r .dt-label,.dt .dt-app .dt-part-r .dt-label{margin:0}
.dt.dt-wide .dt-parts .dt-part-h{min-height:0}
.dt .dt-step{margin-top:24px;column-gap:8px}
.dt .dt-step:first-child{margin-top:0}
.dt .dt-step-b .dt-step-h + .dt-hint{margin:4px 0 0}
.dt .dt-app .dt-hint.dt-after,.dt .dt-rail .dt-hint.dt-after{margin:8px 0 0}
.dt .dt-step-h + .dt-in{margin-top:8px}
.dt .dt-step .dt-chips .dt-sub{margin-top:16px}
.dt .dt-app .dt-step .dt-stmt{margin-bottom:8px}
.dt .dt-jn{margin-bottom:8px}
.dt .dt-step.c:has(> .dt-step-b > .dt-read:first-child) .dt-step-n{margin-top:12px}
.dt .dt-fold .dt-now{padding:0 8px}
.dt .dt-row .dt-tag.dt-slipq{border:0}
.dt .dt-plain{padding:0}
/* the page field opens inside its line: 36 tall (it was 35), 8 over and under, so neither the card nor the bar moves */
.dt .dt-page-in{min-height:36px;height:36px;margin:-8px 0;padding:0 16px}
@container (min-width:900px){
  .dt .dt-step{column-gap:12px}
}

/* ===== 19-oct (i4): Appearance. In Me the picked one is the ink chip (sand on a dark page); next to Refresh it's
   the bold link without its line. Colors come from the tokens on :root (tracker.css). ===== */
.dt .dt-theme .dt-link.on{color:var(--text);font-weight:700;text-decoration:none}
.dt .dt-theme-l{letter-spacing:.12em}