/* ==========================================================================================
   B18 (ADR-057): the Transfers page, the budget in the bar, the calendar's day, the sheets and the signing.
   Linked after gameplan.css, game.css and profile.css: every token, .card/.dcard, .btn, .seg, the sheet parts and
   the slider rail come from there. Sharp edges; blue only for selection (and the manager's own rows' faint wash).
   ========================================================================================== */

/* --- THE CURRENCY (the user: "the defining currency of the game, like gems in Clash Royale"): the euro coin and its
   purse. One component everywhere -- the coin overlapping an ink slab with a gold hairline, gold-white figures, a gold
   "+" for the budgets. Sized by one variable, --cur-h. ------------------------------------------------------------ */
.cur {
  --cur-h: 40px;
  --gold-1: #fff3c4; --gold-2: #f3c451; --gold-3: #c0841c;
  position: relative; display: inline-flex; align-items: center; height: var(--cur-h); padding-left: calc(var(--cur-h) * 0.62); isolation: isolate;
  font-variant-numeric: tabular-nums;
}
.cur-coin {
  position: absolute; z-index: 2; left: calc(var(--cur-h) * -0.18); top: 50%; width: calc(var(--cur-h) * 1.18); height: calc(var(--cur-h) * 1.18); margin-top: calc(var(--cur-h) * -0.59);
  filter: drop-shadow(0 calc(var(--cur-h) * 0.06) calc(var(--cur-h) * 0.1) rgba(60, 34, 0, 0.45));
  transform-style: preserve-3d;
}
.cur-slab {
  position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; min-width: calc(var(--cur-h) * 1.9);
  padding: 0 calc(var(--cur-h) * 0.36) 0 calc(var(--cur-h) * 0.62); overflow: hidden;
  background: linear-gradient(180deg, #232c3b 0%, #121823 55%, #0b0f16 100%);
  box-shadow: inset 0 0 0 1px rgba(243, 196, 81, 0.55), inset 0 1px 0 rgba(255, 243, 196, 0.22), 0 calc(var(--cur-h) * 0.12) calc(var(--cur-h) * 0.4) rgba(16, 24, 40, 0.3);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}
/* the light that crosses the slab when the amount changes (once) */
.cur-slab::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 236, 170, 0.38), transparent); transform: skewX(-18deg); opacity: 0;
}
.cur.is-changing .cur-slab::after { animation: cur-shine 900ms var(--ease-out); }
@keyframes cur-shine { 0% { left: -60%; opacity: 1; } 100% { left: 120%; opacity: 0; } }
.cur.is-changing .cur-coin { animation: cur-turn 820ms cubic-bezier(.3, .8, .3, 1); }
@keyframes cur-turn { 0% { transform: rotateY(0) scale(1); } 45% { transform: rotateY(200deg) scale(1.12); } 100% { transform: rotateY(360deg) scale(1); } }
.cur-caption { font-family: var(--font-display); font-weight: 700; font-size: calc(var(--cur-h) * 0.24); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 236, 190, 0.62); line-height: 1; margin-bottom: 1px; }
/* guarded: a container's own `b` or `span` rules never reach into the purse */
.cur .cur-slab { flex-direction: column; }
.cur .cur-figure, .cur .cur-unit { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.01em; text-transform: none; color: inherit; line-height: 1; }
.cur b.cur-amount, .cur .cur-amount {
  margin: 0; white-space: nowrap;
  display: flex; align-items: baseline; gap: 1px; font-family: var(--font-display); font-weight: 700; line-height: 1; letter-spacing: 0.01em;
  background: linear-gradient(180deg, #ffffff 0%, var(--gold-1) 38%, var(--gold-2) 72%, #e0a634 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.55));
}
.cur-figure { font-size: calc(var(--cur-h) * 0.62); }
.cur-unit { font-size: calc(var(--cur-h) * 0.4); margin-left: 1px; }
.cur.is-negative .cur-amount { background: linear-gradient(180deg, #fff 0%, #ffc1b5 50%, #ff7f6b 100%); -webkit-background-clip: text; background-clip: text; }
.cur.is-changing.is-up .cur-amount { animation: cur-pop 520ms var(--ease-out); }
@keyframes cur-pop { 40% { transform: scale(1.1); } 100% { transform: none; } }
.cur-plus {
  display: grid; place-items: center; align-self: stretch; width: calc(var(--cur-h) * 0.82); color: #3a2400;
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), inset 0 -2px 0 rgba(120, 70, 0, 0.35);
}
.cur-plus svg { width: 46%; height: 46%; }
.cur.is-bar { --cur-h: calc(var(--tab-h) * 0.8); }
.cur.is-page { --cur-h: 44px; }
.cur.is-sheet { --cur-h: 36px; }
.cur.is-hero { --cur-h: clamp(54px, 6.4vh, 72px); }
.cur { flex-direction: row !important; flex: none; }

/* the bar's button that holds it (the budgets open from it) */
.bar-budget {
  all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; display: flex; align-items: center; padding: 0 2px 0 calc(var(--tab-h) * 0.2);
  transition: transform var(--t-micro) var(--ease-out), filter var(--t-fast);
}
.bar-budget[hidden] { display: none; }
.bar-budget:not([hidden]) + .bar-notes { margin-left: 0; }
.bar-budget:hover { filter: brightness(1.06); transform: translateY(-1px); }
.bar-budget:hover .cur-plus { filter: brightness(1.08); }
.bar-budget:active { transform: scale(0.96); }
.bar-budget:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- the Dashboard's calendar: today on the match card, Continue, why it stopped ------------------------------ */
.mc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.mc-today { display: inline-flex; flex-direction: column; align-items: flex-end; flex: none; padding: 4px 9px; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); line-height: 1.05; }
.mc-today small { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-500); }
.mc-today b { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1vw, 18px); letter-spacing: 0.04em; color: var(--ink-900); white-space: nowrap; }
.mc-advance.has-sub { flex-direction: column; gap: 1px; line-height: 1.05; padding-top: 6px; padding-bottom: 6px; }
.mc-advance-sub { font-family: var(--font-ui); font-weight: 500; font-size: 11.5px; letter-spacing: 0; text-transform: none; opacity: 0.82; white-space: nowrap; }
.mc-today.is-walking b { animation: day-flip 85ms var(--ease-out); }
@keyframes day-flip { from { transform: translateY(-40%); opacity: 0.2; } to { transform: none; opacity: 1; } }
.mc-cta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.mc-cta-line { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--paper); text-shadow: 0 1px 3px rgba(0, 20, 8, 0.55); white-space: nowrap; }
.mc-stop {
  position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px;
  background: var(--paper); box-shadow: 0 8px 22px rgba(16, 24, 40, 0.22); animation: stop-in 380ms var(--ease-out);
  font-weight: 600; font-size: clamp(13px, 0.95vw, 16px); color: var(--ink-900);
}
.mc-stop span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-stop-open { border: 0; cursor: pointer; min-height: 36px; padding: 0 14px; background: var(--dark); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; }
@keyframes stop-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- the Dashboard, rebuilt around the calendar (the user, 2026-09-29) ------------------------------------------
     news (smaller) | Schedule: today, the days to the match -- the match itself on its day | table
     news           | inbox: always three rows high
   ---------------------------------------------------------------------------------------------------------------- */
.dash-grid.is-b18 {
  --inbox-h: clamp(178px, 27vh, 260px);
  grid-template-columns: minmax(0, 26fr) minmax(0, 46fr) minmax(0, 28fr);
  grid-template-rows: minmax(0, 1fr) var(--inbox-h);
  grid-template-areas: "news match table" "news inbox inbox";
}
.dash-grid.is-b18 .dash-match > .card, .dash-grid.is-b18 .dash-match .card-face { height: 100%; }
.dash-grid.is-b18 .match-card .card-face { min-height: 0; }
/* the inbox keeps its three rows whatever it holds */
.dash-grid.is-b18 .dmail { grid-template-rows: repeat(3, minmax(0, 1fr)); grid-auto-rows: 0; }
.dash-grid.is-b18 .dmail > li { min-height: 0; display: flex; }
.dash-grid.is-b18 .dmail-item { flex: 1; min-height: 0; }
/* the news uses its tall column: the story from the top, the headline large */
.dash-grid.is-b18 .nc-slide { justify-content: flex-start; padding-top: clamp(8px, 2cqh, 24px); }
.dash-grid.is-b18 .nc-standfirst { -webkit-line-clamp: 5; line-clamp: 5; }
.dash-grid.is-b18 .dash-inbox .card-quiet { margin-top: auto; margin-bottom: auto; }
/* the news, narrower: its headline steps down with the card */
.dash-grid.is-b18 .dcard-news .nc-headline { font-size: clamp(17px, min(7cqh, 10cqw), 38px); }

