/* Movement (movement/index.html). Loaded after sb.css; built from its colors and fonts.
   The career path's own styles are in sb.css (shared with the Player Card).
   Desktop: filters in rows, timeline + sankey on one board, the moves table below.
   Phones (640px and narrower, or a touch screen under 500px tall, i.e. a phone held sideways): dates in one row that swipes sideways, position and move type behind a
   Filters button, team view first, and a bottom sheet with the players when you tap. */
:root {
  --mv-bar: color-mix(in srgb, var(--muted) 34%, var(--surface));
  --mv-wash: color-mix(in srgb, var(--line) 55%, var(--surface));
  --mv-sel: color-mix(in srgb, var(--turf) 13%, var(--surface));
  --mv-tip-bg: var(--ink);
  --mv-tip-fg: var(--chalk);
  --mv-tip-muted: color-mix(in srgb, var(--chalk) 62%, var(--ink));
  --mv-shadow: 0 10px 30px rgba(10, 20, 14, .16);
  --mv-link-op: .36;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --mv-link-op: .5; --mv-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
}
:root[data-theme="dark"] { --mv-link-op: .5; --mv-shadow: 0 10px 30px rgba(0, 0, 0, .5); }

.mv-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 16px 40px; align-items: end; }
.mv-head p { max-width: 62ch; }
@media (max-width: 760px) { .mv-head { grid-template-columns: minmax(0, 1fr); } }

/* look up any player's career */
.mv-lookup { position: relative; display: grid; gap: 6px; min-width: 0; }
.mv-lookup input {
  font: 500 1rem/1 var(--font-body); color: var(--ink); background: var(--surface); width: 100%;
  border: 1px solid var(--line); border-radius: 10px; min-height: 46px; padding: 0 14px;
}
.mv-lookup-list {
  position: absolute; z-index: 45; top: 100%; left: 0; right: 0; margin: 4px 0 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--mv-shadow);
  max-height: min(340px, 60vh); overflow: auto; overscroll-behavior: contain;
}
.mv-lookup-list li { display: grid; gap: 2px; padding: 9px 10px; border-radius: 8px; cursor: pointer; min-height: 44px; }
.mv-lookup-list li strong { font-weight: 600; }
.mv-lookup-list li span { color: var(--muted); font-size: .85rem; }
.mv-lookup-list li[aria-selected="true"] { background: var(--mv-sel); }
.mv-lookup-list .mv-lk-none { color: var(--muted); cursor: default; }
.mv-name {
  font: inherit; font-weight: 600; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--turf) 55%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.mv-name:focus-visible { outline: 3px solid var(--turf); outline-offset: 2px; border-radius: 2px; }
/* these set their own display, which would otherwise beat the hidden attribute */
.mv-sheet[hidden], .mv-dock[hidden], .mv-controls[hidden], .mv-tip[hidden] { display: none; }

