/* Track: weekly immersion logger (/track/), leaderboard (/track/leaderboard/), profile charts
   (js/fazon-track-charts.js) and the shared SVG chart helpers (js/fazon-charts.js).
   Loaded only by those pages (fazon-track-charts.js injects it on the profile page). */

/* ---- colours: dark is the default theme, .light-mode on <body> switches ----
   Category hues = the validated categorical slots blue / aqua / yellow / magenta / violet,
   plus a brown for Anki (between aqua and yellow in the stack; off-palette, stepped per mode).
   dataviz validator on the six in stack order, white / #1a1a1a surfaces: adjacent CVD ΔE ≥ 10.7,
   normal-vision ≥ 16.3 (brown ↔ Kyōtsu orange is close in dark mode, but they never share a
   chart). The eight series slots (leaderboard users, sub-categories) follow the same validated order. */
:root {
    --tk-active: #3987e5;
    --tk-passive: #199e70;
    --tk-anki: #96562f;
    --tk-phonetic: #c98500;
    --tk-output: #d55181;
    --tk-soroban: #9085e9;
    --tk-kotu: #3987e5;
    --tk-kyotsu: #d95926;
    --tk-s1: #3987e5; --tk-s2: #d95926; --tk-s3: #199e70; --tk-s4: #c98500;
    --tk-s5: #d55181; --tk-s6: #008300; --tk-s7: #9085e9; --tk-s8: #e66767;
    --tk-other: #7a7a76;
    --fc-est: #ff5370;
    --fc-grid: #262626;
    --fc-axis: #444;
    --fc-ink: #eee;
    --fc-muted: #9a9a9a;
    --fc-tip-bg: #1d1d1d;
}
.light-mode {
    --tk-active: #2a78d6;
    --tk-passive: #1baf7a;
    --tk-anki: #8b4513;
    --tk-phonetic: #eda100;
    --tk-output: #e87ba4;
    --tk-soroban: #4a3aa7;
    --tk-kotu: #2a78d6;
    --tk-kyotsu: #eb6834;
    --tk-s1: #2a78d6; --tk-s2: #eb6834; --tk-s3: #1baf7a; --tk-s4: #eda100;
    --tk-s5: #e87ba4; --tk-s6: #008300; --tk-s7: #4a3aa7; --tk-s8: #e34948;
    --tk-other: #9a9993;
    --fc-est: #be123c;
    --fc-grid: #d8d8d8;
    --fc-axis: #b8b8b8;
    --fc-ink: #111;
    --fc-muted: #666;
    --fc-tip-bg: #fff;
}

