/* tks-components.css: the shared component kit for The Kingdom Standard.
 * Needs tks-tokens.css first. Every value here comes from a token.
 * Names follow the Design System in visual-audit-20261008.md so mocks and code match.
 *
 * Base 17: Button, Card, Pill, List Row, Sheet, Tab Bar, Top Bar, Segmented Control,
 *   Stat Tile, Ring, Progress Bar, Empty State (5 data states), Setup-Required Label,
 *   Section Header, Toast, Rank set, Body.
 * Design Review 4: Wheel Picker, Weight Ruler, Choice Card, Signature Pad.
 * Setup and Contract: Chapter Progress, Text Field, Agree Row, Photo Capture Frame, Later Marker.
 * Rank set: Tier Disc, Division Dots, Chevrons, Tier Tag, Tier Frame, Rank Card, Tier Ladder,
 *   Muscle Rank Row, Body Legend, Leaderboard (podium, pinned row), Rank-Up Burst.
 * Measurements: Tape Guide, Tape Ruler, Measurement Row, Trend Line, History Chart,
 *   Body-Fat Result, Due List, Gentle Prompt.
 * Every tappable thing is 44px or more; nothing reads under 11px.
 */

/* ============ Tier themes: set --tier, --tier-2, --tier-glow on any rank component ============ */
.tks-tier--none     { --tier: var(--tks-rank-none);     --tier-2: var(--tks-surface-inset); --tier-glow: var(--tks-text-tertiary); }
.tks-tier--bronze   { --tier: var(--tks-rank-bronze);   --tier-2: var(--tks-rank-bronze-2);   --tier-glow: var(--tks-rank-bronze-glow); }
.tks-tier--iron     { --tier: var(--tks-rank-iron);     --tier-2: var(--tks-rank-iron-2);     --tier-glow: var(--tks-rank-iron-glow); }
.tks-tier--steel    { --tier: var(--tks-rank-steel);    --tier-2: var(--tks-rank-steel-2);    --tier-glow: var(--tks-rank-steel-glow); }
.tks-tier--gold     { --tier: var(--tks-rank-gold);     --tier-2: var(--tks-rank-gold-2);     --tier-glow: var(--tks-rank-gold-glow); }
.tks-tier--spartan  { --tier: var(--tks-rank-spartan);  --tier-2: var(--tks-rank-spartan-2);  --tier-glow: var(--tks-rank-spartan-glow); }
.tks-tier--olympian { --tier: var(--tks-rank-olympian); --tier-2: var(--tks-rank-olympian-2); --tier-glow: var(--tks-rank-olympian-glow); }

/* ============ Type helpers ============ */
.tks-t-hero { font: var(--tks-t-hero); letter-spacing: var(--tks-track-tight); }
.tks-t-display { font: var(--tks-t-display); letter-spacing: var(--tks-track-tight); }
.tks-t-title1 { font: var(--tks-t-title1); letter-spacing: var(--tks-track-tight); }
.tks-t-title2 { font: var(--tks-t-title2); }
.tks-t-title3 { font: var(--tks-t-title3); }
.tks-t-headline { font: var(--tks-t-headline); }
.tks-t-body { font: var(--tks-t-body); }
.tks-t-callout { font: var(--tks-t-callout); }
.tks-t-subhead { font: var(--tks-t-subhead); }
.tks-t-footnote { font: var(--tks-t-footnote); }
.tks-t-caption1 { font: var(--tks-t-caption1); }
.tks-t-caption2 { font: var(--tks-t-caption2); }
.tks-t-eyebrow { font: var(--tks-t-eyebrow); letter-spacing: var(--tks-track-eyebrow); text-transform: uppercase; color: var(--tks-accent); }
.tks-t-numeral { font-variant-numeric: tabular-nums; font-weight: var(--tks-w-heavy); }
.tks-t-scripture { font-family: var(--tks-font-scripture); }
.tks-glow-text { text-shadow: var(--tks-glow-text); }
.tks-text-secondary { color: var(--tks-text-secondary); }
.tks-text-tertiary { color: var(--tks-text-tertiary); }
.tks-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ 1. Button ============ */
.tks-btn {
  --h: var(--tks-btn-m);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--tks-space-2);
  min-height: var(--h); min-width: var(--tks-hit); padding: 0 var(--tks-space-5);
  border: 1px solid transparent; border-radius: var(--tks-r-pill);
  font: var(--tks-t-headline); color: var(--tks-text-primary); background: transparent;
  cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: none; white-space: nowrap;
  transition: transform var(--tks-m-instant) var(--tks-ease-standard), box-shadow var(--tks-m-fast) var(--tks-ease-standard),
              background-color var(--tks-m-fast) var(--tks-ease-standard), opacity var(--tks-m-fast) var(--tks-ease-standard);
}
.tks-btn--l { --h: var(--tks-btn-l); padding: 0 var(--tks-space-6); }
.tks-btn--s { --h: var(--tks-btn-s); padding: 0 var(--tks-space-3); font: var(--tks-t-caption1); }
.tks-btn--s::after { content: ""; position: absolute; inset: -6px 0; } /* 44 hit area */
.tks-btn--block { display: flex; width: 100%; }
.tks-btn--primary { background: var(--tks-accent-grad); color: var(--tks-accent-on); box-shadow: var(--tks-glow-accent); font-weight: var(--tks-w-bold); }
.tks-btn--secondary { background: var(--tks-surface-3); border-color: var(--tks-line-strong); }
.tks-btn--ghost { color: var(--tks-accent-strong); }
.tks-btn--destructive { background: var(--tks-danger-fill); border-color: rgba(248, 113, 113, .32); color: var(--tks-danger); }
.tks-btn--icon { --h: var(--tks-hit); width: var(--tks-hit); padding: 0; border-radius: var(--tks-r-pill); color: var(--tks-text-secondary); }
.tks-btn--icon svg { width: var(--tks-icon-m); height: var(--tks-icon-m); }
.tks-btn:active, .tks-btn.is-pressed { transform: scale(.97); }
.tks-btn--primary:active, .tks-btn--primary.is-pressed { box-shadow: 0 2px 10px rgba(217, 181, 67, .22); }
.tks-btn:focus-visible { outline: none; box-shadow: var(--tks-focus-ring); }
.tks-btn:disabled, .tks-btn[aria-disabled="true"] { opacity: .4; box-shadow: none; cursor: default; transform: none; }
.tks-btn.is-loading { color: transparent; pointer-events: none; }
.tks-btn.is-loading::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid currentColor; border-color: var(--tks-text-primary) transparent var(--tks-text-primary) transparent;
  animation: tks-spin 800ms var(--tks-ease-linear) infinite;
}
.tks-btn--primary.is-loading::before { border-color: var(--tks-accent-on) transparent var(--tks-accent-on) transparent; }
@keyframes tks-spin { to { transform: rotate(360deg); } }