/* ---------- controls ---------- */
.mv-controls { display: grid; gap: 10px; padding-bottom: 16px; }
.mv-controls .chips { margin: 0; }
.mv-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.mv-select {
  font: 600 .95rem/1 var(--font-body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; min-height: 38px; padding: 0 12px; max-width: 100%; min-width: 0;
}
.mv-view, .mv-filter-btn { display: none; }
.mv-filter-btn {
  font: 600 .9rem/1 var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 999px; min-height: 44px; padding: 0 16px; cursor: pointer; align-items: center; gap: 8px;
}
.mv-filter-btn span:not(:empty) {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--ink); color: var(--chalk); font-size: .8rem;
}
.mv-filters { display: grid; gap: 8px; }
.mv-frow { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.mv-flabel { font: 600 .78rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* ---------- board ---------- */
.mv-stack { display: grid; gap: 18px; padding-bottom: 56px; }
.mv-board, .mv-ledger {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px 12px; display: grid; gap: 12px; min-width: 0;
}
.mv-strip-head, .mv-flow-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.mv-label { font: 600 .78rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mv-range { font-weight: 600; }
.mv-range .dim { color: var(--muted); font-weight: 500; }
.mv-tl { position: relative; touch-action: pan-y; }
#mv-timeline { display: block; width: 100%; overflow: visible; }
#mv-timeline .selection { fill: var(--turf); fill-opacity: .08; stroke: var(--turf); stroke-width: 1; shape-rendering: crispEdges; }
.mv-divider { height: 1px; background: var(--line); margin: 0 -18px; }
.mv-board h2, .mv-ledger h2 { font-size: 1.7rem; }
.mv-flow-sub { color: var(--muted); font-size: .92rem; }
.mv-main { min-width: 0; position: relative; }
.mv-main svg { display: block; width: 100%; }
.mv-main svg text { font: 500 12px var(--font-body); fill: var(--ink); font-variant-numeric: tabular-nums; }
.mv-main svg .cnt { fill: var(--muted); }
.mv-main svg .colhead { font: 600 11px var(--font-body); letter-spacing: .06em; fill: var(--muted); text-transform: uppercase; }
.mv-main svg .colhead.center { font: 700 20px var(--font-display); letter-spacing: .02em; fill: var(--ink); text-transform: none; }
.mv-main .node, .mv-main .hit { cursor: pointer; }
.mv-main .node:focus { outline: none; }
.mv-main .node:focus-visible rect:first-child { stroke: var(--ink); stroke-width: 2; }
.mv-main .node.on text { font-weight: 700; }
.mv-msg { color: var(--muted); padding: 40px 8px; text-align: center; margin: 0; }

/* phone: team grid + route list */
.mv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; }
.mv-team {
  display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; text-align: left;
  min-height: 56px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface);
  color: var(--ink); font: inherit; cursor: pointer;
}
.mv-team .badge { grid-row: span 2; height: 34px; }
.mv-team strong { font: 700 1.25rem/1 var(--font-display); }
.mv-team small { color: var(--muted); font-size: .78rem; line-height: 1.1; white-space: nowrap; }
@media (hover: hover) { .mv-team:hover { border-color: var(--ink); } }
.mv-hint { margin: 0 0 4px; color: var(--muted); font-size: .92rem; }
.mv-routes { list-style: none; margin: 0; padding: 0; display: grid; }
.mv-route {
  width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  min-height: 52px; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--mv-wash); background: transparent;
  color: var(--ink); font: inherit; text-align: left; cursor: pointer;
}
.mv-route[aria-pressed="true"] { background: var(--mv-sel); }
@media (hover: hover) { .mv-route:hover { background: var(--mv-sel); } .mv-lookup-list li:hover { background: var(--mv-sel); } }
.mv-route .rk-bar { grid-column: 1 / -1; margin: 0; }
.mv-route b { font: 700 1.35rem/1 var(--font-display); }
.mv-routes li:last-child .mv-route { border-bottom: 0; }

/* ---------- team chips + moves ---------- */
.mv-tm { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.mv-tm i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.mv-arrow { color: var(--muted); margin: 0 4px; }
.mv-how {
  display: inline-block; font-size: .8rem; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); white-space: nowrap;
}
.mv-how.T { border-color: var(--turf); color: var(--turf); }

.mv-ledger { scroll-margin-top: 12px; }
.mv-ledger-head { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.mv-selline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.mv-selpill {
  display: inline-flex; align-items: center; gap: 6px; background: var(--mv-sel); border-radius: 999px;
  padding: 4px 4px 4px 12px; font-weight: 600;
}
.mv-selpill button, .mv-x {
  border: 0; background: transparent; cursor: pointer; color: var(--muted); width: 30px; height: 30px;
  border-radius: 50%; font-size: 1.2rem; line-height: 1;
}
@media (hover: hover) { .mv-selpill button:hover, .mv-x:hover { background: var(--mv-wash); color: var(--ink); } }
.mv-link-btn {
  border: 1px solid var(--turf); color: var(--turf); background: transparent; border-radius: 999px;
  min-height: 34px; padding: 0 12px; font: 600 .85rem/1 var(--font-body); cursor: pointer;
}
@media (hover: hover) { .mv-link-btn:hover { background: var(--turf); color: var(--chalk); } }
.mv-search {
  font: 500 .95rem/1 var(--font-body); color: var(--ink); background: var(--chalk); border: 1px solid var(--line);
  border-radius: 8px; min-height: 38px; padding: 0 12px; width: 220px; max-width: 100%;
}
.mv-count { color: var(--muted); font-size: .85rem; }
.mv-table-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.mv-table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 660px; }
.mv-table th {
  text-align: left; font: 600 .75rem/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); white-space: nowrap;
}
.mv-table th button { all: unset; cursor: pointer; }
.mv-table th button:focus-visible { outline: 3px solid var(--turf); outline-offset: 2px; }
.mv-table th[aria-sort] button::after { content: " ↓"; color: var(--ink); }
.mv-table th[aria-sort="ascending"] button::after { content: " ↑"; }
.mv-table td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--mv-wash); vertical-align: top; }
.mv-table tr:last-child td { border-bottom: 0; }
.mv-table td.when { white-space: nowrap; }
.mv-sub { display: block; font-size: .8rem; color: var(--muted); line-height: 1.3; }
.mv-table td.player { font-weight: 600; }
.mv-table td.pos { color: var(--muted); }
.mv-list { list-style: none; margin: 0; padding: 0; display: none; }
.mv-list li { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--mv-wash); }
.mv-list li:last-child { border-bottom: 0; }
.mv-list .top { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.mv-list .top strong { font-weight: 600; }
.mv-list .top .pos { color: var(--muted); font-size: .85rem; }
.mv-list .route { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.mv-list .when { color: var(--muted); font-size: .85rem; }
.mv-none { padding: 24px 0; color: var(--muted); text-align: center; }
.mv-more {
  justify-self: center; margin: 4px 0 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  border-radius: 999px; min-height: 40px; padding: 0 18px; font: 600 .9rem/1 var(--font-body); cursor: pointer;
}
.mv-notes { max-width: 78ch; margin: 0; }

/* ---------- tooltip (desktop hover) ---------- */
.mv-tip {
  position: fixed; z-index: 40; pointer-events: none; background: var(--mv-tip-bg); color: var(--mv-tip-fg);
  border-radius: 10px; padding: 10px 12px; max-width: 300px; font-size: .9rem; line-height: 1.35; box-shadow: var(--mv-shadow);
}
.mv-tip .t-head { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--mv-tip-muted); }
.mv-tip .t-val { font: 700 1.25rem/1.1 var(--font-display); margin: 2px 0 6px; }
.mv-tip .t-row { display: flex; justify-content: space-between; gap: 12px; }
.mv-tip .t-row span:last-child { color: var(--mv-tip-muted); white-space: nowrap; font-size: .82rem; }
.mv-tip .t-foot { margin-top: 6px; color: var(--mv-tip-muted); font-size: .82rem; }

/* ---------- desktop dock: a selection while the table is off screen ---------- */
.mv-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: var(--mv-shadow); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px; font-weight: 600;
}
.mv-dock-btns { display: flex; gap: 8px; flex: none; }
.mv-dock .btn { min-height: 38px; font-size: .9rem; }