/* ---- charts (fazon-charts.js) ---- */
.fc { position: relative; min-width: 0; }
/* dot outlines match what the chart sits on; set here (not :root) so it follows .light-mode on <body> */
.fc { --fc-surface: var(--bg-color, #111); }
.tk-card .fc { --fc-surface: var(--fz-surface, #1a1a1a); }
.fc-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.fc-svg { display: block; overflow: visible; font-family: 'JetBrains Mono', monospace; touch-action: pan-y; }
.fc-svg:focus { outline: none; }
.fc-svg:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; border-radius: 4px; }
.fc-grid { stroke: var(--fc-grid); stroke-width: 1; shape-rendering: crispEdges; }
.fc-base { stroke: var(--fc-axis); stroke-width: 1; shape-rendering: crispEdges; }
.fc-tick { fill: var(--fc-muted); font-size: 11px; }
.fc-lbl { fill: var(--fc-ink); font-size: 12px; }
.fc-lbl.me { font-weight: 700; }
a .fc-lbl { text-decoration: none; }
a:hover .fc-lbl, a:focus .fc-lbl { fill: var(--fz-accent); }
.fc-val { fill: var(--fc-muted); font-size: 11px; }
.fc-hit { fill: transparent; cursor: default; }
.fc-col { transition: opacity 0.1s ease; }
.fc-dim .fc-col { opacity: 0.45; }
.fc-dim .fc-col.on { opacity: 1; }
.fc-bar.on { filter: brightness(1.15); }
.fc-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.fc-dot { stroke: var(--fc-surface); stroke-width: 2; }
.fc-cross { stroke: var(--fc-axis); stroke-width: 1; shape-rendering: crispEdges; pointer-events: none; }
.fc-hover-dot { stroke: var(--fc-surface); stroke-width: 2; pointer-events: none; }
/* estimates across missing data (lines estimateGaps): dashed red, hollow hover dot, italic tooltip row.
   --fc-est: a rose-red kept apart from the Kyōtsu orange — light #be123c clears the validator against
   blue + orange (normal-vision ΔE 17.6, CVD 16.4); in dark no red is ≥ 3:1 on the surface and ≥ 15 from
   the orange, so #ff5370 trades lightness for it (ΔE 11.0, CVD 8.1) and the dash + legend + "estimate"
   label carry the distinction (never hue alone). */
.fc-est { stroke-width: 2; stroke-dasharray: 5 4; stroke-linecap: butt; }
.fc-est-dot { fill: var(--fc-surface); }
.fc-sw.line.est { width: 18px; border-radius: 0; }
.fc-tip-r.est { font-style: italic; }
.fc-tip-r.est .fc-tip-k { border-radius: 0; }
.fc-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.8em; margin: 0 0 8px; }
.fc-legend:empty { display: none; }
.fc-li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.fc-sw { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.fc-sw.line { height: 2px; width: 14px; border-radius: 1px; }
.fc-tip {
    position: absolute; z-index: 5; pointer-events: none; min-width: 120px; max-width: min(280px, 90%);
    padding: 7px 10px; font-size: 0.78em; line-height: 1.45; color: var(--fc-ink);
    background: var(--fc-tip-bg); border: 1px solid var(--fz-line); border-radius: 6px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.light-mode .fc-tip { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
.fc-tip[hidden] { display: none; }
.fc-tip-t { color: var(--fc-muted); margin-bottom: 3px; }
.fc-tip-r { display: flex; align-items: center; gap: 7px; }
.fc-tip-r b { font-variant-numeric: tabular-nums; }
.fc-tip-r span:last-child { color: var(--fc-muted); overflow-wrap: anywhere; }
.fc-tip-k { flex: none; width: 12px; height: 2px; border-radius: 1px; }
.fc-tip-f { margin-top: 3px; padding-top: 3px; border-top: 1px solid var(--fz-line); }
.fc-empty { color: var(--fz-muted); font-size: 0.85em; text-align: center; padding: 24px 0; }

/* ---- shared bits ---- */
.tk { margin-top: 30px; }
.tk h2 { font-size: 1.05em; text-align: left; margin: 0 0 10px; }
.tk-msg { text-align: center; color: var(--fz-muted); margin-top: 50px; }
.tk-card { background: var(--fz-surface); border: 1px solid var(--fz-line); border-radius: 10px; padding: 16px 18px; margin-top: 16px; }
.tk-intro { max-width: 36em; margin: 0 auto; text-align: center; }
.tk-intro p { margin: 1em 0; }
.tk-intro .fz-login-pill { display: inline-block; }
.tk-seg { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tk-seg button {
    font: inherit; font-size: 0.8em; padding: 4px 10px; border-radius: 999px; cursor: pointer;
    color: var(--text-color); background: transparent; border: 1px solid var(--fz-line);
}
.tk-seg button:hover { border-color: var(--fz-accent); }
.tk-seg button[aria-pressed="true"] { background: var(--fz-accent); border-color: var(--fz-accent); color: #fff; }
.tk-seg button:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }
.tk-initial { display: inline-flex; align-items: center; justify-content: center; flex: none; border-radius: 50%; background: var(--fz-accent); color: #fff; font-size: 0.8em; }
.tk-dotc { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.tk-small { font-size: 0.8em; }
.tk-input-sm { width: auto; padding: 0.3em 0.5em; font-size: 0.85em; }
.tk input[type="date"] { color-scheme: dark; }
.light-mode .tk input[type="date"] { color-scheme: light; }

/* ---- logger: week navigator ---- */
.tk-nav { display: flex; align-items: center; gap: 10px; justify-content: center; }
.tk-nav-btn {
    flex: none; width: 38px; height: 38px; border-radius: 50%; font: inherit; font-size: 1.2em; cursor: pointer;
    color: var(--text-color); background: transparent; border: 1px solid var(--fz-line);
}
.tk-nav-btn:hover:not(:disabled) { border-color: var(--fz-accent); }
.tk-nav-btn:disabled { opacity: 0.3; cursor: default; }
.tk-nav-mid { text-align: center; min-width: 0; flex: 1; max-width: 26em; }
.tk-week { font-weight: 700; font-size: 1.05em; }
.tk-utc { font-size: 0.75em; color: var(--fz-muted); }
.tk-nav-tools { display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; font-size: 0.85em; }
.tk-nav-tools label { color: var(--fz-muted); }
.tk-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 6px; margin-top: 14px; -webkit-overflow-scrolling: touch; }
.tk-chip {
    flex: 1 0 52px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 4px;
    font: inherit; font-size: 0.72em; line-height: 1.3; cursor: pointer; color: var(--fz-muted);
    background: transparent; border: 1px dashed var(--fz-line); border-radius: 6px;
}
.tk-chip b { color: var(--text-color); font-weight: 400; }
.tk-chip.filled { border-style: solid; color: var(--text-color); }
.tk-chip.filled b { font-weight: 700; }
.tk-chip.cur { border-color: var(--fz-accent); background: var(--fz-accent-soft); }
.tk-chip:hover { border-color: var(--fz-accent); }
.tk-chip:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 1px; }

/* ---- logger: categories ---- */
.tk-cat-h { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.tk-cat-h h3 { margin: 0; font-size: 1em; flex: 1; min-width: 0; }
.tk-cat-tot { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-cat-tot.bad { color: var(--fz-bad); }
.tk-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-top: 1px solid var(--fz-line); position: relative; }
.tk-row-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.92em; }
.tk-row-name.none { color: var(--fz-muted); }
.tk-tag { font-size: 0.72em; color: var(--fz-muted); border: 1px solid var(--fz-line); border-radius: 4px; padding: 0 5px; margin-left: 6px; white-space: nowrap; }
.tk-h { width: 6.5em; flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.tk-h.bad, .tk-sc.bad { border-color: var(--fz-bad); }
.tk-unit { width: 1em; flex: none; color: var(--fz-muted); font-size: 0.85em; }
.tk-menu-btn {
    flex: none; box-sizing: border-box; width: 30px; height: 30px; padding: 0; border-radius: 6px; font: inherit; line-height: 1; cursor: pointer;
    color: var(--fz-muted); background: transparent; border: 1px solid transparent;
}
.tk-menu-btn:hover, .tk-menu-btn[aria-expanded="true"] { border-color: var(--fz-line); color: var(--text-color); }
.tk-menu-btn.ph { visibility: hidden; }
.tk-menu {
    position: absolute; right: 0; top: 100%; z-index: 10; min-width: 160px; display: flex; flex-direction: column;
    background: var(--fz-surface); border: 1px solid var(--fz-line); border-radius: 8px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.light-mode .tk-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); }
.tk-menu[hidden] { display: none; }
.tk-menu button { font: inherit; font-size: 0.85em; text-align: left; padding: 8px 12px; cursor: pointer; color: var(--text-color); background: none; border: 0; }
.tk-menu button + button { border-top: 1px solid var(--fz-line); }
.tk-menu button:hover, .tk-menu button:focus-visible { background: var(--fz-accent-soft); outline: none; }
.tk-menu button.danger { color: var(--fz-bad); }
.tk-err { color: var(--fz-bad); font-size: 0.8em; margin: 2px 0 4px; }
.tk-err:empty { display: none; }
.tk-cat-foot { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding-top: 6px; border-top: 1px solid var(--fz-line); font-size: 0.85em; }
.tk-add { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; width: 100%; }
.tk-add .fz-input { flex: 1; min-width: 10em; }
.tk-arch { width: 100%; font-size: 0.95em; }
.tk-arch-row { display: flex; align-items: center; gap: 10px; padding: 3px 0; }
.tk-arch-row span { flex: 1; min-width: 0; overflow-wrap: anywhere; color: var(--fz-muted); }
.tk-rename { display: flex; gap: 6px; flex: 1; min-width: 0; flex-wrap: wrap; }
.tk-rename .fz-input { flex: 1; min-width: 8em; }

/* ---- logger: daily scores ---- */
.tk-scores { display: grid; grid-template-columns: minmax(5.5em, max-content) minmax(0, 11em) minmax(0, 11em); justify-content: start; gap: 6px 10px; align-items: center; }
.tk-scores .hd { font-size: 0.78em; color: var(--fz-muted); }
.tk-day { font-size: 0.85em; white-space: nowrap; margin-bottom: 1.15em; }   /* = the .tk-hint line under each input, so the label centres on the input */
.tk-sc-cell { min-width: 0; }
.tk-sc { text-align: right; font-variant-numeric: tabular-nums; }
.tk-hint { display: block; font-size: 0.7em; line-height: 1.4; color: var(--fz-muted); text-align: right; min-height: 1.4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* same height empty or not, so a row's inputs line up */
.tk-avg { font-weight: 700; font-size: 0.9em; text-align: right; font-variant-numeric: tabular-nums; margin-bottom: 1.09em; }
.tk-scores-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-top: 12px; font-size: 0.85em; }

/* ---- logger: summary + save bar + settings ---- */
.tk-sum-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 6px; font-size: 0.82em; }
.tk-sum-foot label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.tk-count.over { color: var(--fz-bad); }
.tk input[type="checkbox"] { accent-color: var(--fz-accent); width: 16px; height: 16px; margin: 0; }
.tk-savebar {
    position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 16px; padding: 10px 14px; background: var(--fz-surface); border: 1px solid var(--fz-line); border-radius: 10px;
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.35);
}
.light-mode .tk-savebar { box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.08); }
.tk-status { flex: 1; min-width: 10em; font-size: 0.85em; color: var(--fz-muted); }
.tk-status.dirty { color: var(--fz-accent); }
.tk-status.bad { color: var(--fz-bad); }
.tk-settings { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; font-size: 0.88em; }
.tk-settings label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }

/* ==== logger: ratings, goals, stopwatch, admin end-week (fazon-track.js initLogger) ==== */
.tk [hidden] { display: none !important; }   /* the flex rules below must not beat the hidden attribute */
.tk-ico { display: block; flex: none; }
.fz-btn.tk-danger { background: var(--fz-bad); border-color: var(--fz-bad); color: #fff; }
.fz-btn.tk-danger:hover:not(:disabled) { filter: brightness(1.08); }
/* in-page confirmation (goals, end week) */
.tk-confirm { padding: 10px 12px; border: 1px solid var(--fz-accent); border-radius: 8px; background: var(--fz-accent-soft); }
.tk-confirm p { margin: 0 0 8px; font-size: 0.88em; }
.tk-confirm-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* rating row at the foot of each category card: 😞 😐 👌 🔥, unpicked ones greyed out */
.tk-rate { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--fz-line); }
.tk-rate-l { flex: 1; min-width: 0; font-size: 0.92em; color: var(--fz-muted); }
.tk-rate-btns { display: flex; gap: 4px; }
.tk-rate-btn {
    width: 38px; height: 32px; padding: 0; border-radius: 8px; font: inherit; font-size: 1.05em; line-height: 1; cursor: pointer;
    background: transparent; border: 1px solid var(--fz-line); filter: grayscale(1); opacity: 0.5;
    transition: opacity 0.1s ease, filter 0.1s ease;
}
.tk-rate-btn:hover { opacity: 0.9; filter: none; border-color: var(--fz-accent); }
.tk-rate-btn[aria-pressed="true"] { opacity: 1; filter: none; background: var(--fz-accent-soft); border-color: var(--fz-accent); }
.tk-rate-btn:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }

/* goal progress under a category's heading */
.tk-goal { margin: 2px 0 10px; }
.tk-goal-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.85em; }
.tk-goal-l { color: var(--fz-muted); min-width: 0; }
.tk-goal-l b { color: var(--text-color); font-variant-numeric: tabular-nums; }
.tk-goal-ic { margin-right: 5px; }
.tk-goal-pct { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tk-goal.met .tk-goal-pct { color: var(--fz-accent); }
.tk-goal.met .tk-goal-pct::before { content: "✓ "; }
.tk-goal-bar { height: 6px; margin-top: 4px; border-radius: 3px; background: var(--fz-line); overflow: hidden; }
.tk-goal-fill { display: block; height: 100%; width: 0; border-radius: 3px; transition: width 0.2s ease; }

/* "Set goals" card + its inline panel */
.tk-goals-h { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; }
.tk-goals-t { display: flex; flex-direction: column; min-width: 0; }
.tk-goals-t span { font-size: 0.8em; }
.tk-goals-note { margin: 8px 0 0; font-size: 0.85em; color: var(--fz-accent); }
.tk-goals-note.bad { color: var(--fz-bad); }
.tk-goals-note:empty { display: none; }
.tk-goals-panel { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--fz-line); }
.tk-goal-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.tk-goal-name { flex: 1; min-width: 0; font-size: 0.92em; overflow-wrap: anywhere; }
.tk-goal-row.locked .tk-goal-name { color: var(--fz-muted); }
.tk-goal-lock { font-size: 0.9em; font-variant-numeric: tabular-nums; color: var(--fz-muted); white-space: nowrap; padding: 0.3em 0; }
.tk-goal-warn { margin: 10px 0; padding: 8px 10px; font-size: 0.82em; border-left: 3px solid var(--tk-phonetic); border-radius: 4px; background: rgba(201, 133, 0, 0.13); }
.tk-goal-warn b { margin-right: 4px; }
.tk-goal-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-goal-acts .tk-confirm { flex: 1; }

