/* ============================================================
   BALTSEC Kiberincidentu reģistrs — public site

   Themed with the BALTSEC brand tokens (homepage/src/styles/tokens.css),
   reproduced here rather than imported because the two apps ship separately.
   The brand block below is verbatim; everything under it maps those brand
   values onto the token names the rest of this stylesheet already uses, so
   the components did not need rewriting to be rebranded.

   The site keeps its dark/light switch. Dark is the default and is the
   BALTSEC navy ground used across baltsec.lv; light mirrors the brand's
   .theme-light band (white ground, ocean accent) for long-form reading.
   ============================================================ */

:root {
  /* --- BALTSEC brand, verbatim ----------------------------------------- */
  --baltsec-navy: #001b3d;
  --baltsec-ocean: #1c6e96;
  --baltsec-cyan: #6ec1e4;
  --baltsec-steel: #7b8894;
  --baltsec-fog: #e9ebed;
  --baltsec-ink: #0a0e14;

  /* Navy-tinted neutral ramp (not generic gray). */
  --navy-80: #334964;
  --navy-60: #66768b;
  --navy-40: #99a4b1;
  --navy-20: #ccd1d8;
  --navy-10: #e6e8ec;
  --navy-05: #f2f4f5;

  /* --- Type ------------------------------------------------------------ */
  --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* --- Geometry — BALTSEC's scale, not the previous 6/10/16 ------------- */
  --radius-sm: 4px;   /* tags, inputs, small controls */
  --radius-md: 8px;   /* cards, buttons */
  --radius-lg: 8px;   /* large surfaces — the brand tops out at 8px */
  --radius-pill: 999px;

  --wrap: min(1180px, calc(100vw - 48px));
}

/* ------------------------------------------------------------------------
   Dark theme — the unconditional fallback, matching baltsec.lv's ground.

   Surface steps are mixed between two brand tokens rather than picked by eye,
   so every panel colour provably sits on the navy ramp: --baltsec-navy is the
   page, --navy-80 is the brand's own dark surface, and the registry's two
   intermediate card levels are interpolations between them.

   Status colours (pos/warn/neg) are ADDITIONS — the brand set has no semantic
   state palette, and this site has to distinguish confirmed / alleged /
   disputed records. They are tuned to sit beside cyan without competing with
   it. --baltsec-lv-red is deliberately NOT reused here: the brand reserves it
   for a structural hairline, never a filled shape.
   ------------------------------------------------------------------------ */
:root {
  --color-bg: var(--baltsec-navy);
  --color-surface: color-mix(in srgb, var(--baltsec-navy) 82%, var(--navy-80));
  --color-surface-raise: color-mix(in srgb, var(--baltsec-navy) 62%, var(--navy-80));
  --color-text: var(--navy-10);
  --color-accent: var(--baltsec-cyan);
  --color-accent-2: var(--baltsec-steel);
  --color-pos: #5cbfa2;
  --color-warn: #e0ad5c;
  --color-neg: #eb8f96;

  /* Elevation is navy-tinted, never black, per the brand. The inset ring is
     what separates one navy surface from the next when a shadow alone cannot. */
  --shadow-sm: 0 0 0 1px rgba(110, 193, 228, .10), 0 1px 3px rgba(0, 27, 61, .5);
  --shadow-md: 0 0 0 1px rgba(110, 193, 228, .12), 0 4px 14px rgba(0, 27, 61, .55);
  --shadow-lg: 0 0 0 1px rgba(110, 193, 228, .16), 0 14px 34px rgba(0, 27, 61, .6);
}

