/* boards.css
   Custom boards: the rail of tabs above the columns, the heading one of them
   gets, the ✕ on a card that belongs to one, and the panel a player's page
   opens to say which lists he is on.

   Sits immediately after board.css because everything here is layered onto that
   file's columns and cards — .bcard-drop in particular has to come after .bcard.
   Part of the Teleport stylesheet, split by concern. index.html links these in
   source order; keep that order, the cascade depends on it. */

/* ── The rail ───────────────────────────────────────────────────────────
   Every board the school has, as one row of tabs. Tabs rather than a dropdown
   because the count on each is half the point — a coach wants to see that the
   wish list has grown to fourteen, not click a menu to find out.

   They wrap rather than scroll sideways, the same call the board's own columns
   make: a strip that scrolls hides exactly the boards nobody has opened lately,
   which are the ones worth being reminded of. */
.brail {
  display: flex; align-items: stretch; flex-wrap: wrap; gap: 8px;
  margin-bottom: 18px;
}
.brail-tabs { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 auto; min-width: 0; }

/* A card, not a pill — a name, what it's for and a count need three slots, and
   at pill size the second one would have to go. The left rail is what carries
   the selection: a 3px accent edge that is present but transparent at rest, so
   picking a different board moves a colour rather than re-laying out the row. */
.brail-tab {
  position: relative; display: flex; align-items: center; gap: 9px;
  min-width: 168px; max-width: 260px; padding: 9px 13px 9px 12px;
  background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--r-md); box-shadow: var(--shadow-sm);
  color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color 0.14s, box-shadow 0.14s, background 0.14s, transform 0.08s;
}
.brail-tab::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: transparent; transition: background 0.14s;
}
.brail-tab:hover { background: var(--surface-2); }
.brail-tab:active { transform: scale(0.985); }
.brail-tab.is-on {
  background: var(--surface); border-color: var(--accent);
  box-shadow: var(--shadow-md);
}
.brail-tab.is-on::before { background: var(--accent); }

.brail-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--label-3);
}
.brail-ic svg { width: 13px; height: 13px; }
.brail-tab.is-on .brail-ic { background: var(--accent-light); color: var(--accent); }

