/* Composition pass over the preserved chart-room theme. */
:root {
  --desk-gap: 18px;
  --desk-index: 238px;
  --desk-record: 350px;
  --desk-top: 94px;
  --desk-bottom: 54px;
  --desk-rule: #62583f;
}
.topbar {
  height: 76px;
  min-height: 76px;
  padding-inline: 20px;
}
.brand-mark {
  width: 50px;
  height: 50px;
}
.brand h1 {
  font-family: Georgia, serif;
  font-size: clamp(21px, 2.05vw, 30px);
  letter-spacing: 0.085em;
}
.brand-kicker {
  font-size: 9px;
  letter-spacing: 0.16em;
}
.topbar,
.panel,
.era-switch,
.map-navigation {
  box-shadow: inset 0 0 0 3px #080b0999;
}
.panel {
  border: 1px solid var(--desk-rule);
  background: #0d120fef;
}
.panel::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 4px;
  border: 1px solid #ad96501c;
}
.panel,
.left-panel,
.right-panel,
.right-panel:not(.collapsed) {
  top: var(--desk-top);
  bottom: var(--desk-bottom);
  height: auto;
  max-height: none;
}
.left-panel {
  left: var(--desk-gap);
  width: var(--desk-index);
}
.right-panel,
.right-panel:not(.collapsed) {
  left: auto;
  right: var(--desk-gap);
  width: var(--desk-record);
}
.panel-head,
.right-panel .panel-head {
  height: 42px;
  flex-basis: 42px;
  padding: 0 9px 0 13px;
  background: #151a14;
}
.panel-title {
  font-size: 12px;
  letter-spacing: 0.075em;
}
.right-panel .panel-title {
  font: 11px var(--mono);
  letter-spacing: 0.07em;
}
.panel-body {
  height: calc(100% - 42px);
}
.left-panel .panel-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
  overflow: hidden;
}
.left-panel .index-tools {
  display: block;
  margin-bottom: 6px;
  flex: 0 0 auto;
}
.left-panel #searchInput {
  height: 38px;
  font-size: 13px;
  margin-bottom: 8px;
}
.archive-filters {
  border-block: 1px solid #71634677;
}
.archive-filters > summary,
.layers-disclosure > summary {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
}
.archive-filters > summary::-webkit-details-marker,
.layers-disclosure > summary::-webkit-details-marker {
  display: none;
}
.archive-filters > summary {
  min-height: 34px;
  padding: 0 3px;
  color: #d4c7a8;
  font: 12px var(--prose);
}
.filter-state {
  margin-left: auto;
  color: #a9a390;
  font-size: 11px;
}
.filter-fields {
  display: grid;
  gap: 10px;
  padding: 8px 0 12px;
}
.index-filter .field {
  height: 36px;
  font-size: 12px;
}
.index-filter > span {
  font: 9px var(--mono);
  letter-spacing: 0.08em;
}
.left-panel .result-count {
  order: 0;
  margin: 0;
  padding: 4px 1px 8px;
  border: 0;
  font: 10px var(--mono);
  color: #b5aa90;
}
.left-panel .row-list {
  flex: 1 1 0;
  min-height: 60px;
  max-height: none;
  overflow: auto;
  padding: 0 3px 0 0;
  scrollbar-gutter: stable;
}
.archive-row {
  min-height: 49px;
  margin: 0;
  padding: 8px 5px;
  gap: 9px;
  border: 0;
  border-bottom: 1px solid #72644744;
  border-left: 3px solid transparent;
  background: transparent;
}
.archive-row.active {
  border-color: #72644744;
  border-left-color: #a44d43;
  background: #b5a17a17;
  box-shadow: inset 0 0 0 1px #a3936944;
}
.archive-row.active::after {
  display: none;
}
.row-name {
  font:
    16px/1.2 Georgia,
    serif;
  letter-spacing: 0.025em;
  margin-bottom: 4px;
  color: #e5d9bb;
}
.row-meta {
  font: 11px/1.4 var(--prose);
  color: #aba99a;
}
.row-text {
  min-width: 0;
}
.row-meta {
  white-space: normal;
  overflow-wrap: anywhere;
}
.left-panel .row-list {
  overflow-x: hidden;
}
.row-glyph {
  opacity: 0.8;
  filter: sepia(0.6) saturate(0.5) brightness(1.4);
  flex: 0 0 26px;
}
.archive-row[data-id="deliverance"] {
  margin-left: 19px;
  position: relative;
}
.archive-row[data-id="deliverance"]::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 14px;
  border-left: 1px solid #7d7156;
  border-bottom: 1px solid #7d7156;
  left: -16px;
  top: 0;
}
.left-panel .index-note {
  order: 4;
  flex: 0 0 auto;
  margin: 5px 0 0;
  padding: 8px 0 0;
  font:
    italic 10px/1.4 Georgia,
    serif;
  color: #a8a591;
}
.chapter-slot {
  order: 5;
  flex: 0 0 auto;
}
.chapter-slot:empty {
  display: none;
}
.chapter-slot .chapter-placeholder {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  min-height: 45px;
  padding: 9px 0 0;
  margin-top: 6px;
  border: 0;
  border-top: 1px solid #71634655;
  background: transparent;
  color: #a09d89;
  font:
    12px/1.4 Georgia,
    serif;
  text-align: left;
  box-shadow: none;
  cursor: not-allowed;
}
.chapter-slot .chapter-placeholder small {
  font:
    italic 11px Georgia,
    serif;
  text-transform: none;
  letter-spacing: 0;
  color: #94907c;
}
.chapter-slot .cp-launcher {
  width: 100%;
  margin-top: 8px;
  min-height: 36px;
  font-size: 12px;
}
.left-panel .cp-index-tabs {
  margin: 0 0 8px;
}
.left-panel .cp-index-tab {
  min-height: 31px;
  font-size: 11px;
}
.left-panel .cp-archive-view {
  min-height: 0;
}
.controls {
  z-index: 30;
  top: var(--desk-top);
  left: calc(var(--desk-index) + 2 * var(--desk-gap));
  right: calc(var(--desk-record) + 2 * var(--desk-gap));
  height: 38px;
  gap: 10px;
  flex-wrap: nowrap;
  align-items: flex-start;
}
#app:not(.desk-record-open) .controls {
  right: calc(var(--desk-gap) + 84px);
}
#app.desk-archive-closed .controls {
  left: calc(var(--desk-gap) + 84px);
}
.era-switch {
  height: 38px;
}
.era-option {
  min-height: 36px;
  padding: 0 11px;
  gap: 6px;
}
.era-century {
  font:
    17px Georgia,
    serif;
}
.era-caption {
  font: 9px var(--instrument);
  letter-spacing: 0.04em;
}
.map-tools {
  display: flex;
  align-items: stretch;
  height: 38px;
  border: 1px solid var(--desk-rule);
  background: #11160ff5;
  flex: 0 0 auto;
}
.layers-disclosure {
  position: relative;
}
.layers-disclosure > summary {
  height: 36px;
  padding: 0 9px;
  color: #daccad;
  font:
    12px Georgia,
    serif;
}
.layers-disclosure > summary .control-icon {
  width: 16px;
  height: 16px;
}
.map-tools > #motionToggle {
  border: 0;
  border-left: 1px solid var(--desk-rule);
  border-radius: 0;
  padding: 0 10px;
  height: 36px;
  gap: 6px;
  font:
    12px Georgia,
    serif;
}
.map-tools #motionToggle::after {
  width: 4px;
  height: 4px;
  margin-left: 0;
}
.layers-disclosure .layer-controls {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 0;
  top: 43px;
  width: 205px;
  height: auto;
  padding: 7px;
  border: 1px solid #8d7950;
  border-radius: 0;
  background: #131a12;
  box-shadow: 0 10px 24px #0008;
}
.layers-disclosure:not([open]) .layer-controls {
  display: none;
}
.layers-disclosure .layer-controls > button {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 auto;
  height: 39px;
  min-height: 39px;
  padding: 0 10px;
  font: 12px var(--prose);
  letter-spacing: 0.01em;
  border: 0;
  border-bottom: 1px solid #6b604533;
}
.layers-disclosure .layer-controls > button::after {
  margin-left: auto;
}
.layers-disclosure .control-icon {
  display: inline-block;
}
.layers-disclosure .ctrl-divider {
  display: none;
}
.map-navigation {
  right: calc(var(--desk-record) + 2 * var(--desk-gap));
  bottom: var(--desk-bottom);
  height: 40px;
}
#app:not(.desk-record-open) .map-navigation {
  right: var(--desk-gap);
}
.map-navigation button {
  width: 43px;
  height: 38px;
}
.coord-readout {
  left: calc(var(--desk-index) + 2 * var(--desk-gap));
  bottom: var(--desk-bottom);
  border: 0;
  padding: 0;
  font-size: 10px;
}
.bottombar {
  left: 18px;
  right: 18px;
  bottom: 8px;
  min-height: 30px;
  border-top: 1px solid #62583f77;
  gap: 18px;
}
.footer-copy,
.footer-guides {
  font-size: 10px;
}

