/* 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;
}
/* Hover is an outline and an ink change, not a fill.
   Filling with ink meant every control on the dark ground became a white slab under the
   cursor, which is hard to read and, on the billing switch, painted the button's own box
   around the 30px track as a white rectangle. This rule is what kept beating the local
   fixes: it carries three pseudo-classes and an !important, so a component could not
   out-specify it from its own stylesheet. */
.study-page button:hover:not(:disabled),
.study-page .button:hover:not(:disabled) {
  background: transparent !important;
  color: var(--mc-ink) !important;
  border-color: var(--mc-accent) !important;
}
/* The filled actions keep their fill and only brighten. */
.study-page button.primary:hover:not(:disabled),
.study-page .button.primary:hover:not(:disabled),
.study-page .plans-primary:hover:not(:disabled) {
  background: var(--mc-accent) !important;
  border-color: var(--mc-accent) !important;
  color: #ffffff !important;
  filter: brightness(1.1);
}
:root[data-theme="dark"] .study-page button.primary:hover:not(:disabled),
:root[data-theme="dark"] .study-page .plans-primary:hover:not(:disabled) { color: #0c0c0d !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"],
/* The account card is the first place on this surface with an email or password field, and
   without them here they fall through to style.css and paint as dark slabs on white. */
.study-page input[type="email"],
.study-page input[type="password"],
.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.
 * One row lower than it used to be, because row 8 now belongs to the conditions aside while the
 * completion status is on screen. That also stops the error line sharing row 8 with the
 * sensitivity panel, which it did before. */
.study-page #studyError { grid-column: 1 / -1; grid-row: 9; }
.study-page #trialOffer { grid-column: 1 / -1; grid-row: 10; }
.study-page #planSection { grid-column: 1 / -1; grid-row: 11; }
.study-page .study-onboarding { grid-column: 1 / -1; grid-row: 12; }
.study-page .grade-guide { grid-column: 1 / -1; grid-row: 13; }
.study-page .advanced-settings { grid-column: 1 / -1; grid-row: 14; }
.study-page #tableMessage { grid-column: 1 / -1; grid-row: 15; }
.study-page footer { grid-column: 1 / -1; grid-row: 16; }

/* 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. */
/* Square box and a full radius: the generic button rule adds 20px of horizontal padding,
   which made a 34px circle into a 74x34 ellipse. */
.study-page .study-header .icon-button {
  width: 36px !important;
  height: 36px !important;
  /* The generic button rule pins min-height to 44px, which stretched the circle into a
     36x44 ellipse whatever the height said. */
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  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; }

/* ------------------------------------------------------------- header brand
 * The brand colour is a token, not a literal. study-public.css and header-menus.css both
 * hard-code near-white, so on the light ground the name vanished into the paper. Taking it
 * from the ink token serves both themes and matches the rest of the chrome. */
.study-page .study-header .brand,
.study-page .study-header .brand span,
.study-page .study-header .brand em { color: var(--mc-ink) !important; }

/* The BETA badge is drawn here and only here, so it has one size and shape on every page.
 * It used to be sized by study-public.css, which the plans page does not load, so the two
 * headers disagreed. */
.study-page .study-beta {
  font-size: 10px !important;
  line-height: 1 !important;
  padding: 4px 7px !important;
  border-radius: 5px !important;
  letter-spacing: .06em !important;
  border: var(--mc-hair) solid var(--mc-line) !important;
  color: var(--mc-muted) !important;
  background: none !important;
}

/* ----------------------------------------------------- fantasy land ground (light)
 * FL is a different game rather than a setting, so the ground carries it in both themes.
 * Dark goes to a deep purple and keeps the white drawing; light goes to a pale purple and
 * keeps the dark drawing, so the ink stays readable either way. */
:root:not([data-theme="dark"]) body.study-page:has(#fantasyToggle:checked) {
  --mc-ground: #ece2fa;
  --mc-grid: #3a1a5e29;
  background: #ece2fa !important;
}
:root:not([data-theme="dark"]):has(#fantasyToggle:checked) { --mc-ground:#ece2fa; background: #ece2fa; }

/* ------------------------------------------------------------- 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) { --mc-ground:#2a1342; 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;
}

/* ------------------------------------------------------------ billing switch row
 * The study plan cards carry their own switch. The yearly total rides in the same row so that
 * changing the period redraws a number instead of inserting a line and pushing the price,
 * the limits and the button down the card. */
.study-page .bill-switch {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.study-page .bill-switch .bill-total,
.study-page .bill-total { color: var(--mc-muted); font-size: 12.5px; white-space: nowrap; }
/* --------------------------------------------------- header: one size everywhere
 * The plans page loads a shorter stack of sheets than the work surface, so it inherited
 * style.css's 29px brand and an unstyled 16px menu with no padding, while the work surface
 * used study-public.css's 27px / 13px / 28px. Measured, not guessed. */
.study-page .study-header .brand { font-size: 27px !important; }
.study-page .study-nav { gap: 28px !important; }
.study-page .study-nav a { font-size: 13px !important; padding: 16px 0 !important; }

/* --------------------------------------------------- deck beside the board
 * The card picker and the hand are what the eye moves to while reading the board, so they
 * belong in the column next to it. Underneath, a full board pushed them a screen below the
 * fold: the deck sat at y=1089 while the board ended at y=1073. The results panels move down
 * into the space the deck used to occupy. */
.study-page #deckPanel {
  grid-column: 3 !important;
  grid-row: 4 / span 3 !important;
}
/* Column 2 only. Spanning 2..3 put the results straight on top of the conditions aside, which
   sits at column 3 row 7 — two panels drawn in the same cell, text over text. */
.study-page #studyResults { grid-column: 2 !important; grid-row: 7 !important; }
.study-page #sensitivityPanel { grid-column: 2 !important; grid-row: 8 !important; }

/* --------------------------------------------------- the status and the deck cannot share row 4
 * Moving the deck into column 3 left the completion status on the cell it already had - both
 * at column 3 row 4 - so once an analysis finished the "解析完了" panel was painted straight
 * over the card picker and the "タップで手札へ" line. Measured before the change: identical
 * origin, 540x110 of overlap, at every desktop width from 1101px up.
 *
 * Only one of them can hold the top of the column. While the status is on screen it takes row
 * 4 and the deck drops one row; the moment the status is gone the deck is back at the top, so
 * no empty row is left behind on load. Wrapped in :has() rather than applied always for exactly
 * that reason. The aside moves with it, because the deck now reaches row 7.
 *
 * Desktop only: at 1100px and below every one of these is set back to grid-row:auto, and on a
 * phone .study-main is display:block, so neither is affected. */
.study-page .study-main:has(#jobStatus:not(.hidden)) #deckPanel {
  grid-row: 5 / span 3 !important;
}
.study-page .study-main:has(#jobStatus:not(.hidden)) #decisionPanel > .study-workspace > aside {
  grid-row: 8 !important;
}
/* The empty-state paragraph is gone. */
.study-page .right-empty { display: none !important; }
/* --------------------------------------------------- card size, not card position
 * The picker is a row of fixed-size cards in a flex container. A flex item shrinks by default,
 * so a 13-card suit in a 298px column did not wrap — it was squeezed: measured, the column
 * left (298 - 12 gaps x 5px) / 13 = ~18px per card, against a declared 32px. That is the
 * cramped look. Two changes: the cards refuse to shrink, and the column is wide enough for a
 * 14-tile row (13 ranks + joker) at full size, 14 x 32 + 13 x 5 = 513px.
 * The board column loses the width it was not using: its widest row is 5 slots, about 525px. */
.study-page .card-picker .playing-card,
.study-page .hand-zone .playing-card,
.study-page .table-hand .playing-card {
  flex: 0 0 auto !important;
  width: 32px !important;
  /* A floor as well as a width: the joker has no text, so with width:100% and an SVG child
     its used width could still collapse below the declared one. */
  min-width: 32px !important;
  height: 42px !important;
}
.study-page .card-picker { gap: 5px !important; max-width: 100% !important; }
.study-page .study-main {
  grid-template-columns: 232px minmax(0, 1fr) 540px;
  gap: 14px 20px;
}
/* ==================================================================== mobile
 * This sheet is a fixed three-column grid with no breakpoints of its own: 232px of sidebar,
 * a flexible board column and 540px of deck. On a phone those widths do not shrink, they
 * overflow the viewport and squeeze every cell until the text wraps one character per line.
 * Everything below lives inside media queries, so the desktop layout is untouched.
 */

/* ---- narrow desktop / tablet: two columns, board full width ----
 * 1200, not 1100. The three-column grid needs 232 + 540 = 772px of fixed columns plus 2 x 20px
 * of gap and 52px of padding - 864px before the board column gets anything. Below about 1184px
 * that flexible column fell under the board's own minimum and the board, whose overflow is
 * visible, drew straight over the card picker: measured at 1101px, cell 222px against 306px of
 * content. 1200 leaves the middle column ~336px at the switch, which clears it. */
@media (max-width: 1200px) {
  .study-page .study-main {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px 16px;
    padding: 18px 16px 36px !important;
  }
  .study-page .study-main > * { min-width: 0; }
  .study-page .session-sidebar { grid-column: 1 !important; grid-row: auto !important; }
  .study-page .table-board-area { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .study-page #deckPanel { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .study-page #jobStatus,
  .study-page #sessionHeading,
  .study-page #decisions,
  .study-page #studyResults,
  .study-page #sensitivityPanel { grid-column: 1 / -1 !important; grid-row: auto !important; }
}

/* ---- phone: one column, nothing fixed ---- */
@media (max-width: 760px) {
  .study-page { overflow-x: hidden; }
  .study-page .study-main {
    display: block !important;
    max-width: 100% !important;
    padding: 12px 12px 32px !important;
  }
  .study-page .study-main > * { margin: 0 0 16px !important; }

  /* The header stacks instead of pushing the brand into a three-line column. */
  .study-page .study-header {
    flex-wrap: wrap !important;
    gap: 8px 10px !important;
    padding: 10px 12px !important;
    align-items: center !important;
  }
  .study-page .study-header .brand { font-size: 19px !important; gap: 8px !important; }
  .study-page .study-header .brand span { white-space: nowrap; }
  .study-page .study-header .brand small { font-size: 9px !important; }
  .study-page .study-header .brand-mark { width: 26px !important; height: 36px !important; }
  .study-page .study-header .header-actions { margin-left: auto !important; flex-wrap: wrap; }
  .study-page .study-upgrade { font-size: 12px !important; padding: 7px 12px !important; min-height: 0 !important; }

  .study-page .study-nav {
    gap: 14px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px !important;
  }
  .study-page .study-nav a { white-space: nowrap; font-size: 12px !important; padding: 10px 0 !important; }

  /* The board is the one thing that must not be squeezed. */
  .study-page .table-workspace { display: block !important; }
  .study-page .table-board-area { width: 100% !important; }

  /* Cards keep their shape and wrap; 26px fits eleven to a row on a 390px screen. */
  .study-page .card-picker .playing-card,
  .study-page .hand-zone .playing-card,
  .study-page .table-hand .playing-card {
    width: 26px !important;
    height: 34px !important;
    font-size: 15px !important;
  }
  .study-page .card-picker { gap: 4px !important; }
  .study-page .table-mode { min-width: 0 !important; width: 100%; }
  .study-page .opponent-previews { padding-left: 0 !important; min-height: 0 !important; }

  /* Anything that carried a desktop min-width would reintroduce the overflow. */
  .study-page .billing-early,
  .study-page .trial-head,
  .study-page #trialBody,
  .study-page .stack-sheet,
  .study-page .menu-panel { max-width: calc(100vw - 24px) !important; }
  .study-page .stack-sheet { width: calc(100vw - 24px) !important; }
  .study-page .cmp { min-width: 0 !important; }
  .study-page .cmp-cell, .study-page .cmp-head, .study-page .cmp-label { padding: 10px 8px !important; }
  .study-page .hist-board { overflow-x: auto; }
}
/* ---- phone fixes ---- */
@media (max-width: 760px) {
  /* The comparison table is five columns; squeezing it into 390px shredded every cell.
     It keeps a floor and scrolls sideways inside its own block instead. */
  .study-page .plans-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .study-page .cmp { min-width: 680px !important; }
  .study-page .cmp-head .plan-name { font-size: 19px !important; white-space: nowrap; }
  .study-page .cmp-cell, .study-page .cmp-label { font-size: 12px !important; }
  .study-page .plan-upgrade { white-space: nowrap !important; font-size: 12px !important; padding: 0 8px !important; }

  /* Actions sit in a row on a phone; stacked they pushed the result off the screen. */
  .study-page .toolbar { flex-direction: row !important; flex-wrap: wrap !important; align-items: center; }
  .study-page .toolbar > button { width: auto !important; flex: 0 1 auto !important; }

  .study-page .card-picker .playing-card,
  .study-page .hand-zone .playing-card,
  .study-page .table-hand .playing-card { min-width: 26px !important; }
}
/* While a position is committed, the deck of undealt cards goes away but the hand does not:
   the hand is what the visitor places. Hiding the whole panel left the cards they had just
   picked with nowhere to be seen, and no way to put them on the board. */
.study-page #deckPanel.picker-hidden #cardPicker { display: none !important; }
.study-page #deckPanel.picker-hidden .table-deck-panel > h2,
.study-page #deckPanel.picker-hidden > h2 { display: none !important; }
/* ------------------------------------------------------------ metric cells
 * metrics() builds each cell as <small>label</small><strong>value</strong>. The label was
 * rendering inline, so a cell's value ended up hard against the next cell's label and the two
 * read as one string: "−3.21推定首位との差". Each cell is a column again, so the label sits
 * over its own value and nothing can butt up against its neighbour. */
.study-page #studyMetrics .metric {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px;
  padding: 8px 0;
  min-width: 0;
}
.study-page #studyMetrics .metric small {
  display: block !important;
  margin: 0 !important;
  line-height: 1.3;
}
.study-page #studyMetrics .metric strong { display: block !important; line-height: 1.15; }
.study-page #studyMetrics { gap: 18px 22px !important; }
/* The brand and the menu sat hard against the window edge. Both get the same left inset, so
   they line up with each other and with the content below. Scoped to desktop widths so the
   phone rules that set their own padding are not overridden. */
@media (min-width: 761px) {
  .study-page .study-header { padding-left: 34px !important; }
  .study-page .study-nav { padding-left: 34px !important; }
  /* The switch was left in the flow, where its own auto margin and the upgrade button's
     split the free space between them. That parked it in the middle of the leftover gap
     rather than the middle of the bar - measured 56px right of centre at 1440px. Pinning it
     to the bar's centre takes it out of the flow, so the upgrade button's auto margin simply
     takes the whole gap and the right-hand group does not move.
     Desktop only: the phone header wraps into two rows, and this would drop the switch on
     top of the brand there. */
  .study-page .mc-theme-toggle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 0 !important;
  }
}
/* --------------------------------------------------------- light-mode contrast
 * Two of the older sheets pin dark-mode values and never revisit them: study-public.css sets
 * --accent:#f0cf6a and --muted:#b3b3b8 on .study-page, ui-tokens.css sets --accent on :root,
 * and several rules hard-code near-white (#fdfdfd). On white paper the gold turns pale, the
 * muted ramp washes out, and .white disappears into the ground. The light theme re-takes them
 * here, after the sheets that set them. */
