/* Habit Tracker v2 · The Identity Collective. Sarah's brand (HANDOVER.md, 13-oct-2026): a white page, sand cards, oat lines,
   ink text and buttons, and moss as the only accent, used sparingly. Archivo at 70% width for headlines, Manrope for the rest.
   --muted and --light are ink mixed with sand, for hints and placeholders.
   Corners: square in the brand, rounded in the tracker since 17-oct. Sarah, Week End Call 16-oct: "the circles are
   user-friendly, the rounded edges". Every check and every day is a circle; --r-* below sets every other corner.
   v1 (the demo Sarah saw on 9-oct) keeps the old black and gold in ../../app/tracker.css. */
/* ===== 19-oct (i4): colors by job, light and dark =====
   Every color the tracker paints comes from a token here, defined once on :root so html, .page, demo.html and both
   stylesheets share them. A rule names a job (--surface, --text, --fill-strong...), never a color, so dark mode only
   swaps the tokens. The brand palette under them stays the same in both modes; rules use it only on the ink cards,
   on photos and in the photo viewer.
   Light is the 2.3 look, value for value (where tracker.css and tracker-skin.css both set --muted, --light, --check
   and --dash, the skin's won; those are the ones kept). Dark: research-2026-10-19/04-critic-ux.md, section 4.
   Which one shows: light, whatever the phone or computer is set to. data-theme="dark" on <html> = Dark, picked by hand
   in Me, on the coach view or above the demo's phones (theme.js sets it before the first paint, from ht_theme on this
   device). 20-oct (2.5): Sarah, Strategy Call 19-oct, "dark with white text is harder to read". */
