/* 歌唱データ詳細ページ（results/detail.php）の技法パネル */

.tech-meters {
  display: grid;
  gap: 14px 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin-bottom: 18px;
}

.tech-meter-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}

.tech-meter-head span {
  font-size: .86rem;
  color: #68707f;
}

.tech-meter-head strong {
  font-size: 1.05rem;
  color: #202530;
  font-variant-numeric: tabular-nums;
}

.tech-meter-bar {
  height: 8px;
  border-radius: 999px;
  background: #e8ebef;
  overflow: hidden;
}

.tech-meter-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #39bff8, #1aa6d9);
}

.tech-meter-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-size: .74rem;
  color: #858d9b;
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.tech-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  background: #f5f6f8;
  font-size: .82rem;
  color: #68707f;
}

.tech-chip strong {
  color: #202530;
  font-variant-numeric: tabular-nums;
}

.tech-facts {
  margin: 0;
}

@media (max-width: 600px) {
  .tech-meters {
    grid-template-columns: 1fr;
  }
}

/* ===== DAM本体の結果画面に寄せた歌唱技法パネル ============================ */

.dam-panel {
  --dam-line: #45d3ff;
  --dam-glow: rgba(69, 211, 255, .45);
  margin-top: 14px;
  padding: 18px;
  display: grid;
  gap: 12px;
  border-radius: var(--radius, 16px);
  background: radial-gradient(120% 140% at 15% 0%, #16233c 0%, #0c1422 60%, #080d16 100%);
  color: #dceaff;
  box-shadow: var(--shadow, 0 10px 30px rgba(0, 0, 0, .18));
}

/* 採点方式ごとにDAM本体と同系統の色にする */
.dam-panel.dam-DX_G { --dam-line: #e07bff; --dam-glow: rgba(224, 123, 255, .45); }
.dam-panel.dam-AI   { --dam-line: #ffbf4d; --dam-glow: rgba(255, 191, 77, .45); }

.dam-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
}

.dam-block {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-left: 3px solid var(--dam-line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015));
}

.dam-block--wide { grid-column: 1 / -1; }

.dam-tag {
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--dam-line);
  text-shadow: 0 0 10px var(--dam-glow);
}

