/* ============================================================================
   THYNK Interface System — "Blueprint Pro"
   One token + component layer for ProjectLog (cool) and WorkLog (warm),
   in Whiteprint (light) and Blueprint (dark).

   USAGE (vanilla HTML/JS/CSS):
     <link rel="stylesheet" href="thynk-system.css">
     <div class="tk-app" data-tk-app="projectlog" data-tk-mode="light"> … </div>
   Switch theme by changing the two data attributes (see README).

   Requires CSS color-mix() (all evergreen browsers, 2023+). Hairline colors
   are derived from the accent so you only ever set the accent + surfaces.
   ============================================================================ */

/* ---- 1. STATIC TOKENS (type, spacing, geometry) ------------------------- */
:root{
  --tk-sans:'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tk-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* type scale */
  --tk-fs-display:30px;   /* page H1 */
  --tk-fs-h1:21px;
  --tk-fs-h2:14px;        /* panel headers */
  --tk-fs-body:13px;
  --tk-fs-sm:12px;
  --tk-fs-xs:11px;
  --tk-fs-2xs:10px;       /* mono stamps / eyebrows */
  --tk-fs-metric:46px;    /* hero numerals */
  --tk-fs-stat:19px;      /* stat-strip numerals */

  /* spacing (4px base) */
  --tk-sp-1:4px;  --tk-sp-2:8px;  --tk-sp-3:12px; --tk-sp-4:16px;
  --tk-sp-5:20px; --tk-sp-6:24px; --tk-sp-8:32px;

  /* geometry — Blueprint Pro is crisp; no rounding */
  --tk-radius:0px;
  --tk-grid-size:27px;
  --tk-hair:1px;
}

/* ---- 2. APP ACCENT + COMMAND BAR (app-only; bar is dark in both modes) -- */
.tk-app[data-tk-app="projectlog"]{
  --tk-ink-top:#74c2e6;                       /* accent on the dark bar */
  --tk-top:#0b1c30;                           /* command-bar background  */
  --tk-top-line:rgba(120,180,220,.16);
  --tk-crest-pre:var(--tk-ink-top);
}
.tk-app[data-tk-app="worklog"]{
  --tk-ink-top:#e6b264;
  --tk-top:#231a0d;
  --tk-top-line:rgba(227,180,110,.18);
  --tk-crest-pre:var(--tk-ink-top);
}

/* ---- 3. MODE TOKENS (semantic + hairline alpha + shadow) ---------------- */
.tk-app[data-tk-mode="light"]{
  --tk-grn:#3f8f37; --tk-red:#c0512c; --tk-amber:#c2912f;
  --tk-a-grid:8%; --tk-a-line:20%; --tk-a-panel:3.5%;
  --tk-sh:0 1px 2px rgba(20,40,80,.06);
}
.tk-app[data-tk-mode="dark"]{
  --tk-grn:#8ec34a; --tk-red:#e0764e; --tk-amber:#e0b35a;
  --tk-a-grid:8%; --tk-a-line:22%; --tk-a-panel:4.5%;
  --tk-sh:none;
}

/* ---- 4. SURFACE + INK per app×mode (the only 4-way blocks) -------------- */
.tk-app[data-tk-app="projectlog"][data-tk-mode="light"]{
  --tk-bg:#eef3f9; --tk-surf:#ffffff;
  --tk-tx:#15243a; --tk-tx2:#48607c; --tk-tx3:#8398b0; --tk-ink:#2f63c8;
}
.tk-app[data-tk-app="projectlog"][data-tk-mode="dark"]{
  --tk-bg:#0a141f; --tk-surf:#0e1b29;
  --tk-tx:#dde9f1; --tk-tx2:#8aa4b6; --tk-tx3:#566a78; --tk-ink:#74c2e6;
}
.tk-app[data-tk-app="worklog"][data-tk-mode="light"]{
  --tk-bg:#f6f0e5; --tk-surf:#fffdf8;
  --tk-tx:#2e2515; --tk-tx2:#6f6045; --tk-tx3:#a4977b; --tk-ink:#b9722f;
}
.tk-app[data-tk-app="worklog"][data-tk-mode="dark"]{
  --tk-bg:#16110a; --tk-surf:#1d160d;
  --tk-tx:#efe5d4; --tk-tx2:#bca988; --tk-tx3:#7d6e54; --tk-ink:#e3aa5c;
}

/* ---- 5. DERIVED HAIRLINES (accent-tinted; computed once) ---------------- */
.tk-app{
  --tk-grid:color-mix(in srgb, var(--tk-ink) var(--tk-a-grid), transparent);
  --tk-line:color-mix(in srgb, var(--tk-ink) var(--tk-a-line), transparent);
  --tk-panel:color-mix(in srgb, var(--tk-ink) var(--tk-a-panel), transparent);
}

/* ============================================================================
   COMPONENTS  (all prefixed .tk- ; rely on inherited vars)
   ============================================================================ */
.tk-app, .tk-app *{ box-sizing:border-box; }
.tk-app{
  font-family:var(--tk-sans); font-size:var(--tk-fs-body); line-height:1.45;
  color:var(--tk-tx); background:var(--tk-bg);
  background-image:
    linear-gradient(var(--tk-grid) var(--tk-hair), transparent var(--tk-hair)),
    linear-gradient(90deg, var(--tk-grid) var(--tk-hair), transparent var(--tk-hair));
  background-size:var(--tk-grid-size) var(--tk-grid-size);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:0;
  transition:background-color .25s, color .25s;
}
.tk-mono{ font-family:var(--tk-mono); font-variant-numeric:tabular-nums; }

