/* Tournament of Albums — index.html page styles.
   Tokens, reset, body base, focus, festive header, navigation tabs and
   .section-label live in the shared theme.css; this file holds only what is
   specific to index.html and is linked after it so it wins the cascade. */

body { padding-bottom: 4rem; }
.page-layout { display: flex; gap: 1.75rem; align-items: flex-start; }
/* Surface, border, radius and shadow come from .panel in theme.css; padding is
   per-panel by design, so it stays here. Same for the two below. */
#recent-matches-panel {
  --panel-accent: var(--cyan);
  flex: 0 0 260px;
  padding: 1rem 1.1rem 1.1rem;
}
#recent-matches-list { border: 2px solid var(--ink); border-radius: 8px; }
.page-main { flex: 1 1 auto; min-width: 0; }

/* ── Header date line (page-specific) ───────────────────── */
#date {
  position: relative;
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0.45rem 0 0;
}

/* ── Loading / Error ────────────────────────────────────── */
#loading { color: var(--ink-soft); font-size: 0.9rem; font-weight: 600; }
#error {
  font-size: 0.85rem; font-weight: 700;
  color: #fff; background: var(--pink);
  border: 2px solid var(--ink); border-radius: 8px;
  padding: 0.75rem 1rem;
}

/* ── Search ─────────────────────────────────────────────── */
#search-wrap { margin-bottom: 0.75rem; }
#search {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 2px solid var(--ink);
  border-radius: 24px;
  font-size: 0.9rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: box-shadow 0.15s;
}
#search::placeholder { color: var(--ink-soft); opacity: 0.7; }
#search:focus { box-shadow: 3px 3px 0 var(--cyan); }

/* ── Table ──────────────────────────────────────────────── */
#content { max-height: 420px; overflow-y: auto; border-radius: 10px; border: 2px solid var(--ink); }
#content::-webkit-scrollbar { width: 4px; }
#content::-webkit-scrollbar-thumb { background: var(--violet); border-radius: 2px; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th {
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-bottom: 3px solid var(--pink);
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  position: sticky; top: 0; z-index: 1;
  background: var(--surface);
}
td { padding: 0.5rem 0.85rem; border-bottom: 1px solid var(--line); font-size: 0.9rem; font-weight: 500; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(255, 61, 127, 0.06); transition: background 0.1s; }
.rank {
  font-family: 'Bungee', sans-serif;
  font-size: 0.9rem;
  width: 2.6rem;
}
.rank span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.7rem; height: 1.7rem; padding: 0 0.35rem;
  border-radius: 8px; font-size: 0.72rem; color: #fff;
}
.score { font-variant-numeric: tabular-nums; color: var(--violet); font-weight: 700; }
.rating { white-space: nowrap; }
/* The star symbols in index.html read every colour from these. Filled stars get
   a darker-gold outline and empty slots none: an ink outline on every star gave
   all five the same silhouette, so the count of filled ones was hard to read. */
.stars {
  display: inline-flex; gap: 1px; vertical-align: middle;
  --star-fill: var(--yellow); --star-stroke: #C98F00;
  --star-empty: #E9E5EE; --star-empty-stroke: none;
  --star-stroke-width: 1.4;
}
.stars svg { width: 0.95rem; height: 0.95rem; }
.clickable-row { cursor: pointer; }
.album-link { color: var(--ink); text-decoration: none; }
.album-link:hover { color: var(--violet); text-decoration: underline; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--pink); }
.sort-indicator { margin-left: 0.3em; font-size: 1em; color: rgba(26, 26, 46, 0.25); }
th.sortable { white-space: nowrap; }
th.sort-active .sort-indicator { color: var(--pink); }

/* ── Album view ─────────────────────────────────────────── */
#album-heading { margin: 0 0 1rem; }
#album-artist {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
}
/* Wraps, so a long title pushes the stars onto their own line rather than
   squeezing them. */
#album-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.75rem; }
#album-title {
  min-width: 0;
  font-family: 'Bungee', sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.9rem);
  margin: 0.1rem 0 0;
  line-height: 1.15;
  color: var(--ink);
}

/* Sized up from the table's 0.95rem to sit beside the Bungee title. */
#album-rating .stars svg { width: 1.35rem; height: 1.35rem; }