:root:not([data-theme="dark"]) {
  --mc-accent: #8a6a1f;
  --mc-muted: #5f5f63;
}
:root:not([data-theme="dark"]) .study-page .white { color: var(--mc-ink) !important; }

/* The stack sheet's panel was a hard #18181b box, which stayed black inside a white modal. */
:root:not([data-theme="dark"]) .study-page .stack-controls {
  background: #f4f4f5 !important;
  color: var(--mc-ink) !important;
  border-color: var(--mc-line) !important;
}
:root:not([data-theme="dark"]) .study-page .stack-controls input,
:root:not([data-theme="dark"]) .study-page .stack-controls button,
:root:not([data-theme="dark"]) .study-page .stack-controls select,
:root:not([data-theme="dark"]) .study-page .stack-controls option {
  background: #ffffff !important;
  color: var(--mc-ink) !important;
  border-color: var(--mc-line) !important;
}

/* The free-trial heading is pinned to #f0cf6a by study-public.css. That is the dark-theme
   gold, and on white paper it reads as a wash rather than as a word. The clock beside it
   already takes --accent, so the heading is put on the same light-mode gold. */
:root:not([data-theme="dark"]) .study-page .trial-head strong { color: var(--mc-accent) !important; }

/* The dropdowns were drawn on a fixed dark plate (#1c1c1e, border #34343a) by
   header-menus.css, but `.study-page button{color:var(--mc-ink)!important}` is declared later
   and wins the colour, so in light mode the help and account menus opened as a black box of
   near-black text. The panels take the page ground and ink instead. The plans page re-declares
   the ground tokens as black on its own body, so it keeps dark menus either way; it is
   excluded explicitly so that stays a decision instead of an accident. */
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel {
  background: var(--mc-ground) !important;
  border-color: var(--mc-edge) !important;
  box-shadow: 0 16px 36px #11111126 !important;
}
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel a,
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel button {
  color: var(--mc-ink) !important;
}
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel a:hover,
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel button:hover {
  background: #1111110f !important;
}
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel .menu-icon,
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel .menu-chevron {
  color: var(--mc-muted) !important;
}
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel .menu-sep {
  background: var(--mc-line) !important;
}
:root:not([data-theme="dark"]) .study-page:not(.plans-page) .menu-panel button[aria-checked="true"] {
  color: var(--mc-accent) !important;
}
/* --------------------------------------------------------- picker rows on a phone
 * Each suit is one row: an optional joker cell, then the thirteen ranks. The row could not
 * wrap, so on a phone the fourteen tiles overflowed the panel and the last card was clipped;
 * and because the joker cell was allowed to collapse, the joker was drawn on top of the ace
 * beside it. The cell now always holds one card's worth of width — which also lines the four
 * rows up with each other — and the rows wrap instead of overflowing. */
