/* Golden Gym certify UI (#4651, RFC golden-gym §5). Phone first: one column,
   big tap targets, the verdict bar pinned to the bottom of the viewport so a
   thumb reaches it. Colours come only from the Ledger tokens. */
.gym { max-width: 680px; margin: 0 auto; }
.gym-head { margin-bottom: 8px; }
.gym-tabs { margin-bottom: 12px; }
.gym-muted { color: var(--color-fg-muted); font-size: 12px; }
.gym-keys { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12px; color: var(--color-fg-muted); margin: 8px 0 12px; }
.gym-keys .gym-undo { margin-left: auto; }
@media (hover: none) { .gym-keys kbd, .gym-btn kbd { display: none; } }

.gym-scopes { display: grid; gap: 8px; margin-bottom: 12px; }
.gym-scope { border: 1px solid var(--color-border-muted); border-radius: 8px; padding: 8px 12px; background: var(--color-panel); }
.gym-scope__name { font-size: 12px; color: var(--color-fg-muted); }
.gym-scope__nums { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; }
.gym-scope__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.gym-card { border: 1px solid var(--color-border); border-radius: 12px; background: var(--color-panel); padding: 12px; }
/* Off-screen rather than display:none, so every browser still treats it as the
   default button for implicit (Enter) submission. */
.gym-implicit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gym-card__head { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.gym-dispute { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--color-attention-fg, #9a6700); font-size: 14px; }

.gym-inputs { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.gym-input { margin: 0; flex: 0 0 auto; width: min(46%, 220px); scroll-snap-align: start; }
.gym-inputs:has(> .gym-input:only-child) .gym-input { width: 100%; }
.gym-input__shot { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: var(--color-canvas-subtle); border: 1px solid var(--color-border-muted); }
.gym-input__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gym-inputs:has(> .gym-input:only-child) .gym-input__shot { aspect-ratio: 4 / 3; }
.gym-inputs:has(> .gym-input:only-child) .gym-input__shot img { object-fit: contain; background: var(--color-scrim-plate); }
.gym-input__shot--blank { display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--color-fg-muted); }
.gym-input__zoom { position: absolute; right: 6px; bottom: 6px; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-badge-scrim); color: var(--color-badge-fg-strong); font-size: 14px; }
.gym-input figcaption { display: flex; flex-direction: column; font-size: 12px; color: var(--color-fg-muted); margin-top: 4px; line-height: 1.35; }
.gym-input figcaption strong { color: var(--color-fg); font-weight: 600; }

.gym-expect { margin-top: 12px; }
.gym-expect__label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--color-fg-muted); }
.gym-expect--negative .gym-expect__label { color: var(--color-danger); }
.gym-expect__sentence { font-size: 18px; line-height: 1.35; margin: 2px 0 8px; color: var(--color-fg); }
.gym-fields { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.gym-fields dt { color: var(--color-fg-muted); }
.gym-fields dd { margin: 0; overflow-wrap: anywhere; }

.gym-graded { margin-top: 10px; font-size: 12px; }
.gym-graded summary { cursor: pointer; color: var(--color-fg-muted); }
.gym-graded pre { font-size: 11px; background: var(--color-canvas-subtle); padding: 8px; border-radius: 6px; overflow-x: auto; }

.gym-verdict { margin-top: 12px; }
.gym-buttons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; position: sticky; bottom: 0; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); background: var(--color-panel); z-index: 2; }
.gym-buttons .gym-btn { min-height: 48px; font-size: 15px; justify-content: center; }
.gym-buttons .gym-btn:first-child { grid-column: 1 / -1; }
.gym-btn kbd { font-size: 11px; opacity: .7; margin-left: 4px; }
@media (min-width: 640px) {
  .gym-buttons { grid-template-columns: repeat(5, 1fr); position: static; }
  .gym-buttons .gym-btn:first-child { grid-column: auto; }
}

.gym-panel { border-top: 1px solid var(--color-border-muted); padding-top: 10px; margin-top: 8px; display: grid; gap: 10px; }
.gym-panel__title { margin: 0; font-size: 13px; color: var(--color-fg-muted); }
.gym-form { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.gym-form legend { font-size: 13px; margin-bottom: 4px; }
.gym-field { display: grid; gap: 2px; font-size: 13px; }
.gym-field__label { color: var(--color-fg-muted); font-size: 12px; }
.gym-field input, .gym-field select { min-height: 44px; font-size: 16px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-canvas); color: var(--color-fg); width: 100%; box-sizing: border-box; }
.gym-field__hint { font-size: 11px; color: var(--color-fg-subtle); }
.gym-check { display: flex; align-items: center; gap: 8px; font-size: 14px; min-height: 44px; }

/* The one-form Certify card (#4698, layout #4708). One column: the photos,
   the selector, the option's fields, then the summary, Certify and the
   secondary links inline at the end of the form. Certify is never pinned: a
   pinned button sat under the thumb on the next card too, and a double tap
   certified it unseen. The photos are pinned instead, under the sticky top
   bar, so they stay in view while the fields are checked against them. */
