/* ==========================================================================
   Data pages (design-data): every league's board, game page, props board,
   matchup analyzer, futures and the standings / news / injury widgets.
   Loaded after styles.css and sports.css, so these rules restyle the shared
   board classes for every sport at once. Tokens only (docs/design-system.md):
   the league's accent marks the active and the selected, --pos / --neg carry
   good and bad numbers, and the model's chance is each row's hero number.
   ========================================================================== */

/* ---- the page header: a full-width band under the scoreboard ----
   The league's band colour and motif (sports.css) across the whole column,
   a hairline under it, the league's icon in a tinted square, the title and,
   on the slate pages, today's date. */
.board-view > .view-head:not(.sub):first-child {
  margin: -20px -24px 20px; padding: 22px 24px 20px; min-height: 92px;
  border-width: 0 0 1px; border-radius: 0; gap: 14px;
  background: color-mix(in srgb, var(--band) 72%, var(--bg));
}
:root[data-theme="light"] .board-view > .view-head:not(.sub):first-child {
  background: color-mix(in srgb, var(--band) 70%, var(--surface));
}
.vh-mark {
  flex: none; display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: var(--r-card);
  color: var(--accent-text); background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  border: 1px solid var(--accent-line);
}
.vh-mark .i { width: 22px; height: 22px; }
.vh-tt { display: grid; gap: 4px; min-width: 0; }
.vh-tt h1 { min-width: 0; }
.vh-date { margin: 0; font: 500 13px/1.2 var(--font-body); color: var(--muted); }
.view-head .vh-back { order: -1; }
.view-head .vh-back + .vh-mark { display: none; }
.view-head .vh-tt + .vh-gloss, .view-head .vh-tt + .vh-help { margin-left: auto; }
.view-head .vh-right > button, .view-head .vh-right > a {
  min-height: 32px; padding: 0 12px; font: 600 13px/1 var(--font-body); border-radius: var(--r-control);
}
/* every action in the band is the same small secondary button: Glossary,
   How it works, Follow and a page's own (Standings) */
.view-head > .vh-gloss, .view-head > .vh-help, .view-head .sf-follow {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 0 12px; font: 600 13px/1 var(--font-body); letter-spacing: 0;
  color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent);
  border: 1px solid var(--line); border-radius: var(--r-control); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.view-head > .vh-gloss:hover, .view-head > .vh-help:hover, .view-head .sf-follow:hover,
.view-head > .vh-gloss[aria-expanded="true"] { color: var(--text-strong); border-color: var(--accent-line); }
.view-head .sf-follow.on { color: var(--accent-text); border-color: var(--accent-line); }
.view-head .vh-right > button:not(.primary), .view-head .vh-right > a:not(.primary) {
  color: var(--text); background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--line);
}

@media (max-width: 620px) {
  .board-view > .view-head:not(.sub):first-child {
    margin: -16px -14px 16px; padding: 16px 14px 14px; min-height: 0; gap: 10px;
  }
  .vh-mark { width: 34px; height: 34px; border-radius: 8px; }
  .vh-mark .i { width: 18px; height: 18px; }
  .view-head h1 { font-size: 22px; }
  .vh-date { font-size: 12px; }
  /* two or more actions (or a Back button): the title keeps its row and the
     actions sit together on one row under it, instead of wrapping one by one */
  .view-head:is(:has(> .vh-back), :has(> .vh-tt + * + *)) > .vh-tt { flex: 1 1 calc(100% - 100px); }
  .view-head:is(:has(> .vh-back), :has(> .vh-tt + * + *)) > .vh-tt ~ * { margin-left: 0; }
  .view-head > .vh-gloss, .view-head > .vh-help, .view-head .sf-follow,
  .view-head .vh-right > button, .view-head .vh-right > a { min-height: 36px; }
}

/* the line under a board's games is a note, not a paragraph */
.home-games ~ .view-sub, .hg-scroll ~ .view-sub, .hg-section ~ .view-sub {
  margin: 10px 0 20px; font-size: 12px; color: var(--faint);
}

/* ---- board game cards (every league) ----
   Status on top, then each side on its own line with its score at the right
   edge, then one row per market: the line in a quieter style, the model's
   chance as the number to read, one small add control. */
