:root {
  color-scheme: light;
  --bg: #f4f4f2;
  --surface-1: #fcfcfb;
  --surface-2: #efeeeb;
  --border: #dddcd7;
  --text-primary: #0b0b0b;
  --text-secondary: #52514e;
  --text-muted: #6f6e69;
  --track: #e6e5e1;
  --neutral-mark: #b9b8b2;
  --good: #0ca30c;
  --bad: #d03b3b;
  /* Brand values are set from settings.js at load. */
  --brand: #006355;
  --brand-text: #ffffff;
  --accent: #ec314f;
  --team-base: #d42e4c;
  --opp-base: #7d8a97;
  --team-1: var(--team-base);
  --team-2: var(--opp-base);
  --focus: var(--accent);
  --on-team-1: var(--on-team-1-l, #fff);
  --on-team-2: var(--on-team-2-l, #fff);
  --heading-font: "Archivo Black", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121211;
    --surface-1: #1a1a19;
    --surface-2: #242422;
    --border: #33332f;
    --text-primary: #f0efec;
    --text-secondary: #c3c2b7;
    --text-muted: #9a9991;
    --track: #2c2c29;
    --neutral-mark: #5b5a55;
    --team-1: color-mix(in oklab, var(--team-base) 82%, white);
    --team-2: color-mix(in oklab, var(--opp-base) 80%, white);
    --on-team-1: var(--on-team-1-d, #fff);
    --on-team-2: var(--on-team-2-d, #fff);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121211;
  --surface-1: #1a1a19;
  --surface-2: #242422;
  --border: #33332f;
  --text-primary: #f0efec;
  --text-secondary: #c3c2b7;
  --text-muted: #9a9991;
  --track: #2c2c29;
  --neutral-mark: #5b5a55;
  --team-1: color-mix(in oklab, var(--team-base) 82%, white);
  --team-2: color-mix(in oklab, var(--opp-base) 80%, white);
  --on-team-1: var(--on-team-1-d, #fff);
  --on-team-2: var(--on-team-2-d, #fff);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--page-bg, var(--bg)); color: var(--text-primary);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
/* A background image (Customise) behind the cards, under a veil of the page colour so they stay readable. */
body.has-bg-image { background: linear-gradient(color-mix(in srgb, var(--page-bg, var(--bg)) 82%, transparent), color-mix(in srgb, var(--page-bg, var(--bg)) 82%, transparent)), var(--page-image) center / cover fixed; }
button, select, input { font: inherit; color: inherit; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }

/* Brand header */
.brand { background: var(--brand); color: var(--brand-text); }
.brand.has-image { background: linear-gradient(rgb(0 0 0 / .4), rgb(0 0 0 / .4)), var(--header-image) center / cover no-repeat, var(--brand); }
.stripe { display: flex; height: 6px; }
.stripe i { flex: 1; }
/* Header: title left, game picker in the true centre (equal columns either side), settings right.
   layoutHeader() (core.js) moves the settings below the title when they don't fit beside the picker,
   and stacks everything on narrow screens. */
.brand-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 560px) minmax(0, 1fr);
  grid-template-areas: "title pick actions"; align-items: center; gap: 10px 16px; padding: 12px 20px; }
.brand-inner.stack-actions { grid-template-areas: "title pick ." "actions actions actions"; }
.brand-inner.narrow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "pick" "actions"; }
.brand-title { grid-area: title; display: flex; align-items: center; gap: 14px; min-width: 0; }
.brand-text { min-width: 0; }
.brand h1, .brand .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-actions { grid-area: actions; display: flex; gap: 8px; justify-content: flex-end; align-items: center; min-width: 0; }
.brand-inner.stack-actions .brand-actions, .brand-inner.narrow .brand-actions { justify-content: flex-start; flex-wrap: wrap; }
.brand img { height: 52px; width: auto; display: block; }
.brand h1 { margin: 0; font-family: var(--heading-font); font-weight: 400; font-size: 26px; letter-spacing: .02em; text-transform: uppercase; line-height: 1.05; }
.brand .sub { font-size: 13px; opacity: .85; }
.brand .spacer { flex: 1; }
.brand select, .brand .ghost {
  background: color-mix(in srgb, var(--brand-text) 14%, transparent); color: var(--brand-text);
  border: 1px solid color-mix(in srgb, var(--brand-text) 35%, transparent); border-radius: 8px; padding: 6px 10px; max-width: 100%;
}
.brand select option { color: #111; }
/* The game picker sits in the middle of the header, larger than the settings controls beside it. */
.brand .game-pick .games-btn { width: 100%; font-size: 16px; font-weight: 600; padding: 10px 14px; border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--brand-text) 20%, transparent); color: var(--brand-text); border: 1px solid color-mix(in srgb, var(--brand-text) 35%, transparent); }
#pick-dlg { width: min(640px, calc(100vw - 32px)); }
.pick-links { font-weight: 400; margin-left: 8px; }
.pick-games { display: grid; gap: 2px; max-height: min(46vh, 420px); overflow-y: auto; border: 1px solid var(--border); border-radius: 10px; padding: 4px; }
.pick-game { display: flex; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.pick-game:hover { background: var(--surface-2); }
.pick-game span { display: grid; }
.pick-game small { color: var(--text-muted); font-size: 12px; }
.game-pick { grid-area: pick; display: flex; justify-content: center; min-width: 0; }
.brand .game-pick select { width: 100%; font-size: 16px; font-weight: 600; padding: 10px 14px; border-radius: 10px;
  background-color: color-mix(in srgb, var(--brand-text) 20%, transparent); }
.brand .ghost { cursor: pointer; }
.tabs-row { display: flex; align-items: center; gap: 8px; padding-right: 20px; }
.tabs-row .tabs { flex: 1; min-width: 0; }
.tab-actions { display: flex; gap: 6px; flex: none; }
.brand .tab-actions .ghost { font-size: 13px; padding: 4px 10px; }
.tabs { display: flex; gap: 4px; padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.tabs button { white-space: nowrap; }
.tabs button {
  border: 0; background: none; color: var(--brand-text); opacity: .75; cursor: pointer; padding: 10px 14px 9px;
  font-family: var(--heading-font); text-transform: uppercase; letter-spacing: .04em; font-size: 14px;
  border-bottom: 4px solid transparent;
}
.tabs button[aria-selected="true"] { opacity: 1; border-bottom-color: var(--accent); }

.filters {
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  padding: 10px 20px; border-bottom: 1px solid var(--border); background: var(--surface-1);
  position: sticky; top: 0; z-index: 5;
}
.filter { display: flex; align-items: center; gap: 6px; max-width: 100%; }
.filter > span { color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: 8px; padding: 2px; max-width: 100%; overflow-x: auto; }
.seg button {
  border: 0; background: none; padding: 5px 10px; border-radius: 6px; cursor: pointer;
  color: var(--text-secondary); white-space: nowrap;
}
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--surface-1); color: var(--text-primary); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }
select.plain { padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); max-width: 100%; }

.layout { max-width: 2600px; margin: 0 auto; padding: 16px 20px 40px; }
.content { display: grid; gap: 16px; min-width: 0; }
.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.card h2 { font-size: 13px; margin: 0 0 2px; font-family: var(--heading-font); font-weight: 400; text-transform: uppercase; letter-spacing: .03em; }
.card .sub { color: var(--text-muted); font-size: 12px; margin: 0 0 12px; }
.card-head { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--text-secondary); margin-bottom: 10px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.hint, .empty { color: var(--text-muted); font-size: 12px; }
.empty { padding: 8px 0; font-size: 13px; }

/* KPI tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tile { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.tile .label { font-size: 12px; color: var(--text-secondary); margin-bottom: 6px; }
.tile .vals { display: grid; gap: 4px; }
.tval {
  display: flex; align-items: baseline; gap: 6px; border: 0; background: none; padding: 2px 4px; margin: 0 -4px;
  border-radius: 6px; cursor: pointer; text-align: left; width: calc(100% + 8px); flex-wrap: wrap;
}
.tval:hover { background: var(--surface-1); }
.tval .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; align-self: center; }
.tval b { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; }
.tval small { color: var(--text-muted); font-size: 12px; }
.tval[disabled] { cursor: default; }
.tval[disabled]:hover { background: none; }
.cmp { font-size: 12px; display: flex; gap: 4px; align-items: center; color: var(--text-secondary); width: 100%; }
.cmp .up { color: var(--good); font-weight: 700; }
.cmp .down { color: var(--bad); font-weight: 700; }

/* stacked outcome bars */
.bars { display: grid; gap: 10px; }
.bar-row { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; align-items: center; }
.bar-row .who { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; min-width: 0; }
.bar-row .who .sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.stack { display: flex; gap: 2px; height: 28px; }
.stack button {
  border: 0; padding: 0 6px; cursor: pointer; min-width: 0; overflow: hidden; white-space: nowrap;
  font-size: 12px; font-weight: 600; text-align: left; color: #fff; border-radius: 4px;
}
.stack button.light { color: var(--text-primary); }
.stack button:hover { filter: brightness(1.08); }
.group + .group { margin-top: 16px; }
.team-name { text-align: left; padding: 2px 0; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compare-wrap { overflow-x: auto; }
table.compare { border-collapse: separate; border-spacing: 2px; width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
table.compare th { text-align: left; font-weight: 600; color: var(--text-secondary); padding: 4px 6px; white-space: nowrap; }
table.compare thead th { font-weight: 500; }
table.compare td { padding: 0; text-align: center; color: var(--text-secondary); }
table.compare td button { width: 100%; border: 0; border-radius: 4px; padding: 6px 8px; cursor: pointer; color: var(--text-primary); font: inherit; }
table.compare td button[disabled] { cursor: default; }
table.compare td button { background: var(--surface-2); }
table.compare th.sortable button { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
table.compare th.sortable[aria-sort="descending"], table.compare th.sortable[aria-sort="ascending"] { color: var(--text-primary); }
table.compare th[draggable="true"] { cursor: grab; }
.compare-legend { margin: 0 0 8px; }
/* Dragging to reorder (blocks, table columns, measure lists). */
.drag-handle { cursor: grab; padding: 4px 6px; color: var(--text-muted); font-size: 16px; line-height: 1; user-select: none; }
.dragging { opacity: .45; }
.measure-order { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.measure-order li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; background: var(--surface-2); }
.measure-order li[draggable="true"] { cursor: grab; }
.measure-order .mo-name { flex: 1; min-width: 0; font-size: 13px; color: var(--text-primary); }
.drop-target { outline: 2px dashed var(--focus); outline-offset: 2px; }
table.compare tr.us th { color: var(--text-primary); }
.all-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.group h3 { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 0 8px; }

/* field strip */
.field { display: grid; gap: 10px; }
.pitch { display: flex; gap: 2px; height: 46px; }
.pitch button {
  border: 0; cursor: pointer; border-radius: 4px; font-size: 12px; font-weight: 600;
  display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 0; overflow: hidden; line-height: 1.25;
}
.pitch button small { font-weight: 500; opacity: .9; }
.pitch-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); }

/* grouped zone columns */
.zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.zone h4 { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin: 0 0 6px; text-align: center; }
.zone .cols { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 120px; border-bottom: 1px solid var(--border); }
.zone .col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; width: 38px; }
.zone .col span { font-size: 12px; font-variant-numeric: tabular-nums; margin-bottom: 3px; white-space: nowrap; }
.zone .col button { width: 100%; border: 0; border-radius: 4px 4px 0 0; cursor: pointer; min-height: 2px; padding: 0; }
.avgline { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--text-muted); pointer-events: none; }

/* match flow */
.flow-row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; align-items: center; height: 54px; }
.flow-row + .flow-row .flow-track { border-top: 1px solid var(--track); }
.flow-row .who { font-size: 12px; color: var(--text-secondary); }
.flow-track { position: relative; height: 100%; border-bottom: 1px solid var(--track); }
.flow-track button {
  position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  border: 2px solid var(--surface-1); cursor: pointer; padding: 0;
}
.flow-track button.diamond { border-radius: 2px; transform: rotate(45deg); width: 12px; height: 12px; margin: -6px 0 0 -6px; }
.flow-track button.ring { background: var(--surface-1) !important; border-width: 2.5px; }
.flow-axis { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
.flow-axis div { position: relative; height: 18px; font-size: 11px; color: var(--text-muted); }
.flow-axis span { position: absolute; transform: translateX(-50%); }
.flow-ht { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); }