/* The row is a grid of fourteen equal columns (`.table-deck-row{display:grid;
   grid-template-columns:repeat(14,minmax(0,1fr))}`). On a phone each column is about 22px,
   while the cards insist on 26px: they bled out of their cells, which is what put the joker
   on top of the ace beside it and cut the last card off at the panel edge. Seven columns per
   row make each cell about 46px — the cards get bigger, not smaller — and a suit wraps onto
   two rows instead of overflowing. */
.study-page .card-picker .table-deck-row { display: grid !important; }
.study-page .card-picker .table-joker-cell {
  flex: 0 0 32px !important;
  width: 32px !important;
  min-width: 32px !important;
  display: flex;
  align-items: stretch;
}
.study-page .card-picker .table-joker-cell .playing-card { width: 100% !important; min-width: 0 !important; }
@media (max-width: 760px) {
  .study-page .card-picker .table-joker-cell {
    flex: 0 0 26px !important;
    width: 26px !important;
    min-width: 26px !important;
  }
}
@media (max-width: 760px) {
  .study-page .card-picker .table-deck-row {
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 3px !important;
  }
  /* The card fills its cell instead of demanding a fixed width, so nothing bleeds. */
  .study-page .card-picker .playing-card {
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 32 / 45;
  }
  .study-page .card-picker .table-joker-cell {
    width: auto !important;
    min-width: 0 !important;
    flex: none !important;
  }
}
@media (max-width: 760px) {
  /* One row per suit, exactly as on the desktop: thirteen ranks with the joker cell in the
     first column. The seven-column change was wrong — it doubled the rows. The row count must
     stay at four, so the row keeps its fourteen columns and the CARDS are what give way: each
     fills its cell instead of claiming a fixed width. That fixed width was the whole fault —
     it pushed the joker onto the ace beside it and cut the last card off at the panel edge. */
  .study-page .card-picker .table-deck-row {
    grid-template-columns: repeat(14, minmax(0, 1fr)) !important;
    gap: 2px !important;
    margin-bottom: 5px !important;
  }
  .study-page .card-picker .playing-card,
  .study-page .card-picker .table-joker-cell {
    width: 100% !important;
    min-width: 0 !important;
  }
  .study-page .card-picker .playing-card {
    height: auto !important;
    aspect-ratio: 32 / 45;
    font-size: 13px !important;
  }
  .study-page .card-picker .table-joker-cell { display: block !important; }
}
/* ------------------------------------------------------------ account layer
 * `.account-dialog` had no rule in any sheet, so the card rendered in the document flow at the
 * end of the body — which is why it appeared under the footer. It is an overlay: it covers the
 * page, centres the card, and closes on a click outside it (the script already does that). */
