/* Practice Gym V3.1 — calculator dock (host page).
   Colours are the studio tokens plus the gym's own tokens (--gym-navy,
   --gym-gold, --gym-paper declared in practice-gym-v3.css). */

/* Nothing a scholar scrolls or tabs to hides under the fixed site header
   (WCAG 2.4.11). This stylesheet loads on the Practice Gym page only. */
:root { scroll-padding-top: calc(var(--header-height, 72px) + 12px); }
/* On Chromebook/Linux fonts the footer's legal row was 2px wider than a 360px
   phone, so the whole page scrolled sideways. Let it wrap. */
.site-footer .footer-legal { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.gym-v3 .pe-stem { scroll-margin-top: calc(var(--header-height, 72px) + 12px); }
/* Past the course step the welcome hero is hidden, and the row under it (Team
   entrance, Review my practice, Calm view) used to start under the fixed
   header at the top of the page. Give it the header's clearance. */
.gym-v3[data-flow-ready="true"]:not([data-gym-step="course"]) > .light-band--page { padding-top: calc(var(--header-height, 72px) + 1.25rem); }

/* ---- Every size: controls on top, the device fills the rest --------------- */
.gym-v3 #gym-calculator { display: flex; flex-direction: column; min-height: 0; }
/* This rule needs the ID to beat practice-gym-v3.css's #gym-calculator head
   rules, so no state selector can out-rank it. The sheet and minimized states
   therefore never set padding here directly: they set these two custom
   properties on .gym-tools, and this one rule reads them. */
.gym-v3 #gym-calculator .gym-calc-head {
  order: 0; position: relative; top: auto; bottom: auto; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.6rem;
  padding: var(--gym-calc-head-top, 0.6rem) var(--gym-calc-head-end, 0.75rem) var(--gym-calc-head-foot, 0.6rem) 0.75rem;
  border-top: 0; border-bottom: 1px solid var(--line-strong);
  background: var(--surface);
}
.gym-v3 #gym-calculator .gym-calc-frame { order: 1; flex: 1 1 auto; min-height: 0; }
.gym-v3 #gym-calculator .gym-tool-status { order: 2; margin: 0.5rem 0.9rem; }
.gym-v3 #gym-calculator .gym-tool-foot { order: 3; margin: 0.25rem 0.9rem 0.7rem; }
.gym-calc-title { flex: 1 1 8rem; min-width: 0; }
.gym-calc-title h3 { font-size: 1.02rem; }
.gym-calc-title p { font: 600 0.7rem/1.3 var(--font-mono); letter-spacing: 0.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gym-calc-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.gym-calc-actions .gym-button { min-height: 44px; padding: 0.5rem 0.8rem; font-size: 0.84rem; }
.gym-calc-use { background: var(--gym-navy); border-color: var(--gym-navy); color: var(--surface); max-width: 15rem; }
.gym-calc-use:hover { filter: brightness(1.12); }
.gym-calc-use-value { font: 600 0.84rem var(--font-mono); max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gym-calc-use-value:empty { display: none; }
.gym-calc-use[aria-disabled="true"] { background: transparent; color: var(--ink-2); border-color: var(--line-strong); border-style: dashed; cursor: default; filter: none; }
/* Settings: the calculator's workspace, model and size panel, opened over the
   device so a closed drawer never takes the keys' room. */
.gym-calc-actions .gym-calc-settings { display: inline-flex; align-items: center; justify-content: center; width: 44px; min-width: 44px; padding: 0; }
.gym-calc-settings svg { display: block; flex: 0 0 auto; }
.gym-calc-settings[aria-expanded="true"] { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }
.gym-calc-settings[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.gym-calc-sr, .gym-v3 #gym-calculator[data-calc-state="ready"] .gym-tool-status {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* The fallback links matter only when the calculator could not load. */
.gym-v3 #gym-calculator:not([data-calc-state="error"]) .gym-tool-foot { display: none; }
.gym-v3 #gym-calculator[data-calc-state="error"] .gym-tool-status { color: var(--ink); font-weight: 600; }

/* ---- Side dock: laptops, Chromebooks, portrait tablets --------------------- */
@media (min-width: 720px) and (max-width: 959px) and (min-height: 640px) {
  /* A portrait tablet gets a real column: the device can be twice the size it
     would be in a sheet, and the whole question stays in view. */
  .gym-v3 .gym-workspace[data-calc-layout="side"] { grid-template-columns: minmax(0, 1fr) minmax(300px, 44%); }
  .gym-v3 .gym-tools[data-active-tool="calculator"] { position: sticky; }
}
@media (min-width: 960px), (min-width: 720px) and (min-height: 640px) {
  .gym-v3 .gym-tools[data-active-tool="calculator"] {
    top: calc(var(--header-height, 72px) + 14px);
    max-height: calc(100dvh - var(--header-height, 72px) - 28px);
    overflow: hidden;
  }
  .gym-v3 .gym-tools[data-active-tool="calculator"] #gym-calculator { height: calc(100dvh - var(--header-height, 72px) - 30px); }
  .gym-v3 #gym-calculator .gym-calc-frame { height: auto; min-height: 340px; }
}

/* ---- Sheet: phones and very short windows --------------------------------- */
@media (max-width: 719px), (max-width: 959px) and (max-height: 639px) {
  .gym-v3 .gym-tools[data-calc-sheet="true"] {
    position: sticky; bottom: 0; z-index: 40;
    height: var(--gym-sheet-h, 60dvh); max-height: none; overflow: hidden;
    display: flex; flex-direction: column;
    /* Edge to edge: the page gutters would only shrink the device. */
    margin-left: calc(-1 * var(--gym-sheet-bleed-l, 0px)); margin-right: calc(-1 * var(--gym-sheet-bleed-r, 0px));
    border-radius: 20px 20px 0 0; border-bottom: 0; border-left: 0; border-right: 0;
    box-shadow: 0 -16px 36px -18px var(--gym-navy);
  }
  .gym-v3 .gym-tools[data-calc-sheet="true"] #gym-calculator { flex: 1 1 auto; height: 100%; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-frame { height: auto; }
  .gym-v3 .gym-tools[data-calc-sheet="true"][data-calc-min="true"] { height: auto; }
  .gym-v3 .gym-tools[data-calc-min="true"] .gym-calc-frame { display: none; }
  /* The grip sits in its own strip above the controls, never on top of them. */
  .gym-v3 .gym-tools[data-calc-sheet="true"] { --gym-calc-head-top: var(--gym-calc-grip-h); --gym-calc-head-foot: 0.45rem; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-head { border-radius: 20px 20px 0 0; }
  /* One row: title, Use result, Settings, Minimize, Close — every pixel the
     head saves goes to the device's keys. */
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-actions { display: contents; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-title { order: 1; flex: 1 1 6rem; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-use { order: 2; flex: 0 1 auto; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-settings { order: 3; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-min { order: 4; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] [data-gym-close="calculator"] { order: 5; }
  .gym-v3 .gym-tools[data-calc-min="true"] .gym-calc-settings { display: none; }
  /* Minimized: a single bar whose end is kept clear for the site's 48px
     accessibility button, which rests 12px from the corner (see below). */
  .gym-v3 .gym-tools[data-calc-min="true"] .gym-calc-use { display: none; }
  .gym-v3 .gym-tools[data-calc-min="true"] { --gym-calc-head-end: calc(12px + 48px + 0.75rem); }
  .gym-v3 .gym-tools[data-dragging="true"] { user-select: none; }
  .gym-v3 .gym-tools[data-dragging="true"] .gym-calc-frame { pointer-events: none; }
}
.gym-v3 .gym-tools { --gym-calc-grip-h: 24px; }
.gym-calc-grip {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 88px; height: var(--gym-calc-grip-h, 24px); box-sizing: border-box;
  cursor: ns-resize; touch-action: none; border-radius: 0 0 10px 10px;
}
.gym-calc-grip[hidden] { display: none; }
.gym-calc-grip span { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-strong); }
.gym-calc-grip:hover span, .gym-calc-grip:focus-visible span { background: var(--accent); }
.gym-calc-grip:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
/* Phones: one compact row — Use result, then Settings, Minimize and Close as
   44px icon buttons — so every pixel saved goes to the calculator's keys. */
@media (max-width: 480px) {
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-title {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-use { order: 1; flex: 1 1 auto; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] :is(.gym-calc-min, [data-gym-close="calculator"]) { flex: 0 0 44px; width: 44px; padding: 0; font-size: 0; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] :is(.gym-calc-min, [data-gym-close="calculator"])::before { font-size: 1.45rem; line-height: 1; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] .gym-calc-min::before { content: '\25BE'; }
  .gym-v3 .gym-tools[data-calc-min="true"] .gym-calc-min::before { content: '\25B4'; }
  .gym-v3 .gym-tools[data-calc-sheet="true"] [data-gym-close="calculator"]::before { content: '\00D7'; font-size: 1.5rem; }
  /* Minimized on a phone: the title comes back so the bar says what it is. */
  .gym-v3 .gym-tools[data-calc-min="true"] .gym-calc-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; }
  .gym-v3 .gym-tools[data-calc-min="true"] .gym-calc-title p { display: none; }
}

/* Floating site buttons never cover the question or the calculator's
   controls: back-to-top steps away while the calculator is open (beside the
   question it sat on the dock's settings row), the sound toggle while the
   sheet is up, and the accessibility button rests in the empty margin beside
   the device (or at the end of the bar, which keeps that end clear). */
body:is(.gym-calc-sheet-open, .gym-calc-sheet-min, .gym-calc-side-open) #dji-to-top,
body:is(.gym-calc-sheet-open, .gym-calc-sheet-min) #ah-sfx-toggle { display: none !important; }
body.gym-calc-sheet-open #a11y-widget { bottom: calc(84px + var(--cookie-banner-height, 0px)) !important; }
body.gym-calc-sheet-min #a11y-widget { bottom: calc(12px + var(--cookie-banner-height, 0px)) !important; right: 12px !important; }

/* Accommodations */
body.a11y-high-contrast .gym-v3 #gym-calculator .gym-calc-head { border-bottom: 2px solid var(--ink); }
body.a11y-high-contrast .gym-calc-use[aria-disabled="true"] { color: var(--ink); border-color: var(--ink); }
body.a11y-high-contrast .gym-calc-grip span { background: var(--ink); }
@media (prefers-reduced-motion: reduce) { .gym-calc-use:hover { filter: none; } }
@media print { .gym-calc-head { display: none !important; } }