/* Player page top. Piece stylesheet; tokens and base classes come from tokens.css. */

/* Nav */
.nav { height: 88px; }
.nav .container { height: 100%; display: flex; align-items: center; gap: 48px; }
.wordmark { font-size: 18px; font-weight: 500; line-height: 1; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.wordmark .mark { display: block; }
.nav-links { display: flex; gap: 32px; margin-left: 8px; }
.nav-links a { font-size: 16px; line-height: 1.4; color: var(--ink); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav-contact { display: flex; flex-direction: column; align-items: flex-end; }

/* Identity */
.identity { padding: 24px 0 24px; }
.identity .container { display: grid; grid-template-columns: 1fr 200px; gap: 48px; align-items: start; }

.step-pill {
  display: inline-flex; align-items: center; height: 40px; padding: 0 24px 0 0;
  background: var(--paper); border-radius: var(--radius-pill); color: var(--ink);
}
.step-pill .numeral {
  width: 40px; height: 40px; border-radius: 50%; background: var(--numeral-circle);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500; line-height: 1; margin-right: 16px;
  font-variant-numeric: tabular-nums; flex: none;
}
.step-pill .step-label { margin-right: -0.28em; }

.player-name { margin-top: 12px; }
.player-line { margin-top: 12px; max-width: 720px; }

.notice { margin-top: 10px; color: var(--ink); display: flex; align-items: center; gap: 10px; }
.notice-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--highlight); flex: none; }

.facts { display: flex; gap: 40px; margin-top: 16px; flex-wrap: wrap; }
.fact .caption { display: block; }
.fact .ui { display: block; margin-top: 2px; color: var(--ink); font-variant-numeric: tabular-nums; }
.fact .tbd { display: block; margin-top: 4px; line-height: 1.4; }
.facts-stamp { margin-top: 8px; }

.portrait {
  width: 200px; height: 252px; border-radius: var(--radius-panel); overflow: hidden; background: var(--paper);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; display: block; }

/* Dashboard frame */
.frame-wrap { padding-bottom: 64px; }
.frame { background: var(--paper); border-radius: var(--radius-card); padding: var(--card-pad); }