/* stopwatch: ▶ in each hours row; the running row gets a line under it */
.tk-sw-start {
    flex: none; box-sizing: border-box; width: 30px; height: 30px; padding: 0 0 0 2px; border-radius: 50%; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--fz-muted); background: transparent; border: 1px solid var(--fz-line);
}
.tk-sw-start:hover { color: var(--fz-accent); border-color: var(--fz-accent); }
.tk-sw-start:focus-visible, .tk-sw-btn:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }
.tk-sw-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0.3em 0.8em; white-space: nowrap; }
.tk-sw-live {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 6px; padding: 6px 8px 6px 10px;
    border-radius: 8px; background: var(--fz-accent-soft);
}
.tk-sw-time { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tk-sw-state { font-size: 0.8em; color: var(--fz-muted); }
.tk-sw-live .tk-sw-state { margin-right: auto; }
.tk-sw-btns { display: flex; gap: 6px; margin-left: auto; }   /* the two buttons wrap together */
.tk-sw-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--fz-bad); animation: tk-sw-pulse 1.4s ease-in-out infinite; }
.paused .tk-sw-dot { background: var(--fz-muted); animation: none; }
@keyframes tk-sw-pulse { 50% { opacity: 0.25; } }
@media (prefers-reduced-motion: reduce) { .tk-sw-dot { animation: none; } }
/* banner at the top of the logger when the stopwatch's row isn't on screen (another week) or a message is due */
.tk-swbar { padding: 10px 14px; border: 1px solid var(--fz-accent); border-radius: 10px; background: var(--fz-surface); box-shadow: inset 0 0 0 100vmax var(--fz-accent-soft); }
.tk-swbar-main { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.tk-swbar-l { flex: 1 1 12em; min-width: 0; font-size: 0.88em; overflow-wrap: anywhere; }
.tk-swbar-btns { display: flex; gap: 6px; margin-left: auto; }
.tk-swbar-msg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 0.85em; color: var(--fz-accent); }
.tk-swbar-msg.bad { color: var(--fz-bad); }
.tk-swbar-msg .fz-linkbtn { text-decoration: underline; }
.tk-swbar-main:not([hidden]) + .tk-swbar-msg { margin-top: 6px; }

