/* Compendium browser page ("Papyrus Codex" restyle).

   Loaded only by compendium/browser.html, after compendium.css. Every rule is
   scoped to body.compendium-browser-page: Tech Tree and Combat Simulator also
   carry .compendium-page and share compendium.css, so nothing here may leak
   onto them. The include-special switch is the design-system .ps-switch
   (ds_patterns.css); this sheet only places it. */

.compendium-browser-page {
  /* Page-local values with no --site-* token. */
  --cb-panel-fill: rgba(25, 26, 27, 0.84);
  --cb-panel-inset: inset 0 0 0 2px rgba(8, 8, 9, 0.8), inset 0 0 0 3px rgba(213, 177, 101, 0.24);
  --cb-field-fill: rgba(30, 31, 32, 0.86);
  --cb-card-fill: rgba(32, 33, 35, 0.78);
  --cb-card-fill-hover: rgba(40, 41, 43, 0.84);
  --cb-card-fill-selected: rgba(49, 50, 53, 0.86);
  --cb-card-border: rgba(213, 177, 101, 0.34);
  --cb-card-border-hover: rgba(235, 199, 119, 0.6);
  --cb-card-border-selected: rgba(235, 199, 119, 0.76);
  --cb-row-rule: rgba(213, 177, 101, 0.16);
  --cb-text-strong: rgba(241, 228, 198, 0.84);
  --cb-text-summary: rgba(241, 228, 198, 0.66);
  --cb-ease: 170ms ease;
  /* Neutral graphite surfaces: the page's warm stone clashed with navy, so
     this page's panels and the DS chips/switch it uses are graphite. */
  --ps-chip-toggle-fill: rgba(32, 33, 35, 0.78);
  --ps-chip-toggle-fill-hover: rgba(40, 41, 43, 0.84);
  --ps-switch-track: rgba(8, 8, 9, 0.88);
}

body.compendium-browser-page {
  background:
    linear-gradient(180deg, rgba(9, 9, 10, 0.1), rgba(8, 8, 9, 0.86) 52%, #080809),
    image-set(
      url("../assets/optimized/images/backgrounds/background_greek.54a89b1fccd6.webp") type("image/webp"),
      url("../assets/images/backgrounds/background_greek.ab8118f02f0a.png") type("image/png")
    ) center top / cover fixed no-repeat,
    #080809;
}

.compendium-browser-page .compendium-shell {
  padding-top: clamp(0.5rem, 1.4vw, 1.25rem);
}

/* ---------- hero ---------- */

.compendium-browser-page .compendium-hero {
  display: flex;
  align-items: center;
  gap: 36px;
  padding: 24px 0 22px;
  border-bottom: 1px solid var(--site-border-strong);
}

.compendium-browser-page .compendium-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: max-content;
  max-width: 100%;
  margin-right: auto;
}

/* Drawn title hairline (the retired Header_Underline art is never used). */
.compendium-browser-page .compendium-hero-copy::after {
  content: "";
  height: 2px;
  background: rgba(235, 199, 119, 0.6);
}

.compendium-browser-page .compendium-hero-eyebrow {
  margin: 0;
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  line-height: 1.2;
  text-transform: uppercase;
}

.compendium-browser-page .compendium-hero h1 {
  margin: 0;
  color: var(--site-gold-strong);
  font-family: var(--site-font-title);
  font-size: 3.375rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.compendium-browser-page .compendium-search {
  flex: 0 1 520px;
  min-width: 0;
  margin: 0;
}

.compendium-browser-page .compendium-search-field {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 18px;
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-md);
  background: var(--cb-field-fill);
  box-shadow: inset 0 0 0 2px rgba(8, 8, 9, 0.8), inset 0 0 0 3px rgba(213, 177, 101, 0.22);
  transition: border-color var(--cb-ease);
}

.compendium-browser-page .compendium-search-field:focus-within {
  border-color: rgba(255, 228, 151, 0.92);
  outline: 2px solid rgba(245, 210, 128, 0.88);
  outline-offset: 3px;
}

/* Icon_Find.png (the header's search sprite) carries transparent padding, so
   22px renders the design's 18px magnifier. */
