.bar {
  display: flex; gap: 20px; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.progress { text-align: right; font-size: 0.86rem; color: var(--muted); min-width: 170px; }
.progress strong { color: var(--ink); font-size: 1.1rem; }
.meter { height: 6px; background: var(--bg3); border-radius: 99px; margin: 5px 0 3px; overflow: hidden; }
.meter span { display: block; height: 100%; background: var(--green); transition: width 0.2s; }

.filters {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 14px 0; position: sticky; top: 0; background: var(--bg); z-index: 4;
}
.filters button { font-size: 0.83rem; }
.filters button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.tally { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; font-size: 0.74rem; color: var(--muted); }
.tally .t { padding: 2px 7px; border-radius: 99px; background: var(--bg3); white-space: nowrap; }
.tally .t5, .tally .t4 { color: var(--green); }
.tally .t2, .tally .t1 { color: var(--red); }

.rows { list-style: none; margin: 0; padding: 0; }
.heading {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); padding: 22px 2px 8px; display: flex; gap: 8px; align-items: center;
}
.heading .binder {
  background: var(--accent); color: #fff; padding: 1px 6px; border-radius: 4px;
  font-size: 0.68rem; letter-spacing: 0.04em;
}

.row {
  display: flex; gap: 14px; align-items: center; justify-content: space-between;
  padding: 9px 12px; margin-bottom: 4px;
  background: var(--bg2); border: 1px solid transparent; border-radius: var(--radius);
}
.row.active { border-color: var(--accent); }
.row.rated { background: color-mix(in srgb, var(--green) 7%, var(--bg2)); }
.row.never-tried { background: var(--bg3); }
.meta { display: flex; gap: 10px; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.ref {
  font-variant-numeric: tabular-nums; font-size: 0.72rem; color: var(--muted);
  background: var(--bg3); padding: 2px 6px; border-radius: 4px; white-space: nowrap;
}
.ref.none { opacity: 0.4; }
.name { font-weight: 600; font-size: 0.93rem; }
.facts { font-size: 0.76rem; color: var(--muted); }

.stars { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.stars button {
  min-width: 34px; height: 30px; padding: 0; font-size: 0.82rem; font-variant-numeric: tabular-nums;
}
/* The chosen rating is coloured by what it MEANS. Every "on" state being green said a
   2-star "probably don't bother" was a good result. */
.stars button.on { font-weight: 700; color: #0d1f16; }
.stars button.on[data-rate="5"],
.stars button.on[data-rate="4"] { background: var(--green); border-color: var(--green); }
.stars button.on[data-rate="3"] { background: var(--muted); border-color: var(--muted); }
.stars button.on[data-rate="2"],
.stars button.on[data-rate="1"] { background: var(--red); border-color: var(--red); color: #2a0f0d; }
.stars .never { min-width: auto; padding: 0 9px; font-size: 0.74rem; color: var(--muted); white-space: nowrap; }
.stars .never.on { background: var(--muted); border-color: var(--muted); color: var(--bg); }
.stars .clear { min-width: 26px; color: var(--muted); }

@media (max-width: 620px) {
  .row { flex-direction: column; align-items: stretch; gap: 8px; }
  .stars { justify-content: space-between; }
  .stars button { flex: 1; height: 38px; }
  .stars .never { flex: 0 0 auto; padding: 0 12px; }
}
.heading .resumed{font-size:.62rem;font-weight:600;letter-spacing:.04em;color:var(--muted);background:var(--bg3);padding:1px 6px;border-radius:99px;text-transform:none}
.filters input[type=search] { flex:1 1 240px; min-width:180px; padding:6px 10px; font:inherit; font-size:.85rem;
  color:var(--ink); background:var(--bg3); border:1px solid var(--line); border-radius:8px; }
.filters input[type=search]:focus { outline:none; border-color:var(--accent); }
.none { color:var(--muted); padding:28px 2px; }