/* admin: end the week early */
.tk-admin-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tk-admin-tag { font-size: 0.68em; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--fz-accent); color: var(--fz-accent); }
.tk-admin-line { margin: 0 0 8px; font-size: 0.88em; }
.tk-admin-ended { color: var(--fz-accent); }
.tk-admin-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.tk-admin .tk-confirm { margin-top: 10px; }
.tk-admin .tk-err { margin: 6px 0 0; }
.tk-admin-note { margin: 6px 0 0; font-size: 0.85em; color: var(--fz-accent); }
.tk-admin-note:empty { display: none; }
@media (max-width: 480px) {
    .tk-row { gap: 6px; }
    .tk-rate-btn { width: 36px; }
    .tk-sw-live { gap: 6px; padding: 6px 6px 6px 8px; }
    .tk-sw-btn { padding: 0.3em 0.6em; gap: 5px; }
}
/* ==== end logger: ratings, goals, stopwatch, admin ==== */

/* ---- leaderboard ---- */
.lb-controls { display: flex; flex-direction: column; gap: 10px; }
.lb-ctl { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.lb-ctl > span { font-size: 0.8em; color: var(--fz-muted); min-width: 4.5em; }
.lb-range { font-size: 0.85em; color: var(--fz-muted); margin: 14px 0 0; text-align: center; }
.lb-table-wrap { overflow-x: auto; }
.lb-table { width: 100%; border-collapse: collapse; font-size: 0.9em; }
.lb-table th { text-align: left; font-weight: 400; font-size: 0.82em; color: var(--fz-muted); padding: 4px 8px; border-bottom: 1px solid var(--fz-line); }
.lb-table td { padding: 6px 8px; border-bottom: 1px solid var(--fz-line); vertical-align: middle; }
.lb-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lb-table tr.me td { background: var(--fz-accent-soft); }
.lb-rank { width: 2em; color: var(--fz-muted); }
.lb-user, .lb-user:visited, .light-mode .lb-user, .light-mode .lb-user:visited {
    display: inline-flex; align-items: center; gap: 10px; color: var(--text-color); text-decoration: none; min-width: 0;
}
.lb-user span { overflow-wrap: anywhere; }
.lb-user:hover span { color: var(--fz-accent); }
.lb-graph h3 { font-size: 0.9em; margin: 0 0 8px; }
.lb-graph + .lb-graph { margin-top: 22px; }

/* ---- summaries (leaderboard feed + profile list) ---- */
.sm-list { display: flex; flex-direction: column; gap: 12px; }
.sm-card { border: 1px solid var(--fz-line); border-radius: 10px; padding: 12px 14px; background: var(--fz-surface); }
.sm-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sm-who, .sm-who:visited, .light-mode .sm-who, .light-mode .sm-who:visited { display: inline-flex; align-items: center; gap: 8px; color: var(--text-color); font-weight: 700; min-width: 0; text-decoration: none; }
.sm-who span { overflow-wrap: anywhere; }
.sm-who:hover span { color: var(--fz-accent); }
.sm-week { font-size: 0.8em; color: var(--fz-muted); }
.sm-priv { font-size: 0.75em; color: var(--fz-muted); border: 1px solid var(--fz-line); border-radius: 4px; padding: 0 6px; }
.sm-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.sm-chip { display: inline-flex; align-items: center; font-size: 0.72em; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--fz-line); white-space: nowrap; }
.sm-chip .tk-dotc { width: 7px; height: 7px; margin-right: 5px; }
.sm-text { margin-top: 8px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9em; }
.sm-text.clamped { max-height: 9.6em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.sm-more { margin-top: 4px; font-size: 0.82em; }
.sm-foot { text-align: center; margin-top: 12px; }

/* ---- weekly summaries as sanitized Markdown (js/fazon-md.js; .fz-md-plain = fallback text) ----
   Compact: small headings, modest indents; tables and code blocks scroll inside their own box
   (width 0 + min-width 100%: they add nothing to an enclosing table cell's min-content width). */
.fz-md { --md-code-bg: rgba(255, 255, 255, 0.07); white-space: normal; overflow-wrap: anywhere; line-height: 1.55; min-width: 0; }
.light-mode .fz-md { --md-code-bg: rgba(0, 0, 0, 0.055); }
.fz-md .fz-md-plain { white-space: pre-wrap; }
.fz-md > :first-child { margin-top: 0; }
.fz-md > :last-child { margin-bottom: 0; }
.fz-md p, .fz-md ul, .fz-md ol, .fz-md blockquote, .fz-md pre, .fz-md table { margin: 0 0 0.6em; }
.fz-md h4, .fz-md h5, .fz-md h6 { margin: 0.8em 0 0.3em; line-height: 1.3; font-weight: 700; }
.fz-md h4 { font-size: 1.1em; }
.fz-md h5 { font-size: 1em; }
.fz-md h6 { font-size: 0.95em; color: var(--fz-muted); }
.fz-md ul { padding-left: 1.4em; }
.fz-md ol { padding-left: 1.9em; }
.fz-md li > ul, .fz-md li > ol, .fz-md li > p { margin: 0.15em 0; }
.fz-md li:has(> input[type="checkbox"]) { list-style: none; }
.fz-md li > input[type="checkbox"] { margin: 0 0.4em 0 -1.2em; vertical-align: -0.1em; }
.fz-md blockquote { margin-left: 0; margin-right: 0; padding: 0 0 0 0.8em; border-left: 3px solid var(--fz-line); color: var(--fz-muted); }
.fz-md hr { border: 0; border-top: 1px solid var(--fz-line); margin: 0.8em 0; }
.fz-md a { overflow-wrap: anywhere; }
.fz-md code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; background: var(--md-code-bg); border-radius: 4px; padding: 0.05em 0.3em; }
.fz-md pre { box-sizing: border-box; width: 0; min-width: 100%; max-width: 100%; overflow-x: auto; padding: 0.6em 0.8em; background: var(--md-code-bg); border: 1px solid var(--fz-line); border-radius: 6px; }
.fz-md pre code { display: block; width: max-content; min-width: 100%; padding: 0; background: none; white-space: pre; overflow-wrap: normal; font-size: 0.88em; line-height: 1.45; }
.fz-md table { display: block; box-sizing: border-box; width: 0; min-width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 0.95em; }
.fz-md th, .fz-md td { border: 1px solid var(--fz-line); padding: 0.25em 0.6em; overflow-wrap: normal; word-break: normal; vertical-align: top; }
.fz-md th { font-weight: 700; background: var(--md-code-bg); }
.fz-md th[align="center"], .fz-md td[align="center"] { text-align: center; }
.fz-md th[align="right"], .fz-md td[align="right"] { text-align: right; }

