/* Study sessions are a fixed instrument: one stable card stage, one external
   control stage, and one compact toolbar. Card-specific controllers keep
   owning behavior; this shell owns geometry. */
.hand-page {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--card) 90%, transparent) 0, transparent 34rem),
    var(--paper);
}

.hand-page > .navbar {
  display: none;
}

.hand-page > main {
  position: fixed;
  inset: 0;
  height: 100dvh;
  overflow: hidden;
}

.hand-focus {
  --page-top-margin: clamp(0.75rem, 2vh, 1.5rem);
  --page-bottom-margin: clamp(1.125rem, 3vh, 2rem);
  height: calc(100dvh - var(--page-top-margin) - var(--page-bottom-margin));
  margin: var(--page-top-margin) 0 var(--page-bottom-margin);
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.hand-topbar,
.hand-main {
  width: min(48.75rem, calc(100% - 1.75rem));
  margin-inline: auto;
}

.hand-topbar {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
}

.hand-status {
  width: 100%;
  min-width: 0;
  min-height: 3.5rem;
  display: flex;
  align-items: stretch;
  padding: 0.3125rem;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 1.125rem;
  background: color-mix(in srgb, var(--card) 90%, var(--wash));
  box-shadow: 0 0.625rem 2rem color-mix(in srgb, var(--ink) 7%, transparent), inset 0 1px 0 color-mix(in srgb, white 75%, transparent);
}

.hand-status-item {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.9375rem;
}

.hand-status-item + .hand-status-item,
.hand-end {
  border-left: 1px solid var(--line);
}

.hand-focus-status {
  flex: 1.2;
  justify-content: flex-start;
}

.hand-focus-status.is-focused {
  color: var(--moss);
}

.hand-target {
  width: 1.875rem;
  height: 1.875rem;
  flex: 0 0 1.875rem;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--moss) 18%, transparent);
  border-radius: 50%;
  background: var(--moss-wash);
  font-size: 1.0625rem;
}

.hand-status-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.hand-status-copy small {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.5625rem;
  font-weight: 650;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hand-status-copy strong,
.hand-focus-status strong {
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hand-progress-status {
  flex: 2.3;
  gap: 0.8125rem;
}

/* An aimed hand wears its aim in the topbar; the words link back to the
   deal form with the same aim in the fields. */
.hand-aim-status {
  flex: 1;
}

.hand-aim-status .hand-status-copy {
  min-width: 0;
}

.hand-aim-status strong {
  overflow: hidden;
  text-overflow: ellipsis;
}

.hand-aim-link {
  color: inherit;
  text-decoration: none;
}

.hand-aim-link:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}

.hand-count {
  white-space: nowrap;
}

.hand-count span {
  color: var(--muted);
  font-size: 0.6875rem;
}

.hand-track {
  position: relative;
  flex: 1;
  min-width: 7rem;
  height: 0.625rem;
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--line) 72%, var(--paper));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
}

.hand-track::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 1px;
  border-radius: inherit;
  background: repeating-linear-gradient(90deg, transparent 0 calc(var(--segment) - 1px), color-mix(in srgb, var(--card) 88%, transparent) calc(var(--segment) - 1px) var(--segment));
  pointer-events: none;
}

.hand-track i {
  position: absolute;
  z-index: 1;
  inset: -1px auto -1px -1px;
  width: var(--progress);
  border: 1px solid var(--accent);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent-deep), var(--accent));
}

.hand-track i::after {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 0;
  width: 0.9375rem;
  height: 0.9375rem;
  border: 4px solid var(--card);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 34%, var(--line)), 0 0.1875rem 0.5625rem color-mix(in srgb, var(--ink) 18%, transparent);
  transform: translate(50%, -50%);
}

.hand-end {
  display: flex;
  margin: 0;
}

/* The navbar's theme toggle is hidden in a hand, so the topbar carries one. */
.hand-theme-toggle {
  flex: 0 0 auto;
  min-width: 3.5rem;
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: transparent;
  color: var(--muted);
  font-size: 1rem;
}