.chrome { display: flex; align-items: center; gap: 8px; }
.tabs { display: flex; align-items: center; gap: 4px; }
.tab {
  height: 40px; padding: 0 16px; display: inline-flex; align-items: center;
  font-size: 16px; line-height: 1.4; color: var(--ink); border-radius: var(--radius-pill);
  border: 1px solid transparent; white-space: nowrap;
}
.tab { text-decoration: none; font-family: inherit; background: transparent; cursor: pointer; }
.tab:hover { background: var(--panel); }
.tab.is-selected { border-color: var(--signal); background: var(--panel); }
html { scroll-behavior: smooth; }
.band { scroll-margin-top: 24px; }
#overview { scroll-margin-top: 0; }
.chrome-right { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.control { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 1.4; color: var(--graphite); white-space: nowrap; }
.control svg { width: 18px; height: 18px; stroke: var(--ink); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.control .chev { width: 12px; height: 12px; }

.panel-main { margin-top: 24px; }

/* Tab views inside the frame */
.view { margin-top: 24px; min-height: 260px; }
.view[hidden] { display: none; }
.view-print { display: none; }
.view > .panel + .panel, .view > .panel + .view-split { margin-top: 24px; }
.view > .panel-main, .view > .panel-chart { margin-top: 0; }
.view > .panel-main + .panel-chart { margin-top: 24px; }
.view-split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.view-split .panel { margin: 0; }
.view .data { margin-top: 8px; }
.view .data th, .view .data td { border-bottom-color: var(--hairline-on-white); }
.view .tbd { line-height: 1.4; }
.view .tile-grid { margin-top: 0; }
.view .tile-grid .tile { padding: 24px; }
.view .prog .delta { color: var(--signal); display: inline-flex; align-items: center; gap: 3px; font-size: 14px; margin-left: 8px; }
.view .prog .delta svg { width: 8px; height: 8px; }
.velo-chart svg { height: 240px; }
.view .video-slot { background: var(--paper); }

/* Stat tiles, in two labeled groups */
.groups { display: flex; gap: 32px; align-items: flex-start; }
.group { flex: none; }
.group-head { padding-left: 16px; margin-bottom: 8px; display: flex; align-items: baseline; gap: 12px; }
.group-head .ui { color: var(--ink); }
.tiles { display: flex; gap: 8px; }
.tile {
  flex: none; width: 186px; padding: 12px 16px; border-radius: var(--radius-panel);
  border: 1px solid transparent; background: var(--panel);
}
.tile.is-selected { border-color: var(--signal); }
.tile .label { font-size: 16px; line-height: 1.4; color: var(--graphite); }
.tile .value-line { display: flex; align-items: baseline; gap: 6px; margin-top: 2px; }
.tile .unit { font-size: 16px; line-height: 1.4; color: var(--graphite); }
.tile .delta-line { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 14px; line-height: 1.4; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tile .delta { color: var(--signal); display: inline-flex; align-items: center; gap: 3px; }
.tile .delta.is-down { color: var(--down); }
.tile .delta svg { width: 8px; height: 8px; }
.tile .prior { color: var(--graphite); }
.tile .stamp { margin-top: 6px; }

.season-note { margin-top: 12px; padding: 0 16px; color: var(--graphite); }

/* Missing values read as plain text in this piece; the chip border is dropped */
.tbd { border: 0; padding: 0; border-radius: 0; }

/* Chart */
.panel-chart { margin-top: 24px; }
.chart-caption { display: flex; justify-content: space-between; gap: 24px; }
.chart svg { display: block; width: 100%; height: 240px; margin-top: 8px; }
.chart .grid { stroke: var(--hairline-on-white); stroke-width: 1; }
.chart .axis { font-size: 14px; fill: var(--graphite); font-family: var(--font); font-variant-numeric: tabular-nums; }
.chart .bar-current { fill: url(#fade); stroke: #9a9a9a; stroke-width: 1; }
.chart .bar-compare { fill: #ffffff; stroke: var(--signal); stroke-width: 1; }
.chart .bar-tbd { fill: none; stroke: var(--hairline); stroke-width: 1; stroke-dasharray: 3 3; }

/* Narrow screens */
@media (max-width: 720px) {
  .container { padding: 0 16px; }
  .nav { height: 72px; }
  .nav .container { gap: 16px; }
  .nav-links, .nav-contact { display: none; }
  .wordmark { display: inline-flex; align-items: center; min-height: 44px; }

  /* Identity: pill and name left, photo right, then full-width rows */
  .identity { padding: 8px 0 16px; }
  .identity .container { display: grid; grid-template-columns: minmax(0, 1fr) 96px; column-gap: 16px; row-gap: 0; align-items: start; }
  .identity .container > div:first-child { display: contents; }
  .identity .step-pill { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; height: auto; min-height: 40px; max-width: 100%; padding: 0 20px 0 0; }
  .step-pill .step-label { font-size: 12px; letter-spacing: 0.16em; }
  .identity .step-pill .step-label { line-height: 1.3; margin-right: 0; padding: 4px 0; }
  .player-name { grid-column: 1; grid-row: 2; margin-top: 12px; }
  .portrait { grid-column: 2; grid-row: 1 / span 2; width: 96px; height: 120px; order: 0; }
  .portrait img { object-position: 50% 0%; }
  .player-line, .notice, .facts, .facts-stamp { grid-column: 1 / -1; }
  .player-line { margin-top: 12px; }
  .notice { align-items: flex-start; margin-top: 12px; font-size: 16px; }
  .notice-dot { margin-top: 7px; }
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
  .fact { min-width: 0; }
  .facts-stamp { margin-top: 12px; }

  .frame-wrap { padding-bottom: 32px; }
  .frame { padding: var(--card-pad); }
  .panel { padding: 16px; }
  .chrome { flex-direction: column; align-items: stretch; gap: 8px; }
  .tabs { margin: 0; }
  .tab { padding: 0 14px; }
  .chrome-right { margin-left: 0; flex-wrap: nowrap; gap: 16px; }
  .control { font-size: 13px; line-height: 1.4; gap: 6px; }
  .control svg { width: 14px; height: 14px; stroke: var(--graphite); }
  .view { margin-top: 16px; min-height: 0; }
  .view > .panel + .panel, .view > .panel + .view-split, .view > .panel-main + .panel-chart { margin-top: 12px; }
  .view-split { grid-template-columns: 1fr; gap: 12px; }

  .groups { flex-direction: column; gap: 20px; }
  .group { width: 100%; }
  .group-head { flex-direction: column; gap: 2px; padding-left: 0; }
  .tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .tile { width: auto; min-width: 0; padding: 14px 16px; }
  .tile .label { font-size: 14px; }
  .tile .unit { font-size: 14px; }
  .tile .delta-line { gap: 6px; font-size: 13px; }
  .tile .stamp { white-space: nowrap; letter-spacing: -0.01em; }
  .season-note { padding: 0; margin-top: 12px; font-size: 14px; }

  .panel-chart, .velo-chart { display: none; }
  .view .tile-grid .tile { padding: 14px 16px; }
  .view .prog .delta { margin-left: 4px; }
}

/* Print: every view in sequence, headed by its tab name */
@media print {
  .tabs { display: none; }
  .view, .view[hidden] { display: block; min-height: 0; break-inside: avoid; }
  .view-print { display: block; font-size: 14px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink); margin: 0 0 12px; }
  .panel-chart { display: block; }
  .embed iframe { display: none; }
}