/* DOTS and Wilks calculator (T67 stream D). Tokens only, phone first.
   Every class is prefixed dc- or sits under .dc. */

.dc { display: grid; gap: 32px; }
.dc > [hidden] { display: none; }

/* ---- which weight is scored */
.dc-lifts { display: grid; gap: 10px; }
.dc-lifts .chip { display: inline-flex; align-items: center; text-decoration: none; }
.dc-lifts .chip[aria-current="page"] { background: var(--chalk); color: var(--on-chalk); }

/* ---- you: a bodyweight and a weight lifted */
.dc-you { display: grid; gap: 22px; }
.dc-fields { display: grid; gap: 18px 48px; align-items: start; }
.dc-field { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.dc .pm-weight input { min-width: 44px; font-size: clamp(56px, 15vw, 104px); }
.dc .pm-weight .unit { font-size: clamp(22px, 4.4vw, 36px); }
.no-js .dc .pm-weight input { border-bottom-color: var(--steel-light); }
.no-js .dc [data-dc-step], .no-js .dc-slide-row { display: none; }
.js .dc-go { display: none; }
.dc-go { justify-self: start; }
@media (min-width: 760px) { .dc-fields { grid-template-columns: auto auto; justify-content: start; } }

/* ---- the two scores, side by side */
.dc-result { display: grid; gap: 14px; padding-top: 24px; border-top: 1px solid var(--hairline); }
.dc-scores { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 14px; max-width: 880px; }
.dc-score { display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 6px; align-content: start; min-width: 0; }
.dc-score + .dc-score { padding-left: 14px; border-left: 1px solid var(--hairline); }
.dc-score-name { font: 700 clamp(22px, 3.6vw, 30px)/1 var(--f-display); letter-spacing: .5px; text-transform: uppercase; color: var(--chalk-dim); }
.dc-score-n { margin: 0; font: 700 clamp(44px, 12.6vw, 132px)/.9 var(--f-display); letter-spacing: -.5px; white-space: nowrap; }
.dc-score-n .roll { height: .9em; }
.dc-score-n .roll .c, .dc-score-n .roll .col span, .dc-score-n .roll .sep { height: .9em; line-height: .9; }
.dc-for { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--chalk-dim); }
.dc-say { max-width: 40em; font-size: 17px; line-height: 1.5; }
.dc-edge { position: relative; max-width: 40em; padding: 14px 16px 14px 28px; border-radius: var(--r-surface); background: var(--iron-plate); font-size: 15px; line-height: 1.5; }
.dc-edge::before { content: ""; position: absolute; left: 12px; top: 14px; bottom: 14px; width: 5px; border-radius: 3px; background: var(--steel-light); }
.dc-edge[hidden] { display: none; }