/* Glyph icons: line SVG, 1.75 stroke */
.tks-glyph { width: var(--tks-icon-m); height: var(--tks-icon-m); fill: none; stroke: currentColor; stroke-width: var(--tks-glyph-stroke); stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tks-glyph--s { width: var(--tks-icon-s); height: var(--tks-icon-s); }

/* ============ 2. Card ============ */
.tks-card {
  position: relative; display: block; padding: var(--tks-card-pad);
  background: var(--tks-surface-1); border: 1px solid var(--tks-line); border-radius: var(--tks-r-lg);
  box-shadow: var(--tks-e1); color: var(--tks-text-primary);
}
.tks-card--hero { padding: var(--tks-card-pad-hero); border-radius: var(--tks-r-xl); box-shadow: var(--tks-e2); background: linear-gradient(180deg, var(--tks-surface-2), var(--tks-surface-1)); }
.tks-card--inset { background: var(--tks-surface-inset); border-color: var(--tks-line-neutral); box-shadow: none; border-radius: var(--tks-r-md); }
.tks-card--group { padding: 0; overflow: hidden; }
.tks-card--group > .tks-row + .tks-row { border-top: 1px solid var(--tks-line-neutral); }
.tks-stack { display: grid; gap: var(--tks-card-gap); }

/* Selectable choice Card (Sex Choice Cards, Diet Cards). A real button. */
.tks-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tks-card-gap); }
.tks-choice {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--tks-space-2);
  min-height: 120px; padding: var(--tks-card-pad); text-align: left; cursor: pointer;
  background: var(--tks-surface-1); border: 1px solid var(--tks-line); border-radius: var(--tks-r-lg);
  color: var(--tks-text-primary); font: var(--tks-t-headline);
  transition: background-color var(--tks-m-fast) var(--tks-ease-standard), border-color var(--tks-m-fast) var(--tks-ease-standard), transform var(--tks-m-instant) var(--tks-ease-standard);
}
.tks-choice img, .tks-choice .tks-choice__art { width: var(--tks-art-l); height: var(--tks-art-l); object-fit: contain; }
.tks-choice small { font: var(--tks-t-footnote); color: var(--tks-text-tertiary); }
.tks-choice::after { /* check slot: empty circle unselected */
  content: ""; position: absolute; top: 12px; right: 12px; width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--tks-text-disabled);
}
.tks-choice:active { transform: scale(.98); }
.tks-choice:focus-visible { outline: none; box-shadow: var(--tks-focus-ring); }
.tks-choice[aria-pressed="true"], .tks-choice[aria-checked="true"], .tks-choice.is-selected {
  background: var(--tks-accent-fill); border-color: var(--tks-line-strong);
}
.tks-choice[aria-pressed="true"]::after, .tks-choice[aria-checked="true"]::after, .tks-choice.is-selected::after {
  border: 0; background: var(--tks-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231A1208' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;
}
.tks-choice:disabled { opacity: .4; cursor: default; }

/* ============ 3. Pill family ============ */
.tks-pill {
  display: inline-flex; align-items: center; gap: var(--tks-space-1); height: 24px; padding: 0 10px;
  border-radius: var(--tks-r-pill); font: var(--tks-t-caption1); letter-spacing: var(--tks-track-label); white-space: nowrap;
  background: var(--tks-surface-3); color: var(--tks-text-secondary); border: 1px solid var(--tks-line-neutral);
}
.tks-pill--success { background: var(--tks-success-fill); color: var(--tks-success); border-color: transparent; }
.tks-pill--warning { background: var(--tks-warning-fill); color: var(--tks-warning); border-color: transparent; }
.tks-pill--danger  { background: var(--tks-danger-fill);  color: var(--tks-danger);  border-color: transparent; }
.tks-pill--info    { background: var(--tks-info-fill);    color: var(--tks-info);    border-color: transparent; }
.tks-pill--accent  { background: var(--tks-accent-fill);  color: var(--tks-accent-strong); border-color: var(--tks-line); }

/* Filter chip: 32 tall, 44 hit, toggles */
.tks-chip {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--tks-space-3);
  border-radius: var(--tks-r-pill); border: 1px solid var(--tks-line-neutral); background: var(--tks-surface-2);
  color: var(--tks-text-secondary); font: var(--tks-t-footnote); cursor: pointer;
  transition: background-color var(--tks-m-fast) var(--tks-ease-standard), color var(--tks-m-fast) var(--tks-ease-standard);
}
.tks-chip::after { content: ""; position: absolute; inset: -6px 0; }
.tks-chip[aria-pressed="true"], .tks-chip.is-on { background: var(--tks-accent-fill); border-color: var(--tks-line-strong); color: var(--tks-accent-strong); }
.tks-chip[aria-pressed="true"]::before, .tks-chip.is-on::before { content: ""; width: 10px; height: 6px; border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.tks-chip:disabled { opacity: .4; }
.tks-chips { display: flex; flex-wrap: wrap; gap: var(--tks-space-2); }

/* Count badge: gold (Top Bar Option B) */
.tks-badge {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--tks-r-pill);
  background: var(--tks-accent); color: var(--tks-accent-on); font: var(--tks-t-caption2); font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--tks-bg);
}
.tks-badge--dot { min-width: 10px; width: 10px; height: 10px; padding: 0; }

/* Day pill */
.tks-day {
  display: inline-grid; place-items: center; width: 36px; height: 44px; border-radius: var(--tks-r-md);
  font: var(--tks-t-caption1); font-variant-numeric: tabular-nums; color: var(--tks-text-tertiary);
  background: var(--tks-surface-2); border: 1px solid var(--tks-line-neutral);
}
.tks-day--done { background: var(--tks-accent-fill); color: var(--tks-accent-strong); border-color: var(--tks-line); }
.tks-day--today { background: var(--tks-accent-grad); color: var(--tks-accent-on); border-color: transparent; box-shadow: var(--tks-glow-accent); }
.tks-day--grace { border-style: dashed; border-color: var(--tks-line-strong); color: var(--tks-text-secondary); }
.tks-day--missed { color: var(--tks-danger); border-color: rgba(248, 113, 113, .3); }
.tks-day--future { opacity: .55; }

/* Later marker: a step left for later, not failed */
.tks-later {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px; border-radius: var(--tks-r-pill);
  border: 1px dashed var(--tks-line-strong); color: var(--tks-text-secondary); font: var(--tks-t-caption2); letter-spacing: var(--tks-track-label);
  background: transparent; white-space: nowrap;
}
.tks-later::before { content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid currentColor; box-sizing: border-box;
  background: linear-gradient(currentColor, currentColor) 50% 15% / 1.5px 40% no-repeat; }

/* ============ 4. List Row ============ */
.tks-row {
  display: flex; align-items: center; gap: var(--tks-space-3); width: 100%; min-height: var(--tks-row-min);
  padding: var(--tks-space-2) var(--tks-space-4); background: transparent; border: 0; text-align: left;
  color: var(--tks-text-primary); font: var(--tks-t-callout); cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--tks-m-fast) var(--tks-ease-standard);
}
.tks-row:active { background: var(--tks-surface-3); }
.tks-row:focus-visible { outline: none; box-shadow: inset var(--tks-focus-ring); }
.tks-row__lead { flex: none; width: 32px; height: 32px; display: grid; place-items: center; color: var(--tks-accent); }
.tks-row__lead img { width: 100%; height: 100%; object-fit: contain; }
.tks-row__body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.tks-row__title { font: var(--tks-t-headline); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tks-row__sub { font: var(--tks-t-footnote); color: var(--tks-text-tertiary); }
.tks-row__trail { flex: none; display: flex; align-items: center; gap: var(--tks-space-2); color: var(--tks-text-tertiary); font: var(--tks-t-subhead); }
.tks-row__chev { width: 8px; height: 8px; border: solid var(--tks-text-tertiary); border-width: 2px 2px 0 0; transform: rotate(45deg); margin-right: 4px; }
.tks-row.is-selected, .tks-row[aria-checked="true"] { background: var(--tks-accent-fill); }
.tks-row.is-selected .tks-row__check, .tks-row[aria-checked="true"] .tks-row__check { opacity: 1; }
.tks-row__check { width: 14px; height: 8px; border: solid var(--tks-accent); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translateY(-2px); opacity: 0; }
.tks-row:disabled, .tks-row[aria-disabled="true"] { opacity: .4; cursor: default; }
.tks-row__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: var(--dot, var(--tks-accent)); }

/* ============ 5. Sheet ============ */
.tks-scrim { position: fixed; inset: 0; background: var(--tks-scrim); opacity: 0; transition: opacity var(--tks-m-sheet) var(--tks-ease-sheet); }
.tks-scrim.is-open { opacity: 1; }
.tks-sheet {
  position: relative; display: flex; flex-direction: column; max-height: 92vh;
  background: var(--tks-surface-2); border-radius: var(--tks-r-xl) var(--tks-r-xl) 0 0; box-shadow: var(--tks-e3);
  padding-bottom: var(--tks-safe-bottom); color: var(--tks-text-primary);
  transform: translateY(0); transition: transform var(--tks-m-sheet) var(--tks-ease-sheet);
}
.tks-sheet--fixed { position: fixed; left: 0; right: 0; bottom: 0; }
.tks-sheet--closed { transform: translateY(100%); transition-timing-function: var(--tks-ease-exit); }
.tks-sheet--half { height: 50vh; }
.tks-sheet__grabber { width: 36px; height: 5px; margin: 6px auto 0; border-radius: var(--tks-r-pill); background: var(--tks-text-disabled); flex: none; }
.tks-sheet__head {
  display: grid; grid-template-columns: var(--tks-hit) 1fr var(--tks-hit); align-items: center; min-height: 56px; padding: 0 var(--tks-space-2);
  border-bottom: 1px solid var(--tks-line-neutral); backdrop-filter: var(--tks-blur-bar); -webkit-backdrop-filter: var(--tks-blur-bar);
}
.tks-sheet__title { text-align: center; font: var(--tks-t-headline); }
.tks-sheet__body { padding: var(--tks-space-4); overflow: auto; display: grid; gap: var(--tks-card-gap); }
.tks-sheet__foot { padding: var(--tks-space-3) var(--tks-space-4) var(--tks-space-4); display: grid; gap: var(--tks-space-2); }
/* Work sheets (workout, setup, composer): a draft chip shows the work is kept */
.tks-sheet[data-kind="work"] .tks-sheet__head::after { content: none; }
.tks-draft-note { justify-self: center; }

