/*
 * Frog's Draft Board -- styles
 *
 * Everything is scoped under .fdb-root so it can't leak onto the rest of
 * your WordPress theme. The original artifact used bare `body`, `a`, `*`
 * and `footer` selectors and a global `:root` for its color variables --
 * those are exactly the ones that would have bled into your site's own
 * header/footer/links, so they've been rewritten to hang off .fdb-root
 * instead. Everything else (class names, layout rules) is unchanged from
 * the working artifact.
 */

.fdb-root{
  --bg:#EEF3EA;
  --panel:#FFFFFF;
  --panel-2:#E2ECDD;
  --panel-3:#D2E1CB;
  --ink:#132A1C;
  --ink-dim:#51704F;
  --line:#CBDBC3;
  --accent:#1E6B45;
  --accent-ink:#FFFFFF;
  --gold:#A8781F;
  --gold-ink:#FFFFFF;
  --clock:#8B3E3E;
  --clock-ink:#FFFFFF;
  --riser:#1B7F3A;
  --faller:#B23A2E;
  --gone-strike: rgba(19,42,28,.42);
  --chip-qb:#A66A2E; --chip-rb:#2F6C93; --chip-wr:#2B7A5F;
  --chip-te:#755A94; --chip-k:#5F7568; --chip-dst:#8C4C3B;
  --chip-ink:#FFFFFF;
  --shadow: 0 1px 2px rgba(10,26,15,.07), 0 8px 24px -12px rgba(10,26,15,.20);
  --radius: 10px;

  background:var(--bg);
  color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:22px 20px 64px;
}
@media (prefers-color-scheme: dark){
  .fdb-root:not([data-theme="light"]){
    --bg:#081209;
    --panel:#0F2015;
    --panel-2:#15301F;
    --panel-3:#1C3E27;
    --ink:#E3F1E1;
    --ink-dim:#87AC8C;
    --line:#25452E;
    --accent:#49C57F;
    --accent-ink:#04140A;
    --gold:#E3B24A;
    --gold-ink:#261A00;
    --clock:#E2867F;
    --clock-ink:#2C0C09;
    --riser:#5FD98A;
    --faller:#E98673;
    --gone-strike: rgba(227,241,225,.36);
    --chip-qb:#DBA262;
    --chip-rb:#74A9D6;
    --chip-wr:#5DC1A0;
    --chip-te:#B79BD6;
    --chip-k:#8FAE96;
    --chip-dst:#D08871;
    --chip-ink:#0A1A0D;
    --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 30px -14px rgba(0,0,0,.7);
  }
}
/* Optional manual override: if your theme ever sets data-theme="dark" on
   this element (or you add it yourself in the block editor's "Additional
   CSS Class" field), force dark regardless of OS setting. */
.fdb-root[data-theme="dark"]{
  --bg:#081209;
  --panel:#0F2015;
  --panel-2:#15301F;
  --panel-3:#1C3E27;
  --ink:#E3F1E1;
  --ink-dim:#87AC8C;
  --line:#25452E;
  --accent:#49C57F;
  --accent-ink:#04140A;
  --gold:#E3B24A;
  --gold-ink:#261A00;
  --clock:#E2867F;
  --clock-ink:#2C0C09;
  --gone-strike: rgba(227,241,225,.36);
  --chip-qb:#DBA262;
  --chip-rb:#74A9D6;
  --chip-wr:#5DC1A0;
  --chip-te:#B79BD6;
  --chip-k:#8FAE96;
  --chip-dst:#D08871;
  --chip-ink:#0A1A0D;
  --shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 30px -14px rgba(0,0,0,.7);
}

.fdb-root, .fdb-root *{ box-sizing:border-box; }
.fdb-root .mono{ font-family:"IBM Plex Mono", ui-monospace, "SF Mono", monospace; font-variant-numeric:tabular-nums; }
.fdb-root .display{ font-family:"Teko", "Work Sans", sans-serif; font-weight:600; letter-spacing:.01em; }
.fdb-root a{ color:inherit; }

