/* Bangla Files — archive look: paper, ink, redaction and rubber stamps.
   Chart and status colours follow the validated data-viz palette:
   - legal stages before an outcome use one blue ramp (light → dark = further along),
   - outcomes use the fixed status colours (critical red, good green, serious orange),
   - religious setting uses categorical slots in fixed order, "not religious" is neutral grey. */

:root {
  --paper: #f4f1ea;
  --paper-2: #ebe6da;
  --card: #fffdf8;
  --ink: #1d1b18;
  --ink-2: #4a463f;
  --ink-3: #7a746a;
  --rule: #d6cfbf;
  --grid: #e1e0d9;
  --redact: #111;
  --accent: #a32020;
  --focus: #1f5fbf;

  /* legal status */
  --s-reported: #86b6ef;
  --s-case_filed: #5598e7;
  --s-arrested: #2a78d6;
  --s-charged: #184f95;
  --s-absconding: #ec835a;
  --s-convicted: #d03b3b;
  --s-acquitted: #0ca30c;

  /* ordinal ramp (funnel), sequential ramp (map shading, heatmap) */
  --ord-1: #86b6ef; --ord-2: #5598e7; --ord-3: #2a78d6; --ord-4: #1c5cab; --ord-5: #104281;
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #5598e7; --seq-4: #256abf; --seq-5: #104281;

  /* categorical */
  --cat-1: #2a78d6; --cat-2: #eb6834;
  --rs-islamic: #2a78d6; --rs-hindu: #eb6834; --rs-christian: #1baf7a; --rs-buddhist: #eda100; --rs-none: #a39d92;
  --bar: #2a78d6;

  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: "IBM Plex Sans", "Noto Sans Bengali", system-ui, -apple-system, "Segoe UI", sans-serif;
  --radius: 6px;
  --shadow: 0 1px 0 var(--rule), 0 10px 30px -18px rgba(0,0,0,.35);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16150f;
    --paper-2: #1f1d17;
    --card: #23211a;
    --ink: #eee9dd;
    --ink-2: #c8c1b2;
    --ink-3: #958e80;
    --rule: #3a372d;
    --grid: #2f2c24;
    --redact: #000;
    --accent: #e0574f;
    --focus: #7fb0ff;

    --s-reported: #1c5cab;
    --s-case_filed: #2a78d6;
    --s-arrested: #5598e7;
    --s-charged: #86b6ef;

    --ord-1: #1c5cab; --ord-2: #2a78d6; --ord-3: #3987e5; --ord-4: #6da7ec; --ord-5: #9ec5f4;
    --seq-1: #184f95; --seq-2: #256abf; --seq-3: #3987e5; --seq-4: #6da7ec; --seq-5: #b7d3f6;

    --cat-1: #3987e5; --cat-2: #d95926;
    --rs-islamic: #3987e5; --rs-hindu: #d95926; --rs-christian: #199e70; --rs-buddhist: #c98500; --rs-none: #6f6a60;
    --bar: #3987e5;
    --shadow: 0 1px 0 var(--rule), 0 10px 30px -18px rgba(0,0,0,.8);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
html[lang="bn"] body { font-family: "Noto Sans Bengali", var(--sans); font-size: 16px; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 8px; top: 8px; background: var(--card); padding: 6px 10px; z-index: 9999; }

/* ---------- icons ---------- */
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic.sm { width: 15px; height: 15px; }
.ic.xs { width: 13px; height: 13px; vertical-align: -2px; }
.ic.lg { width: 34px; height: 34px; stroke-width: 1.4; }
[data-i] { display: inline-flex; }

/* ---------- header ---------- */
.top {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 20px;
  border-bottom: 2px solid var(--ink);
  background: var(--paper);
  position: sticky; top: 0; z-index: 1000;
}
.brand-link { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { font-family: var(--mono); letter-spacing: -3px; font-size: 22px; color: var(--redact); }
.brand strong { display: block; font-family: var(--mono); font-size: 18px; letter-spacing: .04em; text-transform: uppercase; }
.brand small { display: block; color: var(--ink-3); font-size: 12px; max-width: 36ch; line-height: 1.3; }
.tabs { display: flex; gap: 2px; margin-left: auto; }
.tabs a {
  text-decoration: none; padding: 7px 12px; border-radius: var(--radius);
  font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px;
}
html[lang="bn"] .tabs a { font-family: inherit; text-transform: none; font-size: 15px; }
.tabs a:hover { background: var(--paper-2); }
.tabs a.on { background: var(--ink); color: var(--paper); }
.top-actions { display: flex; gap: 8px; align-items: center; }

.btn {
  font: inherit; font-size: 13px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  padding: 6px 12px; border-radius: var(--radius); text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn.sm { padding: 4px 9px; font-size: 12.5px; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn.ghost:hover:not(:disabled) { border-color: var(--ink); }
.btn:disabled { opacity: .4; cursor: default; }
.stamp-btn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.link { font: inherit; font-size: 13px; background: none; border: 0; color: var(--ink-3); text-decoration: underline; cursor: pointer; padding: 0; }
.pill { background: var(--accent); color: #fff; border-radius: 10px; font-size: 11px; padding: 0 6px; min-width: 18px; text-align: center; }
.pill:empty { display: none; }
.sdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; background: var(--sc, var(--ink-3)); box-shadow: 0 0 0 1.5px var(--card); }

.info-btn {
  border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--ink-3);
  display: inline-flex; align-items: center;
}
.info-btn:hover { color: var(--ink); }
.info-btn .ic { width: 14px; height: 14px; }

/* ---------- layout ---------- */
.layout { flex: 1; display: grid; grid-template-columns: 280px 1fr; min-height: 0; }
.layout.no-filters { grid-template-columns: 1fr; }
.layout.no-filters .filters, .layout.no-filters .toolbar { display: none; }

.filters {
  border-right: 1px solid var(--rule); padding: 14px 16px 40px;
  background: var(--paper-2);
  position: sticky; top: 62px; align-self: start;
  max-height: calc(100vh - 62px); overflow-y: auto;
}
.filters-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.filters-head h2 { font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; margin: 0; margin-right: auto; display: flex; gap: 6px; align-items: center; }
.search-wrap { display: flex; align-items: center; gap: 6px; border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius); padding: 0 8px; margin-bottom: 12px; color: var(--ink-3); }
.search-wrap:focus-within { border-color: var(--ink-3); }
.search { flex: 1; min-width: 0; font: inherit; padding: 8px 2px; border: 0; background: transparent; color: var(--ink); outline: none; }
.fgroup { border-top: 1px solid var(--rule); padding: 8px 0; }
.fhead { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.fhead .ic { color: var(--ink-3); }
.fgroup summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.fgroup summary::-webkit-details-marker { display: none; }
.fgroup summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); }
.fgroup[open] summary::after { content: "–"; }
.fgroup .sel { color: #fff; background: var(--accent); border-radius: 8px; font-size: 11px; padding: 0 6px; margin-left: 4px; }
.fopts { margin-top: 6px; display: flex; flex-direction: column; gap: 1px; max-height: 240px; overflow-y: auto; }
.fopts label { display: flex; gap: 7px; align-items: center; font-size: 13px; cursor: pointer; padding: 2px 0; }
.fopts label .ic { color: var(--ink-3); }
.fopts label .olab { min-width: 0; }
.fopts label .n { margin-left: auto; color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.fopts label.zero { color: var(--ink-3); }
.yr { display: flex; gap: 8px; margin-top: 6px; }
.yr label { font-size: 12px; color: var(--ink-3); display: flex; flex-direction: column; flex: 1; }
.yr select, .toolbar select {
  font: inherit; font-size: 13px; padding: 5px 6px; border: 1px solid var(--rule);
  background: var(--card); color: var(--ink); border-radius: var(--radius);
}
.toggle { display: flex; gap: 7px; align-items: center; font-size: 13px; padding: 10px 0; border-top: 1px solid var(--rule); cursor: pointer; }
.toggle.sm { border: 0; padding: 0; }

.main { min-width: 0; padding: 0 20px 30px; }
.toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--rule); margin-bottom: 14px;
}
.count { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--ink-2); }
.chipbar { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--card); border-radius: 14px; padding: 2px 6px 2px 10px;
}
.fchip:hover { border-color: var(--accent); color: var(--accent); }
.toolbar-right { margin-left: auto; display: flex; gap: 8px; }
.only-mobile { display: none; }