/* ============ 6. Tab Bar ============ */
.tks-tabbar {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; height: calc(var(--tks-tabbar-h) + var(--tks-safe-bottom));
  padding-bottom: var(--tks-safe-bottom); background: var(--tks-surface-glass); backdrop-filter: var(--tks-blur-bar); -webkit-backdrop-filter: var(--tks-blur-bar);
  border-top: 1px solid var(--tks-line-neutral);
}
.tks-tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tks-hit);
  background: none; border: 0; color: var(--tks-text-tertiary); font: var(--tks-t-caption2); cursor: pointer;
  transition: color var(--tks-m-fast) var(--tks-ease-standard);
}
.tks-tab img, .tks-tab svg { width: var(--tks-icon-m); height: var(--tks-icon-m); opacity: .65; transition: opacity var(--tks-m-fast) var(--tks-ease-standard), transform var(--tks-m-fast) var(--tks-ease-standard); }
.tks-tab[aria-selected="true"], .tks-tab.is-active { color: var(--tks-accent-strong); }
.tks-tab[aria-selected="true"] img, .tks-tab[aria-selected="true"] svg, .tks-tab.is-active img { opacity: 1; transform: translateY(-1px); }
.tks-tab .tks-badge { position: absolute; top: 2px; left: calc(50% + 6px); }

/* ============ 7. Top Bar (Option B, one row, 52) ============ */
.tks-topbar {
  display: flex; align-items: center; gap: var(--tks-space-1); height: calc(var(--tks-topbar-h) + var(--tks-safe-top)); padding: var(--tks-safe-top) var(--tks-space-2) 0 var(--tks-space-4);
  background: var(--tks-surface-glass); backdrop-filter: var(--tks-blur-bar); -webkit-backdrop-filter: var(--tks-blur-bar);
  border-bottom: 1px solid var(--tks-line-neutral);
}
.tks-topbar__title { flex: 1; min-width: 0; font: var(--tks-t-title3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tks-topbar__day { display: block; font: var(--tks-t-caption2); color: var(--tks-text-tertiary); letter-spacing: var(--tks-track-label); }
.tks-topbar .tks-btn--icon { position: relative; }
.tks-topbar .tks-btn--icon .tks-badge { position: absolute; top: 4px; right: 2px; }
.tks-capsule {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--tks-space-3); border-radius: var(--tks-r-pill);
  background: var(--tks-accent-fill); border: 1px solid var(--tks-line); color: var(--tks-accent-strong); font: var(--tks-t-caption1); font-variant-numeric: tabular-nums;
  position: relative; min-height: 32px;
}
.tks-capsule::after { content: ""; position: absolute; inset: -6px 0; }

/* ============ 8. Segmented Control ============ */
.tks-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: var(--tks-seg-h); padding: 2px; border-radius: var(--tks-r-md); background: var(--tks-surface-inset); border: 1px solid var(--tks-line-neutral); position: relative; }
.tks-seg button {
  position: relative; border: 0; border-radius: 10px; background: transparent; color: var(--tks-text-tertiary); font: var(--tks-t-footnote); font-weight: var(--tks-w-semibold); cursor: pointer;
  transition: background-color var(--tks-m-fast) var(--tks-ease-standard), color var(--tks-m-fast) var(--tks-ease-standard);
}
.tks-seg button::after { content: ""; position: absolute; inset: min(0px, calc((100% - var(--tks-hit)) / 2)) 0; }
.tks-seg button[aria-pressed="true"], .tks-seg button[aria-selected="true"] { background: var(--tks-surface-3); color: var(--tks-text-primary); box-shadow: var(--tks-e1); }
.tks-seg button:disabled { opacity: .4; }
.tks-seg--inline { display: inline-grid; min-width: 120px; }

/* ============ 9. Stat Tile ============ */
.tks-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--tks-space-2); }
.tks-stat { padding: var(--tks-space-3); background: var(--tks-surface-2); border: 1px solid var(--tks-line-neutral); border-radius: var(--tks-r-md); display: grid; gap: 2px; text-align: center; }
.tks-stat__label { font: var(--tks-t-caption2); color: var(--tks-text-tertiary); letter-spacing: var(--tks-track-label); text-transform: uppercase; }
.tks-stat__value { font: var(--tks-t-title2); font-weight: var(--tks-w-heavy); font-variant-numeric: tabular-nums; }
.tks-stat__unit { font: var(--tks-t-caption1); color: var(--tks-text-tertiary); margin-left: 2px; }
.tks-stat__delta { font: var(--tks-t-caption1); color: var(--tks-success); }
.tks-stat__delta--down { color: var(--tks-danger); }
.tks-stat--empty .tks-stat__value { color: var(--tks-text-disabled); }

/* ============ 10. Ring: svg with pathLength=100; set --p (0 to 100) and --ring color ============
 * --stroke is in viewBox units (the svg is 0 0 36 36, circle r 15), not px: 3.4 draws 6px at 64,
 * 4 draws 5px at 44, 3 draws 10px at 120. A px-sized number here drew the 120 ring 33px thick and
 * clipped it into an octagon. */
.tks-ring { --size: 64px; --stroke: 3.4; --p: 0; --ring: var(--tks-accent); position: relative; width: var(--size); height: var(--size); display: inline-grid; place-items: center; }
.tks-ring--s { --size: 44px; --stroke: 4; }
.tks-ring--l { --size: 120px; --stroke: 3; }
.tks-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tks-ring circle, .tks-ring path { fill: none; stroke-width: var(--stroke); } /* the fill may be an open path so its round caps draw on every engine */
.tks-ring .tks-ring__track { stroke: var(--tks-surface-3); }
.tks-ring .tks-ring__fill { stroke: var(--ring); stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray var(--tks-m-base) var(--tks-ease-standard); }
.tks-ring__label { position: relative; font: var(--tks-t-caption1); font-variant-numeric: tabular-nums; }
.tks-ring--l .tks-ring__label { font: var(--tks-t-title2); font-weight: var(--tks-w-heavy); text-align: center; }
.tks-ring--l .tks-ring__label small { display: block; font: var(--tks-t-caption2); color: var(--tks-text-tertiary); }
.tks-ring.is-complete svg { filter: drop-shadow(0 0 4px var(--ring)); } /* on the svg box, so the glow is not clipped to the circle's filter square */

/* ============ 11. Progress Bar: set --p (0% to 100%) and --bar color ============ */
.tks-bar { --p: 0%; --bar: var(--tks-accent); position: relative; height: var(--tks-bar-h); border-radius: var(--tks-r-pill); background: var(--tks-surface-inset); overflow: hidden; }
.tks-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--bar); transition: width var(--tks-m-base) var(--tks-ease-standard); }
.tks-bar--over::before { background: var(--tks-warning); }
.tks-bar--thick { height: 10px; }
.tks-bar-caption { display: flex; justify-content: space-between; margin-top: 6px; font: var(--tks-t-caption1); }
.tks-bar-caption span + span { color: var(--tks-text-tertiary); font-weight: var(--tks-w-regular); }

/* ============ 12. Empty State: loading, empty, stale, saving (button), failed ============ */
.tks-state { display: grid; justify-items: center; gap: var(--tks-space-2); padding: var(--tks-space-6) var(--tks-space-4); text-align: center; color: var(--tks-text-secondary); font: var(--tks-t-subhead); }
.tks-state img { width: var(--tks-art-xl); height: var(--tks-art-xl); object-fit: contain; opacity: .9; }
.tks-state__title { font: var(--tks-t-headline); color: var(--tks-text-primary); }
.tks-state--failed .tks-state__title { color: var(--tks-danger); }
.tks-skel { display: block; height: 14px; border-radius: var(--tks-r-xs); background: var(--tks-surface-3); position: relative; overflow: hidden; }
.tks-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(229, 220, 196, .06), transparent); animation: tks-shimmer 1400ms var(--tks-ease-linear) infinite; }
.tks-skel--title { height: 20px; width: 60%; }
.tks-skel--block { height: 64px; border-radius: var(--tks-r-md); }
@keyframes tks-shimmer { to { transform: translateX(100%); } }
.tks-stale { display: inline-flex; align-items: center; gap: 6px; font: var(--tks-t-caption1); color: var(--tks-text-tertiary); }
.tks-stale::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tks-warning); }