/* ---- two lifters, one board */
.dc-board { display: grid; gap: 16px; padding-top: 28px; border-top: 1px solid var(--hairline); min-width: 0; }
.dc-board .body-dim { max-width: 40em; }
.dc-head { margin-top: 6px; }
.dc-by { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.dc-by .seg button { min-width: 0; padding: 0 14px; }

/* one bar as the scale; each lifter is a plate standing on it, taller for a heavier body */
.dc-scale { position: relative; height: 250px; max-width: 880px; margin-top: 4px; overflow: hidden; }
.dc-rail { position: absolute; left: 0; right: 0; top: 108px; height: 8px; border-radius: 4px; background: var(--steel); }
.dc-rail::before, .dc-rail::after { content: ""; position: absolute; top: -7px; width: 10px; height: 22px; border-radius: 2px; background: var(--steel-light); }
.dc-rail::before { left: 14px; }
.dc-rail::after { right: 14px; }
.dc-track { position: absolute; left: 36px; right: 36px; top: 0; height: 224px; }
.dc-mover { position: absolute; left: 0; top: 0; bottom: 0; width: calc(100% - 24px); transition: transform 260ms cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.dc-plate { position: absolute; left: 0; top: calc(112px - var(--dc-h) / 2); width: 24px; height: var(--dc-h); border-radius: 6px; background: var(--chalk); box-shadow: inset 0 1px 0 var(--plate-hl), 0 0 0 2px var(--iron-floor); transition: background-color 360ms ease; }
.dc-m-b .dc-plate { background: var(--steel-light); }
.dc-plate.ember-able.is-live { background: var(--ember); box-shadow: inset 0 1px 0 var(--plate-hl), 0 0 0 2px var(--iron-floor), 0 0 0 6px var(--ember-glow); }
.dc-tag { position: absolute; left: 12px; display: grid; justify-items: center; gap: 2px; transform: translateX(-50%); white-space: nowrap; }
.dc-m-a .dc-tag { bottom: calc(112px + var(--dc-h) / 2 + 8px); }
.dc-m-b .dc-tag { top: calc(112px + var(--dc-h) / 2 + 8px); }
.dc-tag b { font: 600 11px/1 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--chalk-dim); }
.dc-tag span { font: 700 20px/1 var(--f-display); }
.dc-ticks { position: absolute; left: 36px; right: 36px; bottom: 0; display: flex; justify-content: space-between; padding-top: 6px; border-top: 1px solid var(--hairline); font-size: 12px; color: var(--chalk-dim); }

/* the board itself: rank, who, the number */
.dc-rows { list-style: none; margin: 0; padding: 0; max-width: 880px; }
.dc-row { position: relative; display: grid; grid-template-columns: 36px 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 0 14px 0 8px; border-bottom: 1px solid var(--hairline); background: var(--iron-floor); }
.dc-row.is-you { border: 1px solid var(--steel-light); border-radius: var(--r-button); }
.dc-rank { display: grid; place-items: center; width: 32px; height: 32px; font: 700 17px/1 var(--f-display); color: var(--chalk-dim); }
.dc-rank.is-first { border-radius: 50%; background: var(--chalk); color: var(--on-chalk); box-shadow: inset 0 0 0 3px var(--chalk), inset 0 0 0 4.5px var(--on-chalk); }
.dc-av { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--iron-raised); font: 700 15px/1 var(--f-display); letter-spacing: .4px; text-transform: uppercase; }
.dc-who { min-width: 0; font-weight: 600; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-who small { display: block; font-weight: 400; font-size: 13px; line-height: 1.3; color: var(--chalk-dim); white-space: normal; }
.dc-val { font: 700 24px/1 var(--f-display); text-align: right; white-space: nowrap; }
.dc-val b { font-weight: 700; }
.dc-val-u { margin-left: 5px; font-size: .58em; font-weight: 600; color: var(--chalk-dim); }
.dc-verdict { max-width: 40em; font-size: 17px; line-height: 1.5; }

/* your friend: smaller numerals, and a slider for the bodyweight */
.dc-friend { display: grid; gap: 18px; justify-items: start; min-width: 0; max-width: 880px; margin: 8px 0 0; padding: 20px; border: 0; border-radius: var(--r-surface); background: var(--iron-plate); }
.dc-friend legend { float: left; width: 100%; padding: 0; }
.dc-friend .dc-fields { width: 100%; }
.dc-friend .pm-weight input { font-size: clamp(44px, 11vw, 64px); }
.dc-friend .pm-weight .unit { font-size: clamp(20px, 4vw, 26px); }
.dc-friend .step-btn { width: 48px; height: 48px; }
.dc-slide-row { width: 100%; max-width: 420px; }
.dc-slide { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; padding: 0; background: transparent; cursor: pointer; touch-action: pan-y; }
.dc-slide::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--steel); }
.dc-slide::-moz-range-track { height: 6px; border-radius: 3px; background: var(--steel); }
.dc-slide::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 36px; margin-top: -15px; border: 0; border-radius: 6px; background: var(--chalk); }
.dc-slide::-moz-range-thumb { width: 18px; height: 36px; border: 0; border-radius: 6px; background: var(--chalk); }
.dc-slide:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; border-radius: 8px; }
@media (min-width: 600px) { .dc-friend { padding: 28px; } }

