/* chai-po Study -- presentation layer.
 *
 * Follows the Digital Agency Design System (デジタル庁デザインシステム β) for the decisions
 * that make an interface read as a product rather than as a landing page:
 *
 *   spacing   8 CSS px base scale: 8 / 16 / 24 / 32 / 48 / 64
 *   buttons   one filled primary per screen; other actions are outline (secondary) or an
 *             underlined text button (tertiary); 44 CSS px minimum target area
 *   shape     sections are separated by space and a hairline, not by raised boxes
 *   type      Noto Sans JP for interface text, 16 px / 1.7 body; the display face is kept
 *             for the brand mark and the offer countdown only
 *
 * This is an override layer on purpose. The stylesheets underneath are shared with screens
 * that have not been revisited yet, so this file states only the new rules and leaves the
 * old ones to be deleted once every screen has moved.
 *
 * Several rules need !important because an earlier rule carries ID specificity (for
 * example the button colour rule in study-public.css). Each one is marked with the rule it
 * is overriding so the pair can be removed together.
 */

body.study-page {
  /* Only what the UI editor does not manage lives here. Spacing, type sizes, button metrics
     and board geometry come from /ui-tokens.css, which is generated from ui-tokens.json.
     Re-declaring them here would win on specificity and make the editor look broken. */
  --rule: var(--line, #252d3b);
  --ink: var(--text, #f2f4f8);
  --ink-muted: var(--text-muted, #8d96a5);
  --accent: #f0cf6a;
  font-size: var(--fs-body, 16px);
  line-height: var(--lh-body, 1.7);
  background: var(--ground, #151b26);
  color: var(--text, #f2f4f8);
}
html { background: var(--ground, #151b26); }

/* The last raised surfaces in the page chrome. A plan card is a row of numbers under a
   heading, and a rule separates it from the next one; a filled box around it adds nothing. */
.study-page .billing,
.study-page .billing-plan {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.study-page .billing-plan {
  border-top: 1px solid var(--rule) !important;
  padding: var(--sp-2, 16px) 0 0 !important;
}
.study-page .billing-plan.current {
  border-top-color: var(--accent) !important;
}
.study-page .billing-early { color: var(--accent); }

/* ---------------------------------------------------------------- typography */
.study-page h1,
.study-page h2,
.study-page h3,
.study-page .intro h1,
.study-page .perf-title,
.study-page #perfTitle,
.study-page #trainerTitle {
  font-family: "Noto Sans JP", Inter, system-ui, sans-serif !important;
  transform: none !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  color: var(--ink);
}
.study-page h1, .study-page .intro h1, .study-page #trainerTitle, .study-page .perf-title {
  font-size: var(--fs-h1, 24px) !important;
  line-height: 1.5 !important;
  font-weight: 700 !important;
  margin: 0 0 var(--sp-1) !important;
}
.study-page h2 { font-size: var(--fs-h2, 18px); line-height: 1.5; font-weight: 700; }
.study-page h3 { font-size: var(--fs-body, 16px); line-height: 1.5; font-weight: 700; }

/* The page lead: one calm line under the heading, not a slogan. */
.study-page .intro p,
.study-page #trainerSubtitle,
.study-page .perf-lead {
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: var(--ink-muted) !important;
  max-width: 68ch;
}

/* The tracking-wide uppercase eyebrow is a landing-page device. The pages that used one
   no longer show it, and the style is neutralised in case one is reintroduced. */
.study-page .eyebrow {
  display: none !important;
}

/* Big figures stay legible without the display face. */
.study-page .perf-card b {
  font-family: "Noto Sans JP", Inter, system-ui, sans-serif !important;
  transform: none !important;
  font-size: 24px !important;
  line-height: 1.3 !important;
  color: var(--ink) !important;
}

/* ------------------------------------------------------------------ buttons
 * Hierarchy from the design system:
 *   primary   filled        the flow's own action; one per screen
 *   secondary outline       the other choices in that flow
 *   tertiary  text, underlined   cancel, or a low-stakes shortcut
 */
.study-page button,
.study-page .button {
  min-height: var(--btn-min-h, 44px);
  padding: 10px var(--btn-pad-x, 20px);
  border: 1px solid #55555c;
  border-radius: var(--btn-radius, 8px);
  background: transparent;
  color: var(--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, border-color .12s ease;
}
.study-page button:hover:not(:disabled),
.study-page .button:hover:not(:disabled) {
  background: #232327;
  border-color: #7a7a82;
}
.study-page button:disabled { opacity: .45; cursor: default; }

.study-page button.primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #121212 !important;
}
.study-page button.primary:hover:not(:disabled) {
  background: #ffec7c !important;
  border-color: #ffec7c !important;
}

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

/* Keyboard focus must stay visible once the default outlines are styled away. */
.study-page :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Only the flow keeps a filled button; the surrounding actions step down one level each. */
.study-page #newPosition { background: none !important; color: var(--ink) !important; }
.study-page #newPosition:hover:not(:disabled) { background: #232327 !important; }

.study-page #trialStart {
  background: none !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.study-page #trialStart:hover:not(:disabled) { background: #241f0c !important; }

.study-page #quickExample {
  min-height: 0 !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--accent) !important;
  font-size: 14px !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.study-page #analyzeSession,
.study-page #dailyReady {
  background: none !important;
  border-color: #55555c !important;
  color: var(--ink) !important;
}

/* ----------------------------------------------------------------- sections
 * A boundary is a hairline and space. Cards, fills and shadows are reserved for things
 * that are genuinely a separate surface: the board, the card picker, a dialog.
 */
.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 {
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Space carries the grouping; a rule marks a real change of subject. */
.study-page .study-main > section,
.study-page .study-main > div,
.study-page .study-layout > *,
.study-page .study-content > section,
.study-page .study-content > div {
  margin-bottom: var(--sp-6);
}
.study-page .study-content > section + section,
.study-page .study-main > section + section {
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-4);
}

/* The offer is information, not a banner. */
.study-page .trial,
.study-page #trialOffer {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: var(--sp-3) 0 0 !important;
  margin-bottom: var(--sp-4) !important;
}
.study-page .trial-clock,
.study-page #trialClock {
  font-size: 20px !important;
  color: var(--accent) !important;
}

/* Disclosures keep the pattern, lose the box. */
.study-page .plan-section,
.study-page .owner-access,
.study-page .grade-guide,
.study-page .advanced-settings,
.study-page details {
  background: none !important;
  border: 0 !important;
  border-top: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  padding: var(--sp-2) 0 !important;
}
.study-page summary {
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* The three steps read as one sentence, with space doing the separating. */
.study-page .study-onboarding {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-4);
  margin-bottom: var(--sp-4) !important;
  color: var(--ink-muted);
  font-size: 14px;
}

/* ------------------------------------------------------------------- forms */
.study-page select,
.study-page input[type="text"],
.study-page textarea {
  min-height: var(--btn-min-h, 44px);
  padding: 8px 12px;
  border: 1px solid #55555c;
  border-radius: var(--btn-radius, 8px);
  background: #141416;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
}
.study-page table.perf th,
.study-page table.perf td { padding: 12px 8px; }

/* --------------------------------------------------------------- components
 * Action rows hold their buttons at label width, in a row that wraps.
 */
.study-page .trainer-actions,
.study-page .toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

/* Every part of the switch is given an explicit size rather than `inset: 0`. The track is
   absolutely positioned, and with inset it was resolving against a shorter box than the
   label's declared height, leaving the knob overflowing the track at both ends. Explicit
   width and height cannot be affected by whatever the containing block turns out to be. */
.study-page .bill-toggle {
  /* --sw-w / --sw-h / --sw-inset come from /ui-tokens.css; declaring them here would
     override the editor. */
  position: relative !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: var(--sw-w) !important;
  height: var(--sw-h) !important;
  min-height: var(--sw-h) !important;
  max-height: var(--sw-h) !important;
  padding: 0 !important;
  border: 0 !important;
}
.study-page .bill-track {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--sw-w) !important;
  height: var(--sw-h) !important;
  border-radius: 999px !important;
  background: #fdfdfd;
  pointer-events: none;
}
.study-page .bill-knob {
  position: absolute !important;
  top: var(--sw-inset) !important;
  left: var(--sw-inset) !important;
  width: calc(var(--sw-h) - var(--sw-inset) * 2) !important;
  height: calc(var(--sw-h) - var(--sw-inset) * 2) !important;
  border-radius: 50% !important;
  background: #c8a53a;
  pointer-events: none;
  transition: transform .15s ease;
}
.study-page .bill-toggle input:checked + .bill-track .bill-knob {
  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
}

/* The overlay close button is a <button>, so the rule above gives it a 44 px minimum and
   20 px of side padding, which pushed the glyph off centre. It is an icon target, not a
   labelled button, so it is reset here. */
.study-page .paywall-close {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  min-height: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 18px;
  border-radius: 8px;
}

/* A button is sized by its label. style.css gives .primary `flex: 1 1 0%`, which stretches
   it to fill the row; that is what made the trainer button span the page. Width alone is not
   enough because a growing flex item ignores width. */
.study-page .primary,
.study-page button.primary { flex: 0 0 auto !important; }
.study-page .trainer-actions > button,
.study-page .toolbar > button { width: auto !important; flex: 0 0 auto !important; }

/* HU / 3way chooses between two views, so it reads as a tab set: the selection is shown by
   weight and a rule underneath rather than by a filled chip. */
.study-page .table-mode {
  display: flex;
  gap: var(--sp-4);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--sp-2);
}
.study-page .table-mode button {
  min-height: 44px;
  padding: 8px 2px;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: none !important;
  color: var(--ink-muted) !important;
  font-weight: 700;
}
.study-page .table-mode button.active {
  color: var(--ink) !important;
  border-bottom-color: var(--accent) !important;
}
.study-page .table-mode button:hover:not(.active) {
  background: none !important;
  color: var(--ink) !important;
}