/* ============ 13. Setup-Required Label: reads exactly "Setup required" ============ */
.tks-setup-label {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tks-hit); padding: 0 var(--tks-space-1);
  background: none; border: 0; color: var(--tks-warning); font: var(--tks-t-footnote); font-weight: var(--tks-w-semibold); cursor: pointer;
}
.tks-setup-label::after { content: ""; width: 6px; height: 6px; border: solid currentColor; border-width: 1.75px 1.75px 0 0; transform: rotate(45deg); }

/* ============ 14. Section Header ============ */
.tks-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tks-space-3); margin: var(--tks-section-gap) 0 var(--tks-space-3); }
.tks-section-head:first-child { margin-top: 0; }
.tks-section-head h2, .tks-section-head h3 { font: var(--tks-t-title3); margin: 0; }
.tks-section-head__action { position: relative; font: var(--tks-t-subhead); color: var(--tks-accent-strong); background: none; border: 0; padding: 0; cursor: pointer; }
.tks-section-head__action::after { content: ""; position: absolute; inset: -12px -8px; }

/* ============ 15. Toast ============ */
.tks-toast {
  display: flex; align-items: center; gap: var(--tks-space-3); min-height: var(--tks-hit); padding: var(--tks-space-2) var(--tks-space-2) var(--tks-space-2) var(--tks-space-4);
  border-radius: var(--tks-r-md); background: var(--tks-surface-3); border: 1px solid var(--tks-line-neutral); box-shadow: var(--tks-e2);
  font: var(--tks-t-subhead); color: var(--tks-text-primary);
  animation: tks-toast-in var(--tks-m-base) var(--tks-ease-standard) both;
}
.tks-toast__msg { flex: 1; }
.tks-toast::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--tks-accent); flex: none; }
.tks-toast--success::before { background: var(--tks-success); }
.tks-toast--danger::before { background: var(--tks-danger); }
.tks-toast__act {
  flex: none; min-height: var(--tks-hit); padding: 0 var(--tks-space-3); border: 0; border-radius: var(--tks-r-pill);
  background: transparent; color: var(--tks-accent-strong); font: var(--tks-t-headline); letter-spacing: .04em; cursor: pointer;
}
.tks-toast__act:focus-visible { outline: none; box-shadow: var(--tks-focus-ring); }
/* The app's confirm sheet (window.tksAsk in tks-mtab.js) */
.tks-ask { position: fixed; inset: 0; z-index: 10060; }
.tks-ask .tks-scrim { position: absolute; }
.tks-ask__sheet { z-index: 1; max-width: 520px; margin: 0 auto; }
.tks-ask__body { padding: var(--tks-space-5) var(--tks-space-5) var(--tks-space-2); display: grid; gap: var(--tks-space-2); }
.tks-ask__sheet { background: linear-gradient(180deg, #17150f, #0e0d0a); border-top: 1px solid rgba(240, 203, 106, .28); }
.tks-ask__title { margin: 0; font: 800 20px/1.2 Montserrat, var(--display, sans-serif); color: #f4edde; }
.tks-ask .tks-btn--destructive { border: 1px solid #d77a6c; background: linear-gradient(180deg, #c9634f, #9d3e2e); color: #fff3ee; box-shadow: 0 8px 20px rgba(157, 62, 46, .3); }
.tks-ask__text { margin: 0; font: var(--tks-t-subhead); color: var(--tks-text-secondary); line-height: 1.45; }
.tks-toast.is-leaving { animation: tks-toast-out var(--tks-m-fast) var(--tks-ease-exit) both; }
@keyframes tks-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tks-toast-out { to { opacity: 0; transform: translateY(8px); } }

/* ============ Chapter Progress: the 7 labelled setup chapters ============ */
.tks-chapters { display: grid; grid-template-columns: repeat(var(--n, 7), 1fr); gap: 4px; padding: 0 var(--tks-side-pad); }
.tks-chapter { display: grid; gap: 6px; justify-items: center; min-width: 0; }
.tks-chapter::before { content: ""; width: 100%; height: 4px; border-radius: var(--tks-r-pill); background: var(--tks-surface-3); transition: background-color var(--tks-m-base) var(--tks-ease-standard); }
.tks-chapter span { font: var(--tks-t-caption2); color: var(--tks-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tks-chapter.is-done::before { background: var(--tks-accent-deep); }
.tks-chapter.is-current::before { background: var(--tks-accent-grad); box-shadow: 0 0 8px rgba(217, 181, 67, .45); }
.tks-chapter.is-current span { color: var(--tks-accent-strong); }
.tks-chapter.is-later::before { background: repeating-linear-gradient(90deg, var(--tks-line-strong) 0 4px, transparent 4px 7px); }

/* ============ Text Field ============ */
.tks-field { display: grid; gap: 6px; }
.tks-field__label { font: var(--tks-t-caption1); color: var(--tks-text-tertiary); letter-spacing: var(--tks-track-label); text-transform: uppercase; display: flex; gap: var(--tks-space-2); align-items: center; }
.tks-field__wrap { position: relative; }
.tks-input {
  width: 100%; min-height: var(--tks-hit); padding: 0 var(--tks-space-4); padding-right: 40px; box-sizing: border-box;
  background: var(--tks-surface-inset); color: var(--tks-text-primary); font: var(--tks-t-callout); /* 16px: no iOS zoom */
  border: 1px solid var(--tks-line-neutral); border-radius: var(--tks-r-md); outline: none;
  transition: border-color var(--tks-m-fast) var(--tks-ease-standard), box-shadow var(--tks-m-fast) var(--tks-ease-standard);
}
.tks-input::placeholder { color: var(--tks-text-tertiary); }
.tks-input:focus { border-color: var(--tks-accent); box-shadow: 0 0 0 3px var(--tks-accent-fill); }
.tks-input:disabled { opacity: .4; }
.tks-field.is-valid .tks-field__wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 12px; height: 6px; margin-top: -5px; border: solid var(--tks-success); border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.tks-field.is-error .tks-input { border-color: var(--tks-danger); }
.tks-field__help { font: var(--tks-t-footnote); color: var(--tks-text-tertiary); }
.tks-field.is-error .tks-field__help { color: var(--tks-danger); }
textarea.tks-input { min-height: 96px; padding-top: var(--tks-space-3); resize: vertical; }

/* ============ Agree Row: checkbox + label + link to the terms ============ */
.tks-agree { display: flex; align-items: center; gap: var(--tks-space-3); min-height: 52px; padding: 0 var(--tks-space-4); border-radius: var(--tks-r-md); background: var(--tks-surface-1); border: 1px solid var(--tks-line); cursor: pointer; font: var(--tks-t-subhead); color: var(--tks-text-primary); }
.tks-agree input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 6px; border: 1.5px solid var(--tks-text-tertiary); background: transparent; display: grid; place-items: center; cursor: pointer; transition: background-color var(--tks-m-fast) var(--tks-ease-standard); }
.tks-agree input::after { content: ""; width: 10px; height: 5px; border: solid var(--tks-accent-on); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.tks-agree input:checked { background: var(--tks-accent); border-color: var(--tks-accent); }
.tks-agree input:checked::after { opacity: 1; }
.tks-agree input:focus-visible { box-shadow: var(--tks-focus-ring); }
.tks-agree:has(input:checked) { border-color: var(--tks-line-strong); background: var(--tks-accent-fill); }
.tks-agree__text { flex: 1; }
.tks-agree__link { position: relative; color: var(--tks-text-tertiary); width: 8px; height: 8px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.tks-agree__link::after { content: ""; position: absolute; inset: -18px; }
.tks-agree__sub { display: block; font: var(--tks-t-footnote); color: var(--tks-text-tertiary); }
.tks-agree--disabled { opacity: .4; pointer-events: none; }

/* ============ Photo Capture Frame ============ */
.tks-photo { display: grid; grid-template-columns: 112px 1fr; gap: var(--tks-space-4); align-items: start; }
.tks-photo__frame {
  position: relative; aspect-ratio: 3 / 4; border-radius: var(--tks-r-lg); overflow: hidden; background: var(--tks-surface-inset);
  border: 1.5px dashed var(--tks-line-strong); display: grid; place-items: center; color: var(--tks-text-tertiary);
}
.tks-photo__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tks-photo__frame .tks-photo__ghost { width: 46%; opacity: .5; }
.tks-photo__tag { position: absolute; top: 8px; left: 8px; z-index: 1; }
.tks-photo.is-captured .tks-photo__frame { border-style: solid; border-color: var(--tks-accent); box-shadow: var(--tks-glow-accent); }
.tks-photo__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--tks-space-2); font: var(--tks-t-footnote); color: var(--tks-text-secondary); }
.tks-photo__list li { display: flex; gap: var(--tks-space-2); }
.tks-photo__list li::before { content: ""; flex: none; width: 10px; height: 5px; margin-top: 5px; border: solid var(--tks-success); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

/* ============ Wheel Picker: 5 rows of 44, selected band ============ */
.tks-wheel { position: relative; height: 220px; display: flex; justify-content: center; gap: var(--tks-space-2); overflow: hidden; border-radius: var(--tks-r-md); }
.tks-wheel::before { /* selected band */
  content: ""; position: absolute; left: 0; right: 0; top: 88px; height: 44px; border-radius: var(--tks-r-md);
  background: var(--tks-surface-3); border-top: 1px solid var(--tks-line-strong); border-bottom: 1px solid var(--tks-line-strong); pointer-events: none;
}
.tks-wheel::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--tks-bg) 0%, transparent 38%, transparent 62%, var(--tks-bg) 100%); opacity: .85; }
.tks-wheel__col { position: relative; z-index: 1; height: 220px; overflow-y: scroll; scroll-snap-type: y mandatory; scrollbar-width: none; padding: 88px 0; box-sizing: border-box; min-width: 72px; text-align: center; overscroll-behavior: contain; }
.tks-wheel__col::-webkit-scrollbar { display: none; }
.tks-wheel__item { height: 44px; line-height: 44px; scroll-snap-align: center; font: var(--tks-t-title3); line-height: 44px; color: var(--tks-text-tertiary); font-variant-numeric: tabular-nums; transition: color var(--tks-m-fast) var(--tks-ease-standard), transform var(--tks-m-fast) var(--tks-ease-standard); }
.tks-wheel__item.is-selected { color: var(--tks-text-primary); transform: scale(1.06); }
.tks-wheel__unit { position: relative; z-index: 1; align-self: center; font: var(--tks-t-caption1); color: var(--tks-text-secondary); }

/* ============ Weight Ruler: ticks every 0.5 and 5, centered needle ============ */
.tks-ruler { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--tks-space-3); justify-items: center; }
.tks-ruler__value { font: var(--tks-t-display); font-variant-numeric: tabular-nums; background: none; border: 0; color: var(--tks-text-primary); cursor: text; min-height: var(--tks-hit); }
.tks-ruler__value small { font: var(--tks-t-subhead); color: var(--tks-text-tertiary); margin-left: 4px; }
.tks-ruler__track { --tick: 8px; position: relative; width: 100%; height: 72px; overflow-x: scroll; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior: contain; }
.tks-ruler__track::-webkit-scrollbar { display: none; }
.tks-ruler__scale {
  height: 56px; margin: 0 50%; position: relative;
  background:
    repeating-linear-gradient(90deg, var(--tks-line-strong) 0 2px, transparent 2px calc(var(--tick) * 10)) 0 0 / 100% 40px no-repeat,
    repeating-linear-gradient(90deg, rgba(229, 220, 196, .22) 0 1px, transparent 1px var(--tick)) 0 14px / 100% 26px no-repeat;
}
.tks-ruler__snap { position: absolute; top: 0; width: var(--tick); height: 100%; scroll-snap-align: center; }
.tks-ruler__label { position: absolute; top: 42px; transform: translateX(-50%); font: var(--tks-t-caption2); color: var(--tks-text-tertiary); font-variant-numeric: tabular-nums; }
.tks-ruler__needle { position: absolute; left: 50%; top: 0; width: 3px; height: 48px; margin-left: -1.5px; border-radius: 2px; background: var(--tks-accent); box-shadow: 0 0 10px rgba(217, 181, 67, .6); pointer-events: none; z-index: 1; }
.tks-ruler__wrap { position: relative; width: 100%; }
.tks-ruler__wrap::before, .tks-ruler__wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 64px; z-index: 1; pointer-events: none; }
.tks-ruler__wrap::before { left: 0; background: linear-gradient(90deg, var(--tks-bg), transparent); }
.tks-ruler__wrap::after { right: 0; background: linear-gradient(270deg, var(--tks-bg), transparent); }

/* ============ Signature Pad ============ */
.tks-sig { display: grid; gap: var(--tks-space-3); }
.tks-sig__pad {
  position: relative; height: 160px; border-radius: var(--tks-r-lg); background: var(--tks-surface-inset); border: 1px solid var(--tks-line-neutral);
  touch-action: none; overflow: hidden;
}
.tks-sig__pad::before { content: ""; position: absolute; left: 24px; right: 24px; bottom: 36px; border-bottom: 1.5px dashed rgba(229, 220, 196, .16); pointer-events: none; }
.tks-sig__pad::after { content: "\00d7"; position: absolute; left: 22px; bottom: 38px; font: var(--tks-t-footnote); color: var(--tks-text-tertiary); pointer-events: none; }
.tks-sig__hint { position: absolute; inset: 0; display: grid; place-items: center; font: var(--tks-t-subhead); color: var(--tks-text-tertiary); pointer-events: none; transition: opacity var(--tks-m-fast) var(--tks-ease-standard); }
.tks-sig.has-ink .tks-sig__hint { opacity: 0; }
.tks-sig canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.tks-sig__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--tks-space-2); }
.tks-sig__saved { display: none; align-items: center; gap: 6px; font: var(--tks-t-footnote); color: var(--tks-success); }
.tks-sig.is-done .tks-sig__saved { display: inline-flex; }
.tks-sig.is-done .tks-sig__pad { border-color: var(--tks-line-strong); }