/* ── History Panel ──────────────────────────────────────── */
#history-panel {
  --panel-accent: var(--yellow);
  padding: 1rem 1.25rem 1.25rem;
}
#history-panel h2 {
  margin: 0 0 0.6rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--violet);
}
#compare-wrap { position: relative; margin-bottom: 0.6rem; }
#compare-input {
  width: 100%;
  padding: 0.45rem 0.8rem;
  border: 2px solid var(--ink);
  border-radius: 20px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem; font-weight: 500;
  background: var(--surface);
  color: var(--ink);
  outline: none;
  transition: box-shadow 0.15s;
}
#compare-input::placeholder { color: var(--ink-soft); opacity: 0.7; }
#compare-input:focus { box-shadow: 3px 3px 0 var(--yellow); }
#compare-dropdown {
  display: none;
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 5;
  margin: 0; padding: 0; list-style: none;
  background: var(--surface);
  border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: 4px 4px 0 var(--violet);
  max-height: 240px; overflow-y: auto;
}
#compare-dropdown li {
  padding: 0.4rem 0.75rem;
  font-size: 0.82rem; font-weight: 500;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
}
#compare-dropdown li:last-child { border-bottom: none; }
#compare-dropdown li:hover, #compare-dropdown li.active { background: rgba(124, 58, 237, 0.1); color: var(--violet); }
#history-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.75rem; }
.album-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--paper); border: 2px solid var(--ink); border-radius: 18px;
  padding: 0.15rem 0.45rem 0.15rem 0.5rem;
  font-size: 0.8rem; font-weight: 600; color: var(--ink);
}
.chip-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.chip-remove { background: none; border: none; cursor: pointer; color: var(--ink-soft); font-size: 0.9rem; padding: 0; line-height: 1; }
.chip-remove:hover { color: var(--pink); }
#history-status { color: var(--ink-soft); font-size: 0.85rem; margin: 0; font-weight: 500; }
#history-status.error { color: var(--pink); }
#history-canvas-wrap { position: relative; height: 260px; }

/* Chart.js draws its own tooltip onto the canvas, which can only hold plain
   text. This one is a real element (see renderChartTooltip in app.js) so a
   match's ranking can be marked up. pointer-events: none keeps the pointer
   on the canvas underneath, so the hover it is describing never flickers. */
#chart-tooltip {
  display: none; position: absolute; pointer-events: none; z-index: 10;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 8px;
  box-shadow: 3px 3px 0 var(--pink); padding: 0.45rem 0.7rem;
  font-size: 0.78rem; max-width: 240px; white-space: nowrap;
}
#chart-tooltip .tt-date { font-weight: 700; color: var(--violet); }
#chart-tooltip .tt-album { display: flex; align-items: center; gap: 0.35rem; font-weight: 600; }
#chart-tooltip .tt-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
#chart-tooltip .tt-score { color: var(--ink-soft); font-weight: 500; }
/* The ranking is its own panel, so a match tooltip reads as a different
   thing rather than as the plain one with more lines. The negative margins
   bleed the fill to the tooltip's inner edges; 6px is the outer 8px radius
   less the 2px border, so the bottom corners sit flush. */
#chart-tooltip .tt-match {
  background: var(--paper); border-top: 2px solid var(--ink);
  border-radius: 0 0 6px 6px;
  margin: 0.45rem -0.7rem -0.45rem; padding: 0.4rem 0.7rem;
}
/* Two-end row so the click hint costs no height on a tooltip already close
   to the chart's own. Violet is the tooltip's existing accent, so the hint
   reads as the interactive part without spending a new colour. */
#chart-tooltip .tt-match-label {
  display: flex; justify-content: space-between; gap: 1.2rem;
  font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.3rem;
}
#chart-tooltip .tt-match-cta { color: var(--violet); }
#chart-tooltip .tt-rank { display: flex; gap: 0.35rem; }
#chart-tooltip .tt-rank-num { font-weight: 700; color: var(--violet); min-width: 1.1em; }
/* The hovered album's row punches back out of the shading onto the same
   surface as the header naming it. The negative margins cancel the chip's
   own padding and border, keeping the rank numbers in one column. */
#chart-tooltip .tt-rank.focal {
  font-weight: 700;
  background: var(--surface); border: 2px solid var(--ink); border-radius: 6px;
  padding: 0.05rem 0.3rem; margin: 0.12rem calc(-0.3rem - 2px);
}
#chart-tooltip .tt-loading { color: var(--ink-soft); }
/* Spells out what the label row's `Click →` only gestures at, mirroring the
   match chart's Chart.js tooltip footer — italic, --ink-soft — so the same
   affordance reads the same on both charts. Inside .tt-match, so the panel's
   paper fill and 6px bottom radius still close the tooltip, and its own block
   rather than a third item in the .tt-match-label row, which is already at its
   width budget against the tooltip's 240px max. */
