/* Codex record cards */
.codex-list {
  display: grid;
  gap: 10px;
  margin: 12px 0 22px;
}

.codex-record-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 12px 15px;
}

.codex-record-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.codex-record-title {
  font-family: 'Marcellus SC', Georgia, serif;
  font-size: 1.08rem;
  color: #2f1d10;
}

.codex-record-meta {
  font-family: 'Spectral', Georgia, serif;
  font-size: 1rem;
  opacity: 0.78;
}

.codex-record-arrow {
  font-family: 'Marcellus SC', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1;
  opacity: 0.7;
}

/* Codex filter controls */
.codex-filter-row {
  display: flex;
  gap: 14px;
  margin: 0 0 22px;
  align-items: end;
  flex-wrap: wrap;
}

.codex-filter-row label {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  
  gap: 5px;

  font-family: 'Marcellus SC', Georgia, serif;
  font-size: 0.92rem;
  letter-spacing: 0.04em;
  color: rgba(58, 38, 20, 0.82);
}

.codex-filter-row select {
  min-width: 160px;

  padding: 9px 12px;

  border-radius: 10px;
  border: 1px solid rgba(94, 55, 22, 0.36);

  background:
    linear-gradient(
      rgba(255, 231, 174, 0.70),
      rgba(166, 108, 41, 0.26)
    );

  color: #3a2614;

  font-family: 'Spectral', Georgia, serif;
  font-size: 1.05rem;

  box-shadow:
    inset 0 1px 3px rgba(255, 241, 202, 0.35),
    0 2px 8px rgba(45, 25, 8, 0.10);
}

.codex-filter-row select:focus {
  outline: none;
  border-color: rgba(94, 55, 22, 0.58);
}

#codex-content.codex-list-page,
#codex-content.codex-search-page {
  overflow: hidden;
}

.codex-list-page-shell {
  height: calc(100vh - 285px);
  min-height: 0;

  display: flex;
  flex-direction: column;
}

.codex-list-control-split-view {
  flex: 1 1 auto;
  min-height: 0;

  display: grid;
  grid-template-columns: var(--codex-rail-width, 190px) minmax(0, 1fr);
  gap: 18px;

  overflow: hidden;
}