/* logger: Write | Preview + the "Markdown supported" help */
.tk-md-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 6px; }
.tk-mdtabs { display: inline-flex; border: 1px solid var(--fz-line); border-radius: 6px; overflow: hidden; }
.tk-mdtab { background: none; border: 0; padding: 3px 12px; font: inherit; font-size: 0.82em; color: var(--fz-muted); cursor: pointer; }
.tk-mdtab + .tk-mdtab { border-left: 1px solid var(--fz-line); }
.tk-mdtab[aria-selected="true"] { background: var(--fz-accent-soft); color: var(--text-color); font-weight: 700; }
.tk-mdtab:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: -2px; }
.tk-md-help { margin-left: auto; font-size: 0.8em; }
.tk-md-help[open] { flex-basis: 100%; margin-left: 0; }
.tk-md-help summary { cursor: pointer; color: var(--fz-muted); }
.tk-md-help ul { margin: 6px 0; padding-left: 1.2em; }
.tk-md-help li { margin: 2px 0; overflow-wrap: anywhere; }
.tk-md-help code { font-family: inherit; white-space: pre-wrap; background: var(--fz-accent-soft); border-radius: 4px; padding: 0 0.3em; }
.tk-md-help p { margin: 4px 0 0; }
.tk-md-prev { box-sizing: border-box; min-height: 6.5em; margin-top: 0; padding: 0.55em 0.7em; font-size: 0.95em; border: 1px solid var(--fz-line); border-radius: 6px; background: var(--fz-surface); }
#tkSumPanP:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; border-radius: 6px; }

