/* Below The Show — shared components v2. Requires tokens.css. */

/* IBM Plex (SIL Open Font License). Uses an installed copy first; otherwise the
   self-hosted file from scripts/fetch-fonts.sh. If neither exists, the fallback
   stacks in tokens.css apply and nothing breaks. */
@font-face { font-family: "IBM Plex Sans"; src: local("IBM Plex Sans"), local("IBMPlexSans"), url("/assets/fonts/IBMPlexSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: local("IBM Plex Sans Medium"), local("IBMPlexSans-Medium"), url("/assets/fonts/IBMPlexSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: local("IBM Plex Sans SemiBold"), local("IBMPlexSans-SemiBold"), url("/assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: local("IBM Plex Serif"), local("IBMPlexSerif"), url("/assets/fonts/IBMPlexSerif-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Serif"; src: local("IBM Plex Serif SemiBold"), local("IBMPlexSerif-SemiBold"), url("/assets/fonts/IBMPlexSerif-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: local("IBM Plex Mono"), local("IBMPlexMono"), url("/assets/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-md)/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button, input, select { font: inherit; color: inherit; }
a { color: var(--forest); text-underline-offset: 3px; }
a:hover { color: var(--forest-deep); }

:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
.btn--primary:focus-visible, .btn:focus-visible { outline-color: var(--forest); }
.on-forest :focus-visible, .bar :focus-visible { outline-color: var(--mustard); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s-2); top: -100px; z-index: 50;
  background: var(--mustard); color: var(--ink); padding: var(--s-2) var(--s-3);
  border-radius: var(--r-control); font-weight: 600; text-decoration: none;
}
.skip:focus { top: var(--s-2); }

/* ---------- top bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--forest); color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
}
.bar__in {
  max-width: var(--measure-wide); margin: 0 auto; height: var(--bar-h);
  display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-4);
}
.bar__mark { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
/* The logo is a wordmark (stadium + "Below the Show"); show it whole, never squeezed. */
.bar__mark img { display: block; height: 36px; width: auto; max-width: 52vw; object-fit: contain; }
.bar__mark span { color: #fff; position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 720px) { .bar__mark img { height: 40px; } }
.bar__league {
  color: rgba(255,255,255,.78); font-size: var(--t-sm); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.bar__spacer { flex: 1; }

/* league tabs: desktop in the bar, phone as a bottom dock */
.tabs { display: flex; gap: var(--s-1); }
.tabs a {
  position: relative; display: flex; align-items: center; min-height: var(--hit);
  padding: 0 var(--s-3); color: rgba(255,255,255,.82); text-decoration: none; font-weight: 500; font-size: var(--t-sm);
}
.tabs a:hover { color: #fff; }
.tabs a[aria-current="page"] { color: #fff; }
.tabs a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--s-3); right: var(--s-3); bottom: 6px;
  height: 3px; background: var(--mustard); border-radius: 2px;
}
.tabs svg { width: 20px; height: 20px; display: none; }

@media (max-width: 719px) {
  .bar .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--forest); justify-content: space-around;
    padding: var(--s-1) 0 calc(var(--s-1) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--forest-deep);
  }
  .tabs a { flex-direction: column; justify-content: center; gap: 2px; font-size: 11px; padding: var(--s-1) var(--s-2); }
  .tabs svg { display: block; }
  .tabs a[aria-current="page"]::after { left: 30%; right: 30%; top: 0; bottom: auto; }
  body.has-dock { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- page ---------- */
.page { max-width: var(--measure-narrow); margin: 0 auto; padding: var(--s-5) var(--s-4) var(--s-8); }
.page--wide { max-width: var(--measure-wide); }
.page-title {
  font: 600 var(--t-2xl)/1.15 var(--serif); letter-spacing: -0.015em; margin: 0;
}
@media (min-width: 720px) { .page-title { font-size: var(--t-3xl); } }
.lede { color: var(--muted); margin: var(--s-2) 0 0; max-width: 60ch; }
.section-title { font: 600 var(--t-lg)/1.3 var(--sans); margin: var(--s-6) 0 var(--s-3); }
.rule { border: 0; border-top: 1px solid var(--chalk); margin: var(--s-5) 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--hit); padding: 0 var(--s-4);
  border: 1px solid var(--chalk-strong); border-radius: var(--r-control);
  background: var(--card); color: var(--ink); font-weight: 600; font-size: var(--t-sm);
  cursor: pointer; text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:not(.btn--quiet):not(.btn--primary) { background: var(--mustard-tint); border-color: var(--mustard-strong); color: var(--ink); }
.btn:not(.btn--quiet):not(.btn--primary):hover { background: #ffeb99; }
.btn.is-armed, .btn.danger { background: var(--card); border-color: var(--brick); color: var(--brick); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--mustard); border-color: var(--mustard-strong); color: var(--ink); }
.btn--primary:hover { background: var(--mustard-strong); border-color: var(--mustard-strong); color: var(--ink); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--forest); padding: 0 var(--s-2); }
.btn--quiet:hover { background: var(--forest-tint); border-color: transparent; }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------- fields ---------- */
.field { display: grid; gap: var(--s-1); }
.field label { font-weight: 600; font-size: var(--t-sm); }
.field .hint { color: var(--muted); font-size: var(--t-sm); }
.field { min-width: 0; }
.field input, .field select {
  width: 100%; min-width: 0;
  min-height: var(--hit); padding: 0 var(--s-3); background: var(--card);
  border: 1px solid var(--chalk-strong); border-radius: var(--r-control);
}
.field input:focus-visible, .field select:focus-visible { outline-offset: 0; border-color: var(--forest); }
.field[data-error] input { border-color: var(--brick); }
.field .error { color: var(--brick); font-size: var(--t-sm); font-weight: 500; }

/* ---------- numbers ---------- */
.num { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dash { color: var(--muted); }

/* ---------- toast with undo ---------- */
.toast-dock {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 40;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom, 0px));
  width: min(92vw, 440px); pointer-events: none;
}
@media (max-width: 719px) { body.has-dock .toast-dock { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); } }
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: var(--s-3);
  background: var(--ink); color: #fff; border-radius: var(--r-sheet);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-4);
  box-shadow: 0 10px 30px rgba(20, 40, 28, .28);
  animation: toast-in var(--t-med) var(--ease);
}
.toast p { margin: 0; flex: 1; font-size: var(--t-sm); }
.toast button {
  min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-control);
  background: transparent; border: 1px solid rgba(255,255,255,.35); color: var(--mustard); font-weight: 600; cursor: pointer;
}
.toast button:focus-visible { outline-color: var(--mustard); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- notice (empty and error states) ---------- */
.notice {
  border: 1px dashed var(--chalk-strong); border-radius: var(--r-sheet);
  padding: var(--s-5); text-align: left; background: var(--card);
}
.notice h2 { font: 600 var(--t-lg)/1.3 var(--sans); margin: 0 0 var(--s-2); }
.notice p { margin: 0 0 var(--s-4); color: var(--ink-soft); max-width: 52ch; }
.notice--sample { border-style: solid; border-color: var(--mustard); background: var(--mustard-tint); padding: var(--s-3) var(--s-4); }
.notice--sample p { margin: 0; font-size: var(--t-sm); }

/* ---------- site shell: account photo, 3-bar menu, drawer ---------- */
.bar__in { gap: var(--s-2); }
.shell-actions { display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto; min-width: 0; max-width: 100%; }
@media (max-width: 480px) { .shell-actions { gap: 4px; } .bar__inner { padding-right: max(8px, env(safe-area-inset-right, 0px)); } .bar__inner > .shell-actions { margin-left: auto; } .bar__spacer { min-width: 0; } }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: var(--mustard); color: var(--ink); border: 2px solid rgba(255,255,255,.9);
  font: 700 15px/1 var(--sans); text-decoration: none; letter-spacing: .02em;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar svg { width: 22px; height: 22px; }
.avatar--out { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: transparent; border: 0; border-radius: var(--r-control); color: #fff; cursor: pointer; padding: 0;
}
.menu-btn:hover { background: rgba(255,255,255,.1); }
.menu-btn svg { width: 26px; height: 26px; }
.drawer-scrim { position: fixed; inset: 0; background: rgb(12 30 20 / .55); z-index: 40; opacity: 0; transition: opacity .2s; }
.drawer-scrim.is-open { opacity: 1; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41; width: min(340px, 88vw);
  background: var(--paper); color: var(--ink); box-shadow: -8px 0 24px rgb(0 0 0 / .18);
  display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.drawer.is-open { transform: none; }
@media (prefers-reduced-motion: reduce) { .drawer, .drawer-scrim { transition: none; } }
.drawer__head { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--forest); color: #fff; }
.drawer__head .avatar { width: 44px; height: 44px; }
.drawer__who { flex: 1; min-width: 0; }
.drawer__who strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__who span { font-size: var(--t-sm); opacity: .85; }
.drawer__close { color: #fff; }
.drawer nav { overflow-y: auto; padding: var(--s-2) 0 var(--s-5); }
.drawer h2 { font: 800 15px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--mustard); margin: var(--s-5) var(--s-4) var(--s-2); padding-bottom: 6px; border-bottom: 1px solid color-mix(in srgb, var(--mustard) 45%, transparent); }
:root:not([data-theme="night"]) .drawer h2 { color: #ffd83d; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer ul a, .drawer .drawer__action {
  display: flex; align-items: center; gap: var(--s-3); min-height: 44px; padding: 0 var(--s-4);
  color: var(--ink); text-decoration: none; font: 500 var(--t-md)/1.2 var(--sans); width: 100%;
  background: none; border: 0; text-align: left; cursor: pointer;
}
.drawer ul a:hover, .drawer .drawer__action:hover { background: var(--forest-tint); }
.drawer ul a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--mustard); font-weight: 700; }
.drawer__cta { margin: var(--s-3) var(--s-4) 0; }
.drawer__cta .btn { width: 100%; justify-content: center; }
body.drawer-open { overflow: hidden; }
/* Desktop: league tabs sit in the header beside the account photo and menu. */
@media (max-width: 719px) { .bar__league { display: none; } }

