*, *::before, *::after { box-sizing: border-box; }

#chronology-source { display: none; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: #0b1220;
  font: 14px/1.45 system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  display: flex;
  flex-direction: column;
}

h1, h2, h3, h4 { color: #000; margin-top: 0.5em; margin-bottom: 0.2em;}
h1{font-size:1.8rem; text-align: left; margin-top: 0; margin-left: 15px; color:#000;}
h2{font-size:1.4rem; color:#000;}
h3 { font-size: 1.5em; background-color:#fff; color:#000; }
h4 { font-size: .9em; margin-left:70px; text-align: center; background-color:#fff; color:#000; }
a {color: #007bff; text-decoration: none;}
a:hover {color: #0000EE; text-decoration: underline;}

/* ================================================
   TAB BAR
   ================================================ */

#tab-bar {
  flex-shrink: 0;
  background: #B0AEAE;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 8px;
  border-bottom: 1px solid #e5e7eb;
  position: relative;
}

.tab {
  background: #777B9E;
  color: #fff;
  border: 1px solid green;
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  white-space: nowrap;
}

.tab.active {
  background: #fff;
  border-color: #0e0;
  color: #000;
}

.tab:hover:not(.active) {
  background: #8e92b8;
  border-color: #4ade80;
}


/* ================================================
   PANE AREA
   ================================================ */

#panes {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #fff;
  margin-bottom: 40px;
}

.pane {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
  overflow-y: auto;
  padding: 20px 24px;
}

.pane.active {
  visibility: visible;
  pointer-events: auto;
}

.pane iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}


/* ================================================
   RIBBON
   ================================================ */

#ribbon {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
  background: #1f2937;
  border-top: 1px solid #111;
  z-index: 99;
}

#ribbon button {
  color: #fff;
  background: #021702;
  border: 1px solid green;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}

#ribbon button:hover {
  background: #064507;
  border-color: #bb0000;
}

#ribbon button.active {
  background: #255703;
  border-color: green;
}

.legend-item .swatch.custody { background: var(--col-custody); }
.legend-item .swatch.crime   { background: var(--col-report); } 
.legend-item .swatch.cad     { background: var(--col-cad); }
.legend-item .swatch.date    { background: var(--col-date); }

@keyframes highlight-flash {
0%, 20%   { background-color: transparent; }
30%, 40%  { background-color: #FF5D40; }
50%, 60%  { background-color: transparent; }
70%, 80%  { background-color: #FF5D40; }
90%, 100% { background-color: transparent; }
}
.flash-highlight { animation: highlight-flash 3s ease-out 1;}
.jump-to-menu label{ display:block; margin-bottom:5px; font-weight:700; color:#0056b3;}
.jump-to-menu select{ width: 175px; padding: 5px; border: 1px solid #006600; border-radius: 3px; font-size: 0.9em; background-color: #F8FFF8; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.jump-to-menu select:focus{ outline: none; border-color: #007bff;}
.jump-legend{ display:flex; flex-direction: column; gap:.35rem; align-items:flex-start; border: 0px;}
.legend-item{ display:flex; align-items:center; gap:.4rem;}
.legend-item .swatch{ display:inline-block; width:1em; height:1em; border:1px solid #666; border-radius:6px}
#scroll-progress { position: fixed; top: 0px; left: 0; height: 3px; width: 0%; background: #FC121A; z-index: 500;}
.case-epigraph footer { margin-top: 0.75em; text-align: center; font-style: normal; font-weight: bold; color: #222;}
.year-break {list-style: none; padding: 0; padding-left: 25px; padding-top: 5px; background: linear-gradient(135deg, #F2EAC7 0%, #5A6F82 100%); border:1px solid #cbd5e1; margin-bottom: 3px;}
.back { color: #fff; background: #374151; border: 1px solid #00bb00; padding: 4px 10px; border-radius: 6px; cursor: pointer; font-size: 11px; margin-bottom:3px;}
.back:hover { background: #667794; border-color: #bb0000;}
.back:active { background: #e5e7eb;}
.copy {padding-bottom:3px; color: #000; font-size: 11px; margin: auto; margin-bottom:2px; opacity: 0.75; user-select: none;}
.note {font-style: italic; color: #000000; margin-left: 20px;}
.count {padding-top:3px; color: #000; font-size: 11px; margin: auto; opacity: 0.75; user-select: none;}
ul, ol {margin-left: 10px;}	
p {margin-bottom: 1em;}
td > ul.document-list { margin-left: 0; list-style: none; padding-left: 40px;}
.document-list > li > strong:first-child { color: #000;  background-color: #fff; padding: 2px 5px; border-radius: 0px; font-weight: bold; display: inline-block;}
.chronology-root { list-style: none; padding-left: 0; counter-reset: entry;}
.chronology-root > li:not(:has(h1))::before { counter-increment: entry; content: counter(entry, decimal-leading-zero) ") "; font-size: 0.7rem; font-weight: 500; margin-right: 0.25em;}
.chronology-root > li { margin-bottom: 1em; padding-bottom: 0.2em; border-bottom: 2px solid #e5e7eb;}
.chronology-root > li:has(h1)::before { content: "";}
.document-list ul { list-style: none;}
.chron-ref-item { list-style: none; }
.chron-ref-item .jump-chip-row { display:inline-flex; align-items:center; gap:2px; vertical-align:middle; margin-left:4px; }
.default-pane:not(.pane) {width:60%; margin-left:20%; margin-right:20%;}
.pane.default-pane > * {max-width:60%; margin-left:auto; margin-right:auto;}
.chrono-notice {background: #fff3cd; border: 2px solid #ffc107; padding: 15px; border-radius: 4px;}