.hand-theme-toggle:hover,
.hand-theme-toggle:focus-visible {
  background: var(--wash);
  color: var(--accent-deep);
}

.hand-end-button {
  min-height: 100%;
  padding: 0 1rem;
  border: 0;
  border-radius: 0 0.75rem 0.75rem 0;
  background: transparent;
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
}

.hand-end-button:hover,
.hand-end-button:focus-visible {
  background: var(--wash);
}

.hand-main {
  height: 100%;
  min-height: 0;
  padding: clamp(0.4375rem, 1vh, 1.125rem) 0 0.5rem;
  display: grid;
  grid-template-rows: minmax(0, 36.25rem) auto auto;
  align-content: center;
}

.hand-card {
  position: relative;
  min-height: 0;
}

.hand-card .card {
  position: relative;
  width: 100%;
  height: 100%;
  max-height: 36.25rem;
  min-height: 0;
  border-color: color-mix(in srgb, var(--accent) 12%, var(--line));
  border-radius: 1.5rem;
  background: linear-gradient(150deg, var(--card), color-mix(in srgb, var(--wash) 22%, var(--card)));
  box-shadow: 0 1.75rem 4.375rem color-mix(in srgb, var(--ink) 11%, transparent), 0 0.125rem 0.1875rem color-mix(in srgb, var(--ink) 5%, transparent);
  overflow: hidden;
}

.hand-card .card > .list-group,
.hand-card .card > form > .list-group {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: inherit;
  background: transparent;
}

.hand-card .card--front {
  min-height: clamp(5.375rem, 15vh, 7rem);
  flex: 0 0 auto;
  padding: 1rem clamp(1.25rem, 5vw, 3.25rem);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.2vw, 1.875rem);
  font-weight: 740;
  line-height: 1.18;
  letter-spacing: -0.025em;
  text-align: center;
  background: color-mix(in srgb, var(--card) 90%, var(--wash));
}

.hand-card .list-group-item:not(.card--front) {
  min-height: 0;
}