/* ============ Rank: Tier Disc (use below 48px always; primary ring, plate, helmet) ============ */
.tks-disc { --size: var(--tks-emblem-row); position: relative; display: inline-block; flex: none; width: var(--size); height: var(--size); border-radius: 50%; }
.tks-disc--48 { --size: 48px; }
.tks-disc--64 { --size: 64px; }
.tks-disc--card { --size: var(--tks-emblem-card); }
.tks-disc__plate { position: absolute; inset: 0; border-radius: 50%; border: max(2px, calc(var(--size) * .033)) solid var(--tier);
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--tier-2) 85%, var(--tier)) 0%, var(--tier-2) 40%, #060708 100%); }
.tks-disc img { position: absolute; left: 9%; top: 7%; width: 82%; height: 82%; object-fit: contain; }
.tks-disc__glow { position: absolute; inset: -18%; border-radius: 50%; background: radial-gradient(circle, var(--tier-glow) 0%, transparent 62%); opacity: .3; animation: tks-breathe 3600ms ease-in-out infinite alternate; }
.tks-disc.tks-tier--none img, .tks-disc.is-locked img { filter: grayscale(1) brightness(.55); }
.tks-disc.is-locked .tks-disc__plate { border-color: var(--tks-surface-3); }
@keyframes tks-breathe { from { opacity: .18; } to { opacity: .6; } }

/* Division Dots (rows, chips, ladder) and Chevrons (hero emblem). Earned marks fill with tier primary. */
.tks-divdots { display: inline-flex; gap: 4px; align-items: center; }
.tks-divdots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.tks-divdots i.on { background: var(--tier); box-shadow: 0 0 4px color-mix(in srgb, var(--tier-glow) 60%, transparent); }
.tks-chevrons { display: inline-flex; flex-direction: column-reverse; gap: 2px; width: 20px; }
.tks-chevrons i { display: block; height: 11px; background: rgba(255, 255, 255, .14); clip-path: polygon(0 55%, 50% 5%, 100% 55%, 100% 95%, 50% 45%, 0 95%); }
.tks-chevrons i.on { background: var(--tier); }

/* Tier Tag: always an outlined pill so Gold never reads as a button */
.tks-tier-tag {
  display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 8px; border-radius: var(--tks-r-pill);
  border: 1px solid var(--tier); background: color-mix(in srgb, var(--tier) 12%, transparent);
  color: color-mix(in srgb, var(--tier-glow) 80%, var(--tks-text-primary)); font: var(--tks-t-caption2); letter-spacing: var(--tks-track-label); white-space: nowrap;
}
.tks-tier-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tier); }
/* Guard: never a Spartan tag on a red fitness surface. On fitness surfaces it drops to a neutral outline. */
.tks-surface-fitness .tks-tier-tag.tks-tier--spartan { border-color: var(--tks-text-secondary); background: var(--tks-surface-1); color: var(--tks-text-primary); }
.tks-surface-fitness .tks-tier-tag.tks-tier--spartan::before { background: var(--tks-text-primary); }
.tks-surface-fitness { background: color-mix(in srgb, var(--tks-pillar-fitness) 16%, var(--tks-surface-1)); border-color: color-mix(in srgb, var(--tks-pillar-fitness) 45%, transparent); }

