/* Roll of Honour panel: a fixed header (search, sort, A-Z) over a scrolling list. */
.roll-panel { width: min(1120px, 95vw); height: 94vh; max-height: 94vh; }
.roll-panel .about-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 20px 32px 8px;
}
.roll-intro { margin: 4px 0 4px; }
.roll-key { margin: 0 0 12px; font-size: 0.9em; color: var(--ink-soft); }

.roll-tools { display: flex; align-items: center; gap: 18px; }
.roll-search {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  font: 20px/1.3 'EB Garamond', Georgia, serif;
  color: var(--ink);
  background: #fffaf0;
  border: 2px solid var(--ink-soft);
  border-radius: 6px;
}
.roll-search:focus { outline: 3px solid var(--poppy); outline-offset: 1px; border-color: var(--ink); }
body.popup .roll-search { user-select: text; -webkit-user-select: text; }
.roll-sorts { display: flex; align-items: center; gap: 6px; font: 600 14px 'Cinzel', serif; color: var(--ink-soft); }
.roll-sorts > span { margin-right: 4px; }
.roll-sort {
  min-height: 44px;
  padding: 6px 14px;
  font: 600 15px 'Cinzel', serif;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink-soft);
  border-radius: 999px;
  cursor: pointer;
}
.roll-sort[aria-pressed="true"] { color: #fff6e0; background: var(--poppy); border-color: var(--poppy); }

/* Letters (or years) to jump through the list without typing. */
.roll-jump { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 8px; }
.roll-jump-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  font: 700 16px 'Cinzel', serif;
  color: var(--ink);
  background: #fffaf0;
  border: 1px solid rgba(43, 29, 16, 0.35);
  border-radius: 4px;
  cursor: pointer;
}
.roll-jump-btn:disabled { opacity: 0.3; cursor: default; }

/* Photo | Name | Died | Served with | Home, then the Report button. */
.roll-columns > div,
.roll-person { display: grid; grid-template-columns: 48px 2.1fr 1.25fr 2fr 2fr; gap: 0 14px; }
.roll-columns {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--paper-light);
  border-bottom: 2px solid var(--ink);
}
.roll-columns > div {
  padding: 6px 8px;
  font: 600 12px 'Cinzel', serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.roll-list {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.roll-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 140px;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(43, 29, 16, 0.18);
}
.roll-row[hidden] { display: none; }
.roll-person {
  min-height: 56px;
  padding: 8px;
  font: 17px/1.25 'EB Garamond', Georgia, serif;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
}
@media (hover: hover) { .roll-person:hover { background: rgba(184, 18, 27, 0.07); } }
.roll-person:active { background: rgba(184, 18, 27, 0.14); }
.roll-person > span { min-width: 0; overflow-wrap: anywhere; }
/* Small photo, no taller than the row's own text needs. */
.roll-thumb {
  align-self: start;
  width: 48px;
  height: 56px;
  object-fit: cover;
  object-position: center top;
  background: #2b1d10;
  border: 2px solid #fffaf0;
  box-shadow: 0 1px 4px rgba(40, 20, 0, 0.35);
}
.roll-thumb.none { background: transparent; border-color: transparent; box-shadow: none; }
.roll-person small { display: block; font-size: 15px; color: var(--ink-soft); }
.roll-name strong { font: 700 18px 'Cinzel', serif; }
.roll-home.unknown { font-style: italic; color: var(--ink-soft); }
.roll-report {
  justify-self: end;
  min-height: 40px;
  padding: 4px 12px;
  font: 600 13px 'Cinzel', serif;
  color: var(--poppy);
  background: transparent;
  border: 1px solid rgba(184, 18, 27, 0.5);
  border-radius: 999px;
  cursor: pointer;
}
@media (hover: hover) { .roll-report:hover { background: rgba(184, 18, 27, 0.08); } }

.roll-empty { margin: 24px 8px; font-style: italic; color: var(--ink-soft); }
.roll-count { padding-top: 6px; font-size: 15px; color: var(--ink-soft); }