#chart-tooltip .tt-match-hint {
  margin-top: 0.35rem;
  font-size: 0.7rem; font-style: italic; font-weight: 500;
  color: var(--ink-soft);
}

#history-panes { display: flex; gap: 1.5rem; align-items: flex-start; }
#score-pane { flex: 55 0 0%; min-width: 0; }
#match-pane { flex: 45 0 0%; min-width: 0; }
#match-status { color: var(--ink-soft); font-size: 0.875rem; margin: 0; font-weight: 500; }
#match-status.error { color: var(--pink); }
#match-list { border: 2px solid var(--ink); border-radius: 8px; overflow-y: auto; max-height: 310px; }
.match-row { border-bottom: 1px solid var(--line); }
.match-row:last-child { border-bottom: none; }
.match-toggle {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 0.45rem 0.75rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Poppins', sans-serif; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft);
}
.match-toggle:hover { background: rgba(124, 58, 237, 0.06); color: var(--ink); }
.match-toggle.open { background: rgba(124, 58, 237, 0.1); color: var(--violet); }
.match-arrow { color: rgba(26, 26, 46, 0.3); font-size: 0.7em; transition: transform 0.15s; }
.match-toggle.open .match-arrow { transform: rotate(90deg); }
.match-detail { padding: 0.25rem 0.75rem 0.5rem; display: none; }
.match-detail.open { display: block; }
.ranking-item { padding: 0.2rem 0; display: flex; gap: 0.5rem; align-items: baseline; font-size: 0.85rem; }
.ranking-num { font-family: 'Bungee', sans-serif; font-size: 0.8rem; color: var(--pink); min-width: 1.3rem; text-align: right; flex-shrink: 0; }
.ranking-album-link { color: var(--ink); text-decoration: none; font-weight: 500; }
.ranking-album-link:hover { text-decoration: underline; color: var(--violet); }
.ranking-item.focal .ranking-album-link { font-weight: 700; color: var(--violet); }
.compare-add {
  margin-left: auto; flex-shrink: 0; align-self: center;
  width: 1.35rem; height: 1.35rem; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper);
  border: 2px solid var(--ink); border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem; font-weight: 700; line-height: 1; color: var(--ink);
}
.compare-add:hover { background: var(--yellow); }
.ranking-delta {
  margin-left: auto;
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.05rem 0.4rem;
  border-radius: 6px;
  flex-shrink: 0;
  white-space: nowrap;
}
.ranking-delta.new { background: var(--yellow); color: var(--ink); }
.ranking-delta.up { color: var(--cyan); }
.ranking-delta.down { color: var(--pink); }
.ranking-delta.flat { color: var(--ink-soft); }

/* ── Match permalink (both accordions) ──────────────────── */
.match-head { display: flex; align-items: center; }
.match-head .match-toggle { width: auto; flex: 1 1 auto; min-width: 0; }
.match-permalink {
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; align-self: stretch;
  color: var(--ink-soft); text-decoration: none;
  font-size: 0.85rem; line-height: 1;
}
.match-permalink:hover { color: var(--violet); background: rgba(124, 58, 237, 0.1); }

/* ── Match view ─────────────────────────────────────────── */
#match-heading { margin: 0 0 1rem; }
#match-kicker {
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-soft);
}
#match-title {
  font-family: 'Bungee', sans-serif;
  font-size: clamp(1.2rem, 4vw, 1.9rem);
  margin: 0.1rem 0 0;
  line-height: 1.15;
  color: var(--ink);
}
#match-subtitle { font-size: 0.8rem; font-weight: 500; color: var(--ink-soft); }
#match-panel {
  --panel-accent: var(--violet);
  padding: 1rem 1.25rem 1.25rem;
}
#match-view-status { color: var(--ink-soft); font-size: 0.85rem; margin: 0; font-weight: 500; }
#match-view-status.error { color: var(--pink); }
#match-table-wrap:not(:empty) {
  border: 2px solid var(--ink); border-radius: 10px;
  overflow: hidden; overflow-x: auto;
}
#match-table-wrap .ranking-delta { display: inline-block; }
/* The shared th rule is position:sticky/top:0, which would stack the two header
   rows on top of each other. This wrapper only ever scrolls horizontally, so
   nothing is lost by opting out. */
