/* ===========================================================================
   Oromia Human Rights Monitor — global styles
   Earth-toned, archival theme: warm charcoal/near-black for authority and
   structural chrome (header/hero/footer/sidebar) — a neutral, no-hue anchor
   rather than a generic corporate navy — warm amber/ochre as the single
   interactive/focus accent (links, primary actions, focus rings), and a
   muted brick-red reserved for urgency (critical severity, the
   report/submit CTA — framed explicitly as an "emergency submit" action).
   The surface system is a warm parchment/cream rather than clinical
   white-gray, meant to read like a documentary record rather than a
   dashboard. Text meets WCAG AAA on its surfaces (#1F1B16 on #FAF6EE / #FFFFFF).

   Same three-tier type system as before (unchanged): Space Grotesk for
   headings, Inter for body copy, JetBrains Mono (uppercase, letter-spaced)
   for short English UI chrome (nav, badges, eyebrow) — never applied to
   Amharic/Tigrinya body text, since that letter-spaced treatment breaks
   Ethiopic script legibility. Fonts are self-hosted (public/fonts/); this
   site's CSP is locked to 'self' for style-src/font-src.
   =========================================================================== */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('/fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk'; font-style: normal; font-weight: 500 700; font-display: swap;
  src: url('/fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --primary: #2A2420;       /* Warm charcoal/near-black — authority, structural chrome */
  --primary-dark: #15110D;
  --secondary: #B7791F;     /* Warm amber/ochre — action & focus accent */
  --secondary-dark: #8A5A17;
  --alert: #9A2E1F;         /* Muted brick red — urgency, without panic */
  --alert-light: #B23A28;
  --green: #2F7D52;         /* semantic "safe / verified" accent */
  --green-dark: #1F5E3B;
  --blue: #3D6B63;
  --ink: #1F1B16;           /* Warm near-black text — WCAG AAA on our surfaces */
  --slate: #6B5E4F;         /* muted warm secondary text */
  --dim: #A79881;
  --bg: #FAF6EE;            /* warm parchment page background */
  --card: #FFFFFF;          /* white card surfaces */
  --card-2: #F3ECDD;        /* secondary warm surface (bubbles, composer, hover tints) */
  --field-bg: #FFFFFF;
  --field-border: #D8CBB0;  /* visible warm neutral border */
  --placeholder: #A79881;
  --border: #E7DCC5;
  --border-soft: #F0E8D6;
  --shadow: 0 1px 3px rgba(31, 27, 22, .08), 0 8px 24px rgba(31, 27, 22, .06);
  --radius: 12px;
  --mono: 'JetBrains Mono', 'Courier New', monospace;
  --heading: 'Space Grotesk', 'Inter', sans-serif;

  --sev-low: #2F7D52;
  --sev-medium: #92600F;
  --sev-high: #C2410C;
  --sev-critical: #9A2E1F;

  --green-text: #1F5E3B;
  --orange-text: #92600F;
  --red-text: #7A2318;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0; padding-bottom: var(--ticker-offset, 0px);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  transition: padding-bottom .2s ease;
}

/* Headings get a distinct display face (Space Grotesk) rather than just a
   bolder cut of the body font. Ethiopic secondary text nested in a heading
   (via .i18n-sub) simply falls back per-glyph to a system font, same as it
   already does for Inter — Space Grotesk carries no extra risk there. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--heading); font-weight: 700; letter-spacing: -.01em;
}

a { color: var(--secondary); }

.container { width: min(1140px, 92%); margin: 0 auto; }

/* ---- Header / nav ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 238, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); }
.brand .logo {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  display: grid; place-items: center; color: #fff; font-weight: 700;
}
.brand .logo svg { width: 22px; height: 22px; }
.brand-logo { width: 46px; height: 46px; border-radius: 50%; object-fit: contain; background: #fff; flex-shrink: 0; }
.login-card .brand-logo { width: 96px; height: 96px; border-radius: 50%; }
.sidebar .brand-logo { width: 40px; height: 40px; }

/* Radar-scan animation around the logo: a rotating amber sweep plus a
   pulsing "ping" ring, suggesting active monitoring — decorative only,
   drawn entirely outside the logo's own (opaque) box so the real mark
   never gets obscured. Respects prefers-reduced-motion via the global
   rule further down, same as every other animation on the site. */
.radar-logo { position: relative; display: inline-flex; flex-shrink: 0; }
.radar-logo::before, .radar-logo::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%; pointer-events: none;
}
.radar-logo::before {
  background: conic-gradient(from 0deg, rgba(183, 121, 31, .5), transparent 30%, transparent 100%);
  animation: radar-spin 3s linear infinite;
}
.radar-logo::after {
  border: 1.5px solid rgba(183, 121, 31, .55);
  animation: radar-pulse 2.4s ease-out infinite;
}
@keyframes radar-spin { to { transform: rotate(360deg); } }
@keyframes radar-pulse {
  0% { transform: scale(.85); opacity: .9; }
  70% { opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}
.brand strong {
  font-size: .92rem; display: block; line-height: 1.3;
  font-family: var(--mono); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--primary);
}
.brand span { font-size: .76rem; color: var(--slate); }

