/* ═══════════════════════════════════════════════════════════════════
   rowinglab.css — RowingLab (rowing world: first light)
   The instrument is Sightline, a camera-angle corrector run for real: a
   viewfinder on the left, a measurement sheet on the right. Amber is the
   tool's own voice (the recorded figure, the corrected column). Ember
   means one thing only: a number the camera angle has bent.
   ═════════════════════════════════════════════════════════════════ */

/* hero: a word where a number would be */
.hstat-word .hstat-num { font-size: clamp(26px, 0.9rem + 1.6vw, 44px); }


/* ── try it: the bench, lit from the upper right ──────────────────── */
.try { background: radial-gradient(55% 45% at 85% 18%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 70%); }
.bench-name { font: 600 12px/1.2 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text); }
.bench-bar .dot { margin-left: auto; }
.sl-shell::before {
  content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.8;
}
.try-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3.5vw, 44px); }

/* ── Sightline ───────────────────────────────────────────────────── */
.sl-head { padding: clamp(18px, 2.4vw, 30px) clamp(18px, 2.6vw, 36px) 0; }
.sl-sub { max-width: 64ch; color: var(--text-2); font-size: 15.5px; line-height: 1.62; }
.sl-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); margin-top: clamp(18px, 2.4vw, 30px); border-top: 1px solid var(--line); }
.sl-pane { min-width: 0; padding: clamp(18px, 2.6vw, 36px); }
.sl-pane + .sl-pane { overflow-x: auto; border-left: 1px solid var(--line); background: color-mix(in srgb, var(--bg-deep) 40%, transparent); }
.sl-lbl { display: flex; align-items: center; gap: 0.8em; margin-bottom: 16px; font: 500 11.5px/1.3 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3); }
.sl-lbl::before { content: ''; flex: none; width: 16px; height: 1px; background: var(--accent); }

/* the viewfinder: framing marks, a faint sensor grid, the frame lit in amber */
.sl-view {
  --m: color-mix(in srgb, var(--accent) 80%, transparent);
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10;
  border: 1px solid var(--line); border-radius: 0;
  background:
    linear-gradient(var(--m), var(--m)) left 12px top 12px / 18px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 12px top 12px / 1px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) right 12px top 12px / 18px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right 12px top 12px / 1px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) left 12px bottom 12px / 18px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) left 12px bottom 12px / 1px 18px no-repeat,
    linear-gradient(var(--m), var(--m)) right 12px bottom 12px / 18px 1px no-repeat,
    linear-gradient(var(--m), var(--m)) right 12px bottom 12px / 1px 18px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 44px),
    repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 44px),
    radial-gradient(60% 70% at 38% 58%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%),
    var(--bg-deep);
}
.sl-rail  { stroke: var(--line-2); stroke-width: 0.008; }
.sl-chain { stroke: var(--text-3); stroke-width: 0.007; opacity: 0.7; }
.sl-cage  { fill: color-mix(in srgb, var(--accent) 6%, transparent); stroke: var(--text-3); stroke-width: 0.01; opacity: 0.85; }
/* the unprojected truth, kept faint behind the measured shape */
.sl-ghost { fill: none; stroke: var(--text-3); stroke-width: 0.012; opacity: 0.6; stroke-dasharray: 0.03 0.03; stroke-linejoin: round; stroke-linecap: round; }
.sl-body  { fill: none; stroke: var(--accent); stroke-width: 0.022; stroke-linejoin: round; stroke-linecap: round; }
.sl-joint { fill: var(--bg-deep); stroke: var(--accent); stroke-width: 0.012; }

/* controls: a label column, then the control, then its reading */
.sl-ctl { --k: 8.6rem; display: grid; gap: 10px; margin-top: 20px; }
.sl-row, .sl-set { display: grid; grid-template-columns: var(--k) minmax(0, 1fr) 3.6rem; align-items: center; column-gap: 16px; }
.sl-row { cursor: pointer; }
.sl-set > .sl-chips { grid-column: 2 / -1; }
#slPresets { margin: -6px 0 6px calc(var(--k) + 16px); }
.sl-row > span, .sl-set > span { font: 500 11.5px/1.35 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3); }
.sl-row b { font: 600 15px/1 var(--f-mono); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.sl-row input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.sl-row input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--line-2); }
.sl-row input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--line-2); }
.sl-row input[type="range"]::-moz-range-progress { height: 2px; border-radius: 2px; background: var(--accent); }
.sl-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 18px; height: 18px; margin-top: -8px;
  border-radius: 50%; border: 3px solid var(--bg-raise); background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--accent);
}
.sl-row input[type="range"]::-moz-range-thumb {
  box-sizing: border-box; width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--bg-raise); background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--accent);
}
.sl-row input[type="range"]:focus-visible { outline-offset: 0; border-radius: 0; }

