/* Tracker platform surface — rides the app's Moss tokens (app.css :root).
   Everything is .tk- prefixed; nothing here touches app classes beyond using
   the shared .page/.pghead/.pgbody chrome the shell already owns. */

#trackerPage .tk-body{padding:12px 14px calc(30px + var(--sab));max-width:560px;margin:0 auto}
#trackerPage .pghead .tk-dayn{margin-left:auto;font:700 var(--t-label) var(--font-ui);color:var(--ink3)}

/* palette roles — a definition says a|b|c|d, the theme owns the hexes */
.tk-c-a{--tkc:var(--moss-500);--tkc-deep:var(--moss-700)}
.tk-c-b{--tkc:var(--brick);--tkc-deep:#8a4626}
.tk-c-c{--tkc:var(--ochre);--tkc-deep:#96701f}
.tk-c-d{--tkc:var(--charlie);--tkc-deep:#3c5a86}

.tk-card{background:var(--card);border:1px solid var(--border-card);border-radius:var(--r-card);
  padding:14px;margin-bottom:12px}
.tk-card h3{font:700 var(--t-micro) var(--font-ui);letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:10px}

/* state strip */
.tk-strip{display:flex;gap:10px;margin-bottom:12px}
.tk-tile{flex:1;background:var(--card);border:1px solid var(--border-card);border-radius:var(--r-card);
  padding:12px 10px;text-align:center;min-width:0}
.tk-tile b{display:block;font:700 var(--t-label) var(--font-ui);color:var(--ink3);
  letter-spacing:.08em;text-transform:uppercase}
.tk-tile .tk-big{display:block;font-family:var(--font-display);font-size:24px;margin:3px 0 1px;
  font-variant-numeric:tabular-nums}
.tk-tile small{font-size:var(--t-micro);color:var(--ink3)}
.tk-tile.tk-live{background:var(--tkc-deep);border-color:var(--tkc-deep);color:var(--on-deep)}
.tk-tile.tk-live b,.tk-tile.tk-live small{color:var(--on-deep-muted)}

/* chart */
.tk-chart{width:100%;height:auto;display:block;touch-action:manipulation}
.tk-grid{stroke:var(--hair);stroke-width:1}
/* SVG text scales DOWN with the viewBox (720 units on a ~390pt phone ≈ ×0.54)
   — sizes here are viewBox units tuned to read ~10-11px on the phone, the
   prod Mason chart's effective size (Charlie's 08-27 teardown: 9px here
   rendered ~4px real and was unreadable) */
.tk-gridlbl{font:600 21px var(--font-ui);fill:var(--ink3);text-anchor:middle} /* #274: 19→21 viewBox px — a notch up for weaker eyes, every chart */
/* the class's middle anchor overrides SVG text-anchor ATTRIBUTES (CSS wins) —
   y-axis labels were centering into the first bar (teardown 08-27) */
.tk-gridlbl.tk-ylbl{text-anchor:end}
.tk-gridlbl.tk-albl{text-anchor:start}
.tk-lane{fill:var(--tkc)}
.tk-lane.tk-open{fill:var(--tkc-deep)}
.tk-tick{fill:var(--tkc)}
.tk-nowline{stroke:var(--ink);stroke-width:1.5;opacity:.5}
/* band shade spans (night hours etc.) — a wash behind everything */
.tk-shade{fill:var(--ink);opacity:.055}
/* tap bubble at the mark (the Mason tracker's tip idiom, engine-wide):
   floats at the tap point, dark on light, gone in a beat */
.tk-tipb{position:fixed;z-index:90;background:var(--moss-900);color:var(--cream-1);border-radius:12px;
  padding:7px 12px;pointer-events:none;box-shadow:0 4px 14px rgba(0,0,0,.18);max-width:78vw}
.tk-tipb b{display:block;font-size:var(--t-sub);font-weight:700}
/* long notes (action debriefs run to pages) clamp — the bubble answers, the row's real home tells the whole story */
.tk-tipb span{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden;
  font-size:var(--t-micro);color:var(--moss-100);margin-top:1px}

/* stats */
.tk-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tk-stat{background:var(--bg1);border:1px solid var(--border-card);border-radius:12px;
  padding:9px 4px;text-align:center}
.tk-stat b{display:block;font-family:var(--font-display);font-size:18px;font-variant-numeric:tabular-nums}
.tk-stat span{font-size:var(--t-micro);color:var(--ink3)}
/* four stats read as a 2×2, never 3+1 with an orphan */
.tk-stats.four{grid-template-columns:repeat(2,1fr)}
/* delta line under a stat: a fact, not a grade — stays in quiet ink */
.tk-delta{display:block;font-size:var(--t-micro);color:var(--ink3);margin-top:2px;font-style:normal}

/* recent */
.tk-daymark{font:700 var(--t-micro) var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);margin:10px 0 2px}
.tk-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-top:1px solid var(--hair);
  font-size:var(--t-sub)}
.tk-row:first-of-type{border-top:0}
.tk-row b{font-weight:700;flex:none}
.tk-dot{width:9px;height:9px;border-radius:99px;background:var(--tkc);flex:none}
.tk-detail{color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-when{margin-left:auto;color:var(--ink3);font-size:var(--t-label);flex:none}
/* who logged it (family scope) — quiet, after the detail, before the clock */
.tk-by{margin-left:auto;color:var(--ink3);font-size:var(--t-label);flex:none;font-style:italic}
.tk-by+.tk-when{margin-left:8px}

/* trends */
.tk-trend{margin-bottom:10px}
.tk-trendhd{display:flex;justify-content:space-between;font-size:var(--t-sub);margin-bottom:4px}
.tk-trendhd span{color:var(--ink3);font-size:var(--t-label)}
.tk-bars{display:flex;align-items:flex-end;gap:2px;height:48px}
.tk-bars i{flex:1;background:var(--moss-300);border-radius:2px 2px 0 0;min-width:2px}
.tk-bars i.tk-b-today{background:var(--moss-700)}

.tk-foot{text-align:center;font-size:var(--t-micro);color:var(--ink3);font-style:italic;margin-top:6px}
.tk-foot code{font-style:normal}

/* the checkable statement + pursuit door leading the page (08-30) */
.tk-stmt{color:var(--ink2);font-size:var(--t-sub);line-height:1.5;padding:2px 2px 12px}
.tk-stmtgoal{background:none;border:none;font:600 var(--t-sub) var(--font-ui);color:var(--accent);
  cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:2px}

/* embed head: Start (routine-backed) + History side by side, both the
   text-button idiom the head already speaks */
.tk-embedhead span{display:flex;gap:14px;align-items:center}
.tk-embedopen.tk-embedstart{color:var(--accent)}

/* routine launcher (defs with routine:"<id>") — Start buttons + the vN door */
.tk-rnlink{float:right;background:var(--moss-100);color:var(--accent);border:none;border-radius:var(--r-pill);
  font:700 var(--t-micro) var(--font-ui);letter-spacing:.04em;text-transform:none;padding:3px 10px;cursor:pointer}
.tk-rnrow{display:flex;align-items:center;gap:12px;padding:10px 2px;border-top:1px solid var(--hair)}
.tk-rnrow:first-of-type{border-top:none}
.tk-rnnm b{display:block;font-size:var(--t-body)}
.tk-rnnm small{color:var(--ink3);font-size:var(--t-label)}
.tk-rngo{margin-left:auto;background:var(--accent);color:var(--cream-1);border:none;border-radius:var(--r-pill);
  font:700 var(--t-sub) var(--font-ui);padding:8px 18px;cursor:pointer}
.tk-rngo:active{transform:scale(.97)}

/* Ask-Kip dock — the docs dock idiom on a tracker page */
.tk-ask{background:var(--bg1);border:1px solid var(--border-card);border-radius:var(--r-card);padding:10px;margin-top:10px}
.tk-askrow{display:flex;gap:8px}
.tk-askrow input{flex:1;border:1px solid var(--border-card);border-radius:999px;background:var(--paper-2);
  padding:9px 14px;font:inherit;font-size:var(--t-sub);color:var(--ink);min-width:0}
.tk-askrow input:focus{outline:none;border-color:var(--moss-500)}
.tk-askrow button{border:0;border-radius:999px;width:38px;background:var(--moss-700);color:var(--cream-1);
  font-size:17px;cursor:pointer}
.tk-askrow button:disabled{opacity:.5}
.tk-askthread{margin-bottom:10px;display:flex;flex-direction:column;gap:8px}
.tk-me{align-self:flex-end;background:var(--moss-700);color:var(--cream-1);border-radius:14px 14px 4px 14px;
  padding:8px 12px;font-size:var(--t-sub);max-width:85%}
.tk-kip{align-self:flex-start;background:var(--paper-2);border:1px solid var(--border-card);
  border-radius:14px 14px 14px 4px;padding:8px 12px;font-size:var(--t-sub);max-width:85%;line-height:1.45}
.tk-sys{align-self:center;font-size:var(--t-micro);color:var(--ink3);font-style:italic}
.tk-typing i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--ink3);
  margin:0 2px;animation:tkblink 1.2s infinite}