/* Tier Frame: tier border, inner trim, tint and corner marks that grow with tier */
.tks-frame { position: relative; border: 2px solid var(--tier); border-radius: var(--tks-r-xl); overflow: hidden; background: var(--tks-surface-1); box-shadow: var(--tks-e2); isolation: isolate; }
.tks-frame::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--tier) 18%, transparent) 0%, transparent 55%); }
.tks-frame::after { content: ""; position: absolute; inset: 6px; border-radius: var(--tks-r-lg); border: 1px solid color-mix(in srgb, var(--tier-glow) 28%, transparent); pointer-events: none; }
.tks-frame__corner { position: absolute; width: 22px; height: 22px; border: solid var(--tier-glow); border-width: 2px 0 0 2px; border-radius: 6px 0 0 0; opacity: .7; pointer-events: none; }
.tks-frame__corner--tl { top: 10px; left: 10px; }
.tks-frame__corner--tr { top: 10px; right: 10px; transform: scaleX(-1); }
.tks-frame__corner--bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
.tks-frame__corner--br { bottom: 10px; right: 10px; transform: scale(-1, -1); }
.tks-frame.tks-tier--bronze .tks-frame__corner, .tks-frame.tks-tier--iron .tks-frame__corner { width: 14px; height: 14px; opacity: .5; }
.tks-frame.tks-tier--gold .tks-frame__corner, .tks-frame.tks-tier--spartan .tks-frame__corner, .tks-frame.tks-tier--olympian .tks-frame__corner { width: 28px; height: 28px; border-width: 3px 0 0 3px; box-shadow: -2px -2px 8px -4px var(--tier-glow); }
.tks-frame.tks-tier--olympian { box-shadow: var(--tks-e2), 0 0 28px -8px var(--tier-glow); }
.tks-frame__shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .14) 50%, transparent 100%);
  transform: translateX(-160%) skewX(-18deg); animation: tks-shine 7s ease-in-out 1.2s infinite; }
@keyframes tks-shine { 0% { transform: translateX(-160%) skewX(-18deg); } 22%, 100% { transform: translateX(330%) skewX(-18deg); } }

/* Rank Card: emblem slot 120, tier name, comparison line, progress */
.tks-rank-card { padding: var(--tks-card-pad-hero); display: grid; grid-template-columns: var(--tks-emblem-card) auto 1fr; grid-template-rows: auto auto auto; column-gap: var(--tks-space-3); row-gap: var(--tks-space-3); align-items: center; }
.tks-rank-card__top { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--tks-space-2); }
.tks-rank-card__eyebrow { font: var(--tks-t-eyebrow); letter-spacing: var(--tks-track-eyebrow); color: var(--tks-text-tertiary); text-transform: uppercase; }
.tks-rank-card__tags { display: flex; gap: 6px; }
.tks-rank-card__name { font: var(--tks-t-title1); }
.tks-rank-card__cmp { font: var(--tks-t-subhead); font-weight: var(--tks-w-bold); color: var(--tks-accent-strong); margin-top: 6px; }
.tks-rank-card__meta { font: var(--tks-t-footnote); color: var(--tks-text-tertiary); margin-top: 2px; }
.tks-rank-card__bar { grid-column: 1 / -1; }
.tks-rank-card .tks-bar { --bar: var(--tier); height: 10px; }

/* Tier Ladder: 6 tiers, 3 divisions; division dots on the lit row */
.tks-ladder { padding: var(--tks-space-3) var(--tks-space-2) var(--tks-space-2); }
.tks-ladder__row { display: flex; align-items: center; gap: var(--tks-space-3); min-height: var(--tks-row-min); padding: 0 var(--tks-space-3); border-radius: var(--tks-r-md); border: 1px solid transparent; }
.tks-ladder__name { flex: 1; font: var(--tks-t-headline); }
.tks-ladder__floor { font: var(--tks-t-footnote); color: var(--tks-text-tertiary); font-variant-numeric: tabular-nums; }
.tks-ladder__row.is-current { background: var(--tks-accent-fill); border-color: var(--tks-line); }
.tks-ladder__row.is-locked .tks-ladder__name { color: var(--tks-text-tertiary); }
.tks-ladder__row.is-locked .tks-disc img { filter: grayscale(1) brightness(.55); }
.tks-ladder__row.is-locked .tks-disc__plate { border-color: var(--tks-surface-3); }
.tks-ladder__row.is-earned .tks-ladder__floor::after { content: ""; display: inline-block; width: 10px; height: 5px; margin-left: 8px; border: solid var(--tks-success); border-width: 0 0 2px 2px; transform: rotate(-45deg) translateY(-3px); }

/* Muscle Rank Row */
.tks-muscle { display: grid; grid-template-columns: 32px 1fr auto; grid-template-rows: auto auto; column-gap: var(--tks-space-3); row-gap: 6px; align-items: center; min-height: var(--tks-row-min); padding: var(--tks-space-2) var(--tks-space-4); }
.tks-muscle .tks-disc { grid-row: 1 / 3; }
.tks-muscle__name { font: var(--tks-t-headline); }
.tks-muscle__right { display: flex; align-items: center; gap: var(--tks-space-2); }
.tks-muscle .tks-bar { grid-column: 2 / 4; --bar: var(--tier); height: 4px; }
.tks-muscle__xp { font: var(--tks-t-caption1); color: var(--tks-text-tertiary); font-variant-numeric: tabular-nums; }
.tks-muscle.is-unranked .tks-muscle__name { color: var(--tks-text-tertiary); }

/* Body + Body Legend: Ranked layer (tier primaries) and Trained layer (heat ramp) */
.tks-body { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--tks-space-2); justify-items: center; }
.tks-body__fig { position: relative; width: 100%; max-width: 170px; aspect-ratio: 880 / 1168; display: grid; place-items: center; }
.tks-body__fig img, .tks-body__fig canvas { width: 100%; height: 100%; object-fit: contain; }
.tks-body__cap { font: var(--tks-t-caption2); color: var(--tks-text-tertiary); text-align: center; letter-spacing: var(--tks-track-label); text-transform: uppercase; }
.tks-legend { display: flex; flex-wrap: wrap; gap: var(--tks-space-2) var(--tks-space-3); justify-content: center; font: var(--tks-t-caption1); color: var(--tks-text-secondary); }
.tks-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.tks-legend__sw { width: 12px; height: 12px; border-radius: 3px; background: var(--sw, var(--tier)); border: 1px solid rgba(255, 255, 255, .08); }
.tks-legend--heat { display: flex; align-items: center; gap: var(--tks-space-2); }
.tks-legend--heat .tks-legend__ramp { width: 120px; height: 8px; border-radius: var(--tks-r-pill); background: linear-gradient(90deg, var(--tks-heat-0), var(--tks-heat-1), var(--tks-heat-2), var(--tks-heat-3), var(--tks-heat-4)); }

