/*
 * Transfers page: rules for pages with <body class="p-transfers">. Shared rules are in sfp.css.
 * Phone: each transfer is a small card (team, then the player in, then the player out).
 * From 1000px wide: the same markup becomes table rows with columns Team / In / £m / From / Out / £m / To.
 */
.p-transfers a:focus-visible, .p-transfers button:focus-visible, .p-transfers input:focus-visible, .p-transfers select:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  border-radius: 8px;
}
.p-transfers [hidden] { display: none !important; }

/* ---------- heading and tools ---------- */
.p-transfers .tf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 12px; margin: 0 4px; }
.p-transfers .tf-head h1 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: .01em; }
.p-transfers .tf-upd { margin: 0; font-size: 12.5px; color: var(--ink-faint); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.p-transfers .section > .sub { margin: 4px 4px 0; font-size: 13px; color: var(--ink-faint); line-height: 1.4; }
.p-transfers .tf-tools { display: grid; gap: 10px; padding: 12px; }
.p-transfers .tf-tools label { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.p-transfers .tf-tools label span { flex: none; min-width: 52px; }
.p-transfers .tf-tools input, .p-transfers .tf-tools select {
  flex: 1; min-width: 0; font: inherit; font-size: 15px; color: #fff;
  background: rgba(0,0,40,.4); border: 1px solid var(--card-border); border-radius: 8px; padding: 8px 10px;
}
.p-transfers .tf-tools input::placeholder { color: var(--ink-faint); }
.p-transfers .tf-tools select option { color: #000; }

/* ---------- one card per week ---------- */
.p-transfers .tf-win { padding: 12px 10px 6px; }
.p-transfers .tf-win-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 12px; margin: 0 4px 6px; }
.p-transfers .tf-win-head h2 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--accent-2); }
.p-transfers .tf-win-head p { margin: 0; font-size: 12.5px; color: var(--ink-faint); }
.p-transfers .tf-none-wk { margin: 6px 4px 10px; font-size: 14px; color: var(--ink-soft); }
.p-transfers .tf-none { margin: 0; padding: 16px; font-size: 14px; color: var(--ink-soft); }
.p-transfers .tr-cols { display: none; }
.p-transfers .tr-list { list-style: none; margin: 0; padding: 0; }

/* ---------- a transfer (phone) ---------- */
.p-transfers .tr { padding: 10px 4px 9px; border-top: 1px solid rgba(255,255,255,.1); }
.p-transfers .tr.me { background: rgba(242,44,247,.15); box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; border-radius: 6px; }
.p-transfers .tr-team { margin: 0 0 5px; font-size: 15px; font-weight: 600; letter-spacing: .03em; }
.p-transfers .tr-in, .p-transfers .tr-out { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: baseline; gap: 0 8px; padding: 2px 0; }
.p-transfers .tg { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.p-transfers .tr-in .tg { color: var(--up); }
.p-transfers .tr-out .tg { color: var(--down); }
.p-transfers .tr-pl { font-size: 16px; font-weight: 500; line-height: 1.15; overflow-wrap: anywhere; }
.p-transfers .tr-pl small { display: block; margin-top: 1px; font-size: 12px; font-weight: 400; color: var(--ink-faint); letter-spacing: .03em; }
.p-transfers .tr-m { font-size: 15px; font-weight: 600; text-align: right; color: var(--ink); }
.p-transfers .tr-fr { grid-column: 2 / 4; font-size: 12.5px; color: var(--ink-faint); margin-top: 1px; }
.p-transfers .tr-fr i { font-style: normal; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; margin-right: 2px; }
.p-transfers .tr-fr.is-pool { color: var(--accent-2); }
.p-transfers .is-empty .tr-pl { color: var(--ink-faint); }

/* tags from csv/transfer-notes.csv (Loan, Loan return...) */
.p-transfers .tr-note { color: var(--ink-soft); font-size: 12px; line-height: 1.25; }
.p-transfers .tr-note .tk { display: inline-block; margin-right: 4px; padding: 1px 7px; border: 1px solid var(--gold); border-radius: 99px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }

/* ---------- desktop: rows in columns ---------- */
@media (min-width: 1000px) {
  .p-transfers .page { max-width: 1180px; padding: 28px var(--page-pad) 64px; }
  .p-transfers .tf-tools { grid-template-columns: 1fr 1fr; }
  .p-transfers .tf-win { padding: 14px 16px 8px; }
  .p-transfers .tf-win-head { margin-left: 0; }
  .p-transfers .tr-cols, .p-transfers .tr {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.8fr) 60px minmax(0, 1.3fr) minmax(0, 1.8fr) 60px minmax(0, 1.3fr);
    column-gap: 14px;
    align-items: center;
  }
  .p-transfers .tr-cols { padding: 4px 4px 6px; font-size: 13px; color: var(--ink-faint); letter-spacing: .04em; }
  .p-transfers .tr-cols span:nth-child(3), .p-transfers .tr-cols span:nth-child(6) { text-align: right; }
  .p-transfers .tr { padding: 8px 4px; }
  .p-transfers .tr.me { padding-left: 4px; box-shadow: inset 3px 0 0 var(--accent); }
  .p-transfers .tr-team { margin: 0; font-size: 16px; }
  .p-transfers .tr-in, .p-transfers .tr-out { display: contents; }
  .p-transfers .tg { display: none; }
  .p-transfers .tr-fr { grid-column: auto; margin: 0; font-size: 14px; color: var(--ink-soft); }
  .p-transfers .tr-fr i { display: none; }
  .p-transfers .tr-fr.is-pool { color: var(--accent-2); font-style: italic; }
  .p-transfers .tr-fr .tlink { text-transform: none; }
  .p-transfers .is-empty .tr-pl { grid-column: auto; }
  .p-transfers .is-empty::after { content: none; }
}
@media (min-width: 1400px) {
  .p-transfers .page { max-width: 1320px; }
}