.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-links a {
  text-decoration: none; color: var(--slate); font-weight: 500;
  padding: 8px 12px; border-radius: 8px; font-size: .82rem;
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .06em;
}
.nav-links a:hover { background: rgba(183, 121, 31, .1); color: var(--secondary); }
.nav-links a.active { color: var(--secondary); background: rgba(183, 121, 31, .12); }

/* Hit area is padded to ~44x44px (WCAG touch-target minimum) without changing
   the glyph's visual size — this is the actual mobile nav control. */
.nav-toggle {
  display: none; background: none; border: 0; font-size: 1.6rem; cursor: pointer; color: var(--ink);
  width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.nav-toggle:hover { background: rgba(183, 121, 31, .1); color: var(--secondary); }

/* Shared sizing for hand-authored inline SVG icons (replaces emoji glyphs so
   icons render consistently across platforms and can be themed via currentColor). */
.icon-inline { width: 1em; height: 1em; vertical-align: -0.15em; flex-shrink: 0; }

.lang-switch { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.lang-switch-label { font-size: .7rem; font-weight: 700; color: var(--slate); letter-spacing: .04em; font-family: var(--mono); }
.lang-select {
  padding: 7px 10px; border: 1.5px solid var(--field-border); border-radius: 8px;
  font: inherit; font-size: .85rem; background: var(--field-bg); color: var(--ink); cursor: pointer;
  transition: border-color .15s ease;
}
.lang-select:hover { border-color: var(--secondary); }
.lang-select:focus { outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(183,121,31,.18); }
.sidebar .lang-switch { display: flex; margin-bottom: 10px; }
.sidebar .lang-switch-label { color: #D9CEB3; }
.sidebar .lang-select { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.25); flex: 1; }
.login-card .lang-switch { display: flex; justify-content: center; margin-bottom: 16px; }

/* Secondary-language text shown directly beneath the English text. */
.i18n-sub {
  display: block; font-size: .8em; font-weight: 400; font-style: normal;
  opacity: .85; line-height: 1.3; margin-top: 1px;
}
.hero h1 .i18n-sub { font-size: .5em; opacity: .88; margin-top: 4px; }
.hero p .i18n-sub { font-size: .85em; opacity: .85; margin-top: 4px; }
.eyebrow .i18n-sub { font-size: .9em; letter-spacing: normal; font-family: 'Inter', sans-serif; }
.section-head h2 .i18n-sub, .card h3 .i18n-sub, .modal-head h3 .i18n-sub { font-size: .62em; }
.section-head p .i18n-sub { font-size: .88em; }
.btn .i18n-sub { font-size: .8em; opacity: .9; margin-top: 0; }
.nav-links a .i18n-sub { font-size: .72em; text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif; }
.brand strong .i18n-sub { text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif; font-weight: 400; color: var(--slate); }
.field label .i18n-sub, .kpi .label .i18n-sub, th .i18n-sub { font-size: .85em; }
th .i18n-sub { text-transform: none; letter-spacing: 0; font-family: 'Inter', sans-serif; }

/* ---- Ticker: a news-style crawl of the latest verified reports, pinned to
   the bottom of the viewport (position:fixed) so it stays visible while the
   page scrolls. Unlike the old Quick Exit bar (fixed at the *top*, fighting
   the header's own sticky offset), a bottom-fixed bar only needs to reserve
   its own height — done via the --ticker-offset custom property, which JS
   sets to the bar's rendered height once it actually has content to show
   (0 by default, so nothing shifts when there are no verified reports yet).
   body's padding-bottom uses the same variable so the footer is never
   covered, and the consent banner (also fixed-bottom) reads it too so the
   two stack instead of overlapping. Hidden entirely (JS) until there is at
   least one verified report to show. The loop is two copies of the same
   item sequence animated from translateX(0) to translateX(-50%) —
   seamless, since -50% of a doubled track is exactly one copy's width.
   prefers-reduced-motion freezes it via the existing global rule below;
   the pause/play toggle is the WCAG 2.2.2 control for everyone else, since
   moving content needs an on-screen way to stop it regardless of that OS
   setting. */
.ticker-bar {
  display: none; align-items: stretch;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; width: 100%;
  background: var(--primary-dark); border-top: 1px solid rgba(255,255,255,.08);
  overflow: hidden;
}
.ticker-label {
  flex-shrink: 0; display: flex; align-items: center; gap: 6px;
  background: var(--secondary); color: #fff;
  font-family: var(--mono); font-weight: 700; font-size: .72rem;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 0 14px; white-space: nowrap;
}
.ticker-label svg { width: 15px; height: 15px; flex-shrink: 0; }
.ticker-toggle {
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  width: 38px; background: rgba(255,255,255,.06); color: #D9CEB3; border: 0;
  border-right: 1px solid rgba(255,255,255,.08); cursor: pointer;
}
.ticker-toggle:hover { background: rgba(255,255,255,.12); color: #fff; }
.ticker-toggle svg { width: 15px; height: 15px; }
.ticker-toggle .icon-play[hidden], .ticker-toggle .icon-pause[hidden] { display: none; }
.ticker-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; }
.ticker-track {
  display: inline-flex; align-items: center; gap: 36px; white-space: nowrap;
  padding: 0 18px; animation: ticker-scroll 46s linear infinite;
}
.ticker-bar.paused .ticker-track, .ticker-bar:hover .ticker-track, .ticker-bar:focus-within .ticker-track {
  animation-play-state: paused;
}
.ticker-item { display: inline-flex; align-items: center; gap: 8px; color: #D9CEB3; text-decoration: none; font-size: .84rem; }
.ticker-item:hover { color: #fff; }
.ticker-item .sev-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.ticker-item .ref { font-family: var(--mono); color: #B4A788; font-size: .76rem; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 560px) {
  .ticker-label span:not(.icon-inline) { display: none; }
  .ticker-item { font-size: .8rem; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; justify-content: center;
  border: 1px solid transparent; cursor: pointer;
  padding: 11px 20px; border-radius: 10px; font-size: .95rem; font-weight: 600;
  text-decoration: none; transition: transform .05s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--secondary); color: #fff; }
.btn-primary:hover { background: var(--secondary-dark); }
/* "Gold" class name kept for HTML compatibility, but it's the platform's
   highest-emphasis call to action — used for "Report a violation" / "Submit
   a report" — exactly the "emergency submit button" role the brick-red is for. */
.btn-gold { background: var(--alert); color: #fff; }
.btn-gold:hover { background: var(--alert-light); }
.btn-outline { background: #fff; border-color: var(--field-border); color: var(--primary); }
.btn-outline:hover { border-color: var(--secondary); color: var(--secondary); }
.btn-danger { background: var(--alert); color: #fff; }
.btn-ghost { background: transparent; color: var(--slate); }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: .85rem; }
/* Disabled state (e.g. submit buttons mid-request) needs to look clearly
   inert, not just "the same button, coincidentally not responding." */
.btn:disabled, .btn[disabled] {
  opacity: .5; cursor: not-allowed; filter: none;
  transform: none !important; pointer-events: none;
}

/* ---- Hero ---- */
/* Warm charcoal anchor — the one deliberately dark section on an
   otherwise warm, light site, doing exactly what "Primary: establishes
   authority, security, stability" is for as the first thing a visitor sees. */
.hero {
  background: linear-gradient(160deg, var(--primary), var(--primary-dark));
  color: #fff; padding: 84px 0 90px;
}
/* Hero is centered for a clean, professional landing. */
.hero .container { text-align: center; }
.hero h1 { font-size: clamp(1.85rem, 4vw, 2.85rem); line-height: 1.14; margin: 0 auto 18px; max-width: 34ch; text-wrap: balance; }
.hero p { font-size: 1.12rem; max-width: 58ch; opacity: .95; margin: 0 auto 30px; color: #D9CEB3; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .18em;
  font-size: .74rem; font-weight: 600; color: #E8C784;
  font-family: var(--mono);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2);
  padding: 6px 14px; border-radius: 999px; margin-bottom: 20px;
}

/* ---- Sections ---- */
section { padding: 64px 0; }
.section-head { text-align: center; max-width: 64ch; margin: 0 auto 40px; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 12px; }
.section-head p { color: var(--slate); margin: 0; }

/* ---- Stat cards ---- */
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.stat {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 26px; text-align: center; box-shadow: var(--shadow);
}
.stat .num { font-size: 2.4rem; font-weight: 800; color: var(--secondary); line-height: 1; font-family: var(--mono); }
.stat .label { color: var(--slate); margin-top: 8px; font-size: .92rem; }

/* ---- Feature / card grid ---- */
.grid { display: grid; gap: 20px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 24px; box-shadow: var(--shadow);
}
.card h3 { margin: 0 0 8px; }
.card .icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(183, 121, 31, .12); color: var(--secondary); margin-bottom: 14px;
}
.card .icon svg { width: 24px; height: 24px; }

/* Homepage feature/why cards are centered for a cohesive, professional look. */
.grid .card { text-align: center; }
.grid .card .icon { margin-left: auto; margin-right: auto; }

/* ---- Incident cards ---- */
.incident {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px;
  transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
}
/* Homepage renders .incident as a whole-card <a> — give it visible hover/focus
   feedback so it reads as clickable, not just as a static summary tile. */
a.incident:hover, a.incident:focus-visible {
  border-color: var(--secondary); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(31,27,22,.12), 0 0 0 1px rgba(183,121,31,.25);
}
.incident .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.incident h3 { margin: 0; font-size: 1.08rem; }
.incident .desc { color: var(--slate); font-size: .94rem; margin: 0; }
.incident .footer { display: flex; justify-content: space-between; color: var(--slate); font-size: .82rem; margin-top: auto; }
.incident .view-btn { align-self: flex-start; margin-top: 2px; }

/* ---- Media "picture box": fixed-ratio thumbnail that shows the whole photo
   without cropping (object-fit: contain); clicking opens the lightbox at full size. ---- */
.media-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 8px; }
.media-box {
  position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
  background: #1F1B16; border: 1px solid var(--border); cursor: pointer; padding: 0;
  display: block; width: 100%;
}
.media-box img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .2s ease; }
.media-box:hover img, .media-box:focus-visible img { transform: scale(1.05); }
.media-box .play-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(31, 27, 22, .45); color: #fff;
}
.media-box .play-icon svg { width: 34px; height: 34px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.media-box .video-thumb-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--primary), var(--primary-dark)); color: #fff; font-size: .78rem; text-align: center; padding: 8px;
}