.home-games { gap: 12px; }
.hg-card {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 12px 14px 12px; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line);
}
.hg-card:hover { background: var(--surface-2); border-color: color-mix(in srgb, var(--tint) 20%, var(--line)); }
.hg-card:focus-visible { outline: var(--focus); outline-offset: 2px; }
.hg-card .hg-top {
  display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-width: 0;
  font: 600 14px/1.3 var(--font-body); color: var(--text-strong);
}
.hg-card .hg-top > .hg-pl { display: flex; width: 100%; gap: 8px; }
.hg-card .hg-top > .hg-pl > .logo, .hg-card .hg-top > .hg-pl > .logo-ph { width: 20px; height: 20px; }
.hg-card .hg-top > .hg-pl > b {
  margin-left: auto; padding-left: 8px;
  font: 600 18px/1 var(--font-display); color: var(--text-strong);
}
.hg-card .hg-top > .hg-at {
  position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* the status line (time, Final, Live) reads first */
.hg-card .hg-top + .hg-sub:not(:has(.hg-ln)) { order: -1; margin: 0; font-size: 12px; color: var(--faint); }
/* a card whose status shares its row with the lines (NFL, soccer): the row
   stays under the names, set off by a hairline */
.hg-card .hg-sub:not(.tiny):has(> .hg-ln) {
  margin: 0; padding-top: 9px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; line-height: 1.9; color: var(--muted);
}
.hg-card .hg-sub:not(.tiny) > .hg-ln .mo { color: var(--text-strong); font-weight: 600; }
/* ...and its markets read as rows like every other league's: one market per
   line, the " · " between them dropped (font-size 0 on the loose text), the
   model's chance at the right edge, the status on a line of its own above */
.hg-card .hg-sub:not(.tiny):has(> .hg-ln .mo, > .hg-ln .slip-add) {
  display: flex; flex-direction: column; align-items: stretch; font-size: 0; line-height: 1.3;
}
.hg-card .hg-sub:not(.tiny):has(> .hg-ln .mo, > .hg-ln .slip-add) > * { font-size: 12.5px; }
.hg-card .hg-sub:not(.tiny):has(> .hg-ln .mo, > .hg-ln .slip-add) > * + * { margin-top: 5px; }
.hg-card .hg-sub:not(.tiny):has(> .hg-ln .mo, > .hg-ln .slip-add) > .hg-ln {
  display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap;
}
.hg-card .hg-sub:not(.tiny):has(> .hg-ln .mo, > .hg-ln .slip-add) > .hg-ln > .slip-add:not(.slip-chip) { margin: 0; }
/* a phone: a finished game with nothing left to price is one compact row
   (status, then both sides and their scores), so tonight's priced games
   are on the first screen instead of behind "N more" */
@media (max-width: 620px) {
  .home-games { gap: 8px; }
  .hg-card:has(.hg-final):not(:has(.hg-ln .mo, .slip-add)) {
    flex-direction: row; align-items: center; gap: 12px; padding: 8px 14px;
  }
  .hg-card:has(.hg-final):not(:has(.hg-ln .mo, .slip-add)) .hg-top {
    flex: 1 1 auto; flex-direction: row; gap: 16px;
  }
  .hg-card:has(.hg-final):not(:has(.hg-ln .mo, .slip-add)) .hg-top > .hg-pl { flex: 1 1 0; min-width: 0; }
  .hg-card:has(.hg-final):not(:has(.hg-ln .mo, .slip-add)) .hg-top > .hg-pl > b { font-size: 16px; }
  .hg-card:has(.hg-final):not(:has(.hg-ln .mo, .slip-add)) > .hg-sub {
    order: -1; flex: none; min-width: 36px; margin: 0; padding: 0; border: 0; font-size: 0; white-space: nowrap;
  }
  .hg-card:has(.hg-final):not(:has(.hg-ln .mo, .slip-add)) > .hg-sub > .hg-final { font-size: 11px; }
  .hg-card:has(.hg-final):not(:has(.hg-ln .mo, .slip-add)) > .hg-sub > :not(.hg-final) { display: none; }
}
.hg-card .hg-final {
  font: 600 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--faint);
}
.hg-card .hg-live { font-weight: 600; color: var(--live); }
.hg-card .hg-time { color: var(--muted); }
/* the market rows: the separators between them are dropped (font-size 0
   on the row's loose text), each chunk gets a line of its own */
