/* chai-po — monochrome surface layer.
 *
 * White ground, black text, hairline rules, and one deep gold used only where the eye is
 * meant to land. No filled panels: a section is marked by a rule and by space. Dark mode
 * inverts the monochrome half and lightens the gold so it still reads against black.
 *
 * Loaded last so it settles the palette regardless of what the older sheets ask for.
 */

/* ---------------------------------------------------------------- ground */
:root {
  color-scheme: light;
  --mc-ground: var(--ground, #ffffff);
  --mc-ink: var(--text, #111111);
  --mc-muted: var(--text-muted, #6f6f6f);
  --mc-line: var(--line, #dcdcdc);
  --mc-accent: var(--accent, #8a6a1f);
  --mc-grid: var(--grid, #11111114);
  /* The edge of a drawn box. A panel outline is the same 1px as the ground lines but has to
     survive being read, so it sits a step above them instead of at full ink. Full ink at 1px
     reads as a heavy white bar next to a ground line, which is what made the boxes shout. */
  --mc-edge: #1111112b;
  --mc-hair: 1px;
}

/* The inverted theme. Only three things change: the two ends of the monochrome ramp and
   the gold, which has to lift off black to stay legible. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --mc-ground: #0c0c0d;
  --mc-ink: #f4f4f5;
  --mc-muted: #9a9a9e;
  --mc-line: #2c2c2e;
  --mc-accent: #d9b34a;
  --mc-grid: #ffffff12;
  --mc-edge: #ffffff2b;
}

html { background: var(--mc-ground); }

body.study-page {
  background: var(--mc-ground) !important;
  color: var(--mc-ink);
  --ink: var(--mc-ink);
  --ink-muted: var(--mc-muted);
  --rule: var(--mc-line);
  --accent: var(--mc-accent);
}

/* A faint geometric grid, drawn behind everything and never interactive. It gives the
   white ground a structure without becoming a texture the eye has to work through. */
body.study-page::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--mc-grid) var(--mc-hair), transparent var(--mc-hair)),
    linear-gradient(to bottom, var(--mc-grid) var(--mc-hair), transparent var(--mc-hair));
  background-size: 72px 72px;
}
/* Two large outline circles, off to the sides, so the ground reads as drawn rather than
   as graph paper. Fixed, so they never move under the content. */
body.study-page::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at -6vw 18vh, transparent 0 22vw, var(--mc-grid) 22vw calc(22vw + 1px), transparent calc(22vw + 1px)),
    radial-gradient(circle at 108vw 82vh, transparent 0 26vw, var(--mc-grid) 26vw calc(26vw + 1px), transparent calc(26vw + 1px));
}
/* Everything that carries content sits above the drawing. */
body.study-page > * { position: relative; z-index: 1; }

/* ---------------------------------------------------------------- type */
body.study-page,
.study-page h1, .study-page h2, .study-page h3,
.study-page .intro h1, .study-page #trainerTitle, .study-page .perf-title {
  font-family: "Noto Sans JP", Inter, system-ui, sans-serif !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: var(--mc-ink) !important;
}
.study-page .muted, .study-page .small { color: var(--mc-muted) !important; }

/* ---------------------------------------------------------------- buttons
 * Outlined by default: a thin rule in the text colour, on the ground. The one filled
 * control on a screen is the accent, which is the only place the gold is spent.
 */
