/* ---------------------------------------------------------------------------
   Front office: contracts, cap, owner, trades, free agency, re-signing, the
   franchise tag and the negotiation conversation — "In the room".

   The screens are windows from the room kit (src/room.css: .rm-win, .rm-tb,
   .rm-tbl, .rm-btn, .rm-bd, .rm-tabs, .rm-fc …) floating on the front
   office. This file only dresses what is the front office's own: the `fo-`
   classes, several of which Storylines and the camp report borrow (fo-th,
   fo-log, fo-say, fo-opt, fo-chip, fo-b, fo-step …), so every one of them
   reads on a navy window. Solid colour only, pixel corners, no emoji, no
   left-edge stripes, nothing at regular weight. Works down to 375px.
--------------------------------------------------------------------------- */
.fo { font-weight: 700; }
.fo h2.fo-t { font: 400 30px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; margin: 2px 0 10px; color: #fff; }
/* a section inside a window: gold words and a rule to the edge (.rm-sec) */
.fo h3.fo-t { display: flex; align-items: center; gap: 8px; margin: 16px 3px 8px; color: var(--gold);
  font: 400 21px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase; }
.fo h3.fo-t::after { content: ''; flex: 1; height: 3px; background: var(--rule); }
.fo .fo-sub { font: 800 13px/1.45 var(--sans); color: var(--soft); margin: -4px 0 10px; }
.fo-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 10px; }
.fo-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; }

/* --- tables: the kit's look (gold heads on ink, column lines, zebra) ------ */
.fo table { width: 100%; border-collapse: separate; border-spacing: 0; }
.fo thead th { padding: 7px 8px 6px; background: var(--ink); color: var(--gold); text-align: left; white-space: nowrap;
  font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border-right: 2px solid var(--rule); }
