.grader-pick {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px 28px;
  align-items: start;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 1000px) {
  .grader-pick { grid-template-columns: minmax(0, 1fr); }
}
.grader-pick .field { margin: 0; }
.pick-search { position: relative; }
.pick-results { list-style: none; margin: 4px 0 0; padding: 0; }
.pick-results button {
  display: block;
  width: 100%;
  padding: 6px 10px;
  font: inherit;
  text-align: left;
  color: var(--text);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.pick-results button:hover, .pick-results button:focus-visible { background: rgb(255 255 255 / 0.05); }
.result-name[data-quality="unique"] { color: var(--q-unique); }
.result-name[data-quality="set"] { color: var(--q-set); }
.pick-results .dim, .grade-item .dim { color: var(--text-dim); font-size: var(--step--1); }
#screenshot .ocr { margin: 0; }

/* ---- The item and its score ---- */

.grade-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
  gap: 24px;
  align-items: start;
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .grade-layout { grid-template-columns: minmax(0, 1fr); }
  .grade-score { order: -1; }
}
.grade-head { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; }
.grade-head p { margin: 2px 0 0; }
.grade-name { font-size: var(--step-3); }
.grade-name[data-quality="unique"] { color: var(--q-unique); }
.grade-name[data-quality="set"] { color: var(--q-set); }

.stats { list-style: none; margin: 0; padding: 0; }
.stat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 6px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-variant-numeric: lining-nums tabular-nums;
}
.stat:first-child { border-top: 0; }
.stat-counts { margin: 0; }
.stat-text { color: var(--q-magic); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.stat-text .dim { font-size: var(--step--1); }
.roll-input { width: 5.5rem; padding: 4px 8px; }
.stat.ignored .stat-text, .stat.ignored .meter, .stat.ignored .stat-pct { opacity: 0.4; }
.stat-pct { text-align: right; }
/* The bar sits under its stat line, the percentage beside it. */
.stat .meter { grid-column: 2; grid-row: 2; }
.stat .stat-pct { grid-column: 3; grid-row: 2; }

/* How far along its range a stat rolled. */
.meter { display: block; height: 8px; background: var(--tooltip); border: 1px solid #3b3b3b; border-radius: 4px; overflow: hidden; }
.meter-fill { display: block; height: 100%; width: 0; background: var(--q-socketed); transition: width 120ms ease-out; }
.meter-fill[data-level="low"] { background: var(--q-red); }
.meter-fill[data-level="mid"] { background: var(--q-crafted); }
.meter-fill[data-level="high"] { background: var(--q-unique); }
.meter-fill[data-level="max"] { background: var(--q-set); }
@media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

.fixed { margin-top: 14px; color: var(--text-dim); }
.fixed summary { cursor: pointer; font-size: var(--step--1); }
.fixed ul { margin: 6px 0 0; padding-left: 18px; font-size: var(--step--1); }

.grade-score { text-align: center; position: sticky; top: calc(var(--topbar-height) + 16px); }
.score-number {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-6);
  line-height: 1;
  color: var(--text-dim);
  font-variant-numeric: lining-nums tabular-nums;
}
.score-number[data-label="Perfect"] { color: var(--q-set); }
.score-number[data-label="Excellent"], .score-number[data-label="Great"] { color: var(--q-unique); }
.score-number[data-label="Good"] { color: var(--q-crafted); }
.score-number[data-label="Below average"], .score-number[data-label="Low"] { color: var(--q-red); }
.score-label { margin: 6px 0 14px; font-family: var(--font-display); font-size: var(--step-1); }
.score-detail p { margin: 0 0 6px; }
.score-detail .dim { color: var(--text-dim); font-size: var(--step--1); }
.save { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }
.save:empty { display: none; }
.save-link { font-size: var(--step--1); }

/* ---- Your items, graded ---- */

.graded-list h2 { font-size: var(--step-2); margin-bottom: 4px; }
.graded-table { width: 100%; max-width: 56rem; border-collapse: collapse; margin-top: 12px; font-variant-numeric: lining-nums tabular-nums; }
.graded-table th { text-align: left; font-weight: 500; font-size: var(--step--1); color: var(--text-dim); padding: 0 12px 6px 0; }
.graded-table td { padding: 6px 12px 6px 0; border-top: 1px solid var(--line); }
.graded-table .num { text-align: right; }
.graded-table .dim { color: var(--text-dim); }
.graded-table .link-button { text-decoration: none; text-align: left; }
.graded-table .link-button[data-quality="set"] { color: var(--q-set); }