/* ---------- files view ---------- */
.files { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px; align-items: start; }
.case-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.case-row {
  display: flex; gap: 10px; width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--sc, var(--rule));
  border-radius: var(--radius); padding: 9px 11px;
  transition: transform .12s ease, box-shadow .12s ease;
}
.case-row:hover { border-color: var(--ink-3); border-left-color: var(--sc); transform: translateX(2px); box-shadow: var(--shadow); }
.case-row.on { outline: 2px solid var(--ink); outline-offset: -1px; }
.row-ic { width: 34px; height: 34px; border-radius: 50%; background: var(--paper-2); display: grid; place-items: center; flex: none; color: var(--ink-2); }
.row-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.case-row .meta { display: flex; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); align-items: center; }
.vtick { color: var(--s-acquitted); display: inline-flex; }
.case-row .t { display: block; font-weight: 600; font-size: 14px; line-height: 1.35; }
.case-row .who { display: flex; gap: 5px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.sbadge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em; }
html[lang="bn"] .sbadge { font-family: inherit; text-transform: none; }
.empty { padding: 30px; text-align: center; color: var(--ink-3); border: 1px dashed var(--rule); border-radius: var(--radius); }

.sheet {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 14px 28px 30px; position: sticky; top: 78px;
  max-height: calc(100vh - 96px); overflow-y: auto; box-shadow: var(--shadow);
}
.sheet:focus { outline: none; }
.sheet .placeholder { color: var(--ink-3); text-align: center; padding: 70px 0; font-family: var(--mono); font-size: 13px; }
.sheet-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--rule); margin-bottom: 14px; }
.sheet-actions .spacer { flex: 1; }
.sheet-head { border-bottom: 2px solid var(--ink); padding-bottom: 12px; margin-bottom: 12px; }
.sheet-head .no { font-family: var(--mono); font-size: 12px; color: var(--ink-3); letter-spacing: .06em; }
.sheet-head h2 { margin: 4px 0 8px; font-size: 21px; line-height: 1.25; }
.stamp-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.stamp {
  display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; font-size: 13px; color: var(--ink); border: 2.5px solid var(--sc);
  padding: 3px 10px; border-radius: 3px; transform: rotate(-3deg); background: color-mix(in srgb, var(--sc) 12%, transparent);
}
.stamp .ic { color: var(--sc); }
html[lang="bn"] .stamp { font-family: inherit; letter-spacing: .02em; }
.vbadge { display: inline-flex; gap: 5px; align-items: center; font-size: 12px; padding: 2px 8px; border-radius: 12px; border: 1px solid var(--rule); color: var(--ink-2); }
.vbadge.yes .ic { color: var(--s-acquitted); }
.vbadge.partial, .vtick.partial { opacity: .85; }
.vbadge.partial .ic, .vtick.partial { color: var(--ink-2); }
.wait { display: flex; gap: 8px; align-items: center; background: var(--paper-2); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 14px; font-size: 14px; }
.wait .ic { color: var(--ink-3); }
.wait.open { border-left: 3px solid var(--s-absconding); }
.facts { display: grid; grid-template-columns: 190px 1fr; gap: 8px 16px; margin: 0 0 16px; font-size: 14px; }
.facts dt { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); padding-top: 2px; display: flex; gap: 6px; }
html[lang="bn"] .facts dt { font-family: inherit; text-transform: none; font-size: 13px; }
.facts dd { margin: 0; }
.acc > div { display: flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; }
.acc .charge { color: var(--ink-3); }
.redact { background: var(--redact); color: transparent; user-select: none; border-radius: 1px; padding: 0 4px; }
.redact-note { font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.sheet h3 { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); margin: 22px 0 8px; border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
html[lang="bn"] .sheet h3 { font-family: inherit; text-transform: none; font-size: 14px; }
.sheet p { margin: 0 0 10px; max-width: 72ch; }
.tl { list-style: none; padding: 0; margin: 0 0 0 6px; border-left: 2px solid var(--rule); }
.tl li { position: relative; padding: 0 0 12px 18px; font-size: 14px; }
.tl li::before { content: ""; position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink-3); }
.tl li.verdict::before { background: var(--s-convicted); border-color: var(--s-convicted); }
.tl .d { font-family: var(--mono); font-size: 12px; color: var(--ink-3); display: block; }
.tl .gap { position: absolute; left: -2px; top: -12px; transform: translateX(-100%); font-family: var(--mono); font-size: 10px; color: var(--ink-3); padding-right: 8px; white-space: nowrap; }
@media (max-width: 800px) { .tl .gap { position: static; transform: none; display: block; padding: 0; } }
.srcs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.srcs li { display: flex; gap: 10px; font-size: 14px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 10px; }
.src-ic { color: var(--ink-3); padding-top: 2px; }
.srcs .k { font-family: var(--mono); font-size: 11px; color: var(--ink-3); text-transform: uppercase; display: block; }
.srcs a { word-break: break-word; }
.vnote { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 6px; margin-top: 10px !important; }
.presume { font-size: 12.5px; color: var(--ink-3); border-left: 3px solid var(--rule); padding-left: 10px; margin-top: 18px !important; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { font-size: 12px; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 10px; padding: 0 8px; }

.media { display: grid; gap: 12px; }
.media figure { margin: 0; }
.media figcaption { font-size: 12.5px; color: var(--ink-3); margin-top: 4px; }
.media img { max-width: 100%; border-radius: var(--radius); display: block; }
.m-play { width: 100%; aspect-ratio: 16/9; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); display: grid; place-content: center; justify-items: center; gap: 8px; cursor: pointer; color: var(--ink-2); }
.m-play:hover { color: var(--accent); }
.media iframe { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); }
.m-audio { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.media-none, .media-policy { display: flex; gap: 7px; align-items: center; font-size: 13px; color: var(--ink-3); margin: 0 !important; }
.media-policy { font-size: 12px; }
.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.rel { text-align: left; cursor: pointer; border: 1px solid var(--rule); border-left: 3px solid var(--sc); background: var(--paper); border-radius: var(--radius); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
.rel:hover { border-color: var(--ink-3); border-left-color: var(--sc); }
.rel .k { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.rel .t { font-size: 13px; font-weight: 600; line-height: 1.3; }

/* ---------- overview ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-bottom: 18px; }
.kpi {
  text-align: left; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; position: relative;
}
button.kpi { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
button.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.kpi-ic { color: var(--ink-3); }
.kpi-v { font-size: 28px; font-weight: 600; line-height: 1.1; margin-top: 4px; }
.kpi-l { font-size: 12.5px; color: var(--ink-2); }
.kpi-s { font-size: 12px; color: var(--ink-3); font-family: var(--mono); }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; }
.chart { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.chart.wide { grid-column: 1 / -1; }
.chart h3 { margin: 0 0 2px; font-size: 15px; }
.chart .sub { font-size: 12.5px; color: var(--ink-3); margin: 0 0 12px; }
.chart .src { font-size: 12px; color: var(--ink-3); margin: 8px 0 0; }
.chart .src a { color: var(--ink-3); }
.svgc { width: 100%; height: auto; display: block; overflow: visible; }
.svgc .grid { stroke: var(--grid); stroke-width: 1; }
.svgc .base { stroke: var(--ink-3); stroke-width: 1; }
.svgc .axis { fill: var(--ink-3); font-size: 10.5px; font-family: var(--mono); }
.svgc .hitbox { fill: transparent; }
.svgc .hit { cursor: pointer; outline: none; }
.svgc .hit:hover .hitbox, .svgc .hit:focus .hitbox { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.svgc .seg { stroke: var(--card); stroke-width: 1; }
.svgc .line { fill: none; stroke-width: 2; stroke-linejoin: round; }
.svgc .pt { stroke: var(--card); stroke-width: 2; }
.svgc .dot { stroke: var(--card); stroke-width: 1.5; }
.svgc .dotg:hover .dot, .svgc .dotg:focus .dot { r: 7; }
.svgc .dlabel { fill: var(--ink-2); font-size: 11px; }
.svgc .cross { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.clegend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; }
.clegend span { display: inline-flex; align-items: center; gap: 6px; }
.hbars { display: flex; flex-direction: column; gap: 4px; }
.hb { display: grid; grid-template-columns: minmax(110px, 170px) 1fr 34px; gap: 8px; align-items: center; font-size: 13px; text-align: left; background: none; border: 0; padding: 3px 4px; border-radius: 4px; cursor: pointer; }
.hb:hover, .hb:focus-visible { background: var(--paper-2); }
.hb.static { cursor: default; }
.hb.static:hover { background: none; }
.hb .lab { display: flex; align-items: center; gap: 6px; line-height: 1.2; }
.hb .lab .ic { color: var(--ink-3); }
.hb .track, .fn-row .track { background: var(--paper-2); height: 14px; border-radius: 2px; overflow: hidden; }
.hb .fill, .fn-row .fill { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width .4s ease; }
.hb .v { font-family: var(--mono); font-size: 12px; text-align: right; }
.funnel { display: flex; flex-direction: column; gap: 8px; }
.fn-row { display: grid; grid-template-columns: minmax(130px, 190px) 1fr 70px; gap: 8px; align-items: center; font-size: 13px; }
.fn-row .lab { display: flex; gap: 6px; align-items: center; }
.fn-row .lab .ic { color: var(--ink-3); }
.fn-row .track { height: 18px; }
.fn-row .v { font-family: var(--mono); font-size: 12.5px; text-align: right; }
.fn-row small { color: var(--ink-3); }
.heat { display: grid; gap: 3px; font-size: 12px; }
.heat .hh { text-align: center; color: var(--ink-3); font-size: 11.5px; padding-bottom: 2px; }
.heat .hr { color: var(--ink-2); padding-right: 8px; align-self: center; white-space: nowrap; }
.hc { height: 34px; border: 0; border-radius: 3px; font-family: var(--mono); font-size: 12px; cursor: pointer; color: var(--ink); background: var(--paper-2); }
.hc:disabled { cursor: default; }
.hc.lv1 { background: var(--seq-1); } .hc.lv2 { background: var(--seq-2); }
.hc.lv3 { background: var(--seq-3); color: #fff; } .hc.lv4 { background: var(--seq-4); color: #fff; }
.hc.lv5, .hc.lv6 { background: var(--seq-5); color: #fff; }
@media (prefers-color-scheme: dark) {
  .hc.lv1, .hc.lv2, .hc.lv3 { color: #fff; } .hc.lv4, .hc.lv5, .hc.lv6 { color: #0b0b0b; }
}
.hc:not(:disabled):hover { outline: 2px solid var(--ink); }

/* ---------- tooltip, popover, toast ---------- */
.tip {
  position: fixed; z-index: 3000; pointer-events: none; max-width: 280px;
  background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 8px 10px; font-size: 12.5px; line-height: 1.4;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.5);
}
.tip .tr { display: flex; align-items: center; gap: 6px; }
.tip .tr b { margin-left: auto; padding-left: 12px; font-family: var(--mono); }
.tip .sdot { box-shadow: 0 0 0 1.5px var(--ink); }
.pop {
  position: absolute; z-index: 3000; background: var(--card); color: var(--ink); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); font-size: 13.5px;
}
.pop p { margin: 6px 0 8px; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3000; background: var(--ink); color: var(--paper); padding: 8px 16px; border-radius: 20px; font-size: 13px; }

/* ---------- map ---------- */
.map-wrap { display: grid; grid-template-columns: 1fr 300px; gap: 14px; }
.map { height: calc(100vh - 210px); min-height: 460px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); }
.map-panel { display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100vh - 210px); }
.map-controls { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 10px 12px; }
.seg-l { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ink-3); margin-bottom: 4px; }
.seg-b { display: flex; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.seg-b button { flex: 1; border: 0; background: transparent; padding: 5px 6px; font-size: 12px; cursor: pointer; }
.seg-b button + button { border-left: 1px solid var(--rule); }
.seg-b button.on { background: var(--ink); color: var(--paper); }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.shade-key { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-3); font-family: var(--mono); }
.shade-key:empty { display: none; }
.ramp { display: flex; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; }
.ramp i { width: 22px; height: 10px; display: block; }
.map-controls .btn { align-self: flex-start; }
.lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; border: 1px solid var(--rule); background: var(--card); border-radius: 14px; padding: 3px 9px; cursor: pointer; }
.lg b { font-family: var(--mono); font-weight: 400; color: var(--ink-3); }
.lg.off { opacity: .45; }
.lg.off .sdot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--sc); }
.lg:disabled { opacity: .3; cursor: default; }
.inview { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); margin: 4px 0 0; }
.mini-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; flex: 1; min-height: 120px; }
.mini-list button { width: 100%; text-align: left; display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.3; border: 1px solid var(--rule); background: var(--card); border-radius: var(--radius); padding: 6px 8px; cursor: pointer; }
.mini-list button:hover { border-color: var(--ink-3); }
.mini-list .sdot { margin-top: 3px; }
.mini-list b { font-family: var(--mono); font-weight: 600; font-size: 11px; }
.note { font-size: 12.5px; color: var(--ink-3); margin: 8px 0; }
.leaflet-container { font: inherit; background: var(--paper-2); }
.mk-wrap { background: none; border: 0; }
.mk {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--sc); color: #fff; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35);
  transition: transform .12s ease;
}
.mk .ic { width: 15px; height: 15px; stroke-width: 2; }
.mk-wrap:hover .mk, .mk-wrap.hl .mk { transform: scale(1.3); }
.mk-cl {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 13px;
  background: var(--ink); color: var(--paper); border: 3px solid color-mix(in srgb, var(--paper) 70%, transparent); box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.leaflet-popup-content-wrapper { border-radius: var(--radius); background: var(--card); color: var(--ink); }
.leaflet-popup-tip { background: var(--card); }
.leaflet-popup-content { margin: 12px 14px; font-size: 13px; }
.pp { display: flex; flex-direction: column; gap: 5px; }
.pp-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.pp-id { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.pp-t { font-size: 13.5px; line-height: 1.3; }
.pp-row { display: flex; gap: 6px; align-items: center; color: var(--ink-2); font-size: 12.5px; }
.pp .btn { align-self: flex-start; margin-top: 4px; color: var(--paper); }
.maptip { font-size: 12.5px; }

/* ---------- about ---------- */
.prose { max-width: 760px; padding-top: 18px; }
.prose h2 { font-size: 22px; margin: 0 0 10px; }
.prose h3 { font-size: 16px; margin: 24px 0 6px; }
.prose p, .prose li { color: var(--ink-2); }
.prose .box { background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: 12px 16px; border-radius: var(--radius); }
.gloss { display: grid; grid-template-columns: 200px 1fr; gap: 8px 16px; font-size: 14px; }
.gloss dt { font-weight: 600; display: flex; gap: 7px; align-items: center; }
.gloss dd { margin: 0; color: var(--ink-2); }

/* ---------- footer ---------- */
.foot { border-top: 2px solid var(--ink); padding: 14px 20px; font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot p { margin: 0; }
.foot .help { display: flex; gap: 6px; align-items: center; }
.foot .help strong { color: var(--accent); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .files { grid-template-columns: 1fr; }
  .sheet { position: fixed; inset: 0; top: 0; max-height: none; z-index: 2000; border-radius: 0; padding: 12px 16px 40px; }
  .sheet.closed { display: none; }
  .map-wrap { grid-template-columns: 1fr; }
  .map-panel { max-height: none; }
  .mini-list { max-height: 320px; }
}
@media (min-width: 1101px) { .sheet .x { display: none; } }

@media (max-width: 800px) {
  .top { padding: 8px 16px; gap: 8px; position: static; }
  .brand small { display: none; }
  .tabs { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .tabs a { flex: 1; justify-content: center; padding: 7px 4px; font-size: 12px; gap: 5px; }
  .top-actions { margin-left: auto; }
  .stamp-btn span[data-t] { display: none; }
  .layout { grid-template-columns: 1fr; }
  .filters { position: fixed; inset: 0; max-height: none; z-index: 2000; display: none; border: 0; }
  .filters.open { display: block; }
  .only-mobile { display: inline-flex; }
  .main { padding: 0 16px 24px; }
  .toolbar-right { margin-left: 0; width: 100%; }
  .chipbar { width: 100%; }
  .facts { grid-template-columns: 1fr; gap: 0; }
  .facts dd { margin-bottom: 10px; }
  .sheet-actions .btn { font-size: 12px; }
  .hb { grid-template-columns: 128px 1fr 28px; }
  .fn-row { grid-template-columns: 128px 1fr 62px; line-height: 1.2; }
  .charts { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .kpi-v { font-size: 24px; }
  .map { height: 62vh; min-height: 340px; }
  .gloss { grid-template-columns: 1fr; }
}

/* =====================================================================
   v3 — Home, two tiers, visual language of crime, punishment and grief
   ===================================================================== */
:root { --blood: #8b1116; --blood-2: #c0282e; --tape: #f2c200; --night: #1a0b0c; --night-2: #2a1012; }

.noscroll { overflow: hidden; }
.muted { color: var(--ink-3); }
.utag { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--s-absconding); border: 1px solid currentColor; border-radius: 3px; padding: 0 5px; }
html[lang="bn"] .utag { font-family: inherit; text-transform: none; font-size: 11.5px; }
.btn.sos { background: var(--blood-2); border-color: var(--blood-2); color: #fff; font-weight: 600; }
.btn.sos:hover { background: var(--blood); }
.btn.hot { background: var(--blood-2); border-color: var(--blood-2); color: #fff; font-weight: 600; padding: 10px 18px; font-size: 15px; }
.btn.hotghost { background: transparent; border-color: rgba(255,255,255,.55); color: #fff; padding: 10px 18px; font-size: 15px; }
.btn.hotghost:hover { background: rgba(255,255,255,.12); }

/* tier switch + quick filters */
.seg.tier { display: inline-flex; border: 1px solid var(--rule); border-radius: 20px; overflow: hidden; background: var(--card); }
.seg.tier button { border: 0; background: transparent; padding: 5px 12px; font-size: 13px; cursor: pointer; display: inline-flex; gap: 6px; align-items: baseline; }
.seg.tier button small { color: var(--ink-3); font-family: var(--mono); font-size: 10.5px; }
.seg.tier button.on { background: var(--ink); color: var(--paper); }
.seg.tier button.on small { color: inherit; opacity: .75; }
.quick { display: flex; gap: 6px; overflow-x: auto; padding: 0 0 12px; scrollbar-width: none; }
.quick::-webkit-scrollbar { display: none; }
body:not([data-view="files"]) .quick { display: none; }
.layout.no-filters .quick { display: none; }
.qchip { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--card); border: 1px solid var(--rule); border-radius: 20px; padding: 6px 12px; cursor: pointer; white-space: nowrap; }
.qchip:hover { border-color: var(--ink-3); }
.qchip.on { background: var(--blood-2); border-color: var(--blood-2); color: #fff; }
.qchip.sel { padding: 0 4px 0 12px; }
.qchip select { border: 0; background: transparent; color: inherit; font: inherit; padding: 6px 4px; max-width: 150px; cursor: pointer; }
.qchip.on select option { color: var(--ink); }

/* list rows and sheet extras */
.case-row.rep { border-left-style: dashed; background: color-mix(in srgb, var(--card) 70%, var(--paper)); }
.row-th { width: 74px; height: 50px; object-fit: cover; border-radius: 4px; flex: none; align-self: center; border: 1px solid var(--rule); }
.more { width: 100%; justify-content: center; padding: 10px; }
.uncheck { display: flex; gap: 9px; background: color-mix(in srgb, var(--s-absconding) 14%, var(--paper)); border-left: 4px solid var(--s-absconding); padding: 10px 12px; border-radius: var(--radius); font-size: 13px; margin: 0 0 14px; }
.uncheck .ic { color: var(--s-absconding); margin-top: 2px; }
.srcs li.has-th { align-items: stretch; }
.src-th { width: 112px; height: 72px; object-fit: cover; border-radius: 4px; flex: none; border: 1px solid var(--rule); }
@media (max-width: 500px) { .src-th { width: 84px; height: 56px; } }

/* ---------- home ---------- */
.home { padding-top: 0; }
.hero { position: relative; margin: 0 -20px; padding: 78px 20px 34px; color: #fff; overflow: hidden;
  background: radial-gradient(1200px 400px at 20% 0%, #3a1316 0%, var(--night) 60%, #0e0506 100%); }
.drips { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 130px; pointer-events: none; }
.drip { fill: var(--blood-2); transform-box: fill-box; transform-origin: top; animation: drip 2.6s cubic-bezier(.3,.7,.2,1) both; }
.drip.drop { animation-name: dripdrop; }
@keyframes drip { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes dripdrop { 0% { transform: translateY(-40px); opacity: 0; } 60% { opacity: 0; } 100% { transform: none; opacity: 1; } }
.hero-in { position: relative; max-width: 880px; margin: 0 auto; }
.hero-k { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #f0b9ba; }
html[lang="bn"] .hero-k { font-family: inherit; text-transform: none; font-size: 14px; letter-spacing: 0; }
.hero h1 { margin: 0 0 18px; font-size: clamp(26px, 4.6vw, 44px); line-height: 1.2; font-weight: 600; max-width: 22ch; }
.hero-big { display: flex; align-items: center; gap: 18px; margin: 4px 0 22px; flex-wrap: wrap; }
.hero-n { font-size: clamp(72px, 16vw, 132px); line-height: .95; font-weight: 700; color: var(--blood-2); text-shadow: 0 0 40px rgba(192,40,46,.45); font-variant-numeric: tabular-nums; }
.hero-cap { max-width: 34ch; font-size: 15px; line-height: 1.45; color: #e8d6d6; }
.hero-cap strong { display: block; margin-top: 6px; color: #fff; font-size: 17px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-note { margin: 18px 0 0; font-size: 13px; color: #cdb4b4; display: flex; gap: 6px; }

.hstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0; }
.hstat { text-align: left; display: flex; flex-direction: column; gap: 2px; background: var(--card); border: 1px solid var(--rule); border-top: 3px solid var(--blood-2); border-radius: var(--radius); padding: 12px 14px; cursor: pointer; }
.hstat:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.hstat .ic { color: var(--blood-2); }
.hstat b { font-size: 28px; line-height: 1.1; }
.hstat span { font-size: 12.5px; color: var(--ink-2); }

.home2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin: 18px 0; }
.home2.wide2 { grid-template-columns: 1fr 1fr; }
.card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px 18px; min-width: 0; }
.card h2, .sech { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 17px; }
.card h2 .ic, .sech .ic { color: var(--blood-2); }
.card p { margin: 0 0 10px; }
.bigselect { width: 100%; font: inherit; font-size: 16px; padding: 11px 12px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper); color: var(--ink); margin-bottom: 10px; }
.mydist-n { font-weight: 600; }
.helpbox { background: linear-gradient(160deg, color-mix(in srgb, var(--blood-2) 14%, var(--card)), var(--card)); border-color: color-mix(in srgb, var(--blood-2) 40%, var(--rule)); }
.hlmini { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hlm { display: inline-flex; gap: 7px; align-items: center; background: var(--blood-2); color: #fff; text-decoration: none; padding: 9px 14px; border-radius: 22px; font-weight: 600; font-size: 16px; }
.hlm:hover { background: var(--blood); }
.hcards { display: flex; flex-direction: column; gap: 8px; }
.hcard { display: flex; flex-direction: column; gap: 4px; text-decoration: none; background: var(--card); border: 1px solid var(--rule); border-left: 4px solid var(--sc); border-radius: var(--radius); padding: 10px 12px; }
.hcard:hover { border-color: var(--ink-3); border-left-color: var(--sc); box-shadow: var(--shadow); }
.hc-top { display: flex; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); align-items: center; }
.hc-t { font-weight: 600; font-size: 14px; line-height: 1.35; }
.hc-b { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.hc-b .utag, .hc-b .vtick { margin-left: auto; }

/* crime tape divider */
.tape { margin: 30px -20px 14px; padding: 6px 0; text-align: center; color: #111; font-weight: 700; letter-spacing: .12em; font-family: var(--mono); text-transform: uppercase; font-size: 13px;
  background: repeating-linear-gradient(-45deg, var(--tape) 0 16px, #111 16px 32px); position: relative; transform: rotate(-.6deg); box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.tape span { display: inline-block; background: var(--tape); padding: 3px 18px; }
html[lang="bn"] .tape { font-family: inherit; letter-spacing: .04em; text-transform: none; font-size: 15px; }
.wallnote { margin: 0 0 10px; font-size: 13px; }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.mark { aspect-ratio: 1; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--sc) 18%, var(--card)); color: var(--sc); border: 1.5px solid var(--sc); transition: transform .12s ease; }
.mark .ic { width: 24px; height: 24px; stroke-width: 1.8; }
.mark:hover, .mark:focus-visible { transform: scale(1.15) rotate(-3deg); background: var(--sc); color: #fff; }
.wallkey { margin-top: 12px; }
.wallkey .ic { color: var(--ink-3); }

/* memorial */
.memorial { margin: 34px -20px 0; padding: 30px 20px 36px; color: #efe3e3; text-align: center;
  background: radial-gradient(600px 220px at 50% 0%, #3b2a1a 0%, var(--night) 70%); }
.memorial h2 { display: flex; justify-content: center; gap: 10px; align-items: center; margin: 0 0 6px; font-size: 22px; }
.memorial p { max-width: 54ch; margin: 0 auto 20px; color: #cdb9b9; font-size: 14px; }
.candles { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.candle { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 132px; padding: 14px 8px; text-decoration: none; color: inherit; border-radius: var(--radius); background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); font-size: 12.5px; }
.candle:hover { background: rgba(255,255,255,.1); }
.candle b { font-size: 14px; }
.flame .ic { color: #f6c453; filter: drop-shadow(0 0 8px rgba(246,196,83,.7)); animation: flicker 2.4s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px rgba(246,196,83,.7)); } 45% { opacity: .82; } 60% { opacity: 1; filter: drop-shadow(0 0 14px rgba(246,196,83,.9)); } }

/* help dialog */
.helpwrap { position: fixed; inset: 0; z-index: 4000; background: rgba(10,4,5,.72); display: grid; place-items: center; padding: 16px; backdrop-filter: blur(3px); }
.help-card { position: relative; width: min(560px, 100%); max-height: 92vh; overflow-y: auto; background: var(--card); color: var(--ink); border-radius: 12px; padding: 24px 22px 22px; border-top: 6px solid var(--blood-2); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.help-card h2 { display: flex; gap: 10px; align-items: center; margin: 0 0 6px; font-size: 22px; }
.help-card h2 .ic { color: var(--blood-2); width: 26px; height: 26px; }
.help-x { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border: 0; background: var(--paper-2); border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.hls { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.hl { display: grid; grid-template-columns: 96px 1fr auto; gap: 10px; align-items: center; text-decoration: none; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 12px 14px; }
.hl:hover { border-color: var(--blood-2); }
.hl-n { display: flex; gap: 7px; align-items: center; font-size: 20px; font-weight: 700; color: var(--blood-2); }
.hl-t { font-size: 14px; line-height: 1.3; }
.hl-go { background: var(--blood-2); color: #fff; padding: 6px 12px; border-radius: 16px; font-size: 13px; font-weight: 600; }
.help-note { display: flex; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 8px 0 0; }
.help-note .ic { color: var(--ink-3); margin-top: 2px; }

/* ---------- phones: bottom navigation, bigger touch targets ---------- */
@media (max-width: 800px) {
  body { padding-bottom: 72px; }
  .top { padding: 8px 12px; gap: 8px; flex-wrap: nowrap; }
  .brand { min-width: 0; flex: 1; }
  .brand strong { font-size: 15px; }
  .brand-mark { font-size: 18px; }
  .top-actions { gap: 6px; }
  .top-actions .btn { padding: 8px 10px; min-height: 40px; }
  #helpBtn span[data-t] { display: none; }
  .stamp-btn { display: none; }
  .tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1500; order: 0; width: auto; margin: 0; gap: 0; overflow: visible;
    background: var(--paper); border-top: 2px solid var(--ink); padding: 4px 4px max(4px, env(safe-area-inset-bottom)); box-shadow: 0 -6px 20px rgba(0,0,0,.18); }
  .tabs a { flex: 1; flex-direction: column; gap: 2px; padding: 6px 2px; font-size: 11px; font-family: var(--sans); text-transform: none; letter-spacing: 0; border-radius: 8px; min-height: 52px; justify-content: center; }
  html[lang="bn"] .tabs a { font-size: 12px; }
  .tabs a .ic { width: 22px; height: 22px; }
  .tabs a.on { background: var(--blood-2); color: #fff; }
  .hero { margin: 0 -16px; padding: 62px 16px 28px; }
  .drips { height: 96px; }
  .hero-big { gap: 8px; }
  .hstats { grid-template-columns: repeat(2, 1fr); }
  .home2, .home2.wide2 { grid-template-columns: 1fr; }
  .tape { margin: 26px -16px 12px; }
  .memorial { margin: 28px -16px 0; }
  .toolbar { gap: 8px; }
  .seg.tier { width: 100%; }
  .seg.tier button { flex: 1; justify-content: center; padding: 9px 4px; min-height: 40px; }
  .count { width: 100%; order: 3; }
  .qchip { min-height: 38px; }
  .fopts label { padding: 7px 0; font-size: 14px; }
  .fgroup summary { padding: 6px 0; min-height: 36px; }
  .btn { min-height: 38px; }
  .case-row { padding: 12px; }
  .row-th { width: 60px; height: 42px; }
  .filters.open { display: block; top: 8vh; border-radius: 16px 16px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.4); inset: 8vh 0 0 0; }
  .hl { grid-template-columns: 1fr auto; }
  .hl-t { grid-column: 1 / -1; grid-row: 2; }
  .help-card { align-self: end; border-radius: 16px 16px 0 0; width: 100%; }
  .helpwrap { padding: 0; place-items: end center; }
  .sheet { padding-bottom: 90px; }
  .map-wrap { gap: 10px; }
  .toast { bottom: 84px; }
}
@media (prefers-reduced-motion: reduce) {
  .drip, .flame .ic { animation: none; }
  .case-row, .kpi, .hstat, .mark { transition: none; }
}

.submitbox { margin: 18px 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; border-left: 4px solid var(--tape); }

.mobile-search { display: none; }
@media (max-width: 800px) {
  .mobile-search { display: flex; width: 100%; order: -1; margin: 0; background: var(--card); }
  .mobile-search .search { padding: 11px 2px; font-size: 16px; }
  body[data-view="overview"] .mobile-search, body[data-view="map"] .mobile-search { display: none; }
}

/* ---------- headline cards: recreated mobile news cards, square ---------- */
.srccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 280px)); gap: 14px; margin: 0 0 10px; }
.srccard { margin: 0; }
.srccard figcaption { font-size: 12px; color: var(--ink-3); margin-top: 6px; line-height: 1.35; }
.hlcard { --oc: #444; display: flex; flex-direction: column; aspect-ratio: 1 / 1; width: 100%; background: #fff; color: #111; text-decoration: none;
  border: 1px solid #d9d4c8; border-top: 8px solid var(--oc); border-radius: 6px; overflow: hidden; padding: 14px 15px 12px; box-shadow: 0 2px 10px rgba(0,0,0,.14);
  transition: transform .14s ease, box-shadow .14s ease; }
a.hlcard:hover { transform: translateY(-3px) rotate(-.4deg); box-shadow: 0 10px 24px rgba(0,0,0,.28); }
.hl-bar { font-weight: 800; font-size: 14px; letter-spacing: .01em; color: var(--oc); margin-bottom: 10px; font-family: Georgia, "Times New Roman", serif; line-height: 1.1; }
.hl-txt { flex: 1; font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-size: 19px; line-height: 1.22; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 7; -webkit-box-orient: vertical; }
.hlcard.bn .hl-txt { font-family: "Noto Sans Bengali", var(--sans); font-size: 18px; line-height: 1.35; }
.hlcard.bn .hl-bar { font-family: "Noto Sans Bengali", var(--sans); }
.hl-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; color: #6b665b; font-family: var(--sans); border-top: 1px solid #e6e1d6; padding-top: 7px; margin-top: 8px; }
.hl-foot span:last-child { color: var(--oc); font-weight: 600; }
.o-ds  { --oc: #0f2a5e; } .o-tbs { --oc: #0b5a3b; } .o-pa  { --oc: #d11a21; } .o-bd  { --oc: #e4501e; }
.o-aj  { --oc: #c78500; } .o-unb { --oc: #17609a; } .o-ntv { --oc: #1b7a3a; } .o-nn  { --oc: #5a2d81; } .o-gen { --oc: #555; }
.hlcard.mini { width: 78px; height: 78px; flex: none; padding: 5px 5px 4px; border-top-width: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); align-self: center; }
.hlcard.mini .hl-bar { font-size: 6px; margin-bottom: 3px; }
.hlcard.mini .hl-txt { font-size: 7px; line-height: 1.2; -webkit-line-clamp: 6; }
.hlcard.mini.bn .hl-txt { font-size: 7px; line-height: 1.25; }
.hlcard.mini .hl-foot { font-size: 5px; padding-top: 2px; margin-top: 2px; }
@media (max-width: 500px) { .srccards { grid-template-columns: 1fr; } .srccard { max-width: 320px; } .hlcard.mini { width: 66px; height: 66px; } }

.ranote { background: var(--paper-2); border-left: 4px solid var(--s-case_filed); border-radius: var(--radius); padding: 2px 14px 10px; margin: 6px 0 14px; }
.ranote h3 { display: flex; gap: 6px; align-items: center; margin-top: 12px !important; border: 0 !important; }
.ranote p { margin: 0 0 6px; }
.ranote small { color: var(--ink-3); font-size: 12px; }

.statusbar { display: flex; gap: 3px; height: 22px; border-radius: 6px; overflow: hidden; margin: 6px 0 10px; }
.statusbar .sb { border: 0; padding: 0; background: var(--sc); min-width: 4px; cursor: pointer; }
.statusbar .sb:hover { filter: brightness(1.15); }

.subform { display: grid; gap: 12px; max-width: 640px; margin: 0 auto; }
.fld { display: grid; gap: 4px; font-size: 14px; }
.fld input, .fld select, .fld textarea, .subout { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); }
.chk { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; }
.hp { position: absolute; left: -9999px; }

.hero-note.asof { font-size: 12px; opacity: .8; max-width: 60ch; }
.toast { position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%); background: #222; color: #fff; padding: 8px 14px; border-radius: 8px; font-size: 14px; z-index: 50; }
@media print {
  .tabs, .bottomnav, header, .foot, #filters, .tierseg, #tierSeg, .btn, button { display: none !important; }
  body { background: #fff; color: #000; }
  #sheet { position: static; width: auto; max-height: none; overflow: visible; box-shadow: none; }
}

.insights { display: grid; gap: 14px; }
.insight { border-top: 1px solid var(--rule); padding-top: 10px; }
.insight h4 { margin: 0 0 4px; font-size: 15px; }
.insight h4 span { font-weight: 400; color: var(--ink-3); }
.insight p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.insight a { font-size: 13px; }

.defs { display: grid; gap: 10px; margin: 8px 0 18px; }
.def { border: 1px solid var(--rule); border-left: 4px solid #b9452f; border-radius: 8px; padding: 10px 12px; background: var(--card); }
.def-k { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #b9452f; font-weight: 600; }
.def h4 { margin: 2px 0 4px; font-size: 15px; }
.def h4 span { font-weight: 400; color: var(--ink-3); font-size: 13px; }
.def p { margin: 0 0 6px; font-size: 14px; line-height: 1.55; }
.def a { font-size: 13px; }

.researchlink { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.researchlink span { font-size: 14px; color: var(--ink-2); }
.researchlink b { color: var(--hot, #c0202e); }
.rhero { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin: 14px 0; }
.rgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.rgrid .wide { grid-column: 1 / -1; }
.squares { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; margin: 10px 0; max-width: 420px; }
.squares i { aspect-ratio: 1; background: var(--rule); border-radius: 2px; }
.squares i.on { background: #c0202e; }
.waitbars div { margin: 10px 0; }
.waitbars span { display: block; font-size: 13px; margin-bottom: 3px; }
.waitbars i { display: block; height: 14px; background: var(--cat-1); border-radius: 3px; }
.waitbars i.long { background: #c0202e; }
.rbars { display: grid; gap: 6px; margin: 8px 0; }
.rbar { display: grid; grid-template-columns: minmax(70px, 120px) 1fr auto; gap: 8px; align-items: center; font-size: 13px; }
.rbar .rt { background: var(--rule); border-radius: 4px; height: 16px; overflow: hidden; }
.rbar .rt i { display: block; height: 100%; border-radius: 4px; }
.rchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }

.foot .disc{font-size:.8rem;opacity:.85;max-width:60rem;margin:.4rem auto 0}