.compendium-browser-page .compendium-search-glyph {
  flex: none;
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.compendium-browser-page .compendium-search-field input {
  flex: 1 1 auto;
  min-width: 0;
  height: 52px;
  padding: 0;
  border: 0;
  outline: none;
  color: var(--site-text);
  background: none;
  font-family: var(--site-font-body);
  font-size: 1.125rem;
  -webkit-appearance: none;
  appearance: none;
}

.compendium-browser-page .compendium-search-field input::placeholder {
  color: var(--site-text-soft);
  opacity: 1;
}

.compendium-browser-page .compendium-tech-tree-medallion {
  display: grid;
  flex: none;
  place-items: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: url("../assets/images/compendium/ui/tech_tree_medallion_ring.d3dd239dcb5b.png") center / 100% 100% no-repeat;
  background: image-set(
    url("../assets/optimized/images/compendium/ui/tech_tree_medallion_ring.335d4dbc34b1.webp") type("image/webp"),
    url("../assets/images/compendium/ui/tech_tree_medallion_ring.d3dd239dcb5b.png") type("image/png")
  ) center / 100% 100% no-repeat;
  text-decoration: none;
  transition: filter var(--cb-ease), transform var(--cb-ease);
}

.compendium-browser-page .compendium-tech-tree-medallion img {
  display: block;
  width: 78.4%;
  height: 78.4%;
  border-radius: 50%;
  object-fit: cover;
}

.compendium-browser-page .compendium-tech-tree-medallion:hover {
  filter: brightness(1.14) saturate(1.06);
  transform: translateY(-1px);
}

.compendium-browser-page .compendium-tech-tree-medallion:focus-visible {
  outline-offset: 5px;
}

/* ---------- workspace ---------- */

.compendium-browser-page .compendium-workspace {
  display: grid;
  /* The design's 262px is the sidebar's content box; with its 16px padding
     and hairline it renders 296px wide. */
  grid-template-columns: 296px minmax(0, 1fr);
  gap: 22px;
  align-items: stretch;
  margin-top: 22px;
}

.compendium-browser-page .compendium-filters,
.compendium-browser-page .compendium-results-panel {
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-md);
  background: var(--cb-panel-fill);
  box-shadow: var(--cb-panel-inset);
}

/* ---------- browse sidebar ---------- */

.compendium-browser-page .compendium-filters {
  position: sticky;
  top: 1rem;
  display: flex;
  flex-direction: column;
  align-self: start;
  padding: 16px;
}

.compendium-browser-page .compendium-browse-heading {
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--site-border-strong);
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.2;
  text-transform: uppercase;
}

.compendium-browser-page .compendium-filter-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.compendium-browser-page .compendium-filter-button {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-bottom: 1px solid var(--cb-row-rule);
  border-radius: var(--site-radius-md);
  color: var(--cb-text-strong);
  background: none;
  font-family: var(--site-font-body);
  text-align: left;
  cursor: pointer;
  transition: background var(--cb-ease), box-shadow var(--cb-ease), color var(--cb-ease);
}

.compendium-browser-page .compendium-filter-list > li:last-child .compendium-filter-button {
  border-bottom-color: transparent;
}

.compendium-browser-page .compendium-filter-icon {
  flex: none;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.compendium-browser-page .compendium-filter-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1.0625rem;
  line-height: 1.2;
}

.compendium-browser-page .compendium-filter-count {
  flex: none;
  color: var(--site-text-soft);
  font-size: 0.9375rem;
}

.compendium-browser-page .compendium-filter-button:hover {
  background: rgba(255, 236, 176, 0.06);
  color: var(--site-text);
}

/* Active category: gold wash plus a 2px gold rail, the same selected-row
   treatment as the design-system index navigator ([aria-current] rail). */
.compendium-browser-page .compendium-filter-button[aria-pressed="true"] {
  background: rgba(232, 196, 111, 0.12);
  box-shadow: inset 2px 0 0 var(--site-gold);
  color: var(--site-gold-strong);
}

.compendium-browser-page .compendium-filter-button[aria-pressed="true"] .compendium-filter-count {
  color: var(--site-gold-strong);
}

.compendium-browser-page .compendium-filter-options {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--site-border-strong);
}

.compendium-browser-page .compendium-special-toggle {
  display: flex;
}

