/* Studio. Same palette as the Watch Party, kept local so this app has no cross-project assets. */
:root { --navy: #0b1f44; --navy-deep: #071222; --gold: #d4af37; --ink: #1f2937; --cream: #faf7f2; --sand: #e7e1d6; --muted: #6b7280; --ok: #2e9e5b; --warn: #e08a1e; --bad: #b11e2d; --local: #6d28d9; --serif: Georgia, "Iowan Old Style", serif; --sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: ui-monospace, Menlo, monospace; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; scroll-padding-top: var(--top-h, 120px); } /* --top-h is set by studio.js to the sticky header height */
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.45; }
a { color: var(--navy); }
code { font-size: 12px; background: var(--cream); padding: 1px 5px; border-radius: 4px; }
h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 26px 0 10px; font-weight: 700; }
.muted { color: var(--muted); font-weight: 400; } .small { font-size: 12.5px; }
button { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--sand); border-radius: 6px; background: #fff; color: var(--ink); cursor: pointer; }
button:hover { border-color: var(--navy); }
button:disabled { opacity: .5; cursor: default; border-color: var(--sand); }
button.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
button.primary:disabled { background: #9aa7bd; border-color: #9aa7bd; }
button.danger { color: var(--bad); }
input[type=text], input:not([type]), input[type=password], select { font: inherit; font-size: 13px; padding: 6px 9px; border: 2px solid #b9b2a3; border-radius: 6px; background: #fff; }
input[type=text]:focus, input:not([type]):focus, input[type=password]:focus, select:focus { outline: none; border-color: var(--navy); }

/* ---- sticky header: brand, section nav, state selector, status bar ---- */
.top { position: sticky; top: 0; z-index: 20; background: var(--navy-deep); color: #fff; box-shadow: 0 2px 8px #0003; }
.brandrow { display: flex; align-items: center; gap: 14px; padding: 8px 16px; font-size: 13px; flex-wrap: nowrap; }
.brandrow b, .subbrand, #logout { flex: none; }
#logout { margin-left: 10px; }
.brandrow b { font-family: var(--serif); color: var(--gold); font-size: 17px; font-weight: 400; }
.subbrand { font-family: var(--serif); color: #fff; font-size: 15px; padding-left: 10px; margin-left: -6px; border-left: 1px solid #3a4f7a; }
.sections { display: flex; gap: 2px; margin-left: 10px; flex: 1 1 auto; min-width: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
.sections::-webkit-scrollbar { display: none; }
.sections a { flex: none; }
.sections a { color: #c7cfdf; text-decoration: none; padding: 4px 10px; border-radius: 5px; }
.sections a:hover, .sections a.here { background: #16305e; color: #fff; }
.top .link { margin-left: auto; background: none; border: 1px solid #3a4f7a; color: #c7cfdf; font-size: 12px; padding: 3px 8px; }
.statusbar { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 16px 7px; background: #1b2a4a; font-size: 12.5px; color: #c7cfdf; border-top: 1px solid #2a3a5c; }
.statusbar .st { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.statusbar .st b { color: #eef2f9; font-weight: 400; }
.statusbar #st-feed b { color: #fff; font-weight: 700; }
.statusbar .st .k { color: #8a98b5; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); display: inline-block; flex: none; }
.dot.warn { background: var(--warn); } .dot.bad { background: var(--bad); } .dot.off { background: #777; }
.howbox { margin: 10px 0 2px; padding: 12px 16px; border: 1px solid var(--sand); border-left: 3px solid var(--gold); border-radius: 6px; background: #fff; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.howbox summary { cursor: pointer; list-style: none; display: inline; } .howbox summary::-webkit-details-marker { display: none; }
.howbox[open] summary::after { content: " ▾"; color: var(--gold); } .howbox:not([open]) summary::after { content: " ▸"; color: var(--gold); }
.howbox ul { margin: 8px 0 0; padding-left: 22px; } .howbox li { margin: 5px 0; }
.howbox b { color: var(--ink); font-weight: 600; }
.howbox code { font-family: var(--mono); font-size: 12px; }
.howbox a { color: inherit; text-decoration: underline; }
.testbanner { background: var(--warn); color: #1a1200; font-size: 12px; font-weight: 700; text-align: center; padding: 4px 10px; letter-spacing: .04em; }
.testbanner.testlogin { background: var(--local); color: #fff; }
.problem { background: #fdf0f1; border: 1px solid #f0c3c7; border-left: 4px solid var(--bad); border-radius: 8px; padding: 10px 14px; margin: 10px 0; font-size: 14px; color: var(--ink); }
.problem.warn { background: #fdf6ea; border-color: #f1d9a8; border-left-color: var(--warn); }
.problem.top { margin: 0; border-radius: 0; border-width: 0 0 1px 4px; }
.problem b { display: block; margin-bottom: 3px; }
.problem ul { margin: 6px 0 0; padding-left: 18px; }

/* ---- production line: working copy · push / pull / defaults · production ---- */
.pollstrip { padding: 3px 16px 4px; background: #fff; font-size: 12.5px; color: var(--ink); }
.pollstrip button:not(.info) { font-size: 12px; padding: 2px 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; line-height: 1.4; }
.pollstrip { padding: 3px 16px 4px; background: #fff; font-size: 12.5px; color: var(--ink); }
.pollstrip { display: flex; align-items: center; gap: 10px; border-bottom: 2px solid var(--gold); white-space: nowrap; overflow: hidden; }
/* The site's own status (reachable, pull only, last push) lives behind this icon's tooltip. */

/* ---- login ---- */
.login { max-width: 360px; margin: 80px auto; background: #fff; border: 1px solid var(--sand); border-radius: 10px; padding: 22px 24px; }
.login h1 { font-family: var(--serif); font-weight: 400; font-size: 22px; margin: 0 0 6px; color: var(--navy); }
.login p { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.login input { width: 100%; margin-bottom: 10px; }
.login .hint { background: #fdf0f1; border-left: 3px solid var(--bad); padding: 6px 10px; border-radius: 4px; color: var(--ink); }
.login .err { color: var(--bad); font-size: 13px; min-height: 18px; margin-top: 8px; }

/* ---- layout ---- */
main { max-width: 1400px; margin: 0 auto; padding: 10px 16px 80px; }
.card { background: #fff; border: 1px solid var(--sand); border-radius: 10px; padding: 18px 22px 24px; margin: 32px 0; }
/* Nav-level sections: a wide gap and a navy top edge so they read as separate chapters when scrolling. */
main > section.card { margin: 40px 0; border: 3px solid var(--navy); border-radius: 10px; scroll-margin-top: 12px; overflow: hidden; }
main > section.card + section.card::before { content: ""; display: block; height: 0; }
/* Section headers: a fat navy band across the top of the card, title in light serif, subtext and dropdowns on it. */
.cardhead { display: flex; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin: -18px -22px 20px; padding: 16px 22px 14px; background: var(--navy); color: #c7cfdf; }
.cardhead h2 { font-family: var(--serif); font-weight: 400; font-size: 24px; color: #fff; margin: 0; letter-spacing: .01em; }
.cardhead .secdisp { color: #c7cfdf; }
.actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.callhl { margin: 4px 0 10px; font-size: 13.5px; } .callhl input { vertical-align: -2px; margin-left: 4px; }
.bgpick { color: var(--muted); }
.defaultsbtn { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; margin-left: 4px; }
.pubrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; padding: 8px 12px; background: #fff; border: 2px solid var(--navy); border-radius: 6px; font-size: 12.5px; }
.pubrow .spacer { flex: 1; }
.pubrow button { font-size: 12px; padding: 3px 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.pubrow button.publish { background: #4a9a6a; color: #fff; border-color: #4a9a6a; } .pubrow button.publish:disabled { background: #fff; border-color: #4a9a6a; color: var(--muted); opacity: .7; }
.pubrow button.pull { background: #d98a2b; color: #1a1200; border-color: #d98a2b; } .pubrow button.pull:disabled { background: #fff; border-color: #d98a2b; color: var(--muted); opacity: .7; }
.whynot { font-size: 11px; color: #8b1a1a; } .whynot:empty { display: none; }
.screenmid .whynot { margin-top: -6px; text-align: center; }
button .lock, .readonly .lock { margin-right: 5px; vertical-align: -1px; }
.pubstate { cursor: help; } .pubstate.dirty { color: #b5651d; font-weight: 600; } .pubstate.same { color: var(--ok); font-weight: 600; }
/* After a publish: whether the live address (what the switcher and every viewer read) has picked it up yet. */
.freshline { margin: 6px 0; padding: 6px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 600; background: #fdf6ea; border-left: 4px solid var(--warn); color: #6b4a12; }
.freshline .muted { font-weight: 400; }
.freshline.late { background: #fdf0f1; border-left-color: var(--bad); color: #8b1a1a; }
.freshline.ok { background: #ecf7f0; border-left-color: #1f9d55; color: #1a5c35; }
.liveparams { margin: 6px 0 8px; }
.liveparams .params { border-collapse: collapse; font-size: 12.5px; background: #fff; border: 1px solid var(--sand); border-radius: 6px; width: 100%; }
.liveparams .params td { padding: 5px 10px; border-bottom: 1px solid var(--sand); vertical-align: top; }
.liveparams .params tr:last-child td { border-bottom: 0; }
.liveparams .params td.k { font-family: var(--mono); color: var(--muted); width: 90px; cursor: help; }
.liveparams .params .lab { display: inline-block; font-family: var(--mono); font-size: 11.5px; background: var(--cream); border: 1px solid var(--sand); border-radius: 4px; padding: 0 6px; margin: 1px 2px 1px 0; }
.liveparams .warnline { background: #fdf0f1; border-left: 4px solid var(--bad); padding: 8px 12px; border-radius: 6px; font-size: 13px; }
.tickerurl { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 10px; font-size: 12.5px; }
.tickerurl .k { color: var(--muted); cursor: help; }
.tickerurl .url { font-family: var(--mono); font-size: 11.5px; color: var(--navy); word-break: break-all; }
.pollstrip .pl-k { font-weight: 700; letter-spacing: .08em; color: var(--navy); font-size: 12px; cursor: help; }
/* laptop only: standby (mirroring production) or production (promoted) */
.standby { display: flex; align-items: center; gap: 14px; padding: 4px 16px; font-size: 12.5px; color: var(--ink); background: #f3f3f3; border-bottom: 1px solid #d4d4d4; white-space: nowrap; }
.standby > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .standby .k, .standby .info, .standby button { flex: none; }
.standby .k { font-weight: 700; letter-spacing: .08em; font-size: 12px; color: #555; }
/* the (i) beside a strip's label opens a plain-English panel under it */
.info { box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; background: none; padding: 0; margin-left: -4px; display: inline-flex; align-items: center; justify-content: center; font: 700 10px/1 var(--serif); color: var(--navy); cursor: pointer; opacity: .7; flex: none; }
.info:hover, .info[aria-expanded="true"] { opacity: 1; background: var(--navy); color: #fff; border-color: var(--navy); }
.standby .info { color: #555; } .standby .info:hover, .standby .info[aria-expanded="true"] { background: #555; border-color: #555; color: #fff; }
.infopanel { padding: 8px 16px 10px; background: #fffdf5; border-bottom: 1px solid var(--sand); font-size: 12.5px; color: var(--ink); }
.infopanel dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0; max-width: 1100px; } .infopanel dt { font-weight: 700; white-space: nowrap; } .infopanel dd { margin: 0; }
.infopanel p { margin: 0 0 6px; }
.standby.prod { background: #fff4e5; border-color: var(--warn); } .standby.prod .k { color: #9a5b00; }
.standby.warn { background: #fdf0f1; border-color: var(--bad); }
.standby .bad { color: var(--bad); font-weight: 600; } .standby a { color: inherit; }
.standby .site { display: inline-flex; align-items: center; gap: 6px; }
.standby button:not(.info) { margin-left: auto; font-size: 12px; padding: 2px 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.pollstrip .readonly { font-size: 12px; color: #8b1a1a; }
.pollstrip .pl-sum { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.pollstrip .pl-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.pollstrip .note { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.seg { display: inline-flex; align-items: center; border: 1px solid var(--sand); border-radius: 6px; overflow: hidden; }
.seg .lbl { font-size: 12px; color: var(--muted); padding: 0 8px; }
.pollstrip .seg button { padding: 2px 8px; }
.seg button { border: 0; border-left: 1px solid var(--sand); border-radius: 0; }
.seg button.on { background: var(--navy); color: #fff; }
.seg button.on[data-rt="t"] { background: var(--warn); color: #1a1200; } /* same orange and dark text as the TEST DATA banner */
.seg button.on[data-rt="l"] { background: var(--ok); color: #fff; } /* green: we are live */
.note { font-size: 13px; color: var(--muted); }
.note.ok { color: var(--ok); } .note.bad { color: var(--bad); }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 900px) { .cols { grid-template-columns: 1fr; } }
.toggle { font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }

/* ---- lists (race pickers) ---- */
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; align-items: center; position: relative; }
.chip { font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--sand); border-radius: 14px; background: #fff; color: var(--ink); cursor: pointer; user-select: none; }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.filters select, .filters input { font-size: 12.5px; padding: 3px 6px; }
.kind { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; padding: 1px 5px; border-radius: 3px; background: #ebe6db; color: #5b5648; vertical-align: 1px; margin-right: 4px; }
/* Senate and House read differently at a glance: Senate cool blue, House the warm sand. */
.kind.o-S { background: #dbe5f6; color: #1b3f7a; } .kind.o-H { background: #ece4d2; color: #5a4a2a; }
.kind.k-governor { background: #e4e9f5; color: #1f3a6e; } .kind.k-statewide { background: #eef0f4; color: #3a4f7a; } .kind.k-measure { background: #e9e4f3; color: #4b3b78; } .kind.k-local { background: #e4f1ea; color: #1c6b3c; }
.pill { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; letter-spacing: .03em; vertical-align: 1px; }
.pill.call { background: var(--gold); color: #1a1600; }
.sic { display: inline-block; margin-left: 6px; vertical-align: -1px; } .sic.feat { color: #c9a227; } .sic.tick { color: var(--navy); }
.list { border: 1px solid var(--sand); border-radius: 8px; max-height: 420px; overflow: auto; }
.list.pins { max-height: none; overflow: visible; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--sand); font-size: 13.5px; }
.row > * { min-width: 0; }
.row:last-child { border-bottom: 0; }
.row .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lab { font-family: var(--mono); font-size: 12px; background: var(--cream); padding: 1px 5px; border-radius: 4px; margin-right: 6px; }
.row .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .btns { display: flex; gap: 4px; }
.row .btns button { padding: 3px 8px; font-size: 12px; }
.row.on { background: #fbf8ef; }
.row.on .btns button.add { color: var(--muted); }
.row .ord { font-family: var(--mono); color: var(--muted); font-size: 12px; margin-right: 6px; }
.row.manual .nm { font-weight: 600; white-space: normal; }
.addmanual { display: flex; gap: 6px; margin-bottom: 6px; }
.addmanual input, #idletext { flex: 1; width: 100%; }
.empty { color: var(--muted); padding: 22px; text-align: center; font-size: 13px; }
.addfeat { margin-top: 8px; }
.addfeat input { flex: 1; }
.suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 8; background: #fff; border: 1px solid var(--sand); border-radius: 8px; box-shadow: 0 6px 20px #0002; max-height: 300px; overflow: auto; }
.suggest .row { cursor: pointer; } .suggest .row:hover { background: var(--cream); }
.ro .list button, .ro .chartpick input, .ro #callhl, .ro .addmanual, .ro #idletext, .ro .addfeat, .ro .gcard .featbtn { pointer-events: none; opacity: .55; }
.ro .addmanual, .ro .addfeat, .ro #newchunk, .ro .chunk .chunktop button { display: none; }
.ro .chunk .chunkname { pointer-events: none; }
/* The crawl order and a chunk's contents: one list of race, text and chunk rows */
.row.textrow .nm { font-weight: 600; white-space: normal; }
.row.textrow .nm .quote { color: #6b4a12; }
.row.chunkrow { background: #f6f3ff; }
.row.chunkrow .nm { white-space: normal; }
.chunktag { display: inline-block; font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; background: #5b3fb8; color: #fff; padding: 1px 6px; border-radius: 4px; margin-right: 6px; vertical-align: 1px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.chip { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; font-weight: 600; padding: 1px 7px; border-radius: 4px; border: 1px solid var(--sand); background: #fff; cursor: help; vertical-align: middle; }
.chip.race { font-family: var(--mono); }
.chip.text { font-weight: 500; color: #6b4a12; background: #fdf6ea; border-color: #ecd9a8; }
.chip.missing { color: var(--bad); border-color: var(--bad); }
.chunks { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--sand); }
.chunkhead { font-size: 15px; margin: 0 0 4px; }
.chunklist { display: grid; gap: 12px; }
.chunk { border: 1px solid #c9bdf0; background: #faf8ff; border-radius: 8px; padding: 10px 12px; }
.chunk .chunktop { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.chunk .chunktop .chunkname { font-weight: 700; font-size: 13.5px; flex: 0 1 320px; }
.chunk .chunktop .spacer { flex: 1; }
.chunk .chunktop button { padding: 3px 9px; font-size: 12px; }
.chunk .list { background: #fff; }
.chunk .addfeat { margin-top: 6px; }
.chunk .addmanual { margin: 6px 0 0; }
.chunk .empty { padding: 8px 10px; font-size: 12.5px; }
.sform label.na { color: var(--muted); } .sform label.na select { opacity: .6; }
/* Playlists */
.plbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 6px; font-size: 13px; }
.plbar label { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.plbar select { min-width: 160px; }
.plbar .spacer { flex: 1; }
.plbar button { padding: 4px 10px; font-size: 12.5px; }
.plbar button.primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.plbar .plmeta { color: var(--muted); font-size: 12px; }
#plbody .cardgrid { padding: 10px 0 0; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 8px; }   /* half the size of the other grids, air between rows */
#plbody .gcard, .splist .gcard { overflow: visible; }   /* so the ⋯ menu can hang below a small card */
#plbody .gcard .thumb, .splist .gcard .thumb { border-radius: 0 0 8px 8px; }
#plbody .gcard .ghead .menu { right: 0; min-width: 180px; font-size: 12px; }
#plbody .gcard .ghead .menu button { font-size: 12px; padding: 6px 9px; white-space: nowrap; }
/* The order of a playlist, unmistakable: the Slate's navy circle, a size down, in each card's title bar (gold on the tile that is the draft) */
#plbody .gcard .ghead .pos, .screen .splist .gcard .ghead .pos { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; flex: none; margin-right: 4px; }
.screen .splist .gcard.chosen .ghead .pos { background: var(--gold); color: #1a1600; }
#plbody .gcard .ghead .handle { cursor: grab; color: var(--muted); font-size: 14px; line-height: 1; padding: 0 2px; user-select: none; }
#plbody .gcard .ghead .handle:active { cursor: grabbing; }
#plbody .gcard.dragging { opacity: .4; }
/* Where a dragged card will land: a thick gold bar in the gap beside the card under the pointer, with a glow so it reads on any thumbnail */
#plbody .gcard.dropbefore, #plbody .gcard.dropafter { position: relative; }
#plbody .gcard.dropbefore::after, #plbody .gcard.dropafter::after { content: ""; position: absolute; top: -6px; bottom: -6px; width: 6px; border-radius: 3px; background: var(--gold); box-shadow: 0 0 0 2px #fff, 0 0 10px 2px #facc15aa; z-index: 5; pointer-events: none; }
#plbody .gcard.dropbefore::after { left: -7px; }
#plbody .gcard.dropafter::after { right: -7px; }
/* A Live Screen draft from a playlist: the mode toggle, the pickers and the tiles */
.screen .smode { display: flex; gap: 0; padding: 10px 12px 0; background: #fff; }
.screen .smode button { padding: 4px 12px; font-size: 12.5px; border: 1px solid var(--sand); background: #fff; color: var(--muted); }
.screen .smode button:first-child { border-radius: 6px 0 0 6px; } .screen .smode button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.screen .smode button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.screen .splist { padding: 10px 12px 14px; background: #fff; font-size: 12.5px; }
.screen .splist .plbar { margin: 0 0 8px; }
.screen .splist .cardgrid { padding: 0; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px 6px; }
.screen .splist .gcard { cursor: pointer; }
.screen .splist .gcard .gfoot { display: none; }
.screen .splist .gcard .ghead { padding: 2px 5px; font-size: 10.5px; gap: 3px; } .screen .splist .gcard .ghead .racetag { display: none; }
.screen .splist .gcard .spec { padding: 2px 5px 3px; font-size: 10px; }
.screen .splist .gcard .thumb.clickable:hover::after { content: "Use as draft"; }
.screen .splist .gcard.chosen { outline: 3px solid var(--gold); outline-offset: -1px; }
#plbody .gcard .gfoot { display: none; }   /* no Copy URL or Show: the card is the rundown entry, not an output */
#plbody .gcard .ghead { padding: 3px 6px; font-size: 11px; gap: 4px; }
#plbody .gcard .ghead .cid { font-size: 10.5px; }
#plbody .gcard .ghead .racetag { display: none; }   /* the spec line under the title names the race */
#plbody .gcard .spec { padding: 3px 6px 4px; font-size: 10.5px; }
.gcard .ghead .pos { margin-right: 2px; }
.gcard .spec { padding: 4px 10px 0; font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--mono); }
.gcard .spec b { color: var(--ink); font-weight: 600; }
#plbody .empty { padding: 18px 10px; font-size: 13px; color: var(--muted); }
.psform { display: grid; gap: 10px; margin: 8px 0; font-size: 13px; }
.psform label { display: grid; gap: 4px; color: var(--muted); }
.psform select, .psform input { width: 100%; max-width: 100%; }
.psdesc { font-family: var(--mono); font-size: 12px; margin: 6px 0 0; }
.ro .plbar button { display: none; }
#addchunkref select { flex: 1; width: 100%; }
#addchunkref select:has(option[value=""]:checked) { color: var(--muted); }   /* the helper text reads like a placeholder */
#addchunkref select option { color: var(--ink); }

/* ---- chart pickers ---- */
.chartpick { display: flex; flex-wrap: wrap; gap: 6px; }
.chartpick label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; border: 1px solid var(--sand); border-radius: 6px; padding: 4px 10px 4px 6px; background: #fff; cursor: pointer; }
.chartpick label.on { background: #fbf8ef; border-color: var(--gold); }
.chartpick label .cid { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.chartpick label.unbuilt { color: var(--muted); } .chartpick label .soon { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--warn); }

/* ---- preview (ticker) ---- */
.preview { background: #000; border-radius: 8px; overflow: hidden; border: 1px solid var(--sand); }
.preview .gfoot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff; font-size: 12px; }
.preview .gfoot .spacer { flex: 1; }
.preview .gfoot a.openbtn { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; text-decoration: none; background: #fff; color: var(--navy); border: 1px solid var(--sand); padding: 3px 10px; border-radius: 6px; }
.preview .gfoot a.openbtn:hover { border-color: var(--navy); background: var(--cream); }
.preview .frame.clickable { cursor: pointer; }
.preview .frame.clickable:hover::after { content: "Show ↗"; position: absolute; right: 8px; top: 8px; background: #000c; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.preview .frame { position: relative; width: 100%; aspect-ratio: 1920 / 1080; max-height: 180px; overflow: hidden; }
.preview iframe { position: absolute; left: 0; bottom: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 100%; pointer-events: none; }

/* ---- graphic cards ---- */
.racegrid { display: grid; gap: 18px; margin-top: 16px; }
.racerow { border: 3px solid #9aa7bd; border-radius: 10px; overflow: hidden; background: #f3f5fa; margin-top: 14px; }
.racerow .raceband { border: 0; border-bottom: 2px solid #c9d0dd; border-radius: 0; }
/* Featured race bands: dark on light, lighter than the section headers above them. */
.raceband { display: flex; align-items: baseline; gap: 12px; padding: 8px 14px; background: #f6f3ec; color: var(--navy); border: 1px solid var(--sand); border-radius: 6px 6px 0 0; flex-wrap: wrap; }
.raceband .pos { font-family: var(--mono); font-size: 16px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; align-self: center; }
.raceband .lab { font-size: 18px; font-weight: 700; background: var(--gold); color: #1a1600; padding: 1px 9px; margin: 0; }
.raceband .ttl { font-family: var(--serif); font-size: 17px; }
.raceband .who { color: #6d28d9; }
.raceband .meta { margin-left: auto; font-size: 12.5px; color: var(--muted); }
.raceband .featbtn { background: #fff; color: var(--navy); border-color: var(--sand); padding: 2px 8px; font-size: 12px; }
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 12px; }
.movement .cardgrid, #movegrid { padding: 12px 0 0; }
.cardgrid.dense { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; padding: 8px 0 14px; }
.gcard.minicard .ghead { padding: 4px 8px; font-size: 12px; }
.gcard.minicard .gfoot { padding: 4px 8px; font-size: 11.5px; }
.gcard.minicard .gfoot a.openbtn { padding: 2px 8px; font-size: 11.5px; }
.gcard.minicard .bubble { display: none; }
.gcard.minicard.inuse { outline: 2px solid var(--gold); outline-offset: -1px; }
.gcard.minicard.inuse .ghead { background: #fbf3d6; }
.gcard { border: 1px solid var(--sand); border-radius: 8px; overflow: hidden; background: #fff; display: flex; flex-direction: column; }
.gcard .ghead { display: flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 12.5px; border-bottom: 1px solid var(--sand); background: #fcfbf8; }
.gcard .ghead .cid { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.gcard .ghead .gname { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gcard .ghead { position: relative; }
.gcard .ghead .kebab { margin-left: 4px; padding: 0 6px; font-size: 16px; line-height: 1; border: 0; background: none; color: var(--muted); }
.gcard .ghead .kebab:hover { color: var(--ink); }
.gcard .ghead .menu { position: absolute; right: 6px; top: 100%; z-index: 6; background: #fff; border: 1px solid var(--sand); border-radius: 8px; box-shadow: 0 6px 20px #0002; padding: 4px; display: grid; min-width: 220px; }
.gcard .ghead .menu button { border: 0; background: none; text-align: left; padding: 7px 10px; font-size: 13px; border-radius: 6px; }
.gcard .ghead .menu button:hover { background: var(--cream); }
.gcard .ghead .racetag { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.gcard .thumb { position: relative; width: 100%; aspect-ratio: 1920 / 1080; background: #0b0f17; overflow: hidden; }
.gcard .thumb iframe { position: absolute; left: 0; top: 0; width: 960px; height: 540px; border: 0; transform-origin: 0 0; pointer-events: none; background: #000; }
.gcard .thumb .ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #9aa7bd; font-size: 12.5px; text-align: center; padding: 12px; }
.gcard .thumb .ph button { font-size: 12px; padding: 3px 10px; }
.gcard .thumb .ph.unbuilt { color: #d4af37; }
.gcard.retired { opacity: .55; filter: grayscale(1); } .gcard .thumb .ph.retired { color: #9aa7bd; }
.gcard .thumb .ph .num { font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; }
.gcard .gfoot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; }
button.copybtn { display: inline-flex; align-items: center; font: inherit; font-weight: 600; background: #fff; color: var(--navy); border: 1px solid var(--sand); padding: 3px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; }
button.copybtn:hover { border-color: var(--navy); background: var(--cream); }
.gcard.minicard .gfoot button.copybtn { padding: 2px 8px; font-size: 11.5px; }
.gcard .gfoot a.openbtn { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; text-decoration: none; background: #fff; color: var(--navy); border: 1px solid var(--sand); padding: 3px 10px; border-radius: 6px; font-size: 12px; }
.gcard .gfoot a.openbtn:hover { border-color: var(--navy); background: var(--cream); }
.gcard .gfoot a.openbtn.muted { background: none; color: var(--muted); padding: 0; }
.gcard .thumb.clickable { cursor: pointer; }
.gcard.show .thumb.clickable:hover::after { content: "Show ↗"; }
.gcard .thumb.clickable:hover::after { content: "Preview ↗"; position: absolute; right: 8px; top: 8px; background: #000c; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.bubble { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 1px 8px; border-radius: 10px; background: #e8f5ec; color: #1c6b3c; white-space: nowrap; }
.bubble.warn { background: #fdf6ea; color: #8a5a0e; } .bubble.bad { background: #fdf0f1; color: var(--bad); } .bubble.off { background: #eee; color: var(--muted); }
.bubble .dot { width: 7px; height: 7px; }
.gfoot .spacer { flex: 1; }

/* ---- catalog ---- */
.catalog { border: 1px solid var(--sand); border-radius: 8px; max-height: 70vh; overflow-y: auto; }
.catalog .crow { border-bottom: 1px solid var(--sand); }
.catalog .crow:last-child { border-bottom: 0; }
.catalog .crow > .row { cursor: pointer; }
.catalog .crow > .row:hover { background: var(--cream); }
.catalog .crow.open > .row { background: #fbf8ef; }
.catalog .cbody { padding: 0 0 6px; background: #fcfbf8; border-top: 1px dashed var(--sand); }
.catalog .cbody .raceband { background: var(--navy); }
.catalog .nums { font-variant-numeric: tabular-nums; margin-right: 6px; }
.catalog .btns { align-items: center; }
button.mini { padding: 2px 8px; font-size: 11.5px; }
button.mini.on, a.mini.on { background: #fbf8ef; border-color: var(--gold); }
a.mini { display: inline-block; padding: 2px 8px; font-size: 11.5px; border: 1px solid var(--sand); border-radius: 6px; text-decoration: none; color: var(--ink); }
.gcard.inuse { outline: 2px solid var(--gold); outline-offset: -1px; }
.pform { display: grid; gap: 6px; padding: 8px 10px 10px; border-top: 1px solid var(--sand); background: #fcfbf8; font-size: 12px; }
.pform label { display: grid; gap: 3px; color: var(--muted); }
.pform input, .pform select { font-size: 12.5px; padding: 4px 7px; width: 100%; }

/* ---- quick tooltip ---- */
.qtip { position: fixed; z-index: 50; max-width: 360px; background: #0e1a33; color: #eef2f9; font-size: 12.5px; line-height: 1.4; padding: 7px 10px; border-radius: 6px; box-shadow: 0 6px 20px #0004; white-space: pre-line; pointer-events: none; }

/* ---- dialog ---- */
dialog { border: 0; border-radius: 10px; padding: 0; max-width: 560px; width: calc(100% - 32px); box-shadow: 0 20px 60px #0004; }
dialog::backdrop { background: #071222aa; }
.dlgform { padding: 18px 22px; }
.dlgform h2 { font-family: var(--serif); font-weight: 400; font-size: 20px; color: var(--navy); margin: 0 0 10px; }
.dlgform ul { margin: 8px 0; padding-left: 20px; font-size: 14px; }
.dlgform .warnline { background: #fdf6ea; border-left: 4px solid var(--warn); padding: 8px 12px; border-radius: 6px; margin: 10px 0; font-size: 13.5px; }
.dlgform .warnline.bad { background: #fdf0f1; border-left-color: var(--bad); }
.dlgactions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

/* ---- phones: every sticky bar is one short line; the section nav scrolls sideways; chips that matter least are hidden ---- */
@media (max-width: 700px) {
  .brandrow { flex-wrap: wrap; gap: 6px 10px; padding: 6px 12px; }
  .brandrow b { font-size: 15px; } .subbrand { font-size: 13px; }
  .sections { order: 10; flex-basis: 100%; margin: 2px -12px 0; padding: 0 12px; gap: 0; overflow-x: auto; flex-wrap: nowrap; white-space: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sections::-webkit-scrollbar { display: none; }
  .sections a { padding: 3px 8px; font-size: 12.5px; flex: none; }
  .top .link { padding: 2px 7px; font-size: 11.5px; }
  .statusbar { flex-wrap: nowrap; gap: 12px; padding: 4px 12px; font-size: 12px; overflow: hidden; }
  .statusbar #st-asof, .statusbar #st-api, .statusbar #st-air { display: none; }
  .pollstrip { padding: 3px 10px; font-size: 12px; }
  .pollstrip button { padding: 2px 7px; font-size: 11.5px; }
  .pollstrip { gap: 8px; }
  .pollstrip .note, .pollstrip #pollfresh, .pollstrip .seg .lbl { display: none; }
  .pollstrip .pl-actions { gap: 4px; }
  .testbanner { font-size: 11px; padding: 3px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .testbanner .wide { display: none; }
  .howbox { font-size: 13px; padding: 8px 12px; }
    main > section.card { margin: 22px 0; padding: 10px 12px 14px; }
  .cardhead { margin: -10px -12px 14px; padding: 12px 12px 10px; }
  .cardhead h2 { font-size: 19px; }
  /* Nothing may push past the right edge: two-column layouts stack, list rows put their buttons on a second line. */
  .cols { grid-template-columns: 1fr; gap: 14px; }
  .catalog .crow > .row { grid-template-columns: minmax(0, 1fr); }
  .catalog .crow > .row .btns { justify-content: flex-end; flex-wrap: wrap; }
  .catalog .nums { margin-right: auto; }
  .row .btns button { padding: 3px 7px; }
  .raceband { gap: 8px; padding: 7px 10px; } .raceband .lab { font-size: 15px; } .raceband .ttl { font-size: 14px; }
  .filters { gap: 5px; }
  .racegrid, .chartsgrid, .persistgrid { grid-template-columns: 1fr; }
    body { overflow-x: hidden; }
}

.builderhead { margin-top: 40px; }

/* ---------- Live Screens ---------- */
.screenblock { margin: 10px 0 36px; }
.screenhead { margin-top: 12px; }
.screenrow { display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); gap: 20px; align-items: start; }
.screen { border-radius: 8px; overflow: hidden; background: #000; }
.screen.draft { border: 3px solid #d98a2b; box-shadow: 0 0 0 4px #fdf1dd; }
.screen.onair { border: 3px solid #1f9d55; box-shadow: 0 0 0 4px #e3f4ea; }
.screen .frame { position: relative; width: 100%; aspect-ratio: 1920 / 1080; overflow: hidden; background: #000; }
.screen .frame.clickable { cursor: pointer; }
.screen .frame.clickable:hover::after { content: "Show ↗"; position: absolute; right: 8px; bottom: 8px; background: #000c; color: #fff; font-size: 11px; padding: 2px 8px; border-radius: 4px; }
.screen .frame::before { position: absolute; left: 8px; top: 8px; z-index: 2; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; padding: 2px 8px; border-radius: 4px; color: #fff; pointer-events: none; }
.screen.draft .frame::before { content: "DRAFT · NOT PUBLISHED"; background: #d98a2b; color: #1a1200; }
.screen.onair .frame::before { content: "PUBLISHED"; background: #1f9d55 radial-gradient(circle at 10px 50%, #d9ffe6 3.5px, transparent 4.2px) no-repeat; padding-left: 20px; }
.screen iframe { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; border: 0; transform-origin: 0 0; pointer-events: none; }
.screen .gfoot { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: 12px; }
.screen.draft .gfoot { background: #fdf6ea; } .screen.onair .gfoot { background: #ecf7f0; }
.screen .gfoot .spacer { flex: 1; }
.screen .gfoot a.openbtn { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; text-decoration: none; background: #fff; color: var(--navy); border: 1px solid var(--sand); padding: 3px 10px; border-radius: 6px; }
.screen .gfoot a.openbtn:hover { border-color: var(--navy); background: var(--cream); }
.screen .sform { display: grid; gap: 10px; padding: 12px 12px 14px; background: #fff; font-size: 12.5px; }
.screen .sform label { display: grid; gap: 4px; color: var(--muted); }
.screen .sform select, .screen .sform input { width: 100%; max-width: 100%; }
.screen.onair .tickerurl { margin: 8px 12px 4px; } .screen.onair .liveparams { margin: 4px 12px 6px; } .screen.onair p.muted { margin: 4px 12px 12px; color: var(--muted); }
.screen.onair { background: #fff; }
.screenmid { display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 18%; color: var(--navy); }
.screenmid .arrow { color: #4a9a6a; }   /* publish: green, toward the published panel */
.screenmid button { width: 100%; justify-content: center; font-size: 12px; padding: 5px 8px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.screenmid button.publish { background: #4a9a6a; color: #fff; border-color: #4a9a6a; } .screenmid button.publish:disabled { background: #fff; border-color: #4a9a6a; color: var(--muted); opacity: .7; }
.screenmid button.pull { background: #d98a2b; color: #1a1200; border-color: #d98a2b; } .screenmid button.pull:disabled { background: #fff; border-color: #d98a2b; color: var(--muted); opacity: .7; }
.screenmid .pubstate { font-size: 11.5px; text-align: center; }
/* Stacked (narrow): published on top, then the strip, then the draft. The arrows stay together in the middle, publish pointing up and pull pointing down; Publish on the left, Pull on the right. */
@media (max-width: 900px) {
  .screenrow { grid-template-columns: 1fr; }
  .screen.onair { order: 1; } .screenmid { order: 2; } .screen.draft { order: 3; }
  .screenmid { display: grid; grid-template-columns: 1fr auto auto 1fr; grid-template-areas: "pub down up pull" "why down up state"; align-items: center; gap: 6px 12px; padding: 4px 0; }
  .screenmid button.publish { grid-area: pub; justify-self: end; width: auto; }
  .screenmid .whynot { grid-area: why; justify-self: end; margin: 0; text-align: right; }
  .screenmid .arrow { grid-area: down; transform: rotate(-90deg); margin: 0; }
  .screenmid .arrow.back { grid-area: up; }
  .screenmid button.pull { grid-area: pull; justify-self: start; width: auto; }
  .screenmid .pubstate { grid-area: state; justify-self: start; text-align: left; }
}

/* Producer-only controls for a sign-in that is not the producer: one look everywhere. */
/* An unauthorized producer control is simply a disabled button: grey, dimmed, no colour. */
button.noauth, button.noauth:disabled { background: #f0f0f0; border-color: #d4d4d4; color: #777; opacity: .6; cursor: default; }
.pubrow button.publish.noauth:disabled, .screenmid button.publish.noauth:disabled { background: #f0f0f0; border-color: #4a9a6a; color: #777; opacity: .6; cursor: default; }   /* a greyed Publish keeps its green edge */
/* Results: the selected side keeps its colour even when the switch is locked; the other side is plain. */
.seg button.on { font-weight: 700; } .seg button:disabled { opacity: 1; cursor: default; } .seg button:disabled:not(.on) { color: var(--muted); background: #f6f6f6; }
.seg .lbl .lock { margin-right: 4px; vertical-align: -1px; }
.screenmid .arrow.back { margin-top: 14px; color: #d98a2b; }   /* pull: orange, toward the draft */

.screenrow.ticker .screen.draft { background: #fff; }
.screen.draft .tickerurl { margin: 8px 12px 4px; } .screen.draft p.inner { margin: 4px 12px 12px; color: var(--muted); }
.builderhead { margin-top: 28px; }

/* ---------- display settings ---------- */
.card.display .disprow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 13px; color: var(--muted); }
.card.display .disprow .spacer { flex: 1; }
.card.display .warnline { background: #fdf6ea; border-left: 4px solid var(--warn); padding: 8px 12px; border-radius: 6px; margin: 12px 0 6px; font-size: 13px; color: var(--ink); }
.cardhead .secdisp { margin-left: auto; display: inline-flex; gap: 14px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.cardhead .secdisp select, .pagebg select { font-size: 12px; padding: 2px 6px; }
.pagebg { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
@media (max-width: 700px) { .cardhead .secdisp { margin-left: 0; flex-basis: 100%; } }
/* ---------- footer ---------- */
.permtable { width: 100%; border-collapse: collapse; font-size: 13px; margin: 6px 0 14px; } .permtable th, .permtable td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid #e5e7eb; } .permtable th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #667); }
.permtable .role { font-weight: 600; white-space: nowrap; } .permtable .you { color: var(--muted, #667); font-weight: 400; }
.permroles { margin: 0; padding-left: 18px; font-size: 13px; } .permroles li { margin: 4px 0; }

.screen .frame .lockmark { position: absolute; right: 8px; top: 8px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: #000b; color: #fff; cursor: help; }
.screen .frame .lockmark .lock { margin: 0; }
.tform h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 16px 0 6px; font-weight: 700; }
.tform .callhl { margin: 0 0 4px; }
.tform .list .row { background: #fff; }

/* Dropdowns: our own chevron with room on the right, so the arrow is not jammed against the border. */
select { appearance: none; -webkit-appearance: none; padding-right: 26px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 12px; }

.tform .callhl { display: flex; align-items: center; gap: 22px; justify-content: flex-start; text-align: left; margin: 0 0 6px; font-size: 13px; }
.tform .callhl .toggle { display: inline-flex; align-items: center; gap: 6px; }
.tform .callhl .pagebg { font-size: 13px; color: var(--muted); margin: 0; }

.tform .tgrid { display: grid; grid-template-columns: 160px 200px; gap: 8px 12px; align-items: center; margin: 0 0 8px; font-size: 13px; color: var(--ink); }
.tform .tgrid select { width: 100%; }

/* An empty list draws nothing (not a collapsed bordered box), and the last row does not double the list border. */
.list:empty { display: none; }
.list .row:last-child { border-bottom: 0; }

.tform .hint { margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* A transparent background shows as a checkerboard behind the preview, the way image editors do. */
.gcard .thumb.checker, .screen .frame.checker { background-color: #d9d9d9; background-image: repeating-conic-gradient(#bdbdbd 0 25%, transparent 0 50%); background-size: 24px 24px; }

/* Section subtext sits on its own line under the title; the title line keeps the dropdowns on the right. */

/* Live Screen numbering: the same bubble as a featured race's position, on the section's title line. */
.screenhead { display: flex; align-items: center; gap: 10px; }
.screenhead .pos.big { font-family: var(--mono); font-size: 16px; font-weight: 700; color: #fff; background: var(--navy); border-radius: 50%; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; flex: none; }

/* A Data Stream switch waiting for the poller: the target side pulses amber. */
.seg button.pending, .seg button.pending:disabled { background: #fdf3e3; color: #7a5b0a; border-color: var(--warn); animation: pend 1.2s ease-in-out infinite; }
@keyframes pend { 50% { opacity: .55; } }

.seg button .wrench { vertical-align: -1px; margin-right: 1px; }

/* A locked Data Stream switch is greyed as a whole, selection mark included. */
.seg.locked { opacity: .55; border-color: #d4d4d4; } .seg.locked button, .seg.locked button.on, .seg.locked button.on[data-rt="t"], .seg.locked button.on[data-rt="l"] { background: #f0f0f0; color: #777; }

.screenmid .arrow.off { color: #c9c9c9; }   /* nothing to publish, or not allowed: the arrow fades with the button */

.statusbar button.speeds { font: inherit; font-size: 12px; color: #8a98b5; background: none; border: 1px solid #2a3a5c; border-radius: 10px; padding: 1px 9px; cursor: pointer; line-height: 1.4; }
.statusbar button.speeds:hover, .statusbar button.speeds.open { color: #eef2f9; border-color: #4a5f8a; }

/* Text on the navy section bands: light enough to read; these come last so nothing muted wins. */
.cardhead, .cardhead .secdisp, .cardhead .secdisp label { color: #e8edf7; }
.cardhead .secdisp select { color: var(--ink); }

/* Links in a band subtext: gold on navy. */
.cardhead a { color: var(--gold); text-decoration: underline; } .cardhead a:hover { color: #fff; }

/* Account menu, top right: a standard nav dropdown */
header.top, .brandrow { overflow: visible; }
.account .acct { display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; font-weight: 600; color: #e8edf7; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 10px; cursor: pointer; white-space: nowrap; }
.account .acct:hover, .account.open .acct { background: #16305e; border-color: #2a3a5c; color: #fff; }
.account .acct .caret { transition: transform .15s; } .account.open .acct .caret { transform: rotate(180deg); }
.account .acctmenu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 280px; max-width: 340px; width: max-content; margin: 0; padding: 6px 0; list-style: none; background: #fff; color: var(--ink); border: 1px solid var(--sand); border-radius: 8px; box-shadow: 0 10px 28px #0004; text-align: left; }
.account .acctmenu::before { content: ""; position: absolute; right: 18px; top: -7px; width: 12px; height: 12px; background: #fff; border-left: 1px solid var(--sand); border-top: 1px solid var(--sand); transform: rotate(45deg); }
.account .acctmenu .hdr { display: grid; gap: 3px; padding: 8px 14px 10px; border-bottom: 1px solid var(--sand); font-size: 12.5px; line-height: 1.4; }
.account .acctmenu .hdr b { color: var(--navy); font-size: 13px; }
.account .acctmenu button[role="menuitem"] { display: block; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--ink); background: none; border: 0; border-radius: 0; padding: 8px 14px; cursor: pointer; }
.account .acctmenu button[role="menuitem"]:hover, .account .acctmenu button[role="menuitem"]:focus { background: var(--cream); color: var(--navy); outline: none; }
.account .acctmenu li:last-child button { color: #8b1a1a; }
.account .acctmenu #logout, .account .acctmenu .link { margin: 0; padding: 8px 14px; border: 0; background: none; width: 100%; text-align: left; font-size: 13px; }

/* The dropdown hangs from the account button itself, not from the sticky header. */
.account { position: relative; margin-left: auto; flex: none; }

/* ---------- footer: a plain list of links, the credit on the right ---------- */
footer.built { margin: 48px 0 0; padding: 20px 24px; background: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
footer.built .footlinks { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px 22px; flex-wrap: wrap; } footer.built .footlinks li { display: flex; align-items: center; min-height: 20px; }
footer.built .footlinks a, footer.built .permslink { display: inline-flex; align-items: center; gap: 7px; color: #c7cfdf; text-decoration: none; font: inherit; font-size: 13px; background: none; border: 0; padding: 0; cursor: pointer; }
footer.built .footlinks a:hover, footer.built .permslink:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
footer.built .by { color: var(--gold); font-family: var(--serif); font-size: 15px; letter-spacing: .02em; text-decoration: none; white-space: nowrap; } footer.built .by:hover { text-decoration: underline; text-underline-offset: 3px; }

/* the section's description sits under the navy head, dark on the card */
.secsub { margin: -6px 0 18px; font-size: 13px; line-height: 1.5; color: #4b5563; max-width: 110ch; } .secsub a { color: var(--navy); }
/* Chart Display Settings: a small bar under the help box, not a section */
main > section.card.display { margin: 10px 0 28px; padding: 8px 14px; border-width: 2px; border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.display .dtitle { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); white-space: nowrap; }
.display .disprow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0; flex: 1; min-width: 0; }
.display #thumbbudget { margin: 0 4px 0 0; white-space: nowrap; }
.display .disprow label { display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.display .disprow select, .display .disprow button { vertical-align: middle; }
/* the bar's two buttons carry the dropdowns' border weight */
.display .defaultsbtn { border: 2px solid #b9b2a3; padding: 5px 11px; } .display .defaultsbtn:hover { border-color: var(--navy); }