.dam-sub { font-size: .74rem; color: #8fa7c4; }
.dam-slash { color: #566a86; }

.dam-point {
  font: 700 1.6rem/1 Georgia, serif;
  color: #fff;
  text-shadow: 0 0 16px var(--dam-glow);
  font-variant-numeric: tabular-nums;
}

.dam-point small { font: 400 .62rem system-ui; margin-left: 2px; color: #9fb6d2; }
.dam-point--sm { font-size: 1.15rem; }

.dam-count {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: .78rem;
  color: #9fb6d2;
}

.dam-count b {
  font-size: 1rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.dam-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dam-line);
  box-shadow: 0 0 8px var(--dam-glow);
  align-self: center;
}

/* ハートタイプ（精密採点Ai Heart） */
.dam-heart { --heart: #ff7bc0; }
.dam-heart.tone-powerful  { --heart: #ff5f6d; }
.dam-heart.tone-smile     { --heart: #ffd24d; }
.dam-heart.tone-technical { --heart: #c07bff; }
.dam-heart.tone-healing   { --heart: #5fdba7; }
.dam-heart.tone-balance   { --heart: #ff7bc0; }

.dam-heart-icon {
  width: 26px;
  height: 26px;
  flex: none;
  background: var(--heart);
  box-shadow: 0 0 14px color-mix(in srgb, var(--heart) 60%, transparent);
  clip-path: path('M13 24 L3 14 A6 6 0 0 1 13 6 A6 6 0 0 1 23 14 Z');
}

.dam-heart-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dam-heart-body b {
  font-size: 1.05rem;
  color: #fff;
}

.dam-heart-note {
  font-size: .72rem;
  color: #9fb6d2;
  line-height: 1.5;
}

/* 上手さのダイヤ。半分だけ塗る表現が要るため、回転ではなく clip-path で菱形を作り、
   塗りは背景のグラデーションで左半分／全体を出し分ける。 */
.dam-diamonds { display: inline-flex; gap: 5px; }

.dam-diamonds i {
  width: 15px;
  height: 15px;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
  background: rgba(255, 255, 255, .16);
}

.dam-diamonds i.on {
  background: var(--dam-line);
  filter: drop-shadow(0 0 5px var(--dam-glow));
}

/* 端数は左半分だけ塗る */
.dam-diamonds i.half {
  background: linear-gradient(to right,
    var(--dam-line) 0 50%,
    rgba(255, 255, 255, .16) 50% 100%);
  filter: drop-shadow(0 0 5px var(--dam-glow));
}

.dam-inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: .76rem;
  color: #9fb6d2;
}

.dam-inline b { color: #fff; font-variant-numeric: tabular-nums; }

.dam-note {
  font-style: normal;
  font-size: .66rem;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #c3d4e8;
}
.dam-inline .dim { color: #6d84a2; }
.dam-end { font-size: .7rem; color: #8fa7c4; white-space: nowrap; }

/* 安定性：震えがち→まっすぐ の末広がりゲージ */
.dam-taper,
.dam-center {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 200px;
  min-width: 0;
}

.dam-taper-bars {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  height: 26px;
  min-width: 0;
}

.dam-taper-bars i {
  flex: 1;
  min-width: 0;
  border-radius: 1px;
  background: rgba(255, 255, 255, .16);
}

.dam-taper-bars i.on {
  background: var(--dam-line);
  box-shadow: 0 0 7px var(--dam-glow);
}

/* リズム：タメ⇔走り のセグメント表示（DAM本体と同じ7セル） */
.dam-cells {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  height: 22px;
}

.dam-cells i {
  flex: 1;
  min-width: 0;
  height: 100%;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}

.dam-cells i.mid {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.dam-cells i.on {
  background: color-mix(in srgb, var(--dam-line) 55%, transparent);
}

.dam-cells i.pin {
  background: #fff;
  box-shadow: 0 0 10px var(--dam-glow);
}

/* 声域の鍵盤 */
.dam-keys {
  display: flex;
  align-items: flex-start;
  gap: 1px;
  height: 46px;
  flex: 1 1 100%;
  min-width: 0;
}

.dam-keys i {
  flex: 1;
  min-width: 0;
  border-radius: 0 0 2px 2px;
}

.dam-keys i.wht { height: 100%; background: #d9e4f2; }
.dam-keys i.blk { height: 62%; background: #2b3a52; }
.dam-keys i.song.wht { background: #eef4fb; }
.dam-keys i.song.blk { background: #3d5170; }
.dam-keys i.sung.wht { background: var(--dam-line); box-shadow: 0 0 10px var(--dam-glow); }
.dam-keys i.sung.blk { background: var(--dam-line); filter: brightness(.75); }
.dam-keys i.edge-low,
.dam-keys i.edge-high { outline: 2px solid #fff; outline-offset: -1px; }

@media (max-width: 600px) {
  .dam-block { padding: 10px 12px; }
  .dam-point { font-size: 1.3rem; }
}

/* 採点履歴一覧：見出しクリックで並べ替え・絞り込み */
.data-table th .sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 6px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.data-table th .sort-link:hover {
  background: #eef1f5;
  color: #202530;
}

.data-table th.num .sort-link {
  flex-direction: row-reverse;
}

.data-table th.sorted .sort-link {
  color: #1aa6d9;
  font-weight: 600;
}

/* 矢印の有無や太字化で列幅が動くと、並べ替えのたびに表が揺れる。
   幅を固定し、太字ではなく色で状態を示す。 */
.sort-arrow {
  font-size: .62em;
  line-height: 1;
  width: .8em;
  flex: none;
  text-align: center;
}

.data-table th.sorted .sort-link {
  font-weight: inherit;
}

/* 利用者名とログアウトはナビの中に移した。
   app.css は狭い画面で .user-menu を display:none にしており、
   ハンバーガーを開いてもログアウトできない状態だったため。 */
.main-nav .user-menu {
  display: flex;
  margin-left: 18px;
}

@media (max-width: 900px) {
  /* ナビが縦並びのドロップダウンになるので、区切って最後の行に置く */
  .main-nav .user-menu {
    display: flex;
    width: 100%;
    margin: 6px 0 0;
    padding: 10px 11px 2px;
    border-top: 1px solid var(--line);
    justify-content: space-between;
  }

  .main-nav .user-menu span,
  .main-nav .user-menu button {
    font-size: 14px;
  }
}

/* ランキング。パソコンでは横3列、狭くなるほど段数を減らす。
   旧 .ranking-tabs は3列固定だったが、項目が6つに増えたのでここで作り直す。 */
.ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

@media (max-width: 1100px) {
  .ranking-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .ranking-grid { grid-template-columns: 1fr; }
}

/* 見出しの下に出す説明 */
.ranking-note {
  margin: 2px 0 0;
  font-size: .72rem;
  line-height: 1.5;
}

/* 順位・曲名・得点の3列。列が狭いので余白を詰める */
.ranking-row {
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 12px 16px;
}

.ranking-row .list-score {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ranking-unit {
  font-size: 10px;
  color: var(--muted);
  margin-left: 3px;
}

/* ロゴマークは「精」の文字からマイクの図形へ。
   app.css 側で Georgia のイタリック指定が残っているので打ち消しておく。 */
.brand-mark {
  font-style: normal;
}

.brand-mark svg {
  width: 19px;
  height: 19px;
  display: block;
}

/* 絞り込みパネル。狭い画面では一覧より場所を取るので、既定で閉じておく。
   details/summary を使うのでJavaScriptは不要。 */
.filter-panel > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  padding: 14px 18px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.filter-panel > summary::-webkit-details-marker { display: none; }

.filter-panel > summary::before {
  content: "▶";
  font-size: .62em;
  color: #858d9b;
  transition: transform .15s;
}

.filter-panel[open] > summary::before { transform: rotate(90deg); }
.filter-panel > summary:hover { background: #f5f6f8; }

.filter-summary-label {
  font-weight: 600;
  font-size: .88rem;
}

.filter-summary-active {
  font-size: .78rem;
  color: #1aa6d9;
}

.filter-panel > .history-filter { padding-top: 0; }

/* 採点日時は2行（年月日 / 時刻）にして列幅を詰める */
.cell-date span {
  display: block;
  line-height: 1.35;
}

.cell-date-time {
  font-size: .82em;
  color: #858d9b;
}

/* 採点方式も2行（精密採点 / 方式名） */
.cell-type .badge {
  display: inline-block;
  text-align: center;
  line-height: 1.3;
}

.badge-prefix {
  display: block;
  font-size: .78em;
  opacity: .72;
}

.badge-name {
  display: block;
  font-weight: 700;
}

/* .data-table は white-space:nowrap のため、長い曲名がそのまま列幅になり
   右側の列が画面外へ押し出される。曲名・歌手名の幅を制限して省略表示にする
   （全文は title 属性のツールチップで読める）。 */
.cell-song .cell-title,
.cell-song .cell-sub {
  display: block;
  /* 採点日時と採点方式を2行にして詰めたぶん、曲名に幅を回す。
     曲名は一覧で最も重要な情報なので、他の列より優先して広く取る。 */
  max-width: min(420px, 34vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 画面が狭いほど他の列を削り、曲名の取り分を増やす */
@media (max-width: 900px) {
  .cell-song .cell-title,
  .cell-song .cell-sub { max-width: 46vw; }
  .heart-chip { max-width: 11vw; }
}

/* 曲一覧・歌手一覧の名前列。
   .data-table は white-space:nowrap のため、長い曲名や歌手名がそのまま列幅になり
   右側の項目が画面外へ押し出されていた。ここは折り返しを許して幅を抑える。
   採点履歴一覧（.cell-song）は1行に収めたいので省略表示のまま、方針を分けている。 */
.data-table th.cell-name,
.data-table td.cell-name {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.45;
  max-width: min(230px, 22vw);
}

.data-table td.cell-name .cell-title {
  display: block;
}

@media (max-width: 900px) {
  .data-table th.cell-name,
  .data-table td.cell-name {
    max-width: 40vw;
  }
}

/* 列数が増えたぶん、余白を詰めて全体の横幅を抑える */
.data-table th,
.data-table td {
  padding-left: 9px;
  padding-right: 9px;
}

.data-table th:first-child,
.data-table td:first-child {
  padding-left: 16px;
}

.data-table th:last-child,
.data-table td:last-child {
  padding-right: 16px;
}

/* 一覧のハートタイプ */
.heart-chip {
  --heart: #8fa7c4;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  font-size: .78rem;
  /* 組み合わせ型は名前が長い。列を広げすぎないよう省略表示にする（全文はツールチップ） */
  max-width: min(140px, 12vw);
  overflow: hidden;
  text-overflow: ellipsis;
}

.heart-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 50%;
  background: var(--heart);
}

.heart-chip.tone-powerful  { --heart: #ff5f6d; }
.heart-chip.tone-smile     { --heart: #e0a800; }
.heart-chip.tone-technical { --heart: #a35cff; }
.heart-chip.tone-healing   { --heart: #2eae7d; }
.heart-chip.tone-balance   { --heart: #ff5fa8; }

/* 範囲外の値（0〜100点でない採点項目）の注意表示 */
.out-of-range {
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ffe8ec;
  color: #c2334d;
  font-size: .68rem;
  font-style: normal;
  vertical-align: middle;
}

.out-of-range-note {
  margin: 14px 0 0;
  font-size: .78rem;
  line-height: 1.6;
}

/* 生データの折りたたみ表示 */
.raw-dump summary {
  cursor: pointer;
  font-weight: 600;
  color: #202530;
}

.raw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

.raw-table th,
.raw-table td {
  padding: 5px 10px;
  border-bottom: 1px solid #e8ebef;
  text-align: left;
  vertical-align: top;
}

.raw-table th {
  width: 42%;
  font-weight: 500;
  color: #68707f;
  word-break: break-all;
}

.raw-table td {
  color: #202530;
  word-break: break-all;
}

/* 取り込み状況の照合表 */
.diag-table {
  margin-bottom: 18px;
}

.diag-table thead th {
  width: auto;
  font-weight: 600;
  color: #202530;
  background: #f5f6f8;
}

.diag-table th { width: 24%; }

.diag-table em {
  font-style: normal;
  color: #858d9b;
}

/* 応答自体に属性が無い＝DAM側が返していない */
.diag-missing td,
.diag-missing th { background: #fbfbfc; }

/* 値は届いているのに保存されていない＝取り込みが古い */
.diag-stale td,
.diag-stale th { background: #fff6e5; }

.diag-stale em { color: #b06a00; }

/* 情報量を1画面に近づけるための高さ調整 */
.sing-report {
  min-height: 0;
}

.report-score {
  padding: 30px 32px;
}

/* 書体は欧文 Montserrat + 和文 Noto Sans JP に統一する。
   元の app.css は Georgia + 游明朝（明朝体）だったが、Georgia に和文が無いため
   日本語だけ明朝へフォールバックする混植になり、かつ游明朝の無い環境では
   別の書体になっていた。ウェイトは 700=見出し / 900=点数 で階層をつける。
   app.css が font ショートハンドで指定しているため、ここは個別プロパティで上書きする。 */

/* --- 見出し（ページタイトル・曲名・カード見出し） --- */
h1,                            /* ページタイトル */
.report-score h2,              /* 歌唱データの曲名 */
.login-form h2,
.empty strong {
  font-family: 'Montserrat', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 700;
}

/* --- 点数表示 --- */
.report-total,                 /* 歌唱データの総合得点 */
.dam-point,                    /* 技法パネルの表現力・抑揚 */
.metric-value,                 /* ダッシュボードの上部4指標 */
.score-hero strong,            /* 自己最高スコア */
.list-score,                   /* 最近歌った曲・採点方式別の得点 */
.report-score-row strong,      /* 素点・ボーナス・キー・全国平均・全国平均との差 */
.score-bar strong,             /* 採点項目のバーの点数 */
.rank-num,                     /* ランキングの順位 */
.data-table td.num {           /* 採点履歴一覧の数値列すべて */
  font-family: 'Montserrat', 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}

.rank-num {
  font-style: normal;
}

.report-total small,
.dam-point small,
.metric-value small {
  font-family: 'Noto Sans JP', system-ui, sans-serif;
  font-weight: 900;
}

.report-total {
  font-size: 60px;
  letter-spacing: -.01em;
  margin: 4px 0;
}

/* 曲名の上に出すリクエスト番号（デンモクの曲番号） */
.report-reqno {
  margin: 10px 0 0;
  font-size: 10px;
  letter-spacing: .1em;
  color: #8fa7c4;
}

.report-reqno span {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: #dceaff;
  margin-left: 4px;
  font-variant-numeric: tabular-nums;
}

.report-total small {
  font-size: 20px;
}

.report-score-row {
  margin-top: 18px;
  padding-top: 14px;
}

.report-radar {
  min-height: 0;
  padding: 18px;
}

.report-radar canvas {
  max-height: 270px;
}

/* レーダーの頂点の色分けの説明 */
.radar-note {
  margin: 6px 0 0;
  text-align: center;
  font-size: .72rem;
  color: #9eadc2;
}

.radar-above {
  color: #ffd24d;
  font-weight: 700;
}

.report-grid {
  margin-top: 14px;
}

.section-chart {
  height: 240px;
  margin-top: 12px;
}

/* 区間グラフの見出しに出す各項目の点数。DAM本体の項目パネルの見出しに相当する。
   聴感はレーダーの軸から外しているため、点数を示すのはここだけになる。 */
.section-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 10px 0 2px;
}

.section-score {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: .8rem;
  color: #68707f;
}

.section-score::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dot);
  align-self: center;
}

.section-score b {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 900;
  font-size: 1.15rem;
  color: #202530;
  font-variant-numeric: tabular-nums;
}

.section-score small {
  font-size: .68rem;
  color: #858d9b;
}

.compact-chart {
  height: 170px;
}

.trend-chart {
  height: 290px;
  margin-top: 12px;
}

/* グリッドの子は既定で min-width:auto のため、中身の最小幅が列幅を押し広げて
   画面外にはみ出す。縮小を許可して横スクロールを防ぐ。 */
.sing-report > *,
.report-columns > * {
  min-width: 0;
}

/* 長い曲名で横に溢れないようにする */
.report-score h2,
.report-artist {
  overflow-wrap: anywhere;
}

/* グラフ類を2カラムに並べて縦の伸びを抑える。
   minmax() に min() を挟み、狭い画面で列幅が viewport を超えないようにする。 */
.report-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 14px;
}

.report-columns > .card {
  margin: 0;
}

/* 24区間のグラフは横幅が要るが、全幅にすると他カードが単独行になり縦に伸びる。
   3列に並べられる広い画面でだけ1行を占有させる。 */
@media (min-width: 1500px) {
  .report-col-wide {
    grid-column: 1 / -1;
  }
}

/* 採点項目のバーも2列に */
.score-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
  gap: 10px 20px;
}

@media (max-width: 780px) {
  .report-total {
    font-size: 46px;
  }

  .report-score {
    padding: 24px 20px;
  }

  .report-columns {
    grid-template-columns: 1fr;
  }
}

/* 見出し横のボタンは、狭い画面で app.css が文字を消して「＋」に差し替えていた。
   CSV書き出しも「一覧へ戻る」も同じ記号になり、押すまで用途が分からないため元に戻す。
   幅が足りないぶんは、見出しの下へ回り込ませて全文を出す。 */
.page-heading .btn {
  font-size: 13px;
}

.page-heading .btn::after {
  content: none;
}

@media (max-width: 600px) {
  .page-heading {
    flex-wrap: wrap;
    gap: 12px;
  }

  .page-heading .btn {
    height: 40px;
    padding: 0 14px;
    white-space: nowrap;
  }
}

/* 戻る導線。見出しの右（操作ボタンの位置）ではなく、上・左に置く。
   実行を伴うボタンと同じ場所に並べると押し間違いにつながるため、
   見た目もボタンではなくリンクにして役割の違いを明確にする。 */
.page-back {
  margin: 0 0 10px;
  font-size: .82rem;
}

.page-back a {
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
}

.page-back a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 期間集計ページの絞り込み。狭い画面では縦に積む。 */
.period-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}

.period-filter .field {
  min-width: 160px;
  flex: 1 1 160px;
}

@media (max-width: 600px) {
  .period-filter .btn {
    flex: 1 1 100%;
  }
}

/* 曲一覧は採点項目の列が増えたぶん、名前列が潰れて2文字ずつ折り返してしまう。
   最低幅を確保して、曲名が読める幅を先に取る。 */
.data-table th.cell-name,
.data-table td.cell-name {
  min-width: 170px;
}

@media (max-width: 900px) {
  .data-table th.cell-name,
  .data-table td.cell-name {
    min-width: 38vw;
  }
}

/* 途中終了のお知らせ。失敗ではないが成功とも違うので、赤でも緑でもない色にする。 */
.alert-warning {
  background: #fff5e2;
  color: #8a5a11;
}

/* 採点履歴は列が多く横スクロールが要る。スクロールしても行を見失わないよう、
   左端の採点日時だけ固定する。背景色を明示しないと下の列が透けて重なる。 */
.data-table th.cell-date,
.data-table td.cell-date {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fff;
}

.data-table thead th.cell-date {
  background: #f7f8f9;
  z-index: 2;
}

.data-table tbody tr:hover td.cell-date {
  background: #fafafa;
}

/* 固定列とスクロールする列の境目を示す */
.data-table th.cell-date::after,
.data-table td.cell-date::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: var(--line);
}

/* 精密採点DX。DX-Gより前の機種なので、色味は近づけつつ濃さで分ける。 */
.badge-DX {
  background: #f3ece3;
  color: #8a6134;
}

/* 分析レポートのコメント。読ませる文なので、数値まわりより大きめに組む。 */
.report-comment {
  margin: 12px 0 0;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--ink);
}

/* 採点履歴は列が20近くある。精密集計のように余白を削って一望できるようにする。
   見出しは1〜2文字に略し、正式名称はtitle属性に持たせている。 */
.data-table-dense th,
.data-table-dense td {
  padding: 6px 7px;
  font-size: 12px;
}

.data-table-dense th {
  font-size: 10px;
  letter-spacing: 0;
}

.data-table-dense th:first-child,
.data-table-dense td:first-child {
  padding-left: 12px;
}

.data-table-dense th:last-child,
.data-table-dense td:last-child {
  padding-right: 12px;
}

/* 数値列は詰めても読めるので、幅を文字数ぶんまで落とす */
.data-table-dense td.num,
.data-table-dense th.num {
  padding-left: 5px;
  padding-right: 5px;
}

.data-table-dense .score-num {
  font-size: 15px;
}

.data-table-dense .badge {
  padding: 2px 6px;
}

/* 詰めた表では曲名とハートタイプが幅を取りすぎる。
   精密集計と同じく、はみ出しは省略表示にして数値列を優先する。 */
.data-table-dense .cell-song .cell-title,
.data-table-dense .cell-song .cell-sub {
  max-width: min(230px, 26vw);
}

.data-table-dense .heart-chip {
  max-width: min(110px, 10vw);
}