/* ---------- results ---------- */

.compendium-browser-page .compendium-results-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
}

.compendium-browser-page .compendium-results-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--site-border-strong);
}

.compendium-browser-page .compendium-results-header h2 {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--site-gold-strong);
  font-family: var(--site-font-title);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.compendium-browser-page .compendium-results-count {
  flex: none;
  margin: 0 0 0 auto;
  color: rgba(241, 228, 198, 0.64);
  font-size: 0.9375rem;
  white-space: nowrap;
}

.compendium-browser-page .compendium-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.compendium-browser-page .compendium-card {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--cb-card-border);
  border-radius: var(--site-radius-md);
  color: inherit;
  background: var(--cb-card-fill);
  box-shadow: inset 0 0 0 2px rgba(8, 8, 9, 0.72);
  font-family: var(--site-font-body);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--cb-ease),
    border-color var(--cb-ease),
    background var(--cb-ease),
    box-shadow var(--cb-ease);
}

.compendium-browser-page .compendium-card-icon {
  flex: none;
  width: 58px;
  height: 58px;
  border: 1px solid rgba(213, 177, 101, 0.4);
  border-radius: var(--site-radius-sm);
  background: rgba(0, 0, 0, 0.24);
  object-fit: contain;
  transition: border-color var(--cb-ease);
}

.compendium-browser-page .compendium-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}

.compendium-browser-page .compendium-card-kind {
  color: var(--site-gold);
  font-family: var(--site-font-title);
  font-size: 0.625rem;
  letter-spacing: 0.2em;
  line-height: 1.35;
  text-transform: uppercase;
}

.compendium-browser-page .compendium-card-name {
  color: var(--site-gold-strong);
  font-family: var(--site-font-title);
  font-size: 1.1875rem;
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.compendium-browser-page .compendium-card-summary {
  display: -webkit-box;
  overflow: hidden;
  color: var(--cb-text-summary);
  font-size: 0.875rem;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.compendium-browser-page .compendium-card:hover,
.compendium-browser-page .compendium-card:focus-visible {
  border-color: var(--cb-card-border-hover);
  background: var(--cb-card-fill-hover);
  transform: translateY(-1px);
}

/* The card whose details are open in the modal (set by compendium.js). */
.compendium-browser-page .compendium-card.is-selected,
.compendium-browser-page .compendium-card[aria-current="true"] {
  border-color: var(--cb-card-border-selected);
  background: var(--cb-card-fill-selected);
  box-shadow:
    inset 0 0 0 2px rgba(8, 8, 9, 0.72),
    inset 0 0 0 3px rgba(235, 199, 119, 0.3);
}

.compendium-browser-page .compendium-card.is-selected .compendium-card-icon,
.compendium-browser-page .compendium-card[aria-current="true"] .compendium-card-icon {
  border-color: rgba(235, 199, 119, 0.7);
}

.compendium-browser-page .compendium-card.is-selected .compendium-card-kind,
.compendium-browser-page .compendium-card[aria-current="true"] .compendium-card-kind {
  color: var(--site-gold-strong);
}

.compendium-browser-page .compendium-card.is-selected .compendium-card-summary,
.compendium-browser-page .compendium-card[aria-current="true"] .compendium-card-summary {
  color: rgba(241, 228, 198, 0.8);
}

/* ---------- units refine ---------- */

/* The chips are the design-system toggle chip (.ps-chip--toggle,
   ds_patterns.css); this sheet only lays out the row and its label. */
.compendium-browser-page .compendium-refine {
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(213, 177, 101, 0.22);
}

.compendium-browser-page .compendium-refine-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.compendium-browser-page .compendium-refine-label {
  flex: none;
  color: rgba(241, 228, 198, 0.6);
  font-family: var(--site-font-title);
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* ---------- load more ---------- */

/* #compendiumResults holds the grid and the "Load more" footer; the gap
   matches the panel's own 14px rhythm. */
.compendium-browser-page .compendium-results-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 14px;
}

.compendium-browser-page .compendium-results-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--site-border-strong);
}

.compendium-browser-page .compendium-results-footer[hidden] {
  display: none;
}