/* ---- Lightbox: full image "zoomed to fit" (object-fit: contain, no crop) ---- */
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(31, 27, 22, .92); display: none;
  align-items: center; justify-content: center; z-index: 300; padding: 24px;
}
.lightbox-overlay.show { display: flex; }
.lightbox-content { max-width: 96vw; max-height: 94vh; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.lightbox-content img { max-width: 96vw; max-height: 88vh; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.lightbox-content .video-frame { width: 100%; aspect-ratio: 16 / 9; max-height: 88vh; border-radius: 8px; overflow: hidden; }
.lightbox-content .video-frame iframe { width: 100%; height: 100%; border: 0; }
.lightbox-close {
  position: absolute; top: 16px; right: 16px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  background: rgba(255,255,255,.14); color: #fff; border: 0; cursor: pointer; font-size: 1.6rem; line-height: 1;
}
.lightbox-close:hover { background: rgba(255,255,255,.24); }
.lightbox-caption { color: #D9CEB3; font-size: .85rem; text-align: center; }

/* ---- Comment thread (social-style: avatar + rounded bubble + text-link
   action row underneath). ---- */
.comment-thread { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.comment-row { display: flex; gap: 10px; align-items: flex-start; }

.comment-avatar {
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .8rem; letter-spacing: .02em;
}
.comment-avatar.avatar-org { background: var(--primary); }
.comment-avatar.avatar-org svg { width: 18px; height: 18px; }
.comment-replies .comment-avatar { width: 30px; height: 30px; font-size: .72rem; }
.comment-replies .comment-avatar.avatar-org svg { width: 15px; height: 15px; }

.comment-col { flex: 1; min-width: 0; }
.comment-bubble {
  position: relative; display: inline-block; max-width: 100%;
  background: var(--card-2); border: 1px solid var(--border); border-radius: 16px; padding: 8px 14px 10px;
}
.comment.is-admin .comment-bubble { background: rgba(183, 121, 31, .06); border-color: rgba(183, 121, 31, .25); }
.comment-author { display: block; font-weight: 700; font-size: .85rem; }
.comment.is-admin .comment-author { color: var(--secondary); }
.comment-body { font-size: .92rem; white-space: pre-wrap; margin: 2px 0 0; word-break: break-word; }

/* Reaction-count pill floats on the bubble's bottom edge, shown only when
   there is at least one vote. */
.comment-reactions {
  position: absolute; right: 10px; bottom: -9px; display: inline-flex; align-items: center; gap: 5px;
  background: var(--card); border: 1px solid var(--border); border-radius: 999px;
  padding: 1px 7px; font-size: .74rem; color: var(--slate); box-shadow: 0 1px 3px rgba(31,27,22,.12);
}
.comment-reactions .icon-inline { width: .85em; height: .85em; }
.comment-reactions .reaction-like { color: var(--green-text); }
.comment-reactions .reaction-dislike { color: var(--red-text); }

.comment-actionbar {
  display: flex; align-items: center; gap: 6px; margin: 10px 0 0 14px; flex-wrap: wrap;
  font-size: .78rem; color: var(--slate);
}
.comment-actionbar > * + *::before { content: '·'; margin-right: 6px; color: var(--border); }
.comment-action-link {
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-weight: 700; font-size: .78rem; color: var(--slate);
}
.comment-action-link:hover { text-decoration: underline; }
.comment-action-link.active-like { color: var(--green-text); }
.comment-action-link.active-dislike { color: var(--red-text); }
.comment-time { color: var(--slate); }

.comment-replies { margin: 10px 0 0 20px; padding-left: 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 10px; }

/* ---- Comment composer: small avatar + a rounded pill-style input. ---- */
.composer-row { display: flex; gap: 10px; align-items: flex-start; }
.composer-input-wrap { flex: 1; }
.composer-input-wrap textarea, .composer-input-wrap input {
  width: 100%; border: 1.5px solid var(--field-border); border-radius: 18px; padding: 9px 16px;
  font: inherit; font-size: .9rem; background: var(--field-bg); color: var(--ink); resize: none;
}
.composer-input-wrap textarea::placeholder, .composer-input-wrap input::placeholder { color: var(--placeholder); }
.composer-input-wrap textarea:focus, .composer-input-wrap input:focus {
  outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(183,121,31,.15);
}
.composer-input-wrap input[type="text"] { margin-bottom: 6px; }
.composer-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.vote-btn.active-dislike { background: #F7E0DA; border-color: var(--sev-critical); color: var(--red-text); }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .72rem; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  background: #F3ECDD; color: var(--slate);
  font-family: var(--mono); text-transform: uppercase; letter-spacing: .04em;
}
.badge-cat { background: #E2ECE9; color: #2C5F58; }
.sev-low { background: #E2F3E5; color: var(--green-text); }
.sev-medium { background: #FBEEDA; color: var(--orange-text); }
.sev-high { background: #FBE4D2; color: var(--sev-high); }
.sev-critical { background: #F7E0DA; color: var(--red-text); }

.status-pending { background: #F3ECDD; color: var(--slate); }
.status-under_review { background: #FBEEDA; color: var(--orange-text); }
.status-verified { background: #E2F3E5; color: var(--green-text); }
.status-rejected { background: #F7E0DA; color: var(--red-text); }

/* ---- Forms ---- */
.form-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 32px; box-shadow: var(--shadow); max-width: 720px; margin: 0 auto;
}
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .92rem; }
.field .hint { font-weight: 400; color: var(--slate); font-size: .82rem; }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--field-border); border-radius: 10px;
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--field-bg);
}
.field input::placeholder, .field textarea::placeholder { color: var(--placeholder); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #A79881; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--secondary); box-shadow: 0 0 0 3px rgba(183,121,31,.15);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; align-items: flex-start; gap: 10px; }
.check input { width: auto; margin-top: 4px; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.check-grid .check {
  border: 1.5px solid var(--field-border); border-radius: 10px; padding: 12px 14px; margin: 0;
  background: var(--field-bg); cursor: pointer;
}
.check-grid .check:hover { border-color: #A79881; }
@media (max-width: 560px) { .check-grid { grid-template-columns: 1fr; } }

/* ---- Alerts ---- */
.alert { padding: 14px 16px; border-radius: 10px; margin-bottom: 18px; font-size: .92rem; display: none; }
.alert.show { display: block; }
.alert-success { background: #E2F3E5; color: #1F5E3B; border: 1px solid #9FD1AE; }
.alert-error { background: #F7E0DA; color: var(--alert); border: 1px solid #E3A78F; }
.alert-info { background: #E2ECE9; color: #2C5F58; border: 1px solid #A9CCC2; }
.draft-notice.show { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---- Filters bar ---- */
.filters { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 26px; align-items: end; }
.filters .field { margin: 0; }

/* ---- Banners ---- */
/* Safety notice — urgency without alarm: a soft brick-red tint, not a
   solid red block. */
.notice {
  background: #FAEDE7; border: 1px solid #E3A78F; color: var(--alert);
  border-radius: 10px; padding: 12px 16px; font-size: .9rem; margin-bottom: 22px;
}

/* ---- Security / anonymity indicator tags ----
   Placed next to submit fields to reassure without overstating — copy is
   deliberately accurate (checked against the actual codebase): HTTPS is
   transport-layer encryption only (not end-to-end — monitors do read report
   content to verify it), and IP addresses are not stored for report
   submissions specifically. */
.security-badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 22px; }
.sec-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: #EAF1EE; border: 1px solid #BBD8CE; color: #2C5F58;
  font-size: .76rem; font-weight: 600; padding: 5px 11px; border-radius: 999px;
}
.sec-badge svg { width: 13px; height: 13px; flex-shrink: 0; }

/* ---- Footer ---- */
.site-footer { background: var(--primary-dark); color: #B4A788; padding: 48px 0 28px; margin-top: 40px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.site-footer h4 { color: #fff; margin: 0 0 12px; font-size: .95rem; }
.site-footer a { color: #B4A788; text-decoration: none; display: block; padding: 4px 0; font-size: .9rem; }
.site-footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 20px; font-size: .82rem; opacity: .85; }

/* ===========================================================================
   Dashboard
   =========================================================================== */
.dash { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.sidebar { background: var(--primary-dark); color: #B4A788; padding: 22px 16px; display: flex; flex-direction: column; }
.sidebar .brand { color: #fff; margin-bottom: 26px; }
.sidebar .brand strong { color: #fff; }
.sidebar .brand span { color: #B4A788; }
.sidebar nav a {
  display: flex; align-items: center; gap: 10px; color: #D9CEB3; text-decoration: none;
  padding: 10px 12px; border-radius: 9px; margin-bottom: 4px; font-size: .92rem;
}
.sidebar nav a:hover, .sidebar nav a.active { background: rgba(255,255,255,.08); color: #fff; }
.sidebar .user-box { margin-top: auto; font-size: .82rem; color: #B4A788; padding-top: 20px; }

.dash-main { padding: 28px 32px; overflow-x: auto; }
.dash-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; flex-wrap: wrap; gap: 12px; }
.dash-head h1 { margin: 0; font-size: 1.5rem; }

/* Auto-fit keeps KPI cards responsive without per-row column overrides. */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 26px; }
.kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.kpi .num { font-size: 1.8rem; font-weight: 800; font-family: var(--mono); color: var(--secondary); }
.kpi .label { color: var(--slate); font-size: .82rem; margin-top: 4px; }

.tr-tables { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }

/* ---- Table ---- */
.table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 13px 16px; font-size: .9rem; border-bottom: 1px solid var(--border); }
th { background: #F3ECDD; color: var(--slate); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-family: var(--mono); }
tbody tr:hover { background: #F3ECDD; cursor: pointer; }
tbody tr:last-child td { border-bottom: 0; }

.pagination { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 16px; flex-wrap: wrap; }
.pagination-center { justify-content: center; }

/* ---- Traffic: bar chart & mini tables ---- */
.bar-chart { display: flex; align-items: flex-end; gap: 2px; height: 160px; overflow-x: auto; }
.bar-chart .bar {
  flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0;
  background: linear-gradient(180deg, var(--secondary), var(--primary));
  transition: opacity .12s ease; align-self: flex-end;
}
.bar-chart .bar:hover { opacity: .75; }
.mini-table { width: 100%; border-collapse: collapse; }
.mini-table td { padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: .88rem; }
.mini-table td:first-child { word-break: break-all; }
.mini-table td:last-child { text-align: right; color: var(--slate); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 12px; }
.mini-table tr:last-child td { border-bottom: 0; }

/* ---- Modal ---- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(31, 27, 22, .5); display: none;
  align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto;
}
.modal-overlay.show { display: flex; }
.modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); max-width: 680px; width: 100%;
  box-shadow: 0 20px 60px rgba(31,27,22,.25);
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 24px; }
.modal-foot { padding: 18px 24px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; }
/* Padded to a ~44x44px hit area (WCAG touch-target minimum) while the glyph
   itself stays visually small. */
.close-x {
  background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--slate); line-height: 1;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; margin: -10px -10px -10px 0;
}
.close-x:hover { background: #F3ECDD; color: var(--ink); }

/* Evidence display in the report detail modal */
.evidence-grid { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.evidence-item-wrap { width: 130px; }
.evidence-item { display: inline-block; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.evidence-item img { width: 110px; height: 110px; object-fit: cover; display: block; }
.evidence-file {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: #F3ECDD; text-decoration: none; color: var(--secondary);
  font-size: .85rem; word-break: break-all;
}
.evidence-file:hover { border-color: var(--secondary); }

/* File input styling */
input[type="file"] {
  width: 100%; padding: 10px; border: 1.5px dashed var(--field-border); border-radius: 10px;
  background: #F3ECDD; font: inherit; font-size: .9rem; cursor: pointer; color: var(--ink);
}
input[type="file"]:hover { border-color: #A79881; }
input[type="file"]:focus { outline: none; border-color: var(--secondary); }

.detail-row { display: flex; padding: 8px 0; border-bottom: 1px dashed var(--border); gap: 16px; }
.detail-row .k { width: 150px; color: var(--slate); font-size: .85rem; flex-shrink: 0; }
.detail-row .v { font-size: .92rem; }

/* ---- Login ---- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px;
  background: linear-gradient(160deg, var(--primary), var(--primary-dark));
}
.login-card { background: #fff; border-radius: 18px; padding: 36px; width: min(420px, 100%); box-shadow: 0 24px 60px rgba(31,27,22,.35); }
.login-card .brand { justify-content: center; margin-bottom: 8px; }
.login-card h1 { text-align: center; font-size: 1.4rem; margin: 8px 0 4px; }
.login-card .sub { text-align: center; color: var(--slate); font-size: .9rem; margin: 0 0 24px; }

.muted { color: var(--slate); }
.center { text-align: center; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.hidden { display: none !important; }
/* Honeypot: kept in the layout (unlike display:none) and off-screen so most
   bots that only skip hidden/display:none fields still fill it in; humans
   never see or tab into it (aria-hidden + tabindex="-1"). */
.hp { position: absolute; left: -9999px; top: -9999px; height: 0; width: 0; overflow: hidden; }
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Legal pages ---- */
.legal { max-width: 820px; margin: 0 auto; }
.legal h1 { font-size: 1.9rem; margin: 0 0 6px; }
.legal .effective { color: var(--slate); font-size: .9rem; margin: 0 0 8px; }
.legal h2 { font-size: 1.15rem; margin: 28px 0 8px; }
.legal h3 { font-size: 1rem; margin: 18px 0 6px; }
/* Cap prose measure to ~68-75 characters/line — the 820px container alone
   runs paragraphs to ~95-100 chars, past the comfortable reading range. */
.legal p, .legal li { color: var(--ink); max-width: 70ch; }
.legal ul { padding-left: 20px; }
.legal address { font-style: normal; }
.legal .note {
  background: #F3ECDD; border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; font-size: .9rem; color: var(--slate); margin: 18px 0;
}

/* ---- Footer legal area ---- */
.footer-legal { text-align: center; }
.org-identity { color: #B4A788; font-size: .85rem; max-width: 72ch; margin: 0 auto 12px; }
.legal-links { display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: center; margin-bottom: 12px; }
.legal-links a { color: #D9CEB3; text-decoration: none; padding: 2px 0; }
.legal-links a:hover { color: #fff; }
.footer-copy { font-size: .82rem; opacity: .85; }

/* ---- Consent / privacy banner ---- */
.consent-banner {
  position: fixed; left: 0; right: 0; bottom: var(--ticker-offset, 0px); z-index: 200;
  transition: bottom .2s ease;
  background: var(--primary-dark); color: #fff; padding: 13px 18px;
  display: flex; gap: 14px 20px; align-items: center; justify-content: center; flex-wrap: wrap;
  box-shadow: 0 -4px 18px rgba(31,27,22,.25); font-size: .88rem;
}
.consent-banner > span { max-width: 70ch; }
.consent-banner a { color: #E8C784; }
.consent-actions { display: flex; gap: 12px; align-items: center; }
.consent-banner .i18n-sub { opacity: .78; }

/* ---- Accessibility ---- */
.skip-link {
  position: absolute; left: 8px; top: -64px; z-index: 999;
  background: var(--secondary); color: #fff; padding: 10px 16px;
  border-radius: 0 0 10px 10px; text-decoration: none; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 0; }
/* Always-visible keyboard focus indicator. Amber is the platform's
   dedicated "action & focus" color, so this is a direct semantic match, not
   a repurposed brand accent. A white hairline keeps it visible against the
   dark charcoal hero/footer/sidebar zones without doing anything on the light zones. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible, .lang-select:focus-visible {
  outline: 3px solid var(--secondary); outline-offset: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
}
/* Screen-reader-only text */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 20px; }
  .field-row { grid-template-columns: 1fr; }

  /* Collapsing top navigation */
  .nav-links {
    position: absolute; top: 68px; left: 0; right: 0; background: var(--bg);
    flex-direction: column; align-items: stretch; padding: 12px; gap: 4px;
    border-bottom: 1px solid var(--border); display: none;
    box-shadow: var(--shadow); max-height: calc(100vh - 68px); overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links .lang-switch { margin: 6px 0 0; }
  .nav-toggle { display: flex; }

  /* Dashboard: turn the sidebar into a horizontal, scrollable top bar */
  .dash { grid-template-columns: 1fr; }
  .sidebar {
    flex-direction: row; align-items: center; gap: 8px;
    padding: 10px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    position: sticky; top: 0; z-index: 30;
  }
  .sidebar .brand { display: none; }
  .sidebar nav { display: flex; flex-direction: row; gap: 4px; flex: 1; }
  .sidebar nav a { white-space: nowrap; padding: 8px 12px; margin: 0; }
  .sidebar .user-box {
    margin: 0; padding: 0; display: flex; align-items: center; gap: 8px;
    border: 0; white-space: nowrap;
  }
  .sidebar .user-box #who { display: none; }
  .sidebar .lang-switch { margin: 0; }
  .dash-main { padding: 18px 16px; }
  .dash-head h1 { font-size: 1.25rem; }
}

@media (max-width: 560px) {
  .stats-grid { grid-template-columns: 1fr; }
  .container { width: 92%; }
  section { padding: 44px 0; }
  .form-card { padding: 22px 18px; }
  .modal-overlay { padding: 16px 10px; }
  .modal-head, .modal-body, .modal-foot { padding-left: 18px; padding-right: 18px; }
  .modal-foot { flex-wrap: wrap; }
  .modal-foot .btn { flex: 1; }
  .detail-row { flex-direction: column; gap: 2px; }
  .detail-row .k { width: auto; }
  .brand strong { font-size: .98rem; }
  .brand > span > span { display: none; } /* hide tagline on very small screens */
  .hero { padding: 60px 0 64px; }
  .consent-banner { padding: 11px 14px; font-size: .82rem; gap: 10px; max-height: 52vh; overflow-y: auto; text-align: center; }
  .consent-actions { width: 100%; justify-content: center; }
}