/* the Schedule card */
.sched-card .card-face { display: flex; flex-direction: column; min-height: 0; padding: clamp(12px, 1.2vw, 22px) clamp(14px, 1.3vw, 24px); gap: clamp(8px, 1.4vh, 16px); }
.sd-head { display: flex; align-items: center; gap: 10px; min-height: 32px; padding-bottom: clamp(6px, 0.9vh, 12px); border-bottom: 1px solid rgba(16, 21, 31, 0.1); flex: none; }
.sd-window { font-family: var(--font-display); font-weight: 600; font-size: clamp(12px, 0.85vw, 16px); letter-spacing: 0.08em; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sd-season { all: unset; box-sizing: border-box; cursor: pointer; margin-left: auto; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 6px 0 10px; font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); transition: color var(--t-fast); }
.sd-season svg { width: 15px; height: 15px; transition: transform var(--t-fast) var(--ease-out); }
.sd-season:hover { color: var(--ink-900); }
.sd-season:hover svg { transform: translateX(3px); }
.sd-top { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 1.6vw, 30px); }
.sd-today { display: flex; align-items: center; gap: clamp(8px, 0.8vw, 14px); }
.sd-today-dn { font-family: var(--font-display); font-weight: 700; font-size: clamp(54px, 5.4vw, 108px); line-height: 0.82; color: var(--ink-900); text-shadow: 0 2px 0 rgba(255, 255, 255, 0.6); }
.sd-today span { display: flex; flex-direction: column; font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.05vw, 20px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); line-height: 1.15; }
.sd-today strong { font-size: 1.3em; letter-spacing: 0.06em; color: var(--ink-900); }
/* the day turns over: the old number falls away, the new one drops in (one beat, 950 ms, is the walk's pace) */
.sched-card.is-walking .sd-today-dn { animation: sd-flip 477ms cubic-bezier(.2,.9,.25,1.15); transform-origin: 50% 100%; }
@keyframes sd-flip { 0% { transform: translateY(-46%) rotateX(80deg) scale(1.12); opacity: 0; filter: blur(3px); } 60% { opacity: 1; filter: none; } 100% { transform: none; opacity: 1; } }
.sched-card.is-walking .sd-today span { animation: sd-rise 400ms var(--ease-out) 69ms backwards; }
@keyframes sd-rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
/* time passing: a rule under the head fills across each beat, and a light sweeps the card */
.sd-head { position: relative; }
.sched-card.is-walking .sd-head::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 3px; width: 100%; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 35%, transparent)); transform-origin: 0 50%; animation: sd-beat 731ms linear both; }
@keyframes sd-beat { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sched-card.is-walking .card-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%); transform: translateX(-100%); animation: sd-sweep 731ms ease-in-out both; }
@keyframes sd-sweep { to { transform: translateX(100%); } }
.sd-next { justify-self: end; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 12px; background: var(--paper); box-shadow: var(--shadow-1); min-width: 0; max-width: 100%; }
.sd-next-crests { display: flex; align-items: center; gap: 6px; }
.sd-next-crests .crest { width: clamp(24px, 1.9vw, 38px); height: auto; aspect-ratio: 40 / 46; }
.sd-next-crests i { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 13px; color: var(--ink-500); }
.sd-next-text { display: flex; flex-direction: column; min-width: 0; }
.sd-next-text b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.1vw, 21px); letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.05; }
.sd-next-text small { font-size: clamp(11.5px, 0.8vw, 14px); font-weight: 500; color: var(--ink-500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-next-count { display: flex; flex-direction: column; align-items: center; padding-left: 12px; border-left: 1px solid rgba(16, 21, 31, 0.1); line-height: 0.95; }
.sd-next-count b { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.1vw, 42px); color: var(--ink-900); }
.sd-next-count small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }

/* the strip: today first, the days to the match after it; it slides one day each beat while the calendar walks */
.sd-strip { flex: 1 1 auto; min-height: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(4px, 0.45vw, 8px); container-type: size; }
.sched-card.is-walking .sd-strip { animation: sd-slide 554ms cubic-bezier(.22,1,.36,1); }
@keyframes sd-slide { from { transform: translateX(calc(100% / var(--n))); opacity: 0.8; } to { transform: none; opacity: 1; } }
/* each day rises in after the one before; the new today is struck like a stamp */
.sched-card.is-walking .sd-day { animation: sd-rise 431ms var(--ease-out) backwards; }
.sched-card.is-walking .sd-day:nth-child(2) { animation-delay: 46ms; } .sched-card.is-walking .sd-day:nth-child(3) { animation-delay: 92ms; }
.sched-card.is-walking .sd-day:nth-child(4) { animation-delay: 138ms; } .sched-card.is-walking .sd-day:nth-child(5) { animation-delay: 185ms; }
.sched-card.is-walking .sd-day:nth-child(6) { animation-delay: 231ms; } .sched-card.is-walking .sd-day:nth-child(n+7) { animation-delay: 277ms; }
.sched-card.is-walking .sd-day.is-today { animation: sd-stamp 431ms cubic-bezier(.2,1.4,.4,1) backwards; }
@keyframes sd-stamp { from { transform: scale(1.18); opacity: 0; } to { transform: none; opacity: 1; } }
/* at rest it is still alive: today's bar breathes, the match's crest floats, a reply's envelope pulses, tiles lift under the pointer */
.sd-day { transition: transform var(--t-fast) var(--ease-out), box-shadow var(--t-fast); }
.sd-day.is-goable { cursor: pointer; }
.sd-day.is-goable:hover { transform: translateY(-4px); background: var(--paper); box-shadow: inset 0 3px 0 var(--accent-ink), var(--shadow-1); }
.sd-day.is-goable:active { transform: translateY(-1px) scale(0.985); }
.sd-day.is-goable:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.sd-day:not(.is-goable):not(.is-today) { opacity: 0.55; }
.sd-day.has-match:not(.is-goable) { opacity: 1; }
.sched-card.is-walking .sd-day.is-goable { pointer-events: none; }
.sd-day.is-today { animation: sd-breathe 3.2s ease-in-out infinite; }
@keyframes sd-breathe { 0%, 100% { box-shadow: inset 0 3px 0 var(--accent), var(--shadow-1); } 50% { box-shadow: inset 0 5px 0 var(--accent), 0 6px 16px rgba(45, 111, 214, 0.28); } }
.sd-day.has-match .sd-match .crest { animation: sd-float 3.6s ease-in-out infinite; }
@keyframes sd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.sd-ev.is-reply span, .sd-ev.is-scout span { animation: sd-ping 2.2s ease-in-out infinite; }
@keyframes sd-ping { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.35); } }
.sched-card:not(.is-walking) .sd-next-count b { animation: sd-tick 2.6s ease-in-out infinite; }
@keyframes sd-tick { 0%, 88%, 100% { transform: none; } 94% { transform: scale(1.14); } }
@media (prefers-reduced-motion: reduce) {
  .sd-day, .sd-day.is-today, .sd-day.has-match .sd-match .crest, .sd-ev span, .sched-card .sd-next-count b, .sched-card.is-walking .sd-day, .sched-card.is-walking .card-face::after, .sched-card.is-walking .sd-head::after { animation: none !important; }
}
.sd-day {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; min-height: 0; overflow: hidden;
  padding: clamp(6px, 1.2cqh, 12px) 3px; background: var(--surface-2); box-shadow: inset 0 3px 0 transparent; text-align: center;
}
.sd-wd { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, min(8cqh, 2.2cqw), 17px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.sd-dn { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, min(22cqh, 6cqw), 60px); line-height: 1; color: var(--ink-900); }
.sd-mo { font-family: var(--font-display); font-weight: 600; font-size: clamp(10.5px, min(7cqh, 2cqw), 16px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-300); }
.sd-day.is-today { background: var(--paper); box-shadow: inset 0 3px 0 var(--accent), var(--shadow-1); }
.sd-day.is-today .sd-wd { color: var(--accent-ink); }
.sd-day.has-match { background: color-mix(in srgb, var(--opp) 13%, var(--paper)); box-shadow: inset 0 3px 0 var(--opp); }
.sd-match { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: auto; }
.sd-match .crest { width: clamp(24px, min(30cqh, 8cqw), 68px); height: auto; aspect-ratio: 40 / 46; filter: drop-shadow(0 3px 5px rgba(16, 24, 40, 0.25)); }
.sd-match small { font-family: var(--font-display); font-weight: 700; font-size: clamp(10.5px, min(7cqh, 2cqw), 15px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-900); }
.sd-events { display: flex; flex-direction: column; gap: 2px; margin-top: auto; width: 100%; }
.sd-ev { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 3px; padding: 3px 3px; background: var(--paper); font-style: normal; font-weight: 600; font-size: clamp(10px, min(6.5cqh, 1.9cqw), 14px); line-height: 1.15; color: var(--ink-700); overflow: hidden; overflow-wrap: anywhere; }
.sd-ev span { flex: none; }
.sd-ev.is-deadline { background: var(--dark); color: var(--paper); }
.sd-ev.is-reply span { color: var(--accent-ink); }
.sd-foot { flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 12px; position: relative; }
.sd-foot .mc-stop { position: static; flex: 1; animation: stop-in 380ms var(--ease-out); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); background: var(--paper-2); }
.sd-go .mc-advance { min-width: clamp(170px, 12vw, 240px); justify-content: center; }
.sched-card.is-walking .sd-go .mc-advance { background: var(--accent); }