/* ---------- site footer ---------- */
.site-foot { border-top: 1px solid var(--chalk); margin-top: var(--s-8); padding: var(--s-5) var(--s-4) calc(var(--s-6) + 64px); color: var(--muted); font-size: var(--t-sm); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-2); }
.site-foot a { color: var(--ink-soft); display: inline-flex; align-items: center; min-height: 32px; }
@media (min-width: 720px) { .site-foot { padding-bottom: var(--s-6); } }

/* ---------- in-league bar ---------- */
.leaguebar { display: flex; gap: var(--s-1); overflow-x: auto; padding: var(--s-2) var(--s-3); background: var(--card); border-bottom: 1px solid var(--chalk); scrollbar-width: none; position: sticky; top: calc(var(--bar-h) + env(safe-area-inset-top, 0px)); z-index: 19; }
.leaguebar::-webkit-scrollbar { display: none; }
.leaguebar a { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border-radius: 999px; color: var(--ink); text-decoration: none; font: 600 var(--t-sm)/1 var(--sans); }
.leaguebar a:hover { background: var(--mustard-tint); }
.leaguebar a[aria-current="page"] { background: var(--mustard); }
@media (min-width: 720px) { .leaguebar { justify-content: center; } }
/* A closed drawer must never take up room, whatever a page's own styles say. */
.drawer[hidden], .drawer-scrim[hidden] { display: none !important; }
html, body { overflow-x: clip; }

