/* ════════════════════════════════════════════════════════════════════
   LINEUP SHEETS — the Lineups directory and a game's Lineup tab

   Drawn as the odds board draws a market: a team is a panel, each block
   (goalies, forward lines, pairings, power play) opens with a tinted
   caption bar, and each unit is one row — its label and shared time in the
   shaded label column, the players across the row beside it. A line is
   read left to right the way it is announced, and a whole team fits in
   about a third of the scroll the stacked-headshot cards took.

   Loaded after boxscore.css, which carries the older compact lineup rules
   (legend, symbols, status chips); this sheet owns the layout.
   ════════════════════════════════════════════════════════════════════ */

/* ── Game tab: overview line over the sheets ───────────────────────── */
.lineup-overview {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
}
.lineup-overview h2 {
  margin: 0 0 4px;
  font: 700 19px/1.2 var(--font-display);
  color: var(--board);
}
.lineup-overview p { margin: 0; font-size: 13px; color: var(--twill); }
.lineup-faceoff { flex-shrink: 0; text-align: right; font-size: 12.5px; color: var(--twill); }
.lineup-faceoff time { display: block; margin-top: 2px; color: var(--board); font: 600 13px var(--font-data); }
.lineup-legend { margin-bottom: 8px; }
.lineup-legend__keys { font-size: 12px; gap: 12px; color: var(--twill); }

/* "How this works" folds: a quiet line, not a box. */
.lineup-info { margin: 0 0 14px; border: 0; border-bottom: 1px solid var(--board-rule); border-radius: 0; background: transparent; }
.lineup-info > summary { padding: 8px 0; color: var(--ink); font-size: 12px; font-weight: 400; cursor: pointer; }
.lineup-info__body { max-width: 72ch; padding: 0 0 12px; border: 0; color: var(--ink); font-size: 12.5px; line-height: 1.55; }
.lineup-info__body p { margin: 8px 0 0; }
/* In a caption bar it sits at the right and opens as a sheet under it. */
.lineup-info--inline { position: relative; margin: 0; border: 0; }
.lineup-info--inline > summary { padding: 0; color: var(--blue-line); font-weight: 600; }
.lineup-info--inline[open] > .lineup-info__body {
  position: absolute;
  right: -12px;
  top: calc(100% + 5px);
  z-index: 5;
  width: min(460px, 86vw);
  padding: 4px 14px 12px;
  border: 1px solid var(--board-rule);
  background: var(--sheet);
  box-shadow: 0 6px 18px rgba(16, 24, 32, .10);
}
/* Inside a team panel: its own padded row at the foot. */
.lineup-info--card { margin: 0; padding: 0 14px; border-bottom: 0; }

.lineup-team-picker { margin-bottom: 18px; }
/* Choosing a team is the page's first move, so the picker's tiles lead with
   the logo — stacked over the abbreviation and large enough to find by eye. */
.lineup-team-picker .board-team-strip { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.lineup-team-picker .board-team-strip a { flex-direction: column; gap: 0; height: 76px; padding: 6px 4px; }
.lineup-team-picker .board-team-strip img { width: 48px; height: 48px; }
@media (max-width: 640px) {
  .lineup-team-picker .board-team-strip { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); }
  .lineup-team-picker .board-team-strip a { height: 64px; font-size: 11.5px; }
  .lineup-team-picker .board-team-strip img { width: 40px; height: 40px; }
}
.lineup-team-jump { display: none; }

/* ── The team panel ─────────────────────────────────────────────────── */
.lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.lineup-comparison > section { min-width: 0; }
.lineup-grid--selected { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) {
  .lineup-grid--selected .lineup-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .lineup-grid--selected .lineup-comparison > section + section { border-left: 1px solid var(--board-rule); }
}
.lineup-team {
  min-width: 0;
  overflow: visible;
  border: 1px solid var(--board-rule);
  border-radius: 0;
  background: var(--sheet);
  scroll-margin-top: 16px;
}
.lineup-team__head {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--board-rule);
  background: var(--sheet);
}
.lineup-team__head img { width: 36px; height: 36px; object-fit: contain; }
.lineup-team__side {
  display: block;
  color: var(--twill);
  font: 600 10.5px/1.3 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lineup-team__title strong { display: block; color: var(--board); font: 700 18px/1.2 var(--font-display); }
.lineup-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--radius-s);
  font-size: 11.5px;
  font-weight: 600;
}

