/* Record card maker (T68, stream Card). Every selector sits under the tool's
   own class. Tokens only; the card's own colours are painted by the script. */

.rc { display: grid; gap: 28px; grid-template-areas: "stage" "side" "out"; }
.rc-stage { grid-area: stage; min-width: 0; }
.rc-side { grid-area: side; min-width: 0; display: grid; gap: 24px; align-content: start; }
.rc-out { grid-area: out; min-width: 0; display: grid; gap: 12px; align-content: start; }
@media (min-width: 960px) {
  .rc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "side stage" "side out"; grid-template-rows: auto 1fr; column-gap: 56px; row-gap: 20px; }
}

/* ---- the card on its bed */
.rc-stage > .overline { margin-bottom: 10px; }
.rc-bed { display: grid; place-items: center; padding: 16px; border-radius: var(--r-surface); background: var(--iron-plate); }
@media (min-width: 600px) { .rc-bed { padding: 28px; } }
.rc-frame { margin: 0; width: 100%; }
.js .rc-frame { aspect-ratio: var(--rc-w) / var(--rc-h); width: min(100%, calc(58vh * var(--rc-w) / var(--rc-h))); min-width: 0; }
@media (min-width: 960px) { .js .rc-frame { width: min(100%, calc(62vh * var(--rc-w) / var(--rc-h))); } }
.rc-canvas { width: 100%; height: 100%; border-radius: 10px; box-shadow: 0 0 0 1px var(--hairline); }
.rc-canvas:not([hidden]) { display: block; }

/* without script, or if the typeface fails: the same numbers as a page */
.rc-static { display: grid; gap: 10px; }
.js .rc-static { display: none; }
.js .rc.is-failed .rc-static { display: grid; }
.js .rc.is-failed .rc-frame { aspect-ratio: auto; width: 100%; }
.rc-s-lift { font: 700 clamp(30px, 7vw, 44px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: .5px; }
.rc-s-num { font: 700 clamp(72px, 20vw, 128px)/.9 var(--f-display); letter-spacing: -.5px; }
.rc-s-num .unit { font-size: .3em; }
.rc-s-reps { font-size: .32em; letter-spacing: .3px; white-space: nowrap; }
.rc-s-reps small { font-size: .5em; color: var(--chalk-dim); text-transform: uppercase; letter-spacing: .5px; }
.rc-s-bar { --pm-h: 96px; margin-inline: -16px; }
@media (min-width: 600px) { .rc-s-bar { margin-inline: -28px; } }
.rc-s-cap { color: var(--chalk-dim); font-size: 15px; }
.rc-s-est { display: grid; gap: 4px; }
.rc-s-est b { font: 700 34px/1 var(--f-display); }

.rc-say { margin-top: 14px; font-weight: 600; font-size: 16px; line-height: 1.45; }
.rc-note { margin-top: 6px; color: var(--chalk-dim); font-size: 14px; line-height: 1.45; }

/* ---- the controls */
.rc-examples { display: grid; gap: 10px; }
.rc-chip { display: inline-flex; align-items: center; text-decoration: none; }
.rc-form { display: grid; gap: 22px; }
.rc-field { display: grid; gap: 8px; align-content: start; min-width: 0; }
.rc-row { display: flex; flex-wrap: wrap; gap: 20px 28px; }
.rc-field-date { flex: 1 1 180px; max-width: 260px; }
.rc-opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.rc-opt::before { content: "("; }
.rc-opt::after { content: ")"; }

.rc-select { position: relative; max-width: 420px; }
.rc-select select { appearance: none; -webkit-appearance: none; padding-right: 46px; font-weight: 600; cursor: pointer; }
.rc-select svg { position: absolute; right: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; pointer-events: none; }
.rc-select svg path { fill: none; stroke: var(--chalk-dim); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.rc-set { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.rc-set .pm-weight input { font-size: clamp(52px, 13vw, 76px); }
.rc-set .pm-weight .unit { font-size: clamp(20px, 4.4vw, 28px); margin-left: 6px; }
.rc-set .step-btn { width: 48px; height: 48px; }
.rc-for { color: var(--chalk-dim); font-weight: 600; }

.rc-seg-f button { display: grid; justify-items: center; gap: 2px; padding: 6px 12px; min-width: 76px; }
.rc-seg-f small { font: 500 11px/1 var(--f-body); letter-spacing: 0; text-transform: none; opacity: .78; white-space: nowrap; }

.rc-extra { display: grid; gap: 16px; }
.rc-extra[hidden] { display: none; }
.rc-extra .input { max-width: 420px; }
.rc-check { justify-self: start; }
.rc-check input:disabled { cursor: default; }
.rc-check:has(input:disabled) { opacity: .45; cursor: default; }
.rc-check:has(input:focus-visible) { outline: 2px solid var(--chalk); outline-offset: 3px; }

.rc-go { justify-self: start; }
.js .rc-go { display: none; }

/* ---- out */
.rc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rc-actions[hidden] { display: none; }
.rc-status { min-height: 1.45em; font-size: 14px; color: var(--chalk-dim); overflow-wrap: anywhere; }
.rc-link { display: grid; gap: 8px; }
.rc-link[hidden] { display: none; }
.rc-how { max-width: 46em; }