/* RPE and reps-in-reserve chart (T67 stream R). Tokens only, phone first.
   Every class is prefixed rc- or sits under .rc. */

.rc { display: grid; gap: 32px; }
.rc-form { display: grid; gap: 26px; min-width: 0; }
.rc [hidden] { display: none; }

/* ---- what you know: a max, or a set */
.rc-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.rc-mode .seg button { min-width: 92px; padding-inline: 14px; }

.rc-set { display: flex; flex-wrap: wrap; gap: 18px 36px; }
.rc-field { display: grid; gap: 6px; }
.rc .pm-weight input { font-size: clamp(52px, 14vw, 92px); min-width: 44px; }
.rc .pm-weight .unit { font-size: clamp(22px, 4.4vw, 34px); }
.no-js .rc .pm-weight input { border-bottom-color: var(--steel-light); }
.no-js .rc [data-rc-step], .no-js .rc-hint { display: none; }
.js .rc-go { display: none; }
.rc-go { justify-self: start; }

/* ---- reps left in the tank: the track */
.rc-effort { display: grid; gap: 14px; padding-top: 22px; border-top: 1px solid var(--hairline); }
.rc-effort-head { display: grid; gap: 4px; }
.rc-hint { max-width: 34em; font-size: 14px; line-height: 1.45; color: var(--chalk-dim); }
.rc-track { max-width: 640px; border-radius: 10px; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.rc-track[role="slider"] { cursor: pointer; }
.rc-track:focus-visible { outline: 2px solid var(--chalk); outline-offset: 6px; }
.rc-track-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rc-ghost { fill: var(--iron-floor); stroke: var(--chalk-dim); stroke-width: 2; stroke-dasharray: 5 4; }
.rc-empty { fill: var(--steel-light); }
.rc-track-n { font: 600 11px/1 var(--f-body); fill: var(--chalk-dim); font-variant-numeric: tabular-nums; }
.rc-rep.ember-able .rc-track-n { fill: var(--chalk); font-weight: 700; }
.rc-rep, .rc-left { transform-box: fill-box; }
.rc-rep.is-new { animation: rc-rack 320ms cubic-bezier(.2, 1.3, .4, 1) both; }
.rc-left.is-new { animation: rc-fade 200ms ease-out both; }
@keyframes rc-rack { from { transform: translateX(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rc-fade { from { opacity: 0; } to { opacity: 1; } }

.rc-read { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.rc-rpe-n { display: flex; align-items: baseline; gap: 10px; justify-content: center; min-width: 2.5em; margin: 0; padding: 0 6px; font: 700 clamp(52px, 14vw, 92px)/.95 var(--f-display); letter-spacing: -.5px; }
.rc-rpe-l { font-size: .36em; letter-spacing: .5px; color: var(--chalk-dim); }
.rc-left-text { font: 700 clamp(24px, 4.6vw, 34px)/1.05 var(--f-display); letter-spacing: .4px; text-transform: uppercase; }
.rc-chips .chip { min-width: 72px; }

.rc-controls { gap: 14px 28px; }
.rc-barpick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }

/* ---- the answer */
.rc-result { display: grid; gap: 8px; align-content: start; min-width: 0; padding-top: 24px; border-top: 1px solid var(--hairline); }
.rc-big { display: flex; align-items: baseline; margin: 0; font: 700 clamp(88px, 27vw, 200px)/.86 var(--f-display); letter-spacing: -1px; }
.rc-big .unit { font-size: .28em; letter-spacing: 0; }
.rc-big .roll { height: .86em; }
.rc-big .roll .c, .rc-big .roll .col span, .rc-big .roll .sep { height: .86em; line-height: .86; }
.rc-pct { font: 700 clamp(22px, 3.6vw, 28px)/1.12 var(--f-display); letter-spacing: .4px; text-transform: uppercase; }
.rc-est { font-size: 14px; color: var(--chalk-dim); }
.rc-say { max-width: 40em; margin-top: 6px; font-size: 17px; line-height: 1.5; }
.rc-notes { display: grid; gap: 0; max-width: 40em; margin: 8px 0 0; padding: 0; list-style: none; }
.rc-notes li { padding: 11px 0; border-top: 1px solid var(--hairline); font-size: 15px; line-height: 1.5; color: var(--chalk-dim); }

@media (min-width: 1000px) {
  .rc { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); column-gap: 72px; align-items: start; }
  .rc-result { padding-top: 0; border-top: 0; }
  .rc-big { font-size: clamp(120px, 13vw, 200px); }
}

/* ---- the bar */
.rc-bleed { margin-top: 28px; padding-inline: var(--gutter); }
.rc-under { display: grid; gap: 16px; margin-top: 20px; }
.rc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.rc-actions [hidden] { display: none; }

/* ---- the whole chart */
.rc-chart { margin-top: clamp(44px, 7vw, 72px); }
.rc-chart .body-dim { margin-top: 10px; max-width: 40em; }
.rc-grid-wrap { max-width: var(--max); margin: 18px auto 0; padding-inline: 4px; }
.rc-grid { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 2px; }
.rc-grid th, .rc-grid td { padding: 0; text-align: center; vertical-align: middle; }
.rc-grid thead th, .rc-grid tbody th { font: 700 18px/1 var(--f-display); color: var(--chalk-dim); transition: color 160ms ease; }
.rc-grid thead th { padding: 4px 0 2px; }
.rc-grid-left td, .rc-grid-left th { padding-bottom: 6px; font: 500 11px/1 var(--f-body); color: var(--chalk-dim); }
.rc-grid .rc-corner { width: 24px; font: 600 9.5px/1 var(--f-body); letter-spacing: .6px; text-transform: uppercase; color: var(--chalk-dim); }
.rc-grid .is-col, .rc-grid .is-row { color: var(--chalk); }
.rc-cell { position: relative; display: grid; align-content: center; justify-items: center; gap: 3px; min-height: 48px; border-radius: 8px; background: var(--iron-plate); color: var(--chalk); text-decoration: none; }
.rc-cell b { font: 700 16px/1 var(--f-display); letter-spacing: .2px; }
.rc-cell span { font-size: 11px; line-height: 1; color: var(--chalk-dim); }
.rc-cell.is-same { outline: 2px solid var(--steel-light); outline-offset: -2px; }
.rc-cell.is-on { background: var(--chalk); color: var(--on-chalk); transition: background-color 360ms ease, color 360ms ease; }
.rc-cell.is-on span { color: inherit; opacity: .8; }
.rc-cell.is-on.is-live { background: var(--ember); color: var(--on-ember); }
.rc-cell:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; }
@media (min-width: 600px) {
  .rc-grid-wrap { padding-inline: var(--gutter); }
  .rc-grid { border-spacing: 5px; }
  .rc-grid .rc-corner { width: 56px; font-size: 11px; }
  .rc-cell { min-height: 60px; border-radius: 10px; }
  .rc-cell b { font-size: 22px; }
  .rc-cell span { font-size: 13px; }
  .rc-grid thead th, .rc-grid tbody th { font-size: 22px; }
  .rc-grid-left td, .rc-grid-left th { font-size: 12px; }
}
.rc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 14px; font-size: 13px; color: var(--chalk-dim); }
.rc-key-g { display: inline-flex; align-items: center; gap: 8px; }
.rc-key-i { display: inline-block; flex: none; }
.rc-key-i.is-same { width: 18px; height: 14px; border-radius: 4px; outline: 2px solid var(--steel-light); outline-offset: -2px; background: var(--iron-plate); }
.rc-credit { max-width: 46em; margin-top: 10px; font-size: 13px; line-height: 1.5; color: var(--chalk-dim); }

.rc-sources li { overflow-wrap: anywhere; }

/* ---- print sheet */
.rc-sheet-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.rc-sheet-form .field { margin: 0; }
.rc-sheet-form .input { min-height: 44px; }
.rc-sheet-tbl { margin-top: 5mm; table-layout: fixed; }
.rc-sheet-tbl th, .rc-sheet-tbl td { padding: 1.2mm 1mm; text-align: center; }
.rc-sheet-tbl thead th:nth-child(1), .rc-sheet-tbl thead th:nth-child(2) { width: 15mm; }
.rc-sheet-tbl .rc-sheet-r, .rc-sheet-tbl .rc-sheet-n { font: 700 13pt/1 var(--f-display); letter-spacing: 0; }
.rc-sheet-l { font-size: 10pt; }
.rc-sheet-c { height: 11mm; }
.rc-sheet-c span { display: block; font-size: 8pt; line-height: 1.1; color: #444; }
.rc-sheet-c b { display: block; margin-top: .6mm; font: 700 13pt/1 var(--f-display); }
.rc-sheet-note { margin: 3mm 0 0; font-size: 8.5pt; line-height: 1.4; color: #333; }
.rc-sheet-h2 { margin-top: 8mm; font-size: 15pt; }
.rc-sheet-log { margin-top: 3mm; table-layout: fixed; }
.rc-sheet-log td { height: 8.5mm; }

@media (prefers-reduced-motion: reduce) {
  .rc-rep.is-new, .rc-left.is-new { animation: none; }
  .rc-cell.is-on, .rc-grid thead th, .rc-grid tbody th { transition: none; }
}