/* ranking */
.rank { display: grid; gap: 3px; max-height: 520px; overflow: auto; }
.rank-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 8px; align-items: center; }
.rank-row .name { border: 0; background: none; text-align: right; padding: 2px 0; cursor: pointer; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .name:hover { color: var(--text-primary); text-decoration: underline; }
.rank-row .bar { display: flex; align-items: center; gap: 6px; height: 18px; }
.rank-row .bar button { height: 100%; border: 0; border-radius: 0 4px 4px 0; cursor: pointer; padding: 0; min-width: 2px; }
.rank-row .bar span { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-primary); }

/* svg charts */
svg.chart { width: 100%; height: auto; display: block; overflow: visible; }
svg.chart text { fill: var(--text-muted); font-size: 12px; }
svg.chart .grid { stroke: var(--track); }
svg.chart .axis { stroke: var(--border); }
svg.chart .hl-band { fill: color-mix(in srgb, var(--accent) 14%, transparent); }
svg.chart text.hl-label { fill: var(--text-primary); font-weight: 700; }
svg.chart .avg { stroke: var(--text-muted); stroke-dasharray: 4 4; }
svg.chart .hit { cursor: pointer; }

/* player header */
.player-head { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.player-head select { font-size: 15px; font-weight: 600; }
.player-head .mins { font-size: 13px; color: var(--text-secondary); }
.player-head .mins b { font-size: 20px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.btn {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; padding: 5px 10px; cursor: pointer;
}
.btn.primary { background: var(--brand); color: var(--brand-text); border-color: var(--brand); }
.btn:disabled { opacity: .45; cursor: default; }

/* video pop-up */
#video-dlg { width: min(1900px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); overflow: hidden; }
.vwrap { display: grid; grid-template-columns: minmax(0, 1fr) clamp(300px, 22vw, 400px); gap: 16px; padding: 16px; max-height: calc(100vh - 34px); }
.vmain { min-width: 0; overflow: auto; }
.vhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.vhead h2 { margin: 0; font-family: var(--heading-font); font-weight: 400; text-transform: uppercase; font-size: 16px; letter-spacing: .03em; }
video { width: min(100%, calc((100vh - 230px) * 16 / 9)); margin: 0 auto; aspect-ratio: 16 / 9; background: #000; border-radius: 8px; display: block; }
.vside { display: flex; flex-direction: column; gap: 10px; min-height: 0; max-height: calc(100vh - 66px); }
.cf { flex: none; max-height: 45%; overflow: auto; display: grid; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.cf-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .04em; }
.cf-head button { border: 0; background: none; color: var(--text-secondary); text-decoration: underline; cursor: pointer; font-size: 12px; padding: 0; text-transform: none; letter-spacing: 0; }
.cf-group .cf-name { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chips button {
  border: 1px solid var(--border); background: var(--surface-2); border-radius: 999px; padding: 3px 9px; cursor: pointer;
  font-size: 12px; color: var(--text-primary); white-space: nowrap;
}
.chips button small { color: var(--text-muted); font-variant-numeric: tabular-nums; margin-left: 2px; }
.chips button[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--brand-text); }
.chips button[aria-pressed="true"] small { color: inherit; opacity: .8; }
.chips button:disabled { opacity: .4; cursor: default; }
.vctrl { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; }
.vctrl .btns { display: flex; gap: 6px; }
.now { font-size: 13px; margin-top: 8px; min-height: 20px; }
.now .meta { color: var(--text-muted); font-size: 12px; }
.note { font-size: 12px; color: var(--text-muted); margin-top: 4px; min-height: 16px; }
.clip-note {
  margin-top: 8px; padding: 8px 10px; border-radius: 8px; font-size: 13px; line-height: 1.4;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); box-shadow: inset 3px 0 0 var(--accent);
}
.note-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-2)); color: var(--text-primary); vertical-align: 1px;
}
.playlist { flex: 1; min-height: 120px; overflow: auto; }
.clip-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; gap: 2px; }
.clip-row .pick { margin: 0 0 0 4px; width: 16px; height: 16px; accent-color: var(--brand); cursor: pointer; }
.in-tray { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 1px 5px; border-radius: 4px;
  background: color-mix(in srgb, var(--brand) 22%, var(--surface-2)); vertical-align: 1px; }