/* ---------- your league on prospect pages ---------- */
.lg-status { display: inline-flex; align-items: center; min-height: 32px; }
.lg-owner { color: var(--ink-soft); font-size: var(--t-sm); display: inline-flex; align-items: center; min-height: 32px; }
.btn--small { min-height: 32px; padding: 0 var(--s-3); font-size: 13px; }
.lg-switch { margin: 0 0 var(--s-3); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.lg-switch select { font: inherit; min-height: 36px; padding: 4px 8px; border: 1px solid var(--chalk); border-radius: var(--r-control); background: var(--card); }
.lg-dialog { border: 0; border-radius: var(--r-card, 12px); padding: 0; width: min(28rem, 92vw); box-shadow: 0 12px 40px rgb(0 0 0 / .25); }
.lg-dialog::backdrop { background: rgb(12 30 20 / .55); }
.lg-dialog__form { padding: var(--s-5); display: grid; gap: var(--s-3); }
.lg-dialog__form h2 { margin: 0; font-size: var(--t-lg); }
.lg-dialog__acts { display: flex; gap: var(--s-2); justify-content: flex-end; }
.lg-drop { border: 0; margin: 0; padding: 0; display: grid; gap: 2px; max-height: 50vh; overflow: auto; }
.lg-drop legend { margin-bottom: var(--s-2); color: var(--ink-soft); }
.lg-drop label { display: flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-2); border-radius: var(--r-control); cursor: pointer; }
.lg-drop label:hover { background: var(--forest-tint); }
.lg-drop input { width: 20px; height: 20px; accent-color: var(--forest); }
.card-league { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-4); background: var(--mustard-tint); border: 1px solid var(--mustard-strong); border-radius: var(--r-control); }

