/* ==========================================================================
   The Ledger board: shared "plate"
   --------------------------------------------------------------------------
   Single source of truth for the Ledger player-board's look. Used by:
     - the printable component sheets ("The Ledger v0.9 (Poker Chips).html"
       and "The Ledger v0.9.html"), and
     - the Rulebook, which renders the board LIVE (see .ledger-plate) instead
       of embedding a baked image, so the two can never drift apart again.

   Everything is scoped to .dashboard-strip so this file is self-contained and
   cannot clobber a host page's globals (palette, fonts, box-sizing, @page).
   The standalone sheets keep their own page chrome (body, .page-container,
   @page landscape) inline; only the board itself lives here.

   Build size is parametrised. The default is the poker-chip build (the source
   of truth); add the .tokens modifier for the 26 mm prototype-marker build.
   ========================================================================== */

.dashboard-strip {
    /* Palette lifted from the Reskin system so the board sits in the same
       family as the rulebook, decks and playbooks. Scoped here, not :root,
       so linking this file into the Rulebook leaves its globals untouched. */
    --gold: #c9a437;
    --gold-line: #b9932f;
    --gold-label: #d4af37;
    --gold-faint: #7a6a3a;
    --muted: #b8a577;
    --panel-a: #241c14;
    --panel-b: #19130c;

    --font-display: 'Cinzel', serif;
    --font-body: 'Barlow', sans-serif;

    /* --- Build geometry (default = poker chip, the source of truth) ---
       39 mm sockets are standard casino poker chips. Six positions fill the
       ~254 mm row, so nothing sits beside them; the Turn token lives on the
       table, not this board. The .tokens modifier below drops to the 26 mm
       prototype-marker build on its smaller board. */
    --board-w: 275mm;
    --board-h: 85mm;
    --socket: 39mm;
    --socket-gap: 2mm;
    /* Pill padding gives the sockets breathing room inside the oval. Kept
       under ~7mm horizontally: at 8mm the pill overran the board's right
       edge and clipped the last Ledger socket. */
    --row-pad-x: 6mm;
    --row-pad-y: 5mm;

    width: var(--board-w);
    height: var(--board-h);

    background-color: var(--panel-b);
    background-image: linear-gradient(135deg, var(--panel-a), var(--panel-b));
    border: 4px double var(--gold-line);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    outline: 1px dashed #3a3228;
    outline-offset: 1mm;
}

/* Prototype-marker build: smaller chips on a smaller board. */
.dashboard-strip.tokens {
    --board-w: 260mm;
    --board-h: 75mm;
    --socket: 26mm;
    --socket-gap: 4mm;
    --row-pad-x: 6mm;
    --row-pad-y: 3mm;
}

/* Board-scoped box model + colour fidelity, so the plate renders identically
   whether or not the host page sets these globally. */
.dashboard-strip,
.dashboard-strip *,
.dashboard-strip *::before,
.dashboard-strip *::after {
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* --- TYPOGRAPHY ---
   The Reskin's cardinal rule: a Cinzel title is NEVER uppercased. Display type
   is mixed case; UPPERCASE is reserved for wide-tracked Barlow micro-labels. */
.dashboard-strip .main-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.55rem;
    color: var(--gold);
    margin: 0;
    letter-spacing: 1.5px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* The book's section-head diamond, shrunk to a mark on either side. */
.dashboard-strip .main-title::before,
.dashboard-strip .main-title::after {
    content: '';
    width: 7px;
    height: 7px;
    background: var(--gold);
    transform: rotate(45deg);
    flex: 0 0 auto;
}

.dashboard-strip .top-instruction {
    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 3.2px;
    margin-top: 1.5mm;
    margin-bottom: 4mm;
    padding-bottom: 1.5mm;
    border-bottom: 1px solid rgba(185, 147, 47, .22);
}

.dashboard-strip .bottom-instruction {
    margin-top: 4mm;
    font-family: var(--font-body);
    font-size: 0.62rem;
    color: var(--muted);
    font-style: italic;
    letter-spacing: 0.4px;
    display: flex;
    gap: 10mm;
}

.dashboard-strip .bottom-instruction b {
    font-style: normal;
    font-weight: 600;
    color: var(--gold-label);
}

/* --- SOCKET CONTAINER --- */
.dashboard-strip .socket-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--socket-gap);

    background-color: rgba(0, 0, 0, .35);
    padding: var(--row-pad-y) var(--row-pad-x);
    border-radius: 100px;
    border: 1px solid rgba(107, 90, 46, .4);
    box-shadow: inset 0 0 15px #000;
}