.pick-bar { position: sticky; top: 0; z-index: 1; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 0 0 6px; padding: 8px;
  border-radius: 8px; background: var(--surface-2); }
.pick-bar label { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; }
.pick-bar .count { font-size: 12px; color: var(--text-secondary); flex: 1 1 100%; }
.pick-bar .btn { font-size: 12px; padding: 3px 8px; }
.keys-hint { margin: 4px 0 0; }
.tray-tabs { align-self: start; }
.tray-tabs button { font-weight: 600; }
.game-head { margin: 6px 2px 0; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.game-head small { color: var(--text-muted); font-weight: 400; }
.pl-list { display: grid; gap: 8px; max-height: 55vh; overflow: auto; }
.pl { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; }
.pl summary { cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pl summary .name { font-weight: 600; }
.pl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.pl .imports { max-height: 30vh; }
.fields label.inline-check { display: flex; gap: 6px; align-items: center; color: var(--text-primary); }
#tray-dlg { width: min(720px, calc(100vw - 32px)); }
#tray-dlg h3 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.tray-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tray-actions .spacer { flex: 1; }
#tray-list { max-height: 40vh; }
.playlist h3 { font-size: 13px; margin: 0 4px 6px; display: flex; justify-content: space-between; gap: 8px; }
.playlist h3 small { color: var(--text-muted); font-weight: 400; }
.clip {
  display: grid; grid-template-columns: 22px 52px minmax(0, 1fr); gap: 6px; width: 100%; text-align: left; align-items: baseline;
  border: 0; background: none; padding: 6px 4px; border-radius: 6px; cursor: pointer;
}
.clip:hover { background: var(--surface-2); }
.clip.active { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--accent); }
.clip .n { color: var(--text-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.clip .t { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--text-secondary); }
.clip .d { font-size: 12px; color: var(--text-muted); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#tip {
  position: fixed; pointer-events: none; z-index: 30; background: var(--text-primary); color: var(--surface-1);
  font-size: 12px; padding: 5px 8px; border-radius: 6px; max-width: 260px; display: none;
}

/* customise panel */
dialog { border: 1px solid var(--border); border-radius: 14px; padding: 0; background: var(--surface-1); color: var(--text-primary); width: min(520px, calc(100vw - 32px)); }
dialog::backdrop { background: rgb(0 0 0 / .45); }
.dlg { padding: 18px 20px; display: grid; gap: 14px; }
.dlg h2 { margin: 0; font-family: var(--heading-font); font-weight: 400; text-transform: uppercase; font-size: 18px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fields label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.fields label.wide { grid-column: 1 / -1; }
.fields input[type="text"], .fields input[type="number"], .fields select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.fields input[type="color"] { width: 100%; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 2px; }
.logo-pick { display: flex; gap: 10px; align-items: center; }
.team-colours { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; max-height: 220px; overflow-y: auto; }
.fields .team-colours label { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--text-primary); font-size: 13px; }
.fields .team-colours input[type="color"] { width: 64px; height: 28px; flex: none; }
.stripe-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.stripe-row select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.stripe-pick { flex: 1 1 200px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; }
.bg-pick { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; }
.bg-pick input[type="color"] { width: 90px !important; }
.bg-pick .hint { flex-basis: 100%; }
#header-preview { max-width: 220px; object-fit: cover; }
.logo-pick img[src=""], .logo-pick img:not([src]) { display: none; }
.logo-pick img { height: 48px; width: auto; background: var(--brand); padding: 4px; border-radius: 6px; }
.warn { font-size: 12px; color: var(--text-primary); background: color-mix(in srgb, var(--bad) 14%, var(--surface-1)); border-radius: 8px; padding: 8px 10px; }
.dlg-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }

/* sign-in gate and members */
.gate { display: grid; place-items: start center; padding: 48px 16px; }
.gate .card { width: min(440px, 100%); display: grid; gap: 10px; padding: 22px; }
.gate h2 { margin: 0; font-family: var(--heading-font); font-weight: 400; text-transform: uppercase; font-size: 20px; }
.gate-form, .invite { display: flex; gap: 8px; flex-wrap: wrap; }
.gate-form input, .invite input, .invite select { flex: 1 1 160px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
#org-dlg { width: min(760px, calc(100vw - 32px)); }
#org-dlg h3 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.org-team { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.org-team summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; }
.org-team details[open] { flex-basis: 100%; }
label.inline { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--text-secondary); }
.imp.person .row-actions { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.imp.person input.plain { width: 150px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); }
.auth-tabs { align-self: start; }
.auth-form { display: grid; gap: 10px; }
.auth-form label { display: grid; gap: 4px; font-size: 12px; color: var(--text-secondary); }
.auth-form input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 14px; }
.auth-form .btn { justify-self: start; padding: 7px 14px; }
.invite-note { margin: 0; padding: 10px 12px; border-radius: 8px; font-size: 13px; background: color-mix(in srgb, var(--brand) 14%, var(--surface-1)); }
.new-org summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; margin-top: 6px; }
.new-org[open] summary { margin-bottom: 10px; }
.empty-state { max-width: 640px; margin: 48px auto; padding: 0 16px; text-align: center; }