/* ---- profile (FazonTrack.renderProfile) ---- */
.tkp h2 { margin-top: 1.8em; }
.tkp-totals { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-bottom: 4px; }
.tkp-totals div { display: flex; flex-direction: column; min-width: 0; }
.tkp-totals b { font-size: 1.2em; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tkp-totals span { color: var(--fz-muted); font-size: 0.75em; }
.tkp-block { margin-top: 18px; }
.tkp-block-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; margin-bottom: 8px; }
.tkp-block-h h3 { margin: 0; font-size: 0.9em; }
.tkp-link { font-size: 0.82em; margin-top: 8px; }

@media (max-width: 480px) {
    .tk-card { padding: 12px; }
    .tk-h { width: 5.2em; }
    .tk-scores { gap: 6px; }
    .lb-table td, .lb-table th { padding: 5px 4px; }
    .lb-user { gap: 6px; }
}

/* =====================================================================================
   Leaderboard: totals metrics, expandable rows, goal achievers (js/fazon-track.js, initLeaderboard)
   All / Exclude Passive are sums, not categories, so they take no category hue: All is a neutral
   ink, Exclude Passive a cyan that sits outside the six category hues. They only ever colour a
   single-series chart (never side by side with the categories); both ≥ 3:1 on the card surface
   (dataviz validator, #1a1a1a / #fff).
   ===================================================================================== */
