/* ==========================================================================
   OpsSync — Timing diagrams (before / after), logic-analyzer grammar.
   Channel keys → bezel + screen (two lanes on one time axis, cursors A/B,
   Δ dimension) → measurement strip (seven-segment weekly readouts) →
   basis (evidence + tools) → the accessible text version (two step lists).
   Rendered by js/timing.js into [data-timing].
   ========================================================================== */

.timing { position: relative; }

/* ---------- Channel keys (process selector, ARIA tabs) ---------- */
.tm-keys-wrap { position: relative; }
.tm-keys {
  position: relative;
  display: flex; gap: 8px;
  padding: 5px; margin: -5px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.tm-keys::-webkit-scrollbar { display: none; }
.tm-keys.has-more { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); }
.tm-keys.has-less { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px); mask-image: linear-gradient(90deg, transparent, #000 56px); }
.tm-keys.has-less.has-more { -webkit-mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, transparent, #000 56px, #000 calc(100% - 56px), transparent); }

.tm-key {
  position: relative;
  flex: 1 1 0; min-width: 184px;
  scroll-snap-align: start;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 3px; align-items: center;
  min-height: 68px; padding: 12px 30px 13px 14px;
  text-align: left; color: var(--ink-2);
  border: 1px solid var(--edge-soft); border-radius: var(--r-key);
  background: linear-gradient(180deg, #3A3B34 0%, #31322C 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 10px 20px -14px rgba(0, 0, 0, 0.8);
  transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), transform var(--dur-1) var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.tm-key .icon { grid-row: 1 / span 2; width: 26px; height: 26px; color: var(--muted); transition: color var(--dur-1) var(--ease-out), filter var(--dur-2) var(--ease-out); }
.tm-key__label { grid-column: 2; font-family: var(--f-caps); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.07em; text-transform: uppercase; line-height: 1.15; }
.tm-key__read { grid-column: 2; font-family: var(--f-mono); font-size: 0.76rem; line-height: 1.2; color: var(--muted); font-variant-numeric: tabular-nums; transition: color var(--dur-1) var(--ease-out); }
.tm-dec { display: inline-block; margin: 0 -0.15em; }
.tm-key > .led { position: absolute; top: 10px; right: 11px; width: 7px; height: 7px; }
.tm-key::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--amber); box-shadow: 0 0 10px var(--amber-glow);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-out);
}
.tm-key:hover { color: var(--white); border-color: #5A5B52; }
.tm-key:hover .icon { color: var(--ink-2); }
.tm-key:active { transform: translateY(1px); }
.tm-key[aria-selected="true"] {
  color: var(--white);
  border-color: rgba(241, 158, 40, 0.6);
  background: linear-gradient(180deg, #433A2C 0%, #372F26 100%);
  box-shadow:
    inset 0 0 0 1px rgba(241, 158, 40, 0.14),
    inset 0 2px 6px rgba(0, 0, 0, 0.35),
    0 1px 1px rgba(0, 0, 0, 0.3),
    0 0 26px -8px var(--amber-glow);
  transform: translateY(1px);
}
.tm-key[aria-selected="true"] .icon { color: var(--amber); filter: drop-shadow(0 0 5px var(--amber-glow)); }
.tm-key[aria-selected="true"] .tm-key__read { color: var(--amber-hot); }
.tm-key[aria-selected="true"]::after { transform: scaleX(1); }
.tm-key:focus-visible { outline-offset: 2px; }
@media (min-width: 1000px) { .tm-key { min-width: 0; } }

/* ---------- Panel intro ---------- */
.tm-panel { margin-top: clamp(28px, 3.5vw, 44px); }
.tm-intro {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 12px clamp(24px, 4vw, 64px); align-items: start;
  margin-bottom: clamp(18px, 2.4vw, 28px);
}
.tm-intro__title { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 2.05rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.12; color: var(--white); text-wrap: balance; }
.tm-intro__why { color: var(--ink-2); max-width: 64ch; text-wrap: pretty; }
@media (max-width: 860px) { .tm-intro { grid-template-columns: 1fr; } }

/* ---------- The rig: bezel, screen, HUD ---------- */
.tm-rig { padding: clamp(8px, 1.1vw, 14px); }
.tm-screen { --grat-on: 0; padding: clamp(12px, 1.6vw, 18px) clamp(12px, 1.8vw, 22px) clamp(8px, 1.2vw, 14px); }
.tm-hud {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; margin-bottom: clamp(10px, 1.4vw, 16px); min-height: 26px;
}
.tm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.tm-legend__item { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-caps); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tm-sw { width: 26px; height: 14px; overflow: visible; flex: none; }
.tm-sw polygon { stroke-linejoin: round; }
.tm-sw--manual polygon, .tm-sw--human polygon { fill: rgba(239, 237, 230, 0.06); stroke: var(--phos-white); stroke-width: 1.4; }
.tm-sw--auto polygon { fill: var(--amber); stroke: var(--amber-hot); stroke-width: 1; }
.tm-legend .tm-sw__who { width: 14px; height: 14px; margin-left: -4px; color: var(--phos-white); stroke-width: 2; }

.tm-read {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
  min-height: 24px; max-width: 100%;
  font-size: 0.86rem; color: var(--ink-2);
}
.tm-read__hint { font-family: var(--f-caps); font-weight: 600; font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.tm-read__n { font-family: var(--f-mono); font-weight: 700; color: var(--white); }
.tm-read__label { color: var(--ink); font-weight: 500; }
.tm-read__dur { font-family: var(--f-mono); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- The diagram (SVG) ---------- */
.tm-plot { position: relative; min-height: 150px; }
.tm-svg { display: block; width: 100%; height: auto; overflow: visible; -webkit-user-select: none; user-select: none; }
.tm-svg text { font-variant-numeric: tabular-nums; }
.tm-grid line { stroke: var(--grat); stroke-width: 1; shape-rendering: crispEdges; }
.tm-grid .tm-grid__zero { stroke: var(--grat-major); }
.tm-track { fill: rgba(237, 235, 227, 0.022); }
.tm-idle { stroke: rgba(237, 235, 227, 0.13); stroke-width: 1; shape-rendering: crispEdges; }

.tm-gut__chip { fill: var(--phos-white); }
.tm-gut--after .tm-gut__chip { fill: var(--amber); }
.tm-gut__chipt { fill: #1D1E19; }
.tm-gut__word { fill: var(--ink); }
.tm-gut__sub { fill: var(--muted); }

.tm-seg { outline: none; cursor: default; }
.tm-seg:focus, .tm-seg:focus-visible { outline: none; }
.tm-seg__hit { fill: transparent; }
.tm-seg__shape, .tm-tag__shape {
  stroke-linejoin: round;
  transition: fill var(--dur-1) var(--ease-out), stroke var(--dur-1) var(--ease-out), stroke-width var(--dur-1) var(--ease-out), fill-opacity var(--dur-1) var(--ease-out), stroke-opacity var(--dur-1) var(--ease-out);
}
.tm-seg--manual .tm-seg__shape { fill: rgba(239, 237, 230, 0.05); stroke: var(--phos-white); stroke-width: 1.5; }
.tm-seg--human .tm-seg__shape { fill: rgba(239, 237, 230, 0.1); stroke: var(--phos-white); stroke-width: 1.5; }
.tm-seg--auto .tm-seg__shape { fill: var(--amber); stroke: var(--amber-hot); stroke-width: 1; }
/* Readings inside white-phosphor steps carry a glass halo, so a cursor hairline
   passing under a step never cuts through its letters. */
.tm-seg__n, .tm-seg__label { paint-order: stroke; stroke: var(--glass); stroke-width: 3px; stroke-linejoin: round; transition: fill var(--dur-1) var(--ease-out); }
.tm-seg__n { fill: var(--ink); }
.tm-seg__label { fill: var(--ink-2); }
.tm-seg--auto .tm-seg__n, .tm-seg--auto .tm-seg__label { fill: #1D1E19; stroke: none; }
.tm-seg__who, .tm-tag__who { fill: none; stroke: var(--phos-white); stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--dur-1) var(--ease-out); }
.tm-tag__who { stroke-width: 2.5; }

.tm-tag__lead { fill: none; stroke: rgba(239, 237, 230, 0.42); stroke-width: 1; transition: stroke var(--dur-1) var(--ease-out); }
.tm-tag--auto .tm-tag__lead { stroke: rgba(241, 158, 40, 0.7); }
.tm-tag__shape { fill: var(--glass); stroke: var(--phos-white); stroke-width: 1.2; }
.tm-tag--auto .tm-tag__shape { fill: var(--amber); stroke: var(--amber-hot); stroke-width: 1; }
.tm-tag__n { fill: var(--ink); transition: fill var(--dur-1) var(--ease-out); }
.tm-tag--auto .tm-tag__n { fill: #1D1E19; }

/* Hover / focus linking: the measured step stays lit and the rest de-energise.
   Shapes recede; their readings drop to --muted (white steps) or to amber outline
   phosphor (automated steps), so every number stays readable at >= 4.5:1. */
.tm-plot.has-hot .tm-seg:not(.is-hot) .tm-seg__shape,
.tm-plot.has-hot .tm-tag:not(.is-hot) .tm-tag__shape { stroke-opacity: 0.38; fill-opacity: 0.5; }
.tm-plot.has-hot .tm-seg:not(.is-hot) .tm-seg__n,
.tm-plot.has-hot .tm-seg:not(.is-hot) .tm-seg__label,
.tm-plot.has-hot .tm-tag:not(.is-hot) .tm-tag__n { fill: var(--muted); }
.tm-plot.has-hot .tm-seg:not(.is-hot) .tm-seg__who,
.tm-plot.has-hot .tm-tag:not(.is-hot) .tm-tag__who { stroke: var(--muted); }
.tm-plot.has-hot .tm-seg--auto:not(.is-hot) .tm-seg__shape,
.tm-plot.has-hot .tm-tag--auto:not(.is-hot) .tm-tag__shape { fill: rgba(241, 158, 40, 0.13); fill-opacity: 1; stroke: rgba(241, 158, 40, 0.6); stroke-opacity: 1; filter: none; }
.tm-plot.has-hot .tm-seg--auto:not(.is-hot) .tm-seg__n,
.tm-plot.has-hot .tm-seg--auto:not(.is-hot) .tm-seg__label { fill: var(--amber); stroke: var(--glass); }
.tm-plot.has-hot .tm-tag--auto:not(.is-hot) .tm-tag__n { fill: var(--amber); }
.tm-plot.has-hot .tm-tag:not(.is-hot) .tm-tag__lead { stroke: rgba(239, 237, 230, 0.2); }
.tm-seg.is-hot.tm-seg--manual .tm-seg__shape, .tm-seg.is-hot.tm-seg--human .tm-seg__shape { fill: rgba(239, 237, 230, 0.16); stroke: #FFFFFF; stroke-width: 2; }
.tm-seg.is-hot.tm-seg--auto .tm-seg__shape { fill: var(--amber-hot); stroke: #FFFFFF; stroke-width: 1.5; }
.tm-tag.is-hot .tm-tag__shape { stroke: #FFFFFF; stroke-width: 1.6; }
.tm-tag.is-hot .tm-tag__lead { stroke: var(--amber-hot); }
/* Keyboard focus: one 2px amber ring drawn above everything (placed by timing.js),
   so it reads even on a 5 px automated step and is never hidden by the lit state. */
.tm-ring { fill: none; stroke: var(--amber); stroke-width: 2; pointer-events: none; filter: drop-shadow(0 0 4px var(--amber-glow)); }

/* time axis */
.tm-axis__base { stroke: var(--grat-major); stroke-width: 1; shape-rendering: crispEdges; }
.tm-axis__tick { stroke: rgba(237, 235, 227, 0.4); stroke-width: 1; shape-rendering: crispEdges; }
.tm-axis__minor { stroke: rgba(237, 235, 227, 0.22); stroke-width: 1; shape-rendering: crispEdges; }
.tm-axis__label { fill: var(--muted); }

/* cursors */
.tm-cur__line { stroke-width: 1; shape-rendering: crispEdges; }
.tm-cur--a .tm-cur__line { stroke: var(--amber); }
.tm-cur--b .tm-cur__line { stroke: var(--phos-white); stroke-opacity: 0.7; }
.tm-cur--a .tm-cur__flag { fill: var(--amber); }
.tm-cur--b .tm-cur__flag { fill: var(--phos-white); }
.tm-cur__letter { fill: #1D1E19; }
.tm-cur__val { fill: var(--ink-2); }

/* Δ dimension */
.tm-dim__line { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 5 4; }
.tm-dim__arrow { fill: var(--amber); }
.tm-dim__t { fill: var(--ink); }
.tm-dim__sym { fill: var(--amber); }
.tm-dim__u { fill: var(--ink-2); font-weight: 400; }

/* the writing beam */
.tm-beam__line { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.5; }
.tm-beam__dot { fill: #FFFFFF; }
.tm-beam--1 .tm-beam__line { stroke: var(--amber-hot); }
.tm-beam--1 .tm-beam__dot { fill: #FFE2B5; }

/* ---------- Measurement strip (weekly readouts) ---------- */
.tm-meas { padding: clamp(12px, 1.6vw, 18px) clamp(4px, 1vw, 10px) 0; }
.tm-strip { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 0.85fr); }
.tm-cell {
  display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px;
  min-width: 0; padding: 4px clamp(12px, 1.6vw, 22px) 10px;
  border-left: 1px solid var(--edge-soft);
}
.tm-cell:first-child { border-left: 0; padding-left: 4px; }
.tm-cell dt { font-size: 0.84rem; line-height: 1.35; color: var(--ink-2); max-width: 24ch; }
.tm-cell dd { display: flex; align-items: flex-end; gap: 6px; min-height: 1em; font-size: clamp(1.55rem, 1.15rem + 1.1vw, 2.2rem); line-height: 1; }
.tm-cell--saved dd { font-size: clamp(1.95rem, 1.35rem + 1.8vw, 2.95rem); }
.tm-cell--saved dt { color: var(--ink); }
.tm-cell--before .seg { color: var(--phos-white); text-shadow: 0 0 12px rgba(239, 237, 230, 0.3); }
.tm-cell--before .seg .s-on { fill: var(--phos-white); filter: drop-shadow(0 0 3px rgba(239, 237, 230, 0.45)); }
.tm-cell--before .seg .s-off { fill: rgba(239, 237, 230, 0.06); }
.tm-delta { display: flex; align-items: baseline; font-family: var(--f-mono); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.05; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-delta__sym { color: var(--amber); text-shadow: 0 0 12px var(--amber-glow); margin-right: 0.35em; }
.tm-assume {
  display: flex; gap: 6px 14px; align-items: baseline; flex-wrap: wrap;
  margin: 6px 4px 0; padding: 12px 0 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  color: var(--ink-2); font-size: 0.92rem; line-height: 1.5;
}
.tm-assume__k { flex: none; color: var(--amber); }
.tm-assume__v { flex: 1 1 36ch; min-width: 0; max-width: 96ch; }

/* ---------- Basis: evidence badge + tools ---------- */
.tm-basis {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 20px clamp(24px, 4vw, 64px);
  margin-top: clamp(20px, 2.6vw, 30px);
}
.tm-basis__k { margin-bottom: 10px; }
.tm-evi {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 9px; border-radius: 999px;
  font-family: var(--f-caps); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.2;
  color: var(--ink);
  background: rgba(241, 158, 40, 0.1);
  box-shadow: inset 0 0 0 1px rgba(241, 158, 40, 0.42);
}
.tm-evi__g { width: 12px; height: 12px; flex: none; }
.tm-evi__ring { fill: none; stroke: var(--amber); stroke-width: 1.4; }
.tm-evi__fill { fill: var(--amber); }
.tm-evi__note { margin-top: 10px; color: var(--ink-2); font-size: 0.92rem; line-height: 1.55; max-width: 76ch; text-wrap: pretty; }
.tm-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.tm-tools li { font-family: var(--f-mono); font-size: 0.78rem; line-height: 1.3; padding: 6px 10px; border-radius: 6px; color: var(--ink-2); background: var(--glass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
@media (max-width: 860px) { .tm-basis { grid-template-columns: 1fr; } }

/* ---------- The text version: two step lists ---------- */
.tm-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: clamp(30px, 3.8vw, 48px); }
.tm-col { min-width: 0; }
.tm-col--before { padding-right: clamp(20px, 3vw, 44px); }
.tm-col--after { padding-left: clamp(20px, 3vw, 44px); border-left: 1px solid var(--edge-soft); }
.tm-col__title {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  padding-bottom: 14px; border-bottom: 1px solid var(--edge);
  font-size: 1.28rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; color: var(--white);
}
.tm-col__sum { margin-left: auto; font-family: var(--f-mono); font-size: 0.84rem; font-weight: 400; letter-spacing: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tm-chip {
  display: inline-block; padding: 3px 7px 2px; border-radius: 4px;
  font-family: var(--f-caps); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; line-height: 1.15;
  color: #1D1E19; background: var(--phos-white);
}
.tm-chip--2 { background: var(--amber); }

.tm-steps { display: grid; }
/* Rows sit flush with the column rule; the linked-step wash bleeds 8px past the
   text on a pseudo-element, so the separators stay aligned. */
.tm-step {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px;
  padding: 14px 4px 14px 0;
  border-bottom: 1px solid var(--edge-soft);
  transition: opacity var(--dur-1) var(--ease-out);
}
.tm-step::before {
  content: ""; position: absolute; z-index: -1; inset: 0 -8px 0 -8px; border-radius: 6px;
  background-color: transparent;
  transition: background-color var(--dur-1) var(--ease-out);
}
.tm-step.is-hot::before { background-color: rgba(241, 158, 40, 0.085); }
.tm-cols.has-hot .tm-step:not(.is-hot) { opacity: 0.72; }
.tm-hex {
  --hex-c: var(--phos-white);
  position: relative; display: inline-grid; place-items: center;
  width: 40px; height: 24px; margin-top: 1px;
  font-family: var(--f-mono); font-weight: 700; font-size: 0.8rem; color: var(--ink);
  background: var(--hex-c);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}
.tm-hex::before {
  content: ""; position: absolute; inset: 1.5px;
  background: var(--bench);
  clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%);
  transition: background-color var(--dur-1) var(--ease-out);
}
.tm-hex > span { position: relative; }
.tm-hex--auto { --hex-c: var(--amber); color: #1D1E19; }
.tm-hex--auto::before { display: none; }
.tm-step.is-hot .tm-hex::before { background: #3F3A2E; }
.tm-step.is-hot .tm-hex--auto { --hex-c: var(--amber-hot); }
.tm-step__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 14px; }
.tm-step__label { font-weight: 500; color: var(--ink); line-height: 1.4; }
.tm-step__meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.tm-step__dur { font-family: var(--f-mono); font-size: 0.84rem; color: var(--ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tm-step__detail { margin-top: 4px; font-size: 0.93rem; line-height: 1.55; color: var(--ink-2); max-width: 62ch; }

.tm-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px 1px; border-radius: 4px;
  font-family: var(--f-caps); font-weight: 700; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.35;
  white-space: nowrap;
}
.tm-badge--auto { background: var(--amber); color: #1D1E19; }
.tm-badge--human { color: var(--ink); box-shadow: inset 0 0 0 1px rgba(239, 237, 230, 0.7); }
.tm-badge .icon { width: 12px; height: 12px; stroke-width: 2.2; margin-left: -2px; }

.tm-sub { margin: 26px 0 12px; }
.tm-bullets { display: grid; gap: 10px; }
.tm-bullets li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; color: var(--ink-2); font-size: 0.95rem; line-height: 1.5; }
.tm-bul { width: 16px; height: 10px; margin-top: 0.5em; overflow: visible; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tm-bul--pain { stroke: var(--phos-white); opacity: 0.85; }
.tm-bul--gain { stroke: var(--amber); filter: drop-shadow(0 0 3px var(--amber-glow)); }

@media (max-width: 860px) {
  .tm-cols { grid-template-columns: 1fr; gap: 40px; }
  .tm-col--before { padding-right: 0; }
  .tm-col--after { padding-left: 0; border-left: 0; }
}

/* ---------- Module note (honesty + the sum of the examples) ---------- */
.tm-note {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin-top: clamp(30px, 3.8vw, 44px); padding-top: 16px;
  border-top: 1px solid var(--edge-soft);
  color: var(--muted); font-size: 0.88rem; line-height: 1.55;
}
.tm-note__txt { max-width: 70ch; }
.tm-note__sum { color: var(--ink-2); max-width: 80ch; }

/* ---------- Phones: strip reflows, keys scroll in their own lane ---------- */
@media (max-width: 760px) {
  .tm-strip { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 14px; }
  .tm-cell { border-left: 0; padding-left: 0; padding-right: 10px; }
  .tm-cell--delta { grid-column: 1 / -1; padding-bottom: 14px; border-bottom: 1px solid var(--edge-soft); }
  .tm-cell:nth-child(3), .tm-cell:nth-child(5) { border-left: 1px solid var(--edge-soft); padding-left: 14px; }
  .tm-hud { gap: 8px 16px; }
  .tm-legend { gap: 6px 14px; }
  .tm-key { min-height: 62px; padding: 10px 28px 11px 12px; column-gap: 10px; }
  .tm-key .icon { width: 22px; height: 22px; }
}
@media (max-width: 420px) {
  .tm-key { min-width: 164px; }
  .tm-step { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
  .tm-hex { width: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-key, .tm-key::after, .tm-key .icon, .tm-seg__shape, .tm-tag__shape, .tm-seg__n, .tm-seg__label, .tm-seg__who, .tm-tag__who, .tm-tag__n, .tm-tag__lead, .tm-step, .tm-step::before, .tm-hex::before { transition: none; }
  .tm-key[aria-selected="true"], .tm-key:active { transform: none; }
}