/* ---- what a kilogram is worth */
.dc-more { display: grid; gap: 28px; margin-top: clamp(44px, 7vw, 72px); }
.dc-curve-sec { display: grid; gap: 12px; min-width: 0; }
.dc-curve-sec .body-dim { max-width: 40em; }
.dc-curve-box { max-width: 560px; margin-top: 8px; }
.dc-curve-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dc-c-grid { stroke: var(--hairline); stroke-width: 1; }
.dc-c-tick { font: 600 10px/1 var(--f-body); fill: var(--chalk-dim); font-variant-numeric: tabular-nums; }
.dc-c-line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.dc-c-dots { stroke: var(--chalk); stroke-width: 2.5; }
.dc-c-wilks { stroke: var(--steel-light); stroke-width: 2; stroke-dasharray: 5 4; }
.dc-c-at { stroke: var(--steel-light); stroke-width: 1; }
.dc-c-ring { fill: var(--iron-floor); stroke: var(--steel-light); stroke-width: 2; }
.dc-c-dot { fill: var(--chalk); stroke: var(--iron-floor); stroke-width: 2; transition: fill 360ms ease; }
.dc-c-me.is-live .dc-c-dot { fill: var(--ember); }
.dc-curve-x { margin-top: 2px; text-align: center; }
.dc-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; color: var(--chalk-dim); }
.dc-key { display: inline-block; width: 22px; height: 0; border-top: 2.5px solid var(--chalk); }
.dc-key-wilks { margin-left: 14px; border-top: 2px dashed var(--steel-light); }
.dc-curve-line { max-width: 40em; font-size: 17px; line-height: 1.5; }
.dc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.dc-actions [hidden] { display: none; }

/* ---- explainer */
.dc-form { padding: 14px 16px; border-radius: var(--r-button); background: var(--iron-plate); font: 500 15px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; overflow-wrap: anywhere; }
.dc-coef caption { padding-bottom: 12px; text-align: left; font: 600 12px/1.3 var(--f-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--chalk-dim); }
.dc-coef td, .dc-check td { white-space: nowrap; }
.dc-coef, .dc-check { font-size: 13px; }
.dc-coef th, .dc-coef td, .dc-check th, .dc-check td { padding-right: 8px; }
.dc-coef td:first-child { width: 4.6em; white-space: normal; }
.dc-coef { font-size: 12px; letter-spacing: -.1px; }
.dc-coef td:first-child { width: 4.2em; }
@media (min-width: 480px) { .dc-coef, .dc-check { font-size: 15px; letter-spacing: 0; } .dc-coef th, .dc-coef td, .dc-check th, .dc-check td { padding-right: 16px; } }
.dc-check td:last-child { white-space: normal; min-width: 14em; }
.dc-sources li { overflow-wrap: anywhere; }

/* ---- print sheet */
.dc-sheet-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.dc-sheet-form .field { margin: 0; }
.dc-sheet-form .input { min-height: 44px; }
.dc-sheet-tbl { margin-top: 4mm; font-variant-numeric: tabular-nums lining-nums; }
.dc-sheet-tbl { font-size: 9.5pt; line-height: 1.15; }
.dc-sheet-tbl th, .dc-sheet-tbl td { padding: .75mm 2mm; text-align: right; }
.dc-sheet-tbl th:first-child, .dc-sheet-tbl td:first-child, .dc-sheet-tbl th:nth-child(2) { text-align: right; }
.dc-sheet-tbl tbody th { font: 700 11pt/1 var(--f-display); letter-spacing: 0; }
.dc-sheet-tbl tbody tr:nth-child(5n) td, .dc-sheet-tbl tbody tr:nth-child(5n) th { border-bottom-width: .6mm; }
.dc-sheet-note { margin-top: 3mm; font-size: 8.5pt; }

@media (prefers-reduced-motion: reduce) {
  .dc-mover, .dc-plate, .dc-c-dot { transition: none; }
}