/* ------------------------------------------------------------------- board
 * Every value the board complaints touched is a token. The defaults here are the values
 * that were asked for: the mode switch centred, the seat chips pulled to the horizontal
 * centre and closer together, and the surrounding blocks tightened.
 */
.study-page .table-controls {
  gap: var(--board-controls-gap, 20px) !important;
  min-height: var(--board-controls-h, 132px) !important;
}
.study-page .table-mode {
  justify-content: var(--board-mode-justify, center) !important;
}
.study-page .position-map {
  width: var(--board-map-w, 400px) !important;
  max-width: 100% !important;
  height: var(--board-map-h, 104px) !important;
  margin: var(--board-map-margin, 18px) 0 !important;
  justify-self: center !important;
  /* Was a fixed grey from the board stylesheet, which now reads as a separate box against
     the page ground. */
  background: var(--surface, #1b2230) !important;
  border-color: var(--line, #252d3b) !important;
}
/* The seat chips are centred by transform. A later rule was resetting the transform, which
   left each chip's left edge at the midpoint of the table: that is the "off to the right"
   the user saw. Both the anchor and the transform are pinned here. */
.study-page .position-map .position-chip {
  width: var(--board-chip, 46px) !important;
  height: var(--board-chip, 46px) !important;
  font-size: calc(var(--board-chip, 46px) * 0.26) !important;
}
.study-page .position-map .position-chip.front,
.study-page .position-map .position-chip.opposite {
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
}
.study-page .position-map .position-chip.opposite {
  top: calc(var(--board-chip-offset, 18px) * -1) !important;
  bottom: auto !important;
}
.study-page .position-map .position-chip.front {
  bottom: calc(var(--board-chip-offset, 18px) * -1) !important;
  top: auto !important;
}
.study-page .position-map .position-chip.upper-left {
  left: 12% !important;
  right: auto !important;
  transform: none !important;
}
.study-page .position-map .position-chip.upper-right {
  left: auto !important;
  right: 12% !important;
  transform: none !important;
}
.study-page .opponent-previews {
  gap: var(--board-preview-gap, 8px) !important;
  min-height: var(--board-preview-h, 88px) !important;
}
.study-page .table-workspace {
  gap: var(--board-columns-gap, 18px) !important;
}
/* The picker is four suit rows, each a grid of one joker cell plus thirteen cards, so the
   card size and the gap belong to .table-deck-row rather than to .card-picker. The column
   template is left alone: it was not measured, and a control that guesses at it would be
   another switch that does nothing. */
.study-page .table-deck-row {
  gap: var(--picker-gap, 6px) !important;
}
.study-page .table-deck-row .playing-card {
  width: var(--picker-card-w, 44px) !important;
  height: var(--picker-card-h, 64px) !important;
  max-width: 100% !important;
}

/* ---------------------------------------------------------------- top bar
 * The upgrade action sits at the right end of the top bar. Order matters, not just margin:
 * header-menus.js appends the help and account buttons after everything already in the
 * markup, so a plain margin-left:auto stops short of the end and leaves the button floating
 * in the middle of the bar.
 */
.study-page .study-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.study-page .study-header .brand { order: 0; }
.study-page .study-header .study-beta { order: 1; }
.study-page .study-header .language { order: 2; }
/* The reference dashboard puts the upgrade action immediately left of the icon buttons, with
   the icons still at the very end. Only the upgrade takes the free space. */
.study-page .study-header .header-actions { order: 100; margin-left: 0; }
.study-page .study-upgrade {
  order: 99;
  margin-left: auto;
  padding: 8px 16px;
  border-radius: 8px;
  background: #f0cf6a;
  color: #12151b !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.study-page .study-upgrade:hover { background: #ffec7c; }

/* ------------------------------------------------ removed at the owner's request
 * Three blocks the owner asked to be rid of:
 *   .owner-access    the manager / unlocks disclosure, developer-facing
 *   #sessionTitle    "choose a session or enter a decision", obvious from the history list
 *   #precisionNote   restated a fixed number that nothing can change
 *   #newPosition     a new position opens on arrival, so the button repeated the flow
 * Kept in the document because study.js writes to each of them by id; hiding is the part
 * that shows, and no script has to change.
 *
 * This block lives in this file, not only on the server: this file is the source of truth
 * for the presentation layer, and a ruleset added on the host alone is lost the next time
 * this file is uploaded.
 */
.study-page .owner-access,
.study-page #sessionTitle,
.study-page #precisionNote,
.study-page [data-i18n="precisionNote"],
.study-page #newPosition {
  display: none !important;
}

/* -------------------------------------------------------------- narrow view */
@media (max-width: 720px) {
  body.study-page { font-size: 15px; }
  .study-page h1, .study-page .intro h1, .study-page #trainerTitle { font-size: 20px !important; }
  .study-page .study-main > section,
  .study-page .study-main > div { margin-bottom: var(--sp-4); }
  /* Full-width stacked actions keep the 44 px target without crowding. */
  .study-page .trainer-actions,
  .study-page .toolbar { display: flex; flex-direction: column; gap: var(--sp-1); }
  .study-page .trainer-actions > button,
  .study-page .toolbar > button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .study-page button { transition: none; }
}