:root { --tk-all: #a9a8a1; --tk-nopassive: #00a3bf; }
.light-mode { --tk-all: #6b6a65; --tk-nopassive: #0089a3; }

.lb-note { font-size: 0.78em; color: var(--fz-muted); margin: 4px auto 0; text-align: center; max-width: 40em; }
.lb-table th[aria-sort] { color: var(--text-color); }
.lb-table td.lb-sel { font-weight: 700; }
.lb-unit { font-size: 0.85em; color: var(--fz-muted); }
.lb-table .lb-tg { width: 34px; padding-left: 0; padding-right: 0; text-align: right; }
.lb-toggle {
    width: 30px; height: 30px; padding: 0; border-radius: 6px; font: inherit; line-height: 1; cursor: pointer;
    color: var(--fz-muted); background: transparent; border: 1px solid var(--fz-line);
    display: inline-flex; align-items: center; justify-content: center;
}
.lb-toggle::before { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease; }
.lb-toggle[aria-expanded="true"]::before { transform: translateY(2px) rotate(-135deg); }
.lb-toggle:hover, .lb-toggle[aria-expanded="true"] { border-color: var(--fz-accent); color: var(--text-color); }
.lb-toggle:focus-visible { outline: 2px solid var(--fz-accent); outline-offset: 2px; }
.lb-table tr.lb-row.open td { border-bottom-color: transparent; }
.lb-table tr.lb-det-row > td { padding: 0 8px 12px; }
.lb-table tr.lb-det-row.me > td { background: var(--fz-accent-soft); }
.lb-det { border: 1px solid var(--fz-line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.lb-stats { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; }
.lb-stat { display: flex; flex-direction: column; min-width: 0; }
.lb-stat dt { font-size: 0.75em; color: var(--fz-muted); }
.lb-stat dd { margin: 0; font-weight: 700; font-size: 1.1em; font-variant-numeric: tabular-nums; }
.lb-stat.lb-all dt::before, .lb-stat.lb-nop dt::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; background: var(--tk-all); }
.lb-stat.lb-nop dt::before { background: var(--tk-nopassive); }
.lb-stack { display: flex; gap: 2px; height: 10px; border-radius: 4px; overflow: hidden; }
.lb-stack span { flex: 1 1 0; min-width: 3px; }
.lb-cats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5em, 1fr)); gap: 4px 20px; font-size: 0.88em; }
.lb-cats li { display: flex; align-items: center; gap: 0; min-width: 0; }
.lb-cats li.zero { color: var(--fz-muted); }
.lb-cat-n { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.lb-cat-v { font-variant-numeric: tabular-nums; }
.lb-cats li:not(.zero) .lb-cat-v { font-weight: 700; }
.lb-rate { flex: none; width: 1.6em; text-align: right; }
.lb-sum-h { margin: 0 0 4px; font-size: 0.78em; color: var(--fz-muted); }
.lb-sum .sm-text { margin-top: 0; }
.lb-sum-none { margin: 0; }

.lb-goals h2 { margin-bottom: 4px; }
.lb-goals-intro { margin: 0 0 10px; }
.lb-tier h3 { font-size: 0.82em; font-weight: 400; color: var(--fz-muted); margin: 0 0 4px; }
.lb-tier.t2 { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--fz-line); }
.lb-gl { list-style: none; margin: 0; padding: 0; }
.lb-gi { border-bottom: 1px solid var(--fz-line); }
.lb-gi:last-child { border-bottom: 0; }
.lb-gi.me { background: var(--fz-accent-soft); }
.lb-gi-row { display: flex; align-items: center; gap: 8px 10px; padding: 6px 0; min-width: 0; }
.lb-gi .lb-rank { flex: none; width: 1.6em; text-align: right; color: var(--fz-muted); font-variant-numeric: tabular-nums; font-size: 0.9em; }
.lb-gi-name { flex: 1; min-width: 0; font-size: 0.9em; }
.lb-gi-stats { display: flex; flex-direction: column; align-items: flex-end; flex: none; line-height: 1.25; }
.lb-gpct { font-variant-numeric: tabular-nums; }
.lb-gpct.neg { color: var(--fz-muted); }
.lb-gcnt { font-size: 0.75em; color: var(--fz-muted); white-space: nowrap; }
.lb-gd { list-style: none; margin: 0 0 8px calc(1.6em + 10px); padding: 8px 12px; border: 1px solid var(--fz-line); border-radius: 8px; font-size: 0.85em; display: flex; flex-direction: column; gap: 4px; }
.lb-gd[hidden] { display: none; }
.lb-gd li { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; }
.lb-gd-n { min-width: 5.5em; }
.lb-gd-v { flex: 1; color: var(--fz-muted); font-variant-numeric: tabular-nums; }
.lb-gd-v b { color: var(--text-color); }
.lb-gd-m { flex: none; font-weight: 700; }
.lb-gd li.met .lb-gd-m { color: #4caf50; }
.light-mode .lb-gd li.met .lb-gd-m { color: #2e7d32; }
.lb-gd li.miss .lb-gd-m { color: var(--fz-bad); }

@media (max-width: 480px) {
    .lb-table .lb-wk { display: none; }
    .lb-table .lb-name .fz-av { display: none; }   /* room for the name next to four number columns */
    .lb-table { font-size: 0.85em; }
    .lb-stats { gap: 8px 16px; }
    .lb-table tr.lb-det-row > td { padding: 0 0 10px; }
    .lb-det { padding: 10px; }
    .lb-unit { display: block; }
    .lb-gd { margin-left: 0; padding: 8px 10px; }
    .lb-gd-n { min-width: 4.6em; }
    .lb-gd li { flex-wrap: nowrap; }
    .lb-gd-v { min-width: 0; }
}