.fo thead th:last-child { border-right: 0; }
.fo tbody td { padding: 7px 8px; background: var(--card); color: var(--card-ink); font: 800 13.5px/1.25 var(--sans); vertical-align: middle;
  border-top: 2px solid var(--card-line); border-bottom: 0; border-right: 2px solid var(--card-line); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo tbody td:last-child { border-right: 0; }
.fo tbody tr:nth-child(even) td { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo td.num, .fo th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fo tbody tr.me td, .fo tbody tr.me:nth-child(even) td { background: var(--tm); color: var(--on-tm); }
/* a link in your row takes the club's text colour; a button keeps its own
   (a white "Talk" button went white on white) */
.fo tbody tr.me td a:not(.rm-btn) { color: var(--on-tm); }
.fo .fo-tw { margin: 3px; box-shadow: var(--frame); overflow-x: auto; background: var(--card); border: 0; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
/* money in a table reads as a number: the display face */
.fo td.num b, .fo .rm-tbl td.r b, .fo .rm-tbl td.big { font: 400 21px/1 var(--disp); letter-spacing: .4px; }

/* --- tiles: label, big number, a line under it ------------------------------ */
.fo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 6px; margin-bottom: 12px; }
.fo-tile { display: grid; gap: 4px; align-content: start; margin: 3px; padding: 8px 10px 9px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); min-width: 0; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-tile .k { font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
.fo-tile .v { font: 400 32px/1 var(--disp); letter-spacing: .4px; }
.fo-tile .s { font: 800 11.5px/1.3 var(--sans); color: var(--soft); }
.fo-tile.bad { background: var(--red); } .fo-tile.good { background: var(--green); }
.fo-tile.tm { background: var(--tm); color: var(--on-tm); }
.fo-tile.gold { background: var(--gold); color: var(--ink); }
.fo-tile.bad .k, .fo-tile.bad .s, .fo-tile.good .k, .fo-tile.good .s { color: #fff; }
.fo-tile.tm .k, .fo-tile.tm .s { color: var(--on-tm); }
.fo-tile.gold .k, .fo-tile.gold .s { color: var(--ink); }

/* --- strips: one line of news on ink, or solid colour when it matters ------- */
.fo-strip { display: block; margin: 3px 3px 12px; padding: 9px 12px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame);
  font: 800 13.5px/1.45 var(--sans); }
.fo-strip.tm { background: var(--tm); color: var(--on-tm); }
.fo-strip.red { background: var(--red); color: #fff; }
.fo-strip.green { background: var(--green); color: #fff; }
.fo-strip a:not(.rm-btn):not(.fo-b) { color: inherit; }
.fo-strip.flex { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* --- chips: the kit's badge (solid, a 2px frame, 900 caps) ------------------ */
.fo-chip { display: inline-flex; align-items: center; gap: 5px; margin: 2px; padding: 4px 7px 3px; white-space: nowrap;
  font: 900 10.5px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ink);
  box-shadow: var(--frame-2); border: 0; }
.fo-goalh .fo-chip, .fo-goalc .fo-chip { white-space: normal; }
.fo-chip.tm { background: var(--tm); color: var(--on-tm); }
.fo-chip.red { background: var(--red); } .fo-chip.green { background: var(--green); }
.fo-chip.blue { background: #2563eb; } .fo-chip.gold { background: var(--gold); color: var(--ink); }
.fo-chip.orange { background: var(--orange); color: var(--ink); } .fo-chip.violet { background: var(--violet); }
.fo-chip.hid, .fo-chip.white { background: #fff; color: var(--ink); }
.fo-tier { display: inline-block; padding: 4px 8px 3px; margin: 2px; font: 900 10.5px/1.1 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: #fff; box-shadow: var(--frame-2); }
.fo-tier.t0 { background: var(--red); } .fo-tier.t1 { background: #2563eb; } .fo-tier.t2 { background: var(--green); }
.fo-tier.t3 { background: var(--gold); color: var(--ink); } .fo-tier.tv { background: var(--ink); }

/* --- buttons: the kit's chunky button at its smallest (.rm-btn.xs) --------- */
.fo-b {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative;
  padding: 5px 9px 5px; margin: 3px 3px 6px; cursor: pointer; text-decoration: none; border: 0; white-space: nowrap;
  font: 400 16px/1 var(--disp); letter-spacing: .6px; text-transform: uppercase;
  background: #fff; color: var(--ink); box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--steel);
}
.fo-b:hover { background: var(--gold); color: var(--ink); text-shadow: none; box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk); }
.fo-b:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--frame), 0 3px 0 0 var(--ink), inset 0 -2px 0 0 var(--gold-dk); }
.fo-b:focus-visible { outline: 3px solid var(--gold); outline-offset: 5px; }
.fo-b.gold { background: var(--gold); box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk); }
.fo-b.gold:hover { background: var(--gold-hi); }
.fo-b.tm { background: var(--tm); color: var(--on-tm); text-shadow: 2px 2px 0 var(--tm-sh); box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--tm-dk); }
.fo-b.ink { background: var(--ink-2); color: #fff; box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 #0a1424; }
.fo-b.red, .fo-b.bad { background: var(--red); color: #fff; box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--red-dk); }
.fo-b.tm:hover, .fo-b.ink:hover, .fo-b.red:hover, .fo-b.bad:hover { background: var(--gold); color: var(--ink); text-shadow: none;
  box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 var(--gold-dk); }
.fo-b:disabled, .fo-b.off { cursor: default; transform: none; background: #6b7280; color: #fff; text-shadow: none;
  box-shadow: var(--frame), 0 6px 0 0 var(--ink), inset 0 -4px 0 0 #4b5563; }

/* --- people ------------------------------------------------------------------- */
.fo-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.fo-who .pxface { width: 36px; height: 36px; flex: none; margin: 2px; background: var(--tm); box-shadow: var(--frame-2); image-rendering: pixelated; }
.fo-who .rm-fc { margin: 2px; }
.fo-who .nm { min-width: 0; font: 400 20px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.fo-who .nm small { display: block; margin-top: 3px; font: 900 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.fo-who a { color: inherit; text-decoration: none; }
.fo-who a:hover { color: inherit; text-decoration: underline; }
tr.me .fo-who .nm small, tr.me .fo-who a { color: var(--on-tm); }
.fo img.logo { width: 32px; height: 32px; vertical-align: middle; image-rendering: pixelated; }
.fo .seen { color: var(--soft); font-weight: 800; }
/* the overall, as the room draws a number: display face in a framed box */
.fo .ovr { display: inline-grid; place-items: center; min-width: 36px; height: 30px; padding: 0 5px; margin: 2px;
  font: 400 22px/1 var(--disp); letter-spacing: .3px; box-shadow: var(--frame-2); }

/* --- bars: a pixel bar with a gap every tenth ---------------------------------- */
.fo-bar { position: relative; height: 18px; padding: 0; background: var(--ink); box-shadow: 0 0 0 2px #000, inset 0 0 0 3px var(--ink); overflow: hidden; }
.fo-bar > i { position: absolute; left: 3px; top: 3px; bottom: 3px; max-width: calc(100% - 6px); }
.fo-bar::after { content: ''; position: absolute; inset: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ink) calc(10% - 2px) 10%); }
.fo-bar > b { position: absolute; z-index: 1; top: 0; bottom: 0; width: 3px; background: var(--gold); }

/* --- the page pieces the room kit does not have ------------------------------- */
/* a long table's "N more" bar */
.fo-more { display: flex; align-items: center; gap: 10px; width: calc(100% - 6px); margin: 12px 3px 3px; padding: 10px 12px 9px;
  background: var(--card); color: var(--card-ink); border: 0; cursor: pointer; box-shadow: var(--frame); text-align: left;
  font: 400 22px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.fo-more:hover { background: var(--card-hov); color: var(--card-ink); }
.fo-more .rm-end { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
/* a key row inside a window: small caps words, a big number, a badge */
.fo-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 3px 3px; padding: 9px 10px; background: var(--card); color: var(--card-ink);
  box-shadow: var(--frame); font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.fo-line b { font: 400 24px/1 var(--disp); letter-spacing: .4px; color: var(--green); }
.fo-line b.bad { color: var(--red); }
.fo-line .rm-bd, .fo-line .rm-btn { margin-left: auto; }
/* the headline number of a window */
.fo-big { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 3px 10px; }
.fo-big .v { font: 400 54px/.85 var(--disp); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); letter-spacing: .5px; }
.fo-big .v.bad { color: #ff5577; }
.fo-big .rm-bd { margin-left: auto; }
/* the cap as one bar: players, dead money, room */
.fo-capbar { display: flex; height: 24px; padding: 3px; gap: 3px; margin: 3px 3px 12px; background: var(--ink); box-shadow: var(--frame); }
.fo-capbar i { display: block; min-width: 6px; }
.fo-capbar i.tm { flex: 1 1 auto; background: repeating-linear-gradient(90deg, var(--tm) 0 14px, var(--tm-dk) 14px 17px); }
.fo-capbar i.red { background: var(--red); }
.fo-capbar i.green { background: #22c55e; }
.fo-capkey { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.fo-capkey .k { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 3px; padding: 8px 9px 7px; background: var(--card); box-shadow: var(--frame);
  font: 900 10.5px/1.1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-capkey .k b { margin-left: auto; font: 400 20px/1 var(--disp); letter-spacing: .4px; white-space: nowrap; }
.fo-capkey .k.tot { background: var(--gold); color: var(--ink); }
.fo-capkey .sw { width: 11px; height: 11px; flex: none; box-shadow: 0 0 0 2px #000; }
.fo-capkey .sw.tm { background: var(--tm); } .fo-capkey .sw.red { background: var(--red); } .fo-capkey .sw.green { background: #22c55e; }
/* years left as pips: gold for every season still to run */
.fo-yrs { display: inline-flex; gap: 3px; padding: 2px; }
.fo-yrs i { width: 11px; height: 11px; background: var(--gold); box-shadow: 0 0 0 2px var(--ink); }
.fo-yrs i.off { background: var(--rule); }
/* a picture of the room inside a window, a face in its corner */
.fo-shot { position: relative; }
.fo-shot .fo-shot-who { position: absolute; right: 8px; bottom: 8px; line-height: 0; }
.fo-shot .fo-shot-tag { position: absolute; left: 8px; top: 8px; line-height: 1; }

/* --- the contracts table: a player cell, and on a phone a card per row --------- */
.fo-ctt td { vertical-align: middle; }
.fo-ctt td.p { position: relative; }
.fo-pl { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fo-pn { min-width: 0; }
.fo-pn .nm { display: inline-block; font: 400 21px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; white-space: nowrap;
  color: inherit; text-decoration: none; }
.fo-pn a.nm:hover { color: inherit; text-decoration: underline; }
.fo-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 3px 0 0 -2px; }
.fo-tags .rm-bd { padding: 3px 5px 2px; font-size: 9.5px; }
.fo-tags .age { display: none; }
.fo-ctt td.c b { font: 400 24px/1 var(--disp); letter-spacing: .4px; color: inherit; }
.fo-ctt td.big { font: 400 24px/1 var(--disp); letter-spacing: .4px; color: var(--card-ink); }
.fo-ctt td.d { font: 400 20px/1 var(--disp); letter-spacing: .4px; }
.fo-ctt td small { display: block; margin-top: 4px; font: 900 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.fo-ctt td.x { text-align: right; white-space: nowrap; width: 1%; }
.fo-ctt td.x .rm-btn { margin: 2px 2px 5px; }
.fo-ctt tbody tr:hover td { background: var(--card-hov); color: var(--card-ink); }
.fo-ctt tbody tr.me td, .fo-ctt tbody tr.me:hover td { background: var(--tm); color: var(--on-tm); }
.fo-ctt tbody tr.me .nm, .fo-ctt tbody tr.me td b, .fo-ctt tbody tr.me small { color: var(--on-tm); }
.fo-ctt tbody tr.me .rm-bd.white { background: #fff; color: var(--ink); }
.fo-ctt .logos { display: inline-flex; gap: 3px; align-items: center; }
@media (max-width: 760px) {
  .fo-ctt, .fo-ctt tbody { display: block; }
  .fo-ctt thead { display: none; }
  .fo-ctt tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start;
    background: var(--card); border-top: 3px solid var(--ink); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .fo-ctt tbody tr:first-child { border-top: 0; }
  .fo-ctt tbody tr:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
  .fo-ctt tbody tr.me { background: var(--tm); }
  .fo .fo-ctt td, .fo .fo-ctt tbody tr:nth-child(even) td, .fo .fo-ctt tbody tr.me td, .fo .fo-ctt tbody tr:hover td { background: none; border: 0; }
  .fo .fo-ctt td { padding: 6px 10px; text-align: left !important; min-width: 0; }
  .fo-ctt td.p { grid-column: 1 / 3; padding: 10px 10px 4px; }
  .fo-ctt td.o { grid-column: 3; justify-self: end; padding: 10px 10px 4px; }
  .fo-ctt td.a { display: none; }
  .fo-ctt td.w { grid-column: 1 / -1; }
  .fo .fo-ctt td.x { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0 4px; width: 100%; padding: 2px 7px 8px; white-space: normal; }
  .fo-ctt td.x:empty { display: none; }
  .fo-ctt td.x .rm-btn, .fo-ctt td.x .fo-chip { flex: 1 1 0; }
  .fo-ctt td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 4px; font: 900 9.5px/1 var(--sans);
    letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .fo-ctt tr.me td[data-l]::before { color: var(--on-tm); }
  .fo-ctt td.o[data-l]::before { display: none; }
  .fo-tags .age { display: inline; margin: 0 6px 0 4px; font: 900 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
  .fo-pn .nm { font-size: 20px; white-space: normal; }
  .fo-big .v { font-size: 46px; }
  .fo-ctt td.c b, .fo-ctt td.big { font-size: 22px; }
}

/* ------------------------------------------------------------- trades -- */
/* every club as a crest you can press; the one you are talking to is gold */
.fo-teams { display: flex; gap: 6px; flex-wrap: wrap; }
.fo-tbtn { position: relative; width: 50px; height: 50px; display: grid; place-items: center; margin: 3px; padding: 0; border: 0; cursor: pointer;
  background: #fff; box-shadow: var(--frame); }
.fo-tbtn img { width: 32px; height: 32px; image-rendering: pixelated; }
.fo-tbtn:hover { background: var(--gold-hi); }
.fo-tbtn.on { background: var(--gold); box-shadow: var(--frame), 0 0 0 6px var(--gold); }
.fo-tbtn .need { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); padding: 2px 4px 1px;
  background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #000; font: 900 9.5px/1 var(--sans); letter-spacing: .04em; }
/* what the Film Room branch adds to a trade row */
.fo-tr { display: inline-block; margin-left: 6px; padding: 2px 5px 1px; background: var(--ink); color: #fff; box-shadow: 0 0 0 2px #000;
  font: 900 9.5px/1.1 var(--sans); text-transform: uppercase; letter-spacing: .06em; }
/* one side of the deal: a list of men to tick and the picks under it */
.fo-side .list { max-height: 460px; overflow-y: auto; margin: 3px; box-shadow: var(--frame); background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-pick { display: flex; align-items: center; gap: 8px; padding: 6px 9px; cursor: pointer; border-top: 2px solid var(--card-line);
  font: 800 13px/1.2 var(--sans); background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-pick:first-child { border-top: 0; }
.fo-pick:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-pick:hover { background: var(--card-hov); color: var(--card-ink); }
.fo-pick.on { background: var(--gold); color: var(--ink); }
.fo-pick .box { width: 20px; height: 20px; flex: none; display: grid; place-items: center; background: #fff; color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink); font: 400 18px/1 var(--disp); }
.fo-pick.on .box { background: var(--ink); color: var(--gold); }
.fo-pick .pxface { width: 32px; height: 32px; flex: none; background: var(--tm); box-shadow: var(--frame-2); margin: 2px; image-rendering: pixelated; }
/* a long name wraps rather than losing its end ("D'Arco Perkins-McAllister") */
.fo-pick .nm { flex: 1; min-width: 0; overflow-wrap: anywhere; font: 400 18px/1.05 var(--disp); letter-spacing: .3px; text-transform: uppercase; }
.fo-pick .nm .seen { font: 900 10px/1 var(--sans); color: inherit; }
.fo-pick .mn { font: 900 11px/1 var(--sans); white-space: nowrap; }
.fo-pick .ovr { height: 26px; min-width: 32px; font-size: 19px; }
.fo-picks { display: flex; gap: 4px; flex-wrap: wrap; padding: 10px 0 0; }
.fo-pk { cursor: pointer; margin: 3px; padding: 5px 8px 4px; border: 0; background: #fff; color: var(--ink); box-shadow: var(--frame-2);
  font: 900 11px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.fo-pk:hover { background: var(--gold-hi); }
.fo-pk.on { background: var(--gold); }
/* the balance meter: no, close, yes — and where this deal sits */
.fo-meter { position: relative; height: 24px; margin: 6px 3px 3px; box-shadow: var(--frame);
  background: linear-gradient(90deg, var(--red) 0 40%, var(--orange) 40% 50%, var(--green) 50% 100%); }
.fo-meter > b { position: absolute; top: -5px; bottom: -5px; width: 8px; background: #fff; box-shadow: 0 0 0 2px var(--ink); }
.fo-ends { display: flex; justify-content: space-between; margin: 6px 3px 0; font: 900 10px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.fo-verdict { margin: 8px 3px 3px; padding: 8px 10px; box-shadow: var(--frame); font: 800 14px/1.35 var(--sans); background: var(--ink); color: #fff; }
.fo-verdict.ok { background: var(--green); } .fo-verdict.no { background: var(--red); }
/* an offer another club has made you */
.fo-offer { display: grid; gap: 6px; margin: 3px; padding: 10px 12px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-offer .hd { display: flex; align-items: center; gap: 8px; font: 400 22px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.fo-offer .ln { font: 800 13px/1.35 var(--sans); }
.fo-offer .fo-step { margin-right: 4px; }
/* the deal as it stands, two columns */
.fo-deal-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 6px; }
.fo-deal-cols > div { margin: 3px; padding: 8px 10px; background: var(--card); box-shadow: var(--frame); min-width: 0; color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-deal-cols .it { padding: 4px 0; border-top: 2px solid var(--card-line); font: 400 18px/1.05 var(--disp); letter-spacing: .3px; text-transform: uppercase; }
.fo-deal-cols .fo-step + .it { border-top: 0; }
.fo-deal-cols .cap { margin-top: 6px; font: 800 12px/1.35 var(--sans); color: var(--soft); }
.fo-deal-cols .cap b { color: inherit; }
.fo-tx { display: flex; gap: 10px; align-items: center; padding: 7px 10px; background: var(--card); border-top: 2px solid var(--card-line); font: 800 13px/1.35 var(--sans); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-tx:first-child { border-top: 0; }
.fo-tx:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-tx .when { flex: none; width: 128px; font: 900 10.5px/1.2 var(--sans); letter-spacing: .06em; color: var(--card-ink); text-transform: uppercase; }
.fo-tx .logos { flex: none; display: flex; gap: 3px; }
.fo-txs { margin: 3px; box-shadow: var(--frame); }
/* the trades log sits in the narrow column: the year takes its own width */
.fo-trades .fo-tx .when { width: auto; }
/* dead money sits in the narrow column too: the names wrap, the money shows */
.fo-dead td { white-space: normal; }
.fo-dead td.r { white-space: nowrap; }

/* ------------------------------------------------------ re-sign cards -- */
.fo-grid.fo-rs { grid-template-columns: repeat(auto-fill, minmax(min(330px, 100%), 1fr)); }
.fo-card { display: flex; flex-direction: column; gap: 8px; margin: 3px; padding: 10px 11px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); min-width: 0; --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-card .top { display: flex; gap: 10px; align-items: center; }
.fo-card .top .who { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fo-card .top .ov { flex: none; align-self: flex-start; }
.fo-card .nm { font: 400 24px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.fo-card .nm a { color: inherit; text-decoration: none; }
.fo-card .nm a:hover { color: inherit; text-decoration: underline; }
.fo-card .meta { font: 800 12px var(--sans); color: var(--soft); }
.fo-card .ft { display: flex; gap: 4px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; }
.fo-card.done { background: var(--green); color: #fff; --soft: #fff; --txt-2: #fff; --txt-3: #fff; }
/* he walked out: ink, and the words stay white — never a washed-out grey */
.fo-card.gone { background: var(--ink); color: #fff; --soft: #fff; --txt-2: #fff; --txt-3: #fff; }
.fo-card.gone .top .rm-fc { box-shadow: var(--frame-2), inset 0 0 0 99px rgba(13, 27, 42, .45); }
.fo-rs-tags { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.fo-rs-tags .fo-chip { margin: 2px; }
.fo-rs-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.fo-rs-nums > div { margin: 3px; padding: 6px 8px 5px; background: var(--ink); color: #fff; box-shadow: var(--frame-2); min-width: 0; }
.fo-rs-nums span { display: block; font: 900 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-rs-nums b { display: block; margin-top: 4px; font: 400 24px/1 var(--disp); white-space: nowrap; }

/* ------------------------------------------------------------ negotiation -- */
/* Shared with Storylines (convo_view) and the camp report: the header plate,
   the log over the room, the lines, the adviser and the answers. */
.fo-talk { display: grid; gap: 12px; }
.fo-step { font: 900 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
/* who you are talking to: a plate in his club's colour */
.fo-th { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin: 3px; padding: 12px; background: var(--tm); color: var(--on-tm);
  box-shadow: var(--frame); }
.fo-th .pic { width: 134px; height: 134px; box-sizing: border-box; flex: none; display: grid; place-items: end center; overflow: hidden;
  background: #fff; box-shadow: var(--frame); margin: 3px; }
.fo-th .pic .pxface { width: 128px; height: 128px; image-rendering: pixelated; }
.fo-th .id { min-width: 200px; flex: 1; }
.fo-th .nm { font: 400 44px/.95 var(--disp); letter-spacing: .5px; text-transform: uppercase; text-shadow: 3px 3px 0 var(--tm-sh); }
.fo-th .meta { font: 800 13px/1.5 var(--sans); }
.fo-th .fo-step { color: inherit; }
.fo-read { flex: 1; min-width: min(250px, 100%); margin: 3px; padding: 9px 11px; background: var(--win); color: #fff; box-shadow: var(--frame); }
.fo-read .k { margin-top: 4px; font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.fo-read .arch { font: 400 24px/1 var(--disp); }
.fo-read p { font: 800 12.5px/1.4 var(--sans); margin: 3px 0 6px; }
.fo-tb { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
/* the log: the room's picture behind it (SceneBg), every line on a solid bubble */
.fo-log { display: flex; flex-direction: column; gap: 8px; max-height: 470px; overflow-y: auto; margin: 3px; padding: 12px;
  background-color: var(--ink); background-size: cover; background-position: center; image-rendering: pixelated; box-shadow: var(--frame); }
.fo-say { display: flex; gap: 8px; align-items: flex-end; }
.fo-say .pxface { width: 48px; height: 48px; flex: none; margin: 2px; background: var(--tm); box-shadow: var(--frame-2); image-rendering: pixelated; }
.fo-say .bub { max-width: 88%; margin: 2px; padding: 8px 11px; background: #fff; color: var(--ink); box-shadow: var(--frame-2);
  font: 800 14px/1.4 var(--sans); }
.fo-say.you { justify-content: flex-end; }
.fo-say.you .bub { background: var(--tm); color: var(--on-tm); }
.fo-say .you-tag { width: 48px; height: 48px; flex: none; display: grid; place-items: center; margin: 2px; background: var(--gold); color: var(--ink);
  box-shadow: var(--frame-2); font: 400 20px/1 var(--disp); }
/* his patience (or mood) as a pixel bar */
.fo-mood { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 3px; padding: 8px 10px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-mood .w { min-width: 96px; font: 400 24px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.fo-mood .fo-bar { flex: 1; min-width: 120px; }
.fo-mood .d { min-width: 34px; text-align: right; font: 400 22px/1 var(--disp); color: var(--card-ink); }
.fo-mood.hidden { background: var(--ink); color: #fff; font: 800 13px var(--sans); }
/* your adviser: a small dialogue box */
.fo-agm { display: flex; gap: 10px; align-items: center; margin: 3px; padding: 9px 10px; background: var(--card); color: var(--card-ink);
  box-shadow: var(--frame); border-top: 3px solid var(--gold); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-agm .pxface { width: 48px; height: 48px; flex: none; margin: 2px; background: var(--tm); box-shadow: var(--frame-2); image-rendering: pixelated; }
.fo-agm .t { font: 800 13.5px/1.4 var(--sans); }
.fo-agm .w { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fo-agm-talk { align-items: flex-start; }
.fo-agm-talk .ln { font: 800 15px/1.4 var(--sans); }
.fo-agm-talk .fo-row { gap: 4px; }
.fo-talk-meta { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; margin-top: 6px; }
/* his overall in the talk, always gold: the one number the room turns on */
.fo-ovr-gold { display: inline-grid; place-items: center; min-width: 54px; height: 40px; padding: 0 10px; margin: 3px;
  background: var(--gold); color: var(--ink); box-shadow: var(--frame); font: 400 34px/1 var(--disp); }
/* the answers: choice rows, the gold cursor on the one you point at */
.fo-opts { display: grid; gap: 6px; }
.fo-opt { position: relative; display: flex; gap: 10px; align-items: center; width: calc(100% - 6px); margin: 3px; padding: 10px 12px 9px 32px;
  text-align: left; cursor: pointer; border: 0; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); font: 800 14.5px/1.35 var(--sans); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-opt::before { content: ''; position: absolute; left: 9px; top: 50%; width: 14px; height: 22px; margin-top: -11px;
  background: var(--cur) center / 100% 100% no-repeat; image-rendering: pixelated; visibility: hidden; }
.fo-opt:hover:not(:disabled)::before, .fo-opt:focus-visible::before, .fo-opt.best::before { visibility: visible; }
.fo-opt.best::before { background-image: var(--cur-ink); animation: rm-bob .7s steps(2, jump-none) infinite; }
.fo-opt .n { width: 30px; height: 30px; flex: none; display: grid; place-items: center; background: var(--tm); color: var(--on-tm);
  box-shadow: var(--frame-2); margin: 2px; font: 400 22px/1 var(--disp); }
.fo-opt .tx { flex: 1; min-width: 0; }
.fo-opt .tag { flex: none; }
.fo-opt:hover:not(:disabled), .fo-opt:focus-visible { background: var(--card-hov); color: var(--card-ink); }
.fo-opt:active:not(:disabled) { transform: translateY(2px); }
.fo-opt.best, .fo-opt.best:hover { background: var(--gold); color: var(--ink); }
.fo-opt.best .n { background: var(--ink); color: var(--gold); }
.fo-opt.maybe, .fo-opt.maybe:hover { background: var(--green); color: #fff; }
/* an answer your staff rules out: only its words are struck (.say), never
   its number, its badge or the line under it */
.fo-opt.out, .fo-opt.out:hover { background: var(--ink); color: #c5d2e3; }
.fo-opt.out .n { background: var(--ink-2); color: #c5d2e3; }
.fo-opt.out .say { text-decoration: line-through; text-decoration-thickness: 2px; }
.fo-opt.out .tag { background: var(--red); color: #fff; }
.fo-opt.maybe .tag { background: #fff; color: var(--ink); }
.fo-opt .tx small { display: block; margin-top: 3px; font: 900 11px/1.35 var(--sans); letter-spacing: .02em; color: inherit; }
.fo-opt:disabled { cursor: default; background: var(--ink); color: #c5d2e3; }
.fo-opt:disabled .n { background: var(--ink-2); color: #c5d2e3; }
.fo-result { margin: 3px; padding: 12px 14px; box-shadow: var(--frame); color: #fff; }
.fo-result.ok { background: var(--green); } .fo-result.no { background: var(--red); }
.fo-result.wait { background: var(--violet); }
.fo-result h3 { margin: 0 0 8px; font: 400 32px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; text-shadow: 2px 2px 0 var(--ink); }
.fo-result .kv2 { display: flex; gap: 6px 14px; flex-wrap: wrap; font: 800 13.5px/1.35 var(--sans); }
/* the deal as it stands: four numbers that fill in as the talk goes */
.fo-terms { container-type: inline-size; }
.fo-terms .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.fo-terms .c { display: grid; gap: 4px; margin: 3px; padding: 7px 4px 6px; text-align: center; background: var(--gold); color: var(--ink); box-shadow: var(--frame-2); min-width: 0; }
.fo-terms .c span { font: 900 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fo-terms .c b { font: 400 26px/1 var(--disp); }
@container (max-width: 440px) { .fo-terms .row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the negotiation screen itself: a portrait window and the table */
.fo-man { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.fo-man .nm2 { font: 400 34px/.95 var(--disp); letter-spacing: .5px; text-transform: uppercase; color: var(--gold); }
.fo-man .rl { margin-top: 4px; font: 900 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.fo-mots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 4px; }
.fo-talkroom .fo-log { max-height: 420px; min-height: 260px; }
.fo-talkroom .rm-dlg .rm-say { min-height: 1.4em; }
.fo-talkroom .rm-dlg .rm-por .pxface { width: 64px; height: 64px; }
.fo-talkroom .fo-opts { margin-top: 10px; }

/* ------------------------------------------------------------- owner -- */
.fo-owner .rm-dlg { border-top-color: var(--gold); }
/* a review line as a chip ("Give the kids a chance: …: met") wraps inside
   the dialogue box instead of running off a phone */
.fo .rm-dlg .fo-row .fo-chip { white-space: normal; max-width: calc(100% - 4px); }
.fo-sec { flex: 1; min-width: min(220px, 100%); }
.fo-sec .fo-bar { height: 24px; }
.fo-sec .lb { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; margin-bottom: 6px; font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; }
.fo-sec .lb b { font: 400 24px/.8 var(--disp); color: var(--gold); letter-spacing: .3px; }
.rm-dlg .fo-sec .lb b, .fo-goalc .fo-sec .lb b { color: var(--card-ink); }
.fo-goalc { margin: 3px 3px 8px; padding: 10px 12px; background: var(--card); box-shadow: var(--frame); color: var(--card-ink); --soft: var(--card-ink); --txt-2: var(--card-ink); --txt-3: var(--card-ink); }
.fo-grank { display: block; margin-bottom: 5px; font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--card-ink); }
.fo-goalh { display: flex; align-items: center; gap: 10px; }
.fo-goalh b { font: 400 22px/1.05 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.fo-goalh .fo-chip { margin-left: auto; flex: none; }
.fo-gbar { position: relative; height: 16px; margin: 9px 2px 6px; padding: 3px; background: var(--ink); box-shadow: 0 0 0 2px #000; }
.fo-gbar i { display: block; height: 100%; }
.fo-gbar::after { content: ''; position: absolute; inset: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ink) calc(10% - 2px) 10%); }
.fo-gat { font: 900 11px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.fo-quote { margin: 3px; padding: 10px 12px; background: var(--card); color: var(--card-ink); box-shadow: var(--frame); font: 800 15px/1.4 var(--sans); }
.fo-money > summary { display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.fo-money > summary::-webkit-details-marker { display: none; }
.fo-money[open] > summary .rm-opt::before { visibility: visible; transform: rotate(90deg); }
.fo-money .fo-tiles { margin-top: 10px; }

/* ------------------------------------------------------------- fired -- */
.fo-fired .fo-jobs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 10px; }
.fo-job { display: grid; gap: 8px; justify-items: start; margin: 3px; padding: 12px; box-shadow: var(--frame); }
.fo-job .rm-crest { width: 76px; height: 76px; }
.fo-job .rm-crest img { width: 64px; height: 64px; image-rendering: pixelated; }
.fo-job b { font: 400 28px/1 var(--disp); letter-spacing: .5px; text-transform: uppercase; }
.fo-job span { font: 800 12.5px/1.3 var(--sans); }

/* ---- salary cap: how far over, in one number ------------------------- */
.fo .cap-over { font: 400 40px/.9 var(--disp); letter-spacing: .5px; padding: 0 4px; }

/* ---- a chair's sub-skills, out of 100 (the staff path sheet) --------- */
.fo-sk { display: grid; gap: 6px; }
.fo-sk-r { display: grid; grid-template-columns: 104px 1fr 30px; align-items: center; gap: 8px; }
.fo-sk-r .l { font: 900 10.5px/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.fo-sk-r .b { position: relative; height: 16px; background: var(--ink); box-shadow: 0 0 0 2px #000; overflow: hidden; }
.fo-sk-r .b > i { position: absolute; top: 3px; bottom: 3px; left: 3px; max-width: calc(100% - 6px); }
.fo-sk-r .b::after { content: ''; position: absolute; inset: 3px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--ink) calc(10% - 2px) 10%); }
.fo-sk-r .v { font: 400 22px/1 var(--disp); text-align: right; }
.fo-sk i.k0 { background: var(--red); } .fo-sk i.k1 { background: #2563eb; }
.fo-sk i.k2 { background: var(--green); } .fo-sk i.k3 { background: var(--gold); }
@media (max-width: 520px) { .fo-sk-r { grid-template-columns: 88px 1fr 28px; gap: 6px; } }

/* ---- over the cap, in the header ------------------------------------
   Drawn by game.js's header() from FrontOffice.capOutlook, and only when
   the club really is over. */
.hd-cap {
  display: inline-block; margin-left: 6px; padding: 4px 8px 3px; vertical-align: 1px;
  background: var(--red); color: #fff; text-decoration: none; box-shadow: var(--frame-2);
  font: 900 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
}
.hd-cap:hover { background: var(--gold); color: var(--ink); }
.todo.tm { background: var(--tm); color: var(--on-tm); }

/* --- a phone reads four columns; the rest wait behind "All columns" ------- */
@media (max-width: 620px) {
  .fo .fo-tw.narrow th:nth-child(n+5), .fo .fo-tw.narrow td:nth-child(n+5) { display: none; }
  .fo .fo-tw.narrow.all th:nth-child(n+5), .fo .fo-tw.narrow.all td:nth-child(n+5) { display: table-cell; }
}
.fo-cols { display: none; margin: 6px 3px 10px; }
@media (max-width: 620px) { .fo-cols { display: inline-flex; } }

@media (max-width: 760px) {
  .fo-tb { grid-template-columns: minmax(0, 1fr); }
  .fo-th .pic { width: 70px; height: 70px; }
  .fo-th .pic .pxface { width: 64px; height: 64px; }
  .fo-th .nm { font-size: 32px; }
  .fo-tx { flex-wrap: wrap; gap: 4px 10px; }
  .fo-tx .when { width: 100%; }
  .fo-man .nm2 { font-size: 28px; }
  .fo-big .v { font-size: 46px; }
  .fo-goalh { flex-wrap: wrap; }
  .fo-goalh .fo-chip { margin-left: 0; }
  /* a long window title wraps onto a second line rather than losing its end */
  .fo .rm-tb h1, .fo .rm-tb h2, .fo .rm-tb h3 { white-space: normal; line-height: 1.05; }
}

/* a talk in the list: face, name, what kind and where it stands */
.rm-tile.fo-talkrow { display: flex; align-items: center; gap: 10px; padding: 7px 10px 7px 7px; }
.fo-talkrow .w { display: grid; gap: 3px; min-width: 0; }
.fo-talkrow b { font: 400 20px/1 var(--disp); letter-spacing: .4px; text-transform: uppercase; }
.fo-talkrow .rm-bd { padding: 3px 5px 2px; font-size: 9.5px; }
/* four tiles in a row on a wide window, two on a phone */
.fo-tiles.fo-4, .fo-capkey.fo-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .fo-tiles.fo-4, .fo-capkey.fo-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the books in one line on a wide window: the headline number, then the tiles */
.fo-books { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 18px; align-items: center; }
.fo-books .fo-big { margin: 0 3px; }
@media (max-width: 760px) { .fo-books { grid-template-columns: minmax(0, 1fr); } }
/* a count on a gold title bar reads in ink */
.fo .rm-tb.gold .rm-pip { background: var(--ink); color: var(--gold); }
@media (max-width: 760px) {
  /* a phone: an answer's badge drops under its words rather than squeezing them */
  .fo-opt { flex-wrap: wrap; row-gap: 6px; }
  .fo-opt .tx { flex: 1 1 170px; }
  .fo-opt .tag { margin-left: 40px; }
}
@media (max-width: 760px) {
  /* a phone: the man's money drops under his name so the name has room */
  .fo-pick { flex-wrap: wrap; row-gap: 2px; }
  .fo-pick .mn { flex-basis: 100%; padding-left: 72px; }
  .fo-tbtn { width: 46px; height: 46px; }
}

/* --- no navy on navy (owner, 2026-09-26) ---------------------------------------
   The boxes inside a window are white cards (room.css --card); a label that
   was gold on navy is ink on the white, and a name on a card takes the card's
   own ink (or the club's words in your row). */
.fo-card .fo-step, .fo-offer .fo-step, .fo-deal-cols .fo-step, .fo-mood .fo-step, .fo-goalc .fo-step,
.fo-agm .fo-step, .fo-strip .fo-step, .fo-line .fo-step { color: var(--card-ink); }
.fo-strip.tm .fo-step, .fo-strip.red .fo-step, .fo-strip.green .fo-step { color: inherit; }
.fo-mood.hidden { --soft: #fff; }

/* --- the draft and scouting (draft_view.js injects its own sheet; these win
   over it with the #app id and only change colour) ----------------------------- */
#app .dv .dv-m:not(.tm):not(.good):not(.bad):not(.gold) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); }
#app .dv .dv-m:not(.tm):not(.good):not(.bad):not(.gold) .k { color: var(--card-ink); }
#app .dv-who .nm b, #app .dv-who .nm > a.plink, #app .dv a.plink { color: inherit; }
#app .dv a.plink:hover { color: inherit; text-decoration: underline; }
#app .dv-note:not(.tm) { background: var(--card); color: var(--card-ink); }
#app .dv-note:not(.tm) b { color: var(--card-ink); }
#app .dv-sp { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); }
#app .dv-sp .top { color: #fff; --soft: #c5d2e3; }
#app .dv-sec .h b { color: var(--card-ink); }
#app .dv-slot:not(.on) { background: var(--card); color: var(--card-ink); }
@media (max-width: 760px) {
  #app .dv-scout tr, #app .dv-scout tr:nth-child(even) { background: var(--card); color: var(--card-ink); --soft: var(--card-ink); }
  #app .dv-scout td[data-l]::before { color: var(--card-ink); }
}