/* Leaderboard: labeled metric, podium for top 3, own row pinned */
.tks-board { display: grid; gap: var(--tks-space-3); }
.tks-board__metric { display: flex; justify-content: space-between; align-items: center; font: var(--tks-t-footnote); color: var(--tks-text-tertiary); }
.tks-board__metric b { color: var(--tks-text-secondary); font-weight: var(--tks-w-semibold); }
.tks-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: var(--tks-space-2); }
.tks-podium__spot { display: grid; justify-items: center; gap: 6px; text-align: center; min-width: 0; }
.tks-podium__name { font: var(--tks-t-footnote); font-weight: var(--tks-w-semibold); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tks-podium__val { font: var(--tks-t-caption1); color: var(--tks-text-tertiary); font-variant-numeric: tabular-nums; }
.tks-podium__step { width: 100%; display: grid; place-items: center; border-radius: var(--tks-r-md) var(--tks-r-md) 0 0; font: var(--tks-t-title2); font-weight: var(--tks-w-heavy);
  background: linear-gradient(180deg, var(--tks-surface-3), var(--tks-surface-1)); border: 1px solid var(--tks-line-neutral); border-bottom: 0; color: var(--tks-text-secondary); }
.tks-podium__spot--1 .tks-podium__step { height: 76px; color: var(--tks-accent-strong); border-color: var(--tks-line-strong); background: linear-gradient(180deg, rgba(217, 181, 67, .18), var(--tks-surface-1)); }
.tks-podium__spot--2 .tks-podium__step { height: 56px; }
.tks-podium__spot--3 .tks-podium__step { height: 44px; }
.tks-avatar { --size: 44px; width: var(--size); height: var(--size); border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--tks-surface-3); color: var(--tks-text-primary); font: var(--tks-t-caption1); border: 2px solid var(--tier, var(--tks-line-strong)); overflow: hidden; }
.tks-avatar--l { --size: 56px; font: var(--tks-t-headline); }
.tks-lb-row { display: grid; grid-template-columns: 28px 36px 1fr auto; align-items: center; gap: var(--tks-space-3); min-height: var(--tks-row-min); padding: 0 var(--tks-space-4); }
.tks-lb-row .tks-avatar { --size: 36px; }
.tks-lb-row__pos { font: var(--tks-t-subhead); font-weight: var(--tks-w-bold); color: var(--tks-text-tertiary); text-align: center; font-variant-numeric: tabular-nums; }
.tks-lb-row__name { display: grid; gap: 3px; min-width: 0; font: var(--tks-t-headline); }
.tks-lb-row__name span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tks-lb-row__val { font: var(--tks-t-subhead); font-weight: var(--tks-w-bold); font-variant-numeric: tabular-nums; text-align: right; }
.tks-lb-row__val small { display: block; font: var(--tks-t-caption2); color: var(--tks-text-tertiary); font-weight: var(--tks-w-semibold); }
.tks-lb-row.is-me { background: var(--tks-accent-fill); box-shadow: inset 3px 0 0 var(--tks-accent); }
.tks-lb-row.is-hidden .tks-lb-row__val { color: var(--tks-text-tertiary); font-weight: var(--tks-w-regular); }
/* The pinned own row sits last inside the scrolling list and sticks to its bottom edge. */
.tks-board__list { max-height: 312px; overflow: auto; overscroll-behavior: contain; border-radius: 0 0 var(--tks-r-lg) var(--tks-r-lg); }
.tks-lb-pinned { position: sticky; bottom: 0; z-index: 1; border-top: 1px solid var(--tks-line-strong); background: color-mix(in srgb, var(--tks-surface-2) 92%, var(--tks-accent)); backdrop-filter: var(--tks-blur-bar); -webkit-backdrop-filter: var(--tks-blur-bar); }
/* His own pinned row keeps the gold tint but on a solid surface, so rows scrolling under it never show through. */
.tks-lb-row.tks-lb-pinned.is-me { background: linear-gradient(var(--tks-accent-fill), var(--tks-accent-fill)), var(--tks-surface-2); }

/* ============ Rank-Up Burst: code only, transform and opacity only ============ */
.tks-rankup { position: relative; width: 100%; aspect-ratio: 1 / 1.05; overflow: hidden; display: grid; place-items: center; background: radial-gradient(120% 80% at 50% 42%, #0c0d10 0%, var(--tks-bg) 62%); border-radius: var(--tks-r-xl); isolation: isolate; }
.tks-rankup > * { grid-area: 1 / 1; }
.tks-rankup__wash { position: absolute; inset: 0; background: radial-gradient(70% 55% at 50% 42%, color-mix(in srgb, var(--tier) 55%, transparent), transparent 70%); opacity: 0; }
.tks-rankup__rays { position: absolute; left: 50%; top: 42%; width: 170%; aspect-ratio: 1; margin: -85% 0 0 -85%; border-radius: 50%; opacity: 0;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--tier-glow) 34%, transparent) 0deg 3deg, transparent 3deg 15deg);
  -webkit-mask: radial-gradient(circle, transparent 14%, #000 20%, #000 34%, transparent 62%); mask: radial-gradient(circle, transparent 14%, #000 20%, #000 34%, transparent 62%); }
.tks-rankup__halo { position: absolute; left: 50%; top: 42%; width: 64%; aspect-ratio: 1; margin: -32% 0 0 -32%; border-radius: 50%; background: radial-gradient(circle, var(--tier-glow), transparent 64%); opacity: 0; }
.tks-rankup__ring { position: absolute; left: 50%; top: 42%; width: 50%; aspect-ratio: 1; margin: -25% 0 0 -25%; border-radius: 50%; border: 4px solid var(--tier); box-shadow: 0 0 24px var(--tier), inset 0 0 18px rgba(0, 0, 0, .6); opacity: 0; }
.tks-rankup__emblem { position: absolute; left: 50%; top: 42%; width: 42%; aspect-ratio: 1; margin: -21% 0 0 -21%; opacity: 0; }
.tks-rankup__emblem img { width: 100%; height: 100%; object-fit: contain; }
.tks-rankup__shards { position: absolute; left: 50%; top: 42%; width: 0; height: 0; }
.tks-rankup__shards i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 2px; background: var(--tier-glow); box-shadow: 0 0 8px var(--tier-glow); opacity: 0;
  transform: rotate(var(--a)) translateY(0); }
.tks-rankup__flash { position: absolute; inset: 0; background: radial-gradient(50% 36% at 50% 42%, var(--tier-glow), transparent 70%); opacity: 0; }
.tks-rankup__text { position: absolute; left: 0; right: 0; bottom: 0; padding: 56px 16px 8%; display: grid; justify-items: center; gap: 6px; text-align: center; opacity: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(5, 6, 8, .82) 45%, var(--tks-bg) 100%); }
.tks-rankup__title { font: var(--tks-t-display); color: var(--tks-text-primary); }
.tks-rankup__sub { font: var(--tks-t-headline); color: var(--tier-glow); }

.tks-rankup.is-playing .tks-rankup__wash { animation: tks-ru-wash 1400ms var(--tks-ease-standard) 350ms both; }
.tks-rankup.is-playing .tks-rankup__flash { animation: tks-ru-flash 700ms var(--tks-ease-standard) 300ms both; }
.tks-rankup.is-playing .tks-rankup__rays { animation: tks-ru-rays-in 900ms var(--tks-ease-standard) 400ms both, tks-ru-spin 90s linear 400ms infinite; }
.tks-rankup.is-playing .tks-rankup__halo { animation: tks-ru-halo-in 900ms var(--tks-ease-standard) 600ms both, tks-breathe 3600ms ease-in-out 1500ms infinite alternate; }
.tks-rankup.is-playing .tks-rankup__ring { animation: tks-ru-ring 600ms cubic-bezier(.34, 1.56, .64, 1) 700ms both; }
.tks-rankup.is-playing .tks-rankup__emblem { animation: tks-ru-emblem 900ms cubic-bezier(.22, 1.2, .36, 1) 800ms both; }
.tks-rankup.is-playing .tks-rankup__shards i { animation: tks-ru-shard 1100ms var(--tks-ease-standard) 320ms both; }
.tks-rankup.is-playing .tks-rankup__text { animation: tks-ru-text 600ms var(--tks-ease-standard) 1500ms both; }
/* Rays combine two animations on one element: scale-in uses opacity, the spin uses rotate (independent property). */
@keyframes tks-ru-wash { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: .35; } }
@keyframes tks-ru-flash { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes tks-ru-rays-in { from { opacity: 0; scale: .4; } to { opacity: 1; scale: 1; } }
@keyframes tks-ru-spin { to { rotate: 360deg; } }
@keyframes tks-ru-halo-in { from { opacity: 0; transform: scale(.5); } to { opacity: .55; transform: scale(1); } }
@keyframes tks-ru-ring { from { opacity: 0; transform: scale(1.5); } to { opacity: 1; transform: scale(1); } }
@keyframes tks-ru-emblem { from { opacity: 0; transform: translateY(18%) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes tks-ru-shard { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(1); } 12% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(var(--d, -150px)) scale(.4); } }
@keyframes tks-ru-text { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============ Measurements ============ */
/* Tape Guide: a headless dress form with a gold band where the tape goes, beside three tips */
.tks-tape-guide { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--tks-space-4); align-items: center;
  padding: var(--tks-space-3) var(--tks-space-4); background: var(--tks-surface-1); border: 1px solid var(--tks-line-neutral); border-radius: var(--tks-r-lg); }
.tks-tape-guide__art { color: var(--tks-text-secondary); }
.tks-tape-guide__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.tks-tape-guide__form { fill: url(#tksFormFill); stroke: rgba(229, 220, 196, .34); stroke-width: 1; stroke-linejoin: round; }
.tks-tape-guide__cap { fill: var(--tks-surface-3); stroke: rgba(229, 220, 196, .34); stroke-width: 1; }
.tks-tape-guide__band { fill: none; stroke: var(--tks-accent); stroke-width: 3; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(217, 181, 67, .55)); }
.tks-tape-guide__band-back { fill: none; stroke: var(--tks-accent); stroke-width: 1.5; stroke-dasharray: 2 2.5; opacity: .45; }
.tks-tape-guide__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--tks-space-3); counter-reset: tks-tg; }
.tks-tape-guide__step { position: relative; padding-left: 30px; font: var(--tks-t-subhead); color: var(--tks-text-secondary); counter-increment: tks-tg; }
.tks-tape-guide__step::before { content: counter(tks-tg); position: absolute; left: 0; top: -1px; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; background: var(--tks-accent-fill); color: var(--tks-accent-strong); font: var(--tks-t-caption1); font-weight: var(--tks-w-bold); }