.drawer__league { flex-direction: column; align-items: flex-start !important; justify-content: center; gap: 2px; padding-top: 8px !important; padding-bottom: 8px !important; }
.drawer__lname { font-weight: 700; }
.drawer__lmeta { font-size: var(--t-sm); color: var(--muted); }
/* ---------- trade cart ---------- */
.tc-bar { position: fixed; left: 0; right: 0; bottom: calc(64px + env(safe-area-inset-bottom, 0px)); z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-4); background: var(--mustard-tint); border-top: 2px solid var(--mustard-strong); box-shadow: 0 -4px 12px rgb(0 0 0 / .08); font-size: var(--t-sm); }
@media (min-width: 720px) { .tc-bar { bottom: 0; } }
.tc-side h3 { margin: var(--s-2) 0 var(--s-1); font-size: var(--t-md); }
.tc-side ul { list-style: none; margin: 0; padding: 0; }
.tc-side li { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); min-height: 40px; border-bottom: 1px solid var(--chalk); }
.lg-dialog textarea { font: inherit; width: 100%; box-sizing: border-box; border: 1px solid var(--chalk); border-radius: var(--r-control); padding: 8px; }

/* ---------- appearance segment in the drawer ---------- */
.drawer__seg { display: flex; gap: var(--s-2); padding: 0 var(--s-4) var(--s-3); }
.drawer__seg .drawer__action { flex: 1; text-align: center; border: 1px solid var(--line); border-radius: var(--r-control); }
.drawer__seg .drawer__action[aria-pressed="true"] { background: var(--mustard); color: #111; border-color: var(--mustard-strong); }

/* ---------- room for a docked ticker (kit.css) ---------- */
body.has-ticker { padding-bottom: calc(36px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 719px) { body.has-dock.has-ticker { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)); } }

/* hidden always wins, whatever display a component sets (the bell and filter sheets were staying on screen) */
[hidden] { display: none !important; }