/* imports */
.banner {
  display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap;
  padding: 8px 20px; background: color-mix(in srgb, var(--brand) 14%, var(--surface-1)); border-bottom: 1px solid var(--border);
}
#imports-dlg { width: min(680px, calc(100vw - 32px)); }
#imports-dlg h3 { margin: 6px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
.dlg-section { display: grid; gap: 14px; }
#games-list { max-height: 40vh; }
.imports { display: grid; gap: 6px; max-height: 60vh; overflow: auto; }
.imp { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); }
.imp .name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp .detail { grid-column: 1 / -1; font-size: 12px; color: var(--text-muted); }
.chip { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.chip.imported { background: color-mix(in srgb, var(--good) 22%, var(--surface-1)); }
.chip.importing, .chip.queued { background: color-mix(in srgb, var(--accent) 22%, var(--surface-1)); }
.chip.waiting, .chip.skipped { background: var(--surface-1); color: var(--text-secondary); }
.chip.error { background: color-mix(in srgb, var(--bad) 25%, var(--surface-1)); }
.progress { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--surface-1); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 3px; transition: width .4s; }
.imp .retry { font-size: 12px; padding: 2px 8px; }
.publish-account { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12px; color: var(--text-secondary); }
.publish-account form { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.publish-account input, .publish-account select { flex: 1 1 140px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-1); }
.publish-account a { color: inherit; }