.fdb-root.wrap{
  max-width:1180px;
  margin:0 auto;
}

/* ---------- Scoreboard header ---------- */
.fdb-root .scoreboard{
  position:sticky; top:0; z-index:20;
  background:var(--bg);
  padding-top:6px;
  padding-bottom:14px;
}
.fdb-root .scoreboard::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height:24px;
  background:linear-gradient(var(--bg), transparent);
  pointer-events:none;
}
.fdb-root .board-panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.fdb-root .title-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.fdb-root .title-row h1{
  margin:0;
  font-size:clamp(28px, 4vw, 38px);
  line-height:.9;
  text-transform:uppercase;
  text-wrap:balance;
}
.fdb-root .title-row .sub{
  color:var(--ink-dim);
  font-size:13px;
  letter-spacing:.02em;
}
.fdb-root .tallies{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.fdb-root .tally{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 12px;
  display:flex;
  align-items:baseline;
  gap:7px;
  min-width:0;
}
.fdb-root .tally b{
  font-family:"IBM Plex Mono", monospace;
  font-size:17px;
  font-variant-numeric:tabular-nums;
}
.fdb-root .tally span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-dim);
  white-space:nowrap;
}
.fdb-root .tally.mine b{ color:var(--gold); }
.fdb-root .tally.avail b{ color:var(--accent); }

