/* One-screen workspace layout (opt-in, 2026-09-24).
 *
 * The request: stop forcing the visitor to scroll the page vertically on a PC. The board,
 * the hand and the results should stay in view, and anything that does not fit should
 * scroll inside its own block, the way GTO Wizard scrolls a panel instead of the page.
 *
 * Everything here is scoped to `body.study-fixed`, which the page sets on itself. If the
 * script does not run, or the viewport is too small, the original scrolling layout is what
 * remains: this file can never make the page worse than it was.
 *
 * The tricky part is `min-height: 0`. A grid or flex item defaults to `min-height: auto`,
 * which refuses to shrink below its content, so `overflow: auto` on the child does nothing
 * and the page grows instead. Every scroll container below therefore resets it.
 */

@media (min-width: 1280px) and (min-height: 1100px) {
  body.study-fixed {
    height: 100vh;
    overflow: hidden;
  }

  body.study-fixed .study-header {
    flex: 0 0 auto;
  }

  /* The column below the header owns the remaining height.
     `height: calc(100vh - header)` is NOT enough: the header's own bottom margin and the
     body's hidden overflow stop that margin from collapsing, so `main` starts lower than
     the header ends and the document ends up 56px taller than the viewport. The offset is
     measured from the live layout instead of assumed. */
  body.study-fixed .study-main {
    display: flex;
    flex-direction: column;
    max-width: min(100%, 1820px);
    margin: 0 auto;
    padding: 8px 28px;
    height: calc(100vh - var(--study-main-top, 89px) - 8px);
    min-height: 0;
    overflow: hidden;
  }

  /* The page footer must not push the document taller than the viewport: that was the
     remaining 56px of page scroll. Its links stay reachable by scrolling the panel that
     already scrolls, and the footer itself keeps its content. */
  body.study-fixed .study-main > footer,
  body.study-fixed .study-main > .footer {
    flex: 0 0 auto;
    margin: 6px 0 0;
    padding: 6px 0 0;
  }

  /* Marketing copy and the how-to steps are the tallest fixed blocks on the page. On a
     one-screen workspace they collapse to a single dismissible line so the board and the
     results get the height instead. The text is still in the DOM and still readable. */
  body.study-fixed .intro {
    flex: 0 0 auto;
    padding: 4px 0 8px;
  }

  body.study-fixed .intro h1,
  body.study-fixed .intro .eyebrow,
  body.study-fixed .intro p {
    font-size: 13px;
    margin: 0;
    line-height: 1.4;
  }

  body.study-fixed .intro h1 {
    font-size: 18px;
    display: inline-block;
    margin-right: 10px;
  }

  body.study-fixed .study-onboarding,
  body.study-fixed .grade-guide,
  body.study-fixed .public-notice,
  body.study-fixed .owner-access {
    flex: 0 0 auto;
    font-size: 11px;
    padding: 4px 0;
    margin: 0;
  }

  body.study-fixed .study-onboarding ol,
  body.study-fixed .study-onboarding .steps {
    display: inline-flex;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The builder holds the board, the hand and the stack panel; it gets the leftover
     height and scrolls internally rather than being squeezed into 255px. */
  body.study-fixed .table-builder {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  body.study-fixed .study-main > .intro,
  body.study-fixed .study-main > .study-onboarding,
  body.study-fixed .study-main > .table-controls,
  body.study-fixed .study-main > .table-status {
    flex: 0 0 auto;
  }

  /* Board + hand on the left, review panels on the right, each scrolling on its own. */
  body.study-fixed .study-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }

  body.study-fixed .study-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(230px, 1fr);
    gap: 18px;
    min-height: 0;
    overflow: hidden;
  }

  /* Every panel that may hold more than the screen scrolls internally. */
  body.study-fixed .session-sidebar,
  body.study-fixed .study-content,
  body.study-fixed .table-board-area,
  body.study-fixed .table-deck-panel,
  body.study-fixed .decision-panel,
  body.study-fixed .sensitivity-panel,
  body.study-fixed .panel,
  body.study-fixed .review-panel {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  /* The board itself should not be the thing that scrolls when it fits. */
  body.study-fixed .study-table,
  body.study-fixed .table-board {
    flex: 0 0 auto;
  }

  /* Long tables get their own scroll area with a sticky header, per the request. */
  body.study-fixed .candidate-table,
  body.study-fixed .ranking-table,
  body.study-fixed .sensitivity-table {
    display: block;
    max-height: 100%;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
  }

  body.study-fixed .candidate-table thead th,
  body.study-fixed .ranking-table thead th,
  body.study-fixed .sensitivity-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #14141a;
  }

  /* Keep the primary action reachable without scrolling back down. */
  body.study-fixed .toolbar,
  body.study-fixed .panel-heading {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #0f0f13;
  }
}