:root{
  --ink:#171716;--ink-2:#2B2A27;--deep:#0F0F0E;--moss:#5A6B4A;--moss-2:#4C5B3E;--moss-light:#B5C2A3;--moss-tint:#E4E8DC;--moss-ink:#33402A;
  --sand:#F3EDE3;--oat:#E6DCCB;--sunk:#ECE5D8;--white:#fff;
  color-scheme:light;
  /* surfaces */
  --page:var(--sand);              /* behind everything */
  --surface:var(--white);          /* cards, rows, folds; the menu and the panel on a computer */
  --surface-2:var(--sand);         /* small fills on a card: chevrons, step numbers, Sarah's boxes, a chosen menu item */
  --surface-up:var(--white);       /* the chosen half of Today / Yesterday */
  --row-done:var(--sunk);          /* a done row on the page */
  --row-done-in:var(--sand);       /* a done row inside a card, a part of the day or the panel */
  --field:var(--white);            /* inputs, text boxes, the select */
  --sheet:var(--sand);             /* the photo library sheet */
  --auth:var(--sand);              /* the form half of sign-in on a computer */
  --ink-card:var(--ink);           /* his statement, the vision strip, the brand half of sign-in */
  --placeholder:var(--oat);        /* a photo that hasn't loaded, an empty board cell, the shimmer */
  --placeholder-2:var(--sand);     /* the library's photo tiles, the shimmer's light band */
  /* text */
  --text:var(--ink);               /* headings, rows, values */
  --text-2:var(--ink-2);           /* body copy */
  --muted:#5E5A54;                 /* hints, counts, small caps */
  --light:#8F8A82;                 /* placeholders, the tab bar, a cue on a done row */
  --selection:var(--oat);
  /* lines, rings and tints */
  --hairline:rgba(23,23,22,.07);       /* between items in a list, the menu, the panel */
  --hairline-soft:rgba(23,23,22,.06);  /* rows of Sarah's table, her detail box */
  --hairline-firm:rgba(23,23,22,.08);  /* over Friday wins */
  --hairline-head:rgba(23,23,22,.1);   /* under the table's column names */
  --border:var(--oat);                 /* oat lines and outlines */
  --line:inset 0 0 0 1px var(--border);/* a row or a pill on a card: a line instead of a lift */
  --dash-line:#C3B8A8;                 /* dashed "add" buttons, empty board cells */
  --tint-1:rgba(23,23,22,.05);         /* notes, the tag on a row */
  --tint-2:rgba(23,23,22,.06);         /* the Today / Yesterday track */
  --ring-0:#958E84;                    /* an empty check, a missed day */
  --ring-1:rgba(23,23,22,.12);         /* a habit to break before he slips */
  --ring-2:rgba(23,23,22,.16);         /* fields */
  --ring-hover:rgba(23,23,22,.24);
  --ring-today:rgba(23,23,22,.32);     /* today in the week grid */
  --track:var(--oat);                  /* the empty part of a ring or a bar, a quiet chip, a switch that's off */
  --faint:var(--sand);                 /* a day still to come in the week grid and the panel */
  --future-fill:transparent;           /* a day still to come in the small squares */
  --future-ring:var(--oat);
  --miss-fill:var(--oat);              /* a missed day in the 12-week tiles */
  --miss-ring:none;
  --tile-future:var(--oat);            /* a day still to come in the tiles (oat like a missed one in light, as in 2.3) */
  --hover-tint:rgba(255,255,255,.55);  /* a menu item under the mouse */
  /* fills */
  --fill-strong:var(--ink);            /* the main button, a chosen chip, Sarah's quiet signal, the toast */
  --fill-strong-hover:var(--ink-2);
  --on-fill:var(--white);              /* text on it */
  --on-fill-2:rgba(243,237,227,.78);   /* the second line on Sarah's key tile */
  --accent:var(--moss);                /* moss marks and moss text: dots, focus rings, small labels */
  --accent-fill:var(--moss);           /* moss as a large fill, white text on it */
  --on-accent:var(--white);
  --accent-tint:var(--moss-tint);      /* "Now", "came back", the back message */
  --accent-ink:var(--moss-ink);        /* text on the tint */
  --accent-line:rgba(90,107,74,.22);
  --accent-line-2:rgba(90,107,74,.3);
  --done:var(--moss);                  /* the done disc, ring arcs, bars, done days */
  --on-done:var(--white);              /* its tick (drawn in --check) */
  --done-halo:rgba(90,107,74,.16);
  --glow:rgba(90,107,74,.55);          /* the moss glow on his statement */
  --knob:var(--white);
  --nav-glass:rgba(243,237,227,.86);   /* the frosted tab bar on a phone */
  /* shadows. On dark they become a 1 px hairline: the lighter surface does the lifting. */
  --lift:0 0 0 1px rgba(23,23,22,.04),0 1px 2px rgba(23,23,22,.05),0 6px 16px -8px rgba(23,23,22,.16);
  --lift-2:0 0 0 1px rgba(23,23,22,.06),0 2px 4px rgba(23,23,22,.06),0 12px 24px -12px rgba(23,23,22,.24);
  --shadow-1:0 1px 2px rgba(23,23,22,.08),0 3px 10px -4px rgba(23,23,22,.2);  /* the chosen half of Today / Yesterday */
  --shadow-2:0 6px 16px -8px rgba(23,23,22,.2);                               /* a slipped habit */
  --shadow-ink:0 18px 32px -20px rgba(23,23,22,.7);                           /* his statement */
  --shadow-ink-2:0 16px 30px -18px rgba(23,23,22,.7);                         /* the vision strip */
  --shadow-ink-3:0 14px 26px -16px rgba(23,23,22,.7);                         /* Sarah's key tile */
  --shadow-btn:0 10px 20px -12px rgba(23,23,22,.65);
  --shadow-knob:0 1px 3px rgba(23,23,22,.25);
  --shadow-toast:0 6px 24px rgba(23,23,22,.25);
  /* the tick on a done disc and the dash on a slip, in --on-done and --on-fill */
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
}
/* Dark, only when picked by hand. Until 2.4 the same values also sat under @media (prefers-color-scheme:dark), so a
   phone set to dark turned the page dark; 20-oct (2.5) took that copy out (Sarah: light reads better).
   The page in ink, cards in ink-2, done in light moss with an ink tick, the main button in sand with ink text, moss
   only for large fills (3.1:1 on ink is too low for text). Contrast pairs: research-2026-10-19/14-i4-notes.md. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --page:var(--ink);--surface:var(--ink-2);--surface-2:#22211F;--surface-up:#3A3834;--row-done:#22211F;--row-done-in:#22211F;
  --field:#22211F;--sheet:var(--ink-2);--auth:var(--ink-2);--ink-card:var(--deep);--placeholder:#33312D;--placeholder-2:#3A3834;
  --text:var(--sand);--text-2:#E6DFD3;--muted:#A39C91;--light:#99928A;--selection:#4A4841;
  --hairline:rgba(243,237,227,.1);--hairline-soft:rgba(243,237,227,.08);--hairline-firm:rgba(243,237,227,.12);--hairline-head:rgba(243,237,227,.16);
  --border:rgba(243,237,227,.14);--dash-line:rgba(243,237,227,.3);--tint-1:rgba(243,237,227,.06);--tint-2:rgba(243,237,227,.08);
  --ring-0:#7D766E;--ring-1:rgba(243,237,227,.18);--ring-2:rgba(243,237,227,.22);--ring-hover:rgba(243,237,227,.32);--ring-today:rgba(243,237,227,.5);
  --track:rgba(243,237,227,.14);--faint:rgba(243,237,227,.1);--future-fill:rgba(243,237,227,.1);--future-ring:transparent;
  --miss-fill:transparent;--miss-ring:inset 0 0 0 1px var(--ring-0);--tile-future:rgba(243,237,227,.1);--hover-tint:rgba(243,237,227,.06);
  --fill-strong:var(--sand);--fill-strong-hover:#E2DACC;--on-fill:var(--ink);--on-fill-2:rgba(23,23,22,.72);
  --accent:var(--moss-light);--accent-fill:var(--moss);--on-accent:var(--white);--accent-tint:#313828;--accent-ink:#C9D4B8;
  --accent-line:rgba(181,194,163,.22);--accent-line-2:rgba(181,194,163,.3);
  --done:var(--moss-light);--on-done:var(--ink);--done-halo:rgba(181,194,163,.16);--glow:rgba(90,107,74,.85);--knob:var(--sand);
  --nav-glass:rgba(23,23,22,.86);
  --lift:0 0 0 1px rgba(243,237,227,.06);--lift-2:0 0 0 1px rgba(243,237,227,.16);
  --shadow-1:0 0 0 1px rgba(243,237,227,.1);--shadow-2:0 0 #0000;
  --shadow-ink:0 0 0 1px rgba(243,237,227,.1);--shadow-ink-2:0 0 0 1px rgba(243,237,227,.1);--shadow-ink-3:0 0 #0000;
  --shadow-btn:0 0 #0000;--shadow-knob:0 1px 3px rgba(0,0,0,.45);--shadow-toast:0 8px 24px rgba(0,0,0,.5);
  --check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171716' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --dash:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23171716' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M7 12h10'/%3E%3C/svg%3E");
}

.dt{--r-sm:8px;--r-md:12px;--r-lg:16px;--r-pill:999px;
  --head:"Archivo","Arial Narrow",system-ui,sans-serif;
  font-family:"Manrope",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--text);background:var(--surface);font-size:14px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;display:flex;flex-direction:column;min-height:100%}
.dt *{box-sizing:border-box}
.dt :where(button){font:inherit;color:inherit}
.dt :where(p){margin:0}
.dt svg{stroke-linecap:square;stroke-linejoin:miter}

/* header: a moss label with its dot, then the screen name as an Archivo headline */
.dt-bar{background:var(--surface);color:var(--text);border-bottom:1px solid var(--border);padding:16px 18px 14px;padding-top:calc(16px + env(safe-area-inset-top,0px));display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.dt-bar small{display:flex;align-items:center;gap:7px;color:var(--accent);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;line-height:1.2;margin-bottom:8px}
.dt-bar small::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dt-bar h1{display:block;margin:0;font-family:var(--head);font-stretch:70%;font-weight:700;font-size:30px;line-height:.95;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.dt-score{text-align:right;flex:none}
.dt-score span{display:block;font-family:var(--head);font-stretch:70%;font-weight:700;font-size:30px;line-height:.95;text-transform:uppercase;color:var(--text)}
.dt-score small{display:block;margin:5px 0 0;color:var(--text);font-size:10px;font-weight:600;letter-spacing:.14em}
.dt-score small::before{content:none}

/* body and cards */
.dt-body{padding:16px 16px 24px}
.dt-card{border:1px solid var(--border);border-radius:var(--r-lg);padding:14px;margin-bottom:12px}
.dt-label{font-family:var(--head);font-stretch:70%;font-size:19px;font-weight:700;line-height:1;text-transform:uppercase;letter-spacing:.01em;color:var(--text);margin:0 0 6px;text-wrap:balance}
.dt-hint{font-size:12.5px;color:var(--muted);margin:0 0 8px}
.dt-lead{font-size:14px;color:var(--text);margin:4px 2px 14px}
.dt-flabel{display:block;font-size:13px;font-weight:700;color:var(--text);margin:0 2px 6px}
.dt-wait-t{color:var(--muted);text-align:center;padding:40px 0}
.dt-err{font-size:13px;font-weight:600;color:var(--text);background:var(--surface-2);border:1px solid var(--text);border-radius:var(--r-md);padding:8px 10px;margin:8px 2px}
.dt-msg{font-size:13px;color:var(--text);margin:8px 2px 12px;min-height:18px}
.dt-foot{font-size:12px;color:var(--muted);margin:10px 2px 0}
.dt-links{display:flex;justify-content:space-between;gap:12px;margin:14px 2px 0}
.dt-link{background:none;border:0;padding:0;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dt-center{display:block;margin:12px auto 0}
.dt a{color:var(--text)}

/* today */
.dt-seg{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-radius:var(--r-pill);padding:4px;margin-bottom:12px}
.dt-seg button{border:0;background:none;border-radius:var(--r-pill);padding:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.dt-seg button.on{background:var(--surface);color:var(--text);box-shadow:0 0 0 1px var(--border)}
.dt-backmsg{display:flex;align-items:flex-start;gap:10px;background:var(--surface-2);color:var(--text);border-radius:var(--r-md);padding:10px 12px;font-size:13.5px;font-weight:600;margin:0 0 12px}
.dt-backmsg::before{content:"";flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--accent)}
.dt-stmt{background:var(--surface-2);border-radius:var(--r-md);padding:10px 12px;font-size:14px;color:var(--text);font-weight:600;margin-bottom:8px}
.dt-stmt ol{margin:8px 0 0;padding-left:18px;font-weight:400;font-size:13px;color:var(--text)}
.dt-more{background:none;border:0;padding:0;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:4px}

/* one row per habit. What's left stands out: an open row is white with an empty ink circle.
   A done row turns sand and quiet, with a moss disc and a white tick (v1's gold disc, in the new colors).
   A slipped habit to break gets an ink outline and an ink disc with a dash, no red. */
.dt-row{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:11px 12px;margin-top:6px;font-size:14px;color:var(--text);cursor:pointer}
.dt-ck{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--text);flex:none;background:var(--surface) center/13px no-repeat}
.dt-rl{flex:1;min-width:0}
.dt-row.on{background:var(--row-done-in);border-color:var(--row-done-in);color:var(--muted)}
.dt-row.on .dt-ck{background-color:var(--done);border-color:var(--done);background-image:var(--check)}
.dt-tag{margin-left:auto;font-size:12px;color:var(--muted);flex:none}
.dt-brk.on{background:var(--surface);border:1.5px solid var(--text);color:var(--text)}
.dt-brk.on .dt-ck{background-color:var(--fill-strong);border-color:var(--fill-strong);background-image:var(--dash)}
.dt-brk.on .dt-tag{color:var(--text);font-weight:700}
.dt.dt-busy .dt-row{pointer-events:none;opacity:.7}

/* inputs: 16px keeps iPhones from zooming in */
.dt input{display:block;width:100%;border:1px solid var(--text);border-radius:var(--r-md);padding:11px 10px;font:inherit;font-size:16px;color:var(--text);background:var(--field)}
.dt input::placeholder{color:var(--light)}
.dt input:focus{outline:2px solid var(--text);outline-offset:-1px}
.dt-in + .dt-in{margin-top:6px}

.dt-save{display:block;width:100%;background:var(--fill-strong);color:var(--on-fill)!important;border:0;border-radius:var(--r-pill);padding:16px 14px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.dt-save.done{background:var(--accent-fill)}
.dt-save[disabled]{opacity:.7;cursor:default}
.dt-gap{margin-top:14px}

/* this week */
.dt-wk{display:grid;grid-template-columns:minmax(56px,1fr) repeat(7,14px) 40px;gap:7px 5px;align-items:center;font-size:12.5px;margin-top:8px}
.dt-wk .h{font-size:10.5px;font-weight:600;color:var(--muted);text-align:center}
.dt-wk .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border);background:var(--surface)}
.dt-dot.y{background:var(--fill-strong);border-color:var(--fill-strong)}
.dt-dot.n{border-color:var(--light)}
.dt-dot.f{border-style:dashed}
.dt-dot.t{border-color:var(--accent);border-width:2px}
.dt-dot.y.t{background:var(--fill-strong);border-color:var(--accent)}
.dt-cnt{text-align:right;font-weight:700;color:var(--text);white-space:nowrap}
.dt-slips{font-size:12px;color:var(--muted);margin:10px 0 0}

/* demo-only notes */
.dt-demo{margin-top:16px;border:1px dashed var(--light);border-radius:var(--r-md);padding:10px 12px;font-size:12px;color:var(--text);background:var(--surface-2)}
.dt-demo b{display:block;font-size:10.5px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:.24em;margin-bottom:4px}

/* coach */
.dt-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.dt-m{background:var(--surface-2);border-radius:var(--r-md);padding:12px 10px}
.dt-m b{display:block;font-family:var(--head);font-stretch:70%;font-size:32px;font-weight:700;color:var(--text);line-height:1}
.dt-m span{display:block;margin-top:5px;font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dt-list{padding:4px 12px}
.dt-cl{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;border-top:1px solid var(--border);padding:12px 2px;cursor:pointer}
.dt-cl:first-child,.dt-tap + .dt-cl{border-top:0}
.dt-tap{margin:8px 2px 0}
.dt-cl p{font-size:14px;color:var(--text);font-weight:700}
.dt-cl small{display:block;font-size:12px;color:var(--muted);font-weight:400}
.dt-chip{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:var(--r-pill);padding:5px 9px;white-space:nowrap;flex:none}
.dt-chip.ok{background:var(--surface-2);color:var(--text)}
.dt-chip.quiet{background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text)}
.dt-chip.back{background:var(--accent-fill);color:var(--on-accent)}
.dt-chip.new,.dt-chip.setup{background:var(--track);color:var(--text)}
.dt-act{display:inline-flex;align-items:center;min-height:44px;font-size:12px;color:var(--text);font-weight:700;margin-top:2px;text-decoration:underline;text-underline-offset:3px}
.dt-act.g{color:var(--accent)}
button.dt-act{background:none;border:0;padding:0;cursor:pointer;text-align:left}
.dt-det{font-size:12px;color:var(--text);background:var(--surface-2);border-radius:var(--r-md);padding:8px 10px;margin:0 2px 10px}
.dt-det div{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.dt-det div span{min-width:0}
.dt-det div b{font-weight:700;color:var(--text);white-space:nowrap}
.dt-det .dt-win{margin-top:4px;font-style:italic}
.dt-fri{background:var(--surface-2);border-radius:var(--r-md);padding:10px 12px;font-size:13px;color:var(--text);white-space:pre-wrap}
.dt-copy{margin-top:8px;background:var(--surface);border:1px solid var(--text);border-radius:var(--r-pill);padding:8px 16px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);cursor:pointer}
a.dt-save{text-align:center;text-decoration:none}

/* app shell: Today, Week, Vision, Me */
.dt-app{flex:1}
.dt-nav{position:sticky;bottom:0;z-index:5;display:flex;background:var(--surface);border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px))}
.dt-nav > button{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:0;border-radius:var(--r-md);padding:4px 0;color:var(--light);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.dt-nav > button svg{width:22px;height:22px}
.dt-nav > button.on{color:var(--text)}
.dt-nav > button.on svg{color:var(--accent)}
.dt-nav > button.on::before{content:"";position:absolute;z-index:-1;top:0;left:50%;width:58px;height:30px;transform:translateX(-50%);border-radius:var(--r-pill);background:var(--surface-2)}

/* sections of the day: a label is moss caps with a moss dot in front */
.dt-sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.dt-sec-n{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.dt-sub{display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin:16px 2px 0}
.dt-sub::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.dt-sub small{display:block;flex-basis:100%;font-size:12px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--muted)}
.dt-saved{font-size:12px;color:var(--muted);text-align:center;margin:2px 0 12px;min-height:16px}
.dt-note{background:var(--surface-2);color:var(--text);border-radius:var(--r-md);padding:10px 12px;font-size:13px;margin:0 0 12px}
.dt-prompt{background:var(--surface-2);border-color:var(--surface-2)}
.dt-prompt .dt-save{margin-top:6px}
.dt-ghost{display:block;width:100%;margin-top:8px;background:var(--surface-2);border:1px dashed var(--light);border-radius:var(--r-md);padding:11px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer}
.dt-plus{flex:none;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-pill);padding:7px 14px;font-size:12px;font-weight:700;color:var(--text);cursor:pointer}
.dt-btn2{flex:1;display:inline-flex;justify-content:center;align-items:center;background:var(--surface);border:1.5px solid var(--text);color:var(--text);border-radius:var(--r-pill);padding:10px 14px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-align:center}
.dt-edit-btns{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.dt-edit-btns .dt-save{width:auto;flex:1;padding:12px}
.dt-edit-btns .dt-copy{margin-top:0}
.dt-gap8{margin-top:8px}

/* chips: mood, energy, presets, categories */
.dt-chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dt-chipb{background:var(--surface-2);border:1px solid var(--surface-2);border-radius:var(--r-pill);padding:7px 14px;font-size:13px;color:var(--text);cursor:pointer}
.dt-chipb.on{background:var(--fill-strong);border-color:var(--fill-strong);color:var(--on-fill)}
.dt-val{background:var(--surface-2);border-radius:var(--r-pill);padding:6px 14px;font-size:13px;font-weight:600;color:var(--text)}
.dt-presets{display:flex;gap:6px;flex-wrap:wrap;margin:-4px 0 10px}

/* the vision strip on Today: the one ink block on the page */
.dt-vs{display:block;width:100%;text-align:left;background:var(--ink-card);border:0;border-radius:var(--r-lg);padding:8px;margin:8px 0 2px;cursor:pointer;color:var(--white)}
.dt-vs .dt-vs-north{color:var(--white)}
.dt-vs-row{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.dt-vs-row .dt-tile{aspect-ratio:1/1;border-radius:var(--r-sm)}
.dt-vs-north{display:block;font-size:13px;font-weight:600;line-height:1.35;margin:8px 4px 2px}
.dt-vs-cta{display:block;font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--oat);margin:4px 4px 2px}
.dt-tile{display:block;width:100%;height:100%;object-fit:cover;background:var(--placeholder)}
.dt-wait{background:linear-gradient(110deg,var(--placeholder) 30%,var(--placeholder-2) 50%,var(--placeholder) 70%);background-size:200% 100%;animation:dtw 1.4s linear infinite}
@keyframes dtw{to{background-position:-200% 0}}

/* the board */
.dt-board{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px}
.dt-cell{position:relative;aspect-ratio:1/1;overflow:hidden;border-radius:var(--r-md);background:var(--surface-2)}
.dt-cellb{display:block;width:100%;height:100%;padding:0;border:0;background:none;cursor:pointer}
.dt-cell .dt-tile{position:absolute;inset:0;width:100%;height:100%}
.dt-empty{width:100%;height:100%;border:1.5px dashed var(--light);border-radius:var(--r-md);background:none;color:var(--light);font-size:24px;cursor:pointer}
.dt-x{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:0;background:rgba(23,23,22,.75);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.dt-north{font-size:15px;font-weight:600;color:var(--text);line-height:1.4;margin-top:4px}
.dt-future{font-size:13.5px;color:var(--text);line-height:1.6;background:var(--surface-2);border-radius:var(--r-md);padding:10px 12px;margin-top:4px}

/* full-screen board. On ink, buttons switch to oat with ink text, as in Sarah's dark mode. */
.dt-viewer{position:fixed;inset:0;z-index:20;background:var(--ink);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.dt-viewer img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:dtf .7s ease,dtk 6s ease-out}
@keyframes dtf{from{opacity:0}to{opacity:1}}
@keyframes dtk{from{transform:scale(1.06)}to{transform:scale(1)}}
.dt-viewer-top{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));color:#fff;font-size:12px;background:linear-gradient(rgba(23,23,22,.6),transparent)}
.dt-viewer-top button{background:rgba(255,255,255,.2);border:0;color:#fff;border-radius:var(--r-pill);padding:7px 14px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.dt-viewer-low{position:relative;padding:70px 18px calc(20px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,rgba(23,23,22,.88) 45%);color:#fff}
.dt-viewer-low p{font-size:18px;font-weight:700;line-height:1.35;margin:0 0 6px}
.dt-viewer-low small{display:block;color:var(--oat);font-size:12px;margin-bottom:12px}
.dt-viewer-nav{display:flex;gap:8px;align-items:center}
.dt-viewer-nav > button:not(.dt-save){flex:none;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.2);color:#fff;font-size:22px;cursor:pointer}
.dt-viewer-nav .dt-save{flex:1;background:var(--oat);color:var(--ink)!important}
@media (prefers-reduced-motion:reduce){.dt-viewer img{animation:none}.dt-wait{animation:none}}

/* Sarah's photo library */
.dt-sheet{position:fixed;inset:0;z-index:20;background:rgba(23,23,22,.45);display:flex;align-items:flex-end}
.dt-sheet-in{background:var(--surface);width:100%;max-height:88%;overflow-y:auto;border-radius:20px 20px 0 0;padding:16px 14px calc(18px + env(safe-area-inset-bottom,0px))}
.dt-sheet-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.dt-sheet-h b{font-family:var(--head);font-stretch:70%;font-size:22px;font-weight:700;text-transform:uppercase;color:var(--text)}
.dt-cats{margin:4px 0 10px}
.dt-lib{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.dt-lib button{position:relative;aspect-ratio:1/1;padding:0;border:0;border-radius:var(--r-sm);overflow:hidden;background:var(--placeholder-2);cursor:pointer}
.dt-lib img{width:100%;height:100%;object-fit:cover;display:block}
.dt-libck{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:2px solid #fff;background:rgba(23,23,22,.25) center/12px no-repeat}
.dt-lib button.on{outline:3px solid var(--fill-strong);outline-offset:-3px}
.dt-lib button.on .dt-libck{background-color:var(--fill-strong);background-image:var(--check);border-color:var(--fill-strong)}

/* reading */
.dt-read{display:flex;align-items:center;gap:10px;border:1px solid var(--border);border-radius:var(--r-md);padding:10px 10px 10px 12px;margin-top:10px}
.dt-read > div{flex:1;min-width:0}
.dt-read .dt-sub{margin:0}
.dt-bar2{height:6px;background:var(--surface-2);border-radius:var(--r-pill);overflow:hidden;margin-top:6px}
.dt-bar2 span{display:block;height:100%;border-radius:var(--r-pill);background:var(--done)}
.dt-read-n{display:block;font-size:11px;color:var(--muted);margin-top:3px}
.dt-book{padding:8px 0;border-top:1px solid var(--border)}
.dt-book:first-of-type{border-top:0}
.dt-book p{font-size:13.5px;font-weight:600;color:var(--text)}
.dt-book p small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.dt-book.done p{color:var(--muted)}
.dt-book-ed{border:1px solid var(--border);border-radius:var(--r-md);padding:8px;margin-top:8px}
.dt-book-ed .dt-in + .dt-in{margin-top:6px}
.dt-book-n{display:flex;gap:6px;align-items:flex-end;margin-top:6px}
.dt-book-n label{font-size:11px;color:var(--muted);flex:1}
.dt-book-n .dt-in{margin-top:2px}

/* wins, history */
.dt-wins{list-style:none;margin:8px 0 0;padding:0}
.dt-wins li{font-size:13px;color:var(--text);padding:8px 0;border-top:1px solid var(--border)}
.dt-wins li:first-child{border-top:0}
.dt-wins small{display:inline-block;min-width:46px;color:var(--muted);font-size:11px;font-weight:700;margin-right:6px}
.dt-addwin{display:flex;gap:6px;align-items:center;margin-top:6px}
.dt-addwin .dt-in{flex:1}
.dt-hist{display:grid;grid-template-columns:72px 1fr 18px;gap:8px;align-items:center;font-size:12px;color:var(--text);margin-top:8px}
.dt-hist .dt-bar2{margin:0;height:8px}
.dt-hist b{text-align:right;color:var(--text)}

/* editing his setup */
.dt textarea{display:block;width:100%;border:1px solid var(--text);border-radius:var(--r-md);padding:11px 10px;font:inherit;font-size:16px;color:var(--text);background:var(--field)}
.dt textarea:focus{outline:2px solid var(--text);outline-offset:-1px}
.dt-ta{resize:vertical;min-height:120px;line-height:1.5}
.dt-list2{margin:6px 0 0;padding-left:18px;font-size:13.5px;color:var(--text)}
.dt-list2 li{margin:3px 0}
.dt-edrow{display:flex;gap:6px;align-items:center;margin-top:6px}
.dt-edrow .dt-in{flex:1;margin:0}
.dt-x2{flex:none;width:40px;height:44px;border:1px solid var(--text);border-radius:var(--r-md);background:var(--surface);color:var(--text);font-size:18px;cursor:pointer}
.dt-sw{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--border);padding:12px 2px;cursor:pointer}
.dt-hint + .dt-sw{border-top:0}
.dt-sw-t{flex:1;min-width:0}
.dt-sw-t b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}
.dt-sw-t small{display:block;font-size:12px;color:var(--muted)}
.dt-sw-k{flex:none;width:42px;height:24px;border-radius:var(--r-pill);background:var(--track);position:relative;transition:background .2s}
.dt-sw-k::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--knob);transition:left .2s}
.dt-sw.on .dt-sw-k{background:var(--accent-fill)}
.dt-sw.on .dt-sw-k::after{left:21px}

