/* ==========================================================================
   Solitaire practice board.

   solitaire-trainer.js sets the size of every card and how far the cards in a column
   overlap, so the longest column still fits the screen. This file says how things line up
   and what they look like. Every color comes from the site's variables (see brand.css),
   so the light and dark themes both work. Loaded after brand.css.
   ========================================================================== */

/* The board has to fit one laptop screen: the status line, both rows of cards and the buttons. */
.sol-board { padding: 12px 16px 12px; }
.sol-board .pr-status { margin: 0 0 8px; padding: 7px 12px; font-size: 15px; line-height: 1.4; }
/* Room for two lines at all times, so the cards do not jump down when a longer message arrives
   (a click that picks a card up changes the message, and the next click must land where the reader aimed). */
@media (min-width: 561px) { .sol-board .pr-status { min-height: 58px; } }
.sol-board .h-stats { margin: 0 0 8px; padding-bottom: 5px; }
.sol-board .g-controls { margin: 0; }
.sol-board .pr-tip { margin-top: 10px; }

/* One grid for the top row and the columns, so the draw pile sits over the first column,
   the turned-over pile over the second, and the home piles over the last four. */
.sol-top, .sol-cols {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 8px;
}
.sol-top { grid-template-rows: auto auto; margin: 0 0 8px; }
.sol-cols { align-items: start; min-height: 150px; }

.sol-cap { margin: 0 0 3px; grid-row: 1; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sol-cap--draw { grid-column: 1; }
.sol-cap--waste { grid-column: 2 / span 2; }          /* the cell after it is empty, so the words have room */
.sol-cap--home { grid-column: 4 / span 4; }
.sol-cell { grid-row: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.sol-cell--waste { justify-content: flex-start; }
.sol-fan { display: flex; align-items: flex-start; }
.sol-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }

/* Cards: the rank and suit sit in the top-left corner so a card that is partly covered still reads. */
.sol-board .gcard { position: relative; flex: 0 0 auto; padding: 0; }
.sol-board .gcard:not(.gcard--back) {
  flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 1px;
  padding: 1px 3px; line-height: 1; text-align: left; overflow: hidden;
}
.sol-board .gcard .gr, .sol-board .gcard .gs { font-size: inherit; line-height: 1; }
.sol-board .gcard:not(.gcard--back)::after {
  content: attr(data-s); position: absolute; right: 5px; bottom: 3px; font-size: 2.1em; line-height: 1; opacity: .9;
}
/* A dark edge on every face, so cards stacked in a column can be told apart on the ivory faces of the dark theme too. */
.sol-board .gcard:not(.gcard--back) { border-color: rgba(18, 20, 26, 0.34); }
.sol-board button.gcard:hover { transform: none; border-color: var(--ink); }
.sol-board button.gcard:focus-visible, .sol-slot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 5; }

/* An empty place a card can be put: an empty column, an empty home pile, the used-up draw pile. */
.sol-slot {
  display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: 0 0 auto;
  background: transparent; color: var(--muted); font: inherit; cursor: pointer;
  border: 1.5px dashed var(--line-firm); border-radius: 7px;
}
.sol-slot:disabled { cursor: default; opacity: .6; }
.sol-glyph { font-size: 26px; line-height: 1; opacity: .6; }
.sol-glyph--red { color: var(--accent); }

.sol-count {
  position: absolute; right: 3px; bottom: 3px; padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--line-firm);
  font-size: 12px; font-weight: 700; line-height: 1.5;
}

/* Picked up (red outline), where it can go (dashed), and what the Hint points at (gold). */
.sol-board .sol-sel { box-shadow: 0 0 0 3px var(--accent); z-index: 3; }
.sol-board .sol-target { outline: 2px dashed var(--accent); outline-offset: 2px; }
.sol-board .sol-hint-from { box-shadow: 0 0 0 3px var(--brass); z-index: 3; }
.sol-board .sol-hint-to { outline: 3px solid var(--brass); outline-offset: 2px; }
.sol-board .sol-sel.sol-hint-from { box-shadow: 0 0 0 3px var(--accent), 0 0 0 6px var(--brass); }