/* ---- short viewports: protect the workspace --------------------------------
 * Measured with a position loaded (1280 wide):
 *   header 89 + nav 55 = 144 of chrome
 *   intro 48, notice 25, trial 147, plan 60, owner 35, onboarding 47, guide 42 = 404
 *   the board needs 855, the hand 91, the controls 176
 * A window shorter than about 900px cannot show all of that at once. Rather than let the
 * workspace collapse (it measured 45px tall at 1280x600), the layout gives space back in
 * tiers and the builder keeps a floor. Elements are hidden, never deleted, and the
 * disclosures still open on click.
 */

/* The builder is the workspace: give it a floor so it can never be squeezed out. */
@media (min-width: 1280px) and (min-height: 1100px) {
  body.study-fixed #builder {
    flex: 1 1 auto;
    min-height: 340px;
  }
}

@media (min-width: 1280px) and (min-height: 1100px) and (max-height: 1100px) {
  /* The three-step hint is already expressed by the table itself. */
  body.study-fixed .study-onboarding,
  body.study-fixed .owner-access {
    display: none;
  }
  body.study-fixed .intro {
    padding: 2px 0 4px;
  }
  body.study-fixed .intro h1 {
    font-size: 16px;
  }
  body.study-fixed .intro button {
    padding: 6px 12px;
    font-size: 12px;
  }
  /* One compact line: label + countdown, no body copy, no claim button. */
  body.study-fixed .trial {
    padding: 3px 0;
    margin: 0;
  }
  body.study-fixed .trial > .trial-body {
    display: none;
  }
  body.study-fixed .trial-button {
    padding: 5px 11px;
    font-size: 12px;
  }
  body.study-fixed .trial-head {
    gap: 12px;
  }
  body.study-fixed .trial-clock {
    font-size: 17px;
  }
  body.study-fixed .plan-section {
    font-size: 11px;
    padding: 1px 0;
    margin: 0;
  }
  body.study-fixed .plan-section > .panel,
  body.study-fixed .plan-section > section {
    display: none;
  }
  /* Grade marks are a reference, not a control: the hover titles still carry the names. */
  body.study-fixed .grade-guide {
    display: none;
  }
}

@media (min-width: 1280px) and (min-height: 1100px) and (max-height: 820px) {
  /* Tighten further: the beta line and the page footer go, and the plan row collapses. */
  body.study-fixed .public-notice,
  body.study-fixed .study-main > footer,
  body.study-fixed .study-main > .footer,
  body.study-fixed .plan-section {
    display: none;
  }
}

@media (min-width: 1280px) and (min-height: 1100px) and (max-height: 640px) {
  body.study-fixed .intro {
    display: none;
  }
}

/* ---- workspace: the assessment gets its own column -------------------------
 * Measured before this change at 1440x900 with a position loaded:
 *   #builder            340px tall, internally scrolling
 *   .study-layout        79px tall
 *   #decisionPanel      286px tall but positioned at y=1021, i.e. below the fold
 * The appraisal the visitor came for was therefore invisible on a normal screen. The
 * mockup puts the board and the assessment side by side, so main becomes a two-column
 * row and the assessment stops being a block underneath everything.
 */
