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

   spider-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.
   ========================================================================== */

.spi-board { padding: 12px 16px 12px; }
.spi-board .pr-status { margin: 0 0 8px; padding: 7px 12px; font-size: 15px; line-height: 1.4; }
@media (min-width: 561px) { .spi-board .pr-status { min-height: 58px; } }
.spi-board .h-stats { margin: 0 0 8px; padding-bottom: 5px; }
.spi-board .g-controls { margin: 0; }
.spi-board .pr-tip { margin-top: 10px; }

/* One grid of ten for the top row and the columns, so the draw pile sits over the first column
   and the eight finished runs over the last eight. */
.spi-top, .spi-cols {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: 6px;
}
.spi-top { grid-template-rows: auto auto; margin: 0 0 8px; }
.spi-cols { align-items: start; min-height: 150px; }

.spi-cap { margin: 0 0 3px; grid-row: 1; font-size: 10.5px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spi-cap--draw { grid-column: 1 / span 2; }
.spi-cap--done { grid-column: 3 / span 8; }
.spi-cell { grid-row: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.spi-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. */
.spi-board .gcard { position: relative; flex: 0 0 auto; padding: 0; }
.spi-board .gcard:not(.gcard--back) {
  flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 1px;
  padding: 1px 2px; line-height: 1; text-align: left; overflow: hidden;
}
.spi-board .gcard .gr, .spi-board .gcard .gs { font-size: inherit; line-height: 1; }
.spi-board .gcard:not(.gcard--back)::after {
  content: attr(data-s); position: absolute; right: 3px; bottom: 2px; font-size: 1.9em; line-height: 1; opacity: .9;
}
.spi-board .gcard:not(.gcard--back) { border-color: rgba(18, 20, 26, 0.34); }
.spi-board button.gcard:hover { transform: none; border-color: var(--ink); }
.spi-board button.gcard:focus-visible, .spi-slot:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; z-index: 5; }
/* A face-up card that cannot be picked up: the cards below it are not one suit in order. */
.spi-board .gcard.spi-stuck { filter: saturate(.55) brightness(.93); }

/* An empty place: an empty column, a finished run not yet made, the used-up draw pile. */
.spi-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: 6px;
}
.spi-slot:disabled, .spi-slot--done { cursor: default; opacity: .6; }

.spi-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.5;
}

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

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

@media (max-width: 560px) {
  .spi-board { padding: 10px 6px; }
  .spi-top, .spi-cols { column-gap: 2px; }
  .spi-cap { font-size: 9px; letter-spacing: .02em; }
  .spi-capx { display: none; }
  .spi-mode { margin-left: 0; width: 100%; }
  .spi-board .gcard:not(.gcard--back) { padding: 1px 1px; }
  .spi-board .gcard:not(.gcard--back)::after { font-size: 1.5em; right: 2px; }
}

@media (forced-colors: active) {
  .spi-board .spi-sel { outline: 3px solid Highlight; box-shadow: none; }
  .spi-board .spi-hint-from { outline: 3px double Highlight; box-shadow: none; }
  .spi-board .spi-target, .spi-board .spi-hint-to { outline: 3px dashed Highlight; }
  .spi-slot { border-color: CanvasText; }
}

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

/* ==========================================================================
   Watch a narrated deal: the table (spider-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 ten
   columns fit any width without a script, and the way a column overlaps comes from spider-solitaire-watch.js as a
   fraction of a card's height. The shared viewer's own rules (.wv-*) are in brand.css.
   ========================================================================== */
#spider-watch .wv-stage { container: spwstage / inline-size; padding: 6px 8px 6px; }
.spw-table { --spw-gap: 6px; --spw-w: 34px; --spw-h: calc(var(--spw-w) * 1.4); display: flex; flex-direction: column; align-items: center; gap: 3px; }
@supports (width: 1cqw) { .spw-table { --spw-w: clamp(24px, calc((100cqw - 9 * var(--spw-gap)) / 10), 46px); } }

.spw-key { align-self: stretch; text-align: center; font-size: 11.5px; line-height: 1.3; color: var(--muted); }