.study-page button,
.study-page .button {
  min-height: var(--btn-min-h, 44px);
  padding: 10px var(--btn-pad-x, 20px);
  border: var(--mc-hair) solid var(--mc-ink) !important;
  border-radius: var(--btn-radius, 8px);
  background: transparent !important;
  color: var(--mc-ink) !important;
  font-family: "Noto Sans JP", Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.study-page button:hover:not(:disabled),
.study-page .button:hover:not(:disabled) {
  background: var(--mc-ink) !important;
  color: var(--mc-ground) !important;
}
.study-page button:disabled { opacity: .4; cursor: default; }

.study-page button.primary,
.study-page .button.primary {
  background: var(--mc-accent) !important;
  border-color: var(--mc-accent) !important;
  color: #ffffff !important;
}
.study-page button.primary:hover:not(:disabled) {
  background: var(--mc-ink) !important;
  border-color: var(--mc-ink) !important;
  color: var(--mc-ground) !important;
}
:root[data-theme="dark"] .study-page button.primary { color: #0c0c0d !important; }

.study-page button.text-button,
.study-page .text-button {
  min-height: 0 !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--mc-accent) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.study-page button.text-button:hover:not(:disabled) {
  background: none !important;
  color: var(--mc-ink) !important;
}

.study-page :focus-visible {
  outline: 2px solid var(--mc-accent);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- inputs */
.study-page select,
.study-page input[type="text"],
.study-page input[type="number"],
.study-page textarea {
  min-height: var(--btn-min-h, 44px);
  padding: 8px 12px;
  border: var(--mc-hair) solid var(--mc-line) !important;
  border-radius: var(--btn-radius, 8px);
  background: var(--mc-ground) !important;
  color: var(--mc-ink) !important;
  font-family: inherit;
  font-size: 15px;
}

/* --------------------------------------------------------------- surfaces
 * The last filled panels become plain groups separated by a rule.
 */
.study-page .panel,
.study-page #sessionHeading,
.study-page #studyResults,
.study-page #sensitivityPanel,
.study-page #jobStatus,
.study-page #trainerResults,
.study-page #dailyReview,
.study-page #dailyLeaderboard,
.study-page #timerPanel,
.study-page .trainer-start,
.study-page .session-sidebar,
.study-page .study-onboarding,
.study-page .perf-panel,
.study-page .perf-card,
.study-page .billing,
.study-page .billing-plan,
.study-page .trial,
.study-page #trialOffer,
.study-page details {
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.study-page .panel,
.study-page .billing,
.study-page .perf-panel,
.study-page .perf-card { border: 0 !important; padding: 0 !important; }

.study-page .billing-plan,
.study-page .trial,
.study-page #trialOffer,
.study-page .plan-section,
.study-page .owner-access,
.study-page .grade-guide,
.study-page .advanced-settings,
.study-page details {
  border: 0 !important;
  border-top: var(--mc-hair) solid var(--mc-line) !important;
  padding: var(--sp-2, 16px) 0 !important;
}
.study-page .billing-plan { padding-top: var(--sp-2, 16px) !important; }
.study-page .billing-plan.current { border-top-color: var(--mc-accent) !important; }

/* A section break is a rule and space, never a box. */
.study-page .study-content > section + section,
.study-page .study-main > section + section {
  border-top: var(--mc-hair) solid var(--mc-line);
  padding-top: var(--sp-4, 32px);
}

/* ------------------------------------------------------------------ board */
.study-page .position-map {
  background: var(--mc-ground) !important;
  border: var(--mc-hair) solid var(--mc-line) !important;
}
.study-page .position-map .position-chip {
  background: var(--mc-ground) !important;
  border: var(--mc-hair) solid var(--mc-ink) !important;
  color: var(--mc-ink) !important;
  box-shadow: none !important;
}
.study-page .position-map .position-chip.hero {
  background: var(--mc-accent) !important;
  border-color: var(--mc-accent) !important;
  color: #ffffff !important;
}
:root[data-theme="dark"] .study-page .position-map .position-chip.hero { color: #0c0c0d !important; }

/* HU / 3way reads as a tab set: the selection is weight and a rule, not a chip.
   The two labels are different lengths, so the tabs are equal tracks and each label is
   centred inside its own tab. Without the equal tracks "HU" ends up against the left edge
   and "3way" against the right, which reads as two stray words rather than as a pair. */
.study-page .table-mode {
  border-bottom: var(--mc-hair) solid var(--mc-line);
  display: inline-grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 !important;
  min-width: 210px;
}
.study-page .table-mode button {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--mc-muted) !important;
  font-weight: 700;
  padding: 12px 0 !important;
  text-align: center !important;
}
.study-page .table-mode button.active {
  color: var(--mc-ink) !important;
  border-bottom-color: var(--mc-accent) !important;
}
.study-page .table-mode button:hover:not(.active) {
  background: none !important;
  color: var(--mc-ink) !important;
}

/* ------------------------------------------------------------------- top bar */
.study-page .study-header { background: none !important; border-bottom: var(--mc-hair) solid var(--mc-line) !important; }
.study-page .study-nav { border-bottom: var(--mc-hair) solid var(--mc-line); }
.study-page .study-nav a { color: var(--mc-muted); }
.study-page .study-nav a:hover, .study-page .study-nav a.active { color: var(--mc-ink); }
.study-page .study-upgrade {
  background: none !important;
  border: var(--mc-hair) solid var(--mc-ink);
  color: var(--mc-ink) !important;
}
.study-page .study-upgrade:hover { background: var(--mc-ink) !important; color: var(--mc-ground) !important; }

/* The theme switch sits with the other icon buttons. Square, hairline, no fill. */
.mc-theme-toggle {
  width: 38px;
  height: 38px;
  min-height: 0 !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--mc-hair) solid var(--mc-ink) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--mc-ink) !important;
  cursor: pointer;
  flex: 0 0 auto;
}
.mc-theme-toggle:hover { background: var(--mc-ink) !important; color: var(--mc-ground) !important; }
.mc-theme-toggle svg { width: 17px; height: 17px; display: block; }

/* ------------------------------------------------------------------- switch */
.study-page .bill-track { background: var(--mc-line) !important; }
.study-page .bill-knob { background: var(--mc-accent) !important; }
.study-page .bill-toggle input:checked + .bill-track { background: var(--mc-accent) !important; }
.study-page .bill-toggle input:checked + .bill-track .bill-knob { background: var(--mc-ground) !important; }

/* ------------------------------------------------------------------- plans */
.study-page .plan { border-top: var(--mc-hair) solid var(--mc-line) !important; }
.study-page .plan.selected { background: none !important; border-top-color: var(--tier, var(--mc-accent)) !important; }
.study-page .plan-name { color: var(--mc-muted); }
.study-page .plan.selected .plan-name { color: var(--tier, var(--mc-accent)); }
.study-page .plan-now { color: var(--mc-ink); }
.study-page .plan-was, .study-page .plan-per, .study-page .plan-total { color: var(--mc-muted); }
.study-page .plan-desc { color: var(--mc-muted); }
.study-page .plans-lead, .study-page .plans-note { color: var(--mc-muted); }
.study-page .plans-lead b { color: var(--mc-ink); }
.study-page .plans-save { color: var(--mc-accent); }
.study-page table.compare th, .study-page table.compare td { border-bottom: var(--mc-hair) solid var(--mc-line); }
.study-page table.compare thead th { color: var(--mc-muted); }
.study-page table.compare tbody th { color: var(--mc-muted); }
.study-page table.compare td { color: var(--mc-ink); }
.study-page .plans-switch-track { background: var(--mc-line); }
.study-page .plans-switch-knob { background: var(--mc-accent); }
.study-page .plans-switch[aria-checked="true"] .plans-switch-track { background: var(--mc-accent); }
.study-page .plans-switch[aria-checked="true"] .plans-switch-knob { background: var(--mc-ground); }
.study-page .plans-primary { background: var(--mc-accent) !important; color: #ffffff !important; }
:root[data-theme="dark"] .study-page .plans-primary { color: #0c0c0d !important; }

/* ------------------------------------------------------------------- notices
 * A tinted strip behind a one-line note. On a monochrome ground the note only needs the
 * hairline and the muted colour it already gets.
 */
.study-page #publicNotice,
.study-page .public-notice,
.study-page #studyStability,
.study-page .study-beta,
.study-page .billing-early,
.study-page .trial-head,
.study-page #trialBody {
  background: none !important;
  border-color: var(--mc-line) !important;
  color: var(--mc-muted) !important;
}
.study-page #publicNotice,
.study-page .public-notice {
  border-left: var(--mc-hair) solid var(--mc-line) !important;
  padding-left: var(--sp-2, 16px) !important;
}
.study-page .study-beta {
  border: var(--mc-hair) solid var(--mc-line) !important;
  color: var(--mc-muted) !important;
}
.study-page .billing-early { color: var(--mc-accent) !important; }

/* ------------------------------------------------------------------ history */
.study-page .history-head { color: var(--mc-muted); border-bottom: var(--mc-hair) solid var(--mc-line); }
.study-page button.history-row { border-bottom: var(--mc-hair) solid var(--mc-line) !important; }
.study-page button.history-row:hover:not(:disabled) { background: var(--mc-ink) !important; color: var(--mc-ground) !important; }
.study-page button.history-row:hover:not(:disabled) .hist-date,
.study-page button.history-row:hover:not(:disabled) .hist-score { color: var(--mc-ground) !important; }
.study-page button.history-row.active { background: none !important; box-shadow: inset 2px 0 0 var(--mc-accent); }
.study-page .hist-card {
  background: var(--mc-ground) !important;
  border: var(--mc-hair) solid var(--mc-line);
  color: var(--mc-ink);
}
.study-page .hist-s, .study-page .hist-c { color: var(--mc-ink); }
.study-page .hist-h, .study-page .hist-d { color: var(--mc-accent); }

/* The history column is 244px. Three columns of date, board and score do not fit, so the
   row becomes two lines: when and how it scored, then the board underneath. */
.study-page .history-head,
.study-page .history-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  row-gap: 7px !important;
  align-items: baseline !important;
}
.study-page .hist-board { grid-column: 1 / -1 !important; grid-row: 2 !important; }
.study-page .hist-date { grid-column: 1 !important; grid-row: 1 !important; }
.study-page .hist-score { grid-column: 2 !important; grid-row: 1 !important; }
.study-page .history-head span:nth-child(1) { grid-column: 1 !important; grid-row: 1 !important; }
.study-page .history-head span:nth-child(2) { display: none !important; }
.study-page .history-head span:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; }
.study-page .hist-line { min-height: 0; }

/* ------------------------------------------------------------------ shell
 * One screen, four fixed places, the way the reference solver app works:
 *
 *     conditions   (HU / 3way, FL, jokers)          across the top
 *     history  |  board            |  evaluation
 *              |  card picker      |  result
 *
 * A role never moves. The board is always in the same place, so the eye learns where to
 * look once and never has to search again.
 *
 * The markup is not rearranged. study.js reads a dozen elements by id and would break if
 * their parents changed, so the wrappers are made transparent with display:contents and
 * their children are placed directly on this grid. display:contents also removes the
 * wrappers' boxes, which is what flattens the old panel styling.
 */
.study-page .study-main {
  display: grid !important;
  grid-template-columns: 244px minmax(0, 1fr) 324px;
  gap: 16px 26px;
  align-content: start;
  align-items: start;
  max-width: 1560px !important;
  margin: 0 auto !important;
  padding: 22px 26px 44px !important;
}
/* The old sheets put a bottom margin on every section. On the grid that becomes a gap
   under each cell, on top of the row gap; the row gap alone should do the spacing. */
.study-page .study-main > *,
.study-page .session-sidebar,
.study-page .study-content,
.study-page .table-board-area,
.study-page #deckPanel,
.study-page .table-controls,
.study-page .intro {
  margin-bottom: 0 !important;
}
.study-page .study-head,
.study-page #builder,
.study-page .table-surface,
.study-page .table-workspace,
.study-page .study-layout {
  display: contents !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* The board area is a real box: it is the centre column, not another wrapper. Making it
   transparent as well collapsed the board itself. */
.study-page .table-board-area {
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

/* what this screen is, then the conditions */
.study-page .intro { grid-column: 1 / -1; grid-row: 1; }
.study-page #publicNotice { grid-column: 1 / -1; grid-row: 2; }
.study-page .table-controls { grid-column: 1 / -1; grid-row: 3; }

/* the three working columns
 * The board spans three rows. A grid shares its row heights across columns, so a tall
 * centre column otherwise pushes the answer column's first line below the fold: the right
 * column looked empty on load even though the empty state was rendering. Letting the board
 * span the rows divides its height between them and the answer starts at the top, where the
 * eye already is.
 */
.study-page .session-sidebar { grid-column: 1; grid-row: 4 / span 2; }
.study-page .table-board-area { grid-column: 2; grid-row: 4 / span 3; }
.study-page #deckPanel { grid-column: 2; grid-row: 7; }
.study-page #jobStatus { grid-column: 3; grid-row: 4; }

/* The evaluation was buried inside the session block, so the answer and the buttons that
   manage sessions shared one column. The wrappers are made transparent and the evaluation
   is lifted into the answer column; what to work on drops to the history column, which is
   the same role it plays there. */
.study-page .study-content,
.study-page #decisionPanel,
.study-page .study-workspace { display: contents !important; }

.study-page #studyResults { grid-column: 3; grid-row: 5; }
.study-page #sensitivityPanel { grid-column: 3; grid-row: 6; }
.study-page #decisionPanel > .study-workspace > aside { grid-column: 3; grid-row: 7; }

.study-page #sessionHeading { grid-column: 1; grid-row: 6; }
.study-page #decisions { grid-column: 1; grid-row: 7; }

/* the rest sits below the work, in the order it is needed */
.study-page #studyError { grid-column: 1 / -1; grid-row: 8; }
.study-page #trialOffer { grid-column: 1 / -1; grid-row: 9; }
.study-page #planSection { grid-column: 1 / -1; grid-row: 10; }
.study-page .study-onboarding { grid-column: 1 / -1; grid-row: 11; }
.study-page .grade-guide { grid-column: 1 / -1; grid-row: 12; }
.study-page .advanced-settings { grid-column: 1 / -1; grid-row: 13; }
.study-page #tableMessage { grid-column: 1 / -1; grid-row: 14; }
.study-page footer { grid-column: 1 / -1; grid-row: 15; }

/* The conditions row reads as a caption strip: one line, hairline under it. */
.study-page .table-controls {
  min-height: 0 !important;
  padding: 0 0 14px !important;
  gap: var(--board-controls-gap, 20px) !important;
  border-bottom: var(--mc-hair) solid var(--mc-line);
}
.study-page .intro { padding-bottom: 2px; }
.study-page .intro h1 { margin: 0 !important; }
.study-page #publicNotice { margin: 0 !important; }

/* ------------------------------------------------------------- board, as line */
/* The card faces keep their suit colours: black spade, red heart, blue diamond, green
   club, purple joker. They are the one place on a monochrome surface where colour carries
   meaning rather than decoration, and the outline-only treatment made them harder to read
   at a glance than the filled ones were. */
.study-page .playing-card {
  background: var(--card-bg) !important;
  color: #fdfdfd !important;
  border: var(--mc-hair) solid rgba(255, 255, 255, .16) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.study-page .playing-card--s { --card-bg: #505055; }
.study-page .playing-card--h { --card-bg: #bd160e; }
.study-page .playing-card--d { --card-bg: #283acb; }
.study-page .playing-card--c { --card-bg: #08ac26; }
.study-page .playing-card--joker { --card-bg: #6334a4; }
.study-page .playing-card.locked { opacity: .35; }
.study-page .slot,
.study-page .table-board-row,
.study-page .hand-zone,
.study-page .discard-zone,
.study-page .table-joker-cell {
  background: none !important;
  border-color: var(--mc-line) !important;
  box-shadow: none !important;
}
.study-page .table-deck-row { border: 0 !important; }
.study-page .position-map { border-radius: 999px !important; }

/* Nothing follows the page as it scrolls. The card picker and the history column were both
   sticky, so they trailed the viewport and covered the work underneath. A tool that moves
   while you are reading it is a tool you have to chase. */
.study-page .table-deck-panel,
.study-page #deckPanel,
.study-page .session-sidebar {
  position: static !important;
  margin-top: 0 !important;
  top: auto !important;
}

/* The history board keeps the table's own shape: three rows, not one run of cards. A flat
   sequence loses the only thing the thumbnail is for, which is which street each card
   went to. */
.study-page .hist-board {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}
.study-page .hist-line {
  display: flex !important;
  flex-direction: row !important;
  gap: 2px !important;
  min-height: 15px !important;
}
.study-page .hist-card {
  background: var(--hist-bg, #505055) !important;
  color: #fdfdfd !important;
  border: 0 !important;
  /* One card size for every rank. Left to their content the chips take the width of
     whatever glyph is in them, so a row of them reads as ragged. */
  flex: 0 0 auto !important;
  width: 17px !important;
  height: 23px !important;
  min-width: 17px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border-radius: 3px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-sizing: border-box;
}
.study-page .hist-s { --hist-bg: #505055; }
.study-page .hist-h { --hist-bg: #bd160e; }
.study-page .hist-d { --hist-bg: #283acb; }
.study-page .hist-c { --hist-bg: #08ac26; }
.study-page .hist-j { --hist-bg: #6334a4; }

/* ------------------------------------------------------------------ loading
 * The analysis runs for up to eighty seconds. A silent screen for that long reads as a
 * freeze, so the progress is placed where the answer will appear.
 */
.study-page #jobStatus {
  border-top: var(--mc-hair) solid var(--mc-line) !important;
  padding: var(--sp-2, 16px) 0 0 !important;
  color: var(--mc-ink) !important;
  font-size: 14px;
}
.study-page #jobStatus strong { color: var(--mc-accent) !important; }

/* The wait panel: what is running, how long it has been, and the note that leaving is
   allowed. The clock is the largest thing in the panel because it is the answer to
   "is this still moving?". */
.study-page .job-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.study-page .job-head strong { font-size: 15px; }
.study-page .job-count {
  font-size: 12.5px;
  color: var(--mc-muted);
  font-variant-numeric: tabular-nums;
}
.study-page .job-clock {
  display: block;
  margin-top: 10px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--mc-ink);
}
.study-page .job-note {
  display: block;
  margin-top: 10px;
  color: var(--mc-muted);
  line-height: 1.85;
}
.study-page #jobStatus progress {
  display: block;
  width: 100%;
  height: 3px;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--mc-line);
  border-radius: 999px;
}
.study-page #jobStatus progress::-webkit-progress-bar {
  background: var(--mc-line);
  border-radius: 999px;
}
.study-page #jobStatus progress::-webkit-progress-value {
  background: var(--mc-accent);
  border-radius: 999px;
}
.study-page #jobStatus progress::-moz-progress-bar {
  background: var(--mc-accent);
  border-radius: 999px;
}

/* --------------------------------------------------------------- evaluation
 * The answer. In a monochrome system the grade is carried by the word and by the weight of
 * the rule around it, not by five different colours: the accent is spent on the top grade
 * only, and everything below it is ink on ground.
 */
.study-page #studyResults { border-top: var(--mc-hair) solid var(--mc-line); padding-top: 16px; }
.study-page #studyResults .panel-heading { border: 0 !important; padding: 0 0 10px !important; }

.study-page .move-assessment {
  background: none !important;
  border: var(--mc-hair) solid var(--mc-line) !important;
  border-radius: 6px !important;
  padding: 12px 14px !important;
  color: var(--mc-ink) !important;
  font-weight: 700;
}
/* renderAssessment already publishes the grade as data-grade on this element, so the top
   grade is marked by attribute. The word itself carries the meaning, which is what a
   monochrome surface needs; the accent only says which one is the best move. */
.study-page .move-assessment[data-grade="best"] {
  border-color: var(--mc-accent) !important;
  color: var(--mc-accent) !important;
}
.study-page .move-assessment[data-grade="blunder"] {
  border-width: 2px !important;
  border-color: var(--mc-ink) !important;
}

.study-page .study-metrics {
  display: grid !important;
  gap: 0 !important;
  border-top: var(--mc-hair) solid var(--mc-line);
}
.study-page .study-metrics > * {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: var(--mc-hair) solid var(--mc-line) !important;
  background: none !important;
  border-radius: 0 !important;
  font-size: 13.5px;
  color: var(--mc-ink) !important;
}
.study-page .study-ranking {
  border-top: var(--mc-hair) solid var(--mc-line);
  padding-top: 10px;
  font-size: 13px;
}
.study-page #studyStability,
.study-page #sourceNotice { color: var(--mc-muted) !important; }

/* ------------------------------------------------------------- empty state
 * What the answer column is for, shown until there is an answer. Hidden by :has() the
 * moment a result or a running analysis exists, so it never competes with what it
 * describes. Lives in this file, not only on the server: a rule added on the host alone is
 * lost the next time this file is uploaded.
 */
.study-page .right-empty {
  grid-column: 3;
  grid-row: 5;
  border-top: var(--mc-hair) solid var(--mc-line);
  padding-top: 16px;
  color: var(--mc-muted);
  font-size: 13.5px;
  line-height: 1.9;
}
.study-page .right-empty p { margin: 0; }
.study-page .right-empty-en { margin-top: 7px !important; opacity: .7; font-size: 12.5px; }
.study-page .study-main:has(#studyResults:not(.hidden)) .right-empty { display: none; }
.study-page .study-main:has(#jobStatus:not(.hidden)) .right-empty { display: none; }

/* ------------------------------------------------------------ drawn edges
 * Every box on the work surface is drawn with the same pen as the ground: 1px, one step
 * above the grid colour. At full ink a 1px outline is a white bar sitting next to a 7%
 * ground line, and the two no longer look like they come from the same drawing. */
.study-page .opponent-preview,
.study-page .hand-zone,
.study-page .table-board-heading button,
.study-page .stack-controls,
.study-page button.history-row,
.study-page .icon-button {
  border: var(--mc-hair) solid var(--mc-edge) !important;
}
.study-page .opponent-preview.active { border-color: var(--mc-accent) !important; }
.study-page .hand-zone.drag-over { border-color: var(--mc-accent) !important; }

/* The header sits above the work surface. Without this the ground layer's
   "body > * { z-index: 1 }" makes the header and main equal, so main — which comes later in
   the document — paints and hit-tests over every open dropdown. That is why the account menu
   overlapped the FL switch and why its items did not respond to a click. */
body.study-page > .study-header { z-index: 40; }
body.study-page > .study-nav { z-index: 30; }

/* The header round buttons are circles. The legacy sheet asks for 8px on every button, so
   this has to outrank a blanket rule rather than rely on the component's own radius. */
.study-page .study-header .icon-button { border-radius: 50% !important; }

/* Nav labels are not links in the underlined sense on this surface; the work surface is the
   reference and it draws them plain. */
.study-page .study-nav a { text-decoration: none; }

/* The account and help menus hang off a 38px button, so they should be a compact list and
   not a panel. Kept narrow so the list ends before it reaches the board controls. */
.study-page .menu-panel { padding: 6px !important; border-radius: 12px !important; }
.study-page .menu-panel a,
.study-page .menu-panel button {
  padding: 7px 9px !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  gap: 9px !important;
  min-height: 0 !important;
  border-radius: 8px !important;
}
.study-page .menu-panel .menu-icon { width: 15px !important; height: 15px !important; flex: 0 0 auto; }
.study-page .menu-panel .menu-chevron { font-size: 11px !important; }

/* ------------------------------------------------------------- stack layer
 * The stacks are a property of the seats, so the control sits with the other seat control
 * (FL) and the editor opens in front of the board rather than pushing it down the page. */
.study-page .fantasy-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.study-page .stack-toggle {
  border: var(--mc-hair) solid var(--mc-edge) !important;
  background: none !important;
  color: var(--mc-ink) !important;
  border-radius: 999px !important;
  padding: 5px 14px !important;
  font-size: 12.5px !important;
  min-height: 0 !important;
  cursor: pointer;
}
.study-page .stack-toggle:hover,
.study-page .stack-toggle[aria-expanded="true"] {
  border-color: var(--mc-accent) !important;
  color: var(--mc-accent) !important;
  background: none !important;
}
.study-page .stack-layer {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .62);
}
.study-page .stack-layer[hidden] { display: none !important; }
.study-page .stack-sheet {
  width: min(560px, 100%);
  max-height: 100%; overflow: auto;
  background: var(--mc-ground);
  border: var(--mc-hair) solid var(--mc-edge);
  border-radius: 16px;
  padding: 20px;
}
.study-page .stack-title { margin: 0 0 14px; font-size: 15px; }
.study-page .stack-sheet .stack-controls { display: flex; flex-direction: column; gap: 12px; }
.study-page .stack-close { margin-top: 16px; width: 100%; }

/* The seat is a circle around a position; once stacks exist it is a circle around a position
   and its stack, so it keeps its roundness and takes the second line inside it. */
.study-page .position-chip {
  display: inline-flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  line-height: 1.05;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1 / 1;
  padding: 5px 9px !important;
}
.study-page .position-chip .chip-stack { display: block; font-size: 10px; font-weight: 700; opacity: .85; }

/* ------------------------------------------------------------- fantasy land ground
 * FL is not a setting, it is a different game: a retained hand, a different target, a
 * different scoring rule. A 52px switch is too small a mark for a change that large, so
 * the ground carries it as well — the black goes purple and the drawing stays white.
 * Dark only: the light ground is white paper, and this is stated about the black one. */
:root[data-theme="dark"] body.study-page:has(#fantasyToggle:checked) {
  --mc-ground: #2a1342;
  --mc-grid: #ffffff2e;
  background: #2a1342 !important;
}
/* :root and html are the same element, so the rule has to chain the two conditions on one
   compound selector. Written as ":root[data-theme=dark] html" it would never match. */
:root[data-theme="dark"]:has(#fantasyToggle:checked) { background: #2a1342; }

/* ------------------------------------------------------------ opponent placement
 * The opponent panels belong with the table, not parked against the right edge of the
 * column: they describe the two seats that are drawn on the oval, so they sit over the
 * board and start from its left side. */
.study-page .opponent-previews {
  justify-content: flex-start !important;
  padding-left: 36px;
  box-sizing: border-box;
}