/* Draft Plan (screen) + printable cheat sheet (print).
   Loaded only by draft-board.html, per the per-page CSS convention -- these
   rules describe one tool's surfaces and must not leak into styles.css. */

/* ---------------------------------------------------------------- Draft Plan
   Screen-only. Uses the app's existing tokens and the .pos-tint-* position
   colour language (which goes on the row, never on a chip), rendered in the
   Draft Board's own row treatment -- see .draft-plan-row below. */

/* Wider than the 380px shared .edge-modal default. A plan row now carries the
   same identity the board does (name, team, bye, status, position + tier,
   Edge Score), and at 380px those either wrap into two lines or push the
   availability figure -- the one number this panel exists to show -- off the
   edge. Still a modal, not a page: wide enough for one row per player, and
   for the longest real name in the pool to sit un-clipped beside its flags. */
#draftPlanModalOverlay .edge-modal { max-width: 620px; }

/* "next: 20" beside the live pick counter. Quiet on purpose -- .pick-tracker
   is a dedicated high-contrast surface (see the --pick-tracker-bg note in
   styles.css) and a second bold figure in it would compete with the pick
   number itself rather than annotate it. */
.next-pick-hint {
    display: block; font-size: 0.7rem; opacity: 0.75;
    font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.next-pick-hint:empty { display: none; }

.draft-plan-header-actions { display: flex; align-items: center; gap: 8px; }

.draft-plan-print-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--surface-hover); color: var(--text);
    border: 1px solid var(--border); border-radius: 8px;
    padding: 6px 10px; cursor: pointer;
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: var(--track-label); font-size: 0.78rem; font-weight: 600;
}
@media (hover: hover) {
    .draft-plan-print-btn:hover { background: var(--border-highlight); }
}
.draft-plan-print-btn .icon { width: 15px; height: 15px; }

.draft-plan-context, .draft-plan-note, .draft-plan-empty {
    color: var(--text-muted); font-size: 0.85rem; line-height: 1.5; margin: 0 0 14px;
}
.draft-plan-note { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--border); }
.draft-plan-empty { margin: 0; }

.draft-plan-round { margin-bottom: 16px; }

.draft-plan-round-head {
    display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px;
    padding-bottom: 5px; border-bottom: 1px solid var(--border);
}
.draft-plan-pick {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: var(--track-label); font-weight: 700; font-size: 0.95rem; color: var(--text);
}
.draft-plan-round-label {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: var(--track-label); font-size: 0.75rem; color: var(--text-muted);
}

.draft-plan-list { list-style: none; margin: 0; padding: 0; }

/* A ruled list of board rows, not a stack of coloured cards. The rounded,
   fully-tinted rows this replaced turned six positions into six blocks of
   solid colour -- the exact failure the board's own comments record twice
   ("a 600-row board read as stripes of colour with the data second") and
   solved with a wash off the rail. Matching it here means the players you
   plan for look like the players you draft. */
.draft-plan-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; margin: 0;
    font-size: 0.88rem;
    border-bottom: 1px solid var(--border);
}
.draft-plan-row:last-child { border-bottom: 0; }

/* The board's row treatment, via the --pos-row-wash the .pos-tint-* class
   already carries (styles.css). The attribute selector is what outranks
   .pos-tint-*'s own flat background-color -- see the same idiom on the
   homepage hero board. */
.draft-plan-list .draft-plan-row[class*="pos-tint-"] {
    background-color: transparent;
    background-image: linear-gradient(90deg, var(--pos-row-wash), transparent 42%);
    border-left-width: 2px;
}

/* One line per player, like the board. Wrapping instead of truncating sounds
   kinder, but a plan is read by scanning down the availability column, and a
   row that grows a second line whenever a player happens to carry an injury
   flag breaks that column into an uneven ladder. The name yields first
   because it is the one item still legible when clipped. */
