/* The Hall (#/hall, #/hall/item/:id, #/hall/hand-in/:id): finished traits and keys on paper cards, credited. Never
   the brand yellow, never ordered by people. Cards are paper in both themes (like the bounty posters), so they set their
   own ink. Live is cobalt, a finished set gets an ice ribbon. The Nice one press hops once, not under reduced motion. */

:root { --hl-paper: #FFFDF8; --hl-paper-ink: #05083C; --hl-paper-edge: #E6E1D3; --hl-live: var(--cobalt); --hl-ribbon: #BFE3F2; --hl-ribbon-line: transparent; }
:root[data-theme="dark"] { --hl-paper: #FFFDF8; --hl-paper-ink: #05083C; --hl-paper-edge: #CFC8B5; --hl-live: #8C94FF; --hl-ribbon: #BFE3F2; --hl-ribbon-line: var(--line); }

.view[data-page="hall"] { --locky: url(/img/locky-pencil.png); --locky-shows: block; }

.chip.hl-live { --chip-face: var(--face-blue); }
.chip.hl-over { --chip-face: var(--face-sky); }
.chip.hl-drawn { --chip-face: var(--face-lav); }
.chip.hl-hidden { --chip-face: var(--face-grey); }

.hl-totals { margin: -4px 0 14px; font-weight: 700; }
.hl-tabs { margin-bottom: 12px; }
.hl-tabs a { text-decoration: none; display: inline-flex; align-items: center; }
.hl-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 16px; }
.hl-filters select, .hl-filters input { width: auto; flex: 0 1 190px; max-width: 100%; min-width: 0; }
.hl-filters input[type="search"] { flex-basis: 220px; }

/* ---------- cards */

.hl-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hl-card {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 10px 10px 12px; border-radius: 6px;
  background: var(--hl-paper); color: var(--hl-paper-ink); border: 1.5px solid var(--hl-paper-edge); box-shadow: 0 3px 0 var(--keyline);
}
.hl-card p { margin: 0; }
.hl-card .muted { color: #4D5285; }
.hl-card-link { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.hl-card-link:hover .hl-card-title { text-decoration: underline; }
.hl-card-title { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.hl-paper { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 4px; background: #F4F1E8; overflow: hidden; }
.hl-paper img { width: 100%; height: 100%; object-fit: contain; }
.hl-paper-big { max-width: 360px; width: 100%; }
.hl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-by { overflow-wrap: anywhere; }
.hl-limited { font-size: 11.5px; }
.hl-card-foot { margin-top: auto; display: flex; justify-content: flex-start; }
.hl-yours { font-size: 12.5px; font-weight: 700; color: #4D5285; }
.hl-cheer.is-on { --btn-face: var(--face-sky); }
.hl-hop { animation: hl-hop .35s ease-out 1; }
@keyframes hl-hop { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-4px); } }
.hl-more { display: flex; justify-content: center; margin: 18px 0; }
.hl-more [hidden] { display: none; }

/* ---------- sets */

.hl-shelves { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hl-shelf { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: var(--radius); background: var(--surface); border: 1.5px solid var(--line-strong); }
.hl-shelf p, .hl-shelf h3 { margin: 0; }
.hl-shelf-name { font-size: 16px; overflow-wrap: anywhere; }
.hl-shelf-pics { display: flex; flex-wrap: wrap; gap: 4px; min-height: 56px; }
.hl-shelf-pics img { width: 48px; height: 48px; object-fit: contain; border-radius: 4px; background: #F4F1E8; }
.hl-ribbon { position: absolute; top: 10px; right: -4px; padding: 2px 10px; background: var(--hl-ribbon); color: #05083C; font-size: 12px; font-weight: 800; border: 1px solid var(--hl-ribbon-line); border-radius: 4px 0 0 4px; }

/* ---------- an entry */

.hl-entry-head { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 16px; }
.hl-entry-facts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.hl-entry-facts p { margin: 0; }
.hl-links { display: flex; flex-wrap: wrap; gap: 8px; }
.hl-makers li, .hl-notes li { padding: 4px 0; }
.hl-story { margin: 0; padding-left: 18px; }
.hl-story li { padding: 2px 0; }
.hl-act { margin: 8px 0; }
.hl-act summary, .hl-owner summary { cursor: pointer; font-weight: 700; }
.hl-form { display: grid; gap: 8px; max-width: 420px; padding: 8px 0; }
.hl-asks li, .plain-list.hl-asks li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 0; }
.hl-ask p { margin: 0; }
.hl-ask-btns { display: flex; gap: 8px; }
.hl-hidden-panel summary { cursor: pointer; }

@media (max-width: 720px) {
  .hl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .hl-entry-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 380px) {
  .hl-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .hl-hop { animation: none; }
}