/* Football Eras
   ------------------------------------------------------------------------------------------------
   Sections: tokens · base · header · club bar · stage (axis, labels, viewport) · lanes
             (bands, trophies, player bars, squad cards) · footer · panel · tooltip · shared · responsive

   Variables set from JS, per club or per element:
     --c1 --c2      kit colours                  --ln --ln2   line colours (kit colours that show on white)
     --lnk          line colour dark enough for text
     --b0 --b1 --b2 pale tints of --ln for manager bands (hover / normal / alternate)
     --s1 --s2      the secondary colour: band stripes / band underline
     --ink          text colour on the round club badge
     --pc --pb      position colour and its pale background (from .pos-GK etc.)
     --cols         columns in a squad-card group */

/* ============================================================== tokens */
:root {
  /* warm paper and ink, like a printed almanac */
  --bg: #FAF8F4;
  --bg2: #F4F1EA;
  --panel: #FFFEFB;
  --panel2: #F2EEE6;
  --line: #E6E0D5;
  --line2: #D8D0C2;
  --text: #2A2620;
  --strong: #17140F;
  --muted: #6F675B;
  --faint: #A69D8F;

  --gold: #B88A2B;        /* league titles, primary buttons */
  --gold-ink: #8A6519;    /* gold that reads as text on paper */
  --accent: #2B3A67;      /* Champions League, selection, career links */
  --silver: #A39C90;
  --steel: #746C60;
  --bronze: #A9683A;
  --teal: #3E7C7A;
  --down: #A4452E;        /* relegated */

  --label-w: 226px;
  --topbar: 68px;
  --clubbar: 46px;
  --axis: 46px;
  --footer: 78px;

  --display: 'Fraunces', Georgia, serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; /* compact names and numbers */
  --ui: 'Libre Franklin', system-ui, sans-serif;           /* Franklin Gothic revival: the sports-page face */

  --shadow-pop: 0 20px 50px rgba(16,24,40,.14);
  --hover: rgba(17,24,39,.05);
}

/* ============================================================== base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; user-select: none;
  background: var(--bg); color: var(--text);
  font: 14px var(--ui); -webkit-font-smoothing: antialiased;
  display: grid; grid-template-rows: var(--topbar) var(--clubbar) 1fr var(--footer);
}
/* each section keeps its row even when one is hidden (phones hide the club bar; it would pull the timeline up
   into the club bar's empty row) */
.topbar { grid-row: 1; }
.clubbar { grid-row: 2; }
.stage { grid-row: 3; }
.footer { grid-row: 4; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ============================================================== header */
.topbar {
  display: flex; align-items: center; gap: 28px; padding: 0 20px 0 22px;
  border-bottom: 1px solid var(--line); position: relative; z-index: 30;
}
.brand h1 { margin: 0; color: var(--strong); font: 600 27px/1 var(--display); letter-spacing: -.01em; }
.brand h1 em { font-style: italic; font-weight: 400; color: var(--gold-ink); }
/* the Feedback link (footer data line; the end of the club bar on phones), and the note it opens */
.feedback-link { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.feedback-link:hover { color: var(--strong); }
.clubbar-feedback { display: none; flex: none; margin-left: 8px; font-size: 12px; }
.about {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 22px 24px 20px; border-radius: 16px;
  border: 1px solid var(--line2); background: var(--panel); color: var(--text); box-shadow: 0 30px 80px rgba(40,30,15,.25);
  font: 14px/1.5 var(--ui);
}
.about::backdrop { background: rgba(23,20,15,.35); }
.about-x { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line2); background: var(--panel); font-size: 19px; color: var(--muted); }
.about h2 { margin: 4px 0 10px; font: 600 23px/1.15 var(--display); color: var(--strong); }
.about h3 { margin: 16px 0 6px; font: 600 10.5px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.about p { margin: 0; }
.about ul { margin: 0; padding-left: 18px; }
.about li { margin: 2px 0; }
.about-form textarea {
  width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line2); background: var(--bg2);
  font: 14px var(--ui); color: var(--text); resize: vertical;
}
.about-form textarea:disabled { cursor: not-allowed; }
.about-form-ft { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--faint); }
.about-form button { height: 32px; padding: 0 16px; border-radius: 99px; background: var(--strong); color: var(--bg); font: 600 13px var(--cond); letter-spacing: .04em; }
.about-form button:disabled { opacity: .35; cursor: not-allowed; }
.brand p { margin: 5px 0 0; color: var(--muted); font-size: 12px; letter-spacing: .01em; }

