/* ==========================================================================
   Kelley Bets — Arbitrage board page overrides
   Loaded after styles.css (see <link> in arbitrage.html). Scoped to .arb-page
   so nothing else on the site is affected. styles.css is NOT modified.
   ========================================================================== */

/* 1) Board status strip — high-contrast status band, not a button.
   Overrides styles.css `.arb-not-live[data-state]` (11px/500 same-hue text on
   a tint that blended into the page): dark ink text on the state tint, a 3px
   state accent on the left (design-system status pattern), more padding, and a
   status dot so the strip reads as an indicator rather than a control. */
.arb-page .arb-not-live[data-state]{
  margin:0 -18px 14px;
  padding:12px 18px;
  border-bottom:1px solid var(--rule-2);
  border-left:3px solid var(--green);
  background:var(--green-bg);
  color:var(--ink);
  font:600 12px/1.55 var(--font-mono);
  letter-spacing:.04em;
}
.arb-page .arb-not-live[data-state]::before{
  content:"●";
  display:inline-block;
  margin-right:9px;
  font-size:9px;
  color:var(--green);
  vertical-align:1px;
}
.arb-page .arb-not-live[data-state="locked"]{border-left-color:var(--brass);background:var(--brass-bg)}
.arb-page .arb-not-live[data-state="locked"]::before{color:var(--brass)}
.arb-page .arb-not-live[data-state="unavailable"]{border-left-color:var(--loss);background:var(--loss-bg)}
.arb-page .arb-not-live[data-state="unavailable"]::before{color:var(--loss)}
.arb-page .arb-not-live[data-state="empty_current"],
.arb-page .arb-not-live[data-state="not_live"]{border-left-color:var(--rule-2);background:var(--surface-2);color:var(--mid)}
.arb-page .arb-not-live[data-state="empty_current"]::before,
.arb-page .arb-not-live[data-state="not_live"]::before{color:var(--muted)}
@media(max-width:820px){
  .arb-page .arb-not-live[data-state]{margin:0 -14px 12px;padding:12px 14px}
}

/* 2) Locked member-pick cards — clearly muted and distinct from live cards.
   Live rows stay var(--surface) with a green margin figure; locked rows get a
   flat muted surface-2 fill plus a brass left accent (design-system lock
   signal), a legible "Member pick" label chip, and ink lock-note text. */
.arb-page .arb-live-row.is-locked{
  background:var(--surface-2);
  border-left:3px solid var(--brass);
}
.arb-page .arb-live-row.is-locked header strong{color:var(--muted-text)}
.arb-page .arb-live-row.is-locked header span{
  align-self:start;
  color:var(--brass-text);
  font-size:10px;
  font-weight:600;
  border:1px solid var(--rule-2);
  border-radius:var(--radius);
  background:var(--surface);
  padding:4px 6px;
}
.arb-page .arb-live-row.is-locked li{
  background:var(--surface);
  border-color:var(--rule-2);
  color:var(--ink);
}
.arb-page .arb-live-row.is-locked footer{color:var(--muted-text)}

/* 6) Mobile audit 2026-08: footer tap targets + mobile card type bumps.
   Footer link rows need a real touch area; the mobile arb cards' 7.5px
   dt labels are below readable size on phones. */
body .site-footer .footer-head > a{
  min-height:44px;display:inline-flex;align-items:center;
}
@media(max-width:620px){
  body .site-footer .footer-col a{
    padding:9px 0;font-size:12.5px;line-height:1.4;
  }
  .arb-page .arb-mobile-board dt{font-size:8.5px}
  .arb-page .arb-mobile-board dd{font-size:11.5px}
  .arb-page .arb-card{padding:12px}
}