/* --- command bar --- */
.tk-topbar{
  flex:0 0 56px; height:56px; display:flex; align-items:center; gap:var(--tk-sp-5);
  padding:0 22px; background:var(--tk-top); border-bottom:1px solid var(--tk-top-line);
  color:#eaf1f6;
}
.tk-crest{ font-weight:800; font-size:18px; letter-spacing:-.5px; display:flex; align-items:baseline; gap:1px; }
.tk-crest__pre{ color:var(--tk-crest-pre); }
.tk-crest__log{ color:#8ece4f; }                 /* the shared family crest */
.tk-crest__thynk{
  font-family:var(--tk-mono); font-size:9px; font-weight:700; letter-spacing:1.5px;
  color:rgba(255,255,255,.4); margin-left:10px; padding-left:10px;
  border-left:1px solid var(--tk-top-line); align-self:center;
}
.tk-ctx{ font-family:var(--tk-mono); font-size:var(--tk-fs-xs); color:rgba(255,255,255,.6);
  letter-spacing:.4px; text-transform:uppercase; }
.tk-ctx b{ color:#fff; font-weight:600; }
.tk-spacer{ flex:1; }

/* --- buttons --- */
.tk-btn{
  height:30px; padding:0 13px; border:1px solid var(--tk-top-line); background:transparent;
  color:rgba(255,255,255,.78); font-family:var(--tk-mono); font-size:var(--tk-fs-xs);
  font-weight:600; letter-spacing:.4px; text-transform:uppercase; cursor:pointer;
  border-radius:var(--tk-radius); transition:color .12s, border-color .12s, background .12s;
}
.tk-btn:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.tk-btn--primary{ border-color:var(--tk-ink-top); color:var(--tk-ink-top); }
.tk-btn--ink{                                   /* solid accent (e.g. Start timer) */
  border:0; background:var(--tk-ink); color:#fff; height:38px; justify-content:center;
  display:inline-flex; align-items:center; gap:8px; width:100%;
}
.tk-btn--done{                                  /* matches command bar */
  border:0; background:var(--tk-top); color:#fff; display:inline-flex; align-items:center;
  gap:8px; padding:13px 22px; font-family:var(--tk-mono); font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; font-size:var(--tk-fs-sm); cursor:pointer;
}
.tk-btn--done:hover{ filter:brightness(1.18); }

/* --- light/dark switch (sits in the command bar) --- */
.tk-modeswitch{ display:inline-flex; border:1px solid var(--tk-top-line); overflow:hidden; }
.tk-modeswitch button{
  border:0; background:transparent; color:rgba(255,255,255,.5); font-family:var(--tk-mono);
  font-size:var(--tk-fs-2xs); font-weight:700; letter-spacing:.6px; padding:6px 10px; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.tk-modeswitch button[aria-pressed="true"]{ background:rgba(255,255,255,.12); color:#fff; }
.tk-modeswitch .tk-gl{ width:9px; height:9px; border-radius:50%; }
/* Single-button mode switch: one glyph that flips light/dark on click. */
.tk-modeswitch1{ display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--tk-top-line); background:transparent; color:rgba(255,255,255,.6);
  padding:7px 9px; cursor:pointer; transition:background .15s, color .15s; }
.tk-modeswitch1:hover{ background:rgba(255,255,255,.12); color:#fff; }
.tk-modeswitch1 .tk-gl{ width:11px; height:11px; border-radius:50%; }

/* --- body + sidebar --- */
.tk-body{ flex:1; display:flex; min-height:0; }
.tk-side{
  width:232px; flex:0 0 232px; border-right:1px solid var(--tk-line); padding:18px 0;
  overflow:auto; background:var(--tk-surf); box-shadow:var(--tk-sh);
}
.tk-slab{
  font-family:var(--tk-mono); font-size:var(--tk-fs-2xs); font-weight:700; letter-spacing:1.5px;
  color:var(--tk-tx3); padding:9px 20px; display:flex; align-items:center; gap:9px;
}
.tk-slab::after{ content:""; flex:1; height:1px; background:var(--tk-line); }
.tk-nav{ display:flex; align-items:center; gap:11px; padding:9px 20px; color:var(--tk-tx2);
  cursor:pointer; font-weight:500; }
.tk-nav:hover{ color:var(--tk-tx); background:var(--tk-panel); }
.tk-nav[aria-current="page"]{ color:var(--tk-ink); background:var(--tk-panel);
  border-left:2px solid var(--tk-ink); padding-left:18px; font-weight:600; }
.tk-nav__box{ width:9px; height:9px; border:1px solid currentColor; flex:0 0 auto; }
.tk-nav__n{ margin-left:auto; font-family:var(--tk-mono); font-size:var(--tk-fs-xs); color:var(--tk-tx3); }
.tk-mtg{ display:flex; align-items:center; gap:11px; padding:8px 20px; cursor:pointer; }
.tk-mtg:hover{ background:var(--tk-panel); }
.tk-mtg[aria-current="page"]{ background:var(--tk-panel); border-left:2px solid var(--tk-ink); padding-left:18px; }
/* Meeting "numbers" are user-typed strings and may be long or non-numeric —
   the gutter and text lines clip with ellipsis rather than overflowing onto
   their neighbors. */
.tk-mtg__num{ font-family:var(--tk-mono); font-size:var(--tk-fs-xs); color:var(--tk-tx3);
  flex:0 0 26px; width:26px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-mtg__t{ font-weight:600; font-size:var(--tk-fs-sm); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-mtg__s{ font-size:10.5px; color:var(--tk-tx3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tk-mtg__b{ margin-left:auto; font-family:var(--tk-mono); font-size:var(--tk-fs-2xs);
  color:var(--tk-ink); border:1px solid var(--tk-line); padding:0 5px; }

/* --- main + page headings --- */
.tk-main{ flex:1; overflow:auto; padding:24px 30px 56px; min-width:0; }
.tk-eyebrow{ font-family:var(--tk-mono); font-size:10.5px; font-weight:700; letter-spacing:2px;
  text-transform:uppercase; color:var(--tk-ink); }
.tk-h1{ font-size:var(--tk-fs-display); font-weight:800; letter-spacing:-.8px; margin:7px 0 0; line-height:1; }
.tk-sub{ color:var(--tk-tx2); font-size:var(--tk-fs-body); margin:9px 0 24px; max-width:600px; }
.tk-grid{ display:grid; gap:var(--tk-sp-5); }

/* --- drawing panel (crop-mark corners) --- */
.tk-panel{ border:1px solid var(--tk-line); position:relative; background:var(--tk-surf); box-shadow:var(--tk-sh); }
.tk-panel::before, .tk-panel::after{ content:""; position:absolute; width:8px; height:8px; border:1.5px solid var(--tk-ink); }
.tk-panel::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.tk-panel::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
/* Phase 4 section-header grammar: a panel declares its role via --tk-sec
   (default = app accent). The 2px top-edge tab is RETIRED — the role-tinted
   head + role-colored number now carry identity. The legacy --amber/--green
   modifiers just set the role token (no tab). */
.tk-panel--amber{ --tk-sec:var(--tk-amber); }
.tk-panel--green{ --tk-sec:var(--tk-grn); }
.tk-panel__head{
  display:flex; align-items:center; gap:10px; padding:11px 16px; border-bottom:1px solid var(--tk-line);
  font-family:var(--tk-mono); font-size:var(--tk-fs-xs); font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
}
.tk-panel__no{ color:var(--tk-sec, var(--tk-ink)); }
.tk-panel__r{ margin-left:auto; color:var(--tk-tx3); font-weight:500; letter-spacing:.5px; }

/* ---- THE SHEET — canonical Phase 4 panel (alias of .tk-panel's chrome) -----
   Same drafted crop-mark corners + hairline; the head is tinted 9% from the
   panel's role accent (--tk-sec). Role tokens (--tk-sec-*) come from the app
   bridge so they flip per app × theme. New Phase 4 screens use .tk-sheet;
   existing .tk-panel markup shares the same grammar. */
.tk-sheet{ border:1px solid var(--tk-line); position:relative; background:var(--tk-surf); box-shadow:var(--tk-sh); }
.tk-sheet::before, .tk-sheet::after{ content:""; position:absolute; width:8px; height:8px; border:1.5px solid var(--tk-ink); }
.tk-sheet::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.tk-sheet::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.tk-sheet__head{
  display:flex; align-items:center; gap:8px; min-height:45px; box-sizing:border-box; padding:0 14px;
  background:color-mix(in srgb, var(--tk-sec, var(--tk-ink)) 9%, var(--tk-surf));
  border-bottom:1px solid var(--tk-line);
  font-family:var(--tk-mono); font-size:var(--tk-fs-xs); font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:var(--tk-tx);
}
.tk-sheet__no{ color:var(--tk-sec, var(--tk-ink)); }
.tk-sheet__sl{ color:var(--tk-tx3); }
.tk-sheet__rt{ margin-left:auto; display:flex; align-items:center; gap:12px; font-weight:500; color:var(--tk-tx3); }
.tk-sheet__link{ color:var(--tk-sec, var(--tk-ink)); cursor:pointer; }
/* Unified header "add" button — one create language across the tool. Sits on the
   right of any sheet / panel / page header (+ EVENT, + PEOPLE, + ADD, + NEW ITEM).
   Uppercase mono, ghost fill; the leading + is tinted by the section accent so each
   button still reads to its domain while sharing one shape. */
.tk-addbtn{ display:inline-flex; align-items:center; gap:5px; font-family:var(--tk-mono,'JetBrains Mono',monospace);
  font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; line-height:1; white-space:nowrap;
  padding:5px 11px; border:1px solid var(--btn-line); background:var(--btn-bg); color:var(--txt2);
  cursor:pointer; border-radius:0; transition:background .12s,border-color .12s,color .12s; }
.tk-addbtn:hover{ background:var(--surf); border-color:var(--add-accent,var(--txt3)); color:var(--txt); }
.tk-addbtn__p{ color:var(--add-accent,currentColor); font-size:13px; font-weight:800; line-height:0; }
/* right-side cluster inside a .reg-head (add button + view-all link) */
.reg-rt{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; }
.reg-rt .reg-total{ margin:0; }
/* role convenience classes — set the accent the head/number derive from */
.tk-sheet--items{     --tk-sec:var(--tk-sec-items); }
.tk-sheet--schedule{  --tk-sec:var(--tk-sec-schedule); }
.tk-sheet--people{    --tk-sec:var(--tk-sec-people); }
.tk-sheet--stats{     --tk-sec:var(--tk-sec-stats); }
.tk-sheet--info{      --tk-sec:var(--tk-sec-info); }
.tk-sheet--attention{ --tk-sec:var(--tk-sec-attention); }

/* --- section divider label --- */
.tk-seclabel{
  display:flex; align-items:center; gap:10px; font-family:var(--tk-mono); font-size:10.5px;
  font-weight:700; letter-spacing:1.8px; text-transform:uppercase; color:var(--tk-tx2); margin:26px 0 14px;
}
.tk-seclabel__d{ width:7px; height:7px; background:var(--tk-ink); transform:rotate(45deg); }
.tk-seclabel::after{ content:""; flex:1; height:1px; background:var(--tk-line); }

/* --- hero metric tile --- */
.tk-tile{ border:1px solid var(--tk-line); background:var(--tk-surf); box-shadow:var(--tk-sh);
  padding:18px 20px; position:relative; display:flex; flex-direction:column; gap:5px; }
.tk-tile::before{ content:""; position:absolute; top:-1px; left:-1px; width:8px; height:8px;
  border:1.5px solid var(--tk-ink); border-right:0; border-bottom:0; }
.tk-tile__lab{ font-family:var(--tk-mono); font-size:9.5px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--tk-tx3); }
.tk-tile__big{ font-family:var(--tk-mono); font-size:var(--tk-fs-metric); font-weight:700;
  letter-spacing:-2px; line-height:.92; }
.tk-tile__note{ font-size:var(--tk-fs-sm); color:var(--tk-tx2); }

/* --- gauge ring --- */
.tk-gauge{ width:96px; height:96px; border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  position:relative;
  background:conic-gradient(var(--tk-grn) calc(var(--tk-p,0) * 1%),
    color-mix(in srgb, var(--tk-ink) 14%, transparent) 0); }
.tk-gauge::after{ content:""; position:absolute; inset:9px; border-radius:50%; background:var(--tk-surf); }
.tk-gauge__v{ position:relative; text-align:center; }
.tk-gauge__v b{ font-family:var(--tk-mono); font-size:24px; font-weight:700; }
.tk-gauge__v span{ font-size:9px; color:var(--tk-tx3); display:block; }

/* --- stat strip --- */
.tk-strip{ display:inline-flex; align-items:stretch; border:1px solid var(--tk-line);
  background:var(--tk-surf); box-shadow:var(--tk-sh); }
.tk-strip__ic{ display:grid; place-items:center; width:42px; border-right:1px solid var(--tk-line); color:var(--tk-ink); font-size:16px; }
.tk-strip__st{ padding:11px 20px; border-right:1px solid var(--tk-line); display:flex; align-items:baseline; gap:7px; }
.tk-strip__st:last-child{ border-right:0; }
.tk-strip__st b{ font-family:var(--tk-mono); font-size:var(--tk-fs-stat); font-weight:700; letter-spacing:-.5px; }
.tk-strip__st span{ font-family:var(--tk-mono); font-size:var(--tk-fs-2xs); font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:var(--tk-tx3); }

/* --- tables (matrix + attendance) --- */
.tk-table{ width:100%; border-collapse:collapse; font-size:var(--tk-fs-sm); }
.tk-table th{ font-family:var(--tk-mono); font-size:9.5px; font-weight:700; letter-spacing:.8px;
  color:var(--tk-tx3); padding:10px 6px; text-align:center; border-bottom:1px solid var(--tk-line); }
.tk-table th.tk-l, .tk-table td.tk-l{ text-align:left; padding-left:16px; }
.tk-table th.tk-r, .tk-table td.tk-r{ text-align:right; padding-right:16px; }
.tk-table td{ padding:11px 6px; text-align:center; border-bottom:1px solid var(--tk-grid); color:var(--tk-tx3); }
.tk-table tr:last-child td{ border-bottom:0; }
.tk-table td.tk-l{ color:var(--tk-tx); font-weight:600; }
.tk-table__tot{ color:var(--tk-ink); font-weight:700; font-family:var(--tk-mono); }
.tk-table__foot td{ font-family:var(--tk-mono); font-weight:700; color:var(--tk-tx); border-top:1px solid var(--tk-line); }
.tk-check{ color:var(--tk-grn); font-weight:800; }

/* org chips (category identity colors) + attended toggle */
.tk-chip{ display:inline-block; font-family:var(--tk-mono); font-size:var(--tk-fs-2xs); font-weight:700;
  letter-spacing:.6px; text-transform:uppercase; padding:3px 9px; }
.tk-chip--blue{ color:#3f7bd6; background:rgba(63,123,214,.13); }
.tk-chip--red{ color:#cf5f3f; background:rgba(207,95,63,.13); }
.tk-chip--green{ color:#5a9a44; background:rgba(90,154,68,.14); }
.tk-tag2{ font-family:var(--tk-mono); font-size:var(--tk-fs-2xs); color:var(--tk-tx2); background:var(--tk-panel); padding:2px 7px; }
.tk-toggle{ display:inline-flex; align-items:center; gap:7px; font-family:var(--tk-mono); font-size:var(--tk-fs-xs);
  font-weight:700; border:1px solid var(--tk-line); padding:4px 10px; cursor:pointer; color:var(--tk-tx3); }
.tk-toggle__box{ width:10px; height:10px; border:1px solid currentColor; }
.tk-toggle[aria-pressed="true"]{ color:var(--tk-grn); border-color:var(--tk-grn); }
.tk-toggle[aria-pressed="true"] .tk-toggle__box{ background:var(--tk-grn); }

/* --- badges / tags --- */
.tk-tag{ font-family:var(--tk-mono); font-size:var(--tk-fs-2xs); font-weight:700; letter-spacing:.5px;
  text-transform:uppercase; padding:2px 7px; border:1px solid; }
.tk-tag--over{ color:var(--tk-red); border-color:var(--tk-red); }
.tk-tag--due{ color:var(--tk-ink); border-color:var(--tk-line); }
.tk-tag--done{ color:var(--tk-grn); border-color:color-mix(in srgb, var(--tk-grn) 40%, transparent); }
.tk-tag--muted{ color:var(--tk-tx3); border-color:var(--tk-line); }

/* --- progress bars (hatched track) --- */
.tk-barrow{ display:flex; align-items:center; gap:12px; }
.tk-barrow__lab{ width:96px; font-size:var(--tk-fs-sm); color:var(--tk-tx2); }
.tk-bar{ flex:1; height:14px; border:1px solid var(--tk-line); display:flex;
  background:repeating-linear-gradient(45deg, transparent, transparent 4px, var(--tk-grid) 4px, var(--tk-grid) 5px); }
.tk-bar i{ display:block; height:100%; }
.tk-bar .tk-c{ background:var(--tk-grn); }
.tk-bar .tk-o{ background:var(--tk-ink); opacity:.45; }

/* --- timeline --- */
.tk-tl{ position:relative; height:50px; margin:6px 8px 14px; }
.tk-tl__axis{ position:absolute; top:32px; left:0; right:0; height:1px; background:var(--tk-line); }
.tk-tl__tick{ position:absolute; top:28px; width:1px; height:9px; background:var(--tk-tx3); }
.tk-tl__nub{ position:absolute; top:28px; width:9px; height:9px; transform:translateX(-50%) rotate(45deg); }
.tk-tl__today{ position:absolute; top:6px; bottom:8px; border-left:1px dashed var(--tk-red); }
.tk-tl__today span{ position:absolute; top:-4px; left:5px; font-family:var(--tk-mono); font-size:9px;
  font-weight:700; color:var(--tk-red); }

/* --- form fields --- */
.tk-field{ margin-top:var(--tk-sp-3); }
.tk-field > label{ font-family:var(--tk-mono); font-size:9px; font-weight:700; letter-spacing:1px;
  text-transform:uppercase; color:var(--tk-tx3); display:block; margin-bottom:5px; }
.tk-input{ width:100%; height:35px; border:1px solid var(--tk-line); background:var(--tk-bg); color:var(--tk-tx);
  padding:0 12px; font:inherit; font-size:var(--tk-fs-sm); display:flex; align-items:center; }
.tk-input::placeholder{ color:var(--tk-tx3); }
.tk-input--ph{ color:var(--tk-tx3); font-family:var(--tk-mono); }
.tk-seg{ display:inline-flex; border:1px solid var(--tk-line); }
.tk-seg button{ border:0; border-right:1px solid var(--tk-line); background:transparent; color:var(--tk-tx2);
  font-family:var(--tk-mono); font-size:var(--tk-fs-xs); font-weight:600; letter-spacing:.4px;
  text-transform:uppercase; padding:7px 13px; cursor:pointer; }
.tk-seg button:last-child{ border-right:0; }
.tk-seg button[aria-pressed="true"]{ background:var(--tk-panel); color:var(--tk-ink); }

/* --- action item / issue --- */
.tk-issues{ border:1px solid var(--tk-line); background:var(--tk-panel); }
.tk-issues__head{ display:flex; align-items:center; gap:12px; padding:11px 16px; border-bottom:1px solid var(--tk-line);
  font-family:var(--tk-mono); font-size:var(--tk-fs-sm); font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.tk-issues__no{ color:var(--tk-ink); }
.tk-cbadge{ font-family:var(--tk-mono); font-size:var(--tk-fs-2xs); font-weight:700; padding:3px 9px; letter-spacing:.5px; }
.tk-cbadge--cl{ color:var(--tk-grn); background:color-mix(in srgb, var(--tk-grn) 16%, transparent); }
.tk-cbadge--op{ color:var(--tk-amber); background:color-mix(in srgb, var(--tk-amber) 18%, transparent); }
.tk-item{ padding:16px; border-bottom:1px solid var(--tk-line); }
.tk-item:last-child{ border-bottom:0; }
.tk-item__row{ display:grid; grid-template-columns:96px 1fr 170px 96px; gap:14px; align-items:start; }
.tk-iid{ font-family:var(--tk-mono); font-size:var(--tk-fs-xs); font-weight:700; color:var(--tk-ink);
  border:1px solid var(--tk-line); padding:3px 7px; display:inline-block; }
.tk-idate{ font-family:var(--tk-mono); font-size:var(--tk-fs-xs); color:var(--tk-tx2); border:1px solid var(--tk-line);
  padding:5px 9px; margin-top:8px; display:inline-block; background:var(--tk-bg); }
.tk-ibox{ border:1px solid var(--tk-line); background:var(--tk-bg); padding:9px 12px; font-size:var(--tk-fs-sm);
  color:var(--tk-tx); min-height:40px; }
.tk-iresp{ border:1px solid var(--tk-line); background:var(--tk-bg); padding:7px 11px; font-size:var(--tk-fs-sm); color:var(--tk-tx); }
.tk-istat{ display:inline-flex; align-items:center; gap:7px; font-family:var(--tk-mono); font-size:var(--tk-fs-xs);
  font-weight:700; border:1px solid var(--tk-line); padding:6px 10px; color:var(--tk-amber); }
.tk-istat--cl{ color:var(--tk-grn); }
.tk-istat__cv{ margin-left:auto; color:var(--tk-tx3); }

/* history chips + closed sub-items + annotation note */
.tk-history__l{ font-family:var(--tk-mono); font-size:9px; font-weight:700; letter-spacing:1.5px;
  color:var(--tk-tx3); text-transform:uppercase; margin:14px 0 7px; }
.tk-hchips{ display:flex; flex-wrap:wrap; gap:6px; }
.tk-hc{ font-family:var(--tk-mono); font-size:var(--tk-fs-2xs); padding:3px 8px; border:1px solid var(--tk-line); color:var(--tk-amber); }
.tk-hc--cl{ color:var(--tk-grn); border-color:color-mix(in srgb, var(--tk-grn) 40%, transparent); }
.tk-subs{ margin:14px 0 0 14px; padding-left:16px; border-left:1px dashed var(--tk-line);
  display:flex; flex-direction:column; gap:10px; }
.tk-subs--closed > .tk-sub{ opacity:.62; }
.tk-sub{ display:grid; grid-template-columns:90px 1fr 150px 70px; gap:12px; align-items:center; }
.tk-link{ font-family:var(--tk-mono); font-size:10.5px; font-weight:600; letter-spacing:.5px;
  text-transform:uppercase; color:var(--tk-tx2); cursor:pointer; }
.tk-link:hover{ color:var(--tk-ink); }
.tk-note{ border:1px solid var(--tk-line); border-top:2px solid var(--tk-amber); background:var(--tk-surf); margin-top:16px; }
.tk-note__h{ font-family:var(--tk-mono); font-size:9.5px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase;
  color:var(--tk-amber); padding:8px 12px; border-bottom:1px solid var(--tk-line); }
.tk-note__b{ padding:11px 12px; font-size:var(--tk-fs-sm); color:var(--tk-tx); font-style:italic; }

/* --- WorkLog: timer, task board, log entry --- */
.tk-clock{ font-family:var(--tk-mono); font-size:38px; font-weight:700; letter-spacing:2px; text-align:center; color:var(--tk-tx); }
.tk-taskcol{ padding:15px 17px; border-right:1px solid var(--tk-line); }
.tk-taskcol:last-child{ border-right:0; }
.tk-taskcol__h{ display:flex; align-items:center; gap:9px; font-family:var(--tk-mono); font-size:var(--tk-fs-sm);
  font-weight:700; letter-spacing:.4px; text-transform:uppercase; margin-bottom:10px; }
.tk-taskcol__pd{ width:8px; height:8px; transform:rotate(45deg); }
.tk-taskcol__ct{ margin-left:auto; color:var(--tk-tx3); }
.tk-glab{ font-family:var(--tk-mono); font-size:9px; font-weight:700; letter-spacing:1.5px; color:var(--tk-tx3); margin:13px 0 7px; }
.tk-glab--over{ color:var(--tk-red); }
.tk-task{ display:flex; gap:10px; align-items:flex-start; padding:8px 0; border-top:1px solid var(--tk-grid); }
.tk-checkbox{ width:16px; height:16px; border:1.5px solid var(--tk-line); flex:0 0 auto; margin-top:1px; cursor:pointer;
  display:grid; place-items:center; font-size:11px; color:transparent; }
.tk-checkbox[aria-checked="true"]{ background:var(--tk-grn); border-color:var(--tk-grn); color:#fff; }
.tk-task__t{ font-size:var(--tk-fs-sm); font-weight:600; }
.tk-task__t--done{ color:var(--tk-tx3); text-decoration:line-through; }
.tk-entry{ display:flex; gap:16px; padding:14px 16px; border:1px solid var(--tk-line);
  border-left:2px solid var(--tk-ink); background:var(--tk-surf); box-shadow:var(--tk-sh); }
.tk-entry + .tk-entry{ margin-top:10px; }
.tk-entry--nonbill{ border-left-color:var(--tk-tx3); }
.tk-entry__hrs{ font-family:var(--tk-mono); font-size:21px; font-weight:700; }
.tk-entry__rng{ font-family:var(--tk-mono); font-size:var(--tk-fs-2xs); color:var(--tk-tx3); }

/* --- utility --- */
.tk-frow{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; padding:18px 16px; }
.tk-row{ display:flex; align-items:center; }
.tk-done-bar{ display:flex; justify-content:flex-end; margin-top:26px; }

/* ============================================================================
   TIMELINE VISUALIZATIONS ("tlx-" layer)
   Ported from docs/Timeline Visualizations/design_handoff_timeline_visualizations/
   tl-styles.css. Consumes only tk-* tokens so everything retints with
   data-tk-app / data-tk-mode. Tweak axes (data-attrs on .tlx-root):
     data-tlx-marker  diamond | square
     data-tlx-motion  inert | subtle | expressive
     data-tlx-glow    0 | 1
     data-tlx-hatch   0 | 1
   ============================================================================ */

/* --- host shim -------------------------------------------------------------
   The production app's markup doesn't live inside a .tk-app frame, so each
   timeline panel carries its own token-providing wrapper:
     <div class="tk-app tlx-host" data-tk-app="…" data-tk-mode="…">
   The shim neutralizes .tk-app's page chrome (grid background, flex layout)
   so only the tokens + tk components apply inside the host panel. */
.tk-app.tlx-host{ background:none; display:block; min-height:0; margin:0 0 12px;
  container-type:inline-size; container-name:tlxhost; }

/* --- frame / toolbar / legend -------------------------------------------- */
.tlx-frame{ position:relative; }
.tlx-toolbar{ display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--tk-line); flex-wrap:wrap; }
.tlx-legend{ display:flex; align-items:center; gap:14px; }
.tlx-legend span{ display:inline-flex; align-items:center; gap:6px;
  font-family:var(--tk-mono); font-size:8.5px; font-weight:700; letter-spacing:1px;
  color:var(--tk-tx3); }
.tlx-lg{ width:8px; height:8px; display:inline-block; transform:rotate(45deg); flex:0 0 auto; }
.tlx-lg.is-open{ background:var(--tk-amber); }
.tlx-lg.is-overdue{ background:var(--tk-red); }
.tlx-lg.is-closed{ background:var(--tk-grn); }
.tlx-lg.is-mtg{ background:var(--tk-ink); }
.tlx-lg.is-bill{ background:var(--tk-ink); transform:none; }
.tlx-lg.is-nonbill{ transform:none;
  background:repeating-linear-gradient(45deg, transparent, transparent 2px, var(--tk-tx3) 2px, var(--tk-tx3) 3px);
  border:1px solid var(--tk-line); }
.tlx-lg.is-strata{ transform:none; border-top:1.5px solid var(--tk-grn);
  background:repeating-linear-gradient(45deg, transparent, transparent 2px,
    color-mix(in srgb, var(--tk-grn) 45%, transparent) 2px, color-mix(in srgb, var(--tk-grn) 45%, transparent) 3px); }
.tlx-hint{ font-family:var(--tk-mono); font-size:8.5px; font-weight:700; letter-spacing:1.4px;
  color:var(--tk-tx3); padding:9px 16px; border-top:1px solid var(--tk-grid); }
.tlx-zoom button{ min-width:44px; }
.tlx-viewswitch button{ padding:4px 9px; font-size:9.5px; }
.tk-panel__head .tlx-viewswitch{ margin:-4px 0; }

/* --- viz canvas ------------------------------------------------------------ */
.tlx-viz{ position:relative; overflow:hidden; cursor:crosshair;
  user-select:none; -webkit-user-select:none; touch-action:none; }
.tlx-canvas{ position:relative; }
.tlx-ruler{ position:relative; height:30px; border-bottom:1px solid var(--tk-line); }
.tlx-tick{ position:absolute; bottom:0; width:1px; height:6px; background:var(--tk-line); }
.tlx-tick.is-major{ height:10px; background:var(--tk-tx3); }
.tlx-tick.is-sub{ height:4px; }
.tlx-tick span{ position:absolute; bottom:11px; left:4px; font-family:var(--tk-mono);
  font-size:9px; font-weight:700; letter-spacing:.8px; color:var(--tk-tx3); white-space:nowrap; }

/* today + scrub cursors */
.tlx-today{ position:absolute; top:0; bottom:0; border-left:2px dashed var(--tk-red);
  z-index:4; pointer-events:none; }
.tlx-today b{ position:absolute; top:3px; left:5px; font-family:var(--tk-mono);
  font-size:9px; font-weight:700; letter-spacing:1px; color:var(--tk-red); white-space:nowrap; }
.tlx-today b.is-flip{ left:auto; right:5px; }
/* off-screen today: edge chip pointing the way back (strip/survey, panned away) */
.tlx-today-edge{ position:absolute; top:3px; z-index:8; pointer-events:none;
  font-family:var(--tk-mono); font-size:8.5px; font-weight:700; letter-spacing:1px;
  color:var(--tk-red); opacity:.8; }
.tlx-today-edge.is-l{ left:4px; }
.tlx-today-edge.is-r{ right:4px; }
.tlx-scan{ position:absolute; top:0; bottom:0; width:1px; background:var(--tk-ink);
  opacity:.55; z-index:5; pointer-events:none; }
.tlx-read{ position:absolute; z-index:9; pointer-events:none; background:var(--tk-surf);
  border:1px solid var(--tk-line); border-top:2px solid var(--tk-ink);
  box-shadow:var(--tk-sh); padding:8px 11px; min-width:150px; }
.tlx-read div{ font-family:var(--tk-mono); font-size:9.5px; font-weight:500;
  letter-spacing:.6px; color:var(--tk-tx2); line-height:1.8; white-space:nowrap; }
.tlx-read .tlx-read__h{ color:var(--tk-ink); font-weight:700; letter-spacing:1.2px; }

/* meetings */
.tlx-mtgrow{ position:relative; height:16px; }
.tlx-mtg{ position:absolute; top:3px; pointer-events:none; }
.tlx-mtg i{ display:block; width:7px; height:7px; background:var(--tk-ink);
  transform:translateX(-50%) rotate(45deg); }
.tlx-mtg.is-future i{ background:transparent; border:1px solid var(--tk-ink); }
.tlx-mtg span{ position:absolute; top:0; left:7px; font-family:var(--tk-mono);
  font-size:8px; font-weight:700; letter-spacing:.6px; color:var(--tk-tx3); }
.tlx-mtg--axis{ top:auto; }

/* --- view 1 · drafting strip ------------------------------------------------ */
.tlx-lane{ position:absolute; left:0; right:0; border-bottom:1px solid var(--tk-grid); }
.tlx-lane__lab{ position:absolute; left:10px; top:4px; z-index:3; display:flex;
  align-items:center; gap:7px; font-family:var(--tk-mono); font-size:9px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; color:var(--tk-tx3); pointer-events:none; }
.tlx-lane__lab i{ width:6px; height:6px; background:var(--tk-ink); transform:rotate(45deg); }
.tlx-lane__lab em{ font-style:normal; color:var(--tk-tx3); font-weight:500; }
.tlx-lane__floor{ position:absolute; left:0; right:0; height:9px;
  background:repeating-linear-gradient(45deg, transparent, transparent 4px, var(--tk-grid) 4px, var(--tk-grid) 5px); }
/* WL project identity chip (user-picked hex colors, not tk-chip categories) */
.tlx-lane__chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--tk-mono);
  font-size:var(--tk-fs-2xs); font-weight:700; letter-spacing:.6px; text-transform:uppercase;
  padding:2px 7px; background:var(--tk-panel); color:var(--tk-tx2); }
.tlx-lane__chip i{ width:7px; height:7px; flex:0 0 auto; transform:none; background:currentColor; }

.tlx-it{ position:absolute; left:0; right:0; height:15px; cursor:pointer; }
.tlx-it__span{ position:absolute; top:7px; border-top:1px solid; }
.tlx-it__open{ position:absolute; top:5px; width:5px; height:5px; border:1px solid; background:var(--tk-surf); }
.tlx-it__lapse{ position:absolute; top:7px; border-top:1px dashed var(--tk-red); }
.tlx-nub{ position:absolute; top:3px; width:9px; height:9px; transform:rotate(45deg);
  display:grid; place-items:center; }
.tlx-nub b{ transform:rotate(-45deg); font-size:7px; line-height:1; color:#fff; font-weight:800; }
.tlx-it.is-open .tlx-it__span, .tlx-it.is-open .tlx-it__open{ border-color:var(--tk-amber); }
.tlx-it.is-open .tlx-nub{ background:var(--tk-amber); }
.tlx-it.is-overdue .tlx-it__span, .tlx-it.is-overdue .tlx-it__open{ border-color:var(--tk-red); }
.tlx-it.is-overdue .tlx-nub{ background:var(--tk-red); }
.tlx-it.is-closed{ opacity:.72; }
.tlx-it.is-closed .tlx-it__span, .tlx-it.is-closed .tlx-it__open{ border-color:var(--tk-grn); }
.tlx-it.is-closed .tlx-nub{ background:var(--tk-grn); }
.tlx-it.is-hot{ z-index:6; opacity:1; }
.tlx-it.is-hot .tlx-nub{ outline:1px solid var(--tk-tx); outline-offset:2px; }

/* WL strip: day bars / sessions / task nubs */
.tlx-dbar{ position:absolute; display:flex; flex-direction:column; justify-content:flex-end; cursor:pointer; }
.tlx-dbar i, .tlx-ground i{ display:block; width:100%; }
.tlx-dbar .is-bill, .tlx-ground .is-bill{ background:var(--tk-ink); }
.tlx-dbar .is-nonbill, .tlx-ground .is-nonbill{
  background:repeating-linear-gradient(45deg, transparent, transparent 3px, var(--tk-tx3) 3px, var(--tk-tx3) 4px);
  border:1px solid var(--tk-grid); border-bottom:0; }
.tlx-sess{ position:absolute; height:18px; cursor:pointer;
  background:repeating-linear-gradient(45deg, transparent, transparent 3px, var(--tk-tx3) 3px, var(--tk-tx3) 4px);
  border:1px solid var(--tk-line); }
.tlx-sess.is-bill{ background:var(--tk-ink); border-color:var(--tk-ink); }
.tlx-sess--deep{ height:30px; }
.tlx-tnub{ position:absolute; width:9px; height:9px; transform:rotate(45deg);
  display:grid; place-items:center; cursor:pointer; z-index:3; }
.tlx-tnub b{ transform:rotate(-45deg); font-size:7px; line-height:1; color:#fff; font-weight:800; }
.tlx-tnub.is-open{ background:var(--tk-amber); }
.tlx-tnub.is-overdue{ background:var(--tk-red); }
.tlx-tnub.is-closed{ background:var(--tk-grn); }

/* --- callout ---------------------------------------------------------------- */
.tlx-callout{ position:absolute; z-index:12; transform:translateY(-100%); pointer-events:none;
  background:var(--tk-surf); border:1px solid var(--tk-line); border-top:2px solid var(--tk-ink);
  box-shadow:var(--tk-sh); padding:9px 11px; }
.tlx-callout.is-pinned{ border-top-color:var(--tk-amber); }
.tlx-callout__leader{ position:absolute; bottom:-9px; width:1px; height:9px; background:var(--tk-tx3); }
.tlx-callout__row{ display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
.tlx-cid{ font-family:var(--tk-mono); font-size:10px; font-weight:700; color:var(--tk-ink);
  border:1px solid var(--tk-line); padding:1px 5px; }
.tlx-callout__t{ font-size:var(--tk-fs-sm); font-weight:600; color:var(--tk-tx); line-height:1.35; }
.tlx-callout__meta{ font-family:var(--tk-mono); font-size:8.5px; font-weight:600;
  letter-spacing:.8px; color:var(--tk-tx3); margin-top:5px; }

/* --- view 2 · sectional survey ------------------------------------------ */
.tlx-datum{ position:absolute; left:0; right:0; height:1px; background:var(--tk-tx3); z-index:2; }
.tlx-datum__lab{ position:absolute; right:10px; font-family:var(--tk-mono); font-size:8px;
  font-weight:700; letter-spacing:1.6px; color:var(--tk-tx3); z-index:2; pointer-events:none; }
.tlx-stratum{ position:absolute; border-top:1.5px solid var(--tk-grn);
  background:repeating-linear-gradient(45deg, transparent, transparent 3px,
    color-mix(in srgb, var(--tk-grn) 38%, transparent) 3px, color-mix(in srgb, var(--tk-grn) 38%, transparent) 4px); }
.tlx-ground{ position:absolute; display:flex; flex-direction:column; cursor:pointer; }
.tlx-float{ position:absolute; top:0; bottom:0; width:0; }
.tlx-float__stem{ position:absolute; left:0; width:1px; background:var(--tk-line); }
.tlx-float.is-open .tlx-tnub{ background:var(--tk-amber); }
.tlx-float.is-overdue .tlx-tnub{ background:var(--tk-red); }
.tlx-float.is-closed .tlx-tnub{ background:var(--tk-grn); }
.tlx-float.is-overdue .tlx-float__stem{ background:color-mix(in srgb, var(--tk-red) 45%, transparent); }
.tlx-float .tlx-tnub.is-abs{ left:-4.5px; }
.tlx-float.is-overdue .tlx-tnub{ outline:1px solid color-mix(in srgb, var(--tk-red) 45%, transparent); outline-offset:2px; }

/* --- view 3 · lens rail --------------------------------------------------- */
.tlx-viz--lens{ cursor:crosshair; }
.tlx-rail{ position:absolute; left:0; right:0; height:2px;
  background:color-mix(in srgb, var(--tk-ink) 55%, transparent); z-index:1; }
.tlx-lenszone{ position:absolute; top:24px; bottom:22px; background:var(--tk-panel);
  border-left:1px dashed var(--tk-line); border-right:1px dashed var(--tk-line); }
/* locked lens — edges pulse, thicken, and HOLD until unlocked */
.tlx-lenszone.is-locked{
  border-left-style:solid; border-right-style:solid;
  border-left-width:3px; border-right-width:3px;
  border-left-color:color-mix(in srgb, var(--tk-ink) 65%, transparent);
  border-right-color:color-mix(in srgb, var(--tk-ink) 65%, transparent); }
.tlx-bracket.is-locked{ border-top-width:3px; }
.tlx-bracket.is-l.is-locked{ border-left-width:3px; }
.tlx-bracket.is-r.is-locked{ border-right-width:3px; }
@media (prefers-reduced-motion: no-preference){
  .tlx-lenszone.is-locked{ animation:tlx-lockpulse .65s ease-out 2; }
}
@keyframes tlx-lockpulse{
  0%{ border-left-width:1px; border-right-width:1px; }
  45%{ border-left-width:6px; border-right-width:6px; }
  100%{ border-left-width:3px; border-right-width:3px; } }
.tlx-bracket{ position:absolute; top:6px; width:9px; height:11px; z-index:3;
  border-top:1.5px solid var(--tk-ink); }
.tlx-bracket.is-l{ border-left:1.5px solid var(--tk-ink); }
.tlx-bracket.is-r{ border-right:1.5px solid var(--tk-ink); transform:translateX(-100%); }
.tlx-bdate{ position:absolute; bottom:24px; z-index:9; font-family:var(--tk-mono); font-size:9px;
  font-weight:800; letter-spacing:1px; color:var(--tk-tx); white-space:nowrap; pointer-events:none;
  background:var(--tk-surf); border:1px solid color-mix(in srgb, var(--tk-ink) 45%, transparent);
  padding:2px 5px; }
.tlx-bdate.is-l{ transform:translateX(-100%) translateX(-6px); }
.tlx-bdate.is-r{ margin-left:6px; }
.tlx-lenslab{ position:absolute; bottom:44px; left:12px; z-index:8;
  font-family:var(--tk-mono); font-size:8.5px; font-weight:700; letter-spacing:1.4px;
  color:var(--tk-ink); white-space:nowrap; pointer-events:none;
  background:var(--tk-surf); border:1px solid var(--tk-line); padding:2px 7px; }
.tlx-rtick{ position:absolute; width:2px; height:14px; transform:translateX(-1px); cursor:pointer; }
.tlx-rtick::after{ content:""; position:absolute; inset:-5px -6px; } /* fat hit target */
.tlx-rtick.is-open{ background:var(--tk-amber); }
.tlx-rtick.is-overdue{ background:var(--tk-red); }
.tlx-rtick.is-closed{ background:var(--tk-grn); opacity:.65; }
/* "examined" state — markers whose cards are currently unfolded get an accent halo */
.tlx-rtick.is-lit{ width:3px; transform:translateX(-1.5px) scaleY(1.5);
  box-shadow:0 0 8px color-mix(in srgb, var(--tk-ink) 80%, transparent),
             0 0 2px color-mix(in srgb, var(--tk-ink) 90%, transparent); }
.tlx-float.is-lit .tlx-float__stem{ width:2px; margin-left:-.5px;
  background:color-mix(in srgb, var(--tk-ink) 80%, transparent);
  box-shadow:0 0 7px color-mix(in srgb, var(--tk-ink) 70%, transparent); }
.tlx-float.is-lit .tlx-tnub{ transform:rotate(45deg) scale(1.3); filter:brightness(1.12);
  outline:1.5px solid var(--tk-ink); outline-offset:2px;
  box-shadow:0 0 9px color-mix(in srgb, var(--tk-ink) 70%, transparent); z-index:5; }
.tlx-root[data-tlx-marker="square"] .tlx-float.is-lit .tlx-tnub{ transform:scale(1.3); }
.tlx-lenscenter{ position:absolute; width:1px; height:32px; background:var(--tk-ink); z-index:3; }
.tlx-count{ position:absolute; z-index:9; transform:translateX(-50%); cursor:pointer;
  font-family:var(--tk-mono); font-size:8px; font-weight:700; letter-spacing:.5px; line-height:1.5;
  color:var(--tk-tx2); background:var(--tk-surf); border:1px solid var(--tk-line); padding:0 3px; }
.tlx-count:hover{ color:var(--tk-tx); border-color:color-mix(in srgb, var(--tk-ink) 55%, transparent); }
.tlx-count.is-on{ color:var(--tk-ink); border-color:var(--tk-ink); }
.tlx-viz--lens .tlx-float{ z-index:8; }
.tlx-lcard{ position:absolute; z-index:7; background:var(--tk-surf); border:1px solid var(--tk-line);
  box-shadow:var(--tk-sh); padding:8px 10px; }
.tlx-viz--lens .tlx-lcard{ cursor:pointer; }
.tlx-viz--lens .tlx-lcard:hover{ border-color:color-mix(in srgb, var(--tk-ink) 45%, transparent); }
.tlx-lcard.is-selected{ border-color:var(--tk-ink); }
.tlx-lcard.is-expanded{ z-index:12; }
.tlx-lcard.is-expanded .tlx-callout__t{ white-space:normal; }
.tlx-lcard__foot{ margin-top:8px; padding-top:7px; border-top:1px solid var(--tk-grid);
  font-family:var(--tk-mono); font-size:9px; font-weight:700; letter-spacing:.8px;
  text-transform:uppercase; color:var(--tk-ink);
  display:flex; justify-content:space-between; gap:10px; }
.tlx-lcard__foot span{ cursor:pointer; }
.tlx-lcard__foot span:hover{ text-decoration:underline; }
.tlx-hovchip{ position:absolute; z-index:11; transform:translateX(-50%); pointer-events:none;
  font-family:var(--tk-mono); font-size:8.5px; font-weight:700; letter-spacing:.8px;
  color:var(--tk-tx); background:var(--tk-surf); border:1px solid var(--tk-line);
  padding:2px 6px; white-space:nowrap; }
/* click-to-pair ping — marker and card pulse together on selection */
@media (prefers-reduced-motion: no-preference){
  .tlx-rtick.is-sel{ animation:tlx-tickping .45s ease-out 2; }
  .tlx-float.is-sel .tlx-tnub{ animation:tlx-nubping .45s ease-out 2; }
  .tlx-lcard.is-selected{ animation:tlx-cardping .45s ease-out 2; }
}
.tlx-rtick.is-sel{ outline:1.5px solid var(--tk-ink); outline-offset:2px; }
.tlx-float.is-sel .tlx-tnub{ outline-color:var(--tk-tx); }
@keyframes tlx-tickping{ 0%,100%{ outline-offset:2px; } 50%{ outline-offset:6px; } }
@keyframes tlx-nubping{ 0%,100%{ outline-offset:2px; } 50%{ outline-offset:7px; } }
@keyframes tlx-cardping{ 0%,100%{ box-shadow:var(--tk-sh); }
  50%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--tk-ink) 30%, transparent); } }
.tlx-lcard .tlx-callout__t{ font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tlx-lcard.is-open{ border-top:2px solid var(--tk-amber); }
.tlx-lcard.is-overdue{ border-top:2px solid var(--tk-red); }
.tlx-lcard.is-closed{ border-top:2px solid var(--tk-grn); }
.tlx-lcard__lead{ position:absolute; pointer-events:none; overflow:visible; }
.tlx-lcard__lead.is-up{ top:100%; }
.tlx-lcard__lead.is-dn{ bottom:100%; }
.tlx-lcard__lead line{ stroke:var(--tk-tx3); stroke-width:1; stroke-dasharray:2 3; }
.tlx-ground--rail .tlx-ground__v{ font-family:var(--tk-mono); font-size:8.5px; font-weight:700;
  color:var(--tk-tx2); padding:3px 0 0 4px; letter-spacing:.5px; }
.tlx-lruler{ position:relative; }
.tlx-viz--lens .tlx-lruler{ position:absolute; left:0; right:0; bottom:0; height:20px;
  border-top:1px solid var(--tk-grid); }
.tlx-viz--lens .tlx-lruler .tlx-tick{ bottom:auto; top:0; height:5px; }
.tlx-viz--lens .tlx-lruler .tlx-tick span{ bottom:auto; top:5px; }
.tlx-lock{ display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  font-family:var(--tk-mono); font-size:10px; font-weight:700; letter-spacing:.6px;
  text-transform:uppercase; border:1px solid var(--tk-line); background:transparent;
  color:var(--tk-tx3); padding:6px 11px; }
.tlx-lock.is-on{ color:var(--tk-ink); border-color:var(--tk-ink); }
.tlx-lock.is-on .tk-toggle__box{ background:var(--tk-ink); }

/* --- tweak: marker shape ---------------------------------------------------- */
.tlx-root[data-tlx-marker="square"] .tlx-nub,
.tlx-root[data-tlx-marker="square"] .tlx-tnub,
.tlx-root[data-tlx-marker="square"] .tlx-mtg i,
.tlx-root[data-tlx-marker="square"] .tlx-lg.is-open,
.tlx-root[data-tlx-marker="square"] .tlx-lg.is-overdue,
.tlx-root[data-tlx-marker="square"] .tlx-lg.is-closed,
.tlx-root[data-tlx-marker="square"] .tlx-lg.is-mtg{ transform:none; }
.tlx-root[data-tlx-marker="square"] .tlx-mtg i{ transform:translateX(-50%); }
.tlx-root[data-tlx-marker="square"] .tlx-nub b,
.tlx-root[data-tlx-marker="square"] .tlx-tnub b{ transform:none; }

/* --- tweak: hatch off --------------------------------------------------------- */
.tlx-root[data-tlx-hatch="0"] .tlx-stratum{
  background:color-mix(in srgb, var(--tk-grn) 16%, transparent); }
.tlx-root[data-tlx-hatch="0"] .tlx-dbar .is-nonbill,
.tlx-root[data-tlx-hatch="0"] .tlx-ground .is-nonbill,
.tlx-root[data-tlx-hatch="0"] .tlx-sess:not(.is-bill){
  background:color-mix(in srgb, var(--tk-tx3) 38%, transparent); }
.tlx-root[data-tlx-hatch="0"] .tlx-lane__floor{ background:var(--tk-panel); }

/* --- tweak: motion -------------------------------------------------------------- */
.tlx-root[data-tlx-motion="subtle"] .tlx-dbar i,
.tlx-root[data-tlx-motion="subtle"] .tlx-ground i,
.tlx-root[data-tlx-motion="expressive"] .tlx-dbar i,
.tlx-root[data-tlx-motion="expressive"] .tlx-ground i{ transition:height .22s; }
.tlx-root[data-tlx-motion="subtle"] .tlx-nub,
.tlx-root[data-tlx-motion="subtle"] .tlx-tnub,
.tlx-root[data-tlx-motion="subtle"] .tlx-rtick,
.tlx-root[data-tlx-motion="subtle"] .tlx-float__stem,
.tlx-root[data-tlx-motion="expressive"] .tlx-nub,
.tlx-root[data-tlx-motion="expressive"] .tlx-tnub,
.tlx-root[data-tlx-motion="expressive"] .tlx-rtick,
.tlx-root[data-tlx-motion="expressive"] .tlx-float__stem{
  transition:outline-color .15s, background .15s, box-shadow .18s, transform .18s, width .18s, filter .18s; }
.tlx-root[data-tlx-motion="subtle"] .tlx-callout,
.tlx-root[data-tlx-motion="expressive"] .tlx-callout{ animation:tlx-fade .16s ease-out; }
.tlx-root[data-tlx-motion="expressive"] .tlx-lcard{ transition:left .14s ease-out, top .14s ease-out; }
@media (prefers-reduced-motion: no-preference){
  .tlx-root[data-tlx-motion="expressive"] .tlx-tnub.is-overdue,
  .tlx-root[data-tlx-motion="expressive"] .tlx-nub.is-overdue,
  .tlx-root[data-tlx-motion="expressive"] .tlx-it.is-overdue .tlx-nub{
    animation:tlx-pulse 1.6s ease-in-out infinite; }
}
@keyframes tlx-fade{ from{ opacity:0; } to{ opacity:1; } }
@keyframes tlx-pulse{ 0%,100%{ outline:1px solid transparent; outline-offset:2px; }
  50%{ outline:1px solid color-mix(in srgb, var(--tk-red) 65%, transparent); outline-offset:3px; } }

/* --- tweak: accent glow ----------------------------------------------------------- */
.tlx-root[data-tlx-glow="1"] .tlx-scan{
  box-shadow:0 0 9px color-mix(in srgb, var(--tk-ink) 75%, transparent); opacity:.8; }
.tlx-root[data-tlx-glow="1"] .tlx-lenscenter,
.tlx-root[data-tlx-glow="1"] .tlx-bracket{
  box-shadow:0 0 8px color-mix(in srgb, var(--tk-ink) 60%, transparent); }
.tlx-root[data-tlx-glow="1"] .tlx-nub.is-overdue,
.tlx-root[data-tlx-glow="1"] .tlx-tnub.is-overdue{
  box-shadow:0 0 7px color-mix(in srgb, var(--tk-red) 70%, transparent); }
.tlx-root[data-tlx-glow="1"] .tlx-rail{
  box-shadow:0 0 6px color-mix(in srgb, var(--tk-ink) 35%, transparent); }
.tlx-root[data-tlx-glow="1"] .tlx-today{
  box-shadow:0 0 7px color-mix(in srgb, var(--tk-red) 40%, transparent); }

/* --- week/month notches on bare timeline lines (mini-bay, rail, datum) ------- */
.tlx-linemark{ position:absolute; width:1px; z-index:1; pointer-events:none;
  background:color-mix(in srgb, var(--tk-tx3) 55%, transparent); }
.tlx-linemark.is-mo{ width:2px; background:var(--tk-tx3); }
.tlx-linemark__lab{ position:absolute; transform:translateX(-50%); pointer-events:none;
  font-family:var(--tk-mono); font-size:8px; font-weight:700; letter-spacing:1px;
  color:var(--tk-tx3); }

/* --- timeline bay (collapsed/expanded dock) --------------------------------- */
.tlx-bayhead{ cursor:pointer; user-select:none; }
.tlx-bayhead:hover{ background:var(--tk-panel); }
.tlx-openbar{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:6px 8px 0; }
.tlx-collapsebtn{ font-family:var(--tk-mono); font-size:9px; font-weight:700; letter-spacing:.8px;
  padding:4px 9px; background:var(--tk-bg); border:1px solid var(--tk-line); color:var(--tk-tx2); cursor:pointer; }
.tlx-collapsebtn:hover{ background:var(--tk-panel); color:var(--tk-tx); }
.tlx-baychev{ color:var(--tk-tx3); font-size:10px; margin-left:2px; }
.tlx-bayhint{ font-family:var(--tk-mono); font-size:8.5px; font-weight:700; letter-spacing:1.2px;
  color:var(--tk-tx3); }
.tlx-minibay{ position:relative; height:92px; overflow:hidden; cursor:pointer; }
.tlx-minibay:hover{ background:var(--tk-panel); }
.tlx-minibay__line{ position:absolute; left:0; right:0; height:1px;
  background:color-mix(in srgb, var(--tk-ink) 45%, transparent); }
.tlx-minibay__bar{ position:absolute; background:var(--tk-ink); opacity:.7; }
.tlx-minibay__sum{ position:absolute; left:14px; top:9px; font-family:var(--tk-mono);
  font-size:8.5px; font-weight:700; letter-spacing:1.2px; color:var(--tk-tx2); }
.tlx-minibay__cta{ position:absolute; right:14px; top:9px; font-family:var(--tk-mono);
  font-size:8.5px; font-weight:700; letter-spacing:1.2px; color:var(--tk-ink); }
.tlx-root[data-tlx-motion="subtle"] .tlx-bayopen,
.tlx-root[data-tlx-motion="expressive"] .tlx-bayopen{
  overflow:hidden; animation:tlx-bayslide .34s ease-out; }
@keyframes tlx-bayslide{ from{ max-height:92px; opacity:.35; } to{ max-height:600px; opacity:1; } }

/* navigation flash — card footer links scroll to the live row and pulse it */
.tlx-rowflash{ animation:tlx-rowflash 1.4s ease-out 1; }
@keyframes tlx-rowflash{ 0%{ background:color-mix(in srgb, #c2912f 28%, transparent); }
  100%{ background:transparent; } }

/* --- responsive (container queries on the timeline host) --------------------- */
@container tlxhost (max-width: 760px){
  .tlx-legend{ display:none; }                    /* toolbars: keys drop first */
}
@container tlxhost (max-width: 560px){
  .tlx-toolbar{ gap:8px; padding:10px 12px; }
  .tlx-datum__lab{ display:none; }
  .tlx-lenslab{ max-width:78%; overflow:hidden; text-overflow:ellipsis; }
}