/* The existing generated content is grouped by chart-desk.js, with its event
   targets, portrait canvas, text and links retained. */
.right-panel .dossier {
  padding: 0 12px 16px;
  background: #0d120f;
  scrollbar-gutter: stable;
  scroll-padding-top: 78px;
}
.record-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 94px;
  column-gap: 10px;
  padding: 0 0 10px;
}
.record-heading > .doc-bar {
  grid-column: 1 / -1;
  padding: 9px 0 7px;
  font: 8px/1.5 var(--mono);
  letter-spacing: 0.02em;
  color: #b7ae96;
}
.right-panel .record-heading .doc-banner {
  grid-column: 2;
  grid-row: 2 / 4;
  align-self: start;
  width: 94px;
  height: 104px;
  aspect-ratio: auto;
  max-width: none;
  margin: 1px 0 0;
  float: none;
  border-color: #796847;
  overflow: hidden;
}
.record-heading .doc-banner canvas,
.record-heading .doc-banner img {
  display: block;
  width: 100%;
  height: 87px;
  object-fit: cover;
}
.right-panel .record-heading .portrait-caption {
  font: 6px/1.3 var(--mono);
  bottom: 4px;
  right: 3px;
}
.right-panel .record-heading .doc-identity {
  grid-column: 1;
  grid-row: 2;
  display: block;
  min-height: 0;
  padding: 0 0 6px;
  margin: 0;
}
.right-panel .record-heading .doc-identity h2 {
  font:
    27px/1.07 Georgia,
    serif;
  letter-spacing: 0.025em;
  overflow-wrap: anywhere;
  margin: 0 0 6px;
}
.right-panel .record-heading .badge {
  display: inline-flex;
  font: 8px/1.2 var(--mono);
  padding: 3px 5px;
  border-color: #a28c60;
  background: transparent;
  color: #c5b58e;
}
.right-panel .record-heading .classification {
  display: grid;
  grid-template-columns: 1fr;
  grid-column: 1;
  grid-row: 3;
  gap: 5px;
  clear: none;
  padding: 0;
  margin: 0;
  border: 0;
}
.right-panel .record-heading .classification .kv {
  display: block;
  border: 0;
  padding: 0;
}
.right-panel .record-heading .classification .kv span {
  display: inline;
  font: 8px/1.4 var(--mono);
  color: #a59d88;
  margin: 0 6px 0 0;
}
.right-panel .record-heading .classification .kv strong {
  display: inline;
  font:
    12px/1.4 Georgia,
    serif;
  color: #ded1b2;
}
.right-panel .tabs {
  margin: 0;
  height: 38px;
  border: 1px solid #aa9876;
  background: #161b13;
}
.right-panel .tab {
  height: 37px;
  font:
    12px Georgia,
    serif;
  text-transform: capitalize;
  letter-spacing: 0.01em;
  color: #c5baa2;
}
.right-panel .tab.active {
  color: #302b21;
  background: #e1d5b9;
  box-shadow: inset 0 -2px #853e35;
}
.right-panel .tab-content,
.right-panel .dossier-meta,
.right-panel .chips,
.right-panel .doc-ref,
.right-panel .dossier-actions {
  background: #e1d5b9;
  padding-inline: 15px;
}
.right-panel .tab-content {
  padding-top: 16px;
  padding-bottom: 6px;
}
.right-panel .copy,
.right-panel .section-copy p,
.right-panel .tl-event p {
  font:
    15px/1.58 Georgia,
    serif;
  color: #302b21;
}
.right-panel .section-copy {
  padding-bottom: 10px;
}
.right-panel .section-title {
  font:
    15px/1.4 Georgia,
    serif;
  letter-spacing: 0;
  padding-block: 11px;
  color: #6c342d;
}
.right-panel .dossier-meta {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
.right-panel .dossier-meta .kv {
  grid-template-columns: 85px minmax(0, 1fr);
  gap: 10px;
  padding-block: 9px;
}
.right-panel .dossier-meta .kv span {
  font: 10px/1.5 var(--prose);
  letter-spacing: 0.01em;
}
.right-panel .dossier-meta .kv strong {
  font:
    13px/1.5 Georgia,
    serif;
}
.right-panel .chips {
  margin: 0;
  gap: 5px;
  padding-block: 7px;
}
.right-panel .chip {
  font: 10px/1.4 var(--prose);
  padding: 3px 5px;
}
.right-panel .doc-ref {
  margin: 0;
  font-size: 9px;
  padding-block: 13px;
  gap: 8px;
}
.right-panel .doc-stamp {
  font-size: 9px;
}
.right-panel .dossier-page-link {
  font:
    13px/1.5 Georgia,
    serif;
}
.right-panel .dossier-actions {
  padding-block: 0 15px;
}
.right-panel .dossier-action {
  font-size: 10px;
  min-height: 36px;
}
.right-panel .doc-mini {
  background: #0d120f;
  margin: 0;
}
.right-panel .dossier.scrolled .doc-mini {
  height: 33px;
  max-height: 33px;
  padding: 6px 0;
}
.right-panel .dossier.scrolled .tabs {
  top: 33px;
}
.right-panel .dossier-empty {
  font:
    15px/1.6 Georgia,
    serif;
}
.reading-toggle {
  display: none;
}
.mobile-workspace {
  display: none;
}
summary:focus-visible,
.mobile-workspace button:focus-visible,
.reading-toggle:focus-visible {
  outline: 2px solid #dec48a;
  outline-offset: 3px;
}

@media (max-width: 1220px) and (min-width: 701px) {
  :root {
    --desk-gap: 14px;
    --desk-index: 218px;
    --desk-record: 330px;
    --desk-top: 142px;
  }
  .controls,
  #app.desk-archive-closed .controls,
  #app:not(.desk-record-open) .controls {
    top: 90px;
    left: 14px;
    right: 14px;
  }
  .topbar {
    height: 76px;
    min-height: 76px;
    flex-wrap: nowrap;
    align-content: normal;
    padding-inline: 16px;
    gap: 10px;
  }
  .brand {
    flex-basis: auto;
    width: auto;
  }
  .brand h1 {
    font-size: 23px;
  }
}
@media (min-width: 1600px) {
  :root {
    --desk-index: 264px;
    --desk-record: 392px;
    --desk-gap: 22px;
    --desk-top: 102px;
  }
  .record-heading {
    grid-template-columns: minmax(0, 1fr) 108px;
  }
  .right-panel .record-heading .doc-banner {
    width: 108px;
    height: 113px;
  }
  .record-heading .doc-banner canvas {
    height: 97px;
  }
  .right-panel .copy,
  .right-panel .section-copy p,
  .right-panel .tl-event p {
    font-size: 16px;
  }
}
@media (max-width: 700px) {
  :root {
    --desk-gap: 10px;
    --desk-top: calc(90px + env(safe-area-inset-top, 0px));
    --desk-bottom: calc(50px + env(safe-area-inset-bottom, 0px));
  }
  .topbar {
    height: calc(80px + env(safe-area-inset-top, 0px));
    min-height: 80px;
    padding: 8px 11px;
    gap: 7px;
    flex-wrap: nowrap;
  }
  .brand {
    flex-basis: auto;
    width: auto;
    gap: 8px;
  }
  .brand-mark {
    width: 35px;
    height: 35px;
  }
  .brand h1 {
    font-size: clamp(13px, 3.6vw, 19px);
    letter-spacing: 0.035em;
  }
  .brand-kicker {
    font-size: 6px;
    letter-spacing: 0.09em;
    margin-bottom: 4px;
  }
  .archive-utilities > summary {
    width: 33px;
    min-width: 33px;
    padding: 0;
  }
  .archive-utilities .banner-actions {
    top: 41px;
    width: 248px;
  }
  .controls,
  #app.desk-archive-closed .controls,
  #app:not(.desk-record-open) .controls {
    left: 10px;
    right: 10px;
    top: var(--desk-top);
    justify-content: space-between;
    gap: 5px;
    height: 38px;
    flex-wrap: nowrap;
  }
  .era-option {
    padding: 0 9px;
    min-height: 36px;
    gap: 4px;
  }
  .era-century {
    font-size: 15px;
  }
  .era-caption {
    font-size: 7px;
  }
  .map-tools {
    height: 38px;
  }
  .layers-disclosure > summary {
    font-size: 11px;
    gap: 5px;
    padding: 0 7px;
  }
  .layers-disclosure > summary .control-icon {
    display: none;
  }
  .map-tools > #motionToggle {
    padding: 0 7px;
    font-size: 11px;
    gap: 4px;
  }
  .map-tools > #motionToggle .control-icon {
    width: 12px;
    height: 12px;
    flex-basis: 12px;
  }
  .map-tools #motionToggle::after {
    display: none;
  }
  .layers-disclosure .layer-controls {
    right: -66px;
  }
  .panel,
  .left-panel,
  .right-panel,
  .right-panel:not(.collapsed) {
    top: auto;
    left: 0;
    right: 0;
    bottom: var(--desk-bottom);
    width: 100%;
    height: min(52dvh, 490px);
    max-height: calc(100dvh - var(--desk-top) - 48px - var(--desk-bottom));
    border-radius: 0;
  }
  .panel-head,
  .right-panel .panel-head {
    height: 43px;
    flex-basis: 43px;
    padding: 0 9px 0 12px;
  }
  .panel-body {
    height: calc(100% - 43px);
  }
  .panel-head .panel-title {
    font-size: 11px;
  }
  .panel::before {
    display: none;
  }
  .right-panel.reading {
    height: calc(100dvh - var(--desk-top) - 48px - var(--desk-bottom));
  }
  .left-panel {
    height: calc(100dvh - var(--desk-top) - 48px - var(--desk-bottom));
  }
  .reading-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-left: auto;
    background: transparent;
    color: #d5c6a2;
    border: 0;
    border-bottom: 1px solid #80704c;
    font: 10px var(--prose);
    min-height: 31px;
    padding: 0 4px;
  }
  .right-panel .collapse {
    margin-left: 5px;
  }
  .panel.collapsed.left-panel,
  .panel.collapsed.right-panel {
    transform: translateY(calc(100% + var(--desk-bottom)));
    visibility: hidden;
  }
  .panel.collapsed .panel-head {
    visibility: hidden;
  }
  .left-panel .panel-body {
    padding: 10px 12px;
  }
  .left-panel .index-tools {
    display: block;
  }
  .filter-fields {
    grid-template-columns: 1fr 1fr;
  }
  .index-filter {
    min-width: 0;
  }
  .index-filter .field {
    width: 100%;
    font-size: 11px;
  }
  .left-panel .row-list {
    min-height: 45px;
  }
  .left-panel .index-note {
    padding-top: 4px;
    font-size: 9px;
  }
  .chapter-slot .chapter-placeholder {
    padding-top: 5px;
    margin-top: 4px;
    min-height: 36px;
    font-size: 11px;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .chapter-slot .chapter-placeholder small {
    font-size: 10px;
  }
  .right-panel .dossier {
    padding-inline: 11px;
  }
  .record-heading {
    grid-template-columns: minmax(0, 1fr) 82px;
    column-gap: 10px;
    padding-bottom: 9px;
  }
  .right-panel .record-heading .doc-banner {
    width: 82px;
    height: 90px;
  }
  .record-heading .doc-banner canvas,
  .record-heading .doc-banner img {
    height: 75px;
  }
  .right-panel .record-heading .doc-identity h2 {
    font-size: 24px;
  }
  .right-panel .record-heading .doc-bar {
    font-size: 7px;
    padding-block: 7px 5px;
  }
  .right-panel .record-heading .classification .kv strong {
    font-size: 12px;
  }
  .right-panel .tabs,
  .right-panel .tab {
    height: 36px;
  }
  .right-panel .tab-content {
    padding-top: 12px;
  }
  .right-panel .copy,
  .right-panel .section-copy p,
  .right-panel .tl-event p {
    font-size: 15px;
    line-height: 1.55;
  }
  .map-navigation,
  #app:not(.desk-record-open) .map-navigation {
    top: calc(var(--desk-top) + 48px);
    bottom: auto;
    right: 10px;
    height: 36px;
  }
  .map-navigation button {
    width: 37px;
    height: 34px;
  }
  #app:has(.right-panel.reading:not(.collapsed)) .map-navigation,
  #app:has(.left-panel:not(.collapsed)) .map-navigation {
    visibility: hidden;
  }
  .mobile-workspace {
    display: flex;
    position: fixed;
    z-index: 38;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--desk-bottom);
    padding: 0 12px env(safe-area-inset-bottom, 0px);
    background: #101610;
    border-top: 1px solid #82704c;
  }
  .mobile-workspace button {
    flex: 1;
    border: 0;
    border-top: 2px solid transparent;
    background: none;
    color: #b3ad98;
    font:
      14px Georgia,
      serif;
  }
  .mobile-workspace button[aria-pressed="true"] {
    color: #eddfbe;
    background: #bca16b12;
    border-top-color: #bba06a;
  }
  .mobile-workspace button:disabled {
    color: #74756a;
  }
  .bottombar {
    display: none;
  }
  .mobile-service-links {
    display: flex;
    gap: 20px;
    padding: 12px 5px 3px;
    border-top: 1px solid #62583f;
  }
  .mobile-service-links a {
    color: #c7b994;
    font:
      12px Georgia,
      serif;
  }
}
@media (min-width: 701px) {
  .mobile-service-links {
    display: none;
  }
}
@media (max-width: 360px) {
  .era-caption {
    display: none;
  }
  .era-option {
    padding-inline: 14px;
  }
  .right-panel .panel-title {
    letter-spacing: 0;
  }
  .reading-toggle {
    font-size: 9px;
  }
}
@media (max-height: 570px) and (min-width: 701px) {
  :root {
    --desk-top: 138px;
    --desk-bottom: 40px;
  }
  .controls {
    top: 90px;
    left: 14px;
    right: 14px;
  }
  .panel,
  .left-panel,
  .right-panel,
  .right-panel:not(.collapsed) {
    top: var(--desk-top);
    bottom: var(--desk-bottom);
  }
  .left-panel .panel-body {
    display: flex;
    overflow: auto;
  }
  .left-panel .row-list {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
@media (prefers-reduced-motion: reduce) {
  .panel {
    transition: none !important;
  }
}