/* first-time steps */
.dt-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.dt-steps span{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--light);border-top:3px solid var(--track);padding-top:6px}
.dt-steps span.on{color:var(--text);border-color:var(--accent)}
.dt-steps span.done{color:var(--muted);border-color:var(--fill-strong)}

/* the file picker stays hidden; its label is the button */
.dt [hidden]{display:none!important}

/* his tabs have fewer boxes and one type scale. Sarah's view keeps its cards, and so do his first-time steps. */
.dt-app .dt-card:not(.dt-prompt){border:0;padding:0;margin-bottom:30px}
.dt-app .dt-stmt{background:none;padding:0;margin:4px 0 12px;font-size:22px;font-weight:600;line-height:1.3;text-wrap:balance}
.dt-app .dt-north,.dt-app .dt-vs-north{font-size:17px}
.dt-app .dt-label{font-size:24px;margin:0 0 6px}
.dt-app .dt-row{font-size:16px}

/* buttons at least 44 px tall, so a thumb hits them */
.dt-seg button,.dt-copy,.dt-plus,.dt-ghost,.dt-chipb,.dt-btn2,.dt-link,.dt-more{min-height:44px}

/* ===== 15-oct: what the research added ===== */

/* Today: a cue under a habit ("After coffee") and its count for the week on the right ("2 of 5") */
.dt-cue{display:block;margin-top:2px;font-size:12px;font-weight:500;color:var(--muted)}
.dt-cuelink{display:block;margin:12px 2px 0;text-align:left}
.dt-row .dt-tag{font-variant-numeric:tabular-nums}