.fdb-root .controls{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.fdb-root .search{
  flex:1 1 220px;
  min-width:180px;
  position:relative;
}
.fdb-root .search input{
  width:100%;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  padding:9px 12px 9px 32px;
}
.fdb-root .search input:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.fdb-root .search svg{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  opacity:.55; pointer-events:none;
}
.fdb-root .pos-filters{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}
.fdb-root .pos-chip-btn{
  font-family:"IBM Plex Mono", monospace;
  font-size:12px;
  font-weight:600;
  letter-spacing:.03em;
  padding:7px 11px;
  border-radius:7px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--ink-dim);
  cursor:pointer;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.fdb-root .pos-chip-btn:hover{ color:var(--ink); }
.fdb-root .pos-chip-btn[aria-pressed="true"]{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}
.fdb-root .toggle-btn{
  display:flex; align-items:center; gap:7px;
  font-size:13px;
  color:var(--ink-dim);
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
  white-space:nowrap;
}
.fdb-root .toggle-btn .box{
  width:14px; height:14px;
  border-radius:4px;
  border:1.5px solid var(--ink-dim);
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.fdb-root .toggle-btn[aria-pressed="true"] .box{
  background:var(--accent);
  border-color:var(--accent);
}
.fdb-root .toggle-btn[aria-pressed="true"] .box::after{
  content:"\2713"; font-size:10px; color:var(--accent-ink); line-height:1;
}
.fdb-root .reset-btn, .fdb-root .undo-btn, .fdb-root .trend-btn{
  font-size:12px;
  color:var(--ink-dim);
  background:transparent;
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 12px;
  cursor:pointer;
}
.fdb-root .reset-btn{ margin-left:auto; }
.fdb-root .reset-btn:hover, .fdb-root .undo-btn:hover, .fdb-root .trend-btn:hover{ color:var(--ink); border-color:var(--ink-dim); }
.fdb-root .reset-btn.confirming{
  color:var(--accent-ink);
  background:var(--accent);
  border-color:var(--accent);
}
.fdb-root .undo-btn:disabled{ opacity:.4; cursor:not-allowed; }

/* ---------- Trend sparkline (per row) ---------- */
.fdb-root .r-trend{
  display:flex; align-items:center; justify-content:center;
  min-width:54px;
  cursor:help;
}
.fdb-root .spark-none{ color:var(--ink-dim); font-size:12px; }
.fdb-root .spark-svg path{ fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.fdb-root .spark-svg.spark-up path, .fdb-root .spark-svg.spark-up circle{ stroke:var(--riser); fill:var(--riser); }
.fdb-root .spark-svg.spark-down path, .fdb-root .spark-svg.spark-down circle{ stroke:var(--faller); fill:var(--faller); }
.fdb-root .spark-svg.spark-flat path, .fdb-root .spark-svg.spark-flat circle{ stroke:var(--ink-dim); fill:var(--ink-dim); }

/* ---------- Trending leaderboard popup ---------- */
.fdb-root .trend-overlay{
  position:fixed; inset:0;
  background:rgba(8,18,9,.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  z-index:50;
}
/* This page ships three ways -- as a raw file, inside this WordPress plugin, and wrapped by
   the claude.ai Artifact skeleton (whose own reset hides [hidden] elements) -- so don't rely
   on any host's ambient [hidden] default; state it explicitly, since the display:flex above
   would otherwise unhide this on the two hosts (this plugin included) with no such reset. */
.fdb-root .trend-overlay[hidden]{ display:none !important; }
.fdb-root .trend-popup{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  width:100%; max-width:760px; max-height:82vh;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.fdb-root .trend-popup-head{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.fdb-root .trend-popup-head h2{
  font-family:"Teko", sans-serif; font-weight:600; font-size:26px;
  color:var(--ink); text-transform:uppercase; letter-spacing:.03em;
  margin-right:auto;
}
.fdb-root .trend-tabs{ display:flex; gap:6px; }
.fdb-root .trend-tab{
  font-family:"IBM Plex Mono", monospace;
  font-size:12px; font-weight:600;
  padding:6px 10px; border-radius:7px;
  border:1px solid var(--line); background:var(--panel-2); color:var(--ink-dim);
  cursor:pointer;
}
.fdb-root .trend-tab[aria-pressed="true"]{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.fdb-root .trend-close{
  font-size:20px; line-height:1; color:var(--ink-dim);
  background:transparent; border:none; cursor:pointer; padding:4px 6px;
}
.fdb-root .trend-close:hover{ color:var(--ink); }
.fdb-root .trend-note{
  padding:10px 20px 0; font-size:11.5px; color:var(--ink-dim);
}
.fdb-root .trend-body{
  display:grid; grid-template-columns:1fr 1fr; gap:0;
  overflow-y:auto; padding:8px 20px 20px;
}
.fdb-root .trend-col h3{
  font-family:"Teko", sans-serif; font-weight:600; font-size:16px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim);
  margin:12px 0 8px;
}
.fdb-root .trend-col:first-child{ border-right:1px solid var(--line); padding-right:16px; }
.fdb-root .trend-col:last-child{ padding-left:16px; }
.fdb-root .trend-row{
  display:flex; align-items:center; gap:8px;
  padding:6px 0;
  border-bottom:1px dashed var(--line);
  font-size:13px;
}
.fdb-root .trend-row:last-child{ border-bottom:none; }
.fdb-root .trend-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fdb-root .trend-change{ font-size:12px; flex-shrink:0; }
.fdb-root .trend-change.spark-up{ color:var(--riser); }
.fdb-root .trend-change.spark-down{ color:var(--faller); }
.fdb-root .trend-empty{ font-size:12.5px; color:var(--ink-dim); padding:6px 0; }

/* ---------- Player profile popup (FantasyPros expert note + news) ---------- */
.fdb-root .r-name.has-profile{
  background:none; border:none; padding:0; margin:0; cursor:pointer;
  font: inherit; color:inherit;
  border-bottom:1.5px dotted var(--ink-dim);
}
.fdb-root .r-name.has-profile:hover{ color:var(--accent); border-bottom-color:var(--accent); }
.fdb-root .pp-overlay{
  position:fixed; inset:0;
  background:rgba(8,18,9,.55);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  z-index:50;
}
.fdb-root .pp-overlay[hidden]{ display:none !important; }
.fdb-root .pp-popup{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  width:100%; max-width:480px; max-height:82vh;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.fdb-root .pp-head{
  display:flex; align-items:flex-start; gap:12px;
  padding:16px 20px;
  border-bottom:1px solid var(--line);
}
.fdb-root .pp-head-main{ flex:1; min-width:0; }
.fdb-root .pp-head h2{
  font-family:"Teko", sans-serif; font-weight:600; font-size:26px;
  text-transform:uppercase; letter-spacing:.02em;
  margin:0; color:var(--ink); line-height:1.1;
}
.fdb-root .pp-head-sub{ display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap; }
.fdb-root .pp-head-sub .pos-chip{ font-size:10px; }
.fdb-root .pp-head-sub span.pp-team{ font-size:12.5px; color:var(--ink-dim); }
.fdb-root .pp-close{
  font-size:20px; line-height:1; color:var(--ink-dim);
  background:transparent; border:none; cursor:pointer; padding:4px 6px;
}
.fdb-root .pp-close:hover{ color:var(--ink); }
.fdb-root .pp-body{ overflow-y:auto; padding:4px 20px 18px; }
.fdb-root .pp-fp-link{
  display:inline-flex; align-items:center; gap:6px; margin:10px 0 4px;
  font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-weight:600;
  color:var(--accent); text-decoration:none;
  border:1px solid var(--accent); border-radius:7px; padding:6px 10px;
}
.fdb-root .pp-fp-link:hover{ background:var(--accent); color:var(--accent-ink); }
.fdb-root .pp-section{ margin-top:16px; }
.fdb-root .pp-section h3{
  font-family:"Teko", sans-serif; font-weight:600; font-size:15px;
  text-transform:uppercase; letter-spacing:.04em; color:var(--ink-dim);
  margin:0 0 6px;
}
.fdb-root .pp-meta{
  font-size:11px; color:var(--ink-dim); margin-bottom:4px;
  font-family:"IBM Plex Mono", monospace;
}
.fdb-root .pp-note-text, .fdb-root .pp-news-headline, .fdb-root .pp-news-impact{ font-size:13px; line-height:1.5; }
.fdb-root .pp-news-headline{ font-weight:600; margin-bottom:2px; }
.fdb-root .pp-news-impact{ color:var(--ink-dim); }
.fdb-root .pp-quote{ border-left:3px solid var(--accent); padding-left:10px; }
.fdb-root .pp-empty{ font-size:12.5px; color:var(--ink-dim); padding:4px 0; }
.fdb-root .pp-footer-note{
  margin-top:18px; padding-top:12px; border-top:1px dashed var(--line);
  font-size:10.5px; color:var(--ink-dim); line-height:1.5;
}

/* ---------- Draft tracker ---------- */
.fdb-root .tracker{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:9px;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fdb-root .tracker-top{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.fdb-root .clock-pill{
  background:var(--clock);
  color:var(--clock-ink);
  border-radius:8px;
  padding:6px 12px;
  display:flex;
  align-items:baseline;
  gap:8px;
  flex-shrink:0;
}
.fdb-root .clock-pill .pick-num{
  font-family:"IBM Plex Mono", monospace;
  font-size:12px;
  opacity:.85;
}
.fdb-root .clock-pill .team{
  font-family:"Teko", sans-serif;
  font-weight:600;
  font-size:20px;
  line-height:1;
  text-transform:uppercase;
}
.fdb-root .tracker-needs{
  font-size:12px;
  color:var(--ink-dim);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.fdb-root .need-chip{
  background:var(--panel-3);
  border-radius:6px;
  padding:3px 7px;
  font-family:"IBM Plex Mono", monospace;
  font-size:11px;
}
.fdb-root .need-chip.filled{ opacity:.5; }
.fdb-root .tracker-your-turn{
  color:var(--gold);
  font-weight:600;
  font-size:13px;
}
.fdb-root .predictions-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--ink-dim);
  display:flex;
  align-items:center;
  gap:6px;
}
.fdb-root .predictions-label .info-dot{
  width:14px; height:14px;
  border-radius:50%;
  border:1px solid var(--ink-dim);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:9px;
  cursor:help;
}
.fdb-root .predictions-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
  /* A few extra px of room on each side, bleeding into the tracker panel's own
     padding, so the strip's own scrollbar doesn't appear when the cards just
     barely overflow. NOTE: this only works because width is set explicitly --
     a flex item with width:auto and align-items:stretch (the default, which
     is what this rule used to rely on via margin+padding alone) resolves its
     width so the margin box exactly matches the container, silently
     cancelling out any padding/margin combination that nets to zero. Setting
     width here overrides that, so the negative margin actually gains room
     instead of being absorbed. */
  margin:0 -10px;
  width:calc(100% + 20px);
}
.fdb-root .pred-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:8px 10px;
  /* flex:1 1 130px (not the old min-width:150px + flex-shrink:0) is the actual fix
     for the recurring predictions-strip scrollbar bug: the old rule sized each card
     to its own content (player/team/runner-up name lengths), so the strip's total
     width -- and therefore whether it overflowed -- varied pick to pick with no
     fixed relationship to the container. flex-grow:1 here means all 6 cards always
     divide the container's actual width evenly and exactly, so there's nothing left
     over to overflow, regardless of how long any given state's names are. 130px is
     just the shrink floor for narrow/mobile widths, where 6 even cards would be
     unreadably thin -- overflow-x:auto on the strip still scrolls there, same as
     before. overflow:hidden here is the backstop that makes the ellipsis rules
     below actually clip instead of bleeding past the card's grown/shrunk width.
     See "Predictions-strip width fix" in the project doc for the two earlier,
     insufficient attempts (a margin/padding trick, then a fixed +20px buffer) and
     why a fixed buffer can't work when the content it's buffering against varies. */
  flex:1 1 130px;
  min-width:130px;
  overflow:hidden;
}
.fdb-root .pred-card .pc-slot{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px;
  color:var(--ink-dim);
  margin-bottom:2px;
}
.fdb-root .pred-card .pc-team{
  font-size:11.5px;
  font-weight:600;
  margin-bottom:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fdb-root .pred-card .pc-player{
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
}
.fdb-root .pred-card .pc-player .pc-player-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}
.fdb-root .pred-card .pc-conf{
  font-family:"IBM Plex Mono", monospace;
  font-size:10px;
  color:var(--ink-dim);
  margin-top:3px;
}
.fdb-root .pred-card .pc-runners{
  font-size:10px;
  color:var(--ink-dim);
  margin-top:4px;
  line-height:1.5;
}
.fdb-root .draft-done{
  text-align:center;
  padding:6px;
  font-size:13px;
  color:var(--ink-dim);
}

/* ---------- Round dividers ---------- */
.fdb-root .round-divider{
  display:flex;
  align-items:center;
  gap:10px;
  margin:22px 0 8px;
  color:var(--ink-dim);
}
.fdb-root .round-divider .num{
  font-family:"Teko", sans-serif;
  font-weight:600;
  font-size:20px;
  color:var(--ink);
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.fdb-root .round-divider .range{
  font-size:11px;
  font-family:"IBM Plex Mono", monospace;
  white-space:nowrap;
}
.fdb-root .round-divider .rule{
  flex:1;
  height:1px;
  background:var(--line);
}

/* ---------- Player rows ---------- */
.fdb-root .rows{ display:flex; flex-direction:column; gap:6px; }
.fdb-root .row{
  display:grid;
  grid-template-columns: 44px 1fr auto auto auto auto 128px;
  align-items:center;
  gap:14px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px;
  padding:9px 12px;
  transition:opacity .12s ease, background .12s ease;
}
.fdb-root .row.is-gone{ opacity:.5; }
.fdb-root .row.is-mine{
  border-color:var(--gold);
  box-shadow: inset 3px 0 0 var(--gold);
}
.fdb-root .row.is-onclock{
  border-color:var(--clock);
}
.fdb-root .r-rank{
  font-family:"IBM Plex Mono", monospace;
  font-size:15px;
  color:var(--ink-dim);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.fdb-root .r-player{ min-width:0; }
.fdb-root .r-name-line{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.fdb-root .r-name{
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fdb-root .row.is-gone .r-name{
  text-decoration: line-through solid var(--gone-strike) 2px;
}
.fdb-root .r-meta{
  font-size:12px;
  color:var(--ink-dim);
  margin-top:2px;
}
.fdb-root .pos-chip{
  font-family:"IBM Plex Mono", monospace;
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.02em;
  padding:2px 6px;
  border-radius:5px;
  color:var(--chip-ink);
  flex-shrink:0;
}
.fdb-root .flag{
  font-size:10.5px;
  padding:2px 6px;
  border-radius:5px;
  border:1px solid var(--line);
  color:var(--ink-dim);
  cursor:help;
  flex-shrink:0;
}
.fdb-root .flag.keeper-flag{
  border-color:var(--gold);
  color:var(--gold);
}
.fdb-root .flag.mover-flag{
  font-family:"IBM Plex Mono", monospace;
  white-space:pre-line;
}
.fdb-root .flag.mover-flag-up{
  border-color:var(--riser);
  color:var(--riser);
}
.fdb-root .flag.mover-flag-down{
  border-color:var(--faller);
  color:var(--faller);
}
.fdb-root .r-stat{
  text-align:right;
  min-width:64px;
  cursor:help;
}
.fdb-root .r-stat .val{
  font-family:"IBM Plex Mono", monospace;
  font-size:15px;
  display:block;
  font-variant-numeric:tabular-nums;
}
.fdb-root .r-stat .lbl{
  font-size:9.5px;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ink-dim);
}
.fdb-root .r-fpts .val{ color:var(--ink); }
.fdb-root .r-adp .val{ color:var(--ink); }

.fdb-root .status-btn{
  justify-self:end;
  font-family:"Work Sans", sans-serif;
  font-size:11.5px;
  font-weight:600;
  padding:7px 8px;
  border-radius:7px;
  border:1px solid var(--line);
  background:var(--panel-2);
  color:var(--ink-dim);
  cursor:pointer;
  width:120px;
  text-align:center;
  line-height:1.25;
  transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.fdb-root .status-btn .sb-team{
  display:block;
  font-size:10px;
  font-weight:500;
  opacity:.85;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fdb-root .status-btn.st-mine{
  background:var(--gold);
  color:var(--gold-ink);
  border-color:var(--gold);
}
.fdb-root .status-btn.st-gone{
  background:transparent;
  color:var(--ink-dim);
}
.fdb-root .status-btn.st-avail:hover{ filter:brightness(1.05); }
.fdb-root .status-btn:disabled{ cursor:not-allowed; opacity:.85; }
.fdb-root .status-btn.st-locked{ cursor:not-allowed; }

.fdb-root .empty-state{
  text-align:center;
  color:var(--ink-dim);
  padding:48px 20px;
  font-size:14px;
}

/* ---------- Footer ---------- */
.fdb-root .fdb-footer{
  margin-top:36px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:var(--ink-dim);
  font-size:12px;
  line-height:1.6;
}
.fdb-root .fdb-footer .legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
  margin-bottom:10px;
}
.fdb-root .fdb-footer strong{ color:var(--ink); }

@media (max-width: 640px){
  .fdb-root .row{ grid-template-columns: 32px 1fr auto; }
  .fdb-root .r-stat.r-composite{ display:none; }
  .fdb-root .r-stat.r-adp{ display:none; }
  .fdb-root .r-trend{ display:none; }
  .fdb-root .status-btn{ width:auto; padding:7px 9px; font-size:11px; }
  .fdb-root .status-btn .sb-team{ display:none; }
  .fdb-root .trend-body{ grid-template-columns:1fr; }
  .fdb-root .trend-col:first-child{ border-right:none; border-bottom:1px solid var(--line); padding-right:0; padding-bottom:12px; margin-bottom:8px; }
  .fdb-root .trend-col:last-child{ padding-left:0; }
}

@media (prefers-reduced-motion: reduce){
  .fdb-root *{ transition:none !important; }
}