.gym-card { scroll-margin-top: calc(var(--console-topbar-height, 0px) + 8px); }
.gym-card:focus { outline: none; }
.gym-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.gym-card--certify .gym-inputs { position: sticky; top: var(--console-topbar-height, 0px); z-index: 3; margin: 0 -12px; padding: 8px 12px 6px; background: var(--color-panel); border-bottom: 1px solid var(--color-border-muted); }
.gym-card--certify .gym-input__shot { max-height: 40vh; max-height: 40svh; }
@media (max-width: 480px) {
  /* A compact strip on a phone: thumbnails about a quarter of the small
     viewport height (svh, so iOS Safari's collapsing toolbar does not resize
     it mid-scroll), two side by side, a third and more scroll sideways. */
  .gym-card--certify .gym-input { width: min(calc(50% - 5px), 25vh); width: min(calc(50% - 5px), 25svh); }
  .gym-card--certify .gym-inputs:has(> .gym-input:only-child) .gym-input { width: 100%; }
  .gym-card--certify .gym-inputs:has(> .gym-input:only-child) .gym-input__shot { aspect-ratio: auto; height: 27vh; height: 27svh; }
  .gym-card--certify .gym-inputs:has(> .gym-input:only-child) .gym-input__shot img { object-fit: contain; }
  .gym-card--certify .gym-input figcaption { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gym-card--certify .gym-input figcaption > * + *::before { content: "· "; }
  .gym-card--certify .gym-input__zoom { width: 22px; height: 22px; font-size: 12px; right: 4px; bottom: 4px; }
}
.gym.is-certify .gym-keys .gym-undo { display: none; }
.gym-status { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--color-accent); background: var(--color-panel); font-size: 13px; }
.gym-notice { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: var(--color-canvas-subtle); font-size: 13px; }

.gym-certify { margin-top: 12px; display: grid; gap: 12px; }
.gym-what { display: grid; gap: 4px; }
.gym-what__label { font-size: 16px; font-weight: 600; color: var(--color-fg); }
.gym-what select { min-height: 48px; font-size: 17px; padding: 6px 10px; border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-canvas); color: var(--color-fg); width: 100%; box-sizing: border-box; }
.gym-certify__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.gym-certify__fields .gym-field { grid-column: 1 / -1; min-width: 0; }
.gym-certify__fields .gym-field--dose_amount, .gym-certify__fields .gym-field--dose_unit { grid-column: auto; }
.gym-certify__fields .gym-field[hidden] { display: none; }
.gym-field__hint:empty { display: none; }

.gym-certify__act { display: grid; gap: 8px; padding: 12px 0 calc(4px + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-border-muted); }
.gym-certify__btn:disabled { opacity: .55; cursor: progress; }
.gym-summary { font-size: 14px; line-height: 1.4; color: var(--color-fg); }
.gym-summary p { margin: 0; }
.gym-summary p + p { margin-top: 2px; color: var(--color-fg-muted); }
.gym-summary.is-busy { opacity: .6; }
.gym-summary--error, .gym-summary--error p + p { color: var(--color-danger); }
.gym-certify__btn { min-height: 52px; font-size: 17px; justify-content: center; width: 100%; }
.gym-certify__btn kbd { font-size: 11px; opacity: .7; margin-left: 6px; }
.gym-secondary { display: flex; justify-content: center; gap: 4px 18px; flex-wrap: wrap; }
.gym-link { appearance: none; background: none; border: 0; padding: 8px 4px; min-height: 36px; font: inherit; font-size: 13px; color: var(--color-fg-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.gym-link:disabled { opacity: .45; cursor: default; text-decoration: none; }
.gym-link kbd { font-size: 10px; opacity: .7; margin-left: 2px; }
@media (hover: none) { .gym-certify__btn kbd, .gym-link kbd { display: none; } }
.gym-graded__sentence { margin: 6px 0; font-size: 13px; }

.gym-error { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: var(--color-danger-subtle); color: var(--color-danger); font-size: 13px; }
.gym-state { padding: 24px 12px; text-align: center; color: var(--color-fg-muted); }

.gym-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.gym-entry { display: flex; gap: 10px; border: 1px solid var(--color-border-muted); border-radius: 10px; padding: 10px; background: var(--color-panel); }
.gym-entry__thumbs { display: flex; flex-direction: column; gap: 4px; flex: 0 0 64px; }
.gym-entry__thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block; }
.gym-entry__main { flex: 1; min-width: 0; }
.gym-entry__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; }
.gym-entry__sentence { margin: 4px 0; font-size: 14px; }
.gym-entry__actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin-top: 6px; }
.gym-inline { display: inline; }
.gym-action summary { list-style: none; }
.gym-action summary::-webkit-details-marker { display: none; }
.gym-action[open] { flex-basis: 100%; }
.gym-action__form { display: grid; gap: 8px; margin-top: 8px; }