.codex-list-control-rail {
  min-height: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.codex-audit-rail-block {
  display: grid;
  gap: 8px;
  width: 100%;
  max-height: 48%;
  overflow: auto;
  margin-top: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(70, 47, 24, 0.28);
}

.codex-audit-rail-heading {
  cursor: default;
}

.codex-audit-index-button {
  width: calc(100% - 8px);
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 auto;
  margin: 0 4px 12px;
  padding: 8px 10px;
  border: 1px solid rgba(70, 47, 24, 0.34);
  background: rgba(255, 249, 235, 0.45);
  color: #26190f;
  font-family: "Marcellus SC", serif;
  cursor: pointer;
}

.codex-audit-list {
  display: grid;
  gap: 8px;
}

.codex-audit-entry {
  display: grid;
  gap: 3px;
  width: 100%;
  padding: 7px 8px;
  border: 1px solid rgba(70, 47, 24, 0.22);
  background: rgba(255, 249, 235, 0.34);
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.codex-audit-entry strong {
  font-size: 0.78rem;
  font-weight: 600;
}

.codex-audit-entry span,
.codex-audit-empty {
  margin: 0;
  color: rgba(47, 29, 16, 0.72);
  font-size: 0.72rem;
}

.codex-audit-metadata-list {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 10px;
  margin: 12px 0 0;
}

.codex-audit-metadata-list dt {
  font-family: "Marcellus SC", serif;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.codex-audit-metadata-list dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
}

.codex-audit-modal-subhead {
  margin: 12px 0 0;
  font-family: "Marcellus SC", serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.codex-list-controls-shell {
  flex: 0 0 auto;
  width: 100%;

  padding-bottom: 0;
}

.codex-mobile-filter-toggle,
.codex-mobile-controls-overlay,
.codex-mobile-controls-heading,
.codex-mobile-controls-apply {
  display: none;
}

.codex-list-scroll-shell {
  min-height: 0;

  overflow-y: auto;

  padding-right: 10px;
  padding-bottom: 24px;
}

.codex-list-control-rail .codex-mobile-controls-panel {
  width: 100%;
}

.codex-list-control-rail .codex-filter-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;

  margin: 0;

  border-top: 1px solid rgba(72, 43, 18, 0.20);
  border-bottom: 1px solid rgba(255, 241, 202, 0.18);
}

.codex-list-control-rail .codex-filter-row label,
.codex-list-control-rail .codex-dynamic-filter,
.codex-list-control-rail .codex-sort-label,
.codex-list-control-rail .codex-hex-region-filter-panel {
  width: 100%;
  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 4px;

  margin: 0;
  padding: 10px 0 12px;

  border-bottom: 1px solid rgba(72, 43, 18, 0.16);

  font-family: 'Marcellus SC', Georgia, serif;
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.065em;
  text-transform: uppercase;

  color: rgba(47, 29, 16, 0.78);
}

.codex-list-control-rail .codex-filter-row label:last-child,
.codex-list-control-rail .codex-sort-label:last-child,
.codex-list-control-rail .codex-hex-region-filter-panel:last-child {
  border-bottom: 0;
}

.codex-list-control-rail .codex-sort-label {
  margin-left: 0;
}

.codex-sort-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.codex-list-control-rail .codex-filter-row select,
.codex-list-control-rail .codex-dynamic-filter select:not(.codex-filter-field-select),
.codex-list-control-rail .codex-sort-label select {
  width: 100%;
  min-width: 0;
  max-width: none;

  padding: 7px 8px;

  border-radius: 3px;
  border: 1px solid rgba(72, 43, 18, 0.24);

  background:
    rgba(246, 232, 196, 0.46);

  color: #2f1d10;

  font-family: 'Spectral', Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.15;

  box-shadow: none;
}

.codex-list-control-rail .codex-dynamic-filter select:not(.codex-filter-field-select):hover,
.codex-list-control-rail .codex-dynamic-filter select:not(.codex-filter-field-select):focus-visible,
.codex-list-control-rail .codex-sort-label select:hover,
.codex-list-control-rail .codex-sort-label select:focus-visible {
  background: rgba(94, 55, 22, 0.10);
  border-color: rgba(72, 43, 18, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.22),
    0 1px 4px rgba(45, 25, 8, 0.10);
}

.codex-sort-direction {
  appearance: none;
  -webkit-appearance: none;

  height: 34px;
  min-height: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0 8px;

  border-radius: 8px;
  border: 1px solid rgba(94, 55, 22, 0.32);

  background:
    linear-gradient(
      rgba(255, 231, 174, 0.78),
      rgba(166, 108, 41, 0.32)
    );

  color: #3a2614;

  font-family: 'Marcellus SC', Georgia, serif;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;

  cursor: pointer;

  box-shadow:
    inset 0 1px 2px rgba(255, 241, 202, 0.35),
    0 1px 4px rgba(45, 25, 8, 0.10);

  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.12s ease;
}

.codex-list-control-rail .codex-sort-direction,
.codex-list-control-rail .codex-filter-field-select {
  height: 28px;
  min-height: 0;

  padding: 0 7px;

  border-radius: 3px;
  border: 1px solid rgba(72, 43, 18, 0.24);

  background: rgba(246, 232, 196, 0.46);
  color: #2f1d10;

  font-size: 0.62rem;
  box-shadow: none;
}

.codex-list-control-rail .codex-filter-field-select {
  width: 70%;
  max-width: 70%;
  align-self: flex-start;

  padding: 0 19px 0 6px;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1L4 4L7 1' fill='none' stroke='%233a2614' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: rgba(246, 232, 196, 0.46);
  background-position: calc(100% - 7px) center;
  background-size: 8px 5px;
  background-repeat: no-repeat;

  font-size: 0.56rem;
  letter-spacing: 0.035em;
}

.codex-sort-direction:hover,
.codex-list-control-rail select:hover,
.codex-list-control-rail .codex-sort-direction:hover {
  background: rgba(94, 55, 22, 0.10);
  border-color: rgba(72, 43, 18, 0.38);
}

.codex-list-control-rail .codex-filter-field-select:hover,
.codex-list-control-rail .codex-filter-field-select:focus-visible {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1L4 4L7 1' fill='none' stroke='%233a2614' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-color: rgba(94, 55, 22, 0.10);
  background-position: calc(100% - 7px) center;
  background-size: 8px 5px;
  background-repeat: no-repeat;
  border-color: rgba(72, 43, 18, 0.38);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 220, 0.22),
    0 1px 4px rgba(45, 25, 8, 0.10);
}

.codex-sort-direction:active {
  transform: scale(0.96);
}

.codex-dynamic-filter {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 6px;

  overflow: visible;
}

.codex-filter-row .codex-filter-field-select {
  appearance: none;
  -webkit-appearance: none;

  display: block;

  height: 34px;
  min-height: 0;

  width: auto;
  min-width: 0;

  padding: 0 28px 0 8px;

  border-radius: 8px;
  border: 1px solid rgba(94, 55, 22, 0.32);

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M1 1.2L4.5 4.8L8 1.2' fill='none' stroke='%233a2614' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
    linear-gradient(
      rgba(255, 231, 174, 0.78),
      rgba(166, 108, 41, 0.32)
    );
  background-position:
    calc(100% - 13px) center,
    0 0;
  background-size:
    9px 6px,
    100% 100%;
  background-repeat: no-repeat;

  color: #3a2614;

  font-family: 'Marcellus SC', Georgia, serif;
  font-size: 0.68rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;

  cursor: pointer;

  box-shadow:
    inset 0 1px 2px rgba(255, 241, 202, 0.35),
    0 1px 4px rgba(45, 25, 8, 0.10);
}

.codex-dynamic-filter .codex-filter-field-select {
  width: 70%;
  max-width: 70%;
  align-self: flex-start;

  padding-left: 6px;
  padding-right: 19px;

  background-position:
    calc(100% - 7px) center,
    0 0;
  background-size:
    8px 5px,
    100% 100%;

  font-size: 0.61rem;
  letter-spacing: 0.035em;
}

.codex-filter-field-select,
.codex-dynamic-filter select,
.codex-sort-label select {
  color-scheme: light;
  background-color: #ecd6a7;
}

.codex-hex-list-control-rail {
  overflow: hidden;
}

.codex-hex-list-control-rail .codex-list-controls-shell,
.codex-hex-list-control-rail .codex-mobile-controls-panel,
.codex-hex-list-control-rail .codex-hex-filter-row {
  min-height: 0;
}

.codex-hex-list-control-rail .codex-list-controls-shell {
  max-height: 100%;
  overflow: hidden;
}

.codex-hex-list-control-rail .codex-mobile-controls-panel {
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.codex-hex-list-control-rail .codex-hex-filter-row {
  flex: 1 1 auto;
  max-height: 100%;
  overflow: hidden;
}

.codex-hex-region-filter-panel {
  flex: 1 1 auto;
  overflow: hidden;
}

.codex-hex-region-filter-heading {
  flex: 0 0 auto;
  font-size: 0.72rem;
  line-height: 1;
}

.codex-hex-region-checklist {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 360px;
  overflow-y: auto;
  padding: 4px 4px 4px 0;
}

.codex-list-control-rail .codex-filter-row .codex-hex-region-check-row,
.codex-list-control-rail .codex-hex-region-checklist .codex-hex-region-check-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: start;
  justify-content: stretch;
  gap: 7px;

  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 7px 0;

  border-bottom: 1px solid rgba(72, 43, 18, 0.10);

  font-family: 'Spectral', Georgia, serif;
  font-size: 0.84rem;
  line-height: 1.18;
  letter-spacing: 0;
  text-transform: none;

  color: rgba(47, 29, 16, 0.88);
}

.codex-list-control-rail .codex-hex-region-check-row:last-child {
  border-bottom: 0;
}

.codex-list-control-rail .codex-filter-row .codex-hex-region-check-row input,
.codex-list-control-rail .codex-hex-region-checklist .codex-hex-region-check-row input {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;

  width: 13px;
  height: 13px;
  margin: 0;
  margin-top: 0.12em;
  accent-color: #8f642d;
}

.codex-list-control-rail .codex-filter-row .codex-hex-region-check-row span,
.codex-list-control-rail .codex-hex-region-checklist .codex-hex-region-check-row span {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Desktop list rail width hardening.
   Kept here because the mobile utility wrapper (#codex-list-controls-home)
   lives in the list-page DOM even on desktop. */
@media (min-width: 1100px) and (min-height: 700px) {
  #codex-content.codex-list-page .codex-list-control-rail,
  #codex-content.codex-list-page .codex-list-control-rail * {
    box-sizing: border-box !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail {
    overflow: hidden !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail > #codex-list-controls-home {
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    flex: 0 1 auto !important;
    overflow: hidden !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-list-controls-shell,
  #codex-content.codex-list-page .codex-list-control-rail .codex-mobile-controls-panel,
  #codex-content.codex-list-page .codex-list-control-rail .codex-mobile-controls-panel > .codex-filter-row,
  #codex-content.codex-list-page .codex-list-control-rail .codex-filter-row,
  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter,
  #codex-content.codex-list-page .codex-list-control-rail .codex-sort-label {
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    overflow: visible !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-filter-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter,
  #codex-content.codex-list-page .codex-list-control-rail .codex-sort-label {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail select,
  #codex-content.codex-list-page .codex-list-control-rail button.codex-sort-direction {
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    box-sizing: border-box !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail select.codex-filter-field-select,
  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter > select.codex-filter-field-select {
    display: block !important;
    inline-size: 66.666% !important;
    width: 66.666% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 66.666% !important;
    max-width: 66.666% !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
    justify-self: start !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter > select:not(.codex-filter-field-select),
  #codex-content.codex-list-page .codex-list-control-rail .codex-sort-label > select {
    display: block !important;
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    max-inline-size: 100% !important;
    max-width: 100% !important;
    flex: 0 0 auto !important;
    align-self: stretch !important;
    justify-self: stretch !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-sort-topline {
    inline-size: 100% !important;
    width: 100% !important;
    min-inline-size: 0 !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
  }
}

@media (max-width: 700px) {
  .codex-list-control-split-view {
    display: block;
    overflow: visible;
  }

  .codex-list-control-rail {
    display: block;
  }

  .codex-list-controls-shell {
    display: none;
  }

  .codex-list-controls-shell.open {
    position: fixed;
    inset: 0;

    z-index: 5000;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 24px;

    background: rgba(12, 7, 3, 0.38);
  }
}
/* =========================================================
   DESKTOP LIST NORMALIZATION
   ========================================================= */

@media (min-width: 1100px) and (min-height: 700px) {
  #codex-content.codex-list-page .codex-mobile-list-summary {
    display: none !important;
  }

  #codex-content.codex-list-page .codex-list-scroll-shell {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%) !important;
    mask-image: linear-gradient(to bottom, transparent 0, #000 18px, #000 calc(100% - 22px), transparent 100%) !important;
  }

  #codex-content.codex-list-page .codex-list-controls-shell,
  #codex-content.codex-list-page .codex-mobile-controls-panel,
  #codex-content.codex-list-page .codex-filter-row,
  #codex-content.codex-list-page .codex-dynamic-filter,
  #codex-content.codex-list-page .codex-sort-label {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-filter-row {
    gap: calc(10 * var(--codex-book-scale)) !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-filter-row label,
  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter,
  #codex-content.codex-list-page .codex-list-control-rail .codex-sort-label {
    gap: calc(4 * var(--codex-book-scale)) !important;
    padding-top: calc(8 * var(--codex-book-scale)) !important;
    padding-bottom: calc(10 * var(--codex-book-scale)) !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-sort-topline {
    gap: calc(8 * var(--codex-book-scale)) !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-filter-row select,
  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter select,
  #codex-content.codex-list-page .codex-list-control-rail .codex-sort-label select {
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-top: calc(6 * var(--codex-book-scale)) !important;
    padding-bottom: calc(6 * var(--codex-book-scale)) !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter .codex-filter-field-select,
  #codex-content.codex-list-page .codex-list-control-rail .codex-filter-field-select {
    width: 66.666% !important;
    min-width: 0 !important;
    max-width: 66.666% !important;
    flex: 0 0 auto !important;
    align-self: flex-start !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-dynamic-filter select:not(.codex-filter-field-select) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: stretch !important;
  }

  #codex-content.codex-list-page .codex-list-control-rail .codex-sort-label select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}