/* Awards occupy their own row. Nothing is positioned over listing text. */
html body details.pick-award { margin: 0 0 12px; width: 100%; min-width: 0; }
html body .pick-award > summary {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px;
  width: fit-content; max-width: 100%; margin: 0 0 0 auto; padding: 4px;
  min-height: 56px; list-style: none; cursor: pointer; border: 0; background: none;
  color: var(--ink); font-weight: 600; text-align: right;
}
.pick-award > summary::-webkit-details-marker { display: none; }
.pick-award > summary:focus-visible { outline: var(--stroke-thick) solid var(--deep); outline-offset: 4px; }
.pick-caption { min-width: 0; font: 600 .8125rem/1.4 var(--sans); overflow-wrap: anywhere; }
.pick-caption > span { display: block; font-size: .75rem; font-weight: 400; text-decoration: underline; text-underline-offset: 3px; }
.pick-medal {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  flex: 0 0 3rem; width: 3rem; min-height: 3.75rem; padding: 4px 0 12px;
  color: inherit; background: transparent;
  font: 700 1.125rem/1 var(--pixel);
}
.pick-medal svg { display: block; width: 1.5rem; height: 1.5rem; flex: 0 0 1.5rem; shape-rendering: crispEdges; }
.pick-award { --rank-fill: var(--accent); --rank-ink: var(--accent); --rank-border: url('/assets/stone-border-rank-1.svg'); }
[data-pick-rank="2"] { --rank-fill: var(--accent-soft); --rank-ink: var(--accent); --rank-border: url('/assets/stone-border-rank-2.svg'); }
[data-pick-rank="3"] { --rank-fill: var(--accent); --rank-ink: var(--accent); --rank-border: url('/assets/stone-border-rank-3.svg'); }
[data-pick-rank="4"] { --rank-fill: var(--accent-soft); --rank-ink: var(--accent); --rank-border: url('/assets/stone-border-rank-4.svg'); }
[data-pick-rank="5"] { --rank-fill: var(--accent-soft); --rank-ink: var(--accent); --rank-border: url('/assets/stone-border-rank-5.svg'); }
html body .pick-reason { padding: 12px; margin-top: 12px; background: var(--paper); border-left: var(--stroke-thick) solid var(--frame-ink); text-align: left; }
html body .pick-reason p { margin: 8px 0 0; }
html body .pick-reason strong { font-size: .875rem; }
@media (forced-colors: active) {
  .pick-award { --rank-fill: Canvas; --rank-ink: CanvasText; --rank-border: none; }
  .pick-medal { clip-path: none; background: Canvas; color: CanvasText; border: var(--stroke-thin) solid CanvasText; }
}

.pick-reason, .explore-card { overflow-wrap: anywhere; }