/* ---------- Chart records ---------- */

.songs-heading { align-items: center; }

.song-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-field { position: relative; }

.search-field input,
.sort-field select {
  height: 34px;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--fs-control);
  transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.search-field input {
  width: min(280px, 28vw);
  padding: 0 12px 0 34px;
  background: var(--surface);
}

.search-field input:hover,
.sort-field select:hover { border-color: var(--ink-4); }

.search-field input::placeholder { color: var(--ink-4); }

.search-mark {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 13px;
  width: 12px;
  height: 12px;
  margin-top: -7px;
  border: 1.6px solid var(--ink-3);
  border-radius: 50%;
}

.search-mark::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -4px;
  width: 5px;
  height: 1.6px;
  border-radius: 2px;
  background: var(--ink-3);
  transform: rotate(45deg);
}

.sort-field select {
  padding: 0 30px 0 12px;
  font-weight: 700;
}

/* One labelled row per scale: label column, then value and its 以上/のみ/以下 relation. */
.song-filter-row {
  display: grid;
  grid-template-columns: 8.5em minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
}

.song-filter-label {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: 800;
}

.song-filter-controls,
.filter-checks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 12px;
  min-width: 0;
}

.song-filter-panel label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  font-size: var(--fs-meta);
  white-space: nowrap;
}

.song-filter-panel input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
}

.song-filter-panel select,
.song-number-filters input {
  height: 28px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  color: var(--ink);
  font-size: var(--fs-meta);
}

.song-filter-panel select {
  min-width: 84px;
  padding: 0 24px 0 8px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface) var(--chevron) no-repeat right 8px center / 10px 6px;
}

.song-number-filters select { min-width: 64px; }

.song-number-filters input {
  width: 76px;
  padding: 0 8px;
  background: var(--surface);
  font-family: var(--font-num);
  appearance: textfield;
  -moz-appearance: textfield;
}

/* Direct numeric entry only: no stepper arrows. */
.song-number-filters input::-webkit-inner-spin-button,
.song-number-filters input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.song-number-filter { gap: 6px; }

/* 以上 / のみ / 以下: the segmented grammar on native radios (keyboard and labels intact). */
.filter-relation {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  background: var(--surface-3);
  transition: opacity 140ms var(--ease);
}

.song-filter-panel .filter-relation label { position: relative; gap: 0; }

.filter-relation input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.filter-relation span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  color: var(--ink-3);
  font-weight: 700;
  transition: background-color 140ms var(--ease), color 140ms var(--ease), box-shadow 140ms var(--ease);
}

.filter-relation input:checked + span {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(21, 27, 36, 0.14), 0 0 0 1px rgba(21, 27, 36, 0.05);
}

.filter-relation input:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 1px;
}

/* Without a chosen value the relation has nothing to compare: it waits, quieter. */
.song-filter-controls:has(> select > option[value=""]:checked) > .filter-relation { opacity: 0.45; }

.song-filter-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

.table-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: visible;
  border-top: 1px solid var(--line);
}

table {
  width: 100%;
  min-width: 940px;
  border-collapse: collapse;
}

th,
td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}

th {
  color: var(--ink-3);
  background: var(--surface-2);
  font-size: var(--fs-meta);
  font-weight: 700;
  white-space: nowrap;
}

td { font-size: var(--fs-body); }

tbody tr { transition: background-color 120ms var(--ease); }

tbody tr:hover { background: var(--surface-2); }

.songs-table thead th {
  position: sticky;
  z-index: 4;
  top: 0;
  height: 32px;
  background: var(--surface-2);
  box-shadow: 0 1px 0 var(--line);
}

/* Where the table fits (no sideways scrolling), its column headers join the region bar: the
   scroller becomes a clip box so the headers can stick to the page. */
@media (min-width: 1024px) {
  .songs-panel .table-scroll { overflow-x: clip; }
  .songs-table thead th { top: calc(var(--region-sticky-top) + var(--region-head-h, 0px) + var(--songs-filter-h, 0px)); }
}

.songs-table thead button {
  position: relative;
  padding: 3px 12px 3px 2px;
  border: 0;
  border-radius: 4px;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  transition: color 120ms var(--ease);
}