/* Where the projection came from: a slim line under the head. */
.lineup-source {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--board-rule);
  color: var(--twill);
  font-size: 12px;
}
.lineup-source__game { color: var(--ink-strong); font: 600 12px var(--font-data); }
.lineup-source__split { flex-basis: 100%; color: var(--best-ink, #92400E); font-weight: 600; }

/* ── Blocks and their caption bars ──────────────────────────────────── */
.lineup-unit-block { padding: 0; border-bottom: 1px solid var(--board-rule); background: transparent; }
.lineup-unit-block:last-child { border-bottom: 0; }
.lineup-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 28px;
  margin: 0;
  padding: 3px 14px;
  border-bottom: 1px solid var(--board-rule);
  background: var(--board-tint);
}
.lineup-unit-block__heading {
  margin: 0;
  color: var(--ink-strong);
  font: 600 11.5px/1.4 var(--font-display);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.lineup-section-heading > span { color: var(--twill); font: 400 10.5px var(--font-data); text-align: right; }

/* ── A unit is one row: label column, then the players ─────────────── */
.lineup-unit {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border-bottom: 1px solid var(--board-rule-soft);
}
.lineup-unit:last-child { border-bottom: 0; }
.lineup-unit__meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  margin: 0;
  padding: 6px 10px 6px 14px;
  border-right: 1px solid var(--board-rule);
  background: var(--name-col);
}
.lineup-unit__label { color: var(--ink-strong); font: 600 12.5px/1.3 var(--font-data); }
.lineup-shared-time { color: var(--twill); font: 400 10px/1.3 var(--font-data); }

.lineup-unit__players {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.lineup-unit__players--1 { grid-template-columns: minmax(0, 1fr); }
.lineup-unit__players--2,
.lineup-unit__players--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lineup-unit__players li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  min-width: 0;
  min-height: 46px;
  padding: 5px 10px;
  text-align: left;
}
/* A five-man PP unit wraps to a second row; a hairline keeps the rows apart. */
.lineup-unit__players--5 li:nth-child(n+4) { border-top: 1px dotted var(--board-rule); }

.lineup-player-portrait { display: inline-flex; position: relative; flex: 0 0 auto; }
.lineup-player-photo {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  background: var(--board-tint-2);
  object-fit: cover;
  object-position: top;
}
.lineup-player-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.lineup-player-name { display: block; min-width: 0; color: var(--board); font-weight: 600; overflow-wrap: anywhere; }
.lineup-player-text .lineup-jersey,
.lineup-jersey { color: var(--twill); font: 400 10.5px/1.3 var(--font-data); }
.lineup-unit__players a { color: var(--board); text-decoration: none; }
.lineup-unit__players a:hover { color: var(--blue-line); text-decoration: underline; text-underline-offset: 2px; }
.lineup-unit__players .lineup-unit__unknown { grid-column: 1 / -1; color: var(--twill); font-size: 12px; font-style: italic; }

/* Goalies: the evidence line tucks under the name, beside the photo. */
.lineup-source-goalies li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 9px; align-items: center; }
.lineup-source-goalies .lineup-player-portrait { grid-row: span 2; }
.lineup-goalie-evidence { grid-column: 2; color: var(--twill); font-size: 11px; line-height: 1.35; }
.lineup-goalie-evidence span { margin-left: 6px; font-family: var(--font-data); font-size: 10.5px; }

/* The Out list: players side by side, each with its reason. */
.lineup-unit__players--out { display: flex; flex-wrap: wrap; padding: 4px 4px 6px; }
.lineup-unit__players--out li { min-height: 40px; }

.lineup-projection-note { margin: 0; padding: 8px 14px; border-top: 1px solid var(--board-rule); background: var(--board-tint); color: var(--twill); font-size: 11.5px; line-height: 1.5; }
.lineup-projection-note + .lineup-projection-note { border-top: 0; padding-top: 0; }
.lineup-team > .boxscore-empty { margin: 0; padding: 14px; }

.lineup-team a:focus-visible, .lineup-info summary:focus-visible, .lineup-team-jump a:focus-visible { outline: 2px solid var(--blue-line); outline-offset: 2px; }

/* ── Narrow widths ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lineup-unit { grid-template-columns: 64px minmax(0, 1fr); }
  .lineup-unit__meta { padding-left: 10px; }
  .lineup-player-photo { width: 30px; height: 30px; flex-basis: 30px; }
}
@media (max-width: 900px) {
  .lineup-team-jump { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
  .lineup-team-jump a { padding: 8px 12px; border: 1px solid var(--board-rule); background: var(--board-tint); color: var(--board); font: 600 14px var(--font-body); text-decoration: none; }
  .lineup-team-jump span { display: block; margin-top: 2px; color: var(--twill); font-size: 11px; font-weight: 400; }
  .lineup-grid { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 600px) {
  .lineup-overview { align-items: flex-start; flex-direction: column; gap: 6px; }
  .lineup-faceoff { text-align: left; }
  .lineup-faceoff time { display: inline; margin-left: 6px; }
  .lineup-team__head { padding: 10px 12px; gap: 10px; }
  .lineup-unit { grid-template-columns: 58px minmax(0, 1fr); }
  .lineup-unit__meta { padding: 6px 4px 6px 8px; }
  .lineup-shared-time { font-size: 9px; }
  /* Three across still reads as a line on a phone, so the photo goes above
     the name rather than the players going onto rows of their own. */
  .lineup-unit__players li { flex-direction: column; justify-content: center; gap: 4px; padding: 7px 4px; text-align: center; }
  .lineup-player-text { align-items: center; }
  .lineup-player-name { font-size: 12px; }
  .lineup-unit__players--1 li, .lineup-source-goalies li { flex-direction: row; justify-content: flex-start; text-align: left; }
  .lineup-unit__players--1 .lineup-player-text, .lineup-source-goalies .lineup-player-text { align-items: flex-start; }
  .lineup-source-goalies { grid-template-columns: minmax(0, 1fr); }
  .lineup-unit__players--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lineup-unit__players--out li { flex-direction: row; text-align: left; }
  .lineup-info--inline[open] > .lineup-info__body { right: auto; left: -12px; }
}