@media (min-width: 1100px) {
  body.study-fixed .study-main {
    display: grid;
    grid-template-columns: minmax(0, 1.32fr) minmax(360px, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "board review";
    column-gap: 16px;
    align-content: start;
  }

  /* Everything that currently stacks above the workspace becomes part of the header row. */
  body.study-fixed .study-main > .intro,
  body.study-fixed .study-main > .trial,
  body.study-fixed .study-main > .plan-section,
  body.study-fixed .study-main > .owner-access,
  body.study-fixed .study-main > .study-onboarding,
  body.study-fixed .study-main > .grade-guide,
  body.study-fixed .study-main > .public-notice,
  body.study-fixed .study-main > .job-status,
  body.study-fixed .study-main > .error {
    grid-area: head;
  }

  /* The header row is a single wrapping line, so the blocks above share one grid cell. */
  body.study-fixed .study-main > .intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 14px;
  }

  body.study-fixed .study-main > .intro ~ * {
    margin-top: 0;
  }

  /* The builder and the assessment sit side by side and both own their own scrolling. */
  body.study-fixed #builder {
    grid-area: board;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    max-height: 100%;
    overflow: hidden;
  }

  /* The board surface takes the height the controls do not use. Without this the surface
     collapses and the board rows measure zero, which is exactly what happens when the
     builder stops being a flex column. */
  body.study-fixed #builder > .table-surface {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
  }

  body.study-fixed #builder .table-workspace {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    /* The board is the subject; the deck picker is a tool. Measured before this rule the
       board column was 310px of 733px, which clipped the hand and the analyse button. */
    grid-template-columns: minmax(340px, 1.55fr) minmax(0, 1fr);
  }

  body.study-fixed #builder .table-board-area {
    flex: 1 1 auto;
    min-height: 0;
  }

  /* The deck is a reference grid and stays usable at this width. */
  body.study-fixed #builder .table-deck-panel .playing-card {
    width: 30px;
    height: 42px;
    font-size: 25px;
  }

  /* Vertical budget. Measured stack inside the board column before this rule:
     opponent previews 136 + heading 39 + title 30 + note 41 + board rows 257
     + hand heading 39 + hand 91 + discards 77 + actions 98 = 808px, against 580px of
     builder height at 1440x900. The hand and the analyse button therefore sat below the
     fold even though the page itself did not scroll. These rules spend the space on the
     board and the hand instead of on labels and padding. */
  body.study-fixed #builder .table-controls {
    padding: 4px 0 6px;
  }

  body.study-fixed #builder #positionMap {
    min-height: 0;
  }

  body.study-fixed #builder .position-map {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-height: 0;
  }

  body.study-fixed #builder .opponent-previews {
    min-height: 0;
  }

  body.study-fixed #builder .opponent-preview {
    padding: 5px 8px;
    min-height: 0;
    font-size: 11px;
  }

  body.study-fixed #builder .table-board-heading {
    margin: 2px 0 0;
  }

  body.study-fixed #builder #tableBoardTitle {
    font-size: 15px;
    margin: 2px 0;
  }

  /* The instructional paragraph is the single largest label in the column. */
  body.study-fixed #builder #tableBoardNote {
    font-size: 11px;
    line-height: 1.45;
    margin: 2px 0 4px;
    max-height: 33px;
    overflow: hidden;
  }

  body.study-fixed #builder .table-board-row {
    min-height: 0;
    padding: 4px 6px;
    margin: 3px 0;
  }

  body.study-fixed #builder .hand-heading {
    margin: 4px 0 0;
  }

  body.study-fixed #builder .hand-zone {
    min-height: 66px;
    margin-top: 4px;
    padding: 5px 3px;
  }

  body.study-fixed #builder .hand-zone .playing-card {
    --card-w: 38px;
    --card-h: 52px;
    --rank: 29px;
  }

  body.study-fixed #builder .playActions {
    padding: 5px 0 0;
    margin-top: 4px;
  }

  body.study-fixed #builder .playActions button {
    padding: 8px 14px;
  }

  body.study-fixed .study-layout {
    grid-area: review;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
  }

  /* On a wide screen the session list is a narrow strip above the assessment, not a
     column of its own; the assessment is what the column is for. */
  body.study-fixed .study-layout > .session-sidebar {
    flex: 0 0 auto;
    max-height: 128px;
    overflow: auto;
  }

  body.study-fixed .study-layout > .study-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
  }

  body.study-fixed #decisionPanel {
    min-height: 0;
  }
}

/* Below the two-column breakpoint the original stacked order is restored untouched. */

/* ---- action row: shaped primary and secondary buttons ----------------------
 * The mockup puts the two committing actions side by side as full pills, with the
 * secondary actions smaller beside them. Measured before this: the buttons were plain
 * 12px rectangles that read as incidental, even though "place the hand" and "analyse"
 * are the two things the page exists for.
 */