.study-page .account-dialog {
  position: fixed !important;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, .62);
}
.study-page .account-dialog[hidden] { display: none !important; }
.study-page .account-card {
  width: min(420px, 100%);
  max-height: 100%;
  overflow: auto;
  background: var(--mc-ground);
  color: var(--mc-ink);
  border: var(--mc-hair) solid var(--mc-edge);
  border-radius: 16px;
  padding: 22px;
}
.study-page .account-card h2 { margin: 0 0 16px; font-size: 15px; }
.study-page .account-identity {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin-bottom: 18px;
}
.study-page .account-avatar {
  width: 76px !important; height: 76px !important;
  min-width: 76px !important; min-height: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: var(--mc-hair) solid var(--mc-edge) !important;
  background: none !important;
  background-size: cover !important;
  background-position: center !important;
  color: var(--mc-muted) !important;
  font-size: 22px !important;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.study-page .account-avatar:hover { border-color: var(--mc-accent) !important; background-color: transparent !important; }
.study-page .account-name { font-size: 16px; font-weight: 700; }
.study-page .account-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 11px 0;
  border-bottom: var(--mc-hair) solid var(--mc-line);
}
.study-page .account-row > span { color: var(--mc-muted); font-size: 13px; }
.study-page .account-row > strong { font-size: 14px; text-align: right; word-break: break-all; }
/* The plan is the one line worth display type. Upright on the work surface, slanted here. */
.study-page .account-plan {
  font-family: Anton, Inter, system-ui, sans-serif !important;
  font-style: italic;
  transform: skewX(-7deg);
  font-size: 22px !important;
  letter-spacing: .02em;
  color: var(--mc-ink) !important;
}
.study-page .account-actions { display: flex; gap: 10px; margin-top: 18px; }
.study-page .account-actions > button { flex: 1 1 0; }
/* ------------------------------------------------------ solver: the rules layer
 * The rules, the ratings guide and the confidence notes were a column of text under the board
 * that had to be scrolled past on every visit, and the record actions sitting in the middle of
 * it read as part of the prose. The text now opens full screen from the ? menu, and of the
 * actions only the record export stays: saving the record is part of solving, reading about it
 * is not. The four controls below are hidden rather than removed because the scripts bind them
 * by id and renderSession writes their disabled state on every session change. */