/* Tape Ruler: the Weight Ruler at tape scale, 8px per tick. Inches: 0.1 in ticks, a major line each
   inch (80px), snaps to 1/4 in. Centimeters: 0.5 cm ticks, a major line every 5 cm (80px), snaps to 0.5 cm.
   The script pads the scale by half the track on each side and places the ticks to match. */
.tks-ruler--tape .tks-ruler__label { white-space: nowrap; }
.tks-ruler--tape .tks-ruler__scale {
  margin: 0;
  background:
    repeating-linear-gradient(90deg, var(--tks-line-strong) 0 2px, transparent 2px calc(var(--tick) * 10)) 0 0 / 100% 40px no-repeat,
    repeating-linear-gradient(90deg, rgba(229, 220, 196, .22) 0 1px, transparent 1px var(--tick)) 0 14px / 100% 26px no-repeat;
}

/* Trend Line: a small line of the last entries, gold, or green when it moved the right way */
.tks-trend { display: block; width: 64px; height: 24px; overflow: visible; color: var(--tks-accent); }
.tks-trend polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.tks-trend circle { fill: currentColor; }
.tks-trend--good { color: var(--tks-success); }

/* Measurement Row: name and when, trend line, latest value and change since Day 1 */
.tks-mrow { min-height: 64px; }
.tks-mrow__trend { flex: none; }
.tks-mrow__val { flex: none; display: grid; justify-items: end; gap: 2px; min-width: 64px; }
.tks-mrow__num { font: var(--tks-t-headline); font-weight: var(--tks-w-heavy); font-variant-numeric: tabular-nums; color: var(--tks-text-primary); }
.tks-mrow__num small { font: var(--tks-t-caption1); color: var(--tks-text-tertiary); margin-left: 2px; }
.tks-mrow__delta { font: var(--tks-t-caption1); font-weight: var(--tks-w-bold); font-variant-numeric: tabular-nums; color: var(--tks-text-tertiary); }
.tks-mrow__delta.is-good { color: var(--tks-success); }
.tks-mrow__delta.is-off { color: var(--tks-accent-strong); }
.tks-mrow__none { font: var(--tks-t-subhead); color: var(--tks-text-tertiary); }
.tks-mrow .tks-row__title .tks-pill { height: 20px; padding: 0 8px; margin-left: 4px; vertical-align: 2px; }

/* History Chart: the svg is drawn at its real pixel width; labels are html, so nothing scales under 11px */
.tks-hchart { display: grid; gap: var(--tks-space-3); padding: var(--tks-space-4); background: var(--tks-surface-1); border: 1px solid var(--tks-line-neutral); border-radius: var(--tks-r-lg); }
.tks-hchart__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--tks-space-3); flex-wrap: wrap; }
.tks-hchart__value { font: var(--tks-t-display); font-variant-numeric: tabular-nums; }
.tks-hchart__value small { font: var(--tks-t-subhead); color: var(--tks-text-tertiary); margin-left: 4px; }
.tks-hchart__plot { position: relative; height: 156px; }
.tks-hchart__plot svg { position: absolute; inset: 0; display: block; }
.tks-hchart__grid { stroke: var(--tks-line-neutral); stroke-width: 1; }
.tks-hchart__base { stroke: var(--tks-text-tertiary); stroke-width: 1.5; stroke-dasharray: 4 4; }
.tks-hchart__line { fill: none; stroke: var(--tks-accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.tks-hchart__area { fill: var(--tks-accent-fill); }
.tks-hchart__dot { fill: var(--tks-surface-1); stroke: var(--tks-accent); stroke-width: 2; }
.tks-hchart__dot--last { fill: var(--tks-accent); filter: drop-shadow(0 0 4px rgba(217, 181, 67, .6)); }
.tks-hchart__axis { position: absolute; left: 0; transform: translateY(-50%); font: var(--tks-t-caption2); color: var(--tks-text-tertiary); font-variant-numeric: tabular-nums; }
.tks-hchart__baselabel { position: absolute; right: 12px; transform: translateY(-120%); font: var(--tks-t-caption2); color: var(--tks-text-secondary); }
.tks-hchart__x { position: absolute; bottom: 0; transform: translateX(-50%); font: var(--tks-t-caption2); color: var(--tks-text-tertiary); white-space: nowrap; }
.tks-hchart__empty { margin: 0; padding-top: 56px; text-align: center; font: var(--tks-t-subhead); color: var(--tks-text-tertiary); }

/* Body-Fat Result: the ring with lean and fat mass beside it */
.tks-bf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--tks-space-4); align-items: center; }
.tks-bf__stats { display: grid; gap: var(--tks-space-2); }
.tks-bf__stats .tks-stat { text-align: left; }
.tks-bf__stats .tks-stat__value small { font: var(--tks-t-caption1); color: var(--tks-text-tertiary); margin-left: 3px; }
.tks-bf__note { margin: 0; font: var(--tks-t-footnote); color: var(--tks-text-tertiary); text-align: center; text-wrap: balance; }

/* Due List: a sheet of check rows, only what is due ticked */
.tks-duelist__note { margin: 0; font: var(--tks-t-subhead); color: var(--tks-text-secondary); }
.tks-duelist .tks-row { min-height: 60px; }
.tks-duelist .tks-row .tks-pill { height: 22px; }

/* Gentle Prompt: a quiet card that asks, never nags. Also the tape-day and next-tape-day cards */
.tks-gentle { display: grid; grid-template-columns: var(--tks-art-m) minmax(0, 1fr); gap: var(--tks-space-3); align-items: start; border-color: var(--tks-line); }
.tks-gentle__art { width: var(--tks-art-m); height: var(--tks-art-m); object-fit: contain; }
.tks-gentle__body { display: grid; gap: var(--tks-space-1); justify-items: start; min-width: 0; }
.tks-gentle__title { font: var(--tks-t-headline); }
.tks-gentle__sub { font: var(--tks-t-subhead); color: var(--tks-text-secondary); }
.tks-gentle__actions { display: flex; flex-wrap: wrap; gap: var(--tks-space-2); margin-top: var(--tks-space-2); }
.tks-gentle__actions .tks-btn { --h: var(--tks-hit); padding: 0 var(--tks-space-4); font: var(--tks-t-subhead); font-weight: var(--tks-w-bold); }
.tks-gentle .tks-later { margin-top: var(--tks-space-1); }

/* ============ Reduced motion: no travel, no spin, no shine; short fades only ============ */
@media (prefers-reduced-motion: reduce) {
  .tks-frame__shine, .tks-skel::after { animation: none; opacity: 0; }
  .tks-disc__glow { animation: none; opacity: .35; }
  .tks-btn, .tks-choice, .tks-row, .tks-sheet, .tks-chip { transition-duration: var(--tks-m-instant); }
  .tks-ring .tks-ring__fill { transition-duration: var(--tks-m-instant); }
  .tks-btn:active, .tks-choice:active { transform: none; }
  .tks-toast { animation-name: tks-fade-in; }
  .tks-rankup.is-playing .tks-rankup__shards i { animation: none; opacity: 0; }
  .tks-rankup.is-playing .tks-rankup__rays { animation: tks-fade-in 400ms ease both; }
  .tks-rankup.is-playing .tks-rankup__halo { animation: tks-fade-in 400ms ease 100ms both; }
  .tks-rankup.is-playing .tks-rankup__ring,
  .tks-rankup.is-playing .tks-rankup__emblem,
  .tks-rankup.is-playing .tks-rankup__text { animation: tks-fade-in 400ms ease 200ms both; }
  .tks-rankup.is-playing .tks-rankup__flash, .tks-rankup.is-playing .tks-rankup__wash { animation: none; }
}
@keyframes tks-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* No spinner arrows on number boxes anywhere (Alex 2026-11-07): type the number, the keypad does the rest */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }