/* MurderIndex — sober, forensic dark theme layered over Bootstrap 5 */
:root {
  --mi-bg: #14161a;
  --mi-panel: #1b1e24;
  --mi-border: #2a2f38;
  --mi-accent: #dc3545;
}

body {
  background:
    radial-gradient(1200px 400px at 80% -10%, rgba(220, 53, 69, 0.08), transparent 60%),
    var(--mi-bg);
  min-height: 100vh;
}

.mi-nav {
  background: rgba(20, 22, 26, 0.92);
  backdrop-filter: blur(6px);
  border-color: var(--mi-border) !important;
}
.navbar-brand { letter-spacing: 0.5px; }
.mi-brand {
  font-family: 'Special Elite', 'Courier New', monospace;
  font-size: 1.6rem;
  letter-spacing: 0.5px;
}
.mi-brand .bi { font-size: 1.5rem; vertical-align: -2px; }
@media (max-width: 575px) { .mi-brand { font-size: 1.3rem; } }

/* Blue "Admin panel" pill next to the logo */
.mi-admin-pill {
  background: #0d6efd;
  color: #fff;
  font-size: 0.5em;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  vertical-align: middle;
}

/* More breathing room between nav items */
.mi-nav .navbar-nav { gap: 0.35rem 1.6rem; }
.mi-nav .navbar-nav .nav-link { padding-left: 0.25rem; padding-right: 0.25rem; }