.tk-typing i:nth-child(2){animation-delay:.2s}
.tk-typing i:nth-child(3){animation-delay:.4s}
@keyframes tkblink{0%,80%,100%{opacity:.25}40%{opacity:1}}

/* pie/donut — chart-grade series colors (the 08-25 dataviz-validated set),
   fixed order; "other" stays neutral */
.tk-pie{fill:none;stroke-width:32}
.tk-pierow{display:flex;align-items:center;gap:12px}
.tk-piesvg{max-width:170px;flex:0 0 40%}
.tk-piebox{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;overflow:hidden}
.tk-pieleg{display:grid;grid-template-columns:11px auto;column-gap:7px;align-items:center;
  font-size:var(--t-label);color:var(--ink2)}
.tk-pieleg i{width:11px;height:11px;border-radius:3px;margin-top:1px}
.tk-pieleg b{color:var(--ink);overflow-wrap:anywhere}
.tk-pieleg span{grid-column:2;white-space:nowrap;color:var(--ink3);font-size:var(--t-micro)}
.tk-pie-0{stroke:#4a74b8;background:#4a74b8}
.tk-pie-1{stroke:#3e7233;background:#3e7233}
.tk-pie-2{stroke:#a5552f;background:#a5552f}
.tk-pie-3{stroke:#c29b22;background:#c29b22}
.tk-pie-4{stroke:#7c8a5e;background:#7c8a5e}
.tk-pie-5{stroke:#b9b3a4;background:#b9b3a4}

/* pursuit-page embeds: the outer .card owns the chrome — inner chart cards flatten */
.tkembed .tk-card{border:0;background:none;padding:6px 0;box-shadow:none;margin:0}
.tk-embedhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.tk-embedhead b{font-size:var(--t-sub)}
.tk-embedopen{border:0;background:none;font:inherit;font-size:var(--t-label);font-weight:700;color:var(--ok);cursor:pointer}

/* an action card inside the dock takes the bubble's full width */
.tk-kip.tk-kcard{max-width:100%;width:100%}
.tk-kip .kcard{margin-top:6px}

/* the You-tab rack rows */
.tk-rackrow{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;
  padding:10px 2px;font:inherit;text-align:left;cursor:pointer;border-bottom:1px solid var(--hair)}
.tk-rackrow:last-child{border-bottom:0}
.tk-rackico{font-size:20px;width:28px;text-align:center}
.tk-rackmain{flex:1;min-width:0}
.tk-rackname{display:block;font-weight:700;color:var(--ink);font-size:var(--t-sub)}
.tk-racksub{display:block;font-size:var(--t-micro);color:var(--ink3)}
.tk-rackstat{font-family:var(--font-display);font-size:17px;color:var(--ink);white-space:nowrap}
.tk-rackarrow{color:var(--ink3)}

/* ---- the chart grammar (v217): trend · bars · clock · heat ---- */
.tk-plot svg{width:100%;height:auto;display:block;overflow:visible}
.tk-bandzone{fill:var(--ok);opacity:.1}
.tk-goal{stroke:var(--brick);stroke-width:2.5;stroke-dasharray:8 6;opacity:.75}
.tk-goallbl{font:700 21px var(--font-ui);fill:var(--brick)}
.tk-line{fill:none;stroke:var(--charlie);stroke-width:3.5;stroke-linecap:round}
.tk-line2{fill:none;stroke:var(--moss-300);stroke-width:3;stroke-linecap:round}
.tk-dotm{fill:var(--charlie);stroke:var(--paper-2);stroke-width:2.5;cursor:pointer}
.tk-dl{font:700 24px var(--font-ui);fill:var(--ink)}
.tk-bar{fill:var(--moss-500);cursor:pointer}
.tk-bar-hit{fill:var(--ok)}
.tk-bar-today{fill:var(--moss-700)}
.tk-bar-late{fill:var(--brick)}
.tk-heat{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.tk-heat i{aspect-ratio:1;border-radius:7px;background:var(--paper-1);border:1px solid var(--hair);cursor:pointer}
.tk-heat i[data-q="1"]{background:var(--moss-50)} .tk-heat i[data-q="2"]{background:var(--moss-100)}
.tk-heat i[data-q="3"]{background:var(--moss-300)} .tk-heat i[data-q="4"]{background:var(--moss-500)}
.tk-heat i[data-q="5"]{background:var(--moss-700)}
.tk-empty{font-size:var(--t-label);color:var(--ink3);text-align:center;padding:14px 0}

/* progress + collection + record filters */
.tk-progbar{height:10px;border-radius:99px;background:var(--moss-200);overflow:hidden}
.tk-progbar i{display:block;height:100%;border-radius:99px;background:var(--ok)}
.tk-proglbl{display:flex;justify-content:space-between;font-size:var(--t-label);color:var(--ink3);margin-top:6px}
.tk-coll{display:flex;gap:6px;flex-wrap:wrap}
.tk-cchip{font:600 var(--t-label) var(--font-ui);border:1px solid var(--border-card);border-radius:999px;
  padding:5px 11px;color:var(--ink3);background:var(--paper-1)}
.tk-cchip.got{background:var(--moss-700);border-color:var(--moss-700);color:var(--cream-1)}
.tk-filtrow{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px}
.tk-filt{font:600 var(--t-label) var(--font-ui);border:1px solid var(--border-card);background:var(--paper-1);
  color:var(--ink2);border-radius:999px;padding:5px 11px;cursor:pointer}
.tk-filt.on{background:var(--moss-700);border-color:var(--moss-700);color:var(--cream-1)}

/* ---- write phase (v220): sheets, pills, the undo toast ---- */
.tk-verbrow{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.tk-logpill{flex:1;min-width:110px;border:0;border-radius:999px;padding:13px 10px;font:700 14.5px var(--font-ui);
  background:var(--moss-900);color:var(--cream-1);text-align:center;cursor:pointer;min-height:var(--tap)}
.tk-logpill.brick{background:var(--brick)}
.tk-justnow{display:block;margin:0 auto 12px;font:700 11px var(--font-ui);border:1px solid var(--border-card);
  color:var(--ink3);border-radius:999px;padding:6px 13px;background:var(--paper-2);cursor:pointer}
.tk-sheet{background:var(--card);border:1px solid var(--border-card);border-radius:var(--r-card);
  padding:14px;margin-bottom:12px;box-shadow:0 6px 18px rgba(44,54,39,.10)}
.tk-sheethd{display:flex;align-items:center;margin-bottom:10px}
.tk-sheethd b{font-size:var(--t-body)}
.tk-x{margin-left:auto;border:0;background:none;color:var(--ink3);font-size:15px;padding:4px 6px;cursor:pointer}
.tk-verb{display:block;width:100%;border:0;border-radius:999px;padding:12px;font:700 15px var(--font-ui);
  background:var(--moss-900);color:var(--cream-1);text-align:center;margin-top:10px;cursor:pointer;min-height:var(--tap)}
.tk-verb.danger{background:none;border:1px solid var(--border-card);color:var(--brick);margin-top:8px}
.tk-atrow{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:8px;
  font-size:var(--t-label);color:var(--ink3)}
.tk-atrow input{font:600 var(--t-field) var(--font-ui);border:1px solid var(--border-card);background:var(--paper-1);
  border-radius:9px;padding:6px 8px;width:96px;color:var(--ink);text-align:center}
.tk-counterbig{display:flex;align-items:center;justify-content:center;gap:18px;margin-bottom:8px}
.tk-counterbig .tk-cn{font-family:var(--font-display);font-size:44px;min-width:70px;text-align:center}
.tk-stepbtn{width:44px;height:44px;border-radius:99px;border:1px solid var(--border-card);
  background:var(--paper-1);font-size:20px;color:var(--ink);cursor:pointer;flex:none}
.tk-kdisp{text-align:center;font-family:var(--font-display);font-size:32px;min-height:42px;font-variant-numeric:tabular-nums}
.tk-kdisp small{font-family:var(--font-ui);font-size:13px;color:var(--ink3)}
.tk-kpad{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.tk-kpad button{background:var(--paper-1);border:1px solid var(--border-card);border-radius:11px;
  padding:11px;font:700 16px var(--font-ui);color:var(--ink);cursor:pointer;min-height:var(--tap)}
.tk-scalerow{display:flex;gap:7px;margin-bottom:10px}
.tk-scalerow button{flex:1;aspect-ratio:1;border-radius:14px;border:1.5px solid var(--border-card);
  background:var(--paper-1);font-size:22px;cursor:pointer}
.tk-scalerow button.on{border-color:var(--moss-700);box-shadow:0 0 0 2px var(--moss-700);background:var(--moss-50)}
.tk-grplbl{display:block;font:700 9px var(--font-ui);letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink3);font-style:normal;margin:8px 0 4px}
.tk-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:6px}
.tk-chips.left{justify-content:flex-start}
.tk-fld{display:flex;gap:8px;align-items:center;justify-content:center;margin-bottom:9px}
.tk-flbl{font-size:var(--t-label);color:var(--ink3);min-width:52px;text-align:left}
.tk-fval{font-family:var(--font-display);font-size:22px;min-width:80px;text-align:center;font-variant-numeric:tabular-nums}
.tk-fval small{font-family:var(--font-ui);font-size:12px;color:var(--ink3)}
.tk-toast{position:absolute;left:50%;bottom:calc(var(--sab) + 22px);transform:translateX(-50%) translateY(8px);
  background:var(--moss-900);color:var(--cream-1);font:700 13px var(--font-ui);border-radius:999px;
  padding:10px 18px;opacity:0;transition:all .18s;z-index:90;white-space:nowrap;max-width:92%;
  overflow:hidden;text-overflow:ellipsis}
.tk-toast.show{opacity:1;transform:translateX(-50%)}
.tk-toast u{cursor:pointer;font-weight:800}
.tk-row[data-row]{cursor:pointer}

/* ---------- stopwatch instrument (C3, 08-31) — the v1 nurse surface made
   generic: labeled slots, live clocks, staged session, one Done ---------- */
.tk-hint{text-align:center;font-size:var(--t-label);color:var(--ink3);margin-bottom:10px}
.tk-slots{display:flex;gap:9px}
.tk-slot{flex:1;position:relative;border:1.5px solid var(--border-card);border-radius:16px;background:var(--paper-1);
  padding:14px 8px 12px;text-align:center;cursor:pointer;min-height:96px;color:var(--ink)}
.tk-slot b{display:block;font-size:var(--t-body)}
.tk-slot .tm{display:block;font-family:var(--font-display);font-size:26px;margin:4px 0 2px;font-variant-numeric:tabular-nums}
.tk-slot small{display:block;font-size:10.5px;color:var(--ink3)}
.tk-slot.active{border-color:var(--moss-700);box-shadow:0 0 0 2px var(--moss-700);background:var(--moss-50)}
.tk-slot.used{border-color:var(--moss-300)}
.tk-slot.suggest{border-style:dashed;border-color:var(--moss-700)}
.tk-sreset{position:absolute;top:6px;right:8px;font-size:10px;color:var(--ink3)}
.tk-sess{text-align:center;font-size:var(--t-label);color:var(--ink2);margin-top:8px;min-height:16px}
.tk-ghost{display:block;margin:8px auto 0;border:0;background:none;color:var(--ink3);
  font:600 12.5px var(--font-ui);text-decoration:underline;cursor:pointer;padding:4px 8px}
.tk-logpill.timing{background:var(--moss-700)}
.tk-fld .tk-num{font:600 var(--t-field) var(--font-ui);border:1px solid var(--border-card);background:var(--paper-1);
  border-radius:9px;padding:6px 8px;width:74px;color:var(--ink);text-align:center}
.tk-fld small{color:var(--ink3);font-size:var(--t-label)}

/* ---------- Today-strip instruments (C4) — famNow grammar, engine-owned */
.fn-tkstrip .fn-t span b{color:var(--ink);font-weight:700}
.tk-late{color:var(--danger)!important}

/* ---------- alarm offer + pending chip (C5) */
.tk-alchip small{display:block;font-size:10px;color:inherit;opacity:.75}
.tk-alpend{display:block;margin:2px auto 10px}
.tk-atrow.hidden{display:none}

/* ---------- daycols (the week, a column a day) + story (Weeks · Months) */
.tk-dccol{fill:var(--bg1);stroke:var(--border-card);stroke-width:1}
.tk-dcdot{fill:var(--tkc)}
.tk-dcfuture{fill:var(--ink);opacity:.05}
.tk-gridlbl.tk-dctoday{fill:var(--ink);font-weight:700}
.tk-styseg{display:flex;background:var(--bg1);border:1px solid var(--border-card);border-radius:999px;
  padding:3px;margin-bottom:12px}
.tk-styseg button{flex:1;border:0;border-radius:999px;background:none;padding:9px;
  font:700 14px var(--font-ui);color:var(--ink2);cursor:pointer}
.tk-styseg button.on{background:var(--moss-900);color:var(--cream-1)}
.tk-stycard{background:var(--bg1);border:1px solid var(--border-card);border-radius:12px;
  padding:12px;margin-bottom:10px}
.tk-styhead{display:flex;align-items:baseline;gap:10px;margin-bottom:9px}
.tk-styhead b{font-family:var(--font-display);font-size:19px}
.tk-styhead span{margin-left:auto;font-size:var(--t-label);color:var(--ink3);text-align:right}
.tk-stycard .tk-stat{background:var(--card)}
.tk-stybars{display:flex;align-items:flex-end;gap:5px;height:64px;margin-top:12px;padding-top:14px}
.tk-stybars i{flex:1;position:relative;background:var(--moss-500);border-radius:4px 4px 0 0;min-height:4px}
.tk-stybars i.mut{background:var(--hair);height:4px}
.tk-stybars i span{position:absolute;top:-15px;left:50%;transform:translateX(-50%);
  font:600 10px var(--font-ui);color:var(--ink3);font-style:italic;white-space:nowrap}
.tk-stylbl{display:flex;gap:5px;margin-top:4px}
.tk-stylbl span{flex:1;text-align:center;font-size:10px;color:var(--ink3)}
.tk-styfoot{font-size:var(--t-label);color:var(--ink3);font-style:italic;text-align:center;padding-top:2px}

/* ---------- composability round 3 (08-31): hero card, Log card, stacked series */
.tk-hero{text-align:center;padding:20px 14px 16px}
.tk-hero.on{background:var(--moss-900);border-color:var(--moss-900);color:var(--cream-1)}
.tk-hero.on .tk-herosub,.tk-hero.on .tk-heroline,.tk-hero.on .tk-heromut{color:var(--moss-100)}
.tk-herobig{font-family:var(--font-display);font-size:34px;line-height:1.15;font-variant-numeric:tabular-nums}
.tk-herosub{font-size:var(--t-label);color:var(--ink3);margin:2px 0 12px}
.tk-herobtn{border:0;border-radius:999px;padding:12px 30px;font:700 15px var(--font-ui);cursor:pointer;
  background:var(--moss-900);color:var(--cream-1);min-height:var(--tap)}
.tk-hero.on .tk-herobtn{background:var(--cream-1);color:var(--moss-900)}
.tk-heroadj{margin-top:10px}
.tk-hero .tk-justnow,.tk-hero .tk-alpend{display:inline-block;margin:0}
.tk-heroline{border-top:1px solid var(--hair);margin-top:14px;padding-top:12px;font-size:var(--t-sub)}
.tk-hero.on .tk-heroline{border-top-color:rgba(255,255,255,.18)}
.tk-heroline b{font-weight:700}
.tk-heromut{color:var(--ink3);font-size:var(--t-label)}
.tk-heronx{color:var(--brick);font-weight:700;margin-left:6px}
.tk-hero.on .tk-heronx{color:var(--cream-1)}
.tk-logcard .tk-logseg{margin-bottom:14px}
.tk-logcard .tk-styseg button.timing{color:var(--cream-1);background:var(--moss-700)}
/* stacked series palette — brand-role hues, distinct in both themes */
.tk-sf-0{fill:var(--moss-500)}   i.tk-sf-0{background:var(--moss-500)}
.tk-sf-1{fill:var(--brick)}      i.tk-sf-1{background:var(--brick)}
.tk-sf-2{fill:var(--ochre)}      i.tk-sf-2{background:var(--ochre)}
.tk-sf-3{fill:var(--charlie)}    i.tk-sf-3{background:var(--charlie)}
.tk-sf-4{fill:var(--moss-800)}   i.tk-sf-4{background:var(--moss-800)}
.tk-sf-5{fill:var(--moss-300)}   i.tk-sf-5{background:var(--moss-300)}
svg .tk-sf{stroke:var(--card);stroke-width:.6}
.tk-sleg{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;font-size:var(--t-label);color:var(--ink2)}
.tk-sleg span{display:flex;align-items:center;gap:5px}
.tk-sleg i{width:11px;height:11px;border-radius:3px}
.tk-chatchart{margin:8px 0 2px}
.tk-chatchart .tk-embedopen{margin-top:6px}
.tk-embederr{font-size:var(--t-label);color:var(--ink3);font-style:italic;padding:6px 0}
/* story bars say what they measure — "what do these bars mean?" (Leah, 08-31) */
.tk-stybarcap{text-align:center;font-size:var(--t-micro);color:var(--ink3);font-style:italic;margin-top:3px}

/* ---------- feedback round (08-31 pm): legends everywhere, grain picker */
.tk-sleg [data-sw]{background:var(--tkc)}
.tk-swshade{background:var(--ink);opacity:.14}
.tk-legmut{color:var(--ink3);margin-left:auto}
.tk-grains{float:right;display:inline-flex;gap:2px;background:var(--bg1);border:1px solid var(--border-card);
  border-radius:999px;padding:2px}
.tk-grains button{border:0;background:none;border-radius:999px;padding:3px 10px;
  font:700 11px var(--font-ui);color:var(--ink3);cursor:pointer;letter-spacing:0;text-transform:none}
.tk-grains button.on{background:var(--moss-900);color:var(--cream-1)}
.tk-ask .tkchartbox .tk-card{margin:6px 0 0;padding:10px}
.tk-stotal{font:600 17px var(--font-ui);fill:var(--ink3);font-style:italic}
/* editable-row affordance + bucketed line + sticky dock (feedback 08-31 pm2) */
.tk-rowchev{color:var(--ink3);flex:none;font-weight:700;margin-left:2px}
.tk-dotm.tk-dot-today{fill:var(--moss-800)}
/* #271 (09-01): the dock read as a FLOATING card — a 6px gap under it, rounded
   corners, a shadow all round. It is now a bar flush with the bottom of the
   screen: full-bleed across the body's side padding, square bottom, top hairline
   only, and it carries the safe-area itself so nothing sits below it. Still
   sticky inside the scroller (not fixed) on purpose — sticky rides the iOS
   keyboard for free; fixed bars hide behind it.
   #270 (same session): the thread is capped and scrolls inside the bar, and the
   ▾ folds it away to the composer alone. */
#trackerPage .tk-body{padding-bottom:0}
#trackerPage .tk-ask{position:sticky;bottom:0;z-index:5;margin:10px -14px 0;border-radius:0;
  border-width:1px 0 0;padding:8px 14px calc(10px + var(--sab));
  box-shadow:0 -6px 18px rgba(44,54,39,.08);background:var(--card)}
#trackerPage .tk-ask .tk-askthread{max-height:min(32vh,260px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding-bottom:2px}
#trackerPage .tk-ask.tk-folded .tk-askthread{display:none}
.tk-askfold{border:0;background:none;color:var(--ink3);font-size:15px;line-height:1;padding:0 4px;cursor:pointer;flex:none}
.tk-askfold:active{color:var(--ink)}

/* With Kip rows (orchestration step 4): a quiet pull surface — what Kip can
   do from this page. Rows tap into the dock's chat; the × is the dismissal. */
.tk-withkip .tk-wkrow{display:flex;align-items:center;gap:10px;padding:9px 2px;
  border-top:1px solid var(--border-card);cursor:pointer}
.tk-withkip .tk-wkrow:first-of-type{border-top:0}
.tk-withkip .tk-wkrow.on{cursor:default}
.tk-wknm{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tk-wknm b{font:600 var(--t-label) var(--font-ui);color:var(--ink)}
.tk-wknm small{font-size:11.5px;line-height:1.35;color:var(--ink3)}
.tk-wkon{font:700 10px var(--font-ui);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink3);border:1px solid var(--border-card);border-radius:99px;padding:3px 8px}
.tk-wkx{appearance:none;border:0;background:none;color:var(--ink3);font-size:15px;
  line-height:1;padding:4px 6px;cursor:pointer;flex:none}
.tk-wkx:active{color:var(--ink)}