.songs-table thead button:hover,
.songs-table thead button.is-active { color: var(--ink); }

.songs-table thead button.is-active::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 2px;
  border-right: 3.5px solid transparent;
  border-left: 3.5px solid transparent;
  transform: translateY(-50%);
}

.songs-table thead button.is-active[data-direction="desc"]::after { border-top: 5px solid currentColor; }
.songs-table thead button.is-active[data-direction="asc"]::after { border-bottom: 5px solid currentColor; }

.identity-heading {
  display: table-cell;
  white-space: nowrap;
}

.identity-heading > span { color: var(--ink-4); }

.number-column,
.number-cell {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.number-cell {
  font-family: var(--font-num);
  font-size: 14px;
  font-weight: 500;
}

.plays-cell,
.average-score-cell { color: var(--ink-2); }

.song-identity-cell { vertical-align: middle; }

.song-identity-layout {
  display: grid;
  grid-template-columns: 58px minmax(220px, 1fr);
  align-items: center;
  gap: 10px;
}

.song-level {
  display: grid;
  gap: 1px;
  color: var(--difficulty, var(--ink));
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.song-level small {
  color: var(--ink-3);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.2;
}

/* EX SCORE figures are compared down the column, so heading and values share the right edge. */
.best-score-column { text-align: right !important; }

.best-score-column,
.best-score-cell {
  width: 108px;
  padding-right: 8px;
  padding-left: 20px;
}

/* The heading spans score + DJ rank; its text ends over the score digits, not the badge. */
th.best-score-column { padding-right: calc(8px + 44px); }

.best-score-value-stack {
  display: inline-grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  justify-items: end;
  row-gap: 2px;
  min-width: 64px;
  line-height: 1;
}

.best-score-value-stack > b {
  position: relative;
  min-width: 48px;
  color: var(--ink);
  font-family: var(--font-num);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-align: right;
}

.best-score-value-stack > .score-secondary {
  align-self: start;
  justify-self: end;
}

.dj-rank-cell {
  width: 44px;
  padding-right: 4px;
  padding-left: 4px;
  text-align: center;
}

.bp-column,
.bp-cell {
  width: 56px;
  text-align: right;
}

.lamp-cell { white-space: nowrap; }

.songs-table .lamp-pill { min-width: 84px; }

/* A table is a board of states: its lit lamps and ranks keep a tighter halo so neighbouring
   rows stay clean. */
.songs-table { --glow-scale: 0.6; }

/* A chart updated inside the period (score, lamp or BP) reads as updated at row level with
   an edge light whose warm wash fades out toward the right, so the row never reads as a
   coloured card. The exact values that were reached are then emphasised in their own cells.
   (The phone layout's sticky first cell keeps its own opaque surface.) */
.songs-table tbody tr.has-period-update {
  background-image: linear-gradient(90deg,
    color-mix(in srgb, var(--event) 12%, transparent),
    color-mix(in srgb, var(--event) 5%, transparent) 26%,
    transparent 58%);
}

.songs-table tbody tr.has-period-update > td:first-child {
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--event) 78%, #ffd08a);
}

/* An all-time best reached inside the period keeps its number in plain ink; the ▲ marker alone
   names the update — no plate, background or line around the figure. Score and minimum BP
   share this grammar. */
.best-score-value-stack.is-period-updated > b,
.bp-value.is-period-updated {
  position: relative;
}

.bp-value.is-period-updated {
  display: inline-block;
  min-width: 18px;
  text-align: right;
}

.bp-value .period-score-marker { right: -8px; }

.cpi-column,
.cpi-cell {
  display: none;
  width: 72px;
  text-align: center;
}

.bpi-column,
.bpi-cell {
  display: none;
  width: 74px;
  text-align: center;
}

body.show-cpi .cpi-column,
body.show-cpi .cpi-cell,
body.show-bpi .bpi-column,
body.show-bpi .bpi-cell { display: table-cell; }

.cpi-cell,
.bpi-cell { color: var(--ink-4); }

.option-cell {
  max-width: 220px;
  overflow: hidden;
  color: var(--ink-2);
  font-size: var(--fs-control);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-cell {
  color: var(--ink-2);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  color: var(--ink-3);
  font-size: var(--fs-meta);
}