@media (min-width: 1100px) {
  body.study-fixed #builder .playActions,
  body.study-fixed #builder .toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
  }

  body.study-fixed #builder .playActions button,
  body.study-fixed #builder .toolbar button {
    font-size: 13px;
    font-weight: 650;
    border-radius: 999px;
    padding: 10px 20px;
  }

  body.study-fixed #builder .playActions .primary,
  body.study-fixed #builder .toolbar .primary,
  body.study-fixed #builder #startPlacement {
    border-radius: 999px;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 700;
  }

  /* The card picker keeps the mockup's 4 x 13 grid; the ranks stay legible at this size. */
  body.study-fixed #builder .card-picker .playing-card {
    width: 34px;
    height: 45px;
    font-size: 26px;
  }

  body.study-fixed #builder .table-deck-row {
    grid-template-columns: 34px repeat(13, minmax(0, 1fr));
    gap: 4px;
  }

  body.study-fixed #builder .table-deck-row .playing-card {
    width: 100%;
    min-width: 0;
  }
}

/* ---- selected hand tray inside the picker panel ----------------------------
 * The tray is markup inside #deckPanel, so a re-render cannot move it away. While a move
 * is being placed the grid is not the input surface, so only that half of the panel is
 * hidden; the tray stays visible under it. The play state also carries the framework's
 * own `hidden` class, which is overridden here because the hand is still needed.
 */
body.study-fixed #deckPanel.picker-hidden {
  /* study.css ships `.study-main .hidden{display:none!important}`, so the panel cannot be
     revealed with a normal declaration. This is the one place in the tray layout that has
     to outrank it, because the hand is still needed while a move is being placed. */
  display: block !important;
}

/* Full width under the board, so the tray is not squeezed into the picker column.
   The board row is capped so the tray and the actions stay on the same screen: the board
   column measures about 470px, the tray 110 and the actions 60, and the builder only has
   580px at 1440x900. The board scrolls internally past its cap. */
body.study-fixed #builder .table-workspace:has(#deckPanel:not(.hidden)),
body.study-fixed #builder .table-workspace:has(#deckPanel.picker-hidden) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(280px, auto) minmax(0, auto);
  align-content: start;
}

body.study-fixed #deckPanel {
  position: static;
  width: 100%;
  max-width: 100%;
}

body.study-fixed #deckPanel.picker-hidden #deckTitle,
body.study-fixed #deckPanel.picker-hidden #deckInstruction,
body.study-fixed #deckPanel.picker-hidden #cardPicker,
body.study-fixed #deckPanel.picker-hidden #returnToDeck,
body.study-fixed #deckPanel.picker-hidden > p {
  display: none;
}

body.study-fixed #deckPanel .hand-heading {
  margin-top: 8px;
}

body.study-fixed #deckPanel .hand-zone {
  margin-top: 4px;
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
}

body.study-fixed #deckPanel .hand-zone .playing-card {
  --card-w: 34px;
  --card-h: 46px;
  --rank: 26px;
}

body.study-fixed #deckPanel .hand-zone {
  min-height: 52px;
  padding: 4px 3px;
}

body.study-fixed #deckPanel .discard-zone {
  max-width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
}

/* The board column keeps the board and the actions only. */
body.study-fixed #builder .table-board-area > .hand-heading {
  display: none;
}

/* ---- one consistent shell --------------------------------------------------
 * The shell is a function of the window, not of a fixed 1440px slab:
 *   - the column is capped so long lines stay readable, but the cap is generous and
 *     reaches the viewport on ordinary desktop widths
 *   - the two workspace columns share the available width instead of holding fixed sizes
 *   - no type size depends on window HEIGHT, so a maximised window and a restored one
 *     render the same text
 */
@media (min-width: 1100px) {
  body.study-fixed .study-main,
  body.study-fixed .study-header,
  body.study-fixed .study-nav {
    width: 100%;
    max-width: min(100%, 1820px);
    margin-left: auto;
    margin-right: auto;
  }

  /* The workspace row fills the column: board and review share the width. */
  body.study-fixed .study-main {
    grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr);
  }

  /* The board no longer needs to be told a width; it takes its share of the row. */
  body.study-fixed #builder {
    width: auto;
    max-width: none;
  }

  body.study-fixed .study-layout {
    width: auto;
    max-width: none;
  }

  /* Board rows and the deck grid scale with the column instead of holding a pixel size. */
  body.study-fixed #builder .table-board-row {
    width: 100%;
  }

  body.study-fixed #builder .table-deck-row {
    grid-template-columns: 34px repeat(13, minmax(0, 1fr));
  }
}