.study-page #analyzeSession,
.study-page #exportSession,
.study-page #replayReceipt,
.study-page #replayResult { display: none !important; }

.study-page .rules-layer {
  position: fixed !important;
  inset: 0;
  z-index: 95;
  display: block;
  overflow: auto;
  background: var(--mc-ground);
  color: var(--mc-ink);
  -webkit-overflow-scrolling: touch;
}
.study-page .rules-layer[hidden] { display: none !important; }
.study-page .rules-sheet { width: min(720px, 100%); margin: 0 auto; padding: 0 22px 72px; }
.study-page .rules-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 0 14px;
  background: var(--mc-ground);
  border-bottom: var(--mc-hair) solid var(--mc-line);
}
.study-page .rules-head h2 { margin: 0; font-size: 17px; }
.study-page .rules-close { margin-left: auto; }
.study-page .rules-body > section {
  padding: 22px 0;
  border-bottom: var(--mc-hair) solid var(--mc-line);
}
.study-page .rules-body h3 {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--mc-muted) !important;
}
.study-page .rules-body p { margin: 0 0 12px; font-size: 15px; line-height: 1.9; }
/* dads-ui.css hides every [data-i18n="precisionNote"] on this page, which was right while the
   note sat under the public notice saying the same thing. This is a different surface and
   nothing else on it states the sample count, so the note is shown here and only here. */