/* dashboard editor */
.edit-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; margin-bottom: 16px;
  border: 1px dashed var(--accent); border-radius: 12px; background: color-mix(in srgb, var(--accent) 6%, var(--surface-1));
}
.edit-bar .spacer { flex: 1; }
.edit-note { flex-basis: 100%; margin: 2px 0 0; font-size: 13px; color: var(--text-primary); padding: 8px 10px; border-radius: 8px;
  background: var(--surface-1); box-shadow: inset 3px 0 0 var(--accent); }
.fields textarea { padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); resize: vertical; font: inherit; color: inherit; }
#ai-dlg { width: min(640px, calc(100vw - 32px)); }
.edit-name { font-size: 13px; color: var(--text-secondary); margin-right: 4px; }
.edit-name b { color: var(--text-primary); }
.btn-pair { display: inline-flex; gap: 2px; }
.block-tools { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; }
.block-tools .btn { font-size: 12px; padding: 2px 8px; }
.dash.editing .card { outline: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: -2px; }
#add-dlg, #dash-dlg { width: min(640px, calc(100vw - 32px)); }
#block-dlg { width: min(980px, calc(100vw - 32px)); max-height: calc(100vh - 32px); }
.block-preview { display: grid; gap: 4px; }
.preview-card { pointer-events: none; border-style: dashed; }
.preview-card .card-head select { display: none; }
.dlg .preview-card h2 { font-size: 13px; text-transform: uppercase; }
.pick-list { display: grid; gap: 6px; max-height: 62vh; overflow: auto; }
.pick-list button {
  text-align: left; display: grid; gap: 2px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface-2); cursor: pointer;
}
.pick-list button:hover { border-color: var(--accent); }
.pick-list small, .choice small, .check-list small { color: var(--text-muted); font-size: 12px; }
.pick-list details summary, .fields details summary { cursor: pointer; color: var(--text-secondary); font-size: 13px; padding: 6px 2px; }
.field-label { display: block; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; }
.field-group { display: grid; gap: 8px; }
.fields .wide { grid-column: 1 / -1; }
.choice { display: grid; gap: 6px; }
.fields .choice label { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); cursor: pointer; color: var(--text-primary); }
.choice label span { display: grid; gap: 1px; font-size: 13px; }
.choice-row, .check-list { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.fields .choice-row label, .fields .check-list label { display: inline-flex; gap: 5px; align-items: center; font-size: 13px; color: var(--text-primary); }
.choice-row .soon { color: var(--text-muted); }
.mbuild { padding: 10px; border-radius: 8px; background: var(--surface-2); margin-top: 6px; }
.mbuild select, .mbuild input[type="text"] { background: var(--surface-1) !important; }
.chip-row { font-size: 13px; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); }
button.link { border: 0; background: none; padding: 0; color: var(--text-secondary); text-decoration: underline; cursor: pointer; font-size: 12px; }

/* Wider than a tablet: half-width cards sit side by side; full-width ones span both columns. */
@media (min-width: 1100px) {
  /* Blocks packed by their own height (packBlocks sets each one's span of these 8px rows), so a tall
     block sits beside two shorter ones instead of leaving a gap. Order is kept. */
  #dash { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-rows: 8px; row-gap: 0; align-items: start; }
  .two { display: contents; }
  .span { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .two { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .vwrap { grid-template-columns: minmax(0, 1fr); overflow: auto; }
  .vside { max-height: none; }
  .playlist { max-height: 50vh; }
  video { width: 100%; }
}
@media (max-width: 600px) {
  .brand-inner, .filters { padding-left: 16px; padding-right: 16px; }
  .tabs { padding: 0 8px; }
  .brand h1 { font-size: 20px; }
  .brand img { height: 40px; }
  .layout { padding: 12px 16px 32px; }
  #video-dlg { width: 100vw; max-height: 100vh; height: 100vh; border-radius: 0; border: 0; }
  .vwrap { padding: 12px; max-height: 100vh; }
  .filters { position: static; }
  .seg button { padding: 5px 8px; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-row, .flow-axis { grid-template-columns: 64px minmax(0, 1fr); }
  .rank-row { grid-template-columns: 104px minmax(0, 1fr); }
  .fields { grid-template-columns: 1fr; }
  .tabs-row { flex-wrap: wrap; padding: 0 8px 8px; }
  .tabs-row .tabs { flex: 1 1 100%; }
  .tab-actions { flex-wrap: wrap; }
}
.gate a, .publish-account a { color: var(--text-secondary); }
.gate a:hover { color: var(--text-primary); }

/* Data mapping */
#map-dlg { width: min(860px, calc(100vw - 32px)); }
#map-dlg h3 { margin: 10px 0 2px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); }
#map-list { display: grid; gap: 2px; max-height: min(62vh, 640px); overflow-y: auto; }
.map-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(0, 2.4fr) 150px auto; gap: 10px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.map-row.open { border-bottom: none; }
.map-name small { display: block; color: var(--text-muted); font-size: 11px; }
.map-src { color: var(--text-secondary); overflow-wrap: anywhere; }
.map-src .muted { color: var(--text-muted); font-style: italic; }
.map-row .chip { justify-self: end; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-secondary); white-space: nowrap; }
.map-row .chip.set { background: color-mix(in srgb, var(--brand) 18%, var(--surface-2)); color: var(--text-primary); }
.map-row .chip.none, .map-row .chip.off { color: var(--text-muted); }
.btn.small { font-size: 12px; padding: 3px 9px; }
.map-edit { padding: 10px 12px 12px; background: var(--surface-2); border-radius: 10px; margin-bottom: 6px; }
.map-edit .check-list { max-height: 160px; overflow-y: auto; }
.map-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#map-dlg h3.map-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#map-dlg h3.map-h .btn { text-transform: none; letter-spacing: 0; }
.map-note { grid-column: 1 / -1; margin: 0; }
.edit-measures { margin: 10px 0 0; text-align: right; }
.linkish { border: none; background: none; padding: 0; color: var(--text-secondary); text-decoration: underline; cursor: pointer; font: inherit; }
@media (max-width: 640px) {
  .map-row { grid-template-columns: 1fr auto; }
  .map-src { grid-column: 1 / -1; grid-row: 2; }
}
.rank-row .name small { color: var(--text-muted); margin-left: 4px; font-size: 11px; }
/* Names in a fixed-width column (not a share of the card), so full-width cards don't leave a gap. */
.rank.wide-names .rank-row { grid-template-columns: minmax(150px, 260px) minmax(0, 1fr); }
.rank-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.rank-tools input[type="search"] { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); flex: 1 1 140px; max-width: 240px; }
.rank-row .name small { color: var(--text-muted); font-size: 11px; margin-left: 4px; }
#pos-dlg { width: min(640px, calc(100vw - 32px)); }
.pos-list { display: grid; gap: 4px; max-height: min(56vh, 520px); overflow-y: auto; }
.pos-row { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 8px; }
.pos-row:nth-child(odd) { background: var(--surface-2); }
.pos-row small { color: var(--text-muted); margin-left: 6px; }
.pos-row select { padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-1); }
.rank.wide-names .name { text-align: left; }