/* the board: the piles over the columns, or (spw-side, picked by the script on a wide, short stage) beside them */
.spw-board { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.spw-main { display: flex; flex-direction: column; gap: 2px; }
.spw-fit .spw-board { width: max-content; }
.spw-side .spw-board { flex-direction: row; align-items: flex-start; gap: calc(var(--spw-w) * 0.5); }
.spw-side .spw-top { grid-template-columns: repeat(4, var(--spw-w)); grid-template-rows: auto auto auto auto auto; row-gap: 3px; margin: 0; order: 2; }
.spw-side .spw-cap--draw { grid-column: 1 / span 4; grid-row: 1; }
.spw-side .spw-cell--draw { grid-column: 1; grid-row: 2; justify-content: flex-start; }
.spw-side .spw-cap--done { grid-column: 1 / span 4; grid-row: 3; margin-top: 4px; }
.spw-side .spw-cell--d0 { grid-column: 1; grid-row: 4; } .spw-side .spw-cell--d1 { grid-column: 2; grid-row: 4; }
.spw-side .spw-cell--d2 { grid-column: 3; grid-row: 4; } .spw-side .spw-cell--d3 { grid-column: 4; grid-row: 4; }
.spw-side .spw-cell--d4 { grid-column: 1; grid-row: 5; } .spw-side .spw-cell--d5 { grid-column: 2; grid-row: 5; }
.spw-side .spw-cell--d6 { grid-column: 3; grid-row: 5; } .spw-side .spw-cell--d7 { grid-column: 4; grid-row: 5; }

.spw-grid { display: grid; grid-template-columns: repeat(10, var(--spw-w)); column-gap: var(--spw-gap); justify-content: center; align-items: start; }
.spw-top { grid-template-rows: auto auto; margin-bottom: 2px; }
.spw-cap { grid-row: 1; margin: 0 0 2px; font-size: 10.5px; line-height: 1.2; color: var(--muted); white-space: nowrap; }
.spw-cap--draw { grid-column: 1 / span 2; }
.spw-cap--done { grid-column: 3 / span 8; }
.spw-cell { grid-row: 2; display: flex; justify-content: center; align-items: flex-start; min-width: 0; }
.spw-cell--draw { grid-column: 1; }
.spw-cell--d0 { grid-column: 3; } .spw-cell--d1 { grid-column: 4; } .spw-cell--d2 { grid-column: 5; } .spw-cell--d3 { grid-column: 6; }
.spw-cell--d4 { grid-column: 7; } .spw-cell--d5 { grid-column: 8; } .spw-cell--d6 { grid-column: 9; } .spw-cell--d7 { grid-column: 10; }
.spw-colno { font-size: 11px; line-height: 1.2; color: var(--muted); text-align: center; font-weight: 700; }
.spw-col { display: flex; flex-direction: column; align-items: center; min-width: 0; }

@container spwstage (max-width: 430px) { .spw-table { --spw-gap: 3px; } .spw-cap { font-size: 9px; } }

.spw-table .gcard { position: relative; flex: 0 0 auto; width: var(--spw-w); height: var(--spw-h); padding: 0; border-radius: 5px; border-width: 1.2px; transition: none; }
.spw-table .gcard:not(.gcard--back) {
  flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 1px; padding: 1px 2px; line-height: 1; text-align: left; overflow: hidden;
  font-size: calc(var(--spw-w) * 0.3); border-color: rgba(18, 20, 26, 0.34);
}
.spw-table .gcard .gr, .spw-table .gcard .gs { font-size: inherit; line-height: 1; }
.spw-table .gcard:not(.gcard--back)::after { content: attr(data-s); position: absolute; right: 2px; bottom: 2px; font-size: 1.8em; line-height: 1; opacity: .9; }
.spw-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;
}
.spw-slot {
  display: inline-flex; flex: 0 0 auto; width: var(--spw-w); height: var(--spw-h);
  border: 1.5px dashed var(--line-firm); border-radius: 5px;
}

.spw-table .gcard.wv-fresh { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; }
.spw-table .gcard.spw-flipped { outline: 2px solid var(--brass); outline-offset: 1px; z-index: 2; }

#spider-watch .wv-opt { font-size: 13px; line-height: 1.25; }
#spider-watch .wv-options { gap: 2px; margin-top: 2px; }
#spider-watch .wv-head { margin-bottom: 4px; }
#spider-watch .wv-say { padding: 6px 14px 7px; margin-bottom: 5px; }
#spider-watch .wv-text { font-size: 15px; line-height: 1.4; }
#spider-watch .wv-stage { margin-bottom: 6px; }
#spider-watch .wv-why { margin-bottom: 4px; }

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