/* ═══════════════════════════════════════════════════════════════════════════
   WILL HIS AVERAGE HOLD? -- the app's trust dial as a section of the player
   card (hold-dial.js draws it; the app's ui/holdDial.tsx is the reference).

   It sits in the wide column (.pc-col) directly ABOVE the card's games (Billy,
   2026-10-30), under the card's own heading: .pc-h with its italic .pc-sd over
   the ink rule.
   It reads its OWN width, never the screen's (a container, 2026-10-31): on a computer the card
   can pair it with his shape under one pill, which halves it, and a screen-wide rule set the table
   beside the dial in ~690px and crushed the table to a finger's width (Billy's screenshot).
   Narrow: the dial, the verdict, the sentence, then the table, one column.
   820px of its own or more: the dial on the left, the table beside it.

   Every color is the site's own variable, so light and dark follow the theme:
     settled  --gold (pine in light, sage in dark)   settling --grade-solid
     too early --text-tertiary                       takes years --grade-decent
   Every button is a pill (radius 999): the arrows, the speed pill, a picked row.
   ═══════════════════════════════════════════════════════════════════════════ */
/* a container keeps its heading's top margin inside it rather than merging with its own, so the
   old 8px went to 0 to keep the same gap above the heading */
.hd { margin-top: 0; container: hd / inline-size; }
.hd .hd-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 18px; }
.hd .hd-main { min-width: 0; }

/* the dial: drawn on a 354 x 190 box and scaled to its column */
.hd .hd-g {
  position: relative; width: 100%; max-width: 420px; margin: 0 auto;
  aspect-ratio: 354 / 190;
}
.hd .hd-arc { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.hd .hd-badge {
  position: absolute; width: 36px; height: 36px; border-radius: 999px;
  transform: translate(-50%, -50%); border: 3px solid var(--bg-page); box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 600; font-size: 11.5px; color: var(--bg-page);
  font-variant-numeric: tabular-nums; box-shadow: 0 2px 3px rgba(20, 14, 25, .3);
  overflow: hidden;
}
/* the pointer lit as a bead (hold-dial.js beadLight): under the percent, never over it */
.hd .hd-bead { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hd .hd-badge b { position: relative; font-weight: 600; }
.hd .hd-m { margin-top: 12px; padding: 0 12px; }
.hd .hd-arrow {
  position: absolute; top: 0; width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--text-primary);
  display: flex; align-items: center; justify-content: center; padding: 0; cursor: pointer;
}
.hd .hd-arrow.l { left: 0; }
.hd .hd-arrow.r { right: 0; }
.hd .hd-arrow:hover { border-color: var(--gold); color: var(--gold); }
.hd .hd-in {
  position: absolute; left: 16.4%; right: 16.4%; bottom: 7.4%;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.hd .hd-nm {
  margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  color: var(--text-primary); text-align: center; white-space: nowrap;
}
.hd .hd-nm span { font-weight: 400; font-size: 11px; color: var(--text-tertiary); }
.hd .hd-pair { display: flex; align-items: flex-end; gap: 14px; width: 100%; }
.hd .hd-pair > div { flex: 1; min-width: 0; text-align: center; }
.hd .hd-pair > i { width: 1px; align-self: stretch; background: var(--border); }
.hd .hd-sl { display: block; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-secondary); }
.hd .hd-big {
  display: block; font-family: var(--font-display); font-weight: 400;
  font-size: 40px; line-height: 44px; white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text-primary);
}
.hd .hd-pair .ex .hd-sl { color: var(--gold); font-weight: 600; }
.hd .hd-pair .ex .hd-big { color: var(--gold); }

/* the verdict, with how fast that kind of number can be trusted */
.hd .hd-v {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px;
  margin: 10px 0 0; font-family: var(--font-sans); font-weight: 600; font-size: 13px; line-height: 18px;
}
.hd .hd-pill {
  border: 1px solid currentColor; border-radius: 999px; padding: 1px 9px;
  font-size: 12px; line-height: 16px;
}
.hd .hd-x {
  margin: 10px auto 0; max-width: 46ch; text-align: center;
  font-size: .84rem; line-height: 1.6; color: var(--text-primary);
}

/* every number, a row: so far, expect, a small dial; a row opens its number above */
.hd .hd-t { min-width: 0; }
.hd .hd-ch, .hd .hd-r {
  display: grid; grid-template-columns: minmax(0, 1fr) 58px 62px 44px; gap: 9px; align-items: center;
}
.hd .hd-ch {
  font-size: .6875rem; letter-spacing: .15em; text-transform: uppercase; color: var(--text-tertiary);
  padding: 0 12px 6px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.hd .hd-ch span:nth-child(2), .hd .hd-ch span:nth-child(3) { text-align: right; }
.hd .hd-ch .ex { color: var(--gold); font-weight: 600; }
.hd .hd-ch .tr { text-align: center; }
.hd .hd-r {
  width: 100%; min-height: 50px; padding: 5px 12px; margin: 0 0 2px; box-sizing: border-box;
  border: 1px solid transparent; border-radius: 999px; background: transparent;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.hd .hd-r:hover { background: var(--bg-card); }
.hd .hd-r.on { border-color: var(--gold); background: var(--bg-card); }
.hd .hd-r .n {
  min-width: 0; font-family: var(--font-sans); font-weight: 600; font-size: .86rem; line-height: 1.25;
  color: var(--text-primary);
}
.hd .hd-r .n em {
  display: block; font-style: normal; font-weight: 400; font-size: .72rem;
  color: var(--text-secondary); margin-top: 2px; font-variant-numeric: tabular-nums;
}
.hd .hd-r .n em.ok { color: var(--gold); font-weight: 600; }
.hd .hd-r .n em.past { color: var(--grade-decent); font-weight: 600; }
.hd .hd-r .f {
  font-family: var(--pc-table-face, var(--font-display)); font-weight: 400; font-size: calc(1.12rem * var(--pc-table-size, 1)); text-align: right;
  font-variant-numeric: lining-nums tabular-nums; color: var(--text-primary); white-space: nowrap;
}
.hd .hd-r .f.ex { color: var(--gold); font-size: calc(1.24rem * var(--pc-table-size, 1)); }
.hd .hd-r .m { display: flex; justify-content: center; }
.hd .hd-mini { display: block; overflow: visible; }

/* room for both (the dial's 400 + 44 + a table whose names keep ~150px): the dial and its
   words on the left, the table beside them */
@container hd (min-width: 820px) {
  .hd .hd-body { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 44px; align-items: start; }
  .hd .hd-t { padding-top: 2px; }
}
/* the narrowest: the big numbers give a little */
@container hd (max-width: 360px) {
  .hd .hd-big { font-size: 34px; line-height: 38px; }
  .hd .hd-ch, .hd .hd-r { grid-template-columns: minmax(0, 1fr) 54px 58px 44px; gap: 8px; }
}

/* a narrow phone: the two figures keep clear of the knob at either end of the arc (2026-10-31:
   "31.3%" touched the knob at 99%) */
@container hd (max-width: 430px) {
  .hd .hd-in { left: 19%; right: 19%; }
  .hd .hd-big { font-size: 34px; line-height: 38px; }
  .hd .hd-pair { gap: 10px; }
}