/* ---------- the bell (Fix 37) ---------- */
.bell { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: #fff; cursor: pointer; display: grid; place-items: center; }
.bell svg { width: 24px; height: 24px; display: block; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .4)); }
.bell.has-unread svg { filter: drop-shadow(0 0 6px rgb(245 197 24 / .9)); }
.bell:hover { background: rgb(255 255 255 / .12); }
.bell__count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger, #c0392b); color: #fff; font: 800 11px/18px var(--sans); text-align: center; }
.bell.has-unread svg { animation: kit-wobble 1.2s 2; }
@keyframes kit-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.bell-scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .45); z-index: 44; }
.bell-sheet { position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; max-height: 84vh; background: var(--card); color: var(--ink); border-radius: 18px 18px 0 0; box-shadow: 0 -20px 60px rgb(0 0 0 / .5); display: grid; grid-template-rows: auto 1fr auto; padding-bottom: env(safe-area-inset-bottom, 0px); }
.bell-sheet__head { display: flex; justify-content: space-between; align-items: center; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.bell-sheet__list { overflow: auto; padding: var(--s-2) var(--s-3); display: grid; gap: 2px; }
.bell__item { text-decoration: none; color: inherit; margin: 0; }
.bell__item .rail__who strong { font-weight: 600; }
.bell-sheet__prefs { border-top: 1px solid var(--line); padding: var(--s-2) var(--s-4) var(--s-3); }
.bell-sheet__prefs summary { cursor: pointer; font-weight: 600; font-size: var(--t-sm); padding: 6px 0; }
.bell-prefs { display: grid; gap: var(--s-3); padding-top: var(--s-2); }
.bell-prefs__group { display: grid; gap: 6px; }
@media (min-width: 720px) { .bell-sheet { left: auto; right: 16px; bottom: auto; top: calc(var(--bar-h) + 8px); width: 420px; border-radius: 14px; max-height: 80vh; } }

/* ---------- the deal sheet (Fix 47) ---------- */
.tc-sheet { width: min(100%, 640px); max-height: 92vh; }
.tc-sheet__in { display: grid; gap: var(--s-3); }
.tc-sheet__head { display: flex; justify-content: space-between; align-items: center; }
.tc-sheet__head h2 { margin: 0; }
.tc-verdictrow { display: flex; justify-content: space-between; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--t-md); }
.tc-balance--sheet { font-size: var(--t-xs); color: var(--muted); }
.tc-block { display: grid; gap: 6px; }
.tc-block__head { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 999px; background: var(--paper-sunk); }
.tc-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.tc-team strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-team__disc { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--forest); color: #fff; font: 800 11px/1 var(--sans); overflow: hidden; flex: none; }
.tc-team__disc img { width: 100%; height: 100%; object-fit: cover; }
.tc-arrow { color: var(--mustard-ink); font-weight: 800; }
.tc-card { display: grid; gap: 6px; padding: 10px 12px; margin: 0; }
.tc-card__top { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; }
.tc-card__who { display: grid; min-width: 0; } .tc-card__who strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tc-card__who small { color: var(--muted); font-size: var(--t-xs); }
.tc-card__nums { display: flex; gap: 14px; flex-wrap: wrap; }
.tc-card__nums span { display: grid; } .tc-card__nums small { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .tc-card__nums strong { font: 800 var(--t-sm)/1.2 var(--mono); }
.tc-card__stats { margin: 0; font: 600 var(--t-xs)/1.4 var(--mono); color: var(--ink-soft); }
.tc-empty { padding: 8px 12px; }

/* ---------- the trade sheet (Fix 62/63): Fantrax layout, our colors ---------- */
.ts-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 46; background: var(--card); color: var(--ink); border-radius: 20px 20px 0 0; box-shadow: 0 -24px 60px rgb(0 0 0 / .55); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 88vh; padding-bottom: env(safe-area-inset-bottom, 0px); transition: max-height .25s var(--ease); }
.ts-sheet[data-mode="half"] { max-height: 46vh; }
.ts-sheet[data-mode="bar"] { max-height: 64px; }
.ts-sheet[data-mode="bar"] .ts-body, .ts-sheet[data-mode="bar"] .ts-foot { display: none; }
body.has-tsheet .tc-bar { display: none; }
body.has-tsheet { padding-bottom: 40vh; }
.ts-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.ts-title { background: none; border: 0; color: var(--ink); font: 800 var(--t-lg)/1 var(--sans); cursor: pointer; padding: 0; }
.ts-ctls { display: flex; gap: 8px; }
.ts-ctl { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--paper-sunk); color: var(--ink); font: 700 14px/1 var(--sans); cursor: pointer; }
.ts-body { overflow: auto; padding: 10px 14px 14px; display: grid; gap: 10px; min-height: 0; }
.ts-budget { display: flex; justify-content: space-between; color: var(--mustard-ink); font-weight: 600; font-size: var(--t-sm); }
.ts-side { display: grid; gap: 8px; }
.ts-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--forest); color: #fff; }
.ts-strip .ts-team:last-child { justify-content: flex-end; }
.ts-team { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ts-team strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-sm); }
.ts-team__disc { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--mustard); color: #111; font: 800 11px/1 var(--sans); overflow: hidden; flex: none; }
.ts-team__disc img { width: 100%; height: 100%; object-fit: cover; }
.ts-arrow { color: var(--mustard); font-weight: 800; font-size: 18px; }
.ts-slab { display: grid; gap: 8px; padding: 10px 12px; border-radius: 16px; background: color-mix(in srgb, var(--rail) 12%, var(--paper-sunk)); border: 1px solid color-mix(in srgb, var(--rail) 35%, transparent); }
.ts-slab__top { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.ts-swap { color: var(--ink-soft); font-size: 18px; }
.ts-slab__who { display: grid; min-width: 0; }
.ts-slab__who strong { font-size: var(--t-md); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-slab__who small { color: var(--muted); font-size: var(--t-xs); }
.ts-x { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--paper); color: var(--ink); font: 700 16px/1 var(--sans); cursor: pointer; }
.ts-slab__nums { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.ts-slab__nums span { display: grid; } .ts-slab__nums small { font-size: 11px; color: var(--muted); } .ts-slab__nums strong { font: 800 var(--t-md)/1.2 var(--mono); }
.ts-slab__nums .is-up { color: var(--live); }
.ts-slab__stats { margin: 0; font: 600 var(--t-sm)/1.4 var(--sans); overflow-wrap: anywhere; }
.ts-slab__label { color: var(--muted); font-weight: 400; }
.ts-slab__loading { color: var(--muted); font-style: italic; }
.ts-empty { padding: 6px 12px; }
.ts-weigh { text-align: right; }
.ts-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 10px 16px 12px; border-top: 1px solid var(--line); background: var(--card); }
.ts-pill { border-radius: 999px; min-width: 7.5rem; min-height: 46px; font-weight: 800; }
.ts-pill--cancel { background: var(--paper-sunk); border-color: var(--line); }
@media (min-width: 900px) { .ts-sheet { left: auto; right: 24px; width: 560px; border-radius: 20px; bottom: 16px; } }

/* ---------- feedback (Fix 73) ---------- */
.fb-link { font-weight: 700; color: var(--mustard-ink); }
.fb-sheet .flt-sheet__body { gap: var(--s-3); }
.fb-kinds { display: flex; flex-wrap: wrap; gap: 8px; }
.fb-kind.is-on { background: var(--mustard); color: #111; border-color: var(--mustard); }
.fb-sheet textarea, .fb-sheet input[type="email"] { width: 100%; min-height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper-sunk); color: var(--ink); padding: 10px 12px; font: inherit; }
.fb-top { display: grid; gap: 6px; } .fb-top .chip { justify-self: start; }
.is-shake { animation: kit-wobble .4s 1; }
.fb-scrim { position: fixed; inset: 0; z-index: 44; background: rgb(0 0 0 / .45); }
.fb-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; background: var(--card); color: var(--ink); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 50px rgb(0 0 0 / .5); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: 88vh; padding-bottom: env(safe-area-inset-bottom, 0px); }
.fb-sheet__head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.fb-sheet__body { overflow: auto; padding: 12px 16px; display: grid; gap: var(--s-3); }
.fb-sheet__foot { padding: 10px 16px 12px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; }
.fb-sheet__foot .btn { min-width: 8rem; min-height: 46px; }
.fb-sheet .chip.is-on { background: var(--mustard); color: #111; border-color: var(--mustard); }
@media (min-width: 900px) { .fb-sheet { left: auto; right: 24px; width: 520px; border-radius: 20px; bottom: 16px; } }
.oc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 10px; } .oc-tab { padding: 6px 10px; border-radius: 999px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); } .oc-tab.is-on { background: var(--mustard); color: #111; border-color: var(--mustard); }
.oc-acts { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.fb-file { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.fb-photo { display: flex; align-items: center; gap: 10px; position: relative; }