.hg-card .hg-sub.tiny {
  margin: 0; padding-top: 9px; border-top: 1px solid var(--line-soft);
  font-size: 12px; line-height: 1.4; color: var(--muted);
}
.hg-card .hg-sub.tiny:has(> .hg-ln) { display: grid; gap: 5px; font-size: 0; line-height: 1.3; }
.hg-card .hg-sub.tiny:has(> .hg-ln) > * { font-size: 12.5px; }
.hg-card .hg-sub.tiny > .hg-ln {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  color: var(--muted); white-space: nowrap;
}
.hg-card .hg-ln .mo { margin-left: auto; color: var(--text-strong); font-weight: 600; }
.hg-card .hg-ln .mo-lock { margin-left: auto; color: var(--faint); }
.hg-card .hg-ln .mo-wait { margin-left: auto; }
.hg-card .hg-ln > .slip-add:not(.slip-chip) { margin: 0; }
.hg-card .hg-ln > .mo + .slip-add:not(.slip-chip) { margin-left: 2px; }

.sf-follow { display: inline-flex; align-items: center; gap: 6px; }

/* ---- the add-to-slip "+": one quiet control, the accent only when on ---- */
.slip-add:not(.slip-chip) {
  width: 22px; height: 22px; border-radius: var(--r-control);
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: 15px; font-weight: 500;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.slip-add:not(.slip-chip):hover { color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-soft); }
.slip-add.on:not(.slip-chip) { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
.slip-chip::before { color: var(--accent-text); }
.slip-chip.on { border-color: var(--accent-line); background: var(--accent-soft); }

/* ---- board sections (an event, a tournament, a card) ---- */
.hg-section { margin-bottom: 20px; }
.hg-section > .view-head.sub { padding: 0 0 10px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.hg-section > .view-head.sub .tiny { color: var(--faint); font-size: 12px; }
/* a board with one section (a UFC card, one esports event) spans the board
   and lays its cards out in card-wide columns, instead of one 300px column
   beside two empty ones; the cards keep their width */
.home-games:has(> .hg-section):not(:has(> .hg-section ~ .hg-section)) > .hg-section { grid-column: 1 / -1; }
.home-games:has(> .hg-section):not(:has(> .hg-section ~ .hg-section)) > .hg-section .hg-list {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px;
}

/* ---- the scoreboard strip: the live game in the league's accent ---- */
.scoreboard { background: var(--surface); }
.gcard { padding: 9px 14px 10px; }
.gcard .team { font-weight: 500; }
.gcard .team .score { font-size: 16px; }
.gcard.is-live { box-shadow: inset 0 2px 0 var(--accent); background: var(--accent-soft); }
.gcard.is-live .gstatus { color: var(--accent-text); }
.daytab { background: var(--surface-2); color: var(--faint); }
.gcard .mo { color: var(--text-strong); font-weight: 600; }
.jump-live { font: 600 12px/1 var(--font-body); padding: 0 10px; }
@media (max-width: 620px) {
  .gcard { padding: 8px 12px 9px; }
  .gcard .team { font-size: 12.5px; line-height: 1.7; }
  .daytab { min-width: 40px; padding: 0 8px; }
}

/* ---- the widgets under a board: news, injuries, find a player, futures ---- */
.ctx-strip { gap: 16px; margin: 24px 0 8px; }
.ctx-col {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 14px 16px;
}
.ctx-col h2, .ctx-col h3 { font: 600 15px/1.3 var(--font-body); margin: 0 0 10px; }
.ctx-col .tiny, .ctx-col .muted { color: var(--muted); font-size: 13px; }
.board-view > h3, .board-view > .board-label, .board-view .fnd > h3, .board-view .fnd > h2 {
  font: 600 16px/1.3 var(--font-body); color: var(--text-strong); letter-spacing: 0; text-transform: none;
  margin: 24px 0 10px;
}
.home-futures { margin-top: 4px; }

/* ---- data tables (the props boards, futures, a game's markets) ----
   The chance is the hero number of each row; the fair price beside it is
   quieter; the header sticks while the board scrolls. */
.board-view .panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 16px 0 4px; overflow: visible;
}
.board-view .panel > .view-head.sub { padding: 0 16px 12px; margin: 0; border: 0; display: grid; gap: 4px; }
.board-view .panel > .view-head.sub > *,
.board-view .panel > .view-head.sub > h2 + :last-child { margin-left: 0; text-align: left; }
/* a section heading is never a band, in either theme */
:root[data-theme="light"] .view-head.sub { background: transparent; }
.board-view .panel > .view-head.sub .tiny { font-size: 12px; color: var(--faint); line-height: 1.45; max-width: 90ch; }
.board-view .panel > .tablewrap, .board-view .panel > .tbl-wrap { border: 0; border-radius: 0; }
.props-t { font-size: 13px; width: 100%; }
.props-t thead th {
  position: sticky; top: -1px; z-index: 2;
  font: 600 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); background: var(--surface-2);
  padding: 10px 10px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.props-t td { padding: 8px 10px; line-height: 1.35; }
.props-t td:first-child, .props-t th:first-child { padding-left: 16px; }
.props-t td:last-child, .props-t th:last-child { padding-right: 16px; }
.props-t td:first-child { font-weight: 600; color: var(--text-strong); }
.props-t td:not(.l):not(.tiny) { font-weight: 500; color: var(--text-strong); }
.panel:not(.nhl-card) > .tablewrap > .props-t td:not(.l):not(.tiny) { font-weight: 600; }
.props-t td:not(.l):not(.tiny) small { font-weight: 500; color: var(--muted); }
.props-t td .fo, .pstat td .fo { margin-left: 6px; font-weight: 500; font-size: 12px; color: var(--muted); }
.props-t td.tiny { color: var(--muted); font-size: 12.5px; }
.props-t tr.nolean td { color: var(--muted); }
.props-t tr.nolean td:first-child { color: var(--text); }
.props-t tbody tr:last-child td { border-bottom: 0; }
/* a lean is a quiet tag, not a filled pill on every row */
.lean-tag {
  display: inline-flex; align-items: center; height: 18px; padding: 0 6px; margin-left: 6px;
  font: 600 10.5px/1 var(--font-body); letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent-text); background: transparent;
  border: 1px solid var(--accent-line); border-radius: 4px; vertical-align: 1px;
}
.lean-tag.lean-held { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.cs-note { color: var(--faint); font-size: 12px; max-width: 90ch; }
/* a wide board keeps its header sticky on a desktop: the wrapper only
   scrolls sideways where the table cannot fit */
@media (min-width: 901px) {
  .board-view .tablewrap.dt-fits, .board-view .tbl-wrap.dt-fits { overflow: visible; }
  /* a long last column (the NBA ladder) wraps rather than widening the table */
  .props-t td.l.tiny:last-child { white-space: normal; min-width: 180px; }
}

/* ---- props search and filters ---- */
.pq-input, .props-search input, .board-view input[type="search"] {
  height: var(--control-h); border-radius: var(--r-control);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.props-toggle button.on, .seg button.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }

/* ---- a table becomes a list of compact rows on a phone or tablet ----
   datatables.js copies each column's header onto its cells (data-label);
   here every row is a block: the first cell (the player / the side) on a
   line of its own, the rest as labelled pairs that wrap. No sideways page
   scroll on any board. */
@media (max-width: 900px) {
  .board-view .panel { padding-top: 14px; }
  .board-view .panel > .view-head.sub { padding: 0 14px 10px; }
  .tablewrap > table.props-t.dt-list, .tbl-wrap > table.props-t.dt-list { min-width: 0; }
  table.dt-list, table.dt-list tbody { display: block; width: 100%; }
  table.dt-list thead { display: none; }
  table.dt-list tr {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
    padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
  }
  table.dt-list tbody tr:last-child { border-bottom: 0; }
  table.dt-list td {
    display: block; flex: 0 1 auto;
    padding: 0 !important; border: 0 !important; text-align: left !important;
    white-space: normal; min-width: 0; max-width: 100%; background: none !important;
  }
  table.dt-list td:first-child { flex: 1 1 100%; font-size: 14px; }
  table.dt-list td[data-label]:not(:first-child)::before {
    content: attr(data-label); margin-right: 6px;
    font: 600 10.5px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
    color: var(--faint);
  }
  table.dt-list td > .slip-add:first-child:not(.slip-chip) { margin: -3px 6px -3px 0; }
  table.dt-list td:empty { display: none; }
}

/* ---- the members-only state: an intentional placeholder, not a wall of
   padlocks. A dashed frame with ghost rows, one line and one action. */
.paywall {
  position: relative; max-width: 640px; margin: 4px 0 0;
  padding: 0 0 20px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: var(--r-card); box-shadow: none;
}
.paywall > :not(.pw-ghost) { margin-left: 24px; margin-right: 24px; }
.pw-ghost {
  position: relative; display: grid; gap: 10px; padding: 18px 24px 20px; margin: 0 0 18px;
  border-bottom: 1px dashed var(--line);
  background: var(--surface-2);
}
.pw-ghost span {
  display: grid; grid-template-columns: 32% 18% 1fr 12%; gap: 12px; height: 12px;
}
.pw-ghost span::before, .pw-ghost span::after {
  content: ""; border-radius: 3px; background: color-mix(in srgb, var(--tint) 9%, transparent);
}
.pw-ghost span::after { grid-column: 4; }
.pw-ghost .pw-lock {
  position: absolute; right: 24px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px;
  font: 600 12px/1 var(--font-body); color: var(--accent-text);
  background: var(--surface); border: 1px solid var(--accent-line); border-radius: var(--r-control);
}
.pw-ghost .pw-lock .i { width: 14px; height: 14px; }
.paywall h2 { font: 600 22px/1.25 var(--font-body); letter-spacing: -.01em; color: var(--text-strong); margin-top: 0; margin-bottom: 8px; }
.paywall > p { color: var(--muted); font-size: 14px; max-width: 60ch; }
.pw-list { margin: 12px 0 18px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pw-list li {
  position: relative; padding-left: 22px; font-size: 14px; color: var(--text);
}
.pw-list li::before {
  content: ""; position: absolute; left: 2px; top: .45em; width: 9px; height: 5px;
  border-left: 1.75px solid var(--accent-text); border-bottom: 1.75px solid var(--accent-text);
  transform: rotate(-45deg); background: none; border-radius: 0;
}
.pw-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.paywall .muted.small { font-size: 12px; color: var(--faint); }
.paywall .pw-badge { display: none; }
.paywall > .pw-badge:first-child + h2 { margin-top: 22px; }
@media (max-width: 620px) {
  .paywall > :not(.pw-ghost) { margin-left: 16px; margin-right: 16px; }
  .pw-ghost { padding: 14px 16px 16px; }
  .pw-ghost .pw-lock { right: 16px; }
  .paywall h2 { font-size: 19px; }
}

/* ---- a lock on a single number (a board card, a strip line) ---- */
.mo-lock { color: var(--faint); }
.mo-lock:hover { color: var(--accent-text); }

/* ---- the matchup analyzer's pickers ---- */
.mu-pickers { gap: 12px; }
.mu-pickers label, .mu-pickers .t-label { font: 600 11px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.mu-pickers input, .mu-pickers select {
  height: var(--control-h); border-radius: var(--r-control);
  background: var(--surface-2); border: 1px solid var(--line); color: var(--text);
}
.mu-pickers input:focus, .mu-pickers select:focus { border-color: var(--accent-line); box-shadow: var(--ring); outline: none; }

/* ---- a game page: the matchup, three hero numbers, then the markets as
   one list of hairline rows instead of a stack of filled boxes ---- */
.board-view .panel.nhl-card { padding: 18px 20px 16px; }
.nhl-card .nhl-h { font: 600 22px/1.2 var(--font-display); color: var(--text-strong); margin-bottom: 16px; flex-wrap: wrap; row-gap: 4px; }
.nhl-card .nhl-h .tiny { font: 500 12px/1.3 var(--font-body); color: var(--muted); }
.grid-3 > .verdict {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: none;
}
.grid-3 > .verdict > b { font-family: var(--font-display); color: var(--text-strong); letter-spacing: -.01em; }
.grid-3 > .verdict .fo { color: var(--muted); }
.nhl-card .nhl-pl {
  margin: 0; padding: 10px 2px; background: transparent; border-radius: 0;
  border-bottom: 1px solid var(--line-soft); font-size: 13px; line-height: 1.5; color: var(--muted);
}
.nhl-card .nhl-pl b { color: var(--text-strong); font-weight: 600; }
.nhl-card .nhl-pl .fo { color: var(--muted); font-size: 12px; }
.nhl-card .grid-3 + .nhl-pl { border-top: 1px solid var(--line-soft); margin-top: 6px; }
.nhl-card > .props-t { margin-top: 14px; }
.nhl-scorers .pill { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-control); }
.nhl-scorers .pill b { color: var(--text-strong); }
.nhl-card details > summary { padding: 10px 2px; font-weight: 600; color: var(--text-strong); cursor: pointer; border-bottom: 1px solid var(--line-soft); }
.nhl-card details > summary:hover { color: var(--accent-text); }
@media (max-width: 620px) {
  .board-view .panel.nhl-card { padding: 14px 14px 12px; }
  .nhl-card .nhl-h { font-size: 20px; }
  .grid-3:not(.grid) { gap: 8px; }
  .grid-3 > .verdict { padding: 10px 6px; }
}

/* board notes (what is free, where prices come from) read as small print */
.board-view > .view-sub, .board-view > .page-sub { font-size: 13px; color: var(--faint); max-width: 75ch; }

/* ---- empty boards: one sentence, one action ---- */
.board-view .empty {
  padding: 22px 18px; color: var(--muted); font-size: 14px;
  background: var(--surface); border: 1px dashed var(--line); border-radius: var(--r-card);
}