/* Quick-search modal */
#searchModal .modal-dialog { margin-top: 12vh; }
.mi-search-modal {
  background: var(--mi-panel);
  border: 1px solid var(--mi-border);
  border-radius: 14px;
}
#quickSearchInput { background: #0f1114; border-color: var(--mi-border); color: #f2f3f5; }
#quickSearchInput:focus { border-color: var(--mi-accent); box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.2); }
.mi-qs-list .list-group-item { border-color: var(--mi-border); padding: 0.6rem 0.5rem; }
.mi-qs-list .list-group-item:hover { background: rgba(220,53,69,0.10) !important; }
.min-w-0 { min-width: 0; }
.mi-qs-thumb {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 8px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22262e, #171a1f); color: #6c7686; font-size: 1.2rem;
}
.mi-qs-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.35); }
.mi-qs-all { color: #e79aa2; }
.mi-qs-all:hover { color: #fff; background: rgba(220,53,69,0.12); }

.mi-hero {
  background: linear-gradient(180deg, rgba(220, 53, 69, 0.06), transparent);
  border-color: var(--mi-border) !important;
}

/* Stat tiles */
.mi-stats .mi-stat, .mi-stat {
  background: var(--mi-panel);
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  padding: 0.6rem 0.4rem;
}
.mi-stat span {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.1;
  color: #f2f3f5;
}
.mi-stat small { color: #8b93a1; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.68rem; }

/* Filters */
.mi-filters {
  background: var(--mi-panel);
  border: 1px solid var(--mi-border);
  border-radius: 12px;
  padding: 1rem;
  top: 80px;
}

/* Cards */
.mi-card {
  background: var(--mi-panel);
  border: 1px solid var(--mi-border);
  border-radius: 12px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
a.mi-card:hover {
  border-color: var(--mi-accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* Result-card thumbnails fill the card's full height rather than sitting in a
   fixed square. Cards in a row are equal height (.h-100), so the tallest card
   — a wrapped name, a third row of badges — set a height every other card in
   that row had to match, leaving dead panel space under each photo.

   The card is a flex column, so the inner row has to be told to take the
   remaining height before the image can stretch into it. */
.mi-card > .d-flex {
  flex: 1 1 auto;
  min-height: 0;
}
.mi-thumb {
  width: 84px;
  flex: 0 0 84px;
  align-self: stretch;
  height: auto;
  min-height: 84px;
  object-fit: cover;
  /* Faces sit in the upper half of a mugshot, so a tall crop is anchored above
     centre to keep the head in frame instead of cropping it. */
  object-position: center 30%;
  background: #0f1114;
  filter: grayscale(0.35) contrast(1.02);
}
.mi-thumb-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  color: #6c7686;
  background: linear-gradient(135deg, #22262e, #171a1f);
  font-size: 1.4rem;
  letter-spacing: 1px;
}

.mi-row .card-body { min-height: auto; }
.mi-row-name { min-width: 180px; }

/* Detail */
.mi-portrait { width: 100%; max-height: 380px; object-fit: cover; filter: grayscale(0.25); }
.mi-portrait-ph {
  height: 260px;
  font-size: 4rem;
  color: #4a525f;
  background: linear-gradient(135deg, #22262e, #171a1f);
}
/* Case-facts list as a 2-column grid so each label/value row lines up */
.mi-facts {
  display: grid;
  grid-template-columns: minmax(130px, 32%) 1fr;
  column-gap: 1.25rem;
}
.mi-facts dt, .mi-facts dd {
  margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--mi-border);
}
/* Similar-offenders panel (left column) */
.mi-similar .list-group-item { border-color: var(--mi-border); padding: 0.6rem 0.75rem; }
.mi-similar .list-group-item:hover { background: rgba(220,53,69,0.08) !important; }
.mi-similar-thumb {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 7px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22262e, #171a1f);
  color: #6c7686; font-weight: 700; font-size: 0.8rem;
}
.mi-similar-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4); }
.mi-similar-sum {
  line-height: 1.35; margin-top: 2px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Related-search buttons on the profile */
.mi-related-btn {
  text-align: left;
  padding: 0.7rem 1rem;
  font-weight: 500;
  white-space: normal;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.mi-related-btn .bi { font-size: 1.1rem; flex: 0 0 auto; }

/* Adjacent-record buttons: the name is the point, so let it take the space
   and truncate rather than wrap the button to two ragged lines. */
.mi-adjacent { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.mi-adjacent .mi-adjacent-text { min-width: 0; flex: 1 1 auto; }
.mi-adjacent-thumb {
  width: 38px; height: 38px; flex: 0 0 38px; border-radius: 7px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #22262e, #171a1f);
  color: #6c7686; font-weight: 700; font-size: 0.78rem;
}
.mi-adjacent-thumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.4); }
.mi-adjacent .mi-adjacent-text small {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1.2;
}
.mi-adjacent-next { justify-content: flex-end; }
.mi-adjacent.disabled { opacity: 0.45; pointer-events: none; }

.mi-facts dt { color: #8b93a1; font-weight: 600; }
.mi-facts dd { color: #e6e8eb; }
.mi-facts dt:last-of-type, .mi-facts dd:last-of-type { border-bottom: 0; }
@media (max-width: 575px) {
  .mi-facts { grid-template-columns: 1fr; }
  .mi-facts dt { border-bottom: 0; padding-bottom: 0; }
  .mi-facts dd { padding-top: 0.15rem; }
}
.mi-bignum { margin-top: 0.75rem; }
.mi-bignum span {
  font-size: 2.4rem; font-weight: 800; color: var(--mi-accent); line-height: 1;
  display: inline-block; margin-right: 0.4rem;
}
.mi-bignum small { color: #8b93a1; }
.mi-summary { line-height: 1.7; color: #d6d9de; }
.mi-summary > :last-child { margin-bottom: 0; }
.mi-summary h1, .mi-summary h2, .mi-summary h3 { font-size: 1.05rem; font-weight: 600; margin-top: 1rem; }
.mi-summary ul, .mi-summary ol { padding-left: 1.25rem; }
.mi-summary li { margin-bottom: 0.3rem; }
.mi-summary a { color: #e79aa2; }

/* Quotations. Case records reproduce witness, court and press quotes verbatim,
   so they need to read as quotes rather than blend into the narrative. */
.mi-summary blockquote {
  margin: 0.9rem 0;
  padding: 0.55rem 0.95rem;
  border-left: 3px solid #7d5a5f;
  background: rgba(231, 154, 162, 0.06);
  color: #e4e7ec;
  font-style: italic;
}
.mi-summary blockquote > :last-child { margin-bottom: 0; }
.mi-summary blockquote p { margin-bottom: 0.5rem; }
/* Doubled "> > " markers are normalised before rendering (see
   _collapse_doubled_markers in app.py), so any nesting that reaches the browser
   is genuine and just needs a lighter indent bar. */
.mi-summary blockquote blockquote { margin: 0.5rem 0; border-left-width: 2px; }

/* Contents index for long, section-structured case records. */
.mi-toc {
  margin: 0 0 1.25rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--mi-border);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}
.mi-toc-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8b93a1;
  margin-bottom: 0.4rem;
}
.mi-toc ol {
  margin: 0;
  padding-left: 1.1rem;
  columns: 2;
  column-gap: 1.6rem;
  font-size: 0.92rem;
}
@media (max-width: 576px) { .mi-toc ol { columns: 1; } }
.mi-toc li { margin-bottom: 0.2rem; break-inside: avoid; }
.mi-toc .mi-toc-sub { list-style: none; margin-left: 0.6rem; font-size: 0.86rem; }
.mi-toc .mi-toc-sub::before { content: "↳ "; color: #6b7280; }
.mi-toc a { color: #cfd5de; text-decoration: none; }
.mi-toc a:hover { color: #e79aa2; text-decoration: underline; }
/* Anchor jumps should not hide the heading under the sticky header. */
.mi-summary h1[id], .mi-summary h2[id], .mi-summary h3[id] { scroll-margin-top: 5rem; }
.mi-char-note {
  max-width: 62ch;
  color: #c9ced6;
  border-left: 3px solid var(--mi-accent);
  padding: 0.15rem 0 0.15rem 0.85rem;
  line-height: 1.65;
}
.mi-char-link { color: #e79aa2; text-decoration: none; border-bottom: 1px dotted #7d5a5f; }
.mi-char-link:hover { color: #fff; border-bottom-color: currentColor; }
.mi-facts dd > :last-child { margin-bottom: 0; }
.mi-facts dd p { margin-bottom: 0.25rem; }

.mi-code {
  background: #0f1114;
  border: 1px solid var(--mi-border);
  border-radius: 8px;
  padding: 1rem;
  color: #b7c0cd;
  font-size: 0.82rem;
}

/* Featured-case carousel — red→grey gradient, photo on the right */
.mi-carousel-wrap {
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(220,53,69,0.42), transparent 55%),
    linear-gradient(115deg, #3a161b 0%, #2c1a20 30%, #232227 62%, #1a1c21 100%);
  border-color: var(--mi-border) !important;
}
.mi-slide { display: block; position: relative; height: 340px; overflow: hidden; }
.mi-slide-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; height: 100%;
}
/* No max-width: the slide is a flex row, so capping the text left a dead band
   between where the excerpt wrapped and the portrait. The .container and the
   2rem flex gap bound the measure instead. */
.mi-slide-text { flex: 1 1 auto; min-width: 0; }
.mi-slide-photo { flex: 0 0 auto; }
.mi-slide-photo img {
  width: 232px; height: 264px; object-fit: cover; object-position: center 22%;
  border-radius: 12px; border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 34px rgba(0,0,0,0.5);
  filter: grayscale(0.35) contrast(1.03);
}
.mi-slide-name {
  font-weight: 800; letter-spacing: 0.3px; color: #fff; margin-bottom: 0.5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,0.45); font-size: clamp(1.5rem, 4vw, 2.4rem);
}
/* The excerpt is clamped to three lines so a long summary cannot push the
   "View profile" button out of the fixed-height slide.
   Hiding it on small screens is done here rather than with Bootstrap's
   .d-none.d-md-block: those utilities set `display: block !important`, which
   silently beat the `-webkit-box` the clamp needs, so the clamp never applied
   and the text ran to eight lines on a narrow desktop window. */
.mi-slide-excerpt {
  display: none;
  color: #e2e2e6; line-height: 1.55; margin-bottom: 0.75rem;
  -webkit-line-clamp: 3; line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 768px) {
  .mi-slide-excerpt { display: -webkit-box; }
}
.carousel-indicators { margin-bottom: 0.5rem; }
.carousel-indicators [data-bs-target] { width: 26px; height: 4px; border-radius: 2px; }
@media (max-width: 575px) { .mi-slide { height: 300px; } }

/* Stats / charts page */
.mi-chart-card {
  background: var(--mi-panel); border: 1px solid var(--mi-border);
  border-radius: 12px; padding: 1rem 1.1rem;
}
.mi-chart-card h2 { font-size: 1rem; font-weight: 600; }
.mi-chart-holder { position: relative; width: 100%; }
.mi-chart-card table { font-size: 0.82rem; }
.mi-chart-card summary { cursor: pointer; color: #8b93a1; font-size: 0.8rem; }

/* World choropleth */
.mi-worldmap { width: 100%; height: 620px !important; }
.mi-worldmap .jvm-zoom-btn { background: #2a2f38; border: 1px solid var(--mi-border); color: #fff; }
.mi-worldmap .jvm-tooltip { background: #0f1114; border: 1px solid var(--mi-accent); color: #f2f3f5; font-family: system-ui, sans-serif; }
.mi-map-legend {
  display: inline-block; width: 120px; height: 10px; border-radius: 5px;
  background: linear-gradient(90deg, #ff4d5e, rgb(74,26,30));
}
@media (max-width: 575px) { .mi-worldmap { height: 300px; } }

.mi-timeline-tool,
.mi-timeline-focus,
.mi-timeline-results {
  background: var(--mi-panel);
  border: 1px solid var(--mi-border);
  border-radius: 12px;
  padding: 1rem;
}
.mi-timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--mi-border);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent),
    #101216;
}
.mi-timeline-plot {
  position: relative;
  min-height: 236px;
}
.mi-timeline-tick {
  position: absolute;
  top: 32px;
  bottom: 20px;
  border-left: 1px solid rgba(255,255,255,0.09);
}
.mi-timeline-tick-label {
  position: absolute;
  top: 9px;
  transform: translateX(-50%);
  color: #8b93a1;
  font-size: 0.75rem;
  white-space: nowrap;
}
.mi-timeline-marker {
  position: absolute;
  border: 0;
  padding: 0;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.65);
  cursor: pointer;
}
.mi-timeline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.mi-timeline-span {
  height: 8px;
  min-width: 12px;
  border-radius: 999px;
  transform: translateY(-50%);
}
.mi-timeline-day { background: #dc3545; }
.mi-timeline-month { background: #e0a337; }
.mi-timeline-year { background: #6c7686; }
.mi-timeline-span.mi-timeline-day,
.mi-timeline-span.mi-timeline-month,
.mi-timeline-span.mi-timeline-year {
  background: linear-gradient(90deg, rgba(220,53,69,0.95), rgba(224,163,55,0.55));
}
.mi-timeline-marker:hover,
.mi-timeline-marker.is-active {
  z-index: 2;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(220,53,69,0.35);
}
.mi-timeline-focus {
  overflow: hidden;
  padding: 0;
  position: sticky;
  top: 82px;
}
.mi-timeline-focus-photo {
  height: 220px;
  background: linear-gradient(135deg, #22262e, #171a1f);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6c7686;
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 1px;
}
.mi-timeline-focus-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: grayscale(0.28) contrast(1.04);
}
.mi-timeline-list {
  display: grid;
  gap: 0.5rem;
  max-height: 680px;
  overflow: auto;
  padding-right: 0.2rem;
}
.mi-timeline-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--mi-border);
  border-radius: 8px;
  background: #151820;
  cursor: pointer;
}
.mi-timeline-result:hover,
.mi-timeline-result.is-active {
  border-color: var(--mi-accent);
  background: rgba(220,53,69,0.08);
}
.mi-timeline-result h3 {
  line-height: 1.25;
}
@media (max-width: 991px) {
  .mi-timeline-focus {
    position: static;
  }
}
@media (max-width: 575px) {
  .mi-timeline-tool,
  .mi-timeline-focus,
  .mi-timeline-results {
    padding: 0.85rem;
  }
  .mi-timeline-focus {
    padding: 0;
  }
  .mi-timeline-focus-photo {
    height: 180px;
  }
}

.mi-footer { background: var(--mi-panel); border-color: var(--mi-border) !important; }

@media (max-width: 575px) {
  .mi-thumb { width: 64px; flex-basis: 64px; min-height: 64px; }
}

/* ---------------------------------------------------------------- tag cloud
   Sized server-side on a log scale (see _tag_cloud in app.py) and laid out by
   normal inline flow. No client-side measuring pass, so nothing reflows after
   paint and the layout is identical on every load. */
.mi-cloud {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.mi-cloud li { display: inline-flex; }
.mi-cloud-tag {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid var(--mi-border);
  border-radius: 5px;
  /* em-based so the box grows with the step size without a rule per step */
  padding: 0.22em 0.5em;
  background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.mi-cloud-tag:hover, .mi-cloud-tag:focus-visible {
  color: #fff;
  border-color: var(--mi-accent);
  background: rgba(220, 53, 69, 0.10);
}
.mi-cloud-count { color: #6f7887; font-weight: 400; font-size: 0.82em; }

/* "On this day" month strip. Reuses the tag-cloud chip but with no size step:
   a date carries no frequency, so every day is the same weight and only the
   day being viewed is marked. */
.mi-day-current {
  border-color: var(--mi-accent);
  background: rgba(220, 53, 69, 0.16);
  color: #fff;
  font-weight: 600;
}
.mi-cloud-tag:hover .mi-cloud-count { color: #c9ced6; }

/* Six log-scaled steps. The floor is 0.85rem — below that the tail becomes
   decoration rather than something you can read or tap. */
.mi-cloud-1 { font-size: 0.85rem; color: #7e8794; }
.mi-cloud-2 { font-size: 0.98rem; color: #939cab; }
.mi-cloud-3 { font-size: 1.15rem; color: #a9b2c0; font-weight: 500; }
.mi-cloud-4 { font-size: 1.4rem;  color: #c2a3a8; font-weight: 500; }
.mi-cloud-5 { font-size: 1.7rem;  color: #d98d97; font-weight: 600; }
.mi-cloud-6 { font-size: 2.05rem; color: #e5636f; font-weight: 700; }
@media (max-width: 575px) {
  .mi-cloud { gap: 0.4rem; }
  .mi-cloud-5 { font-size: 1.45rem; }
  .mi-cloud-6 { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) { .mi-cloud-tag { transition: none; } }