/* New historical studies share the site's palette, typography, feedback and details. */
.historical-explorer { min-width: 0; }
.historical-tools > label { display: block; font-weight: 700; margin-block: .5rem; }
.historical-filter-disclosure { margin-top: 1rem; }
.historical-filter-disclosure summary, .historical-filter-tree summary { min-height: 44px; padding: .6rem; cursor: pointer; color: var(--blue); font-family: system-ui, sans-serif; font-weight: 750; }
.historical-filter-tree { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: .65rem; }
.historical-filter-tree .historical-filter-tree { display: block; padding-left: .6rem; border-left: 2px solid var(--line); }
.historical-filter-tree li { min-width: 0; margin-bottom: .35rem; }
.historical-filter-tree .filter-choice { overflow-wrap: anywhere; white-space: normal; min-width: 0; }
.historical-selectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.historical-selectors label { display: grid; gap: .3rem; font-weight: 700; }
.historical-selectors select { font: inherit; }
.historical-date-controls { display: grid; grid-template-columns: 1fr auto; gap: .7rem 1rem; }
.historical-date-label, .historical-date-value { font: 800 1.15rem/1.4 system-ui, sans-serif; color: var(--blue); }
.historical-date-controls input[type="range"] { grid-column: 1 / -1; width: 100%; min-height: 44px; margin: 0; accent-color: var(--burgundy); cursor: pointer; touch-action: pan-y; }
.historical-date-controls input[type="number"] { display: block; min-height: 44px; max-width: 100%; width: 12rem; border: 2px solid var(--line); border-radius: .35rem; padding: .45rem; }
.historical-date-controls > label { align-self: start; }
.historical-date-controls .filter-choice { margin: 0; }
.historical-help { color: var(--muted); font-size: .9rem; margin: .6rem 0; }
.historical-date-controls .historical-help, .historical-phases { grid-column: 1 / -1; }
.historical-phases { display: flex; gap: .5rem; flex-wrap: wrap; }
.historical-phase-button { font-size: .9rem; }
.historical-map-detail { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1rem; margin-bottom: 1.5rem; align-items: start; }
.historical-map-panel { position: static; min-width: 0; }
.historical-map-panel h2 { margin-bottom: .7rem; }
.historical-map-modes { display: flex; flex-wrap: wrap; gap: .6rem; }
.historical-map-modes button { flex: 1 1 10rem; }
.historical-map-modes button[aria-pressed="true"] { background: var(--burgundy); outline: 2px solid var(--gold); outline-offset: 2px; }
.historical-coverage { font-size: .95rem; border-left: .25rem solid var(--gold); padding-left: .6rem; }
.historical-map-canvas { width: 100%; height: clamp(19rem, 48vh, 30rem); background: #dbe9eb; border: 1px solid var(--line); border-radius: .4rem; z-index: 0; }
.historical-map-canvas.map-gestures-locked { touch-action: pan-y pinch-zoom; }
.historical-map-gestures { display: flex; gap: .6rem; align-items: center; min-height: 44px; margin: .5rem 0; font-family: system-ui, sans-serif; font-size: .9rem; }
.historical-map-gestures input { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; }
.historical-map-popup { max-width: 100%; overflow-wrap: anywhere; }
.historical-map-popup p { margin: .5rem 0; }
.historical-map-legend { display: flex; gap: .5rem 1rem; flex-wrap: wrap; margin-block: .6rem; padding: 0; list-style: none; font: .8rem/1.4 system-ui, sans-serif; }
.historical-map-legend li { display: flex; gap: .4rem; align-items: center; }
.historical-map-key { display: inline-block; flex: 0 0 auto; width: 1rem; height: 1rem; border: 2px solid currentColor; border-radius: 50%; background: currentColor; }
.historical-map-key--capital { color: #16385f; }
.historical-map-key--documented-presence { color: #165f50; }
.historical-map-key--influence { color: #895d13; border-style: dashed; background: transparent; }
.historical-map-key--territorial-control { color: #742c36; border-radius: 0; }
.historical-source-link { display: block; padding: .3rem 0; overflow-wrap: anywhere; }
.historical-coordinate-plane { aspect-ratio: 2; position: relative; overflow: hidden; border: 1px solid var(--line); background-color: #e6eceb; background-image: linear-gradient(to right, #bccdcc 1px, transparent 1px), linear-gradient(to bottom, #bccdcc 1px, transparent 1px); background-size: 16.666% 16.666%; }
.historical-coordinate-point { position: absolute; width: .6rem; height: .6rem; border-radius: 100%; transform: translate(-50%, -50%); background: var(--burgundy); border: 1px solid var(--white); }
.historical-coordinate-point.is-heat { width: 1.3rem; height: 1.3rem; background: rgb(22 56 95 / 30%); border: 2px dotted var(--blue); }
.historical-detail-host { min-width: 0; position: sticky; top: 1rem; scroll-margin-top: 1rem; }
.historical-detail-host .event-popover { position: relative; inset: auto; width: 100%; max-width: 100%; max-height: min(80vh, 58rem); overflow-y: auto; overscroll-behavior: contain; padding: 1rem; border: 1px solid var(--line); background: var(--white); border-radius: .65rem; box-shadow: var(--shadow); transform: none; }
.historical-detail-host .event-popover::before { display: none; }
.historical-detail-host .event-detail__top { position: sticky; top: -1rem; background: var(--white); z-index: 1; padding-top: .7rem; padding-bottom: .7rem; }
.historical-detail-host .event-detail__title { font-size: 1.5rem; overflow-wrap: anywhere; }
.historical-detail-host .event-detail__actions { flex-wrap: wrap; }
.historical-detail-host .detail-list, .historical-detail-host .record-card__details { grid-template-columns: 1fr; }
.historical-detail-host dd { margin-left: 0; }
.historical-detail-nav { display: flex; gap: .6rem; flex-wrap: wrap; padding-top: 1rem; }
.historical-correlation { padding: .6rem; margin-block: .6rem; background: var(--paper); border-left: 3px solid var(--gold); }
.historical-correlation h4 { margin: .3rem 0; text-transform: capitalize; }
.historical-correlation a { display: inline-block; margin-right: .8rem; min-height: 2rem; }
.historical-correlation .relationship-button { display: block; margin-top: .5rem; }
.historical-chart { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x pan-y pinch-zoom; border: 1px solid var(--line); border-radius: .4rem; }
.historical-chart-inner { min-width: 39rem; }
.historical-axis, .historical-timeline-row { display: grid; grid-template-columns: 15rem minmax(0, 1fr); }
.historical-axis { background: var(--blue); color: var(--white); font: 700 .8rem/1.4 system-ui, sans-serif; padding: .6rem; gap: .5rem; position: sticky; top: 0; }
.historical-axis-ticks { display: flex; justify-content: space-between; gap: .6rem; }
.historical-axis-ticks span { max-width: 5rem; }
.historical-timeline-row { border-bottom: 1px solid var(--paper-deep); align-items: stretch; }
.historical-timeline-row:nth-child(even) { background: var(--paper); }
.historical-timeline-row.is-selected { background: var(--blue-light); }
.historical-event-button { width: 100%; border-radius: 0; color: var(--blue); background: transparent; text-align: left; padding: .7rem; font-size: .9rem; overflow-wrap: anywhere; }
.historical-event-button:hover, .historical-event-button[aria-pressed="true"] { background: var(--blue); color: var(--white); }
.historical-event-date { display: block; font-size: .85em; font-weight: 500; margin-top: .3rem; }
.historical-period-track { position: relative; overflow: hidden; margin-inline: .7rem; background-image: linear-gradient(to right, rgb(201 184 135 / 45%) 1px, transparent 1px); background-size: 25% 100%; }
.historical-period-bar { position: absolute; top: calc(50% - .45rem); height: .9rem; min-width: 3px; background: var(--blue); border-radius: .3rem; }
.historical-period-bar.is-point { width: .65rem !important; height: .65rem; top: calc(50% - .325rem); border-radius: 50%; transform: translateX(-50%); background: var(--burgundy); }
.historical-period-bar.is-uncertain { outline: 1px dashed var(--burgundy); outline-offset: 2px; }
.historical-period-bar.is-placement-uncertain {
  /* A possible placement window is not a claim of continuous event duration. */
  background: repeating-linear-gradient(135deg, rgb(116 44 54 / 28%) 0 3px, transparent 3px 7px);
  border: 1px dashed var(--burgundy);
  outline: none;
  border-radius: 0;
}
.historical-date-cursor { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--gold); opacity: .8; }
.historical-pagination { display: flex; gap: 1rem; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
.historical-result-status { font-weight: 700; }
.historical-framework { border-left: .35rem solid var(--burgundy); }
@media (max-width: 850px) {
  .historical-map-detail { grid-template-columns: 1fr; }
  .historical-detail-host { position: static; }
  .historical-detail-host .event-popover { max-height: 70svh; }
  .historical-detail-host .event-detail__top { position: static; }
  .historical-chart-inner { min-width: 34rem; }
  .historical-axis, .historical-timeline-row { grid-template-columns: 12rem minmax(0, 1fr); }
}
@media (max-width: 460px) {
  .historical-date-controls { grid-template-columns: minmax(0, 1fr); }
  .historical-date-value { justify-self: start; }
  .historical-map-panel, .historical-timeline { padding: .7rem; }
  .historical-pagination > * { flex: 1 1 auto; }
  .historical-detail-host .event-detail__top { display: block; }
  .historical-detail-host .event-detail__actions { margin-top: .5rem; }
}
@media print { .historical-map-gestures, .historical-date-controls, .historical-tools { display: none; } .historical-detail-host .event-popover { max-height: none; } }
