/* ════════════════════════════════════════════════════════════════════════
   TRADE MACHINE — the redesign (22.10.2026), from the Claude Design "Trade machine"
   file. A dark hero; the teams side by side, one column each (what it SENDS, with a
   remove button, and what it GETS); a bar that stays at the bottom with the analyse
   button; the result with the grade as a big letter and a shape; the question to the
   Professor; and the real recent trades as cards. Replaces trades.css, which is no
   longer loaded. Square corners, ink as the one action colour, colour only for
   information (grade tone, legal or not). Everything follows the screen's own width.
   ════════════════════════════════════════════════════════════════════════ */

#screen-trades .tm {
  --tm-hero: #0C1630;
  container-type: inline-size;
  width: 100%; max-width: 1280px; margin: 0 auto; box-sizing: border-box;
  padding: 0 0 40px; color: var(--ds-ink); font-family: var(--ds-font);
}
#screen-trades .tm *, #screen-trades .tm-layer * { box-sizing: border-box; }
#screen-trades .hidden { display: none !important; }
.tm-t-ok   { --tg: var(--ds-ok);   --tgi: #fff; }
.tm-t-warn { --tg: var(--ds-warn); --tgi: #fff; }
.tm-t-bad  { --tg: var(--ds-live); --tgi: #fff; }
html[data-theme="dark"] .tm-t-ok, html[data-theme="dark"] .tm-t-warn, html[data-theme="dark"] .tm-t-bad { --tgi: #0C111C; }

/* ── Buttons, fields, the little things ── */
.tm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ds-h-btn); padding: 0 18px;
  border: 1.5px solid var(--ds-ink); border-radius: 0; background: transparent; color: var(--ds-ink);
  font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; transition: background var(--ds-t-ctrl) ease;
}
.tm-btn:hover { background: var(--ds-soft); }
.tm-btn[disabled] { opacity: .45; cursor: default; }
.tm-btn--solid { background: var(--ds-ink); color: var(--ds-card); }
.tm-btn--solid:hover { background: var(--ds-ink); opacity: .9; }
.tm-link { min-height: var(--ds-h-btn); padding: 0; border: 0; background: none; color: inherit; font: 700 var(--ds-fs-14) var(--ds-font); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tm-field {
  min-height: var(--ds-h-field); padding: 0 12px; border: 1.5px solid var(--ds-line); border-radius: 0; background: var(--ds-card); color: var(--ds-ink);
  font: 600 var(--ds-fs-15) var(--ds-font); min-width: 0; width: 100%;
}
.tm-field::placeholder { color: var(--ds-ink2); opacity: 1; }
.tm button:focus-visible, .tm .tm-field:focus-visible, .tm select:focus-visible, .tm [tabindex]:focus-visible { outline: 2px solid var(--ds-ink); outline-offset: 2px; }
.tm-hero button:focus-visible { outline-color: #fff; }
.tm-state { padding: 22px 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; color: var(--ds-ink2); font: 600 var(--ds-fs-14)/1.5 var(--ds-font); }
.tm-state p { margin: 0; }
.tm-skel { display: flex; flex-direction: column; gap: 12px; padding: 12px 0; }
.tm-skel i, .tm-fc--skel i { display: block; height: 18px; background: var(--ds-soft); animation: tmPulse 1.4s ease-in-out infinite; }
@keyframes tmPulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .tm-skel i, .tm-fc--skel i { animation: none; } }

/* ── Hero ── */
.tm-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 28px; padding: clamp(22px, 5vw, 44px) clamp(16px, 4vw, 40px); background: var(--tm-hero); color: #fff; border-bottom: 4px solid var(--ds-lg-nba); }
.tm-hero-t { flex: 1 1 380px; min-width: 0; }
.tm-hero h1 { margin: 0; font: 900 var(--ds-fd-64)/.98 var(--ds-font); letter-spacing: -.035em; }
.tm-hero p { margin: 10px 0 0; font: 500 var(--ds-fs-17)/1.4 var(--ds-font); color: #D6DCEA; }
.tm-hero-c { flex: 0 1 460px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tm-seg { display: flex; align-items: stretch; border: 1.5px solid #fff; }
.tm-seg-k { display: flex; align-items: center; padding: 0 12px; font: 700 var(--ds-fs-13) var(--ds-font); color: #D6DCEA; }
.tm-seg-b { flex: 1; min-height: var(--ds-h-btn); padding: 0 14px; border: 0; border-radius: 0; background: transparent; color: #fff; font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; }
.tm-seg-b + .tm-seg-b { border-inline-start: 1.5px solid #fff; }
.tm-seg-b.active { background: #fff; color: var(--tm-hero); }
.tm-gm { display: flex; align-items: center; gap: 12px; min-height: var(--ds-h-btn); padding: 0 14px; border: 1.5px solid #fff; border-radius: 0; background: transparent; color: #fff; font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; text-align: start; }
.tm-sw { flex: none; position: relative; width: 38px; height: 22px; border: 1.5px solid #fff; border-radius: var(--ds-r-pill); }
.tm-sw::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 13px; height: 13px; border-radius: 50%; background: #fff; transition: inset-inline-start var(--ds-t-ctrl) ease; }
.tm-gm[aria-checked="true"] .tm-sw { background: #fff; }
.tm-gm[aria-checked="true"] .tm-sw::after { inset-inline-start: 18px; background: var(--tm-hero); }
.tm-adv { display: flex; flex-direction: column; gap: 10px; }
.tm-hero .tm-link { align-self: flex-start; color: #D6DCEA; }
.tm-quiet { display: flex; gap: 18px; }
.tm .cba-tip { margin-inline-start: 6px; }
@container (max-width: 639px) { .tm-hero h1 { font-size: var(--ds-fd-40); } .tm-hero p { font-size: var(--ds-fs-15); } .tm-hero-c { flex-basis: 100%; } }

.tm-body { padding: 20px clamp(10px, 3vw, 24px) 0; display: flex; flex-direction: column; gap: 16px; }

/* ── The columns ── */
.tm-cols { display: grid; grid-template-columns: repeat(var(--tm-n, 2), minmax(0, 1fr)); gap: 16px; align-items: start; }
@container (max-width: 859px) { .tm-cols { grid-template-columns: minmax(0, 1fr); } }
.tm-empty { grid-column: 1 / -1; padding: 40px 24px; background: var(--ds-card); border: 1.5px dashed var(--ds-line); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.tm-empty h2 { margin: 0; font: 900 var(--ds-fs-24) var(--ds-font); }
.tm-empty p { margin: 0; max-width: 520px; font: 500 var(--ds-fs-15)/1.6 var(--ds-font); color: var(--ds-ink2); }
.tm-col { background: var(--ds-card); border: 1.5px solid var(--ds-line); padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tm-col-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tm-team { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: start; min-width: 0; }
.tm-team b { font: 900 var(--ds-fs-20)/1.15 var(--ds-font); overflow-wrap: anywhere; }
.tm-chev { color: var(--ds-ink2); flex: none; }
.tm-x, .tm-rm { flex: none; display: grid; place-items: center; width: var(--ds-h-btn); height: var(--ds-h-btn); padding: 0; border: 1.5px solid var(--ds-line); border-radius: 0; background: transparent; color: var(--ds-ink); cursor: pointer; }
.tm-x:hover, .tm-rm:hover { border-color: var(--ds-ink); }
.tm-players { display: flex; flex-direction: column; gap: 16px; }
.tm-none { margin: 0; padding: 14px 0; color: var(--ds-ink2); font: 600 var(--ds-fs-14) var(--ds-font); }
.tm-grp { display: flex; flex-direction: column; gap: 8px; }
.tm-grp h3 { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ds-line); font: 700 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.tm-n { font: 800 var(--ds-fs-17) var(--ds-font-num); color: var(--ds-ink); }
.tm-grp-i { display: inline-flex; }
.tm-grp-s { margin-inline-start: auto; font: 700 var(--ds-fs-13) var(--ds-font-num); }
.tm-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border: 1px solid var(--ds-line); }
.tm-row.out { background: color-mix(in srgb, var(--ds-ink) 5%, var(--ds-card)); }
.tm-row.in { background: color-mix(in srgb, var(--ds-ink) 10%, var(--ds-card)); border-color: transparent; }
.tm-av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ds-card); border: 1.5px solid var(--ds-line); color: var(--ds-ink); }
.tm-av--pick { font: 800 var(--ds-fs-13) var(--ds-font-num); }
.tm-nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-nm b { font: 800 var(--ds-fs-15)/1.25 var(--ds-font); overflow-wrap: anywhere; }
.tm-nm small { font: 600 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); }
.tm-pv { margin-inline-start: 8px; padding: 1px 6px; border: 1px solid currentColor; font: 700 var(--ds-fs-12) var(--ds-font); }
.tm-pv.tpv-high { color: var(--ds-ok); } .tm-pv.tpv-medium { color: var(--ds-warn); } .tm-pv.tpv-low { color: var(--ds-ink2); }
.tm-dest { min-height: var(--ds-h-btn); max-width: 130px; padding: 0 6px; border: 1.5px solid var(--ds-line); border-radius: 0; background: var(--ds-card); color: var(--ds-ink); font: 700 var(--ds-fs-13) var(--ds-font); }
.tm-sat { min-height: 32px; padding: 0 8px; border: 1.5px solid var(--ds-line); border-radius: 0; background: transparent; color: var(--ds-ink2); font: 800 var(--ds-fs-12) var(--ds-font); cursor: pointer; }
.tm-sat.active { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-card); }
.tm-add { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; border: 1.5px dashed var(--ds-ink); border-radius: 0; background: transparent; color: var(--ds-ink); font: 800 var(--ds-fs-15) var(--ds-font); cursor: pointer; }
.tm-add:hover { background: var(--ds-soft); }
.tm-addteam { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; border: 1.5px dashed var(--ds-line); border-radius: 0; background: transparent; color: var(--ds-ink2); font: 800 var(--ds-fs-15) var(--ds-font); cursor: pointer; }
.tm-addteam:hover { border-color: var(--ds-ink); color: var(--ds-ink); }
.tm-gmbox { display: flex; flex-direction: column; gap: 12px; padding-top: 14px; border-top: 1px solid var(--ds-line); }
.trade-simple .trade-adv { display: none !important; }
.tm-lab { display: flex; flex-direction: column; gap: 6px; font: 700 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.tm-exc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-gmbox .tm-link { align-self: flex-start; color: var(--ds-ink); }

/* ── The bar that stays at the bottom ── */
.tm-bar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 16px; background: var(--tm-hero); color: #fff; box-shadow: 0 -6px 18px rgba(0,0,0,.18); }
.tm-discs { display: flex; align-items: center; gap: 14px; font: 800 var(--ds-fs-15) var(--ds-font-num); }
.tm-disc { display: inline-flex; align-items: center; gap: 6px; }
.tm-analyze { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 0; background: #F4EFE6; color: var(--tm-hero); font: 900 var(--ds-fs-17) var(--ds-font); cursor: pointer; }
.tm-analyze[disabled] { opacity: .5; cursor: default; }
.tm-analyze:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ── The result ── */
.tm-res { background: var(--ds-card); border: 1.5px solid var(--ds-line); border-top: 2px solid var(--ds-ink); padding: clamp(16px, 3vw, 28px); display: flex; flex-direction: column; gap: 22px; }
.tm-res--wait { min-height: 120px; }
.tm-res-h { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; }
.tm-bigg { flex: none; display: grid; place-items: center; width: 104px; height: 104px; border-radius: 50%; background: var(--tg); color: var(--tgi); font: 900 64px/1 var(--ds-font); box-shadow: 0 8px 20px rgba(0,0,0,.16); }
.tm-res-t { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tm-res-t h2 { margin: 0; font: 900 var(--ds-fd-32)/1.1 var(--ds-font); letter-spacing: -.02em; text-wrap: balance; }
.tm-scale { display: flex; gap: 6px; }
.tm-gs { display: grid; place-items: center; width: 34px; height: 34px; background: color-mix(in srgb, var(--ds-ink) 14%, var(--ds-card)); color: var(--ds-ink2); font: 800 var(--ds-fs-13) var(--ds-font); }
.tm-gs i { font-style: normal; }
.tm-gs--F { clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); }
.tm-gs--D { clip-path: polygon(50% 6%, 100% 94%, 0 94%); align-content: end; padding-bottom: 3px; }
.tm-gs--C { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.tm-gs--B { clip-path: none; }
.tm-gs--A { border-radius: 50%; }
.tm-gs.on { background: var(--tg); color: var(--tgi); }
.tm-legal { margin: 0; font: 800 var(--ds-fs-13) var(--ds-font); }
.tm-legal.ok { color: var(--ds-ok); } .tm-legal.bad { color: var(--ds-live); }
.tm-verdict { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 0 20px; border: 1.5px solid var(--ds-ink); font: 800 var(--ds-fs-17) var(--ds-font); }
.tm-viol { padding: 14px 16px; border: 1.5px solid var(--ds-live); }
.tm-viol h3 { margin: 0 0 8px; font: 800 var(--ds-fs-15) var(--ds-font); color: var(--ds-live); }
.tm-viol ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 6px; font: 500 var(--ds-fs-14)/1.5 var(--ds-font); }
.tm-hint { margin: 0; padding: 12px 16px; background: var(--ds-soft); font: 500 var(--ds-fs-14)/1.5 var(--ds-font); }
.tm-tcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 0; border-top: 1px solid var(--ds-line); }
.tm-tc { padding: 18px 0; border-bottom: 1px solid var(--ds-line); }
@container (min-width: 760px) { .tm-tc { padding: 18px 20px; border-bottom: 0; border-inline-start: 1px solid var(--ds-line); } .tm-tc:first-child { border-inline-start: 0; padding-inline-start: 0; } }
.tm-tc header { display: flex; align-items: center; gap: 12px; }
.tm-tc h3 { margin: 0; flex: 1; font: 800 var(--ds-fs-17) var(--ds-font); }
.tm-tg { display: grid; place-items: center; width: 40px; height: 40px; background: var(--tg); color: var(--tgi); font: 900 22px var(--ds-font); }
.tm-tc dl { margin: 14px 0 0; display: flex; flex-direction: column; gap: 14px; }
.tm-tc dt { font: 700 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); }
.tm-tc dd { margin: 4px 0 0; font: 700 32px/1 var(--ds-font-num); }
.tm-tc dd.tm-sts { display: flex; flex-wrap: wrap; gap: 8px; font: 700 var(--ds-fs-13) var(--ds-font); }
.tm-st { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 10px; border: 1.5px solid var(--ds-line); color: var(--ds-ink2); }
.tm-st span { text-decoration: line-through; }
.tm-st i { font-style: normal; font-weight: 800; }
.tm-st.on { border-color: var(--ds-ink); color: var(--ds-ink); }
.tm-st.on span { text-decoration: none; }
.tm-prof { display: flex; flex-direction: column; gap: 14px; }
.tm-prof header { display: flex; align-items: center; gap: 12px; }
.tm-prof header img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.tm-prof h3 { margin: 0; font: 800 var(--ds-fs-17) var(--ds-font); }
.tm-prof-t p { margin: 0 0 12px; max-width: 78ch; font: 500 var(--ds-fs-16, 16px)/1.75 var(--ds-font); }
.tm-q { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; background: var(--ds-soft); }
.tm-q-i { display: inline-flex; flex: none; }
.tm-q b { flex: 1 1 260px; font: 800 var(--ds-fs-15)/1.5 var(--ds-font); }
.tm-share { align-self: flex-start; }

/* ── Ask the Professor ── */
.tm-ask { background: var(--ds-card); border: 1.5px solid var(--ds-line); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.tm-ask h2 { margin: 0; font: 900 var(--ds-fs-20) var(--ds-font); }
.tm-chat-thread { display: flex; flex-direction: column; gap: 10px; max-height: 340px; overflow-y: auto; }
.tm-chat-thread:empty { display: none; }
.trade-chat-msg { padding: 10px 14px; font: 500 var(--ds-fs-15)/1.6 var(--ds-font); max-width: 88%; }
.trade-chat-user { align-self: flex-end; background: var(--ds-ink); color: var(--ds-card); }
.trade-chat-professor { align-self: flex-start; background: var(--ds-soft); }
.trade-chat-typing { color: var(--ds-ink2); }
.tm-chat-row { display: flex; }
.tm-chat-input { flex: 1; min-width: 0; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--ds-line); border-inline-end: 0; border-radius: 0; background: var(--ds-bg); color: var(--ds-ink); font: 600 var(--ds-fs-15) var(--ds-font); }
.tm-chat-input::placeholder { color: var(--ds-ink2); opacity: 1; }
.tm-chat-send { flex: none; display: grid; place-items: center; width: 56px; border: 0; border-radius: 0; background: var(--ds-ink); color: var(--ds-card); cursor: pointer; }

/* ── The recent trades ── */
.tm-feed { padding-top: 12px; }
.tm-feed h2 { margin: 0; font: 900 var(--ds-fs-24) var(--ds-font); }
.tm-feed-sub { margin: 4px 0 14px; color: var(--ds-ink2); font: 600 var(--ds-fs-14) var(--ds-font); }
.tm-feed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 16px; }
.tm-fc { background: var(--ds-card); border: 1.5px solid var(--ds-line); padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tm-fc--skel { min-height: 200px; }
.tm-fc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tm-fc-d { font: 700 var(--ds-fs-13) var(--ds-font-num); color: var(--ds-ink2); }
.tm-pair { display: inline-flex; }
.tm-pair > * + * { margin-inline-start: -8px; }
.tm-fc h3 { margin: 0; font: 800 var(--ds-fs-15)/1.5 var(--ds-font); text-wrap: pretty; }
.tm-fs-l { display: flex; flex-direction: column; gap: 8px; }
.tm-fs { display: flex; align-items: flex-start; gap: 10px; }
.tm-fs-i { flex: none; display: inline-flex; padding-top: 6px; color: var(--ds-ink2); }
.tm-fs-c { flex: 1; display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.tm-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; background: color-mix(in srgb, var(--ds-ink) 8%, var(--ds-card)); border: 1px solid var(--ds-line); font: 700 var(--ds-fs-13) var(--ds-font); }
.tm-chip small, .tm-fc-note { font: 600 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); }
.tm-chip--un { color: var(--ds-ink2); border-style: dashed; }
.tm-fc-b { align-self: flex-start; margin-top: auto; }

/* ── Modals and the add sheet ── */
.tm-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 18px; background: rgba(8,12,22,.6); }
.tm-modal-card { display: flex; flex-direction: column; width: 100%; max-width: 640px; max-height: min(86vh, 720px); background: var(--ds-card); color: var(--ds-ink); border: 1.5px solid var(--ds-line); border-radius: 0; overflow: hidden; }
.tm-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1.5px solid var(--ds-line); }
.tm-modal-h h2 { margin: 0; font: 900 var(--ds-fs-17) var(--ds-font); }
.tm-modal-b { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px 18px; }
.tm-modal-b section + section { margin-top: 18px; }
.tm-modal-b h3 { margin: 0 0 8px; font: 800 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.tm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 8px; }
.tm-tile { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 10px; border: 1.5px solid var(--ds-line); border-radius: 0; background: transparent; color: var(--ds-ink); font: 700 var(--ds-fs-14) var(--ds-font); text-align: start; cursor: pointer; }
.tm-tile:hover { border-color: var(--ds-ink); }
.tm-tile.used { opacity: .4; cursor: default; }
.tm-tabs { display: flex; border-bottom: 1.5px solid var(--ds-line); }
.tm-tabs button { flex: 1; min-height: 48px; padding: 0 10px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--ds-ink2); font: 700 var(--ds-fs-14) var(--ds-font); cursor: pointer; }
.tm-tabs button.on { color: var(--ds-ink); font-weight: 800; border-bottom-color: var(--ds-lg-nba); }
.tm-ro { list-style: none; margin: 0; padding: 0; }
.tm-ro-r { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; border-bottom: 1px solid var(--ds-line); }
.tm-ro-i { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tm-ro-i b { font: 800 var(--ds-fs-15) var(--ds-font); }
.tm-ro-i small { font: 600 var(--ds-fs-12) var(--ds-font); color: var(--ds-ink2); }
.tm-ro-b { min-width: 84px; }
.trade-search-results { margin: 8px 0 14px; display: flex; flex-direction: column; }
.trade-result-row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 4px; border-bottom: 1px solid var(--ds-line); cursor: pointer; }
.trade-result-row:hover { background: var(--ds-soft); }
.trade-result-name { flex: 1; font: 800 var(--ds-fs-15) var(--ds-font); }
.trade-result-team, .trade-result-salary { font: 700 var(--ds-fs-13) var(--ds-font-num); color: var(--ds-ink2); }
.trade-no-results { padding: 14px 4px; color: var(--ds-ink2); font: 600 var(--ds-fs-14) var(--ds-font); }
.tm-manual { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--ds-line); }
.tm-manual b { font: 800 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.tm-manual > div { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
@media (max-width: 559px) {
  .tm-modal { align-items: flex-end; padding: 0; }
  .tm-modal-card { max-width: none; max-height: calc(100dvh - 120px); border-radius: var(--ds-r-sheet) var(--ds-r-sheet) 0 0; margin-bottom: 72px; }
  .tm-manual > div { grid-template-columns: 1fr; }
}

/* ── Draft pick builder ── */
.trade-pick-picker { display: flex; flex-direction: column; gap: 12px; }
.trade-pick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.trade-pick-row.hidden { display: none !important; }
.trade-prot-label { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 6px; font: 700 var(--ds-fs-13) var(--ds-font); color: var(--ds-ink2); }
.trade-pick-chip { min-height: var(--ds-h-btn); padding: 0 14px; border: 1.5px solid var(--ds-line); border-radius: 0; background: transparent; color: var(--ds-ink); font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; }
.trade-pick-chip.active { background: var(--ds-ink); border-color: var(--ds-ink); color: var(--ds-card); }
.trade-pick-chip[disabled], .trade-pick-chip-illegal { opacity: .4; cursor: not-allowed; }
.trade-pick-num-input { min-height: var(--ds-h-btn); width: 120px; padding: 0 10px; border: 1.5px solid var(--ds-line); border-radius: 0; background: var(--ds-card); color: var(--ds-ink); font: 600 var(--ds-fs-14) var(--ds-font); }
.trade-pick-prot-hint { padding: 10px 12px; background: var(--ds-soft); font: 500 var(--ds-fs-13)/1.5 var(--ds-font); }
.trade-pick-prot-hint.hidden { display: none; }
.trade-pick-add-btn { min-height: var(--ds-h-btn); padding: 0 24px; border: 0; border-radius: 0; background: var(--ds-ink); color: var(--ds-card); font: 800 var(--ds-fs-14) var(--ds-font); cursor: pointer; }
.trade-pick-add-btn:disabled { opacity: .45; cursor: default; }

/* ── CBA tips ── */
.cba-tip { display: inline-grid; place-items: center; width: 20px; height: 20px; flex: none; border: 1.5px solid currentColor; border-radius: 50%; font: italic 700 12px var(--ds-font); font-style: normal; cursor: pointer; user-select: none; vertical-align: middle; }
.cba-pop { position: fixed; z-index: 1100; max-width: 280px; padding: 12px 15px; background: var(--ds-ink); color: var(--ds-card); font: 500 var(--ds-fs-14)/1.55 var(--ds-font); text-align: start; box-shadow: 0 8px 24px rgba(0,0,0,.35); }
.cba-pop-tail { position: absolute; top: -6px; width: 11px; height: 11px; background: var(--ds-ink); transform: translateX(-50%) rotate(45deg); }
.cba-pop.above .cba-pop-tail { top: auto; bottom: -6px; }

/* ── Cap panel (GM mode) ── */
.trade-cap-panel { display: flex; flex-direction: column; gap: 10px; }
.cap-status-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1.5px solid currentColor; font: 800 var(--ds-fs-13) var(--ds-font); }
.cap-status-badge--under { color: var(--ds-ok); } .cap-status-badge--over { color: var(--ds-ink); } .cap-status-badge--tax { color: var(--ds-warn); }
.cap-status-badge--apron1, .cap-status-badge--apron2 { color: var(--ds-live); }
.cap-payroll-line { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ds-line); font: 700 var(--ds-fs-13) var(--ds-font); }
.cap-payroll-val { font-family: var(--ds-font-num); }
.cap-payroll-changed { font-weight: 800; }
.cap-rows { display: flex; flex-direction: column; }
.cap-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--ds-line); font: 600 var(--ds-fs-13) var(--ds-font); }
.cap-row-label { flex: 1; display: flex; align-items: center; }
.cap-row-val { font: 800 var(--ds-fs-15) var(--ds-font-num); direction: ltr; }
.cap-row-val--rich, .cap-row-val--ok { color: var(--ds-ok); } .cap-row-val--tight { color: var(--ds-warn); } .cap-row-val--over { color: var(--ds-live); }

/* ── Team radar ── */
.trade-radar { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; border-top: 1px solid var(--ds-line); }
.trade-radar-title { font: 800 var(--ds-fs-14) var(--ds-font); }
.trade-radar-svg { width: 100%; max-width: 360px; height: auto; margin: 0 auto; direction: ltr; }
.radar-grid-poly { stroke: var(--ds-line); }
.radar-axis-line { stroke: var(--ds-line); }
.radar-poly { fill: color-mix(in srgb, var(--ds-lg-nba) 22%, transparent); stroke: var(--ds-lg-nba); }
.radar-axis-lbl { fill: var(--ds-ink); font: 700 10px var(--ds-font); }
.radar-axis-val { font: 800 11px var(--ds-font-num); fill: var(--ds-ink); }
.radar-axis-val--good { fill: var(--ds-ok); } .radar-axis-val--mid { fill: var(--ds-warn); } .radar-axis-val--thin { fill: var(--ds-live); }
.radar-dot { fill: var(--ds-ink); } .radar-dot--good { fill: var(--ds-ok); } .radar-dot--mid { fill: var(--ds-warn); } .radar-dot--thin { fill: var(--ds-live); }
.radar-help, .radar-summary, .radar-note { margin: 0; color: var(--ds-ink2); font: 500 var(--ds-fs-13)/1.5 var(--ds-font); }
.radar-legend > summary { min-height: 36px; display: flex; align-items: center; cursor: pointer; font: 800 var(--ds-fs-13) var(--ds-font); }
.radar-legend-body p { margin: 0 0 6px; font: 500 var(--ds-fs-13)/1.5 var(--ds-font); color: var(--ds-ink2); }
.radar-legend-body b { color: var(--ds-ink); }

/* The grade scale always reads F to A from the left, like the design. Arrows that point
   "forward" turn around in a left-to-right page. */
.tm-scale { direction: ltr; }
.tm[dir="ltr"] .tm-analyze svg, .tm[dir="ltr"] .tm-chat-send svg { transform: scaleX(-1); }

/* ── Result: team before/after and team radar (Claude Design, 28.10) ── */
.tm-ba, .tm-rd { display: flex; flex-direction: column; gap: 12px; margin-block: 18px; }
.tm-sech { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.tm-sech h2 { margin: 0; font: 900 20px/1.2 var(--ds-font); letter-spacing: -.01em; color: var(--ds-ink); }
.tm-sech span { font: 600 13px var(--ds-font); color: var(--ds-ink2); }
.tm-ba-grid, .tm-rd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; align-items: start; }
.tm-ba-team, .tm-rd-team { box-sizing: border-box; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; background: var(--ds-card); border: 1px solid var(--ds-line); }
.tm-ba-th { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tm-ba-th b { font: 800 16px/1.2 var(--ds-font); color: var(--ds-ink); }
.tm-ba-g { display: flex; align-items: center; gap: 10px; font: 600 14px var(--ds-font); color: var(--ds-ink2); }
.tm-ba-g .tm-tg { font: 800 34px/1 var(--ds-font-num); }
.tm-ba-pay { display: flex; justify-content: space-between; gap: 8px; font: 600 13px var(--ds-font); color: var(--ds-ink2); }
.tm-ba-pay b { font: 800 15px var(--ds-font-num); color: var(--ds-ink); }
.tm-meter { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; direction: ltr; padding-top: 18px; }
.tm-meter i { display: block; height: 12px; background: var(--ds-line); }
.tm-meter i.on { background: var(--ds-ink2); }
.tm-meter i.cur { background: var(--ds-ink); }
.tm-tick { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: 2px solid var(--ds-ink); transform: translateX(-1px); }
.tm-tick em { position: absolute; bottom: 100%; left: 0; transform: translateX(-50%); font: 700 11px/1.2 var(--ds-font); font-style: normal; color: var(--ds-ink); white-space: nowrap; padding-bottom: 1px; }
.tm-ba-st { font: 600 13px/1.4 var(--ds-font); color: var(--ds-ink); }
.tm-rd-fig { position: relative; box-sizing: border-box; width: 100%; max-width: 380px; margin: 0 auto; padding: 44px 0 46px; }
.tm-rd-fig svg { display: block; width: 62%; height: auto; margin: 0 auto; overflow: visible; direction: ltr; }
.tm-rd-l { position: absolute; display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.tm-rd-l span { font: 700 12px var(--ds-font); color: var(--ds-ink2); }
.tm-rd-l b { font: 800 24px var(--ds-font-num); color: var(--ds-ink); }
.tm-rd-l.t { left: 50%; top: 0; transform: translateX(-50%); align-items: center; text-align: center; }
.tm-rd-l.b { left: 50%; bottom: 0; transform: translateX(-50%); align-items: center; text-align: center; }
.tm-rd-l.r { left: calc(50% + 31%); top: 50%; transform: translateY(-50%); align-items: flex-start; }
.tm-rd-l.l { right: calc(50% + 31%); top: 50%; transform: translateY(-50%); align-items: flex-end; text-align: end; }
.tm-rd-sum { margin: 0; font: 600 15px/1.5 var(--ds-font); text-wrap: pretty; }
.tm-rd-how { border: 1px solid var(--ds-line); }
.tm-rd-how summary { min-height: 44px; display: flex; align-items: center; padding: 0 12px; font: 700 14px var(--ds-font); cursor: pointer; }
.tm-rd-how p { margin: 0; padding: 12px; border-top: 1px solid var(--ds-line); font: 500 14px/1.6 var(--ds-font); }
.tm-rd-draft { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1.5px solid var(--ds-ink); }
.tm-rd-dh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.tm-rd-dh > b { font: 800 14px var(--ds-font); }
.tm-rd-dh span { display: inline-flex; align-items: baseline; gap: 4px; }
.tm-rd-dh span b { font: 800 24px/1 var(--ds-font-num); }
.tm-rd-dh small { font: 600 13px/1 var(--ds-font-num); color: var(--ds-ink2); }
.tm-rd-bar { display: block; height: 6px; background: var(--ds-line); }
.tm-rd-bar i { display: block; height: 100%; background: var(--ds-ink); }
.tm-rd-draft p { margin: 0; font: 500 14px/1.55 var(--ds-font); text-wrap: pretty; }
:root { --ds-radar-fill: rgba(31, 95, 208, .2); --ds-radar-line: #1F5FD0; }
html[data-theme="dark"] { --ds-radar-fill: rgba(141, 184, 255, .28); --ds-radar-line: #8DB8FF; }
.tm-rd-hbody { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-top: 1px solid var(--ds-line); font: 500 14px/1.6 var(--ds-font); }
.tm-rd-h0 { margin-bottom: 6px; }
.tm-rd-hk { margin-top: 8px; font: 800 14px var(--ds-font); }