/* Me: each habit with its cue and its days a week */
.dt-hab{padding:8px 0;border-top:1px solid var(--border)}
.dt-hab:first-of-type{border-top:0}
.dt select{display:block;width:100%;border:1px solid var(--text);border-radius:var(--r-md);padding:11px 30px 11px 10px;font:inherit;font-size:16px;color:var(--text);
  background:var(--field);
  -webkit-appearance:none;appearance:none}
.dt select:focus{outline:2px solid var(--text);outline-offset:-1px}
/* 19-oct (i4): the select's arrow is a mask filled with currentColor (the text color), so it turns light on a dark
   page. A select can't hold a ::after, so the arrow sits on its row, over the select's right side (the select is
   always the last thing in that row): 10 px in from the right and level with the select's middle, as the old background
   picture was. The select sits 8 px lower than the row's top (the skin's .dt-in + .dt-in), hence 50% + 4px. */
.dt-edrow:has(> select){position:relative}
.dt-edrow:has(> select)::after{content:"";position:absolute;top:calc(50% + 4px);right:10px;width:12px;height:8px;margin-top:-4px;pointer-events:none;
  color:var(--text);background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") center/12px 8px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") center/12px 8px no-repeat}
.dt-edrow .dt-goal{flex:0 0 44%;margin:0}
.dt-list2 li small{display:block;font-size:12px;color:var(--muted)}