.hand-card .card--fill {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hand-card .card--fill > form {
  width: 100%;
}

/* The stimulus keeps its own height rather than splitting the slack with
   the answer region, so a reveal that grows the region never shrinks it */
.hand-card .card--stimulus {
  flex: 0 0 auto;
}

.hand-card .card--back {
  flex: 1 1 auto;
}

/* The well an answer sits in, whichever item happens to hold it */
.hand-card .card--fill,
.hand-card .card--back,
.hand-card .hand-answer-region {
  background: color-mix(in srgb, var(--paper) 38%, var(--card));
}

.hand-card .hand-answer-region {
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: safe center;
  justify-content: center;
  overflow: hidden auto;
  padding: clamp(0.75rem, 2.8vh, 1.5rem) clamp(1rem, 5vw, 2.625rem) !important;
}

/* Choice rows sit at the top in both states, so the reveal marks the picked
   row where it was instead of recentering the stack around the note */
.hand-card .choice-card .hand-answer-region {
  align-items: flex-start;
}

.hand-card .card > .card-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.hand-card .card > .card-body h4 {
  font-family: var(--display);
  font-size: clamp(1.4375rem, 3.8vw, 2.0625rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.hand-card .map-card .list-group-item.p-0:not(.card--back),
.hand-card .timeline-card .timeline-area {
  flex: 1 1 auto;
  overflow: hidden;
}

.hand-card .map-card .list-group-item.p-0:not(.card--back) > div {
  height: 100% !important;
}

.hand-card .map-card .card--back,
.hand-card .timeline-card .card--back {
  min-height: 3.5rem;
  flex: 0 0 auto;
  padding: 0.75rem;
}

.hand-card .map-card:not(.card--revealed) .card--back,
.hand-card .timeline-card:not(.card--revealed) .card--back {
  min-height: 0;
  padding: 0;
  border: 0;
}

.hand-interaction {
  height: 100%;
  display: contents;
}

.hand-interaction.is-revealed > .card--hidden-on-revealed {
  display: none;
}

.hand-controls {
  min-height: clamp(6.5rem, 20vw, 9.375rem);
  margin-top: 0.75rem;
  display: flex;
  align-items: stretch;
}

.hand-controls > *,
.hand-controls #review-buttons,
.hand-controls .card--review-buttons {
  width: 100%;
}

.hand-controls #review-buttons,
.hand-controls .card--review-buttons,
.hand-controls .card--review-buttons > form,
.hand-controls .card--review-buttons > .d-flex,
.hand-controls #review-buttons > .d-flex {
  height: 100%;
}

.hand-controls .card--review-buttons > .d-flex,
.hand-controls #review-buttons > .d-flex {
  width: 100%;
}

/* Bootstrap's d-flex is !important, so the native hidden rule cannot hide
   the unused confidence outcome without an equally strong declaration. */
.hand-controls .card--review-buttons > [hidden] {
  display: none !important;
}

.hand-call {
  position: absolute;
  z-index: 3;
  top: calc(100% + 0.75rem);
  left: 0;
  right: 0;
  min-height: clamp(6rem, 20vw, 9.375rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}

.hand-call--single {
  grid-template-columns: 1fr;
  min-height: clamp(5.25rem, 12vw, 6.5rem);
  align-self: center;
}

.hand-call > small {
  grid-column: 1 / -1;
  align-self: end;
  margin: 0 !important;
}

.hand-call > form {
  display: flex;
}

/* A fill taller than the stage (a reveal with the memory ruler under it)
   scrolls inside the card rather than being clipped; safe centering keeps
   the top reachable when it does */
.hand-answer-panel {
  width: 100%;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  gap: 0.875rem;
  overflow-y: auto;
  padding: clamp(0.875rem, 3vw, 2rem) !important;
  background: color-mix(in srgb, var(--paper) 38%, var(--card));
  text-align: center;
}

.hand-answer-field {
  width: min(35rem, 100%);
}

/* The turned card, whichever well it turns in: the answer (or the field
   and its grading) louder than the question, and whatever rides along (a
   hook, a note, the guide's aside) right under it, the aside set large
   enough to read as the story rather than a footnote */
.hand-reveal-answer {
  padding: 0.5rem 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.75rem, 4.6vw, 2.75rem);
  font-weight: 740;
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hand-reveal-foot {
  width: min(38rem, 100%);
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-align: center;
}

.hand-reveal-foot:empty {
  display: none;
}

.hand-reveal-foot .primer-aside {
  margin-top: 0;
  font-size: 1.0625rem;
  line-height: 1.5;
  text-align: center;
}

.hand-reveal-foot .primer-aside__byline {
  font-size: 0.875rem;
}

.hand-reveal-foot .mt-2 {
  margin-top: 0 !important;
}

.hand-field-shell {
  width: min(35rem, 100%);
  display: grid;
  gap: 0.75rem;
}

.hand-field-shell--wide {
  width: min(37.5rem, 100%);
}

.hand-field-shell > textarea {
  height: 6.75rem;
  resize: none;
  padding: 0.875rem 1rem;
  font-size: 1.0625rem;
  line-height: 1.4;
}

.hand-graded-stage {
  width: min(38.75rem, 100%);
  display: grid;
  grid-template-rows: auto 4.75rem;
  align-items: center;
  gap: 0.5625rem;
}

.hand-graded-stage .card--cloze {
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.6vw, 1.8125rem);
  font-weight: 720;
  line-height: 1.65;
  text-align: center;
}

.hand-range-fields {
  width: min(38rem, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
}

.hand-feedback-slot {
  min-height: 3.5rem;
  display: grid;
  place-items: center;
  text-align: center;
}

.hand-inline-feedback {
  width: min(38rem, 100%);
  min-height: 3.5rem;
  color: var(--muted);
  text-align: center;
}

.hand-inline-feedback strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.05rem;
}

.hand-feedback-card {
  display: grid;
  place-items: center;
  gap: 0.4375rem;
  color: var(--muted);
  text-align: center;
}

.hand-verdict-note {
  display: inline-flex;
  align-items: center;
  padding: 0.375rem 0.625rem;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 720;
  line-height: 1;
}

.hand-verdict-note.is-correct {
  background: var(--moss-wash);
  color: var(--moss);
}

.hand-verdict-note.is-close,
.hand-verdict-note.is-unread {
  background: var(--gold-wash);
  color: var(--gold);
}

.hand-verdict-note.is-wrong {
  background: var(--rose-wash);
  color: var(--rose);
}

.hand-correct-answer {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.375rem;
}

.hand-correct-answer small {
  font-family: var(--display);
  font-size: 0.625rem;
  font-weight: 680;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hand-correct-answer strong {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 740;
  line-height: 1.2;
}

.hand-sibling-reading {
  color: var(--muted);
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
}

.hand-feedback-card p {
  margin: 0;
  font-size: 0.75rem;
}

/* The meeting: one column filling the card, the fact stated at its head
   and the story under it, then the ruler, set flush left so long lines
   keep one edge. The column centers in the card when short and scrolls
   from the top when long, and either way it starts below the occasion
   stamped on the card's top-left corner, which scrolls away with the text */
.hand-card .hand-meet {
  position: relative;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: safe center;
  padding: 3rem clamp(1.25rem, 5vw, 3.25rem) 1.5rem;
  overflow: hidden auto;
  text-align: start;
}

.hand-meet > * {
  width: min(38.125rem, 100%);
}

.hand-meet-fact {
  margin-bottom: 1rem;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1.25rem, 3.2vw, 1.875rem);
  font-weight: 740;
  line-height: 1.18;
  letter-spacing: -0.025em;
}

.hand-meet-stamp {
  position: absolute;
  z-index: 2;
  top: 1rem;
  left: 1.125rem;
  width: auto;
  padding: 0.375rem 0.75rem;
  border: 3px solid var(--accent);
  border-radius: 0.5rem;
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transform: rotate(-8deg);
  transform-origin: center;
  box-shadow: inset 0 0 0 1px var(--card), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
  opacity: 0.9;
  pointer-events: none;
}

/* The guide's note reads as the story here, not marginalia: the fact has
   the front, so the note is the body's opening line */
.hand-meet .primer-aside {
  max-width: none;
  margin: 0;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.hand-meet .primer-aside__note {
  font-style: normal;
}

.hand-meet .primer-aside__byline {
  font-size: 0.875rem;
}

.hand-meet .primer-aside + .mt-3 {
  margin-top: 1.25rem !important;
}

.hand-card .is-correct,
.hand-card .is-correct .form-control,
.hand-card .form-control.is-correct {
  border-color: var(--moss);
  background-color: var(--moss-wash);
}

.hand-card .is-close,
.hand-card .is-close .form-control,
.hand-card .form-control.is-close,
.hand-card .is-unread,
.hand-card .is-unread .form-control,
.hand-card .form-control.is-unread {
  border-color: var(--gold);
  background-color: var(--gold-wash);
}

.hand-card .is-wrong,
.hand-card .is-wrong .form-control,
.hand-card .form-control.is-wrong {
  border-color: var(--rose);
  background-color: var(--rose-wash);
}

.hand-card .card--cloze-blank:disabled {
  opacity: 1;
}

.hand-card .card--cloze-blank.is-correct {
  border-bottom-color: var(--moss);
  color: var(--moss);
}

.hand-card .card--cloze-blank.is-close,
.hand-card .card--cloze-blank.is-unread {
  border-bottom-color: var(--gold);
  color: var(--gold);
}

.hand-card .card--cloze-blank.is-wrong {
  border-bottom-color: var(--rose);
  color: var(--rose);
}

/* A graded breakdown row wears the same verdict colors every other answer
   does, one row at a time. */
.hand-card .card--breakdown-row.is-hit {
  border-color: var(--moss);
  background-color: var(--moss-wash);
}

.hand-card .card--breakdown-row.is-hit .card--breakdown-mark {
  color: var(--moss);
}

.hand-card .card--breakdown-row.is-miss {
  border-color: var(--rose);
  background-color: var(--rose-wash);
}

.hand-card .card--breakdown-row.is-miss .card--breakdown-mark {
  color: var(--rose);
}

.hand-card .hand-inline-feedback.card--cloze-answer {
  border: 0;
  padding: 0;
}

.hand-call .btn,
.hand-call .card--idk,
.hand-controls .card--review-buttons .btn {
  width: 100%;
  min-height: clamp(6rem, 20vw, 9.375rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border: 1.5px solid var(--line);
  border-radius: 1.25rem;
  background: var(--card);
  color: var(--accent-deep);
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 710;
  line-height: 1.15;
  text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}

.hand-call--single .card--idk,
.hand-next {
  min-height: clamp(5.25rem, 12vw, 6.5rem) !important;
}

.hand-controls form:has(.hand-next) {
  display: flex;
  align-items: center;
}

/* The quiet words under a reveal's buttons (I had it, Let it go) stack
   beneath them inside the controls, so they never land on the key hints. */
.hand-controls :is(.card--review-buttons, .card--review-buttons > form):has(> .hand-quiet) {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hand-controls .card--review-buttons:has(> .hand-quiet) > .d-flex {
  flex: 1;
  height: auto;
}

.hand-controls .hand-quiet {
  align-self: center;
  margin-top: 0.5rem;
}

/* A reverse location's map as the confidence card's cue: short enough that
   the prompt, the map, and the answer it turns over to share the card. */
.hand-cue-map {
  height: clamp(12rem, 34vh, 18rem);
}

.hand-call .btn-primary,
.hand-controls .card--review-buttons .btn-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: white;
}

.hand-call .btn-primary:hover:not(:disabled),
.hand-call .btn-primary:focus-visible:not(:disabled),
.hand-controls .card--review-buttons .btn-primary:hover,
.hand-controls .card--review-buttons .btn-primary:focus-visible {
  border-color: var(--accent-deep);
  background: var(--accent-deep);
  color: white;
}

.hand-call .btn:hover:not(:disabled),
.hand-call .btn:focus-visible:not(:disabled),
.hand-call .card--idk:hover,
.hand-call .card--idk:focus-visible,
.hand-controls .card--review-buttons .btn:hover,
.hand-controls .card--review-buttons .btn:focus-visible {
  border-color: var(--accent);
  background: var(--wash);
  color: var(--accent-deep);
  transform: translateY(-2px);
}

.hand-call .card--idk {
  color: var(--muted);
}

.hand-call .call-glyph {
  display: block;
  margin-bottom: 0.375rem;
  color: var(--accent);
  font-size: 1.75rem;
  line-height: 1;
}

.hand-call .card--idk .call-glyph {
  color: var(--muted);
}

.hand--hotkey-hints {
  min-height: 1.4375rem;
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.6875rem;
  text-align: center;
}

@media (max-width: 660px) {
  .hand-focus {
    --page-top-margin: 0.625rem;
    --page-bottom-margin: 1.125rem;
  }

  .hand-topbar,
  .hand-main {
    width: calc(100% - 1.25rem);
  }

  .hand-topbar {
    min-height: 3.375rem;
    padding-bottom: 0.375rem;
  }

  .hand-status {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    border-radius: 1rem;
  }

  .hand-status-item {
    grid-column: span 4;
    min-height: 2.4375rem;
    padding: 0.3125rem 0.375rem;
  }

  .hand-status-item + .hand-status-item {
    border-left: 0;
  }

  .hand-focus-status {
    grid-column: span 9;
  }

  .hand-status-item.hand-theme-toggle {
    grid-column: span 3;
    border-left: 1px solid var(--line);
  }

  .hand-aim-status {
    display: none;
  }

  .hand-progress-status {
    grid-column: span 9;
    border-top: 1px solid var(--line);
  }

  .hand-end {
    grid-column: span 3;
    min-height: 2.4375rem;
    border-top: 1px solid var(--line);
  }

  .hand-end-button {
    width: 100%;
    padding: 0 0.4375rem;
    border-radius: 0 0 0.6875rem;
    font-size: 0.6875rem;
  }

  .hand-target {
    display: none;
  }

  .hand-track {
    min-width: 5rem;
  }

  .hand-main {
    padding-top: 0.3125rem;
    grid-template-rows: minmax(0, 1fr) 6rem 0;
  }

  .hand-controls,
  .hand-call,
  .hand-call .btn,
  .hand-call .card--idk,
  .hand-controls .card--review-buttons .btn {
    min-height: 6rem;
  }

  .hand-card .card {
    border-radius: 1.25rem;
  }

  .hand-card .card--front {
    min-height: clamp(4.875rem, 13vh, 6rem);
    padding: 0.6875rem 0.875rem;
    font-size: clamp(1.125rem, 5.4vw, 1.4375rem);
  }

  .hand-card .hand-meet {
    padding: 2.25rem 0.875rem 1rem;
  }

  .hand-meet-fact {
    font-size: clamp(1.125rem, 5.4vw, 1.4375rem);
  }

  .hand-answer-panel {
    gap: 0.5rem;
    padding: 0.625rem 0.75rem !important;
  }

  .hand-range-fields {
    gap: 0.4375rem;
  }

  .hand-feedback-slot,
  .hand-inline-feedback {
    min-height: 2.75rem;
    font-size: 0.75rem;
  }

  .hand-meet-stamp {
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-width: 2px;
    font-size: 0.75rem;
  }

  .hand-call {
    min-height: 6rem;
    gap: 0.375rem;
  }

  .hand-call .btn,
  .hand-call .card--idk,
  .hand-controls .card--review-buttons .btn {
    padding: 0.4375rem 0.3125rem;
    border-radius: 1.0625rem;
    font-size: 0.75rem;
  }

  .hand-call .call-glyph {
    font-size: 1.4375rem;
  }

  .hand--hotkey-hints {
    display: none;
  }

  button[data-hotkey]::after,
  button[data-hotkey-quick]::after {
    display: none;
  }
}

@media (max-height: 690px) {
  .hand-topbar {
    min-height: 3rem;
  }

  .hand-main {
    padding-block: 0.25rem;
    grid-template-rows: minmax(0, 1fr) 5.125rem 0;
  }

  .hand-controls,
  .hand-call,
  .hand-call .btn,
  .hand-call .card--idk,
  .hand-controls .card--review-buttons .btn {
    min-height: 5.125rem;
  }

  .hand-card .card--front {
    min-height: 4.75rem;
    padding-block: 0.5rem;
    font-size: clamp(1.0625rem, 2.7vw, 1.4375rem);
  }

  .hand-meet-fact {
    font-size: clamp(1.0625rem, 2.7vw, 1.4375rem);
  }

}

@media (prefers-reduced-motion: reduce) {
  .hand-call .btn,
  .hand-call .card--idk,
  .hand-controls .card--review-buttons .btn,
  .hand-track i {
    transition: none;
  }
}

/* The deal-your-own-hand form. The sentence opener is the headline act, and
   a prefill briefly haloes each field it changed so the eye can follow what
   the suggestion touched. */
.hand-form-opener {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  background: color-mix(in srgb, var(--card) 88%, var(--wash));
}

.hand-form-opener .card-header {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  border-bottom-color: color-mix(in srgb, var(--accent) 25%, var(--line));
}

.hand-form-glow {
  border-radius: var(--bs-border-radius, 0.5rem);
  animation: hand-form-glow 1.6s ease-out;
}

@keyframes hand-form-glow {
  0% {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--accent) 45%, transparent);
  }

  100% {
    box-shadow: 0 0 0 0.25rem transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hand-form-glow {
    animation: none;
  }
}