.dashboard-strip .cluster {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2mm;
}

/* The five Ledger sockets sit in their own tight row inside the cluster. */
.dashboard-strip .socket-group {
    display: flex;
    gap: var(--socket-gap);
}

.dashboard-strip .label {
    font-family: var(--font-body);
    font-size: 0.5rem;
    color: var(--gold-label);
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-weight: 700;
    line-height: 1;
}

.dashboard-strip .arrow-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-faint);
    font-size: 16px;
    margin: 0 2mm;
}

/* --- SOCKETS --- */
.dashboard-strip .socket {
    width: var(--socket);
    height: var(--socket);
    border-radius: 50%;
    position: relative;
}

.dashboard-strip .stash-socket {
    border: 2px solid var(--gold-faint);
    background: radial-gradient(circle at 50% 50%, var(--panel-a) 0%, #000 100%);
    box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 1);
}

.dashboard-strip .stash-socket::after {
    content: "RESERVES";
    font-family: var(--font-body);
    font-size: 7.5px;
    font-weight: 600;
    color: #52472f;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    letter-spacing: 1.4px;
}

.dashboard-strip .action-socket {
    border: 2px dashed var(--gold-line);
    background: radial-gradient(circle at 50% 50%, var(--panel-a) 0%, #070504 80%);
    box-shadow: inset 1px 1px 5px rgba(0, 0, 0, 0.9);
}

/* Decoration corners. */
.dashboard-strip .corner {
    position: absolute;
    width: 5mm;
    height: 5mm;
    border-color: var(--gold-line);
    border-style: solid;
    opacity: 0.5;
}
.dashboard-strip .tl { top: 3mm; left: 3mm; border-width: 1px 0 0 1px; }
.dashboard-strip .tr { top: 3mm; right: 3mm; border-width: 1px 1px 0 0; }
.dashboard-strip .bl { bottom: 3mm; left: 3mm; border-width: 0 0 1px 1px; }
.dashboard-strip .br { bottom: 3mm; right: 3mm; border-width: 0 1px 1px 0; }

/* ==========================================================================
   Rulebook embed: the board rendered live, scaled down to the text column.
   The plate is authored at its true mm size, then scaled by --ledger-scale;
   the wrapper reserves the scaled footprint so surrounding copy flows cleanly.
   ========================================================================== */
.ledger-plate {
    --ledger-scale: 0.60;
    display: flex;
    justify-content: center;
    margin: 0.8em 0 1em;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.ledger-plate .ledger-plate-inner {
    width: calc(275mm * var(--ledger-scale));
    height: calc(85mm * var(--ledger-scale));
    position: relative;
    /* LOAD-BEARING: THIS IS WHAT KEEPS THE WHOLE BOOK PRINTING AT 100%.
       .dashboard-strip below is authored at its true 275mm (1039px) and shrunk
       with transform: scale(). A transform is a PAINT operation and never
       changes layout size, so the strip still claimed 1039px of layout width;
       being absolutely positioned it pushed the document's content box out to
       ~1124px on a 794px A4 page, and Chrome shrank the ENTIRE book to fit:
       794/1124 = 70%, anchored top-left, white down the right and bottom.

       `contain: size layout` is what fixes it. overflow:hidden and overflow:clip
       do NOT (measured 71.0% against a 69.5% baseline, i.e. barely moved),
       because clipping an ancestor does not stop an absolutely positioned
       descendant contributing to the page's content box.

       Size containment is safe here ONLY because this box declares its own
       width and height above. Do not remove them, and do not "simplify" this to
       an overflow rule. Verified 2026-07-29: worst-page content width went
       69.5% -> 99.5% and the board still renders complete.

       Measuring this is a trap: the page background is near-black, so a
       dark-pixel test reports the background and always reads 100% healthy.
       Measure BRIGHT content, cropping ~6% to clear the gold page frame. */
    contain: size layout;
}

.ledger-plate .dashboard-strip {
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(var(--ledger-scale));
    transform-origin: top left;
}