/* Under the table: the buttons, and how many cards the draw pile turns over. */
.sol-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.sol-controls .btn:disabled { opacity: .38; cursor: not-allowed; }
.sol-controls .btn:disabled:hover { background: transparent; color: var(--text); }
.sol-mode { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.sol-modelbl { font-size: 13px; color: var(--muted); }
.sol-mode .btn { padding: 7px 14px; }
.sol-mode .btn[aria-pressed="true"] { background: var(--text); color: var(--bg); }

@media (max-width: 560px) {
  .sol-board { padding: 10px 8px; }
  .sol-top, .sol-cols { column-gap: 3px; }
  .sol-cap { font-size: 9px; letter-spacing: .02em; }
  .sol-capx { display: none; }
  .sol-cap--draw { font-size: 8px; letter-spacing: 0; }   /* "Draw pile" must fit over one narrow column */
  .sol-mode { margin-left: 0; width: 100%; }
  .sol-glyph { font-size: 20px; }
}

/* Windows high contrast and other forced-color modes draw outlines in system colors. */
@media (forced-colors: active) {
  .sol-board .sol-sel { outline: 3px solid Highlight; box-shadow: none; }
  .sol-board .sol-hint-from { outline: 3px double Highlight; box-shadow: none; }
  .sol-board .sol-target, .sol-board .sol-hint-to { outline: 3px dashed Highlight; }
  .sol-slot { border-color: CanvasText; }
}

/* ---------- fixed board (docs/fixed-board-rollout.md) ----------
   solitaire-trainer.js sizes the cards from the board's width and, on this page, its height too, so the top row and
   the tallest column fit the board. The columns take the rest of the board; on a phone too small for even the
   smallest cards they scroll inside it. In the Coach rail's dock the draw choice takes a row of its own. */
.pr-fixed .sol-board .pr-status { min-height: 0; }
.pr-fixed .sol-board .sol-cols { flex: 1 1 0; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.pr-fixed .pr-dock .sol-controls { margin-top: 0; }
.pr-fixed .pr-dock .sol-mode { flex: 1 1 100%; display: flex; flex-wrap: nowrap; margin: 0; gap: 6px; }
.pr-fixed .pr-dock .sol-mode .btn { flex: 1 1 0; padding: 7px 8px; }
.pr-fixed .pr-dock .sol-modelbl { flex: 0 0 auto; align-self: center; }
@container board (max-height: 470px) {
  .pr-fixed .sol-board .pr-status { font-size: 13px; padding: 6px 10px; margin-bottom: 6px; }
  .pr-fixed .sol-board .h-stats { margin-bottom: 4px; padding-bottom: 3px; }
}

/* ==========================================================================
   Watch a narrated deal: the table (solitaire-watch.js draws it into the viewer's stage).

   Nothing here is clickable. The size of a card comes from the width of the stage (a container query), so the seven
   columns fit any width without a script, and the way a column overlaps comes from solitaire-watch.js as a fraction of
   a card's height. On a wide stage the piles sit beside the columns, which keeps the whole panel about one laptop screen
   tall; on a narrow one they sit above them, as on the practice board. Every color comes from the site's variables, so
   both themes work. The shared viewer's own rules (.wv-*) are in brand.css; nothing in this file changes them.
   ========================================================================== */
#solitaire-watch .wv-stage { container: swstage / inline-size; padding: 6px 8px 6px; }
.sw-table { --sw-gap: 8px; --sw-w: 36px; --sw-h: calc(var(--sw-w) * 1.4); display: flex; flex-direction: column; align-items: center; gap: 3px; }
@supports (width: 1cqw) { .sw-table { --sw-w: clamp(28px, calc((100cqw - 6 * var(--sw-gap)) / 7), 36px); } }

/* the one-line key to the outlines */
.sw-key { align-self: stretch; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--muted); }

/* the piles: the draw pile and the turned-over pile, then the four home piles */
.sw-board { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; }
.sw-piles { display: grid; grid-template-columns: repeat(7, var(--sw-w)); column-gap: var(--sw-gap); align-items: start; }
.sw-cap { grid-row: 1; margin: 0 0 2px; font-size: 10.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; text-align: center; }
.sw-cap--draw { grid-column: 1; overflow: visible; }
.sw-cap--turned { grid-column: 2 / span 2; text-align: left; }
.sw-cap--home { grid-column: 4 / span 4; }
.sw-cell { grid-row: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.sw-cell--draw { grid-column: 1; }
.sw-cell--turned { grid-column: 2; }
.sw-cell--h0 { grid-column: 4; } .sw-cell--h1 { grid-column: 5; } .sw-cell--h2 { grid-column: 6; } .sw-cell--h3 { grid-column: 7; }

/* the numbers over the seven columns, then the columns */
.sw-main { display: flex; flex-direction: column; gap: 3px; }
.sw-grid { display: grid; grid-template-columns: repeat(7, var(--sw-w)); column-gap: var(--sw-gap); justify-content: center; align-items: start; }
.sw-colno { font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; white-space: nowrap; }
.sw-colno .sw-colnum { font-weight: 700; }

.sw-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }

/* a narrow stage (a phone): a smaller gap between columns and smaller captions, and the draw pile's caption goes on two lines over its one narrow column */
@container swstage (max-width: 430px) { .sw-table { --sw-gap: 4px; } .sw-cap { font-size: 9px; } .sw-cap--draw { white-space: normal; line-height: 1.1; } }

/* a wide stage: the columns on the left, the piles on the right (the draw pile and the turned-over pile over the four home piles) */
@container swstage (min-width: 560px) {
  .sw-table { --sw-w: 36px; --sw-gap: 8px; }
  .sw-board { flex-direction: row; justify-content: center; align-items: flex-start; gap: 28px; }
  .sw-main { order: -1; }
  .sw-piles { grid-template-columns: repeat(4, var(--sw-w)); column-gap: 14px; row-gap: 2px; }
  .sw-cap--draw { grid-column: 1; grid-row: 1; }
  .sw-cap--turned { grid-column: 2 / span 3; grid-row: 1; }
  .sw-cell--draw { grid-column: 1; grid-row: 2; }
  .sw-cell--turned { grid-column: 2; grid-row: 2; }
  .sw-cap--home { grid-column: 1 / span 4; grid-row: 3; margin-top: 6px; text-align: left; }
  .sw-cell--h0 { grid-column: 1; grid-row: 4; } .sw-cell--h1 { grid-column: 2; grid-row: 4; }
  .sw-cell--h2 { grid-column: 3; grid-row: 4; } .sw-cell--h3 { grid-column: 4; grid-row: 4; }
}

/* the cards: the rank and suit sit in the top-left corner so a card that is partly covered still reads */
.sw-table .gcard { position: relative; flex: 0 0 auto; width: var(--sw-w); height: var(--sw-h); padding: 0; border-radius: 5px; border-width: 1.2px; transition: none; }
.sw-table .gcard:not(.gcard--back) {
  flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 1px; padding: 1px 3px; line-height: 1; text-align: left; overflow: hidden;
  font-size: calc(var(--sw-w) * 0.29); border-color: rgba(18, 20, 26, 0.34);
}
.sw-table .gcard .gr, .sw-table .gcard .gs { font-size: inherit; line-height: 1; }
.sw-table .gcard:not(.gcard--back)::after { content: attr(data-s); position: absolute; right: 3px; bottom: 2px; font-size: 2em; line-height: 1; opacity: .9; }
.sw-count {
  position: absolute; right: 2px; bottom: 2px; padding: 0 5px; border-radius: 999px; background: var(--surface-2); color: var(--text);
  border: 1px solid var(--line-firm); font-size: 11px; font-weight: 700; line-height: 1.45;
}

/* an empty place: an empty column, an empty home pile, a used-up draw pile */
.sw-slot {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: var(--sw-w); height: var(--sw-h);
  border: 1.5px dashed var(--line-firm); border-radius: 5px; color: var(--muted);
}
.sw-glyph { font-size: calc(var(--sw-w) * 0.6); line-height: 1; opacity: .6; }
.sw-glyph--red { color: var(--suit-red, var(--accent)); }
/* The faded suit of an empty home pile: no ivory chip behind it, even when practice.js paints it red. */
.sw-glyph .red { color: inherit; background: none; padding: 0; }

/* a card that has just moved (red) and a hidden card that has just been turned face up (gold) */
.sw-table .gcard.wv-fresh { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }
.sw-table .gcard.sw-flipped { outline: 2px solid var(--brass); outline-offset: 1px; z-index: 2; }

/* the list of choices: a little smaller than the shared size, so that a list of five rows stays short */
#solitaire-watch .wv-opt { font-size: 13px; line-height: 1.25; }
#solitaire-watch .wv-options { gap: 2px; margin-top: 2px; }

@media (forced-colors: active) {
  .sw-table .gcard.wv-fresh, .sw-table .gcard.sw-flipped { outline-color: Highlight; }
  .sw-slot { border-color: CanvasText; }
}


/* the viewer's own boxes, a little tighter, so that the whole panel (table, narration, list, buttons) is about one laptop screen tall */
#solitaire-watch .wv-head { margin-bottom: 4px; }
#solitaire-watch .wv-say { padding: 6px 14px 7px; margin-bottom: 5px; }
#solitaire-watch .wv-text { font-size: 15px; line-height: 1.4; }
#solitaire-watch .wv-stage { margin-bottom: 6px; }
#solitaire-watch .wv-why { margin-bottom: 4px; }