/* Light theme — the brand's .theme-light band. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg: var(--navy-05);
    --color-surface: #ffffff;
    --color-surface-raise: var(--navy-10);
    --color-text: var(--baltsec-ink);
    --color-accent: var(--baltsec-ocean);
    --color-accent-2: var(--navy-80);
    --color-pos: #1c7a5e;
    --color-warn: #8a5d10;
    --color-neg: #b0303c;

    --shadow-sm: 0 1px 3px rgba(0, 27, 61, .1), 0 0 0 1px var(--navy-20);
    --shadow-md: 0 4px 14px rgba(0, 27, 61, .14), 0 0 0 1px var(--navy-20);
    --shadow-lg: 0 14px 34px rgba(0, 27, 61, .2), 0 0 0 1px var(--navy-20);
  }
}

:root[data-theme="light"] {
  --color-bg: var(--navy-05);
  --color-surface: #ffffff;
  --color-surface-raise: var(--navy-10);
  --color-text: var(--baltsec-ink);
  --color-accent: var(--baltsec-ocean);
  --color-accent-2: var(--navy-80);
  --color-pos: #1c7a5e;
  --color-warn: #8a5d10;
  --color-neg: #b0303c;

  --shadow-sm: 0 1px 3px rgba(0, 27, 61, .1), 0 0 0 1px var(--navy-20);
  --shadow-md: 0 4px 14px rgba(0, 27, 61, .14), 0 0 0 1px var(--navy-20);
  --shadow-lg: 0 14px 34px rgba(0, 27, 61, .2), 0 0 0 1px var(--navy-20);
}

:root[data-theme="dark"] {
  --color-bg: var(--baltsec-navy);
  --color-surface: color-mix(in srgb, var(--baltsec-navy) 82%, var(--navy-80));
  --color-surface-raise: color-mix(in srgb, var(--baltsec-navy) 62%, var(--navy-80));
  --color-text: var(--navy-10);
  --color-accent: var(--baltsec-cyan);
  --color-accent-2: var(--baltsec-steel);
  --color-pos: #5cbfa2;
  --color-warn: #e0ad5c;
  --color-neg: #eb8f96;

  --shadow-sm: 0 0 0 1px rgba(110, 193, 228, .10), 0 1px 3px rgba(0, 27, 61, .5);
  --shadow-md: 0 0 0 1px rgba(110, 193, 228, .12), 0 4px 14px rgba(0, 27, 61, .55);
  --shadow-lg: 0 0 0 1px rgba(110, 193, 228, .16), 0 14px 34px rgba(0, 27, 61, .6);
}

/* Self-hosted and subset to Basic Latin + Latin-1 + Latin Extended-A, which is
   what carries ā č ē ģ ī ķ ļ ņ š ū ž. A Latin-only subset breaks Latvian copy
   silently, so these files are shared byte-for-byte with baltsec.lv. */
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root { --color-divider: color-mix(in srgb, var(--color-text) 14%, transparent); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; color-scheme: light dark; }
body {
  margin: 0; color: var(--color-text); background: var(--color-bg);
  font-family: var(--font); font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; transition: background-color .15s ease, color .15s ease;
}
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button, select { cursor: pointer; }
::selection { background: color-mix(in srgb, var(--color-accent) 32%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { margin: 0; letter-spacing: -.02em; }
p { margin: 0; }
.wrap { width: var(--wrap); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.text-muted { color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.site-frame { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* — brand mark — */
/* The BALTSEC identity is a wordmark, not a symbol: no icon, no drawn mark.
   .wordmark is the single place it is styled, mirroring the brand's Logo
   component (IBM Plex Sans 700, 0.02em tracking, accent on hover). */
.wordmark { font-weight: 700; letter-spacing: .02em; line-height: 1; font-size: 17px; color: var(--color-text); }
.brand:hover .wordmark { color: var(--color-accent); }

/* — header — */
.site-header {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 20px;
  width: var(--wrap); margin: 0 auto; padding: 16px 0;
  background: color-mix(in srgb, var(--color-bg) 86%, transparent);
  backdrop-filter: blur(10px);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; margin-right: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text strong { font-size: 14px; font-weight: 600; }
.brand-text .wordmark { font-size: 17px; }
.brand-text small { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.site-nav { display: flex; gap: 2px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); padding: 3px; box-shadow: var(--shadow-sm); }
.site-nav a { padding: 7px 14px; border-radius: 7px; text-decoration: none; font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.site-nav a:hover { color: var(--color-text); }
.site-nav a[aria-current="page"] { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 15%, transparent); }
.header-tools { display: flex; align-items: center; gap: 10px; }

/* — theme switch — */
.seg { display: inline-flex; border: 1px solid var(--color-divider); border-radius: var(--radius-md); background: var(--color-surface); padding: 3px; gap: 1px; }
.seg-opt {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  border: 0; background: transparent; color: color-mix(in srgb, var(--color-text) 55%, transparent);
  width: 30px; height: 26px; border-radius: 7px; padding: 0;
}
.seg-opt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.seg-opt:hover { color: var(--color-text); }
.seg-opt[aria-pressed="true"] { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 16%, transparent); }

/* — footer — */
.site-footer { margin-top: auto; padding: 46px 0 30px; border-top: 1px solid var(--color-divider); }
.footer-top { width: var(--wrap); margin: 0 auto; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 26px; }
.footer-brand { display: flex; gap: 12px; max-width: 380px; }
.footer-brand strong { display: block; font-size: 14px; }
.footer-brand .wordmark { font-size: 17px; }
/* Sits directly under the wordmark, so the two read as one lockup: the brand
   name, then what this particular product is. */
.footer-brand-sub { display: block; margin: 3px 0 8px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.footer-brand p { font-size: 12.5px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; align-content: flex-start; }
.footer-nav a { font-size: 13px; text-decoration: none; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.footer-nav a:hover, .footer-nav a[aria-current="page"] { color: var(--color-accent); }
.footer-nav-btn { border: 0; background: transparent; padding: 0; cursor: pointer; font: inherit; font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.footer-nav-btn:hover { color: var(--color-accent); }
.footer-bottom {
  width: var(--wrap); margin: 0 auto; padding-top: 22px; border-top: 1px solid var(--color-divider);
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font-size: 11.5px; letter-spacing: .03em; color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--color-pos); }

/* — shared controls — */
.card { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; letter-spacing: .02em; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.tag-neutral { background: color-mix(in srgb, var(--color-text) 9%, transparent); color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.tag-outline { border: 1px solid var(--color-divider); color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.tag-accent { border: 1px solid color-mix(in srgb, var(--color-accent) 55%, transparent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 13%, transparent); font-weight: 500; }
.tag-pos { border: 1px solid color-mix(in srgb, var(--color-pos) 55%, transparent); color: var(--color-pos); background: color-mix(in srgb, var(--color-pos) 13%, transparent); }
.tag-warn { border: 1px solid color-mix(in srgb, var(--color-warn) 55%, transparent); color: var(--color-warn); background: color-mix(in srgb, var(--color-warn) 15%, transparent); }
.tag-neg { border: 1px solid color-mix(in srgb, var(--color-neg) 55%, transparent); color: var(--color-neg); background: color-mix(in srgb, var(--color-neg) 13%, transparent); }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.input {
  width: 100%; min-height: 38px; padding: 7px 12px; font-size: 13px; color: var(--color-text);
  background: var(--color-bg); border: 1px solid var(--color-divider); border-radius: var(--radius-sm);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.input:focus-visible { border-color: var(--color-accent); }
.input[disabled] { opacity: .5; cursor: not-allowed; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  text-decoration: none; font-weight: 500; font-size: 13px; border-radius: var(--radius-sm);
  padding: 8px 14px; border: 1px solid var(--color-divider); background: transparent; color: inherit;
}
.btn:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.btn-accent { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.btn-accent:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
.btn-plain { border: 0; background: transparent; color: var(--color-accent); padding: 0; }
.link-arrow { color: var(--color-accent); text-decoration: none; font-size: 12.5px; font-weight: 500; }
.link-arrow:hover { text-decoration: underline; }

/* — tip / report dialog — */
.tip-dialog {
  width: min(460px, calc(100vw - 40px)); padding: 0; border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text);
  box-shadow: var(--shadow-lg);
}
.tip-dialog::backdrop { background: color-mix(in srgb, black 55%, transparent); }
.tip-form { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 26px 24px 22px; }
.tip-dialog-close {
  position: absolute; top: 14px; right: 14px; width: 26px; height: 26px; border-radius: 7px;
  border: 1px solid var(--color-divider); background: transparent; color: color-mix(in srgb, var(--color-text) 60%, transparent);
  cursor: pointer; font-size: 12px;
}
.tip-form h2 { font-size: 18px; padding-right: 30px; }
.tip-form > p { font-size: 13px; line-height: 1.55; margin: -8px 0 4px; color: color-mix(in srgb, var(--color-text) 68%, transparent); }
.tip-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tip-dialog-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 4px; }
.tip-dialog-status { margin-right: auto; font-size: 12.5px; color: var(--color-pos); }
.tip-dialog-status.error { color: var(--color-neg); }

/* ============================================================
   Homepage
   ============================================================ */
.page-hero { padding: 44px 0 30px; }
.page-hero .eyebrow { margin-bottom: 14px; }
.page-hero h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.06; letter-spacing: -.025em; max-width: 780px; margin-bottom: 12px; }
.page-hero p { max-width: 660px; font-size: 15.5px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.flag-lv { display: inline-block; width: 15px; height: 10px; border-radius: 1px; background: linear-gradient(#9d2235 0 38%, #f4f4f6 38% 62%, #9d2235 62%); }

.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 22px 0 14px; border-top: 1px solid var(--color-divider); margin-top: 6px; }
.list-toolbar-heading { display: flex; align-items: baseline; gap: 10px; }
.list-toolbar-heading h2 { font-size: 18px; }
.list-toolbar-heading span { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.sort-seg .seg-opt { width: auto; padding: 0 12px; font-size: 12.5px; font-weight: 500; gap: 0; }

.rank-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.rank-row { background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.rank-row-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; }
.rank-row-head:hover { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.rank-row-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 18px; text-decoration: none; color: inherit; }
.rank-num { flex: none; width: 38px; text-align: center; font-size: 26px; font-weight: 600; letter-spacing: -.02em; color: color-mix(in srgb, var(--color-text) 38%, transparent); }
.rank-main { flex: 1; min-width: 0; }
.rank-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.rank-org { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.rank-row-link:hover .rank-org { color: var(--color-accent); }
.rank-year { font-size: 12px; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.rank-summary { font-size: 13px; line-height: 1.45; color: color-mix(in srgb, var(--color-text) 68%, transparent); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.rank-line2 { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.rank-updated { font-size: 11px; color: color-mix(in srgb, var(--color-text) 42%, transparent); }
.rank-scale { flex: none; text-align: right; min-width: 108px; }
.rank-scale strong { display: block; font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.rank-scale span { font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
/* Impact with no clean magnitude (a DDoS narrative, a campaign description, ...) renders
   as a small wrapped pill instead of being forced into the 26px number style above —
   reuses the same tokens as .tag-neutral so it reads as one system, not a second style. */
.rank-scale-text { max-width: 150px; }
.rank-scale-text strong { display: inline-block; font-size: 11px; font-weight: 500; line-height: 1.35; letter-spacing: 0; white-space: normal; text-align: right; padding: 3px 8px; border-radius: 6px; background: color-mix(in srgb, var(--color-text) 9%, transparent); color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.rank-score-num { flex: none; text-align: right; }
.rank-score-num strong { display: block; font-size: 24px; font-weight: 600; line-height: 1; }
.rank-score-num span { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.rank-chevron { flex: none; width: 28px; height: 28px; border: 1px solid var(--color-divider); border-radius: 7px; display: grid; place-items: center; font-size: 13px; color: color-mix(in srgb, var(--color-text) 60%, transparent); background: transparent; cursor: pointer; }
.rank-chevron:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider)); }
.rank-row.is-expanded .rank-chevron { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 55%, transparent); }
.rank-row.is-expanded .rank-chevron::before { content: "–"; }
.rank-chevron::before { content: "+"; }

.rank-breakdown { padding: 14px 18px 18px; border-top: 1px solid var(--color-divider); background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.rank-breakdown-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.rank-breakdown-head span { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.dim-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 24px; }
.dim-item span:first-child { font-size: 12px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.dim-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin-bottom: 5px; }
.dim-item-head strong { font-size: 13px; font-weight: 600; }
.dim-bar { height: 5px; border-radius: 3px; background: var(--color-divider); overflow: hidden; }
.dim-bar > i { display: block; height: 100%; background: var(--color-accent); border-radius: 3px; }

.empty-state { text-align: center; padding: 60px 20px; border: 1px dashed var(--color-divider); border-radius: var(--radius-md); color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.empty-state .glyph { font-size: 26px; margin-bottom: 8px; opacity: .5; }

/* ============================================================
   Browse page
   ============================================================ */
.filter-panel { padding: 16px; margin-bottom: 18px; }
.filter-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.filter-panel-head span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.filter-clear { border: 0; background: transparent; color: var(--color-accent); cursor: pointer; font-size: 12px; font-weight: 500; }
.filter-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.filter-search-field { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding: 0 12px; min-height: 38px; border: 1px solid var(--color-divider); border-radius: var(--radius-sm); background: var(--color-bg); }
.filter-search-field svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.filter-search-field input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 13px; color: var(--color-text); }
.filter-locked-note { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 48%, transparent); }
.result-meta { font-size: 12px; letter-spacing: .02em; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin-bottom: 12px; }

.browse-list { display: flex; flex-direction: column; gap: 8px; }
.browse-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 16px; text-decoration: none; color: inherit; }
.browse-rank { flex: none; width: 26px; text-align: center; font-size: 14px; color: color-mix(in srgb, var(--color-text) 40%, transparent); padding-top: 2px; }
.browse-main { flex: 1; min-width: 0; }
.browse-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.browse-line1 strong { font-size: 14.5px; font-weight: 600; }
.browse-summary { font-size: 12.5px; margin-top: 3px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 62%, transparent); white-space: normal; }
.browse-score { flex: none; width: 36px; text-align: right; font-size: 17px; font-weight: 600; padding-top: 2px; }
.browse-row:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider)); }

/* ============================================================
   Patterns page
   ============================================================ */
.thesis-card { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; padding: 26px 28px; margin-bottom: 22px; border-left: 3px solid var(--color-accent); }
.thesis-num { font-size: clamp(44px, 6vw, 68px); line-height: .9; letter-spacing: -.03em; color: var(--color-accent); font-weight: 600; }
.thesis-num small { font-size: .45em; font-weight: 500; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.thesis-card p { flex: 1; min-width: 220px; font-size: 15px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 82%, transparent); }

.patterns-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.patterns-grid .card { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.patterns-grid .card.span-2 { grid-column: 1 / -1; }
.patterns-grid h3 { font-size: 15px; }
.bar-list { display: flex; flex-direction: column; gap: 9px; }
.bar-row-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 4px; }
.bar-row-head span:first-child { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.bar-row-head strong { font-weight: 600; }
.bar-track { height: 8px; border-radius: 4px; background: var(--color-divider); overflow: hidden; }
.bar-track > i { display: block; height: 100%; border-radius: 4px; background: var(--color-accent); }

.year-chart { display: flex; align-items: flex-end; gap: 10px; height: 170px; padding-top: 8px; }
.year-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.year-bar-col strong { font-size: 13px; font-weight: 600; }
.year-bar-col i { display: block; width: 100%; max-width: 46px; min-height: 6px; background: var(--color-accent); border-radius: 5px 5px 0 0; }
.year-bar-col span { font-size: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.scale-compare-row { text-decoration: none; color: inherit; display: block; padding: 4px 0; }
.scale-compare-row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.scale-compare-row-head span:first-child { font-size: 13px; }
.scale-compare-row-head strong { font-size: 16px; font-weight: 600; }
.scale-compare-track { height: 12px; border-radius: 6px; background: var(--color-divider); overflow: hidden; }
.scale-compare-track > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 70%, transparent), var(--color-accent)); }

/* ============================================================
   Incident detail
   ============================================================ */
.detail-wrap { padding: 34px 0 90px; }
.detail-tag-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.detail-org { font-size: clamp(28px, 4.4vw, 42px); line-height: 1.04; letter-spacing: -.025em; margin-bottom: 6px; text-wrap: balance; }
.detail-title { font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 4px; }
.detail-updated { font-size: 11.5px; color: color-mix(in srgb, var(--color-text) 42%, transparent); margin-bottom: 26px; }

.report-issue-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 16px 0; border-top: 1px solid var(--color-divider); font-size: 13px; color: color-mix(in srgb, var(--color-text) 65%, transparent); }

.hero-panel { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 40px; }
.hero-bignum { flex: none; min-width: 160px; background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-lg); padding: 24px 26px; box-shadow: var(--shadow-sm); }
.hero-bignum strong { display: block; font-size: clamp(38px, 5vw, 58px); line-height: .95; letter-spacing: -.03em; font-weight: 600; }
.hero-bignum span { display: block; margin-top: 8px; font-size: 12.5px; letter-spacing: .03em; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.hero-bignum-text strong { display: inline-block; font-size: 15px; font-weight: 600; line-height: 1.4; letter-spacing: 0; padding: 5px 10px; border-radius: 7px; background: color-mix(in srgb, var(--color-text) 9%, transparent); color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.hero-summary { flex: 1; min-width: 260px; }
.hero-summary p { font-size: 16.5px; line-height: 1.6; margin-bottom: 16px; text-wrap: pretty; }
.hero-score-row { display: flex; align-items: center; gap: 16px; }
.hero-score-row .score-big { font-size: 26px; font-weight: 600; line-height: 1; }
.hero-score-row .score-big small { font-size: 14px; font-weight: 500; color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.hero-score-row .score-label { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); }

.detail-section { margin-top: 36px; }
.detail-section h2 { font-size: 17px; margin-bottom: 4px; }
.detail-section-lede { font-size: 12.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin-bottom: 16px; }
.detail-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.detail-section-head h2 { margin-bottom: 0; }

.timeline-h { position: relative; padding: 0 4px; }
.timeline-h::before { content: ""; position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: var(--color-divider); }
.timeline-h-row { display: flex; justify-content: space-between; position: relative; }
.timeline-h-item { text-align: center; flex: 1; }
.timeline-h-item i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--color-accent); border: 2px solid var(--color-bg); margin: 2px auto 8px; }
.timeline-h-item strong { display: block; font-size: 14px; font-weight: 600; }
.timeline-h-item span { display: block; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin-top: 2px; }

.score-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 20px; }
.score-card { padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.score-card-head { display: flex; justify-content: space-between; align-items: baseline; }
.score-card-head span { font-size: 12px; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.score-card-head strong { font-size: 14px; font-weight: 600; }
.score-card p { font-size: 11.5px; line-height: 1.4; color: color-mix(in srgb, var(--color-text) 55%, transparent); }

.facts-table { width: 100%; border-collapse: collapse; }
.facts-table th { width: 34%; vertical-align: top; text-align: left; padding: 11px 16px 11px 0; font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--color-text) 65%, transparent); border-top: 1px solid var(--color-divider); }
.facts-table td { padding: 11px 0; font-size: 13.5px; border-top: 1px solid var(--color-divider); }
.facts-table tr:first-child th, .facts-table tr:first-child td { border-top: 0; }
.fact-empty { color: color-mix(in srgb, var(--color-text) 42%, transparent); font-style: italic; }
/* An unknown is not a fact. Both of these mark a value the sources leave open, so the
   facts table cannot present "Nav zināms" in the same weight as a sourced answer. */
.fact-unknown { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.fact-unknown::after { content: "?"; margin-left: 5px; font: 10px var(--font-mono); vertical-align: super; opacity: .7; }
/* The published half of an editorial note: what the evidence does NOT establish, set
   beside the figure a reader would otherwise take as settled. Amber rather than red —
   it qualifies the record, it does not warn about it. */
.hero-caveat {
  display: flex; gap: 8px; align-items: baseline;
  margin: 14px 0 0; padding: 9px 12px;
  border-left: 2px solid var(--color-warn);
  background: color-mix(in srgb, var(--color-warn) 8%, transparent);
  font-size: 13px; line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
}
.hero-caveat span { font: 600 11px var(--font-mono); color: var(--color-warn); }

.root-cause-card { border-left: 3px solid var(--color-accent); padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.root-cause-card p { font-size: 14px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 85%, transparent); }

.consequence-list { display: flex; flex-direction: column; gap: 8px; }
.consequence-item { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.consequence-item::before { content: "—"; color: var(--color-accent); flex: none; }

.affected-card { padding: 20px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-sm); }
.affected-head { display: flex; align-items: center; gap: 10px; }
.affected-icon { width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--color-accent); color: var(--color-accent); display: grid; place-items: center; flex: none; font-size: 15px; }
.affected-head h2 { font-size: 17px; margin: 0; }
.affected-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.affected-col-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin-bottom: 8px; }
.affected-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.affected-cols ol { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }

.source-list { display: flex; flex-direction: column; gap: 2px; }
.source-item { display: flex; align-items: baseline; gap: 12px; padding: 12px; border-radius: var(--radius-sm); text-decoration: none; color: inherit; border-bottom: 1px solid var(--color-divider); }
.source-item:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.source-num { flex: none; width: 22px; font-size: 12px; color: color-mix(in srgb, var(--color-text) 40%, transparent); }
.source-body { flex: 1; min-width: 0; }
.source-title { font-size: 14px; display: block; }
.source-meta { font-size: 12px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.source-go { flex: none; color: var(--color-accent); font-size: 13px; }
/* Editor-checked, said in words. Green rather than the accent cyan, so it reads as a
   state of the source and not as another link affordance next to the arrow. */
.source-verified {
  flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--color-pos) 45%, transparent);
  background: color-mix(in srgb, var(--color-pos) 12%, transparent);
  color: var(--color-pos);
  font: 500 10px var(--font-mono); text-transform: uppercase; letter-spacing: .04em;
  white-space: nowrap;
}
.missing-source { padding: 18px; text-align: center; color: color-mix(in srgb, var(--color-text) 55%, transparent); border: 1px dashed var(--color-divider); border-radius: var(--radius-md); }

.cite-box { padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow-sm); }
.cite-box-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cite-box-head span { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.cite-box code { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 78%, transparent); display: block; }

/* ============================================================
   Methodology
   ============================================================ */
.method-wrap { padding: 34px 0 90px; max-width: 820px; }
.method-wrap > h1 { font-size: clamp(30px, 4vw, 40px); margin-bottom: 12px; }
.method-wrap > p.lede { font-size: 15.5px; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 75%, transparent); margin-bottom: 26px; }
.method-formula { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 22px 26px; margin-bottom: 22px; }
.method-formula-part { display: flex; flex-direction: column; gap: 2px; }
.method-formula-part strong { font-size: 24px; font-weight: 600; }
.method-formula-part span { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.method-formula-op { color: var(--color-accent); font-size: 18px; }
.method-weight-note { padding: 16px 18px; margin-bottom: 30px; border-left: 3px solid var(--color-accent); gap: 6px; display: flex; flex-direction: column; }
.method-weight-note strong { font-size: 13px; }
.method-weight-note p { margin: 0; font-size: 13px; line-height: 1.6; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.method-dims { display: flex; flex-direction: column; gap: 12px; }
.method-dim-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; scroll-margin-top: 84px; }
.method-dim-head { display: flex; align-items: baseline; justify-content: space-between; }
.method-dim-head strong { font-size: 15px; font-weight: 600; }
.method-dim-head span { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.method-dim-card > p { font-size: 13px; margin: 0; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.rubric-table { display: flex; flex-direction: column; margin-top: 8px; border-top: 1px solid var(--color-divider); }
.rubric-row { display: grid; grid-template-columns: 28px 1fr; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--color-divider); }
.rubric-row:last-child { border-bottom: 0; }
.rubric-score { font-size: 13px; font-weight: 600; color: var(--color-accent); text-align: right; line-height: 1.5; }
.rubric-text { font-size: 12.5px; line-height: 1.5; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.rubric-note { font-size: 11.5px; margin-top: 2px; color: color-mix(in srgb, var(--color-text) 48%, transparent); font-style: italic; }
.rubric-rule { font-size: 12.5px; line-height: 1.55; margin-top: 10px; padding: 9px 12px; border-left: 2px solid var(--color-accent); background: color-mix(in srgb, var(--color-accent) 7%, transparent); color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.rubric-rule strong { color: var(--color-text); }
.method-example { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--color-divider); }
.method-example h2 { font-size: 20px; margin-bottom: 4px; }
.example-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13px; }
.example-table th { text-align: left; padding: 8px 10px; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); border-bottom: 1px solid var(--color-divider); }
.example-table td { padding: 9px 10px; border-bottom: 1px solid var(--color-divider); }
.example-table th:not(:first-child), .example-table td:not(:first-child) { text-align: right; }
.example-table tfoot td { border-bottom: 0; padding-top: 12px; font-weight: 600; font-size: 14px; }
.method-rules { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--color-divider); }
.method-rules h2 { font-size: 20px; margin-bottom: 18px; }
.method-rules ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.method-rules li { font-size: 13.5px; line-height: 1.55; color: color-mix(in srgb, var(--color-text) 72%, transparent); padding-left: 16px; position: relative; }
.method-rules li::before { content: ""; position: absolute; left: 0; top: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--color-accent); }

/* ============================================================
   404
   ============================================================ */
.not-found { min-height: 55vh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 0; }
.not-found > span { color: var(--color-accent); font-size: 12px; font-weight: 600; }
.not-found h1 { margin: 10px 0 8px; font-size: 46px; letter-spacing: -.03em; }
.not-found p { color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-bottom: 20px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) {
  :root { --wrap: calc(100% - 32px); }
  .site-header { flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; }
  .dim-grid { grid-template-columns: repeat(2, 1fr); }
  .patterns-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: repeat(2, 1fr); }
  .affected-cols { grid-template-columns: 1fr; }
  .score-cards { grid-template-columns: 1fr; }
  .hero-panel { flex-direction: column; }
}
@media (max-width: 620px) {
  .rank-row-head { flex-wrap: wrap; }
  .rank-row-link { flex-wrap: wrap; }
  .rank-scale { display: none; }
  .footer-top, .footer-bottom { flex-direction: column; }
  .dim-grid { grid-template-columns: 1fr; }
  .filter-grid { grid-template-columns: 1fr; }
  .browse-summary { display: none; }
}

/* The country "filter" that is not one. A chip rather than a disabled <select>: an
   interactive-looking control that does nothing is worse than an honest label. */
.filter-locked-chip {
  display: flex; align-items: center; gap: 6px;
  min-height: 42px; padding: 0 12px;
  border: 1px dashed color-mix(in srgb, var(--color-text) 22%, transparent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  background: color-mix(in srgb, var(--color-text) 3%, transparent);
}
.filter-locked-chip span { font-size: 9px; }