/* R3-BOARD (A): market states, the closed-game status, the Rules panel (ADD-001) and the board order toggle (FRO-010). */
/* Uses the shared --d-* tokens, which light.css and dark.css (html.dk) both define. */

/* A finished game: one status line with a way on (FRO-002/003). */
.gp-closed{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0;padding:12px 16px;border:1px solid var(--d-line);border-left:4px solid var(--d-ink);border-radius:10px;background:var(--d-surface,#fff);color:var(--d-ink);font:600 14px/1.45 var(--sl-font,inherit)}
.gp-closed b{font-weight:800;font-size:15px}
.gp-closed span{color:var(--d-sub)}
.gp-closed a{display:inline-flex;align-items:center;min-height:24px;color:var(--d-ink);font-weight:800;text-decoration:underline;text-underline-offset:3px}

/* Rules toggle beside each section heading. */
.gp-sec-headrow{display:flex;align-items:center;gap:4px}
.gp-sec-headrow .gp-sec-head{flex:1 1 auto;min-width:0}
.md-toggle{flex:none;min-width:44px;min-height:44px;margin:0 14px 0 0;padding:0 12px;border:1px solid var(--d-line2,var(--d-line));border-radius:8px;background:transparent;color:var(--d-ink);font:700 14px/1.2 var(--sl-font,inherit);cursor:pointer}
.md-toggle:hover{border-color:var(--d-ink)}
.md-toggle[aria-expanded=true]{border-color:var(--d-ink);box-shadow:inset 0 -3px var(--d-red,#e50025)}
.md-toggle:focus-visible{outline:2px solid var(--d-ink);outline-offset:2px}

/* The panel: six labelled fields and the rules version. */
.md-panel{margin:0 18px 14px 28px;padding:12px 14px;border:1px solid var(--d-line);border-radius:10px;background:var(--d-surface2,transparent);color:var(--d-ink);font:500 14px/1.45 var(--sl-font,inherit)}
.md-panel[hidden]{display:none}
.md-panel dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 16px;margin:0}
.md-panel dl>div{display:contents}
.md-panel dt{font-weight:800}
.md-panel dd{margin:0;min-width:0;overflow-wrap:anywhere}
.md-ver{margin:10px 0 0;color:var(--d-sub);font-size:12px}
@media (max-width:800px){
  .md-toggle{margin-right:8px;padding:0 8px}
  .md-panel{margin:0 10px 12px}
  .md-panel dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .md-panel dd{margin-bottom:8px}
}

/* Home "On the board": the order switch sits above the rows when the page supplies the heading. */
.sl-board>.sl-board-order:first-of-type{margin-top:4px}
.sl-board-head .sl-board-order{margin:0 0 0 auto}

/* ADD-008 (A's markup): the Terms link beside a value offer. Base sizing only; visual-system.css (B) styles it. */
.gp-promo-terms{display:inline-block;min-height:24px;padding:2px 2px;line-height:20px;color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}

/* FRO-010: the time-ordered board's column heading lines up with the rows (it had no grid of its own). */
body .sl-board-time>.sl-cols>span:first-child{display:block}
body .sl-board-time>.sl-cols{display:grid;grid-template-columns:minmax(180px,300px) repeat(3,minmax(96px,1fr));gap:var(--sl-gap);align-items:end;padding:10px 0 6px;border-bottom:1px solid var(--d-line)}
@media (max-width:760px){body .sl-board-time>.sl-cols{grid-template-columns:minmax(84px,1fr) repeat(3,var(--sl-col,68px))}}
@container slboard (max-width:600px){body .sl-board-time>.sl-cols{grid-template-columns:minmax(84px,1fr) repeat(3,minmax(0,84px))}}

/* Phones: with the Rules toggle beside it, a section heading puts its badge under the title (as the game page already
   does), so the title never breaks mid-word in the props room. */
@media (max-width:600px){
  body.props-room .gp-sec-headrow .gp-sec-head button:has(.gp-badge){grid-template-areas:"title chev" "badge chev";grid-template-columns:minmax(0,1fr) auto}
}