/* search */
.search { position: relative; flex: 0 1 340px; margin-left: auto; }
.search > svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--faint); }
.search input {
  width: 100%; height: 38px; padding: 0 40px 0 36px;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 10px;
  color: var(--text); font: 500 14px var(--ui); transition: border-color .15s, background .15s;
}
.search-toggle, .menu-toggle { display: none; }      /* phones only (see the phone layout at the end) */
.search input::placeholder { color: var(--faint); }
.search input:focus { outline: none; border-color: var(--gold); background: var(--panel2); }
.search input::-webkit-search-cancel-button { display: none; }
.search kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font: 600 11px var(--ui); color: var(--faint); border: 1px solid var(--line2); border-radius: 5px; padding: 1px 6px;
}
.results {
  position: absolute; top: 44px; left: 0; right: 0; margin: 0; padding: 6px; list-style: none; z-index: 50;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 12px; box-shadow: var(--shadow-pop);
  display: none;
}
.results.open { display: block; }
.results li button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; text-align: left; }
.results li button.active, .results li button:hover { background: rgba(17,24,39,.06); }
.results li button > span:nth-child(2) { display: flex; flex-direction: column; min-width: 0; }
.results .r-name { font: 600 16px var(--cond); letter-spacing: .01em; }
.results .r-kind { color: var(--faint); font-size: 11px; }
.results .r-meta { margin-left: auto; color: var(--muted); font-size: 11.5px; display: flex; gap: 4px; align-items: center; }
.results .r-meta i { width: 8px; height: 8px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 1.5px var(--c2); display: inline-block; margin-left: 4px; }
.results .empty { padding: 10px; color: var(--muted); }
/* a club result: its monogram badge, as in the club column */
.results .r-mono {
  flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  font: 700 10.5px var(--cond); letter-spacing: .04em; background: var(--c1); color: var(--ink, #fff); box-shadow: inset 0 0 0 2px var(--c2);
}
.results li button:has(.r-mono) .r-meta { font: 600 11px var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }

/* zoom level tabs + buttons */
/* season selector: the focus season, large, with steps either side and a picker underneath */
.seasonctl { position: relative; display: flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel); }
.sc-step { width: 28px; height: 38px; border-radius: 8px; font: 400 22px/1 var(--display); color: var(--muted); transition: background .15s, color .15s; }
.sc-step:hover:not(:disabled) { background: var(--panel2); color: var(--strong); }
.sc-step:disabled { opacity: .3; cursor: default; }
.sc-label { display: flex; flex-direction: column; align-items: center; min-width: 96px; padding: 1px 8px 2px; border-radius: 8px; transition: background .15s; }
.sc-label:hover { background: var(--panel2); }
.sc-label small { font: 600 8.5px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.sc-label b { font: 600 21px/1.05 var(--display); color: var(--strong); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.sc-picker {
  position: absolute; top: 50px; right: 0; z-index: 60; width: 470px; padding: 14px 16px 12px; border-radius: 14px;
  background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 24px 60px rgba(40,30,15,.18);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity .2s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.sc-picker.open { opacity: 1; transform: none; pointer-events: auto; }
.sc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font: 600 10px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.sc-row { display: grid; grid-template-columns: 92px 1fr; gap: 10px; align-items: start; padding: 7px 0; border-top: 1px solid var(--line); }
.sc-decade { text-align: left; font: italic 400 15px var(--display); color: var(--gold-ink); padding: 3px 0; }
.sc-decade:hover { text-decoration: underline; text-underline-offset: 3px; }
.sc-decade.all { font: 600 11px var(--ui); letter-spacing: .04em; text-transform: none; color: var(--accent); }
.sc-seasons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.sc-season {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 7px; border-radius: 6px;
  font: 500 13.5px var(--cond); letter-spacing: .02em; color: var(--text); transition: background .12s;
}
.sc-season:hover { background: var(--panel2); }
.sc-season.on { background: var(--strong); color: var(--bg); }
.sc-season i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.sc-foot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 11px; color: var(--faint); }
.sc-foot kbd { font: 600 10px var(--ui); border: 1px solid var(--line2); border-radius: 4px; padding: 0 4px; color: var(--muted); }

.zoomctl { display: flex; align-items: center; gap: 10px; }
.stages { position: relative; display: flex; padding: 3px; background: var(--panel); border: 1px solid var(--line2); border-radius: 10px; }
.stages button {
  position: relative; z-index: 1; padding: 0 14px; height: 30px; color: var(--muted); transition: color .2s;
  font: 600 13px var(--cond); letter-spacing: .08em; text-transform: uppercase;
}
.stages button.on { color: var(--bg); }
.stage-ink {
  position: absolute; top: 3px; height: 30px; border-radius: 7px; background: var(--gold); box-shadow: 0 2px 8px rgba(212,160,23,.3);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1);
}
.zoombtns { display: flex; gap: 4px; }
.zoombtns button {
  width: 34px; height: 36px; border-radius: 9px; background: var(--panel); border: 1px solid var(--line2);
  font: 500 19px var(--ui); color: var(--muted); transition: color .15s, border-color .15s;
}
.zoombtns button:hover { color: var(--text); border-color: var(--faint); }

/* ============================================================== club bar */
.clubbar {
  display: flex; align-items: center; gap: 6px; padding: 0 20px 0 22px;
  border-bottom: 1px solid var(--line); position: relative; z-index: 25;
}
.clubbar .lead { color: var(--faint); font: 600 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; margin-right: 6px; white-space: nowrap; }
.clubbar .tip-text { margin-left: auto; color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.preset {
  height: 28px; padding: 0 12px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--line2); background: var(--panel); color: var(--muted);
  font: 600 13.5px var(--cond); letter-spacing: .04em; transition: color .15s, border-color .15s, background .15s;
}
.preset:hover { color: var(--text); border-color: var(--faint); }
.preset.on { background: var(--gold); border-color: var(--gold); color: var(--bg); }
.preset.pick span { font-size: 10px; margin-left: 3px; }

.picker {
  position: absolute; top: 42px; left: 16px; width: min(860px, calc(100vw - 32px));
  display: none; flex-wrap: wrap; gap: 6px; padding: 14px;
  background: var(--panel2); border: 1px solid var(--line2); border-radius: 14px; box-shadow: 0 24px 60px rgba(16,24,40,.15);
}
.picker.open { display: flex; }
.picker-ft { flex-basis: 100%; display: flex; gap: 8px; align-items: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11.5px; }
.picker-ft span { margin-left: auto; }
.picker-done { background: var(--strong); color: var(--bg); border-color: var(--strong); }
.chip {
  display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 8px; white-space: nowrap;
  border-radius: 99px; border: 1px solid var(--line2); background: var(--panel); color: var(--muted);
  font: 600 14px var(--cond); letter-spacing: .03em; transition: opacity .2s, border-color .2s, color .2s;
}
/* lane order switch */
.order { display: inline-flex; gap: 2px; padding: 2px; margin-left: 10px; border: 1px solid var(--line2); border-radius: 99px; background: var(--panel); }
.order .preset { height: 24px; border: 0; padding: 0 10px; }
.order .preset.on { background: var(--strong); color: var(--bg); }
/* the Arrange list, opened from Custom */
.arrange {
  position: absolute; right: 16px; top: calc(100% + 6px); z-index: 30; width: 270px; display: none;
  background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 18px 48px rgba(40,30,15,.18);
}
.arrange.open { display: block; }
.ar-head { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 8px; border-bottom: 1px solid var(--line); }
.ar-head b { font: 600 16px var(--display); color: var(--strong); }
.ar-head span { font-size: 11.5px; color: var(--muted); }
.ar-grip { font-style: normal; letter-spacing: -2px; color: var(--strong); }
.ar-list { max-height: min(56vh, 460px); overflow-y: auto; padding: 4px 6px; }
.ar-row { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px; border-radius: 7px; user-select: none; }
.ar-row:hover { background: var(--hover); }
.ar-row.lifted { background: var(--panel2); box-shadow: 0 4px 14px rgba(40,30,15,.16); position: relative; z-index: 1; }
.ar-handle { cursor: grab; padding: 0 4px; letter-spacing: -2px; color: var(--faint); touch-action: none; }
.ar-row:hover .ar-handle, .ar-row.lifted .ar-handle { color: var(--strong); }
.ar-row.lifted .ar-handle { cursor: grabbing; }
.ar-row .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 1.5px var(--c2); flex: none; }
.ar-row .nm { flex: 1; font: 600 14px var(--cond); letter-spacing: .02em; color: var(--nm); }
.ar-row button { width: 22px; height: 22px; border-radius: 6px; font-size: 9px; color: var(--faint); }
.ar-row button:hover { background: var(--panel2); color: var(--strong); }
.ar-foot { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.ar-foot button { height: 24px; padding: 0 9px; border-radius: 99px; border: 1px solid var(--line2); font: 600 12.5px var(--cond); color: var(--muted); }
.ar-foot button:hover { color: var(--strong); border-color: var(--faint); }
.ar-foot .ar-done { margin-left: auto; background: var(--strong); border-color: var(--strong); color: var(--bg); }

.chip i { width: 12px; height: 12px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 2px var(--c2); }
.chip small { color: var(--faint); font-size: 11px; margin-left: 2px; }
.chip.on { color: var(--text); border-color: var(--faint); }
.chip:not(.on) { opacity: .45; }
.chip:not(.on) i { background: transparent; box-shadow: 0 0 0 1.5px var(--faint); }

/* person focus: slides over the club bar while a player or manager is selected */
.focusbar {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 0 20px 0 22px;
  background: linear-gradient(90deg, var(--bg) 60%, var(--bg2)); border-bottom: 1px solid var(--line);
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.focusbar.show { opacity: 1; transform: none; pointer-events: auto; }
.focusbar .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent); }
.fb-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.fb-text b { font: 600 18px var(--display); color: var(--strong); letter-spacing: -.01em; }
.fb-text span { font-size: 11.5px; color: var(--muted); }
.fb-clubs { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; margin-left: 10px; }
.fb-club {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 7px; border-radius: 99px; white-space: nowrap;
  border: 1px solid var(--line2); font: 600 14px var(--cond); letter-spacing: .03em; color: var(--lnk);
  background: color-mix(in srgb, var(--ln) 8%, var(--bg));
}
.fb-club i { width: 10px; height: 10px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 2px var(--c2); }
.fb-arrow { color: var(--faint); font-size: 12px; }
.fb-close {
  margin-left: auto; flex: none; height: 30px; padding: 0 14px; border-radius: 99px;
  background: var(--strong); color: var(--bg); font: 600 13.5px var(--cond); letter-spacing: .05em;
  transition: transform .15s;
}
.fb-close:hover { transform: translateY(-1px); }
.fb-close span { margin-left: 6px; font-size: 16px; line-height: 0; }
/* following a club: added clubs (×), suggested rivals (+, dashed) and a picker for any other */
.clubfocus .fb-club { cursor: pointer; }
.clubfocus .fb-club .x { margin-left: 2px; color: var(--faint); font-size: 15px; }
.clubfocus .fb-club:hover .x { color: var(--strong); }
.fb-club.suggest { border-style: dashed; background: transparent; color: var(--muted); }
.fb-club.suggest:hover { color: var(--lnk); border-style: solid; background: color-mix(in srgb, var(--ln) 8%, var(--bg)); }
.fb-opt {
  height: 26px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--strong); background: transparent;
  font: 600 13px var(--cond); letter-spacing: .03em; color: var(--strong); cursor: pointer;
}
.fb-opt:hover { background: var(--strong); color: var(--bg); }
.clubfocus .fb-close { background: transparent; color: var(--strong); border: 1px solid var(--line2); }
.clubfocus .fb-close:hover { border-color: var(--strong); }
.fb-label { margin-left: 8px; font: 600 9.5px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.fb-pick {
  height: 26px; margin-left: 6px; padding: 0 8px; border-radius: 99px; border: 1px solid var(--line2); background: var(--panel);
  font: 600 13px var(--cond); letter-spacing: .03em; color: var(--muted); cursor: pointer;
}

/* ============================================================== stage */
.stage { position: relative; overflow: hidden; }

/* time axis */
.axis {
  position: absolute; left: var(--label-w); right: 0; top: 0; height: var(--axis); z-index: 6; overflow: hidden;
  border-bottom: 1px solid var(--line); background: var(--bg);
}
.axis-dec, .axis-ticks { position: absolute; left: 0; right: 0; }
.axis-dec { top: 0; height: 20px; }
.axis-ticks { bottom: 0; height: 26px; }
.dec { position: absolute; top: 5px; font: 400 italic 13px var(--display); color: var(--gold-ink); opacity: .85; white-space: nowrap; }
.tick { position: absolute; bottom: 0; width: 1px; height: 6px; background: var(--line2); }
.tick.major { height: 10px; background: var(--faint); }
.tick b {
  position: absolute; bottom: 9px; left: 0; transform: translateX(-50%);
  font: 500 13px var(--cond); color: var(--muted); letter-spacing: .03em; white-space: nowrap;
}
.tick.major b { color: var(--text); font-weight: 600; }
.tick.season { height: 0; background: none; }
.tick.season b { bottom: 6px; color: var(--text); font-weight: 600; font-size: 14px; }
.axis-cursor {
  position: absolute; bottom: 4px; transform: translateX(-50%); display: none; pointer-events: none;
  padding: 2px 8px; border-radius: 6px; background: var(--gold); color: var(--bg);
  font: 700 13px var(--cond); letter-spacing: .04em; white-space: nowrap;
}

/* club labels (left column) */
/* the corner above the club names: what the column shows */
.corner {
  position: absolute; left: 0; top: 0; width: var(--label-w); height: var(--axis); z-index: 7;
  display: flex; align-items: center; justify-content: space-between; padding: 0 12px 0 16px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg);
}
.corner small { display: block; font: 600 9px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.corner b { display: block; font: 600 17px/1.15 var(--display); color: var(--strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.corner.following b { color: var(--accent); }
.corner-x { width: 26px; height: 26px; border-radius: 50%; font-size: 17px; color: var(--muted); border: 1px solid var(--line2); background: var(--panel); }
.corner-x:hover { color: var(--strong); border-color: var(--faint); }

.labels {
  position: absolute; left: 0; top: var(--axis); bottom: 0; width: var(--label-w); z-index: 5; overflow: hidden;
  border-right: 1px solid var(--line); background: var(--bg);
}
.label { position: absolute; left: 0; right: 0; top: 0; cursor: pointer; }
/* keyboard: the club column is one Tab stop; the club (or manager band) it's on gets a clear outline */
.labels:focus { outline: none; }
.labels:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); }
.label.kb { z-index: 3; outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 6px; }
.band.kb { outline: 2.5px solid var(--accent); outline-offset: 1px; z-index: 6; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.label .rail { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--trim); }
.label .rail::after { content: ''; position: absolute; left: 4px; top: 0; bottom: 0; width: 1.5px; background: var(--trim2); }
.label .lab { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 10px; padding: 10px 12px 0 14px; align-items: flex-start; }
/* league-table rank: shown in table order, coloured by zone */
.lrank { display: none; width: 22px; flex: none; text-align: right; margin-top: 4px; font: 600 20px/1 var(--display); color: var(--muted); font-variant-numeric: lining-nums tabular-nums; }
.label.ranked .lrank { display: block; }
.lrank.champ { color: var(--gold-ink); }
.lrank.ucl { color: var(--accent); }
.lrank.down { color: var(--down); }
.label.out-now .lrank { color: var(--faint); }
.label.compact .lrank { font-size: 17px; margin-top: 3px; }
/* hovering a club invites following it; a followed club says so */
/* takes the place of the stats line under the name: on hover, and while the club is followed */
.lfollow {
  display: none; margin-top: 4px; padding: 0 8px; border-radius: 99px; pointer-events: none;
  font: 600 9.5px/17px var(--ui); letter-spacing: .1em; text-transform: uppercase; background: var(--strong); color: var(--bg);
}
.lfollow::before { content: 'Follow  →'; white-space: pre; }
.label:hover .lmeta, .label.sel .lmeta { display: none; }
.label:hover .lfollow, .label.sel .lfollow { display: inline-block; }
.label.compact .lfollow { margin-top: 1px; line-height: 15px; }
.label.sel .lfollow { background: var(--trim); }
.label.sel .lfollow::before { content: 'Following'; }
.label.sel:hover .lfollow::before { content: 'Unfollow'; }
.label:hover .lname { color: var(--trim); }
.mono {
  flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font: 700 12px var(--cond); letter-spacing: .04em; background: var(--c1); color: var(--ink, #fff);
  box-shadow: inset 0 0 0 2px var(--c2), 0 0 0 1px var(--line2), 0 2px 5px rgba(40,30,15,.12);
}
.ltxt { min-width: 0; }
.lname {
  color: var(--nm); font: 600 17px/1.1 var(--display); letter-spacing: -.005em;   /* club names: the editorial serif */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .15s;
}
.lmeta { display: flex; gap: 7px; margin-top: 4px; color: var(--muted); font: 600 12px var(--cond); }
.lmeta span { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.lmeta .glyph { width: 13px; height: 13px; }
.lpos:empty { display: none; }
.lpos { padding: 0 5px; border-radius: 3px; background: var(--panel2); color: var(--strong); box-shadow: inset 0 0 0 1px var(--line); }
.lpos.champ { background: var(--gold); color: #fff; box-shadow: none; }
.lpos.ucl { background: var(--accent); color: #fff; box-shadow: none; }
.lpos.down { background: var(--down); color: #fff; box-shadow: none; }
/* in table order: places moved since the season before, under the rank */
.lrank b { display: block; font: inherit; }
.lmove { display: block; margin-top: 3px; font: 600 10px/1 var(--cond); letter-spacing: .02em; color: var(--faint); white-space: nowrap; }
.lmove.up { color: var(--strong); }
.lmove.down { color: var(--down); }
.lmove.new { color: var(--accent); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; }
.lmove.same { opacity: .6; }
.label.compact .lmove { margin-top: 1px; font-size: 9px; }
.label.compact .lmove.new { font-size: 7.5px; }
/* in table order the line under the name names that season's managers instead of the club's totals */
.lmgr { display: none; margin-top: 4px; color: var(--muted); font: 500 12.5px var(--cond); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lmgr i { color: var(--faint); }
.label.ranked .lmeta { display: none; }
.label.ranked .lmgr:not(:empty) { display: block; }
.label:hover .lmgr, .label.sel .lmgr { display: none !important; }
.label.compact .lmgr { margin-top: 1px; font-size: 11.5px; }

/* the table rail: the focus season's whole table as club codes down the timeline's right edge; in table
   order it takes the place of the scrollbar (the clubs on screen are in full ink, on a faint thumb) */
.tablerail {
  position: absolute; right: 0; top: 0; bottom: 0; width: 54px; z-index: 6; display: none; cursor: pointer;
  background: color-mix(in srgb, var(--bg) 88%, transparent); border-left: 1px solid var(--line);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
}
.tablerail.on { display: block; }
.viewport.rail-on .vscroll { display: none; }
.tr-thumb {
  position: absolute; left: 4px; right: 4px; top: 0; height: 0; border-radius: 5px; opacity: 0;
  background: rgba(40,30,15,.06); transition: opacity .3s;
}
.tr-thumb.show { opacity: 1; }
.tr-mark {
  position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: center;
  font: 600 10.5px var(--cond); letter-spacing: .06em; color: var(--nm); opacity: .32;
  transition: transform .7s cubic-bezier(.45,0,.2,1), opacity .35s ease;
}
.tr-mark { justify-content: flex-start; padding-left: 7px; }
.tr-mark span { width: 24px; }
.tr-mv { display: flex; align-items: center; gap: 1px; font: 600 9px var(--cond); font-style: normal; color: var(--faint); }
.tr-mv b { font: normal 6px var(--ui); }
.tr-mv.up { color: var(--strong); }
.tr-mv.down { color: var(--down); }
.tr-mv.new { color: var(--accent); font-size: 9px; }
.tr-mark.seen { opacity: 1; }
.tr-mark.sel { opacity: 1; font-weight: 700; }
.tr-mark.sel span { box-shadow: 0 1.5px 0 var(--trim); }
.tr-mark.hidden { opacity: .14; }
.tr-mark.out { opacity: 0; pointer-events: none; }
.tablerail:hover .tr-mark:not(.out):not(.hidden) { opacity: .75; }
.tablerail:hover .tr-mark.seen { opacity: 1; }
.tr-rule {
  position: absolute; left: 7px; right: 7px; top: 0; height: 0; border-top: 1px dashed var(--faint); opacity: 0;
  transition: transform .7s cubic-bezier(.45,0,.2,1), opacity .3s;
}
.tr-rule.show { opacity: 1; }
@media (max-width: 900px) { .tablerail { display: none !important; } .viewport.rail-on .vscroll { display: block; } }
.tip small.mv { font: 600 11px var(--cond); margin-left: 4px; }
.tip small.mv.up { color: var(--strong); }
.tip small.mv.down { color: var(--down); }
.tip small.mv.new { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: 9.5px; }
.corner > div { min-width: 0; }

.label.compact .lab { padding-top: 7px; gap: 9px; }
.label.compact .mono { width: 28px; height: 28px; font-size: 10.5px; }
.label.compact .lname { font-size: 15px; }
.label.compact .lmeta { margin-top: 1px; font-size: 11px; }

/* the timeline viewport */
.viewport { position: absolute; left: var(--label-w); right: 0; top: var(--axis); bottom: 0; overflow: hidden; cursor: grab; touch-action: none; }
.viewport.dragging { cursor: grabbing; }
.grid, .lanes { position: absolute; inset: 0; }
.gl { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(40,30,15,.035); }
.gl.major { background: rgba(40,30,15,.08); }
/* the focus season: its table orders the lanes and its positions sit beside the club names */
.season-mark {
  position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none;
  background: rgba(184,138,43,.06);
  border-left: 1px solid rgba(184,138,43,.22); border-right: 1px solid rgba(184,138,43,.22);
  transition: width .2s;
}
.axis-season {
  position: absolute; top: 2px; left: 0; z-index: 2; padding: 1px 8px; border-radius: 99px; white-space: nowrap; cursor: help;
  background: var(--accent); color: #fff; font: 700 12px/16px var(--cond); letter-spacing: .05em;
  box-shadow: 0 0 0 3px var(--bg2);
}
/* beyond either end of the timeline: the lanes fade out, with a quiet note */
.edge {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0; z-index: 6; pointer-events: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.edge-start { background: linear-gradient(90deg, var(--bg) 55%, rgba(255,255,255,.75) 85%, rgba(255,255,255,0)); }
.edge-end { background: linear-gradient(270deg, var(--bg) 55%, rgba(255,255,255,.75) 85%, rgba(255,255,255,0)); }
.edge span {
  display: flex; flex-direction: column; align-items: center; gap: 2px; white-space: nowrap; text-align: center;
  font: 500 12px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--faint);
  opacity: 0; transform: translateY(6px);      /* faded by the room it has as you pan (renderEdges) */
}
.edge span b { font: italic 400 30px var(--display); letter-spacing: -.01em; text-transform: none; color: var(--gold-ink); }
.cursor { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(46,58,140,.35); pointer-events: none; display: none; z-index: 3; }

/* dashed curves joining a selected person's spells */
.links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 4; }
.links path { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-dasharray: 4 5; opacity: .75; animation: march 1.2s linear infinite; }
.links circle { fill: var(--accent); }
@keyframes march { to { stroke-dashoffset: -18; } }

.vscroll { position: absolute; right: 3px; top: 6px; bottom: 6px; width: 6px; z-index: 6; opacity: 0; transition: opacity .3s; }
.vscroll.show { opacity: 1; }
.vthumb { position: absolute; left: 0; right: 0; border-radius: 6px; background: rgba(17,24,39,.18); cursor: pointer; }
.vthumb:hover { background: rgba(17,24,39,.32); }

.hint {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 8; pointer-events: none;
  display: flex; gap: 18px; padding: 10px 18px; border-radius: 99px;
  background: rgba(255,255,255,.92); border: 1px solid var(--line2); backdrop-filter: blur(8px);
  color: var(--muted); font-size: 12.5px; white-space: nowrap; transition: opacity .6s, transform .6s;
}
.hint b { color: var(--text); font-weight: 600; }
.hint.hide { opacity: 0; transform: translate(-50%, 10px); }

/* ============================================================== lanes */
.lane { position: absolute; left: 0; right: 0; top: 0; contain: layout style; --lane-bg: var(--bg); }
/* ::before carries the zone shading (it spans the gaps, so a zone reads as one continuous band);
   ::after is the hairline between clubs */
.lane::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; bottom: -5px; pointer-events: none; }
.lane::after { content: ''; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--line); pointer-events: none; }

/* league-table zones for the focus season, across the full width (lanes and name column) */
.zone-champ { --zt: rgba(184,138,43,.11); --zc: var(--gold); }
.zone-ucl   { --zt: rgba(43,58,103,.055); --zc: var(--accent); }
.zone-mid   { --zt: transparent; --zc: var(--line2); }
.zone-down  { --zt: rgba(164,69,46,.07); --zc: var(--down); }
.zone-out   { --zt: rgba(40,30,15,.03); --zc: var(--faint); }
.lane[class*="zone-"]::before { background: var(--zt); }
.lane.zone-start::before { border-top: 1px dashed var(--zc); }
.label[class*="zone-"] { background: var(--zt); box-shadow: 0 -5px 0 var(--zt), 0 5px 0 var(--zt); }
.label.zone-start::after {
  content: ''; position: absolute; left: 6px; right: 0; top: -5px; border-top: 1px dashed var(--zc); pointer-events: none;
}
.label.zone-start::before {
  content: attr(data-zone); position: absolute; left: 14px; top: -11px; z-index: 1; padding: 0 5px; pointer-events: none;
  background: var(--bg); font: 600 8.5px/12px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--zc);
}
.label.zone-start:not([data-zone=""])::before { white-space: nowrap; }
.lanes.reshuffling .lane.zone-start::before { border-top-color: transparent; }
.labels.reshuffling .label.zone-start::before, .labels.reshuffling .label.zone-start::after { opacity: 0; }
.label.zone-start::before, .label.zone-start::after, .lane::before { transition: opacity .3s, border-color .3s, background .4s; }
/* clubs outside the league that season recede */
.lane.out-now, .label.out-now { opacity: .45; }
.lane > * { position: absolute; left: 0; top: 0; }
/* a club moving past others (the Eras flow, or gliding to a new place) rides above them at full strength */
.lane.passing, .lane.moving { z-index: 2; }
.label.passing, .label.moving { z-index: 2; background: var(--bg); box-shadow: 0 4px 14px rgba(40,30,15,.12); }
.lane.sel::before { top: 0; bottom: 0; border-radius: 8px; background: var(--panel) !important; border-top: 0 !important; }
/* the selected club always rides in front as a card; while the table moves, the others recede */
.lane.sel { z-index: 4; --lane-bg: var(--panel); }
.lane.sel::before { box-shadow: 0 12px 32px rgba(40,30,15,.14), 0 0 0 1px var(--trim), 0 0 0 4px color-mix(in srgb, var(--trim) 10%, transparent); }
.label.sel { z-index: 3; }
.lane, .label { transition: opacity .35s ease, box-shadow .3s ease; }
.lanes.club-flow .lane:not(.sel), .labels.club-flow .label:not(.sel) { opacity: .45; }
.lanes.club-flow .lane.moving:not(.sel)::before { box-shadow: none; }
.lane.arrive { animation: arrive .75s cubic-bezier(.2,.8,.2,1) both; }
/* Eras: a club outside the league in the focus season collapses to a thin strip; its row's contents fade away
   and its label keeps just the name */
.lane > * { transition: opacity .25s; }
.lane.collapsed > *:not(.out) { opacity: 0; pointer-events: none; }
.lane.collapsed { overflow: hidden; }     /* a tall Seasons/Squads row shrinking doesn't spill over the next */
.label.collapsed .mono, .label.collapsed .lrank, .label.collapsed .lmeta, .label.collapsed .lmgr, .label.collapsed .lfollow { display: none; }
.label.collapsed .lab { padding-top: 2px; }
.label.collapsed .lname { font-size: 12.5px; line-height: 16px; color: var(--muted); }
/* a club just hidden: its lane and name fade where they are while the others glide into place (LEAVE_MS in dom.js) */
.lane.leaving, .label.leaving { animation: leave .38s ease-in forwards; pointer-events: none; z-index: 0; }
@keyframes leave { to { opacity: 0; translate: 0 -10px; } }
@keyframes arrive { from { opacity: 0; translate: 0 18px; } }
.fx { animation: fade-in .35s ease-out both; }
@keyframes fade-in { from { opacity: 0; } }

/* the selected club: an outline in its colour, and a tinted label */
.label.sel { background: var(--panel); }

/* seasons outside the league: hatching, labelled once zoomed in */
.out {
  pointer-events: none;
  background: rgba(40,30,15,.028);
}
.out span {
  display: block; padding: 3px 7px; white-space: nowrap; color: var(--faint); opacity: 0;
  font: 600 9.5px var(--ui); letter-spacing: .12em; text-transform: uppercase;
}
body[data-level="1"] .out span, body[data-level="2"] .out span { opacity: 1; }
.out.narrow span { display: none; }

/* manager bands: the club colour as a heritage tone (blended into warm stone), with the true kit colour
   as a trim along the top and the secondary colour as a fine line beneath it */
.band {
  border-radius: 4px; overflow: hidden; cursor: pointer; transition: opacity .25s, background .2s;
  background: var(--b1); border-top: 3px solid var(--trim); box-shadow: inset 0 1px 0 var(--trim2);
}
.band.alt { background: var(--b2); }
.lane.striped .band { background: repeating-linear-gradient(90deg, var(--b1) 0 10px, var(--s1) 10px 20px); }
.lane.striped .band.alt { background: repeating-linear-gradient(90deg, var(--b2) 0 10px, var(--s1) 10px 20px); }
.band:hover { background: var(--b0); }
.band .lbl { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; gap: 8px; padding: 0 9px; white-space: nowrap; pointer-events: none; }
.band .nm { font: 600 15px var(--cond); letter-spacing: .02em; color: var(--nm); }
.band .dt { font: 500 12px var(--cond); letter-spacing: .03em; color: var(--nm); opacity: .65; }
.band.tall .lbl { flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; }
.band.tall .nm { font-size: 17px; }
.band.tiny .lbl { display: none; }
.band.caretaker { opacity: .75; }
.band.caretaker .dt { font-style: italic; }
.band.hl { opacity: 1 !important; box-shadow: 0 0 0 2px var(--accent), 0 6px 18px rgba(46,58,140,.25); z-index: 2; }

/* trophies: pips (Eras) and icons (Seasons) */
.pip { height: 5px; border-radius: 1.5px; cursor: pointer; background: currentColor; }
/* position comes from transform (set every frame, so never transitioned); the hover zoom uses scale */
.trophy { width: 20px; height: 20px; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(16,24,40,.17)); transition: scale .15s; }
.trophy:hover { scale: 1.25; z-index: 3; }

/* final league positions: a number (Eras), a pill (Seasons, cards) */
/* final positions: a quiet number, except the places that mattered: champions (gold), a Champions League
   place (navy) and relegation (brick), which become small solid tags */
.finish { font: 500 10.5px/12px var(--cond); color: var(--faint); pointer-events: auto; }
.finish.champ { color: var(--gold-ink); font-weight: 700; }
.finish.ucl { color: var(--accent); font-weight: 600; }
.finish.down { color: var(--down); font-weight: 600; }
/* the strip under each season that mattered (Eras) */
.zone-strip { height: 4px; border-radius: 2px; pointer-events: auto; cursor: help; }
.zone-strip.champ, .zs.champ { background: var(--gold); }
.zone-strip.ucl, .zs.ucl { background: var(--accent); }
.zone-strip.down, .zs.down { background: var(--down); }
.finish.pill { height: auto; min-width: 0; padding: 1px 6px; border-radius: 4px; font: 600 13px/16px var(--cond); background: var(--panel2); color: var(--strong); box-shadow: inset 0 0 0 1px var(--line); }
.finish.pill.champ { background: var(--gold); color: #fff; box-shadow: none; }
.finish.pill.ucl { background: var(--accent); color: #fff; box-shadow: none; }
.finish.pill.down { background: var(--down); color: #fff; box-shadow: none; }
.card-hd .finish { margin-left: auto; flex: none; align-self: center; }

/* player bars (Seasons) */
.bar {
  height: 15px; border-radius: 3px; overflow: hidden; cursor: pointer; transition: opacity .25s, background .15s;
  background: var(--pb); border-left: 3px solid var(--pc);
}
.bar span { display: block; padding-left: 5px; white-space: nowrap; font: 500 13px/15px var(--cond); letter-spacing: .02em; color: var(--text); }
.bar:hover { background: color-mix(in srgb, var(--pc) 24%, transparent); }
/* loans: a dashed outline, lighter fill */
.bar.loan {
  background: color-mix(in srgb, var(--pc) 5%, transparent);
  border: 1px dashed color-mix(in srgb, var(--pc) 75%, transparent); border-left: 3px dashed var(--pc);
}
.bar.loan span { line-height: 13px; font-style: italic; color: var(--muted); }
/* a selected player's loans: hatched in the deep club shade, so they read as temporary at a glance */
.bar.loan.hl, .bar.ghost.loan {
  background: repeating-linear-gradient(135deg, var(--ph) 0 3px, color-mix(in srgb, var(--ph) 38%, var(--bg)) 3px 6px);
  border: 1px dashed var(--ph); border-left: 3px solid var(--ph);
}
.bar.ghost.loan { border: 0; }
.bar.loan.hl span { color: var(--strong); font-weight: 700; font-style: italic; text-shadow: 0 0 3px var(--bg), 0 0 3px var(--bg); }
.bar.hl { background: var(--ph); border-left-color: var(--ph); box-shadow: 0 2px 10px color-mix(in srgb, var(--ph) 40%, transparent); z-index: 2; }
.bar.hl span { color: #fff; font-weight: 700; }
.bar.ghost { height: 6px; border-left: 0; border-radius: 3px; }
.sep { height: 1px; background: rgba(40,30,15,.12); }
/* position group headings: like the section heads of a printed squad list */
.gtag {
  height: 18px; padding: 5px 0 0 10px; pointer-events: none; white-space: nowrap;
  font: 700 10px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
/* pinned headings sit under the lane header (z 4–5) but over the player bars, so one pushed up by the next
   group slides away beneath the manager bands rather than over them */
.gtag.pinned { z-index: 3; height: 20px; padding-top: 4px; background: linear-gradient(var(--zt, transparent), var(--zt, transparent)), var(--lane-bg); box-shadow: 0 1px 0 var(--line), 0 4px 8px -6px rgba(40,30,15,.25); }
/* Seasons: the lane header pinned to the top while you scroll down through a squad */
.lane-head { height: 0; pointer-events: none; }
.lane-head.stuck { z-index: 4; height: 70px; background: linear-gradient(var(--zt, transparent), var(--zt, transparent)), var(--lane-bg); box-shadow: 0 1px 0 var(--line); }
.band.stuck, .trophy.stuck, .finish.stuck { z-index: 5; }
.gtag small { margin-left: 5px; font-weight: 600; letter-spacing: .04em; color: var(--faint); }
/* in the focus season the names line up down the column: set them in full ink */
.bar.now:not(.hl) span { color: var(--strong); }   /* a selected player keeps the white name on its dark bar */
.lanes.has-sel .bar:not(.hl) { opacity: .32; }
.lanes.has-sel .band:not(.hl) { opacity: .55; }

/* squad cards (Squads): a name list, or photo tiles when wide */
.card {
  border-radius: 10px; overflow: hidden; padding: 8px 10px; transition: box-shadow .2s;
  background: linear-gradient(180deg, var(--b2) 0 34px, var(--panel) 34px);
  border: 1px solid var(--line2); border-top: 3px solid var(--trim); box-shadow: 0 10px 30px rgba(40,30,15,.08);
}
.card.sel { box-shadow: 0 0 0 2px var(--accent), 0 10px 30px rgba(16,24,40,.09); }
.card-hd { display: flex; align-items: baseline; gap: 10px; height: 24px; cursor: pointer; }
.card-hd .season { color: var(--strong); font: 600 17px var(--display); letter-spacing: -.01em; white-space: nowrap; }
.card-hd:hover .season { color: var(--ln); }
.card-hd .mgr { font: 500 13.5px var(--cond); color: var(--muted); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .tr { display: flex; align-items: center; gap: 7px; height: 18px; font: 600 13.5px var(--cond); color: var(--strong); white-space: nowrap; letter-spacing: .02em; }
.card .tr .glyph { width: 14px; height: 14px; flex: none; }
.squad { margin-top: 6px; }
.grp { margin-bottom: 4px; }
.gh { height: 16px; font: 700 9.5px/16px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.gh small { color: var(--faint); font-weight: 600; margin-left: 4px; }
.gbody { display: grid; grid-template-columns: repeat(var(--cols, 1), minmax(0, 1fr)); column-gap: 10px; }
.pl {
  height: 15px; padding-left: 7px; border-left: 2px solid var(--pc); border-radius: 0 3px 3px 0; cursor: pointer;
  font: 500 14px/15px var(--cond); letter-spacing: .02em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pl:hover { color: var(--strong); background: var(--hover); }
.pl.hl { background: var(--ph); border-left-color: var(--ph); color: #fff; font-weight: 700; }
.pl.none { color: var(--faint); border-left-color: var(--line2); cursor: default; }
.pl.loan { border-left-style: dashed; font-style: italic; color: var(--muted); }
.pl.loan::after { content: ' · loan'; color: var(--faint); font-size: 11px; font-style: normal; }

.card.m-tiles .gbody { grid-template-columns: repeat(var(--cols), 86px); gap: 6px 8px; }
.card.m-tiles .gh { height: 18px; line-height: 18px; }
.ptile {
  position: relative; height: 70px; padding-top: 2px; border-radius: 8px; cursor: pointer; transition: background .15s;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ptile:hover { background: var(--hover); }
.ptile .av { box-shadow: 0 0 0 2px var(--pc), 0 4px 10px rgba(16,24,40,.10); }
.ptile span {
  max-width: 100%; padding: 0 2px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 500 13px/16px var(--cond); color: var(--text); letter-spacing: .01em;
}
.ptile i {
  position: absolute; top: 0; right: 8px; z-index: 2; padding: 1px 3px; border-radius: 3px;
  font: normal 700 8px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--bg); background: var(--steel);
}
.ptile.loan .av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--pc); outline: 1.5px dashed var(--pc); outline-offset: 2px; }
.ptile.hl { background: color-mix(in srgb, var(--pc) 30%, transparent); }
.ptile.hl span { color: var(--strong); font-weight: 700; }


/* ============================================================== footer */
.footer { display: grid; grid-template-columns: 380px 1fr; border-top: 1px solid var(--line); background: var(--bg2); }
.legend-wrap { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 0 14px 0 16px; border-right: 1px solid var(--line); min-width: 0; }
.legend {
  /* three columns, four rows: two rows of trophies, then Player · Loan · Not in PL, then the zones */
  display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 1px 14px;
  font: 500 12px var(--cond); color: var(--muted); letter-spacing: .03em;
}
.legend span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.legend .glyph { width: 13px; height: 13px; }
.legend .pd { width: 9px; height: 9px; border-radius: 2px; background: rgba(40,30,15,.18); }
.legend .pd.loan-sw { width: 14px; background: transparent; border: 1px dashed var(--muted); border-left-width: 3px; }
.legend .zs { width: 14px; height: 4px; border-radius: 2px; }
.legend .out-sw { background: rgba(40,30,15,.12); }
.data-note { font-size: 10.5px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* minimap; the brush's huge shadow fades everything outside the visible range */
.mini { position: relative; cursor: pointer; touch-action: none; overflow: hidden; }
.mini canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.brush {
  position: absolute; top: 4px; bottom: 4px; border-radius: 5px; pointer-events: none;
  border: 1.5px solid var(--accent); background: rgba(46,58,140,.06); box-shadow: 0 0 0 9999px rgba(255,255,255,.55);
}

/* ============================================================== detail panel */
.panel {
  position: fixed; z-index: 40; right: 0; top: calc(var(--topbar) + var(--clubbar)); bottom: var(--footer);
  width: 400px; max-width: 100vw; overflow-y: auto; padding: 22px 22px 40px; user-select: text;
  background: rgba(255,254,251,.98); backdrop-filter: blur(14px);
  border-left: 1px solid var(--line2); box-shadow: -30px 0 60px rgba(16,24,40,.11);
  transform: translateX(105%); transition: transform .42s cubic-bezier(.2,.8,.2,1);
  scrollbar-width: thin; scrollbar-color: var(--line2) transparent;
}
.panel.open { transform: none; }
/* docked: the timeline makes room for the panel */
body.panel-open .viewport, body.panel-open .axis { right: 400px; }
body.panel-open .panel { box-shadow: -1px 0 0 var(--line2); }
.p-close {
  position: sticky; top: 0; float: right; z-index: 2; margin: -6px -8px 0 0; width: 32px; height: 32px; border-radius: 8px;
  font-size: 20px; color: var(--muted); background: var(--panel); border: 1px solid var(--line2);
}
.p-close:hover { color: var(--text); }
.p-hero {
  position: relative; width: 112px; height: 112px; border-radius: 22px; overflow: hidden; margin: 0 0 16px;
  background: linear-gradient(145deg, var(--panel2), #E7EBF0); box-shadow: 0 14px 40px rgba(16,24,40,.11), inset 0 0 0 1px rgba(17,24,39,.08);
}
.p-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; z-index: 1; }
.p-hero-ini { position: absolute; inset: 0; display: grid; place-items: center; font: 600 34px var(--display); color: var(--faint); }
.p-credit { font-size: 10.5px; color: var(--faint); margin-top: 2px; }
.p-credit a { color: var(--muted); }
.p-kicker { display: flex; align-items: center; gap: 8px; font: 600 11px var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.panel h2 { margin: 10px 0 4px; color: var(--strong); font: 600 30px/1.08 var(--display); letter-spacing: -.015em; }
.panel h3 {
  margin: 24px 0 10px; display: flex; align-items: center; gap: 10px;
  font: 600 11px var(--ui); letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
.panel h3::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.p-sub { color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.p-note { color: var(--faint); font-size: 12px; font-style: italic; }
.p-actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }

/* trophy count tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-top: 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 10px 9px; }
.tile .glyph { width: 18px; height: 18px; }
.tile .n { font: 600 26px/1 var(--display); margin-top: 7px; }
.tile .l { font: 500 12px var(--cond); color: var(--muted); margin-top: 3px; letter-spacing: .02em; }

/* clickable rows */
.list { display: flex; flex-direction: column; gap: 2px; }
.row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 8px; border-radius: 8px; transition: background .12s; }
button.row:hover { background: var(--hover); }
.row.hot { background: rgba(212,160,23,.12); }
/* club panel, seen from the focus season: who was in charge, and that season's squad */
.row.now { background: color-mix(in srgb, var(--ln) 10%, var(--panel)); box-shadow: inset 2px 0 0 var(--trim); }
.now-tag { flex: none; padding: 0 6px; border-radius: 99px; font: 600 9.5px/16px var(--ui); letter-spacing: .06em; color: var(--muted); background: var(--panel2); box-shadow: inset 0 0 0 1px var(--line); }
.sub-h { margin: 8px 0 6px; font: 600 10.5px var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sub-h small { margin-left: 6px; font-weight: 500; letter-spacing: .02em; text-transform: none; color: var(--faint); }
.chips.now .pchip { box-shadow: inset 0 0 0 1px var(--line2); background: var(--panel); }
.row .glyph { width: 16px; height: 16px; flex: none; }
.row .av { box-shadow: 0 0 0 1.5px var(--ln); }
.row .a { font: 600 15px var(--cond); letter-spacing: .02em; }
.row .b { color: var(--muted); font-size: 12.5px; }
.row .c { margin-left: auto; color: var(--muted); font: 500 13px var(--cond); white-space: nowrap; display: flex; gap: 4px; align-items: center; }
.row .c .glyph { width: 13px; height: 13px; }
.table .row { align-items: flex-start; }
.table .c { flex-wrap: wrap; justify-content: flex-end; max-width: 46%; }
.row .rank { width: 18px; flex: none; text-align: right; font: 600 14px var(--cond); color: var(--muted); padding-top: 1px; }
.row.z-champ .rank { color: var(--gold-ink); }
.row.z-ucl .rank { color: var(--accent); }
.row.z-down .rank, .row.z-down .a { color: var(--down); }
.mini-g { width: 14px; height: 14px; display: inline-block; }
.mbar { height: 6px; border-radius: 3px; background: var(--ln); }

/* person chips */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px;
  background: var(--panel); border: 1px solid var(--line); font: 500 14px var(--cond); letter-spacing: .02em;
  transition: border-color .15s, background .15s;
}
.pchip:hover { border-color: var(--faint); background: var(--panel2); }
.pchip small { color: var(--faint); font-size: 12px; }
.pchip .av b { font-size: 8.5px; }
.pchip[class*="pos-"] .av { box-shadow: 0 0 0 1.5px var(--pc); }
.squadcols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.squadcols .gh { margin-bottom: 4px; }
.squadcols .chips { gap: 5px; }

/* the club's 33-season Premier League strip */
/* the club's seasons: one bar each, taller for a higher finish */

.btn {
  display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px;
  background: var(--gold); color: var(--bg); box-shadow: 0 4px 12px rgba(212,160,23,.3);
  font: 700 13px var(--cond); letter-spacing: .08em; text-transform: uppercase;
}
.btn.ghost { background: var(--panel); color: var(--text); border: 1px solid var(--line2); box-shadow: none; }
.btn:hover { filter: brightness(1.08); }

/* a person's league finishes: a line per club spell, then a comparison by club */
.cc { margin-top: 2px; }
.cc-svg { display: block; overflow: visible; }
.cc-svg .zone { fill: color-mix(in srgb, var(--down) 7%, transparent); }
.cc-svg .ref { stroke: var(--line); stroke-dasharray: 2 3; }
.cc-svg .ref.top { stroke: color-mix(in srgb, var(--gold) 45%, transparent); }
.cc-svg text { font: 500 9px var(--ui); fill: var(--faint); }
.cc-svg .yl { text-anchor: end; }
.cc-svg .yl.down { fill: color-mix(in srgb, var(--down) 70%, transparent); }
.cc-svg .xl { text-anchor: middle; }
.cc-svg path { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.cc-svg circle { fill: var(--panel); stroke-width: 2; }
.cc-svg circle.title { fill: var(--gold); stroke: #fff !important; stroke-width: 1.2; }
.club-chart path { stroke: var(--ln); }
.club-chart circle.lone { stroke: var(--ln); }
/* the spell of the manager(s) in charge in the focus season, behind the line */
.club-chart .tenure rect { fill: color-mix(in srgb, var(--ln) 11%, transparent); stroke: none; }
.club-chart .tenure text { font: 600 8.5px var(--cond); letter-spacing: .03em; fill: color-mix(in srgb, var(--nm) 75%, transparent); text-anchor: start; }
.club-chart .now-line { stroke: color-mix(in srgb, var(--gold) 45%, transparent); stroke-width: 1; transition: transform .7s cubic-bezier(.45,0,.2,1); }
.club-chart .now { transition: transform .7s cubic-bezier(.45,0,.2,1), opacity .3s; }
.club-chart .now circle { fill: var(--panel); stroke: var(--strong); stroke-width: 2.2; }
.club-chart .now.off { opacity: .3; }
.club-chart .hit { fill: transparent; cursor: pointer; }
.club-chart .hit:hover { fill: rgba(40,30,15,.04); }
.cc-note { margin-top: 4px; color: var(--faint); font-size: 10.5px; }
.cc-key { display: flex; gap: 14px; margin: 6px 0 10px; font-size: 11px; color: var(--muted); }
.cc-key span { display: inline-flex; align-items: center; gap: 6px; }
.cc-key i { display: inline-block; width: 18px; height: 0; border-top: 2px solid var(--muted); }
.cc-key i.dashed { border-top-style: dashed; }
.cc-key i.gold { width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--gold); }
.cc-table { display: flex; flex-direction: column; gap: 2px; }
.cc-row {
  display: grid; grid-template-columns: 12px 1fr repeat(4, 54px); align-items: center; gap: 6px;
  padding: 6px 6px; border-radius: 8px; background: color-mix(in srgb, var(--ln) 6%, transparent);
}
.cc-row .dot { width: 9px; height: 9px; }
.cc-row .cl { font: 600 15px var(--cond); color: var(--nm); line-height: 1.05; }
.cc-row .cl small { display: block; font: 500 10.5px var(--ui); color: var(--faint); letter-spacing: .02em; }
.cc-row .n { text-align: right; font: 600 15px/1.05 var(--cond); color: var(--strong); }
.cc-row .n small { display: block; font: 500 9.5px var(--ui); color: var(--faint); letter-spacing: .03em; }
.cc-row .n.gold { color: var(--gold-ink); }

/* ============================================================== tooltip */
.tip {
  position: fixed; z-index: 60; pointer-events: none; max-width: 280px; padding: 8px 11px; border-radius: 9px;
  background: rgba(255,255,255,.98); border: 1px solid var(--line2); box-shadow: 0 12px 30px rgba(16,24,40,.13);
  opacity: 0; transition: opacity .12s;
}
.tip.show { opacity: 1; }
.tip b { display: block; font: 600 16px var(--cond); letter-spacing: .02em; }
.tip span { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tip .glyph { width: 14px; height: 14px; }
.tip-row { display: flex; gap: 10px; align-items: center; }
.tip-row .av { box-shadow: 0 0 0 1.5px var(--line2); }

/* ============================================================== shared */
.glyph { display: block; width: 100%; height: 100%; fill: currentColor; }
.t-league { color: var(--gold); }
.t-ucl { color: var(--accent); }
.t-cup { color: var(--silver); }
.t-lcup { color: var(--steel); }
.t-euro { color: var(--bronze); }
.t-world { color: var(--teal); }

/* players are drawn in their club's tone, not by position: the grouping and labels already say the position.
   --pc: the club trim (a neutral outside a club context); --pb: its pale tint; --ph: a deep shade for highlights */
.pos-GK, .pos-DEF, .pos-MID, .pos-FWD {
  --pc: var(--trim, var(--faint)); --pb: color-mix(in srgb, var(--trim, var(--faint)) 13%, transparent);
  --ph: var(--nm, var(--muted));
}

/* round photo with initials behind it */
.av {
  position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden;
  background: linear-gradient(145deg, var(--panel2), #E7EBF0); box-shadow: inset 0 0 0 1px rgba(17,24,39,.08);
}
.av b { font: 700 11px var(--cond); color: var(--muted); letter-spacing: .03em; }
.av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; z-index: 1; }
.dot, .p-kicker .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 0 2px var(--c2); flex: none; }
.row .dot { width: 9px; height: 9px; }

/* ============================================================== responsive + motion */
@media (max-width: 900px) {
  :root { --label-w: 64px; --topbar: 104px; }
  .topbar { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; align-content: center; }
  .brand p { display: none; }
  .search { order: 3; flex: 1 1 100%; }
  .zoomctl { margin-left: auto; }
  .zoombtns { display: none; }
  .clubbar { padding: 0 16px; }
  .clubbar .tip-text { display: none; }
  .preset[data-preset]:not(.on) { display: none; }
  .label .lab { padding: 10px 0 0 14px; }
  .label .lab > div:last-child { display: none; }
  .footer { grid-template-columns: 1fr; }
  .legend-wrap { display: none; }
  .hint { flex-direction: column; gap: 2px; border-radius: 14px; text-align: center; }
  .panel { width: 100vw; }
  body.panel-open .viewport, body.panel-open .axis { right: 0; }
}
/* ============================================================== phones */
/* a compact header (title, season and a search icon on one row; the zoom tabs, or the open search box, on the
   next), a club bar that scrolls sideways, a narrow club column showing each club's code under its rank, and
   a thin minimap. Also used for a phone held sideways; the landscape block after it then changes the header
   and puts the panel beside the timeline */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) {
  :root { --topbar: 100px; --clubbar: 44px; --axis: 40px; --footer: 34px; --label-w: 58px; }
  /* self-contained: a phone on its side can be wider than the 900px tablet rules (e.g. 924×412), so these
     come along rather than relying on them */
  .brand p, .zoombtns, .clubbar .tip-text, .preset[data-preset]:not(.on), .legend-wrap { display: none; }
  .label .lab > div:last-child { display: none; }     /* the club's name and stats: the code stands in */
  .tablerail { display: none !important; }
  .viewport.rail-on .vscroll { display: block; }
  .footer { grid-template-columns: 1fr; }
  .hint { flex-direction: column; gap: 2px; border-radius: 14px; text-align: center; }
  .topbar {
    display: grid; grid-template-columns: auto 1fr auto auto; grid-template-rows: 44px 40px; align-items: center;
    gap: 4px 8px; padding: 6px 12px;
  }
  .brand { grid-area: 1 / 1; min-width: 0; }
  .brand h1 { font-size: 19px; white-space: nowrap; }
  .clubbar-feedback { display: inline; }
  .sc-label b { white-space: nowrap; }
  .seasonctl { grid-area: 1 / 2; justify-self: center; }
  .sc-step { width: 24px; height: 32px; font-size: 19px; }
  .sc-label { min-width: 70px; padding: 0 4px; }
  .sc-label small { display: none; }
  .sc-label b { font-size: 17px; }
  .sc-picker { position: fixed; top: 56px; left: 8px; right: 8px; width: auto; max-height: calc(100vh - 72px); overflow-y: auto; }
  .sc-row { grid-template-columns: 64px 1fr; }
  .sc-season { padding: 0 4px; font-size: 12.5px; gap: 4px; }
  .search-toggle, .menu-toggle {
    grid-area: 1 / 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--line2); background: var(--panel); color: var(--muted);
  }
  .menu-toggle { grid-area: 1 / 4; }
  .search-toggle svg, .menu-toggle svg { width: 17px; height: 17px; }
  body.menu-open .menu-toggle { background: var(--strong); color: var(--bg); border-color: var(--strong); }
  .topbar.searching .search-toggle { background: var(--strong); color: var(--bg); border-color: var(--strong); }
  .search { grid-area: 2 / 1 / 3 / 5; display: none; margin: 0; }
  .search kbd { display: none; }
  .topbar.searching .search { display: block; }
  .zoomctl { grid-area: 2 / 1 / 3 / 5; margin: 0; }
  .topbar.searching .zoomctl { display: none; }
  .stages { flex: 1; }
  .stages button { flex: 1; }

  /* the club bar's row only shows while it carries the follow or career bar; its buttons live in the ☰ menu */
  :root { --clubbar: 0px; }
  body:has(.focusbar.show) { --clubbar: 44px; }
  .clubbar { display: none; overflow-x: auto; scrollbar-width: none; padding: 0 12px; }
  body:has(.focusbar.show) .clubbar { display: flex; }
  body.menu-open .clubbar {
    display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; position: fixed; z-index: 45;
    top: calc(var(--topbar) + var(--clubbar) + 4px); left: 8px; right: 8px; height: auto; padding: 12px;
    overflow: visible; border: 1px solid var(--line2); border-radius: 12px; background: var(--panel);
    box-shadow: 0 18px 48px rgba(40,30,15,.18);
  }
  body.menu-open .clubbar .lead { display: block; flex-basis: 100%; margin: 0; }
  body.menu-open .clubbar .preset[data-preset] { display: inline-flex; }
  body.menu-open .clubbar .order { margin-left: 0; }
  body.menu-open .clubbar .focusbar { display: none; }
  body.menu-open .clubbar-feedback { flex-basis: 100%; margin: 4px 0 0; }
  .clubbar::-webkit-scrollbar { display: none; }
  .clubbar .lead { display: none; }
  .clubbar .order { flex: none; }
  /* the club bar scrolls sideways, which would clip anything dropping out of it: the club picker and the
     Arrange list sit against the screen instead */
  .picker, .arrange { position: fixed; top: calc(var(--topbar) + var(--clubbar) + 4px); left: 8px; right: 8px; width: auto; max-height: calc(100vh - var(--topbar) - var(--clubbar) - 16px); overflow-y: auto; }
  /* the Arrange list: the heading and Done always show; the list of clubs takes what room is left and scrolls */
  .arrange.open { display: flex; flex-direction: column; overflow: hidden; }
  /* the club picker: its footer (Select all, Clear, Done) stays at the bottom while the clubs scroll */
  .picker .picker-ft { position: sticky; bottom: -14px; margin: 8px -14px -14px; padding: 10px 14px 12px; background: var(--panel2); }
  .picker .picker-ft span { display: none; }
  .picker .picker-done { margin-left: auto; }
  .arrange .ar-list { flex: 1 1 auto; min-height: 0; max-height: none; }
  .focusbar { padding: 0 12px; gap: 8px; }
  .focusbar .fb-clubs { display: none; }
  .fb-text b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; }
  .fb-close { height: 28px; padding: 0 10px; font-size: 12.5px; }

  /* the club column: rank, movement and the club's code stacked, centred */
  .label .lab { flex-direction: column; align-items: center; gap: 3px; padding: 6px 0 0; }
  .lrank { width: auto; margin: 0; text-align: center; font-size: 16px; }
  .label.compact .lrank { font-size: 15px; }
  .lmove { margin-top: 1px; text-align: center; }
  .mono, .label.compact .mono { width: auto; height: auto; padding: 1px 4px; border-radius: 4px; font-size: 9.5px; box-shadow: inset 0 0 0 1.5px var(--c2); }
  .label.collapsed .mono { display: block; background: none; box-shadow: none; color: var(--muted); padding: 0; }
  .label.collapsed .lab { padding-top: 3px; }
  .corner { padding: 0 6px; }
  .corner small { display: none; }
  .corner b { font-size: 10.5px; letter-spacing: -.02em; }
  /* zone captions don't fit the narrow column (the dashed line still marks where each zone starts) */
  .label.zone-start::before { display: none; }

  .tick b { font-size: 11.5px; }
  .tick.season b { font-size: 12px; }
  .hint { font-size: 12px; padding: 8px 12px; max-width: calc(100vw - 24px); }
  .data-note { display: none; }

  /* the panel as a bottom sheet: the lower part of the screen, the timeline still visible above. Its handle
     drags it up to nearly full height, or down to shrink or close it */
  .panel {
    /* half the space below the header and club bar, so the timeline keeps the other half (58% of the whole
       screen left only ~95px of timeline on a short phone) */
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; padding: 26px 18px 40px;
    height: calc((100vh - var(--topbar) - var(--clubbar)) * .5); height: calc((100dvh - var(--topbar) - var(--clubbar)) * .5);
    border-left: 0; border-top: 1px solid var(--line2); border-radius: 18px 18px 0 0;
    box-shadow: 0 -18px 50px rgba(16,24,40,.16); transform: translateY(105%);
    transition: transform .42s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1);
  }
  .panel.open { transform: translateY(var(--sheet-drag, 0)); }
  .panel.expanded { height: calc(100vh - var(--topbar) - 8px); height: calc(100dvh - var(--topbar) - 8px); }
  /* while the sheet is open the zoom tabs step aside, giving the timeline their row */
  body.panel-open:not(.sheet-mini) { --topbar: 56px; }
  body.panel-open:not(.sheet-mini) .topbar { grid-template-rows: 44px; }
  body.panel-open:not(.sheet-mini) .topbar:not(.searching) .zoomctl { display: none; }
  /* Timeline ▾ beside ×: the sheet steps aside to a slim bar, keeping the selection */
  .p-mini {
    position: sticky; top: 0; float: right; z-index: 2; height: 32px; margin: 0 8px 0 0; padding: 0 12px; border-radius: 99px;
    border: 1px solid var(--line2); background: var(--panel); font: 600 13px var(--cond); letter-spacing: .03em; color: var(--muted);
  }
  /* mini: only a slim bar shows (the name, Card ▴, ×); the rest of the sheet sits below the screen */
  .panel.mini { overflow: hidden; transform: translateY(calc(100% - 54px)); }
  .p-peek { display: none; }
  .panel.mini .p-peek {
    display: flex; align-items: center; gap: 8px; position: absolute; top: 14px; left: 14px; right: 14px; height: 32px;
  }
  .p-peek-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 16px var(--display); color: var(--strong); touch-action: none; }
  .p-peek button { height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line2); background: var(--panel); font: 600 13px var(--cond); color: var(--strong); }
  .p-peek .p-peek-x { width: 30px; padding: 0; font-size: 17px; color: var(--muted); }
  .panel.mini > :not(.p-peek):not(.p-grab) { visibility: hidden; }
  .panel.dragging { transition: none; }
  body.panel-open .panel { box-shadow: 0 -18px 50px rgba(16,24,40,.16); }
  .p-grab { position: sticky; top: -26px; height: 26px; margin: -26px -18px 0; touch-action: none; cursor: grab; z-index: 3; }
  .p-grab::before { content: ''; position: absolute; left: 50%; top: 9px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: var(--line2); }
  .p-close { margin-top: 0; }

  /* the follow bar: its options (Only, rivals, compare) in a menu under the ⋯ button */
  .clubfocus .fb-more { display: grid; }
  .clubfocus.menu-open .fb-clubs {
    display: flex; flex-wrap: wrap; gap: 8px; position: fixed; z-index: 30; left: 8px; right: 8px;
    top: calc(var(--topbar) + var(--clubbar) + 4px); padding: 12px; border-radius: 12px; overflow: visible;
    background: var(--panel); border: 1px solid var(--line2); box-shadow: 0 18px 48px rgba(40,30,15,.18);
  }
  .clubfocus.menu-open .fb-label { flex-basis: 100%; margin: 4px 0 0; }
}
.p-grab, .p-mini, .p-peek { display: none; }     /* phones only: the bottom sheet's handle and controls */
@media (max-width: 600px), (max-height: 500px) and (orientation: landscape) { .p-grab { display: block; } .p-mini { display: inline-block; } }
.p-mini::after { content: ' ▾'; }
.p-card::after { content: ' ▴'; }
.fb-more {
  display: none; place-items: center; flex: none; width: 30px; height: 28px; border-radius: 99px;
  border: 1px solid var(--line2); background: var(--panel); color: var(--muted); font-size: 16px; line-height: 1;
}
/* ============================================================== phones held sideways */
/* short and wide: one header row, no minimap footer, and the panel beside the timeline on the right rather
   than below it. "Timeline ▸" shrinks it to a slim strip on the right edge (the name running down it, "Card ◂"
   and ×), keeping the selection; × closes it */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --topbar: 50px; --clubbar: 0px; --axis: 40px; --footer: 0px; --panel-w: min(44vw, 400px); }
  body:has(.focusbar.show) { --clubbar: 38px; }   /* (a shorter axis runs the decades into the years) */
  .footer { display: none; }
  .topbar { grid-template-columns: auto auto 1fr auto auto; grid-template-rows: 1fr; padding: 4px 12px; gap: 0 10px; }
  .brand { grid-area: 1 / 1; }
  .brand h1 { font-size: 17px; }
  .seasonctl { grid-area: 1 / 2; }
  .zoomctl, .search { grid-area: 1 / 3; }
  .search-toggle { grid-area: 1 / 4; }
  .menu-toggle { grid-area: 1 / 5; }
  body.menu-open .clubbar { left: auto; width: min(420px, calc(100vw - 16px)); }
  .stages button { padding: 0 10px; }
  body.panel-open:not(.sheet-mini) { --topbar: 50px; }
  body.panel-open:not(.sheet-mini) .topbar { grid-template-rows: 1fr; }
  body.panel-open:not(.sheet-mini) .topbar:not(.searching) .zoomctl { display: flex; }
  .clubfocus.menu-open .fb-clubs { top: calc(var(--topbar) + var(--clubbar) + 4px); }
  .arrange { left: auto; width: min(380px, calc(100vw - 16px)); }     /* sideways: a sensible width, on the right */

  .panel {
    top: calc(var(--topbar) + var(--clubbar)); bottom: 0; left: auto; right: 0; width: var(--panel-w); height: auto;
    padding: 14px 16px 30px; border-radius: 0; border-top: 0; border-left: 1px solid var(--line2);
    box-shadow: -1px 0 0 var(--line2); transform: translateX(105%);
    transition: transform .42s cubic-bezier(.2,.8,.2,1), width .3s cubic-bezier(.2,.8,.2,1);
  }
  .panel.open, .panel.expanded { transform: none; }
  body.panel-open .panel { box-shadow: -1px 0 0 var(--line2); }
  body.panel-open .viewport, body.panel-open .axis { right: var(--panel-w); }
  body.panel-open.sheet-mini .viewport, body.panel-open.sheet-mini .axis { right: 52px; }
  .p-grab { display: none !important; }
  .p-mini::after { content: ' ▸'; }
  .p-card::after { content: ' ◂'; }
  .panel.mini { width: 52px; transform: none; padding: 0; }
  .panel.mini .p-peek { flex-direction: column; top: 10px; bottom: 10px; left: 0; right: 0; height: auto; gap: 10px; }
  .panel.mini .p-peek-name { flex: 1; writing-mode: vertical-rl; font-size: 14px; }
  .panel.mini .p-peek button { padding: 0 8px; width: 40px; font-size: 12px; }
  .panel.mini .p-card { order: -1; }
}

/* reduce motion: CSS transitions and animations end at once (the code-driven motion snaps too: see
   reducedMotion() in util.js) */
@media (prefers-reduced-motion: reduce) {
  .fx, .links path { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}