.draft-plan-player { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; flex-wrap: nowrap; }
.draft-plan-name {
    font-size: 1.05em; font-weight: 600;
    min-width: 0; flex: 0 1 auto;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.draft-plan-player :is(.team-text, .bye-text, .injury-flag) { flex: 0 0 auto; }
/* Same footprint as the board's POS column: bold position, tier badge beside
   it, on neutral ground so the wash carries the colour and this carries the
   label. */
.draft-plan-pos {
    flex: 0 0 auto; white-space: nowrap;
    font-size: 0.8rem; font-weight: 700; color: var(--text);
}
.draft-plan-need {
    font-family: var(--font-display); text-transform: uppercase;
    letter-spacing: var(--track-label); font-size: 0.65rem; font-weight: 700;
    background: var(--border-highlight); color: var(--text);
    padding: 2px 5px; border-radius: 4px;
}
.draft-plan-edge {
    flex: 0 0 auto; min-width: 54px;
    display: inline-flex; justify-content: flex-end;
}
.draft-plan-edge .edge-badge { font-size: 0.78rem; }

/* Availability bands. Deliberately NOT the good/neutral/bad value-badge
   greens and reds: those encode "is this a steal or a reach", and reusing
   them here would say a low availability is a bad player rather than a
   player who won't last. Weight and muting carry it instead. */
.draft-plan-avail {
    font-variant-numeric: tabular-nums; font-size: 0.8rem;
    min-width: 42px; text-align: right; font-weight: 700;
}
.draft-plan-avail-likely   { color: var(--text); }
.draft-plan-avail-coinflip { color: var(--text-muted); }
.draft-plan-avail-gone     { color: var(--text-muted); opacity: 0.65; font-weight: 500; }
.draft-plan-avail-unknown  { color: var(--text-muted); opacity: 0.5; }

/* Dedicated class rather than the table's .star-btn: inactive table stars
   intentionally hide until row hover on pointer devices, but every plan row
   needs an always-visible, keyboard- and touch-accessible action. */
.draft-plan-star-btn {
    width: 28px; height: 28px; flex: 0 0 28px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0; border: 1px solid transparent; border-radius: 6px;
    background: transparent; color: var(--text-muted); cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.draft-plan-star-btn .icon { width: 16px; height: 16px; }
.draft-plan-star-btn.active {
    color: #fbbf24; border-color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}
/* The action is the rightmost cell. Centering its tooltip around the icon
   creates a hidden horizontal scrollbar in the narrow modal even before the
   tooltip is visible, so anchor the floating label to the inside edge. */
.draft-plan-star-btn[data-tooltip]::after {
    left: auto; right: 0;
    transform: translateY(4px);
}
.draft-plan-star-btn[data-tooltip]::before {
    left: auto; right: 8px;
    transform: translateY(4px);
}
.draft-plan-star-btn[data-tooltip]:hover::after,
.draft-plan-star-btn[data-tooltip]:hover::before,
.draft-plan-star-btn[data-tooltip]:focus-visible::after,
.draft-plan-star-btn[data-tooltip]:focus-visible::before {
    transform: translateY(0);
}
@media (hover: hover) {
    .draft-plan-star-btn:hover { color: #fbbf24; border-color: #fbbf24; }
}

/* On a phone the modal is whatever the viewport allows, so the row sheds its
   least load-bearing identity first. Position, Edge Score and availability
   are the plan; the bye week and tier badge are board context you can get by
   closing this. Name and team stay -- a name alone is how the old rows read,
   and that was the problem.

   The name also stops competing for the line here. Held to one line at this
   width it loses: a "Questionable" flag and the four right-hand columns eat
   the row on their own, and the name gets squeezed to an ellipsis or to
   literally nothing, which is worse than any amount of unevenness. Giving it
   a floor it cannot be squeezed below, and letting the chips wrap under when
   they no longer fit beside it, keeps every player named -- and keeps the
   rows that carry no flag down to a single line. */
@media (max-width: 560px) {
    .draft-plan-row .bye-text,
    .draft-plan-row .tier-badge { display: none; }
    .draft-plan-player { flex-wrap: wrap; row-gap: 2px; }
    .draft-plan-name {
        flex: 1 1 auto; min-width: 6.5rem;
        white-space: normal; overflow: visible; text-overflow: clip;
    }
    .draft-plan-edge { min-width: 46px; }
}

/* --------------------------------------------------------- Cheat sheet
   Hidden on screen entirely -- it exists to be printed. */
.cheat-sheet-root { display: none; }

@media print {
    /* Hide the app, show the sheet. Everything on this page is a child of
       .workspace / .draft-masthead / the modal overlays, plus the two fixed
       overlays (.bug-fab and the site chrome), so this is a whitelist rather
       than a long blacklist that would silently miss the next thing added. */
    body > * { display: none !important; }
    body > .cheat-sheet-root { display: block !important; }

    /* The viewer's theme must not follow the sheet onto paper: a dark board
       prints as a solid black page. Force the light values locally rather
       than relying on the theme tokens. */
    .cheat-sheet-root {
        background: #fff; color: #111;
        font-family: Inter, system-ui, -apple-system, sans-serif;
        /* Tuned to land the deepest column (WR, ~60 rows in a 12-team league)
           inside a single page. At 7.6pt/1.28 it measured 1.05 pages, which is
           the one length worse than two full pages: a nearly empty second
           sheet. Measure again if the row template changes -- the constraint
           is the tallest column, not the total row count. */
        font-size: 7.1pt; line-height: 1.16;
    }

    /* A 14-team full-roster sheet has ~17% more rows than the common
       12-team case. Keep the same readable type size and recover the needed
       height from leading/row air only. */
    .cheat-sheet-root.cs-deep-league { line-height: 1.13; }
    .cheat-sheet-root.cs-deep-league .cs-row { padding-block: 0.15pt; }

    @page { size: letter portrait; margin: 0.35in; }

    .cs-head {
        display: flex; justify-content: space-between; align-items: flex-end;
        border-bottom: 1.5pt solid #111; padding-bottom: 4pt; margin-bottom: 6pt;
    }
    .cs-title { font-size: 12pt; }
    .cs-title strong { letter-spacing: -0.2pt; }
    .cs-league { display: block; font-size: 7.5pt; color: #444; font-weight: 500; }
    .cs-picks { text-align: right; font-size: 7.5pt; }
    .cs-picks-label {
        display: block; text-transform: uppercase; letter-spacing: 0.06em;
        font-size: 6.5pt; color: #666;
    }
    .cs-picks-list { font-weight: 700; font-variant-numeric: tabular-nums; }

    /* Five columns: QB | RB | WR | TE | K+DST stacked. Weighted by how much
       name each list actually has to fit -- RB/WR carry the longest names and
       the most rows, K/DST share the narrowest column because a defense's
       name is its city and kickers are one line of the draft. */
    .cs-grid {
        display: grid;
        /* K/DST gets close to a full share despite being the shortest lists:
           kicker names are long ("Ka'imi Fairbairn") and there is no shorter
           way to write them. RB/WR keep slightly more because their columns
           carry the most rows AND the longest names. */
        grid-template-columns: 1fr 1.08fr 1.08fr 0.98fr 0.96fr;
        gap: 0 8pt;
    }
    .cs-col { break-inside: auto; min-width: 0; }
    .cs-col-head {
        font-size: 8.5pt; font-weight: 800; text-transform: uppercase;
        letter-spacing: 0.08em; margin: 0 0 2pt;
        border-bottom: 0.75pt solid #111; padding-bottom: 1.5pt;
    }
    /* The second heading in a stacked column (DST under K) needs air above it
       or it reads as another player row. */
    .cs-col .cs-list + .cs-col-head { margin-top: 6pt; }
    .cs-list { list-style: none; margin: 0; padding: 0; }

    .cs-row {
        display: grid;
        /* min-content on the round marker so "R10" can't be clipped into the
           name beside it, and an explicit 3pt gap -- at 2pt the two ran
           together as "R12Ja..." in the narrower columns. */
        grid-template-columns: min-content minmax(0, 1fr) min-content 2em;
        gap: 0 3pt; align-items: baseline;
        padding: 0.3pt 0;
        break-inside: avoid;
    }
    /* Zebra striping survives the print-colour-adjust default, which strips
       backgrounds; without this the rows run together at 7.6pt. */
    .cs-row:nth-child(even) {
        background: #f2f2f2;
        -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .cs-round { font-size: 6.4pt; color: #666; font-variant-numeric: tabular-nums; }
    .cs-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .cs-meta {
        font-size: 6.2pt; color: #666; text-transform: uppercase;
        font-variant-numeric: tabular-nums; white-space: nowrap;
    }
    .cs-val { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }

    /* Tier break. A rule rather than a colour band, because colour is the
       first thing a black-and-white printer throws away. */
    .cs-tier-break {
        border-top: 0.75pt solid #999;
        margin: 1.5pt 0; height: 0; list-style: none;
    }

    .cs-foot {
        margin-top: 6pt; padding-top: 3pt; border-top: 0.5pt solid #ccc;
        font-size: 6.2pt; color: #666;
    }
}