/* the email that stopped the calendar on the match's day, in the card head's corner (clear of the match and Play) */
.mc-head-note {
  all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; max-width: 64%; min-height: 34px; padding: 0 4px 0 12px;
  background: var(--paper); box-shadow: 0 2px 8px rgba(16, 24, 40, 0.16); font-weight: 600; font-size: clamp(12px, 0.85vw, 15px); color: var(--ink-900); animation: stop-in 380ms var(--ease-out);
}
.mc-head-note span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-head-note b { flex: none; display: grid; place-items: center; min-height: 26px; padding: 0 10px; background: var(--dark); color: var(--paper); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.mc-head-note:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* match day: the match itself, large; it arrives once when the calendar reaches its day */
.match-card.is-matchday .card-face { grid-template-rows: auto minmax(0, 1fr) auto auto; }
.match-card.is-matchday .mc-crest .crest { width: clamp(76px, 7.4vw, 150px); }
.match-card.is-matchday .mc-name { font-size: clamp(20px, 2vw, 40px); margin-top: clamp(8px, 1.4vh, 18px); }
.match-card.is-matchday .mc-v { width: clamp(44px, 3.6vw, 66px); font-size: clamp(20px, 1.7vw, 32px); }
.match-card.is-matchday .mc-v { opacity: 1 !important; }
.mc-play { position: relative; display: flex; justify-content: center; padding-top: clamp(8px, 1.4vh, 16px); transform: translateZ(18px); }
.mc-play .mc-advance { min-width: clamp(220px, 16vw, 320px); justify-content: center; height: clamp(52px, 6.4vh, 68px); font-size: clamp(19px, 1.4vw, 26px); }
/* A6: the quick sim, the quieter partner of Play -- paper, ink, the same height */
.mc-play { gap: clamp(8px, 0.8vw, 14px); }
.mc-quick { justify-content: center; height: clamp(52px, 6.4vh, 68px); padding: 0 clamp(16px, 1.4vw, 26px); font-size: clamp(15px, 1.05vw, 20px); color: var(--ink-900); background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-900); }
.mc-quick:hover { background: var(--paper); color: var(--ink-900); box-shadow: inset 0 0 0 2px var(--ink-900), var(--shadow-1); }
.mc-quick:disabled { cursor: progress; opacity: 0.5; }
.match-card.is-arriving .mc-side:first-child { animation: mc-from-left 760ms var(--ease-out) 120ms backwards; }
.match-card.is-arriving .mc-side:last-child { animation: mc-from-right 760ms var(--ease-out) 120ms backwards; }
.match-card.is-arriving .mc-v { animation: mc-pop 520ms var(--ease-out) 560ms backwards; }
.match-card.is-arriving .mc-wash { animation: fade-in 700ms var(--ease-std) backwards; }
.match-card.is-arriving .mc-play, .match-card.is-arriving .mc-foot, .match-card.is-arriving .mc-head { animation: pp-rise 520ms var(--ease-out) 700ms backwards; }
@keyframes mc-from-left { from { transform: translateX(-60%) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mc-from-right { from { transform: translateX(60%) scale(0.8); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mc-pop { from { transform: scale(0.2); opacity: 0; } 70% { transform: scale(1.15); } to { transform: none; opacity: 1; } }

/* --- the inbox: an email's next step ---------------------------------------------------------------------------- */
.mail-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.mail-actions .btn { min-height: 46px; }

/* --- the page and the hub --------------------------------------------------------------------------------------- */
.career-page[data-page="transfers"] { padding: clamp(8px, 1.2vh, 14px) var(--frame-x) var(--frame-y); }
:root[data-career-detail] .career-page[data-page="transfers"] { top: 0; padding-top: var(--frame-y); }
.tf-grid {
  --gap: clamp(10px, 1.1vw, 20px);
  height: 100%; display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 50fr) minmax(0, 25fr) minmax(0, 25fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "list talks talks" "list scout window";
  perspective: 1800px; perspective-origin: 40% 10%;
}
.tf-cell-list { grid-area: list; }
.tf-cell-talks { grid-area: talks; }
.tf-cell-scout { grid-area: scout; }
.tf-cell-window { grid-area: window; }
.tf-grid .card-title, .tf-grid .card-sub { white-space: nowrap; }
.tf-grid .card-sub { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tf-grid.is-entering .card { animation: card-rise 900ms var(--ease-out) calc(140ms + var(--d, 0) * 100ms) backwards; }
.tf-grid .dcard-body { container-type: size; }
.tf-line { flex: none; margin: 8px 0 4px; font-size: clamp(12.5px, 0.88vw, 16px); font-weight: 600; color: var(--ink-500); }

/* the mini ball: the Game Plan's sphere in the kit, the overall on it */
.tf-orb { --sphere: 2.1em; }

/* the Transfer List card */
.tl-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.tl-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7em; padding: 0 0.5em; font-size: clamp(12px, min(5.4cqh, 3cqw), 20px); min-height: 0; overflow: hidden; }
.tl-item + .tl-item { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.tl-item.is-mine { background: rgba(45, 111, 214, 0.06); }
.tl-name { display: flex; flex-direction: column; min-width: 0; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-name small { font-size: 0.72em; font-weight: 500; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; }
.tl-price { font-family: var(--font-display); font-weight: 700; font-size: 1.1em; color: var(--ink-900); }
.tl-sep { display: flex; align-items: flex-end; padding: 0 0.5em 0.2em; font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, min(4cqh, 2.4cqw), 14px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); }

/* the Negotiations card */
.tk-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.tk-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7em; padding: 0 0.5em; font-size: clamp(12px, min(9cqh, 2.6cqw), 19px); min-height: 0; overflow: hidden; border-left: 3px solid transparent; }
.tk-item + .tk-item { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.tk-item.is-yours { border-left-color: var(--ink-900); }
.tk-name { display: flex; flex-direction: column; min-width: 0; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.tk-name small { font-size: 0.74em; font-weight: 500; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; }
.tk-wait { font-family: var(--font-display); font-weight: 700; font-size: 0.78em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); white-space: nowrap; }
.is-yours .tk-wait { color: var(--ink-900); }
/* a short card shows fewer talks, each on one line, rather than squeezing them together */
@container (max-height: 240px) { .tk-item .tk-name small { display: none; } .tk-item:nth-child(n + 4) { display: none; } }
@container (max-height: 170px) { .tk-item:nth-child(n + 3) { display: none; } .tk-sign { margin: 4px 0 2px; padding: 5px 8px; } }
@container (max-height: 120px) { .tk-item:nth-child(n + 2) { display: none; } }
.tk-item .tf-orb { font-size: min(1em, 20px); }
.tk-sign { flex: none; display: flex; align-items: center; gap: 8px; margin: 8px 0 4px; padding: 8px 10px; background: var(--dark); color: var(--paper); font-size: clamp(12.5px, 0.9vw, 16px); }
.tk-sign svg { width: 18px; height: 18px; flex: none; }

/* the Scout card */
.sc-slots { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; flex: 1 1 auto; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.sc-slot { display: flex; flex-direction: column; justify-content: center; padding: 0 10px; min-height: 0; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); overflow: hidden; }
.sc-slot b { font-weight: 600; font-size: clamp(12px, min(8cqh, 5cqw), 17px); color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-slot small { font-size: clamp(11px, min(6cqh, 4cqw), 14px); font-weight: 500; color: var(--ink-500); }
.sc-slot.is-free { background: transparent; box-shadow: inset 0 0 0 1px rgba(16, 21, 31, 0.14); }
.sc-slot.is-free span { font-family: var(--font-display); font-weight: 700; font-size: clamp(11px, min(6cqh, 4cqw), 14px); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-300); }
.sc-last { flex: none; display: flex; align-items: baseline; gap: 8px; margin: 8px 0 0; font-size: clamp(12px, 0.85vw, 15px); }
.sc-last small { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.sc-last b { font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the Window card */
.wd-count { flex: none; display: flex; align-items: baseline; gap: 10px; padding: 6px 0 4px; }
.wd-count b { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, min(30cqh, 22cqw), 76px); line-height: 0.86; color: var(--ink-900); }
.wd-count span { font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 0.9vw, 17px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.wd-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.wd-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 0; font-size: clamp(11.5px, min(9cqh, 5cqw), 16px); font-weight: 600; color: var(--ink-700); border-top: 1px solid rgba(16, 21, 31, 0.07); overflow: hidden; }
.wd-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-item b { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.wd-item.is-yours span { color: var(--ink-900); }

/* --- a card's page: the header's tools (today, Continue, the budget) --------------------------------------------- */
.detail-tf { width: 100%; height: 100%; }
.detail-tf .card-face { height: 100%; }
.detail-tf .detail-head { flex-wrap: wrap; row-gap: 6px; }
.tf-tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.tf-day { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.05; }
.tf-day b { font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.15vw, 22px); letter-spacing: 0.04em; color: var(--ink-900); }
.tf-day small { font-size: clamp(11.5px, 0.78vw, 14px); font-weight: 500; color: var(--ink-500); }
.tf-continue { min-height: 46px; min-width: 132px; justify-content: center; }
.tf-continue.is-busy { background: var(--accent); }
.tf-budget { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; padding-left: 10px; transition: transform var(--t-micro), filter var(--t-fast); }
.tf-budget:hover { filter: brightness(1.06); }
.tf-budget:active { transform: scale(0.96); }
.tf-budget:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tf-notice { flex: none; margin: 10px 0 0; padding: 10px 14px; background: var(--paper-2); border-left: 3px solid var(--form-loss); font-weight: 600; font-size: clamp(13px, 0.92vw, 16px); color: var(--ink-900); animation: stop-in 380ms var(--ease-out); }
.tf-notice.is-good { border-left-color: var(--form-win, #2f9e63); }

/* the Transfer List page */
.detail-tf-list .detail-body { display: flex; flex-direction: column; overflow: hidden; }
.tf-filters { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tf-chip {
  border: 0; cursor: pointer; min-height: 40px; min-width: 48px; padding: 0 12px; background: var(--paper-2); color: var(--ink-500);
  font-family: var(--font-display); font-weight: 700; font-size: clamp(13px, 0.9vw, 16px); letter-spacing: 0.08em; box-shadow: inset 0 -3px 0 transparent;
  transition: background var(--t-micro), color var(--t-micro), box-shadow var(--t-fast);
}
.tf-chip:hover { color: var(--ink-900); }
.tf-chip.is-on { background: var(--paper); color: var(--ink-900); box-shadow: inset 0 -3px 0 var(--accent), 0 4px 12px rgba(16, 24, 40, 0.1); }
.tf-sorts { margin-left: auto; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-300); }
.tf-sorts .sh-sort { font-size: 14px; min-height: 40px; }
.tf-table { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.tf-row {
  display: grid; grid-template-columns: 2.6em minmax(10em, 1.6fr) 3.2em 2.6em minmax(9em, 1.2fr) 5.6em 5.6em 3.4em; align-items: center; gap: 0.8em;
  padding: 0.35em 0.6em; min-height: 3em; font-size: clamp(12.5px, 0.98vw, 19px); color: var(--ink-700); border-bottom: 1px solid rgba(16, 21, 31, 0.06); border-left: 3px solid transparent;
}
.tf-row.is-player { cursor: pointer; transition: background var(--t-micro); }
.tf-row.is-player:hover { background: rgba(255, 255, 255, 0.7); }
.tf-row.is-player:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* the manager's own listed players: a light wash and a faint rule, never dark (the user) */
.tf-row.is-mine { background: rgba(45, 111, 214, 0.06); border-left-color: rgba(45, 111, 214, 0.45); }
.tf-row.is-mine:hover { background: rgba(45, 111, 214, 0.1); }
.tf-head { position: sticky; top: 0; z-index: 2; min-height: 2.2em; background: var(--paper-2); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); box-shadow: 0 1px 0 rgba(16, 21, 31, 0.08); }
.tf-head > span { font-size: 0.78em; }
.tf-name { display: flex; align-items: center; flex-wrap: wrap; gap: 0 0.45em; min-width: 0; font-weight: 600; color: var(--ink-900); }
.tf-name small { flex-basis: 100%; font-size: 0.74em; font-weight: 500; color: var(--ink-500); }
.tf-tag { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 0.66em; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.12em 0.4em; background: var(--accent-soft); color: var(--accent-ink); }
.tf-tag.is-talks { background: var(--surface-ink); color: var(--ink-900); }
.tf-club { display: flex; align-items: center; gap: 0.5em; min-width: 0; font-weight: 600; color: var(--ink-900); }
.tf-club .crest { height: 1.5em; width: auto; aspect-ratio: 40 / 46; flex: none; }
.tf-club span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-abroad { font-family: var(--font-display); font-weight: 700; font-size: 0.85em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.tf-money { color: var(--ink-500); white-space: nowrap; }
.tf-price { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; color: var(--ink-900); white-space: nowrap; }
.tf-go { display: grid; justify-items: end; font-family: var(--font-display); font-weight: 700; font-size: 0.8em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-300); }
.tf-go svg { width: 16px; height: 16px; }
.tf-row:hover .tf-go { color: var(--ink-900); }
.sh-group small { margin-left: 8px; font-size: 0.8em; color: var(--ink-500); letter-spacing: 0.06em; }

/* the Negotiations page: the talks, and the one open as a thread of emails */
.detail-tf-negotiations .detail-body { overflow: hidden; }
.tk { height: 100%; display: grid; grid-template-columns: minmax(16em, 32fr) minmax(0, 68fr); gap: clamp(12px, 1.3vw, 24px); }
.tk-side { min-height: 0; overflow-y: auto; }
.tk-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tk-row {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.7em;
  padding: 0.55em 0.7em; min-height: 3.3em; font-size: clamp(12.5px, 0.95vw, 17px); background: var(--surface-2); border-left: 4px solid transparent;
  transition: background var(--t-micro), box-shadow var(--t-fast);
}
.tk-row:hover { background: var(--paper); }
.tk-row.is-on { background: var(--paper); border-left-color: var(--accent); box-shadow: var(--shadow-1); }
.tk-row.is-yours:not(.is-on) { border-left-color: var(--ink-900); }
.tk-row.is-sign { background: var(--dark); color: var(--paper); }
.tk-row.is-sign .tk-name, .tk-row.is-sign .tk-wait { color: var(--paper); }
.tk-row.is-sign .tk-name small { color: rgba(255, 255, 255, 0.72); }
.tk-row.is-sign svg { width: 1.6em; height: 1.6em; }
.tk-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tk-contracts { margin-top: 18px; }
.tk-contracts ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 2px; }
.tk-contracts li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; padding: 8px 10px; background: var(--surface-2); font-size: clamp(12.5px, 0.88vw, 15px); }
.tk-contracts li b { font-weight: 700; color: var(--ink-900); }
.tk-contracts li span { grid-column: 1; color: var(--ink-500); font-weight: 500; }
.tk-contracts li small { grid-row: 1 / 3; grid-column: 2; align-self: center; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; color: var(--ink-500); }
.tk-main { min-height: 0; display: flex; flex-direction: column; background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(16, 21, 31, 0.06); }
.tk-main.is-empty { display: grid; place-items: center; }
.tk-head { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 16px; background: var(--paper); box-shadow: 0 1px 0 rgba(16, 21, 31, 0.08); font-size: clamp(13px, 1vw, 18px); }
.tk-head .tf-orb { font-size: 1.3em; }
.tk-title { display: flex; flex-direction: column; min-width: 0; }
.tk-title b { font-family: var(--font-display); font-weight: 700; font-size: 1.4em; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-title small { font-weight: 500; font-size: 0.82em; color: var(--ink-500); margin-top: 3px; }
.tk-stage { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.tk-stage b { font-weight: 700; font-size: 0.92em; color: var(--ink-900); }
.tk-stage small { font-family: var(--font-display); font-weight: 700; font-size: 0.78em; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.tk-profile { width: 44px; height: 44px; background: var(--paper-2); }
.tk-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.tk-mail { max-width: 86%; padding: 12px 14px; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); animation: pp-rise 380ms var(--ease-out) backwards; }
.tk-mail.is-mine { align-self: flex-end; background: #eef1f5; box-shadow: none; border-right: 3px solid var(--ink-900); }
.tk-mail header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; font-size: clamp(12px, 0.82vw, 14.5px); }
.tk-mail header b { font-weight: 700; color: var(--ink-900); }
.tk-mail header span { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); font-size: 0.9em; }
.tk-mail header time { margin-left: auto; font-family: var(--font-display); font-weight: 600; color: var(--ink-500); }
.tk-mail p { margin: 0 0 4px; font-size: clamp(13px, 0.95vw, 17px); line-height: 1.4; color: var(--ink-700); }
.tk-act { flex: none; padding: 12px 16px 14px; background: var(--paper); box-shadow: 0 -1px 0 rgba(16, 21, 31, 0.08); }
.tk-hint { margin: 0 0 10px; font-size: clamp(13px, 0.95vw, 16.5px); font-weight: 500; color: var(--ink-700); }
.tk-hint b { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); font-size: 1.12em; }
.tk-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tk-buttons .btn { min-height: 48px; }
.btn.is-ghost { background: var(--paper-2); color: var(--ink-900); }
.btn.is-ghost:hover { background: var(--surface-ink); }
.tk-waiting { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600; font-size: clamp(13px, 0.95vw, 16.5px); color: var(--ink-700); }
.tk-waiting .btn { min-height: 44px; }

/* the Scout page */
.detail-tf-scout .detail-body { overflow: hidden; }
.sp { height: 100%; display: grid; grid-template-columns: minmax(18em, 38fr) minmax(0, 62fr); gap: clamp(12px, 1.3vw, 24px); }
.sp-side { min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.sp-jobs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp-job { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 10px 12px; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); font-size: clamp(12.5px, 0.9vw, 16px); }
.sp-job b { font-weight: 700; color: var(--ink-900); }
.sp-job small { grid-column: 1; color: var(--ink-500); font-weight: 500; }
.sp-job span { grid-row: 1 / 3; grid-column: 2; align-self: center; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; color: var(--ink-900); }
.sp-job.is-free { background: transparent; box-shadow: inset 0 0 0 1px rgba(16, 21, 31, 0.12); }
.sp-job.is-free b { font-family: var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-300); }
.sp-form { display: flex; flex-direction: column; gap: 10px; padding: 12px; background: var(--paper-2); }
.sp-form .pp-seg { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 3px; }
.sp-form .pp-seg .seg-btn { min-width: 0; padding: 4px 2px; min-height: 42px; }
.sp-job { padding: 8px 12px; }
.sp-form .pp-slider-value { font-size: clamp(15px, 1.1vw, 20px); min-width: 9ch; }
.sp-send { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-send .btn { min-height: 48px; }
.sp-send small { font-weight: 600; color: var(--ink-500); font-size: 13px; }
.sp-main { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
.sp-list { overflow-x: auto; }
.sp-reports { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.sp-report {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; min-width: 10em; max-width: 16em; padding: 8px 12px; background: var(--surface-2);
  border-bottom: 3px solid transparent; font-size: clamp(12px, 0.85vw, 15px);
}
.sp-report b { font-weight: 700; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-report small { color: var(--ink-500); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-report.is-on { background: var(--paper); border-bottom-color: var(--accent); box-shadow: var(--shadow-1); }
.sp-read { min-height: 0; overflow-y: auto; padding: 16px 18px; background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08); display: flex; flex-direction: column; gap: 10px; }
.sp-read header { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sp-read header b { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.8vw, 34px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1; color: var(--ink-900); }
.sp-read header small { font-weight: 600; color: var(--ink-500); }
.sp-potential { margin: 4px 0 0; display: flex; flex-direction: column; gap: 4px; }
.sp-potential b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.6vw, 30px); line-height: 1.08; color: var(--ink-900); }
.sp-line { margin: 0; font-size: clamp(13px, 0.95vw, 17px); color: var(--ink-700); font-weight: 500; }
.sp-traits { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding-top: 10px; border-top: 1px solid rgba(16, 21, 31, 0.08); }
.sp-facts span { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-facts small { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-500); }
.sp-facts b { font-weight: 700; font-size: clamp(13.5px, 1vw, 18px); color: var(--ink-900); }
.sp-buttons { display: flex; justify-content: flex-end; }
.sp-buttons .btn { min-height: 46px; }
.sp-found { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.sp-hit {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 3.2em minmax(0, 1fr) 2.4em 2.6em 5.6em; align-items: center; gap: 0.8em;
  padding: 0.5em 0.6em; background: var(--surface-2); font-size: clamp(12.5px, 0.95vw, 17px); transition: background var(--t-micro);
}
.sp-hit:hover { background: var(--paper-2); }
.sp-hit-name { display: flex; flex-direction: column; min-width: 0; }
.sp-hit-name b { font-weight: 700; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-hit-name small { color: var(--ink-500); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-club { font-style: normal; font-weight: 500; color: var(--ink-500); margin-left: 8px; font-size: 0.86em; }
.sp-ovr { font-family: var(--font-display); font-weight: 700; font-size: 1.2em; color: var(--ink-900); }
.sp-price { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); text-align: right; }

/* the Window page */
.wd { display: flex; flex-direction: column; gap: clamp(14px, 2.6vh, 28px); }
.wd-hero { display: flex; align-items: center; gap: 18px; }
.wd-hero b { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 7vw, 132px); line-height: 0.82; color: var(--ink-900); }
.wd-hero span { display: flex; flex-direction: column; gap: 4px; font-size: clamp(14px, 1vw, 18px); font-weight: 500; color: var(--ink-500); }
.wd-hero strong { font-family: var(--font-display); font-weight: 700; font-size: 1.5em; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-900); }
.wd h3 small { margin-left: 8px; font-family: var(--font-ui); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-500); }
.wd-deals { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.wd-deals li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 6em 5.4em; align-items: center; gap: 12px; padding: 10px 12px; background: var(--surface-2); font-size: clamp(12.5px, 0.95vw, 17px); }
.wd-deals li.is-yours { background: rgba(45, 111, 214, 0.06); }
.wd-deals b { font-weight: 700; color: var(--ink-900); }
.wd-deals span { color: var(--ink-500); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-deals small { font-family: var(--font-display); font-weight: 700; color: var(--ink-500); text-align: right; }

/* --- the sheets: a frosted veil and one white plate ---------------------------------------------------------------- */
.tr-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 3vh 4vw; background: rgba(16, 21, 31, 0.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); --pp-down: var(--form-loss); --pp-up: var(--form-win, #2f9e63); }
.tr-sheet { width: min(760px, 100%); max-height: calc(var(--vv-h, 100dvh) - 2 * clamp(6px, 3vh, 40px)); display: flex; flex-direction: column; background: var(--paper); box-shadow: var(--shadow-2); }
.tr-sheet .pp-sheet-body { min-height: 0; }
.tr-meet {
  all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px;
  background: var(--paper-2); box-shadow: inset 0 -3px 0 transparent; font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, 1.1vw, 19px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-900);
  transition: background var(--t-micro), box-shadow var(--t-fast);
}
.tr-meet b { font-size: 1.3em; letter-spacing: 0.02em; }
.tr-meet:hover { background: var(--surface-ink); }
.tr-meet.is-on { background: var(--paper); box-shadow: inset 0 -3px 0 var(--accent), 0 4px 12px rgba(16, 24, 40, 0.12); }
/* the budgets' exchange: the currency, the rate, the wage budget */
/* the budgets' rail: its live words sit under it, so the rail keeps its length */

/* --- the signing (three.js): the desk, the contract, the pen ------------------------------------------------------- */
:root.in-signing .career { filter: blur(3px); }
.sg-root { position: fixed; inset: 0; z-index: 70; background: #17110c; animation: sg-in 600ms var(--ease-std) both; }
@keyframes sg-in { from { opacity: 0; } to { opacity: 1; } }
.sg-scene { position: absolute; inset: 0; touch-action: none; cursor: pointer; }
.sg-scene .scene-canvas { display: block; width: 100%; height: 100%; }
.sg-top { position: absolute; left: var(--pad); right: var(--pad); top: calc(var(--pad) * 0.8); display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.sg-kicker { font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.1vw, 20px); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 236, 205, 0.86); }
.sg-close { pointer-events: auto; border: 0; cursor: pointer; min-height: 44px; padding: 0 16px; background: rgba(255, 255, 255, 0.1); color: rgba(255, 236, 205, 0.9); font-family: var(--font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; }
.sg-close:hover { background: rgba(255, 255, 255, 0.18); }
.sg-root.is-signed .sg-close { display: none; }
/* the hold button stands on the desk to the right of the contract, by the pen -- never over the line he signs on */
.sg-bottom { position: absolute; right: clamp(24px, 9vw, 180px); bottom: clamp(24px, 12vh, 140px); display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; transition: opacity 300ms var(--ease-std); }
.sg-root.is-signed .sg-bottom { opacity: 0; }
.sg-root.is-writing .sg-hold { opacity: 0.55; pointer-events: none; }
.sg-hold {
  pointer-events: auto; position: relative; display: grid; place-items: center; width: clamp(104px, 8.6vw, 148px); aspect-ratio: 1; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 248, 236, 0.16); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); touch-action: none; user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 0 0 rgba(212, 175, 98, 0.55);
  animation: sg-call 1.8s ease-out infinite;
  transition: transform var(--t-fast) var(--ease-out), background var(--t-fast);
}
/* the call to press: a ring that breathes out from the button until it is pressed (never once it is) */
@keyframes sg-call { 0% { box-shadow: 0 0 0 0 rgba(212, 175, 98, 0.55); } 70%, 100% { box-shadow: 0 0 0 26px rgba(212, 175, 98, 0); } }
.sg-root.is-holding .sg-hold, .sg-root.is-writing .sg-hold { animation: none; }
.sg-root.is-holding .sg-hold { transform: scale(0.94); background: rgba(255, 248, 236, 0.28); }
@media (prefers-reduced-motion: reduce) { .sg-hold { animation: none; } }
.sg-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.sg-ring circle { fill: none; stroke-width: 4; }
.sg-ring-track { stroke: rgba(255, 236, 205, 0.25); }
.sg-ring-fill { stroke: #d4af62; stroke-dasharray: 289; stroke-dashoffset: 289; stroke-linecap: butt; }
.sg-hold-text { position: relative; max-width: 72%; font-family: var(--font-display); font-weight: 700; font-size: clamp(14px, 1.05vw, 18px); letter-spacing: 0.12em; line-height: 1.05; text-transform: uppercase; text-align: center; color: #fff4e2; }
.sg-hint { margin: 0; max-width: 24ch; text-align: center; font-weight: 600; font-size: clamp(14px, 1vw, 18px); line-height: 1.25; color: #fff4e2; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); }
.sg-welcome {
  /* beside the contract, on the desk: the signature and the stamp stay in view */
  position: absolute; left: auto; right: clamp(20px, 6vw, 120px); top: 50%; bottom: auto; max-width: min(420px, 34vw); transform: translate(0, calc(-50% + 20px)); opacity: 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: clamp(16px, 2.2vh, 26px) clamp(24px, 3vw, 48px); background: rgba(255, 252, 245, 0.94); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); text-align: center;
  transition: opacity 520ms var(--ease-std), transform 620ms var(--ease-out);
}
.sg-welcome[hidden] { display: none; }
.sg-welcome { top: 62%; max-width: min(520px, 42vw); }
.sg-welcome-title { white-space: nowrap; font-size: clamp(24px, 2.2vw, 44px); }
.sg-welcome:not(.is-in) { pointer-events: none; }
.sg-welcome.is-in { opacity: 1; transform: translate(0, -50%); }
.sg-welcome-kicker { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: #9a7a3a; }
.sg-welcome-title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 2.6vw, 50px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 0.95; color: var(--ink-900); }
.sg-welcome-name { margin: 0; font-weight: 600; font-size: clamp(13px, 1vw, 17px); color: var(--ink-500); }
.sg-continue { margin-top: 6px; min-height: 48px; min-width: 180px; justify-content: center; }

/* --- landscape phones --------------------------------------------------------------------------------------------- */
/* the profile's way back and its count stay on one line wherever it was opened from (a longer name: "Transfer List") */
.pp-back span, .pp-count { white-space: nowrap; }
.dash-grid.is-b18 .nc-count { white-space: nowrap; }
@media (max-height: 520px) {
  .dash-grid.is-b18 .nc-count { display: none; }
  .tr-sheet .pp-sheet-body { gap: 6px; }
  .tr-sheet .pp-note { display: none; }
  /* (the user, 8 Oct) the inbox card takes the height its header and three rows need -- two rows and a cut third before -- from the cards
     above it; the gap between the cards stays the one constant */
  .dash-grid.is-b18 { --inbox-h: clamp(112px, 29vh, 150px); grid-template-columns: minmax(0, 25fr) minmax(0, 47fr) minmax(0, 28fr); }
  .sched-card .card-face { padding: 7px 10px; gap: 5px; }
  .sd-head { min-height: 24px; padding-bottom: 4px; }
  .sd-season { min-height: 28px; font-size: 11px; }
  .sd-today-dn { font-size: 36px; }
  .sd-today span { font-size: 11px; }
  .sd-next { padding: 4px 8px; gap: 8px; }
  .sd-next-count b { font-size: 20px; }
  .sd-next-text b { font-size: 13px; }
  .sd-next-text small { display: none; }
  .sd-go .mc-advance { min-width: 120px; height: 38px; font-size: 14px; }
  /* match day on a phone: crest over name, as on the laptop, so both names keep their ends */
  .dash-match .is-matchday .mc-side { flex-direction: column; gap: 3px; }
  .match-card.is-matchday .mc-crest .crest { width: 40px; }
  .match-card.is-matchday .mc-name { font-size: 14px; margin-top: 0; }
  .match-card.is-matchday .mc-v { width: 34px; font-size: 16px; }
  .mc-head-note { max-width: 62%; min-height: 28px; gap: 6px; padding: 0 3px 0 8px; font-size: 11px; }
  .mc-head-note b { min-height: 22px; padding: 0 7px; font-size: 10.5px; }
  .mc-play .mc-advance { height: 40px; min-width: 160px; font-size: 15px; }
  .mc-quick { height: 40px; padding: 0 12px; font-size: 13px; }
  .cur.is-page { --cur-h: 34px; }
  .cur.is-sheet { --cur-h: 30px; }
  .mc-today { margin-right: 6px; padding: 2px 6px; }
  .mc-today b { font-size: 12px; }
  .mc-stop { left: 6px; right: 6px; bottom: 6px; padding: 4px 4px 4px 10px; font-size: 12px; }
  .mc-stop-open { min-height: 32px; font-size: 12px; }
  .mc-cta-line { font-size: 10.5px; }
  .career-page[data-page="transfers"] { padding: 6px var(--frame-x) 8px; }
  .tf-grid { --gap: 7px; }
  .tf-line { margin: 3px 0 2px; font-size: 11px; }
  .tf-tools { gap: 6px; }
  .tf-day small { display: none; }
  .tf-day b { font-size: 14px; }
  .tf-continue { min-height: 40px; min-width: 96px; font-size: 13px; }
  .tf-notice { margin-top: 4px; padding: 5px 10px; font-size: 12px; }
  .tf-chip { min-height: 34px; min-width: 38px; padding: 0 8px; font-size: 12px; }
  .tf-sorts .sh-sort { min-height: 34px; font-size: 12px; }
  .tf-row { font-size: 11.5px; min-height: 2.6em; padding: 0.2em 0.4em; gap: 0.5em; grid-template-columns: 2.4em minmax(8em, 1.6fr) 2.8em 2.2em minmax(6em, 1fr) 4.8em 4.8em 2.4em; }
  .tf-name small { display: none; }
  .tk { grid-template-columns: minmax(12em, 34fr) minmax(0, 66fr); gap: 8px; }
  .tk-row { font-size: 11.5px; min-height: 2.8em; padding: 0.35em 0.5em; }
  .tk-head { padding: 6px 10px; gap: 8px; font-size: 12px; }
  .tk-profile { width: 36px; height: 36px; }
  .tk-thread { padding: 8px 10px; gap: 6px; }
  .tk-mail { padding: 7px 10px; }
  .tk-mail p { font-size: 12px; }
  .tk-act { padding: 6px 10px 8px; }
  .tk-hint { font-size: 11.5px; margin-bottom: 4px; }
  .tk-buttons { margin-top: 4px; }
  .tk-buttons .btn { min-height: 40px; font-size: 12.5px; }
  .sp { grid-template-columns: minmax(14em, 42fr) minmax(0, 58fr); gap: 8px; }
  .sp-job { padding: 6px 10px; font-size: 11.5px; }
  .sp-form { padding: 8px; gap: 4px; }
  .sp-form .pp-seg .seg-btn { min-height: 34px; font-size: 11px; }
  .sp-form .pp-slider { height: 28px; }
  .sp-send .btn { min-height: 40px; font-size: 12.5px; }
  .sp-read { padding: 10px 12px; gap: 6px; }
  .sp-facts { gap: 6px; }
  .sp-hit { font-size: 11.5px; }
  .wd-hero b { font-size: 56px; }
  .wd-deals li { padding: 6px 10px; font-size: 11.5px; }
  .tr-modal { padding: 6px 5vw; }
  .tr-sheet { width: min(640px, 100%); }
  .tr-meet { min-height: 42px; font-size: 13px; }
  .cur.is-hero { --cur-h: 42px; }
  .sg-hold { width: 84px; }
  .sg-welcome { padding: 10px 20px; bottom: 12px; }
  .sg-welcome-title { font-size: 24px; }
  .sg-continue { min-height: 42px; }
}
@media (min-width: 2200px) {
  .tf-row, .tk-row, .sp-hit { font-size: 20px; }
}

/* --- round 3 (the user's board comments) ----------------------------------------------------------------------------
   The Transfer Player sheets (rows, a summary, the club's voice and the player's card), the Game Plan's positions on the
   list and the scouts' form, the age range's two-thumbed rail, the purse sheet, Latest Transfers, and a calendar that
   is alive. */

/* the list's exact positions: one row that scrolls sideways rather than wrap */
.tf-filters.is-exact { margin-top: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.tf-filters.is-exact::-webkit-scrollbar { display: none; }
.tf-filters.is-exact .tf-chip { flex: none; min-width: 44px; min-height: 34px; font-size: 13px; }

/* the scouts' form */
.sp-form .pp-seg { grid-template-columns: repeat(auto-fit, minmax(5.6em, 1fr)); }
.sp-form .pp-k small { margin-left: 8px; font-family: var(--font-ui); font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-500); }
.sp-form { padding-bottom: 0; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.sp-chips.is-lines { margin-bottom: 4px; }
.sp-chip {
  border: 0; cursor: pointer; min-height: 34px; min-width: 42px; padding: 0 9px; background: var(--paper); color: var(--ink-500); box-shadow: inset 0 0 0 1px rgba(16, 21, 31, 0.12);
  font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; transition: background var(--t-micro), color var(--t-micro);
}
.sp-chip.is-line { text-transform: uppercase; font-size: 12px; letter-spacing: 0.1em; }
.sp-chip:hover { color: var(--ink-900); }
.sp-chip.is-on { background: var(--dark); color: var(--paper); box-shadow: none; }
.sp-chip.is-clear { background: transparent; box-shadow: none; text-decoration: underline; }
.sp-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sp-send { position: sticky; bottom: 0; margin: 4px -12px 0; padding: 10px 12px; background: var(--paper-2); box-shadow: 0 -10px 12px -10px rgba(16, 24, 40, 0.28); z-index: 1; }
.sp-crit { margin: 0; font-weight: 600; font-size: clamp(12.5px, 0.9vw, 15px); color: var(--ink-500); }

/* the range: two thumbs on one rail (the age of a search) */
.rg .rg-fill { position: absolute; top: 0; bottom: 0; left: calc(var(--a) * 100%); right: calc((1 - var(--b)) * 100%); background: linear-gradient(90deg, #5d93e6, var(--accent)); }
.rg-thumb {
  position: absolute; top: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: #fff; outline: none;
  box-shadow: 0 0 0 2px var(--accent), 0 3px 8px rgba(16, 24, 40, 0.25); transition: transform var(--t-micro) var(--ease-out), box-shadow var(--t-micro);
}
.rg-lo { left: calc(var(--a) * 100%); }
.rg-hi { left: calc(var(--b) * 100%); }
.rg-thumb:hover { transform: scale(1.12); }
.rg-thumb:focus-visible, .rg.is-dragging .rg-thumb:focus { transform: scale(1.2); box-shadow: 0 0 0 2px var(--accent), 0 0 0 8px var(--accent-soft), 0 3px 8px rgba(16, 24, 40, 0.25); }

/* the Transfer Player sheet: the label on the left, its value on the right, the open row showing its controls */
.tr-modal.is-deal .tr-sheet { width: min(1060px, 100%); }
.tr-modal.is-deal.is-purse .tr-sheet { width: min(640px, 100%); }
.dl { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(14px, 1.8vw, 28px); align-items: start; }
.dl-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dl-rows { display: flex; flex-direction: column; gap: 2px; }
.dl-row { background: var(--paper-2); transition: box-shadow var(--t-fast), background var(--t-fast); }
.dl-row.is-open { position: relative; z-index: 1; background: var(--paper); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.12), inset 0 0 0 1px rgba(45, 111, 214, 0.35); }
.dl-head {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto 1.2em; align-items: center; gap: 12px; min-height: 56px; padding: 0 14px;
  font-family: var(--font-display); font-weight: 700; font-size: clamp(16px, 1.15vw, 21px); letter-spacing: 0.04em; color: var(--ink-700);
}
.dl-row.is-open .dl-head { color: var(--ink-900); font-size: clamp(18px, 1.3vw, 24px); }
.dl-head:hover { background: rgba(255, 255, 255, 0.7); }
.dl-head:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dl-head b { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-900); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 18em; }
.dl-head i { width: 1.1em; height: 1.1em; color: var(--ink-300); transition: transform var(--t-fast) var(--ease-out), color var(--t-fast); }
.dl-row.is-open .dl-head i { transform: rotate(90deg); color: var(--accent); }
.dl-body { padding: 4px 14px 14px; display: flex; flex-direction: column; gap: 10px; animation: pp-rise 260ms var(--ease-out) backwards; }
.dl-body[hidden] { display: none; }
.dl-tip { margin: 0; font-size: 13px; font-weight: 500; color: var(--ink-500); }
.dl-pick { display: grid; gap: 3px; max-height: 240px; overflow-y: auto; }
.dl-opt { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 48px; padding: 4px 10px; background: var(--paper-2); font-size: 14px; }
.dl-opt:first-child { grid-template-columns: minmax(0, 1fr); gap: 0; }
.dl-opt:hover { background: var(--surface-ink); }
.dl-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.dl-opt.is-on { background: var(--paper); box-shadow: inset 0 0 0 2px var(--accent); }
.dl-opt b { font-weight: 700; color: var(--ink-900); }
.dl-opt small { color: var(--ink-500); font-weight: 500; }
.dl-opt:first-child { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.dl-opt-name { display: flex; flex-direction: column; min-width: 0; }
.dl-opt-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dl-opt-value { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.dl-sum { display: grid; gap: 4px; padding: 12px 14px; background: var(--paper-2); }
.dl-sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; color: var(--ink-500); }
.dl-sum b { font-family: var(--font-display); font-weight: 700; font-size: 1.2em; color: var(--ink-900); }
.dl-sum .dl-sum-purse { align-items: center; margin-top: 2px; padding-top: 6px; border-top: 1px solid rgba(16, 21, 31, 0.1); }
.dl-sum-purse > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.dl-call { align-self: stretch; display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 16px; color: #eef3f9; background: linear-gradient(165deg, #1a2635 0%, #0e151f 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.dl-who { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(255, 255, 255, 0.08); }
.dl-who .crest { width: 34px; height: auto; aspect-ratio: 40 / 46; flex: none; }
.dl-who > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dl-who small { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #7fd6a1; }
.dl-who b { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; }
.dl-globe { display: grid; place-items: center; width: 34px; height: 34px; color: #cfe0f5; flex: none; }
.dl-say { margin: 0; text-align: center; font-size: clamp(14px, 1vw, 17px); line-height: 1.4; color: #dfe8f3; }
.dl-say b { font-family: var(--font-display); font-weight: 700; font-size: 1.15em; color: #f4d98a; }
.dl-card { position: relative; margin-top: auto; padding: 12px 14px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); transform: rotate(-1.4deg); transition: transform var(--t-fast) var(--ease-out); }
.dl-call:hover .dl-card { transform: rotate(0deg); }
.dl-card-head { display: flex; flex-direction: column; min-width: 0; }
.dl-card-head small { font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #9fb0c4; }
.dl-card-head b { font-family: var(--font-display); font-weight: 700; font-size: clamp(20px, 1.5vw, 28px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.05; }
.dl-pos { position: absolute; top: 4px; right: 12px; font-family: var(--font-display); font-weight: 700; font-size: 46px; line-height: 1; color: rgba(255, 255, 255, 0.1); }
.dl-card dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; margin: 10px 0 0; }
.dl-card dl > div { display: flex; flex-direction: column; min-width: 0; }
.dl-card dl > .is-wide { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: baseline; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.dl-card dt { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: #9fb0c4; }
.dl-card dd { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 20px; }
.dl-card .dl-ovr { color: #f4d98a; }

/* the purse sheet: the transfer budget alone */
.pu { display: flex; flex-direction: column; gap: 14px; }
.pu-hero { display: grid; place-items: center; padding: clamp(18px, 3.4vh, 32px); background: radial-gradient(120% 150% at 50% 0%, #223145 0%, #0d141e 100%); }
.pu-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.pu-facts li { display: grid; gap: 2px; padding: 10px 14px; background: var(--paper-2); }
.pu-facts span { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); }
.pu-facts b { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, 1.9vw, 32px); line-height: 1.05; color: var(--ink-900); }
.pu-facts small { font-size: 12.5px; font-weight: 500; color: var(--ink-500); }

/* Latest Transfers: the window's biggest move as a headline, the newest deals like a ticker */
.lt-crests { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.lt-crests .crest { width: clamp(22px, 1.8vw, 34px); height: auto; aspect-ratio: 40 / 46; }
.lt-crests em { font-style: normal; font-weight: 700; color: var(--ink-300); }
.lt-crests.is-small .crest { width: clamp(15px, 1.2vw, 21px); }
.lt-none { display: inline-block; width: 1em; height: 1em; border-radius: 50%; background: rgba(16, 21, 31, 0.16); }
.lt-hero { flex: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 4px 0 6px; padding: 8px 12px; color: #fff; background: linear-gradient(100deg, #0f1620, #1c2a3b); box-shadow: inset 3px 0 0 #d8a334; }
.lt-hero .lt-crests em { color: rgba(255, 255, 255, 0.4); }
.lt-hero-text { display: flex; flex-direction: column; min-width: 0; }
.lt-hero-text small { font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #f4d98a; }
.lt-hero-text b { font-family: var(--font-display); font-weight: 700; font-size: clamp(15px, min(9cqh, 6cqw), 24px); letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.05; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-hero-text span { font-size: 12px; color: #b6c3d3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-hero .lt-fee { font-family: var(--font-display); font-weight: 700; font-size: clamp(22px, min(13cqh, 10cqw), 42px); line-height: 1; color: #f4d98a; }
.lt-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-height: 0; display: grid; grid-auto-rows: minmax(0, 1fr); }
.lt-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-height: 0; overflow: hidden; border-top: 1px solid rgba(16, 21, 31, 0.07); font-size: clamp(11.5px, min(9cqh, 5cqw), 16px); font-weight: 600; color: var(--ink-700); }
.lt-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-item b { font-family: var(--font-display); font-weight: 700; color: var(--ink-900); }
.lt-item.is-yours .lt-name { color: var(--accent-ink); }
@container (max-height: 250px) { .lt-item:nth-child(n + 3) { display: none; } }
@container (max-height: 190px) { .lt-list { display: none; } }
.wd-hero { flex-wrap: wrap; }
.wd-hero .wd-moves { margin-left: auto; align-items: flex-end; text-align: right; }
.wd-hero .wd-moves b { font-size: clamp(30px, 2.8vw, 52px); line-height: 0.9; }
.lt-feature { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(12px, 2vw, 28px); padding: clamp(14px, 2.4vh, 26px) clamp(16px, 2vw, 32px); color: #fff;
  background: linear-gradient(105deg, color-mix(in srgb, var(--from) 62%, #0b111a) 0%, #0b111a 52%, color-mix(in srgb, var(--to) 60%, #0b111a) 100%); box-shadow: var(--shadow-1); }
.lt-feature::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.14) 50%, transparent 62%); transform: translateX(-100%); animation: lt-glint 6s ease-in-out 1.2s infinite; }
@keyframes lt-glint { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.lt-feature .lt-crests .crest { width: clamp(38px, 4vw, 70px); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4)); }
.lt-feature .lt-crests em { color: rgba(255, 255, 255, 0.5); font-size: 1.4em; }
.lt-feature small { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #f4d98a; }
.lt-feature h2 { margin: 2px 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 2.6vw, 46px); letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }
.lt-feature p { margin: 0; font-weight: 500; color: #c5d1df; }
.lt-feature-fee { font-family: var(--font-display); font-weight: 700; font-size: clamp(34px, 4vw, 72px); line-height: 0.9; color: #f4d98a; text-shadow: 0 2px 14px rgba(244, 217, 138, 0.35); }
.lt-feature.is-yours { box-shadow: 0 0 0 2px var(--accent), var(--shadow-1); }
.lt-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.lt-row { display: grid; grid-template-columns: 6.6em auto minmax(0, 1fr) auto 6em; align-items: center; gap: 14px; padding: 10px 14px; background: var(--surface-2); font-size: clamp(13px, 0.98vw, 17px); animation: pp-rise 380ms var(--ease-out) backwards; transition: transform var(--t-fast) var(--ease-out), background var(--t-fast); }
.lt-row:nth-child(2) { animation-delay: 40ms; } .lt-row:nth-child(3) { animation-delay: 80ms; } .lt-row:nth-child(4) { animation-delay: 120ms; } .lt-row:nth-child(n + 5) { animation-delay: 160ms; }
.lt-row:hover { background: var(--paper); transform: translateX(3px); }
.lt-row.is-yours { background: rgba(45, 111, 214, 0.07); box-shadow: inset 3px 0 0 rgba(45, 111, 214, 0.5); }
.lt-row time { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; color: var(--ink-500); white-space: nowrap; }
.lt-who { display: flex; flex-direction: column; min-width: 0; }
.lt-who b { font-weight: 700; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-who small { color: var(--ink-500); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-kind { font-style: normal; font-family: var(--font-display); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; background: var(--paper-2); color: var(--ink-500); }
.lt-kind.is-transfer { background: var(--dark); color: #fff; }
.lt-kind.is-loan { background: #dfeaff; color: #2557b5; }
.lt-kind.is-free { background: #e2f4e8; color: #1f7a49; }
.lt-kind.is-abroad { background: #fdf1d6; color: #8a5a00; }
.lt-row .lt-fee { font-family: var(--font-display); font-weight: 700; font-size: 1.3em; text-align: right; color: var(--ink-900); }
@media (prefers-reduced-motion: reduce) { .lt-feature::after, .lt-row { animation: none; } }

@media (max-width: 900px) {
  .dl { grid-template-columns: minmax(0, 1fr); }
  .dl-call { display: none; }
}
@media (max-height: 520px) {
  .dl { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .dl-call { display: none; }
  .tr-modal.is-deal .tr-sheet { width: min(720px, 100%); }
  .dl-main { gap: 6px; }
  .dl-head { min-height: 40px; padding: 0 10px; font-size: 14px; }
  .dl-row.is-open .dl-head { font-size: 15px; }
  .dl-body { padding: 2px 10px 8px; gap: 6px; }
  .dl-pick { max-height: 120px; }
  .dl-opt { min-height: 38px; font-size: 12.5px; }
  .dl-sum { padding: 6px 10px; gap: 2px; }
  .dl-sum > div { font-size: 12px; }
  .pu-hero { padding: 10px; }
  .pu-facts li { padding: 6px 10px; }
  .pu-facts b { font-size: 20px; }
  .pu-facts small { display: none; }
  .sp-chip { min-height: 30px; min-width: 36px; font-size: 12px; padding: 0 6px; }
  .sp-send { padding: 6px 12px; }
  .lt-hero { padding: 5px 8px; gap: 6px; }
  .lt-row { grid-template-columns: auto minmax(0, 1fr) auto; padding: 6px 10px; gap: 8px; font-size: 12px; }
  .lt-row time, .lt-kind { display: none; }
  .lt-feature { padding: 8px 12px; gap: 10px; }
  .lt-feature h2 { font-size: 20px; }
  .lt-feature-fee { font-size: 28px; }
  .lt-feature p { display: none; }
  .wd-hero .wd-moves b { font-size: 24px; }
  .tf-filters.is-exact { margin-top: 3px; }
}

/* round 3, after the first look */
.dl-pick { max-height: 176px; }
.sp-form .pp-seg { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.sp-form .pp-seg .seg-btn { font-size: 12px; letter-spacing: 0.04em; line-height: 1.1; padding: 4px 2px; }
.sp-form .pp-slider-row { padding-left: 12px; }
.lt-hero { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "crests fee" "text text"; row-gap: 4px; }
.lt-hero .lt-crests { grid-area: crests; }
.lt-hero .lt-fee { grid-area: fee; justify-self: end; }
.lt-hero-text { grid-area: text; }
.sg-root.is-writing .sg-hold-text { letter-spacing: 0.1em; }

/* the purse sheet's coin sits inside a hero panel; its wrapper carries the room the coin overhangs */
.pu-purse { padding-left: calc(clamp(54px, 6.4vh, 72px) * 0.2); }
/* a day with nothing special on it still says what the club does */
.sd-ev.is-routine { background: transparent; color: var(--ink-300); font-weight: 600; padding-inline: 0; overflow-wrap: normal; }
.sd-ev.is-routine span { color: var(--ink-300); font-size: 0.8em; }
.sd-day.is-today .sd-ev.is-routine { color: var(--accent-ink); }
.sd-day.is-today .sd-ev.is-routine span { color: var(--accent-ink); }

/* round 4 (the user's second board): the hub's headline blends the two clubs' colours like the page's; the light panel;
   one scrollbar; the welcome fits; the kit balls are the Game Plan's; no sweeping light; the purse is the coin alone */
.lt-hero { background: linear-gradient(105deg, color-mix(in srgb, var(--from) 62%, #0b111a) 0%, #0b111a 52%, color-mix(in srgb, var(--to) 60%, #0b111a) 100%); box-shadow: none; }
.sched-card.is-walking .card-face::after { content: none; animation: none; }

/* the club's voice and the player's card: the light palette, not black (the user) */
.dl-call { color: var(--ink-900); background: linear-gradient(165deg, var(--paper-2) 0%, #e4e9f0 100%); box-shadow: inset 0 0 0 1px rgba(16, 21, 31, 0.08); }
.dl-who { background: var(--paper); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1); }
.dl-who small { color: var(--accent-ink); }
.dl-globe { color: var(--ink-500); }
.dl-say { color: var(--ink-700); }
.dl-say b { color: var(--ink-900); }
.dl-card { background: var(--paper); box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14), inset 0 0 0 1px rgba(16, 21, 31, 0.06); }
.dl-card-head small, .dl-card dt { color: var(--ink-500); }
.dl-pos { color: rgba(16, 21, 31, 0.07); }
.dl-card dl > .is-wide { border-top-color: rgba(16, 21, 31, 0.1); }
.dl-card .dl-ovr { color: var(--accent-ink); }

/* the purse: the coin alone, in a small plate; no caption line above it */
.tr-modal.is-purse .tr-sheet { width: min(460px, 100%); }
.is-purse .pp-sheet-head p:empty { display: none; }
.pu-hero { background: radial-gradient(120% 150% at 50% 0%, #223145 0%, #111a27 100%); padding: clamp(26px, 5vh, 48px); }
.pu-hero .cur.is-hero { --cur-h: clamp(64px, 8vh, 88px); }

/* every scrollbar, one design (the user: the Squad Hub's -- thin, square, a quiet ink thumb that darkens under the pointer) */
* { scrollbar-width: thin; scrollbar-color: rgba(16, 21, 31, 0.3) transparent; }
*:hover { scrollbar-color: rgba(16, 21, 31, 0.5) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(16, 21, 31, 0.26); border: 3px solid transparent; background-clip: padding-box; min-height: 40px; min-width: 40px; }
*::-webkit-scrollbar-thumb:hover { background-color: rgba(16, 21, 31, 0.5); }
*::-webkit-scrollbar-thumb:active { background-color: var(--accent); }
*::-webkit-scrollbar-corner { background: transparent; }

/* the welcome: a long club name wraps and steps down instead of being cut off (the user: "Welcome to Aldergate FC") */
.sg-welcome-title { white-space: normal; overflow-wrap: anywhere; text-wrap: balance; font-size: clamp(22px, min(3.2vw, 5.4vh), 42px); line-height: 1.05; }
.sg-welcome { max-width: min(92vw, 640px); }


.pu-hero { background: var(--paper-2); }

/* --- A2 (ADR-060): the Free Agents card and page, the final word ------------------------------------------------- */
/* five cards: the list on the left, the talks across the top, Free Agents / Scouts / Latest Transfers below (fork A2-S1) */
.tf-grid {
  grid-template-columns: minmax(0, 43fr) repeat(3, minmax(0, 19fr));
  grid-template-areas: "list talks talks talks" "list free scout window";
}
.tf-cell-free { grid-area: free; }
.tl-list.fa-list { grid-auto-rows: unset; grid-template-rows: repeat(4, minmax(0, 1fr)); }
.fa-list .tl-item { font-size: clamp(11.5px, min(4.6cqh, 3.2cqw), 17px); }
.fa-ovr { display: none; font-weight: 700; color: var(--ink-900); }
.fa-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0.6em; padding: 0 0.4em; font-size: clamp(11.5px, min(4.6cqh, 3.4cqw), 17px); min-height: 0; overflow: hidden; }
.fa-item + .fa-item { border-top: 1px solid rgba(16, 21, 31, 0.07); }
.fa-item.is-talks { background: var(--surface-ink); }
.fa-name { display: flex; flex-direction: column; min-width: 0; font-weight: 600; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fa-name small { font-size: 0.72em; font-weight: 500; color: var(--ink-500); overflow: hidden; text-overflow: ellipsis; }
.tf-row.fa-row { grid-template-columns: 2.6em minmax(10em, 1.6fr) 3.2em 2.6em minmax(9em, 1.2fr) 8em 3.4em; }
.tf-price small { font-family: var(--font-ui); font-weight: 500; font-size: 0.7em; color: var(--ink-500); }
.tk-final { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.86em; color: var(--ink-900); padding: 0.05em 0.4em; background: var(--surface-ink); white-space: nowrap; }

@media (max-height: 520px) {
  .tf-grid { grid-template-columns: minmax(0, 40fr) repeat(3, minmax(0, 20fr)); }
  .fa-item { font-size: 11px; }
  /* the hub's narrow Free Agents card on a phone: the name before the orb; the overall moves into the second line */
  .fa-list .tf-orb { display: none; }
  .fa-list .fa-ovr { display: inline; }
  .fa-list .tl-price small { display: none; }
  .tf-row.fa-row { font-size: 11.5px; min-height: 2.6em; padding: 0.2em 0.4em; gap: 0.5em; grid-template-columns: 2.4em minmax(8em, 1.6fr) 2.8em 2.2em minmax(6em, 1fr) 6.4em 2.4em; }
}

/* A2: the hub's Free Agents card -- the count never clipped, a long name ends in an ellipsis, "/wk" kept small */
.tcard-free .card-sub { flex-shrink: 0; overflow: visible; }
.fa-list .tl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-list .tl-price small { font-size: 0.7em; font-weight: 500; color: var(--ink-500); }

/* A6 (tracker #15): the talks the card has no room for, counted */
.tk-more { margin: 4px 0 0; padding: 6px 10px 0; border-top: 1px solid var(--line); font-family: var(--font-display); font-weight: 700; font-size: clamp(12px, 0.85vw, 15px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-500); }
@media (max-height: 520px) { .tk-more { font-size: 10.5px; padding-top: 3px; } }

/* the user (10 Oct): a long line under Continue ("7 days to the European Super Cup preliminary round, second leg") made the
   button far wider than its calendar cell. The line is small, wraps inside the button's own width and never widens it. */
.mc-advance.has-sub { padding: 3px 8px; }
.mc-advance.has-sub .mc-advance-sub { font-size: 9px; line-height: 1.1; width: 0; min-width: 100%; white-space: normal; text-align: center; text-wrap: balance; }