.compendium-browser-page .compendium-load-more {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border: 1px solid var(--site-border-strong);
  border-radius: var(--site-radius-md);
  color: var(--site-gold-strong);
  background: rgba(232, 196, 111, 0.12);
  box-shadow: inset 0 0 0 2px rgba(8, 8, 9, 0.7);
  font-family: var(--site-font-title);
  font-size: 0.875rem;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--cb-ease), border-color var(--cb-ease), opacity var(--cb-ease);
}

.compendium-browser-page .compendium-load-more:hover,
.compendium-browser-page .compendium-load-more:focus-visible {
  border-color: var(--cb-card-border-selected);
  color: var(--site-gold-strong);
  background: rgba(232, 196, 111, 0.2);
}

/* htmx marks the link while its page is loading. */
.compendium-browser-page .compendium-load-more.htmx-request {
  opacity: 0.64;
  cursor: progress;
}

/* ---------- responsive ---------- */

@media (max-width: 1200px) {
  .compendium-browser-page .compendium-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .compendium-browser-page .compendium-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "copy copy"
      "search medallion";
    gap: 18px 20px;
    padding-top: 12px;
  }

  .compendium-browser-page .compendium-hero-copy {
    grid-area: copy;
  }

  .compendium-browser-page .compendium-search {
    grid-area: search;
  }

  .compendium-browser-page .compendium-tech-tree-medallion {
    grid-area: medallion;
    width: 72px;
    height: 72px;
  }

  .compendium-browser-page .compendium-workspace {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    margin-top: 18px;
  }

  .compendium-browser-page .compendium-filters {
    position: static;
  }

  .compendium-browser-page .compendium-filter-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
  }

  /* Two columns: only the final row loses its separator. */
  .compendium-browser-page .compendium-filter-list > li:nth-last-child(2):nth-child(odd) .compendium-filter-button {
    border-bottom-color: transparent;
  }
}

@media (max-width: 620px) {
  .compendium-browser-page .compendium-shell {
    width: calc(100% - 2rem);
  }

  .compendium-browser-page .compendium-hero {
    gap: 14px 14px;
    padding-bottom: 18px;
  }

  .compendium-browser-page .compendium-hero h1 {
    font-size: clamp(2.25rem, 11vw, 3.375rem);
  }

  .compendium-browser-page .compendium-search-field {
    height: 50px;
    padding: 0 14px;
  }

  .compendium-browser-page .compendium-search-field input {
    height: 48px;
    font-size: 1rem;
  }

  .compendium-browser-page .compendium-tech-tree-medallion {
    width: 56px;
    height: 56px;
  }

  .compendium-browser-page .compendium-filters {
    padding: 14px;
  }

  /* A phone is too narrow for two category columns with icons and counts. */
  .compendium-browser-page .compendium-filter-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .compendium-browser-page .compendium-filter-list > li:nth-last-child(2):nth-child(odd) .compendium-filter-button {
    border-bottom-color: var(--cb-row-rule);
  }

  .compendium-browser-page .compendium-results-panel {
    padding: 14px;
  }

  .compendium-browser-page .compendium-results-header h2 {
    font-size: 1.25rem;
  }

  .compendium-browser-page .compendium-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Eight chips would wrap to four rows here, pushing the first result below
     the fold; they become one horizontally scrolling strip instead (the cut
     chip at the edge shows there is more). The 6px padding, cancelled by the
     negative margin, keeps focus rings inside the scroll clip. */
  .compendium-browser-page .compendium-refine-row {
    flex-wrap: nowrap;
    margin: -6px;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(213, 177, 101, 0.4) transparent;
    scrollbar-width: thin;
  }
}

@media (prefers-reduced-motion: reduce) {
  .compendium-browser-page .compendium-tech-tree-medallion,
  .compendium-browser-page .compendium-card,
  .compendium-browser-page .compendium-card-icon,
  .compendium-browser-page .compendium-filter-button,
  .compendium-browser-page .compendium-search-field,
  .compendium-browser-page .compendium-load-more {
    transition: none;
  }

  .compendium-browser-page .compendium-tech-tree-medallion:hover,
  .compendium-browser-page .compendium-card:hover,
  .compendium-browser-page .compendium-card:focus-visible {
    transform: none;
  }
}