#match-table-wrap thead th { position: static; }
/* The 3px pink rule belongs under the labels, not under the group row. */
#match-table-wrap .grp-row th { border-bottom: none; padding-bottom: 0.25rem; }
#match-table-wrap .grp {
  text-align: center;
  font-size: 0.62rem;
  color: var(--ink-soft);
  letter-spacing: 0.1em;
}
/* Divides then from now, down the whole table. */
#match-table-wrap .grp-start { border-left: 2px solid var(--line); }
#match-table-wrap .lbl-short { display: none; }
/* Second line of every numeric cell: the album's standing, under its score. The
   score is the headline; the standing is the same fact on another scale, so it
   is set smaller and softer rather than given a column of its own. Stacking is
   what keeps four numeric columns instead of eight — "#263.5" is no wider than
   "-0.030", so no column minimum grows. */
#match-table-wrap .cell-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  color: var(--ink-soft);
}
#match-table-wrap .cell-sub .ranking-delta { font-size: 0.6rem; }
/* Two lines of unequal weight per cell, so align the score lines across the row
   rather than the block centres — otherwise a cell whose second line is "–"
   sits half a line off from its neighbours. */
#match-table-wrap tbody td { vertical-align: top; }

/* ── Match view: score history chart ────────────────────── */
#match-chart-panel {
  --panel-accent: var(--cyan);
  padding: 1rem 1.25rem 1.25rem;
  margin-top: 1.25rem;
}
#match-chart-panel h2 {
  margin: 0 0 0.6rem;
  font-family: 'Poppins', sans-serif;
  font-size: 0.74rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--violet);
}
#match-chart-status { color: var(--ink-soft); font-size: 0.85rem; margin: 0; font-weight: 500; }
#match-chart-status.error { color: var(--pink); }
/* Same height as the album view's chart, so the two read as one component. */
#match-chart-wrap { position: relative; height: 260px; }

@media (max-width: 600px) {
  #history-panes { flex-direction: column; }
  /* Same trade as the match view below: the album name identifies the row and
     is already the link, so the artist gives way and Rating keeps full-size
     stars without a horizontal scroll. */
  #content .col-artist { display: none; }
  #content th, #content td { padding: 0.45rem 0.4rem; }
  #score-pane, #match-pane { flex: none; width: 100%; }
  /* Four numeric columns don't fit beside both name columns. The album name
     identifies the row on its own and is already the link to the album page, so
     the artist is what gives — that plus tighter cells keeps Today on screen
     instead of behind a horizontal scroll nobody discovers. */
  #match-panel, #match-chart-panel { padding: 0.8rem 0.7rem 0.9rem; }
  #match-table-wrap .col-artist { display: none; }
  #match-table-wrap th, #match-table-wrap td { padding: 0.4rem 0.25rem; }
  /* Headers, not values, are what set the minimum width of every numeric column
     here — "SCORE" is wider than "-1.021" — so they shrink hardest, and
     "Change" gives way to the symbol entirely. */
  #match-table-wrap th { font-size: 0.58rem; letter-spacing: 0.03em; }
  #match-table-wrap .lbl-long { display: none; }
  #match-table-wrap .lbl-short { display: inline; }
  #match-table-wrap .grp { font-size: 0.55rem; }
  #match-table-wrap td { font-size: 0.78rem; }
  #match-table-wrap .score { font-size: 0.75rem; }
  #match-table-wrap .ranking-delta { font-size: 0.63rem; padding: 0.05rem 0.2rem; }
  #match-table-wrap .cell-sub { font-size: 0.65rem; margin-top: 0.15rem; }
  #match-table-wrap .cell-sub .ranking-delta { font-size: 0.56rem; }
  #match-table-wrap .rank { width: auto; }
  #match-table-wrap .rank span { min-width: 1.35rem; height: 1.35rem; padding: 0 0.2rem; font-size: 0.62rem; }
}
@media (max-width: 880px) {
  .page-layout { flex-direction: column; }
  #recent-matches-panel { flex: none; width: 100%; order: 2; }
  .page-main { order: 1; }
}
@media (prefers-reduced-motion: reduce) { .match-arrow { transition: none; } }