/* NockDraft broadcast theme for the Draftroom boards.
   Self-contained so the board still styles when served on its own by server.py.
   Keep nfl-board/board-theme.css and nba-board/board-theme.css identical. */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,600;0,700;0,800;1,700;1,800;1,900&family=Barlow:wght@400;500;600;700&display=swap');

:root {
    color-scheme: light;
    --bg: #e8ebf0;
    --panel: #ffffff;
    --panel-2: #f4f6f9;
    --line: #cfd5de;
    --ink: #0b1f3a;
    --muted: #44546c;
    --navy: #0b1f3a;
    --navy-2: #16345f;
    --blue: #0a4fd6;
    --red: #d6001c;
    --gold: #ffb612;
    --green: var(--blue);
    --hilite: #dfe9ff;
    --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    --body: 'Barlow', system-ui, sans-serif;
}

body { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--body); font-feature-settings: "tnum" 1; -webkit-font-smoothing: antialiased; }
::selection { background: var(--red); color: #fff; }
a { color: var(--blue); text-underline-offset: 3px; }
p { color: var(--muted); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Site bar */
header.nk-bar {
    position: sticky; top: 0; z-index: 40;
    display: block; padding: 0;
    background: var(--navy); color: #fff;
    border-bottom: 3px solid var(--red);
}
.nk-bar-in { max-width: 1450px; margin: 0 auto; padding: 0 4%; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nk-logo { display: inline-flex; height: 32px; line-height: 32px; font: italic 900 1.6rem/32px var(--display); color: #fff; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.nk-logo b { font-weight: 900; background: var(--red); padding: 0 .5rem 0 .4rem; margin-left: .15rem; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.nk-nav { display: flex; height: 100%; overflow-x: auto; scrollbar-width: none; }
.nk-nav a { display: flex; align-items: center; padding: 0 .8rem; font: 700 1.05rem var(--display); text-transform: uppercase; color: #b8c6dc; text-decoration: none; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -3px; }
.nk-nav a:hover { color: #fff; }
.nk-nav a[aria-current="page"] { color: #fff; border-bottom-color: #fff; }
.nk-nav a[hidden] { display: none; }

/* Title band */
.hero { align-items: flex-end; }
.hero > div:first-child { display: flex; flex-direction: column; align-items: flex-start; }
h1 { order: 1; font: italic 900 clamp(2.6rem, 6vw, 4.6rem)/.92 var(--display); letter-spacing: 0; text-transform: uppercase; color: var(--ink); margin: 0 0 .7rem; }
.eyebrow {
    order: 2;
    font: 700 1.1rem var(--display); letter-spacing: 0; text-transform: uppercase;
    color: #fff; background: var(--navy);
    padding: .35rem 1.4rem .35rem .8rem;
    clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}
.hero > div:first-child p { order: 3; }

/* Controls */
button, select, input, textarea { font-family: var(--body); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 0; }
button { font: 700 1rem var(--display); text-transform: uppercase; }
button:hover { border-color: var(--navy); }
.primary { background: var(--red); color: #fff; border-color: var(--red); font: italic 800 1.1rem var(--display); clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); padding-right: 18px; }
.primary:hover { background: #a80016; border-color: #a80016; }

/* Stat strip */
.metric { background: var(--panel); border: 0; border-top: 3px solid var(--navy); border-radius: 0; box-shadow: 0 1px 0 var(--line); }
.metric strong { font: 800 2.2rem/1 var(--display); color: var(--ink); }
.metric span { font: 700 .95rem var(--display); color: var(--muted); letter-spacing: 0; }

/* The board table as a lower-third stack */
.tablewrap { border: 0; border-radius: 0; background: var(--panel); box-shadow: 0 1px 0 var(--line), 0 14px 30px -24px rgba(11, 31, 58, .55); }
th { background: var(--navy); color: #fff; font: 700 .95rem var(--display); letter-spacing: 0; text-transform: uppercase; }
td { border-top: 1px solid var(--line); }
tbody tr:hover { background: var(--hilite); }
.rank { font: italic 900 1.7rem var(--display); color: var(--ink); }
.player { font: 700 1.2rem var(--display); text-transform: uppercase; color: var(--ink); }
.player small { font: 400 .85rem var(--body); text-transform: none; color: var(--muted); }
.pos { background: var(--blue); color: #fff; border-radius: 0; font: 800 .95rem var(--display); padding: 4px 8px; }
.star { color: var(--red); }
.portrait { border-radius: 0; background: var(--panel-2); color: var(--muted); font-family: var(--display); }
.school-logo { border-radius: 0; background: #fff; color: var(--ink); }
.muted { color: var(--muted); }

/* Dialogs and popovers */
dialog, .hover-profile { background: var(--panel); color: var(--ink); border: 0; border-top: 6px solid var(--navy); border-radius: 0; box-shadow: 0 24px 60px -20px rgba(11, 31, 58, .55); }
dialog::backdrop { background: rgba(7, 20, 41, .65); }
dialog h2, .hover-profile h2 { font: italic 900 2rem/1 var(--display); text-transform: uppercase; }
.scout-box { background: var(--panel-2); border: 0; border-radius: 0; }
.scout-box h3 { font: 800 1.05rem var(--display); text-transform: uppercase; color: #0f7b3f; }
.scout-box.concerns h3 { color: var(--red); }
.scout-box p { color: var(--ink); }
.source-card { background: var(--panel); border: 0; border-top: 3px solid var(--navy); border-radius: 0; }
.freshness-badge { color: #0f7b3f; }
.caution, #message, #mockStatus { color: #a86a00; }
.compare-tray { background: var(--navy); color: #fff; border: 0; border-top: 3px solid var(--red); border-radius: 0; box-shadow: 0 -10px 30px -20px rgba(0, 0, 0, .5); }
.compare-tray button:not(.primary) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.comparison-person strong { color: var(--ink); }
details summary { font: 700 1.1rem var(--display); text-transform: uppercase; cursor: pointer; }
footer { color: var(--muted); font-size: .85rem; }

/* NBA mock draft pieces */
.view-tabs { border-bottom: 0; background: var(--navy-2); gap: 0; }
.view-tabs button { color: #b8c6dc; font: 700 1.1rem var(--display); }
.view-tabs button[aria-selected=true] { color: #fff; border-bottom-color: var(--red); }
.mock-panel { background: var(--panel); border: 0; border-radius: 0; box-shadow: 0 1px 0 var(--line); }
.mock-panel h2 { font: italic 900 1.6rem var(--display); text-transform: uppercase; }
.pick-slot { background: var(--panel-2); border: 0; border-left: 0; border-radius: 0; }
.pick-slot.mine { background: var(--hilite); }
.pick-slot.on-clock { box-shadow: inset 0 0 0 2px var(--red); border: 0; }
.pick-num { font: italic 900 1.4rem var(--display); color: var(--ink); }
.round-heading { font: italic 800 1.15rem var(--display); letter-spacing: 0; color: var(--red); }
.clock-label { color: var(--red); font-family: var(--display); text-transform: uppercase; }
.value-badge { background: var(--panel); border-radius: 0; }
.value-good { color: #0f7b3f; }

@media (max-width: 700px) {
    .nk-bar-in { height: auto; flex-wrap: wrap; padding: .55rem 16px 0; gap: .2rem 1rem; }
    .nk-nav { width: calc(100% + 32px); margin: 0 -16px; padding: 0 8px; height: 40px; }
    .nk-nav a { padding: 0 .55rem; font-size: 1rem; }
    .tablewrap { background: transparent; box-shadow: none; }
    .tablewrap tbody tr { background: var(--panel); border: 0; border-top: 4px solid var(--navy); border-radius: 0; }
}

/* Watch star drawn, not typed */
button.star, #watch { display: inline-flex; align-items: center; gap: .4rem; }
button.star { font-size: 0; width: 38px; height: 38px; justify-content: center; padding: 0; }
button.star::before, #watch::before {
    content: "";
    width: 18px; height: 18px; flex: none;
    background: var(--red);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L12 16.8l-5.4 3 1.2-6.1-4.5-4.2 6.1-.7z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L12 16.8l-5.4 3 1.2-6.1-4.5-4.2 6.1-.7z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
button.star[aria-pressed="true"]::before, #watch[aria-pressed="true"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L12 16.8l-5.4 3 1.2-6.1-4.5-4.2 6.1-.7z' fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2l2.6 5.6 6.1.7-4.5 4.2 1.2 6.1L12 16.8l-5.4 3 1.2-6.1-4.5-4.2 6.1-.7z' fill='black'/%3E%3C/svg%3E");
}
/* Watch + compare sit side by side in the first column */
tbody td:first-child { white-space: nowrap; }
tbody td:first-child br { display: none; }
tbody td:first-child button + button { margin-left: 6px; }
.toolbar { flex-wrap: wrap; }
.toolbar input { min-width: 180px; }
@media (min-width: 701px) { .toolbar { flex-wrap: nowrap; } .toolbar select, .toolbar input { min-width: 0; flex: 1 1 auto; } .toolbar button { flex: none; } }