/* The product's logo (brand/logo.svg) above sign-in and other pages shown before a team opens. */
.gate .card::before { content: ""; width: 56px; height: 56px; justify-self: start; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' role='img' aria-label='Logo'%3E%3Crect width='100' height='100' rx='23' fill='%230F1B2D'/%3E%3Crect x='18.25' y='57.25' width='11' height='22' rx='3.5' fill='%231E846C'/%3E%3Crect x='34.25' y='43.25' width='11' height='36' rx='3.5' fill='%2325B389'/%3E%3Cpath d='M52.25 23.25 L79.25 50 L52.25 76.75 Z' fill='%232BD9A0' stroke='%232BD9A0' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.imp .game-details { grid-column: 1 / -1; padding: 10px 12px; margin-top: 4px; background: var(--surface-1); border-radius: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.imp .game-details input, .imp .game-details select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: inherit; }
@media (max-width: 600px) { .imp .game-details { grid-template-columns: 1fr; } }

/* While the page starts, the product's loading screen instead of a team's look; on sign-in and
   welcome pages (no team open yet) no team header. */
.loading-screen { display: none; }
body.booting .loading-screen { display: grid; justify-items: center; align-content: center; gap: 14px; min-height: 100vh; color: var(--text-muted); }
body.booting > :not(.loading-screen):not(dialog):not(script) { display: none !important; }
.loading-mark { width: 84px; height: 84px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' role='img' aria-label='Logo'%3E%3Crect width='100' height='100' rx='23' fill='%230F1B2D'/%3E%3Crect x='18.25' y='57.25' width='11' height='22' rx='3.5' fill='%231E846C'/%3E%3Crect x='34.25' y='43.25' width='11' height='36' rx='3.5' fill='%2325B389'/%3E%3Cpath d='M52.25 23.25 L79.25 50 L52.25 76.75 Z' fill='%232BD9A0' stroke='%232BD9A0' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; animation: loading-pulse 1.4s ease-in-out infinite; }
@keyframes loading-pulse { 50% { transform: scale(.92); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .loading-mark { animation: none; } }
body.no-team .brand, body.no-team .filters { display: none !important; }