/* Week: how far you've come */
.dt-big{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:2px 0 4px}
.dt-big b{font-family:var(--head);font-stretch:70%;font-size:60px;font-weight:700;line-height:.9}
.dt-big span{font-size:13px;color:var(--muted)}
.dt-str{display:grid;grid-template-columns:minmax(0,1fr) 38% 40px;gap:10px;align-items:center;font-size:13px;margin-top:8px}
.dt-str span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-str .dt-bar2{margin:0;height:8px}
.dt-str b{text-align:right;font-variant-numeric:tabular-nums}
.dt-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;margin-top:10px;max-width:420px}
.dt-tiles div{display:grid;gap:3px}
.dt-tiles span{display:block;aspect-ratio:1/1;border-radius:50%;background:var(--surface-2)}
.dt-tiles span.y{background:var(--fill-strong)}
.dt-tiles span.f{background:none}

/* Week: the hardest day */
.dt-pats{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;align-items:end;height:90px;margin-top:8px;max-width:420px}
.dt-pat{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;height:100%}
.dt-pat span{display:block;width:100%;border-radius:4px;background:var(--track)}
.dt-pat.low span{background:var(--fill-strong)}
.dt-pat small{font-size:10.5px;font-weight:600;color:var(--muted)}

/* Sarah's view: slipping has a dashed line, away is oat, the 4 numbers sit 2 by 2 on a phone */
.dt-chip.slip{background:var(--surface);color:var(--text);border:1.5px dashed var(--text);padding:3.5px 7.5px}
.dt-chip.away{background:var(--track);color:var(--text)}
.dt-chip.new,.dt-chip.setup{background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--border)}
.dt-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
@container (min-width:560px){.dt-metrics{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ===== the details a browser would otherwise pick (color-scheme: on :root with the tokens, light or dark) ===== */
.dt ::selection{background:var(--selection);color:var(--text)}
.dt :where(button,a,input,select,textarea,label,[role="button"]){touch-action:manipulation}
.dt-sheet-in{overscroll-behavior:contain}
.dt :where(button,a,[role="button"]):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dt-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dt-score span,.dt-big b,.dt-cnt,.dt-sec-n,.dt-m b{font-variant-numeric:tabular-nums}
.dt-actnote{display:block;margin-top:6px;font-size:12px;font-weight:600;color:var(--accent)}
.dt-demo-a{display:block;width:fit-content;margin-top:8px;font-weight:700;text-underline-offset:3px}

/* a mouse gets an answer before the click */
@media (hover:hover){
  .dt-row:hover{border-color:var(--text)}
  .dt-row.on:hover{border-color:var(--light)}
  .dt-chipb:not(.on):hover,.dt-plus:hover,.dt-ghost:hover{border-color:var(--text)}
  .dt-save:not([disabled]):hover{background:var(--accent-fill)}
  .dt-copy:hover,.dt-btn2:hover{background:var(--fill-strong);color:var(--on-fill)}
  .dt-link:hover,.dt-more:hover{color:var(--text)}
}

/* small squares, one a day: a habit's week on Today, a man's last 14 days in Sarah's table */
.dt-mini{display:inline-flex;gap:3px;flex:none;vertical-align:middle}
.dt-mini i{display:block;width:10px;height:10px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--light)}
.dt-mini i.y{background:var(--fill-strong);box-shadow:none}
.dt-mini i.t{box-shadow:inset 0 0 0 1.5px var(--accent)}
.dt-mini i.f{background:transparent;box-shadow:inset 0 0 0 1px var(--border)}
.dt-row .dt-mini{margin-left:auto}
.dt-row .dt-mini + .dt-tag{margin-left:16px;min-width:44px;text-align:right}

/* the mark and the wordmark, the ink half of the sign-in screen and the foot of the side menu: computer only */
.dt-brand,.dt-hero,.dt-navfoot{display:none}

/* ===== a computer: from 900 px the menu moves to the left =====
   It measures the page the tracker sits in (container-type on .page), not the window, so the
   phones in demo.html stay phones. */
@container (min-width:900px){
  /* sign-in and first time: an ink half with the brand, the form on white */
  .dt-split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);min-height:100vh;min-height:100dvh}
  .dt-hero{display:flex;flex-direction:column;position:sticky;top:0;height:100vh;height:100dvh;background:var(--ink-card);color:var(--white);padding:44px clamp(40px,5cqi,72px) 52px}
  .dt-hero-mark{display:flex;align-items:center;gap:14px}
  .dt-hero-mark svg{flex:none;width:44px;height:44px;padding:6px;background:var(--accent-fill);color:var(--on-accent)}
  .dt-hero-mark b{font-family:var(--head);font-stretch:62%;font-weight:600;font-size:17px;letter-spacing:.14em;text-transform:uppercase}
  .dt-hero-h{margin:auto 0 0;font-family:var(--head);font-stretch:70%;font-weight:700;text-transform:uppercase;line-height:.9;letter-spacing:.005em;text-wrap:balance}
  .dt-hero-h b{display:block;font-weight:700;font-size:clamp(60px,6.6cqi,104px)}
  .dt-hero-h span{display:block;margin-top:10px;font-weight:250;font-size:clamp(34px,3.9cqi,62px);color:var(--oat);text-wrap:balance}
  .dt-hero-l,.dt-hero-steps{list-style:none;margin:40px 0 0;padding:0;max-width:460px}
  .dt-hero-l li{padding:13px 0;border-top:1px solid rgba(255,255,255,.16);font-size:15px;line-height:1.5;color:var(--oat)}
  .dt-hero-steps li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-top:1px solid rgba(255,255,255,.16);font-size:17px;font-weight:600;color:rgba(255,255,255,.55)}
  .dt-hero-steps small{font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
  .dt-hero-steps li.on{color:var(--white)}
  .dt-hero-steps li.on small,.dt-hero-steps li.done{color:var(--oat)}
  .dt-auth{display:flex;flex-direction:column;justify-content:center;padding:56px clamp(40px,6cqi,104px)}
  .dt-auth > *{width:100%;max-width:440px}
  .dt-auth > .dt-bar{border:0;padding:0 2px 8px}
  .dt-auth > .dt-body{padding:16px 0 0}
  .dt-auth .dt-steps{display:none}
  .dt-auth .dt-save{padding:15px 14px}

  /* the app: the menu on the left, the page on the right */
  .dt.dt-is-app{display:grid;grid-template-columns:232px minmax(0,1fr);align-items:stretch;min-height:100vh;min-height:100dvh}
  .dt-is-app > .dt-app{grid-column:2;grid-row:1;min-width:0}
  .dt-is-app > .dt-nav{grid-column:1;grid-row:1;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto;flex-direction:column;justify-content:flex-start;gap:2px;
    border-top:0;border-right:1px solid var(--border);background:var(--surface-2);padding:28px 14px 22px}
  .dt-brand{display:flex;align-items:center;gap:12px;padding:0 8px 24px;margin-bottom:12px;border-bottom:1px solid var(--border);color:var(--text)}
  .dt-brand svg{flex:none;width:36px;height:36px;padding:5px;background:var(--accent-fill);color:var(--on-accent)}
  .dt-brand b{display:block;font-family:var(--head);font-stretch:62%;font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;white-space:nowrap}
  .dt-brand small{display:block;margin-top:4px;font-size:9.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
  .dt-is-app > .dt-nav > :is(button,a){flex:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-height:44px;padding:10px 14px;border-radius:var(--r-md);
    background:none;border:0;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;cursor:pointer}
  .dt-is-app > .dt-nav > :is(button,a) svg{flex:none;width:20px;height:20px}
  .dt-is-app > .dt-nav > :is(button,a).on{background:var(--surface);color:var(--text)}
  .dt-is-app > .dt-nav > :is(button,a).on svg{color:var(--accent)}
  .dt-is-app > .dt-nav > button.on::before{content:none}
  .dt-navfoot{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:auto;padding:20px 12px 0;border-top:1px solid var(--border)}
  .dt-navnorth{font-size:13px;font-weight:600;line-height:1.4;color:var(--text)}
  .dt-navnorth small{display:block;margin-bottom:6px;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
  .dt-navnote{font-size:11.5px;line-height:1.45;color:var(--muted)}
  .dt-navfoot .dt-link{min-height:32px}
  .dt-bar{padding:34px 44px 22px}
  .dt-bar h1,.dt-score span{font-size:46px}
  .dt-body{padding:28px 44px 56px}
  .dt-seg{max-width:420px}
  .dt-cols{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:0 52px;align-items:start}
  .dt-app .dt-label{font-size:26px}
  .dt-home{display:none}
  @media (hover:hover){
    .dt-is-app > .dt-nav > :is(button,a):not(.on):hover{color:var(--text);background:var(--hover-tint)}
  }
}

/* ===== a wide computer (WIDE in tracker.js, 1100 px): the menu, the page, and a sand panel on the right =====
   tracker.js sets dt-wide and dt-xwide from the tracker's own width, and builds each tab for it. */
.dt.dt-wide.dt-is-app{grid-template-columns:248px minmax(0,1fr) 340px}
.dt.dt-xwide.dt-is-app{grid-template-columns:256px minmax(0,1fr) 392px}
.dt-wide.dt-is-app > .dt-rail{grid-column:3;grid-row:1;min-width:0;background:var(--surface-2);border-left:1px solid var(--border)}
.dt-rail-in{position:sticky;top:0;max-height:100vh;max-height:100dvh;overflow-y:auto;overscroll-behavior:contain;padding:36px 28px 44px;
  scrollbar-width:thin;scrollbar-color:var(--track) transparent}
.dt-xwide .dt-rail-in{padding:40px 36px 48px}
/* 19-oct (i3): the 48 and 64 px paddings and the 52 px title that sat here were dead (the skin's 44 px and 48 px won);
   the cap at about 1180 px now lives at the end of tracker-skin.css */
.dt-wide .dt-app > .dt-bar{align-items:flex-end}
.dt-wide .dt-bar .dt-seg{flex:none;width:240px;max-width:none;margin:0 0 4px}
.dt-wide .dt-app .dt-stmt{font-size:26px}

/* the page in two columns once there's room for both */
.dt-grid2{display:grid;gap:0 56px;align-items:start}
.dt-grid2 > div:empty{display:none}
.dt-xwide .dt-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
.dt-xwide .dt-grid-board{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.dt-wide .dt-board{max-width:640px}

/* what sits in the panel: no boxes, a line between parts, white where a phone has sand */
.dt-rail .dt-card:not(.dt-prompt){border:0;border-radius:0;padding:0;margin:0 0 28px}
.dt-rail .dt-card + .dt-card,.dt-rail .dt-wkp + .dt-card{border-top:1px solid var(--border);padding-top:24px}
.dt-rail .dt-label{font-size:22px;margin:0 0 6px}
.dt-rail .dt-row{font-size:15px}
.dt-rail .dt-row.on{background:var(--track);border-color:var(--track)}
.dt-rail .dt-chipb:not(.on),.dt-rail .dt-ghost,.dt-rail .dt-plus,.dt-rail .dt-val,.dt-rail .dt-note,.dt-rail .dt-future,.dt-rail .dt-prompt,.dt-rail .dt-read{background:var(--surface)}
.dt-rail .dt-chipb:not(.on){border-color:var(--surface)}
.dt-rail .dt-bar2,.dt-rail .dt-tiles span{background:var(--track)}
.dt-rail .dt-tiles span.y{background:var(--fill-strong)}
.dt-rail .dt-tiles span.f{background:none}
.dt-rail .dt-pat span{background:var(--surface)}
.dt-rail .dt-pat.low span{background:var(--fill-strong)}
.dt-rail .dt-saved{text-align:left;margin:-16px 0 24px}

/* the panel on Today: this week, a square a day */
.dt-wkp{margin-bottom:28px}
.dt-wkp .dt-big b{font-size:64px}
.dt-wkdays{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:16px 0 12px;padding:0}
.dt-wkdays li{display:flex;flex-direction:column;align-items:center;gap:6px}
.dt-wkdays i{display:block;width:100%;max-width:36px;aspect-ratio:1/1;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--light)}
.dt-wkdays li.y i{background:var(--fill-strong) var(--check) center/60% no-repeat;box-shadow:none}
.dt-wkdays li.t i{box-shadow:inset 0 0 0 2px var(--accent)}
.dt-wkdays li.f i{background:transparent;box-shadow:inset 0 0 0 1.5px var(--border)}
.dt-wkdays small{font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dt-wkdays li.sel small{color:var(--text);font-weight:700}

/* Week on a computer: the whole name of each habit, the date under each day, bigger squares */
.dt-wide .dt-wk{grid-template-columns:minmax(160px,1fr) repeat(7,34px) 68px;gap:10px 8px;font-size:14px;margin-top:14px}
.dt-wide .dt-wk .h{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px}
.dt-wide .dt-wk .h small{font-size:12.5px;font-weight:700;color:var(--text)}
.dt-wide .dt-dot{width:26px;height:26px;justify-self:center}
.dt-wide .dt-dot.y{background:var(--fill-strong) var(--check) center/62% no-repeat}

/* ===== Sarah's view on a wide computer: a table of every man and the one picked in the panel ===== */
.dt-filters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.dt-filters .dt-chipb{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:7px 13px;font-size:13px;font-weight:600}
.dt-filters .dt-chipb b{font-weight:700;font-variant-numeric:tabular-nums}
.dt-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.dt-tbl th{padding:0 12px 10px;border-bottom:1.5px solid var(--text);text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.dt-tbl td{padding:14px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.dt-tbl th:first-child,.dt-tbl td:first-child{padding-left:14px}
.dt-tbl tbody tr{cursor:pointer;transition:background-color .15s ease-out}
.dt-tbl tbody tr.sel{background:var(--surface-2)}
.dt-tname{background:none;border:0;padding:0;font:inherit;font-size:14.5px;font-weight:700;color:var(--text);text-align:left;cursor:pointer}
.dt-tc-name small{display:block;margin-top:3px;font-size:12px;color:var(--muted)}
.dt-tc-n{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.dt-tbl th.dt-tc-n{text-align:right}
.dt-tc-x{display:none}
.dt-xwide .dt-tc-x{display:table-cell}
.dt-tc-act{white-space:nowrap}
.dt-tc-act .dt-act{min-height:0;margin:0}
.dt-tc-act .dt-actnote{white-space:normal;max-width:220px}
.dt-frisec{margin-top:52px;padding-top:28px;border-top:1px solid var(--border);max-width:760px}
@media (hover:hover){
  .dt-tbl tbody tr:not(.sel):hover{background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))}
  .dt-tname:hover{text-decoration:underline;text-underline-offset:3px}
}

/* the panel: his name, what to do, his last 14 days and his week */
.dt-pn-name{margin:0;text-wrap:balance;font-family:var(--head);font-stretch:70%;font-weight:700;font-size:36px;line-height:.95;text-transform:uppercase;letter-spacing:.01em;color:var(--text)}
.dt-pn-st{margin-top:12px}
.dt-pn-sub{margin-top:10px;font-size:13.5px;color:var(--text)}
.dt-pn-act{margin-top:16px;padding:14px;text-align:center;text-decoration:none}
.dt-14{margin-top:10px}
.dt-14 .dt-mini{display:grid;grid-template-columns:repeat(14,minmax(0,1fr));gap:3px;width:100%}
.dt-14 .dt-mini i{width:auto;height:auto;aspect-ratio:1/1}
.dt-14l{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--muted)}
.dt-pn-lines{margin-top:4px}
.dt-pn-lines > div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px;color:var(--text)}
.dt-pn-lines > div > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dt-pn-lines b{text-align:right;font-variant-numeric:tabular-nums}
.dt-pn-lines .dt-bar2{grid-column:1/-1;height:5px;margin:0}
.dt-rail .dt-win{margin-top:8px;font-size:15px;font-weight:600;line-height:1.45;color:var(--text)}
@media (prefers-reduced-motion:reduce){.dt-tbl tbody tr{transition:none}}

/* The Collective: this week's lesson on top of Today */
.dt-app .dt-card.dt-lesson,.dt-lesson{background:var(--surface-2);border:0;padding:16px;margin-bottom:24px}
.dt-lesson-k{margin:0 0 8px;font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.dt-lesson-t{margin:0 0 10px;font-size:14px;color:var(--text)}
.dt-lesson .dt-row{margin-top:0}
.dt-lesson .dt-row.on{background:var(--surface);border-color:var(--border)}

/* today's 3 non-negotiables: a tick and his words on one line */
.dt-nn{display:flex;gap:6px;align-items:stretch;margin-top:6px}
.dt-nnck{flex:none;width:48px;min-height:48px;display:grid;place-items:center;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer}
.dt-nn .dt-in{flex:1;min-width:0;margin:0;border-color:var(--border)}
.dt-nn.on .dt-nnck{background:var(--row-done-in);border-color:var(--row-done-in)}
.dt-nn.on .dt-nnck .dt-ck{background-color:var(--done);border-color:var(--done);background-image:var(--check)}
.dt-nn.on .dt-in{background:var(--row-done-in);border-color:var(--row-done-in);color:var(--muted)}

/* sleep times in Me, and "add another" under a list */
.dt-times{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dt-times .dt-flabel{margin:0}
.dt-times .dt-in{margin-top:6px}
.dt-addmore{display:block;margin:8px 2px 0}
.dt-pn-tr{display:inline-block;margin-left:10px;font-size:12px;font-weight:600;color:var(--muted)}
/* 16-oct, audit: a failed save shows at the bottom of the screen, the version sits at the bottom of Me,
   and a long word or a pasted link wraps instead of pushing the page sideways. */
.dt-toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;
  width:max-content;max-width:min(92vw,420px);background:var(--fill-strong);color:var(--on-fill);border-radius:var(--r-md);padding:12px 16px;font-size:14px;line-height:1.4;
  box-shadow:var(--shadow-toast)}
.dt-ver{font-size:11px;color:var(--light);margin:14px 2px 0}
.dt :where(p,li,h1,h2,h3,.dt-rl,.dt-cue,.dt-north,.dt-fri){overflow-wrap:anywhere}
.dt-link[disabled]{opacity:.45;cursor:default}

/* ===== 19-oct: Today in three parts, Morning, Through the day and Evening (tracker.js, dayParts and path) =====
   Each part numbers its steps on the left, in Sarah's order. On a computer Morning and Evening stand side by side
   with headers of the same height, so their first rows start level. */
.dt-path{list-style:none;margin:0;padding:0}
.dt-step{display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:12px;align-items:start;margin-top:18px}
.dt-step:first-child{margin-top:0}
.dt-step-n{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-top:12px;border-radius:50%;background:var(--surface-2);color:var(--text);
  font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.dt-step.h .dt-step-n{margin-top:0}
.dt-step.c .dt-step-n{margin-top:10px}
.dt-step-b{min-width:0}
.dt-step-b > :first-child{margin-top:0}
.dt-step-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 10px;margin:0 2px;font-size:15px;font-weight:700;line-height:24px;color:var(--text)}
.dt-step-h small{font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap}
.dt-step-h + .dt-hint{margin:2px 2px 0}
.dt-hint.dt-after{margin:8px 2px 0}
.dt-now{display:inline-flex;align-items:center;flex:none;height:20px;padding:0 8px;border-radius:var(--r-pill);background:var(--accent-fill);color:var(--on-accent);
  font-size:10px;font-weight:700;letter-spacing:.1em;line-height:1;text-transform:uppercase}
.dt-part-h{margin:0 2px 16px}
.dt-part-r{display:flex;align-items:center;gap:10px;min-width:0}
.dt-part-r .dt-label{margin:0}
.dt-part-r .dt-sec-n{margin-left:auto}
.dt-part-l{margin:4px 0 0;font-size:13.5px;line-height:20px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dt-fold-r{display:flex;align-items:center;gap:8px;min-width:0}
.dt-fold-n{margin-left:auto;font-size:12px;font-weight:600;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.dt-plain{margin:0;padding:13px 14px;border:1px dashed var(--border);border-radius:var(--r-md);font-size:14px;line-height:1.4;color:var(--text)}
.dt-jn{margin:0 2px 2px;font-size:13.5px;line-height:1.4;color:var(--text)}
.dt-jn small{display:block;margin-bottom:2px;font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dt-jr-open{display:inline-flex;align-items:center;margin:0 2px}
.dt-jr{margin-top:8px}
.dt-jr .dt-in + .dt-in{margin-top:6px}
.dt-big-new b{font-size:40px}

/* ===== 19-oct (i2): reading in pages, "Slipped?" on a habit to break, the bedtime note (tracker.js, readingRow,
   row, dayParts). Colors are the existing variables only. ===== */
.dt-read-n{display:flex;flex-wrap:wrap;align-items:center;gap:0 4px}
.dt-page{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;padding:0 2px;border:0;background:none;font:inherit;font-weight:700;color:var(--text);
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px;cursor:pointer}
.dt .dt-page-in{display:inline-block;width:92px;margin:4px 0;padding:6px 10px;font-size:16px}
.dt-read-t{display:block;margin-top:6px;font-size:12px;font-weight:700;color:var(--accent)}
.dt-read.done .dt-read-n{font-weight:700;color:var(--accent)}
.dt-slipq{padding:2px 8px;border:1px solid var(--light);border-radius:var(--r-pill)}
.dt-plain{border:0;border-radius:0;padding:0 2px;font-size:13.5px;line-height:24px;color:var(--muted)}

/* ===== 19-oct (i4): Appearance (tracker.js, themePicker): Light, Dark (Match my phone went in 2.5). Chips in Me; on
   the coach view small links in a row next to Refresh, the one picked in bold. ===== */
.dt-theme:not(.dt-chiprow){display:flex;flex-wrap:wrap;align-items:center;gap:0 16px;margin-top:8px}
.dt-theme-l{display:block;flex-basis:100%;margin:0 0 2px;font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
/* the side menu is 200 px inside: one choice a line there, under the word */
.dt-navfoot .dt-theme{flex-direction:column;align-items:flex-start;gap:0;margin-top:0}
.dt-navfoot .dt-theme-l{flex-basis:auto;margin:0 0 4px}

/* ===== 20-oct (2.6): Today one step at a time on a phone (tracker.js: guideCard, guideEnd, guideListHtml, weekGuide)
   and the order of his steps in Me (orderCard). A bar with a segment per step (done in moss, skipped as an outline,
   the one on screen in ink), the step, Done or Next, Skip, and Back / See all. Tokens only, so Dark works as it is.
   Every button is 44 px tall at least. ===== */
.dt .dt-guide{padding:2px 16px 14px}
.dt .dt-gbar{display:flex;gap:4px;list-style:none;margin:0 0 16px;padding:0}
.dt .dt-gbar li{flex:1;height:6px;border-radius:var(--r-pill);background:var(--track)}
.dt .dt-gbar li.d{background:var(--done)}
.dt .dt-gbar li.k{background:transparent;box-shadow:inset 0 0 0 1.5px var(--track)}
.dt .dt-gbar li.c{background:var(--text)}
.dt .dt-gk{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.dt .dt-gq{margin:0 0 6px;font-family:var(--head);font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.012em;color:var(--text)}
.dt .dt-gq:focus{outline:0}
.dt .dt-gbody{margin-top:14px}
.dt .dt-gbody > :first-child,.dt .dt-gbody .dt-jr{margin-top:0}
.dt .dt-gbody .dt-cuelink{margin-top:0}
.dt .dt-gcard .dt-save{margin-top:18px}
.dt .dt-gskip{display:block;width:100%;min-height:44px;margin-top:4px;padding:0;border:0;background:none;color:var(--muted);font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.dt .dt-gdone{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-weight:700;color:var(--accent)}
.dt .dt-gdone .dt-ck{width:26px;height:26px;border:0;background:var(--done) var(--check) center/13px no-repeat}
.dt .dt-gnext{margin:10px 0 0;padding-top:12px;border-top:1px solid var(--hairline);font-size:13px;color:var(--muted)}
.dt .dt-gnext b{font-weight:600;color:var(--text)}
.dt .dt-gfoot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.dt .dt-gfoot .dt-link,.dt .dt-gone,.dt .dt-ordreset{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;font-size:13px}
.dt .dt-gfoot .dt-link:first-child{justify-content:flex-start}
.dt .dt-gone{margin:-10px 0 6px 2px}
.dt .dt-gleft{width:100%;text-align:left}
.dt .dt-gbed{margin-top:14px}
.dt .dt-ord{list-style:none;margin:0 0 14px;padding:0}
.dt .dt-ord li{display:flex;align-items:center;gap:6px;min-height:56px;margin-top:8px;padding:6px 6px 6px 16px;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--line)}
.dt .dt-ord li span{flex:1;min-width:0}
.dt .dt-ordb{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--surface-2);color:var(--text);cursor:pointer}
.dt .dt-ordb:disabled{opacity:.3;cursor:default}
.dt .dt-ordb svg{width:20px;height:20px}
.dt .dt-ordv{margin:0 0 12px;padding-left:22px;font-size:14px;line-height:1.75;color:var(--text-2)}
.dt .dt-ordreset{margin-top:6px}