/* chips sit in a segmented track, like a selector on a panel */
.sl-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-self: start; padding: 3px; border: 1px solid var(--line); border-radius: 0; background: var(--bg-deep); }
.sl-chip {
  min-height: 36px; padding: 0 14px; border-radius: var(--r-pill);
  font: 500 12px/1 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-2);
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease), box-shadow 0.4s var(--ease);
}
.sl-chip:hover { color: var(--text); background: var(--bg-raise2); }
.sl-chip.is-on { color: var(--on-accent); background: var(--accent); }
@media (pointer: coarse) { .sl-chip { min-height: 44px; } .sl-chips { border-radius: 0; } }

/* the measurement sheet */
.sl-tbl { width: 100%; border-collapse: collapse; }
.sl-tbl th { padding: 0 0 10px 10px; border-bottom: 1px solid var(--line-2); background: none; font: 500 11px/1.3 var(--f-sans); font-stretch: var(--wd-label); letter-spacing: 0.005em;  color: var(--text-3); text-align: right; }
.sl-tbl th:first-child { padding-left: 0; text-align: left; }
.sl-tbl th:last-child { color: var(--accent); }
.sl-tbl td { padding: 12px 0 12px 10px; border-bottom: 1px solid var(--line); color: var(--text-2); font-size: 14.5px; line-height: 1.35; }
.sl-tbl td:first-child { padding-left: 0; }
.sl-tbl tr:last-child td { border-bottom: 0; }
.sl-tbl td.sl-num { font-family: var(--f-mono); text-align: right; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-tbl td.sl-num.is-off { color: var(--ember); font-weight: 700; }
.sl-tbl td.sl-num.is-off::before { content: ''; display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--ember); vertical-align: 0.18em; }
.sl-tbl td.sl-num.is-corr { color: var(--accent); }
.sl-num.is-corr i { margin-left: 0.35em; font-style: normal; font-size: 0.86em; color: var(--text-3); }

.sl-est { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 0; background: var(--bg-deep); color: var(--text-2); font-size: 13.5px; line-height: 1.45; }
.sl-est b { font: 600 17px/1 var(--f-mono); color: var(--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-verdict { position: relative; margin-top: 12px; padding: 12px 14px 12px 34px; border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: 0; background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--text-2); font-size: 14px; line-height: 1.55; }
.sl-verdict::before { content: ''; position: absolute; left: 15px; top: 19px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.sl-verdict.is-warn { color: var(--text); border-color: color-mix(in srgb, var(--ember) 45%, var(--line)); background: color-mix(in srgb, var(--ember) 8%, transparent); }
.sl-verdict.is-warn::before { background: var(--ember); }

.sl-inv { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.sl-inv-row { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-bottom: 1px dashed var(--line); color: var(--text-2); font-size: 14px; }
.sl-inv-row b { font: 500 13.5px/1.4 var(--f-mono); color: var(--text); text-align: right; }
.sl-inv-note { margin-top: 12px; color: var(--text-3); font-size: 13.5px; line-height: 1.55; }
.sl-foot { padding: 16px clamp(18px, 2.6vw, 36px) 20px; padding-inline-end: max(clamp(18px, 2.6vw, 36px), 100% - 100ch); border-top: 1px solid var(--line); color: var(--text-3); font: 400 12.5px/1.7 var(--f-mono); }

html[lang="zh-CN"] :is(.bench-name, .sl-lbl, .sl-row > span, .sl-set > span, .sl-chip, .sl-tbl th) { letter-spacing: 0.04em; text-transform: none; }

@media (max-width: 900px) {
  .sl-grid { grid-template-columns: minmax(0, 1fr); }
  .sl-pane + .sl-pane { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .sl-row, .sl-set { grid-template-columns: minmax(0, 1fr) 3.4rem; row-gap: 2px; }
  .sl-row > span, .sl-set > span, .sl-set > .sl-chips { grid-column: 1 / -1; }
  #slPresets { margin: -6px 0 6px; }
  .sl-set > .sl-chips { margin-top: 6px; }
  .sl-num.is-corr i { display: block; margin: 3px 0 0; }
  .sl-tbl td { font-size: 13px; }
  .sl-tbl td + td, .sl-tbl th + th { padding-left: 8px; }
}

/* ── the product, in its window ──────────────────────────────────── */
.shot-wrap { max-width: 1240px; }
.shot-window .bench-bar { flex-wrap: wrap; line-height: 1.45; }
.shot-window img { width: 100%; transition: transform 1.4s var(--ease-img); }
.shot-window:hover img { transform: scale(1.02); }