/* 「あなたの記録」カード（ui/records-card.js）。画布「あなたの記録」カード 2026-11-12 の値。
   この機能を消すときは records-card.js・この file・index.html の link と [data-record] だけ。 */
[data-record] { gap: 10px; }
.rec-head { display: flex; align-items: center; }
.rec-where { margin-left: auto; font: 500 11px var(--font); color: var(--muted); letter-spacing: 0; }
.rec-total-m { display: none; }
.rec-empty { font: 700 14px/1.6 var(--font); color: var(--ink); }
.rec-sum { display: flex; align-items: baseline; gap: 10px; }
.rec-sum-k { font: 700 12px var(--font); color: var(--muted); }
.rec-sum .rec-num { font-size: 26px; }
.rec-sum .rec-num small { font-size: 13px; }

.rec-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rec-row {
  display: grid; grid-template-columns: 14px 1fr auto; align-items: center; column-gap: 10px; row-gap: 3px;
  padding: 7px 8px 5px; border-radius: 10px; font: 700 13px var(--font); color: var(--ink);
}
.rec-row.on { background: var(--turn); }
.rec-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); box-sizing: border-box; }
.rec-num { display: flex; align-items: baseline; gap: 2px; font: 700 14px var(--num); color: var(--ink); }
.rec-num small { font: 700 11px var(--font); color: var(--muted); margin-right: 6px; }
.rec-num small:last-child { margin-right: 0; }
.rec-sep { display: none; }
.rec-none { color: var(--faint); }
.rec-bar { grid-column: 1 / -1; height: 4px; border-radius: var(--radius-pill); background: var(--line); overflow: hidden; }
.rec-bar i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); }
.rec-note { font: 500 11px/1.6 var(--font); color: var(--muted); }

/* スマホ：5 段を横一列、通算は見出しの右。縦に 5 行並べると 1 画面ぶんになるため */
@media (max-width: 767px) {
  [data-record] { padding: 14px 16px 12px; }
  .rec-where, .rec-sum, .rec-note, .rec-bar, .rec-draw { display: none; }
  .rec-total-m { display: inline; margin-left: auto; font: 700 13px var(--num); color: var(--ink); letter-spacing: 0; }
  .rec-empty { font-size: 12px; font-weight: 500; color: var(--muted); }
  .rec-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .rec-row { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 0; border-radius: 12px; }
  .rec-dot { width: 18px; height: 18px; }
  .rec-name { font-size: 10px; color: var(--note); }
  .rec-num { font-size: 13px; }
  .rec-num small { display: none; }
  .rec-sep { display: inline; }
}