/* Type sizes are the same at every height inside the one-screen range. These come after
   the short-viewport tiers, so they win without needing !important. */
@media (min-width: 1280px) and (min-height: 1100px) {
  body.study-fixed .intro h1 {
    font-size: 17px;
  }

  body.study-fixed #builder #tableBoardTitle {
    font-size: 17px;
  }

  body.study-fixed .intro p,
  body.study-fixed .intro .eyebrow {
    font-size: 12.5px;
  }
}

/* Below the one-screen range the page scrolls and keeps comfortable typing. */
@media (max-width: 1099px) {
  .study-main,
  .study-header,
  .study-nav {
    width: 100%;
    max-width: min(100%, 1820px);
  }
}

/* ---- intro: one shape for Study and Trainer --------------------------------
 * The intro is a row with a text column and an actions column. Inside the text column the
 * eyebrow, the heading and the subtitle stack. Study's heading sits alone, so the stack
 * costs it nothing; for the Trainer it is what stops the eyebrow and the heading running
 * together on one line.
 */
body.study-fixed .intro {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 4px 18px;
}

/* The text column is the first child; it stacks its parts. */
body.study-fixed .intro > div:first-child {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

body.study-fixed .intro .eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  line-height: 1.2;
  margin: 0;
}

body.study-fixed .intro h1 {
  display: block;
  font-size: 19px;
  line-height: 1.25;
  margin: 0;
}

body.study-fixed .intro p {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  margin: 0;
  max-width: 70ch;
}

/* The actions column stays on the first line, at the right edge. */
body.study-fixed .intro > button,
body.study-fixed .intro > .intro-actions {
  align-self: flex-start;
  margin-left: auto;
}

/* ---- head container --------------------------------------------------------
 * One element owns the head row; the blocks stack inside it as normal flow. Assigning the
 * same grid area to several siblings put them all in one cell, which is why the trial box,
 * the plan row and the notice overlapped.
 */
@media (min-width: 1100px) {
  body.study-fixed .study-main > .study-head {
    grid-area: head;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
  }

  /* Inside the container these are ordinary blocks again. */
  body.study-fixed .study-head > * {
    grid-area: auto;
    margin: 0;
  }

  body.study-fixed .study-head > .intro {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 2px 18px;
  }

  body.study-fixed .study-head > .intro > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
  }

  body.study-fixed .study-head > .error:empty,
  body.study-fixed .study-head > .job-status.hidden {
    display: none;
  }
}

/* Below the one-screen range the container is plain flow. */
@media (max-width: 1099px) {
  .study-head {
    display: block;
  }
}

/* ---- the Study grid stops at the Study page --------------------------------
 * .study-main is shared by Study and Trainer. The two-column grid above is written for
 * Study; on the Trainer it auto-placed an unassigned panel into the review column and left
 * the board column empty. The Trainer keeps its own stacked, full-width layout.
 */
body.study-fixed.trainer-page .study-main {
  display: block;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
}

body.study-fixed.trainer-page .study-main > * {
  grid-area: auto;
  width: auto;
  max-width: none;
}

body.study-fixed.trainer-page .study-main > .panel,
body.study-fixed.trainer-page .study-main > .intro,
body.study-fixed.trainer-page .study-main > p {
  width: 100%;
}

/* ---- full-screen shell, the reference's way --------------------------------
 * Measured on the reference app: html and body are 100% tall, the shell is a flex column
 * and the main column is the only flexible child. There is no viewport unit anywhere and
 * no JavaScript measuring the header, so toggling full screen (F11) cannot leave a stale
 * offset behind -- the browser re-resolves the percentages on the next layout.
 */
@media (min-width: 1280px) and (min-height: 1100px) {
  html {
    height: 100%;
  }

  body.study-fixed {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  body.study-fixed .study-header,
  body.study-fixed .study-nav {
    flex: 0 0 auto;
  }

  /* Replaces `height: calc(100vh - var(--study-main-top) - 8px)`. */
  body.study-fixed .study-main {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }
}