.brail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.brail-name {
  font-size: 13px; font-weight: 680; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brail-sub {
  font-size: 11px; color: var(--label-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brail-n {
  flex-shrink: 0; font-size: 11.5px; font-weight: 750; color: var(--label-2);
  background: var(--surface-2); border-radius: var(--r-full); padding: 2px 8px;
  font-variant-numeric: tabular-nums;
}
.brail-tab.is-on .brail-n { background: var(--accent-light); color: var(--accent-deep); }
:root[data-theme="dark"] .brail-tab.is-on .brail-n { color: var(--accent); }

/* Dashed, like the scenario page's "add into this group" row and the follow
   button in the news popover — the same gesture in the same clothes, so
   "there could be another one of these" reads as one idea across the app. */
.brail-new {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0;
  padding: 9px 14px; border-radius: var(--r-md);
  background: none; border: 1.5px dashed var(--border);
  font-family: var(--font); font-size: 12.5px; font-weight: 650; color: var(--label-2);
  cursor: pointer; transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.brail-new:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.brail-new-ic { display: inline-flex; }
.brail-new-ic svg { width: 13px; height: 13px; display: block; }

/* ── One board's heading ────────────────────────────────────────────────
   The main board keeps the plain one-word heading in layout.css: the rail above
   it has already said which list this is, and the nav tab says it again. A
   custom board has a name somebody chose, a note they may have written, and —
   since it is shared with the whole school, like the board and scenarios — a
   line saying who touched it last. */
.bhero { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.bhero-main { flex: 1; min-width: 0; }
.bhero-notes { font-size: 14px; color: var(--label-2); margin-top: 3px; }
.bhero-meta { font-size: 12px; color: var(--label-3); margin-top: 5px; }
.bhero-acts { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* Ghost until hovered. Deleting a board is rare and irreversible, so it should
   not sit on screen wearing the same weight as Rename — but it turns red on
   approach rather than hiding, because a control you have to hunt for is worse
   than one that is merely quiet. */
.bhero-del:hover { color: var(--red); }
.bhero-del:hover svg { color: var(--red); }

/* ── Taking someone off a list ──────────────────────────────────────────
   Custom boards only. Hidden until the card is hovered or focused, so a column
   reads as a list of players rather than a column of delete buttons — the same
   call the news popover's unfollow control makes. It is a sibling of the card's
   link, never inside it: a button inside an anchor is invalid HTML and browsers
   disagree about which one owns the click. */
.bcard-drop {
  flex-shrink: 0; width: 22px; height: 22px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--r-sm);
  color: var(--label-3); cursor: pointer;
  /* Hidden, not absent. It holds its slot on every card on the board, so
     hovering down a column doesn't squeeze each name by 22px in turn as the
     button appears — the same reasoning .fpop-tick follows in news.css. */
  visibility: hidden;
}
.bcard:hover .bcard-drop, .bcard:focus-within .bcard-drop { visibility: visible; }
.bcard-drop:hover { color: var(--red); background: var(--red-light); }
.bcard-drop svg { width: 12px; height: 12px; display: block; }
/* The write is in flight. Fading rather than removing keeps the column's height
   steady until the answer comes back, so a refused write puts the card back
   where it already was. */
.bcard.is-going { opacity: 0.4; pointer-events: none; }

/* ── The boards a player is on ──────────────────────────────────────────
   Chips beside his status badge on the hero, one per custom list, each a link
   to that board. Lower-case and bordered rather than filled: the status badge
   next to them is a fact about the player, and these are places to go. */
.phero-boards { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pill--board {
  gap: 4px; text-transform: none; letter-spacing: 0; font-size: 11px;
  background: var(--surface-2); color: var(--label-2);
  border: 1px solid var(--border-2); text-decoration: none;
  transition: border-color 0.13s, color 0.13s;
}
.pill--board:hover { border-color: var(--accent); color: var(--accent); }
.pill--board svg { width: 10px; height: 10px; flex-shrink: 0; }

/* ── The "add to a board" panel ─────────────────────────────────────────
   Anchored under its own button on the player page — see ui/boards-popover.js
   for why this is a panel and not a modal. Deliberately shaped like .fpop in
   news.css: two anchored popovers that look like two different components would
   be the app telling a coach they are two different kinds of thing. */
.bpop {
  position: fixed; z-index: 90; width: 300px; max-width: calc(100vw - 24px);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.14s var(--ease-out), transform 0.14s var(--ease-out);
  overflow: hidden;
}
.bpop.is-above { transform: translateY(4px); }
.bpop.is-in { opacity: 1; transform: none; }
/* A write is in flight. The clicks are already ignored in JS; this is what says
   so, so a second tick reads as "wait" rather than as "nothing happened". */
.bpop.is-busy { opacity: 0.6; }
.bpop.is-busy .bpop-row { cursor: progress; }

.bpop-head {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px 9px; border-bottom: 1px solid var(--border-2);
}
.bpop-title {
  font-size: 11px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--label-3);
}
.bpop-count {
  margin-left: auto; font-size: 11px; font-weight: 750; color: var(--label-2);
  background: var(--surface-2); border-radius: var(--r-full); padding: 1px 7px;
}

/* Capped and scrolled: the list is meant to grow, and a panel that grew with it
   would eventually be taller than the window. */
.bpop-list { max-height: min(46vh, 330px); overflow-y: auto; padding: 5px; }
.bpop-row {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 8px; border-radius: var(--r-md);
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font); color: var(--label);
}
.bpop-row:hover { background: var(--surface-2); }
.bpop-row.is-on { background: var(--accent-light); }

.bpop-ic {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--label-3);
}
.bpop-ic svg { width: 13px; height: 13px; }
.bpop-row.is-on .bpop-ic { background: var(--surface); color: var(--accent); }

.bpop-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.bpop-name {
  font-size: 13px; font-weight: 680; letter-spacing: -0.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bpop-sub {
  font-size: 11.5px; color: var(--label-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The tick holds its slot whether or not it shows, so rows do not shift
   sideways as boards are ticked and unticked down the list. */
.bpop-tick { display: inline-flex; color: var(--accent); flex-shrink: 0; visibility: hidden; }
.bpop-tick svg { width: 16px; height: 16px; display: block; }
.bpop-row.is-on .bpop-tick { visibility: visible; }

.bpop-foot { padding: 7px; border-top: 1px solid var(--border-2); }
.bpop-add {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px; border-radius: var(--r-md);
  background: none; border: 1.5px dashed var(--border);
  font-family: var(--font); font-size: 12.5px; font-weight: 650; color: var(--label-2);
  cursor: pointer; transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.bpop-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.bpop-add svg { width: 13px; height: 13px; }