.study-page .rules-body p[data-i18n="precisionNote"] { display: block !important; }
.study-page .rules-body #gradeLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  margin-bottom: 14px;
}
.study-page .rules-body > p.muted { padding-top: 22px; font-size: 13px; }

/* --------------------------------------------------------------- account card
 * The card became a sign-in surface as well as a status panel: labelled fields, one filled
 * action, and Google as an outline button with its mark, so the gold still marks the single
 * thing to press. */
.study-page .account-card [hidden] { display: none !important; }
.study-page .account-message {
  margin: 0 0 14px;
  padding: 9px 11px;
  border: var(--mc-hair) solid var(--mc-line);
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--mc-ink);
}
.study-page .account-message.ok { border-color: var(--mc-accent); }
.study-page .account-message.error { border-color: var(--mc-accent); color: var(--mc-accent); }
.study-page .account-email { color: var(--mc-muted); font-size: 12.5px; word-break: break-all; }
.study-page .account-form { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.study-page .account-field { display: flex; flex-direction: column; gap: 6px; }
.study-page .account-field > span { color: var(--mc-muted); font-size: 12.5px; }
.study-page .account-field input { width: 100%; }
.study-page .account-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 10px 0 0;
}
.study-page .account-google-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: var(--mc-hair) solid var(--mc-line);
  border-radius: 50%;
  font-family: Anton, Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1;
}
.study-page .account-links { margin: 12px 0 0; text-align: center; }
.study-page .account-links button { font-size: 13px; }
/* The consent sentence sits below the plan row: quiet, but it is the line that makes the
   terms part of the agreement, so it stays visible in both states of the card. */
.study-page .account-legal {
  margin: 16px 0 0;
  color: var(--mc-muted);
  font-size: 12px;
  line-height: 1.8;
}
.study-page .account-legal a { color: var(--mc-accent); }
/* The invite code is meant to be read aloud and typed, so it is set in the display face and
   given room, not tucked into the muted column with the plan name. */
.study-page .account-code {
  font-family: Anton, Inter, system-ui, sans-serif !important;
  font-size: 20px !important;
  letter-spacing: .14em !important;
  color: var(--mc-accent) !important;
}
.study-page #acctVerify { margin-top: 10px; }
.study-page #acctVerify > button { font-size: 13px; }

/* The stack quick-pick buttons fill the field the reader is in, so that field says so. */
.study-page .stack-fields input.stack-active {
  border-color: var(--mc-accent) !important;
  box-shadow: 0 0 0 1px var(--mc-accent);
}