/* ---------- phone bottom sheet: the players you tapped ---------- */
.mv-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; background: var(--surface);
  border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: var(--mv-shadow);
  max-height: 62vh; max-height: 62dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 6px max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px));
}
.mv-sheet::before {
  content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line); justify-self: center; margin: 2px 0 4px;
  position: absolute; left: calc(50% - 20px); top: 6px;
}
.mv-sheet-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0 6px; border-bottom: 1px solid var(--line); }
.mv-sheet-head strong { font: 700 1.5rem/1.1 var(--font-display); display: block; }
.mv-sheet-head span { color: var(--muted); font-size: .9rem; }
.mv-sheet .mv-x { width: 44px; height: 44px; font-size: 1.5rem; }
.mv-sheet .mv-list { display: block; overflow-y: auto; overscroll-behavior: contain; }
.mv-sheet-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 0 12px; border-top: 1px solid var(--line); }
.mv-sheet-foot:empty { display: none; }
.mv-sheet-foot .mv-link-btn { min-height: 44px; }

/* ---------- the career path panel and Player Card on this page ---------- */
.cr-nocard { margin: 0; font-size: .86rem; opacity: .85; max-width: 34ch; }
@media (max-width: 899px) {
  /* from the bottom on phones: size to the screen you can see (dvh), not the one behind Safari's
     toolbars (vh), so the top of the panel, with the name and the Player Card button, stays on screen */
  .pc-panel { height: 90vh; height: 90dvh; max-height: calc(100dvh - 8px); }
}

/* ---------- touch ---------- */
.mv-controls button, .mv-main button, .mv-ledger button, .mv-sheet button, .mv-filter-btn, .mv-lookup-list li {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}

/* ---------- phones ---------- */
@media (max-width: 640px), (pointer: coarse) and (max-height: 500px) {   /* phones, upright or sideways */
  .mv-select, .mv-search, .mv-lookup input { font-size: 16px; }   /* 16px or more: iPhones don't zoom in on focus */
  .mv-list .top .mv-name { padding: 4px 0; }
  .mv-controls .chips button, .mv-view button { min-height: 44px; }
  .mv-period { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .mv-period::-webkit-scrollbar { display: none; }
  .mv-period button { flex: none; }
  .mv-view { display: inline-flex; }
  .mv-filter-btn { display: inline-flex; }
  .mv-select { flex: 1 1 100%; min-height: 44px; }
  .mv-filters:not(.open) { display: none; }
  .mv-filters { padding: 10px 0 2px; }
  .mv-frow { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mv-board, .mv-ledger { padding: 14px 12px 10px; border-radius: 12px; }
  .mv-divider { margin: 0 -12px; }
  .mv-table-wrap { display: none; }
  .mv-list { display: block; }
  .mv-search { width: 100%; min-height: 44px; }
  .mv-dock { display: none; }
}
@media (prefers-reduced-motion: reduce) { .mv-route, .mv-team { transition: none; } }