/* ============================================================================
   MissingIntel — ontwerptokens
   Versie 1, 8 september 2026. Afgeleid uit het canvas "MissingIntel Three Surfaces".

   Dit bestand hangt van niets af: het werkt naast Tailwind (CDN of build),
   naast bestaande CSS, en in een latere app-webview. Alles staat als custom
   property, zodat een variant of een themawissel één regel is en geen refactor.

   Plaatsing (te bevestigen na de frontend-inspectie):
     src/static/css/mi-tokens.css   → als eerste stylesheet in base.html
   Bij een Tailwind-build worden deze waarden overgenomen in theme.extend,
   zodat utility-classes dezelfde kleuren gebruiken.
   ========================================================================= */

:root {
  /* --- oppervlak ------------------------------------------------------ */
  /* Standaard is het papier-oppervlak (hub + onderzoek).
     Social zet --mi-bg op wit via .mi-surface-social op <html> of <body>. */
  --mi-bg:            #FCFBF9;
  --mi-bg-raised:     #FFFFFF;
  --mi-bg-sunken:     #F7F5F1;
  --mi-rule:          #E7E4DD;
  --mi-rule-soft:     #F0EDE7;

  /* --- inkt ----------------------------------------------------------- */
  --mi-ink:           #0F1419;
  --mi-ink-2:         #3C434A;
  --mi-ink-muted:     #6B727A;
  --mi-ink-faint:     #8A9099;
  --mi-ink-ghost:     #A0A6AD;
  --mi-ink-inverse:   #FFFFFF;

  /* --- merk ----------------------------------------------------------- */
  --mi-brand:         #0E7490;
  --mi-brand-hover:   #155E75;
  --mi-brand-tint:    #F2F8F9;
  --mi-brand-line:    #CFE6E9;

  /* --- cases ---------------------------------------------------------- */
  --mi-case-mccann:        #0E7C86;
  --mi-case-mccann-tint:   #E9F4F5;
  --mi-case-epstein:       #A8620A;
  --mi-case-epstein-tint:  #FBF1E3;
  --mi-case-casapia:       #A32F3C;
  --mi-case-casapia-tint:  #FBEEEF;
  --mi-case-ruipedro:      #6D28D9;
  --mi-case-ruipedro-tint: #F1EBFC;
  --mi-case-default:       #5A626C;
  --mi-case-default-tint:  #F0F1F3;

  /* --- status --------------------------------------------------------- */
  --mi-ok:            #15803D;
  --mi-ok-tint:       #F5FBF7;
  --mi-ok-line:       #C9E4D3;
  --mi-live:          #17A34A;
  --mi-warn:          #A8620A;
  --mi-warn-tint:     #FDF6EC;
  --mi-warn-line:     #F0DFC4;
  --mi-danger:        #A32F3C;

  /* --- typografie ------------------------------------------------------ */
  --mi-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
  --mi-font-ui:      "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
                     "Segoe UI", Helvetica, Arial, sans-serif;
  --mi-font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Schaal. Body is 15px: de feed leest als tekst, niet als interface. */
  --mi-text-xs:      12px;
  --mi-text-sm:      13.5px;
  --mi-text-base:    15px;
  --mi-text-lg:      16.5px;
  --mi-text-xl:      19px;
  --mi-display-sm:   22px;
  --mi-display-md:   28px;
  --mi-display-lg:   36px;   /* mobiele hero */
  --mi-display-xl:   56px;   /* desktop hero */

  --mi-leading-tight: 1.25;
  --mi-leading-snug:  1.4;
  --mi-leading-body:  1.6;

  /* --- ruimte --------------------------------------------------------- */
  --mi-space-1:  4px;
  --mi-space-2:  8px;
  --mi-space-3:  12px;
  --mi-space-4:  16px;
  --mi-space-5:  20px;
  --mi-space-6:  24px;
  --mi-space-8:  32px;
  --mi-space-10: 40px;
  --mi-space-12: 56px;

  /* --- vorm ----------------------------------------------------------- */
  --mi-radius-sm:   6px;
  --mi-radius-md:   8px;
  --mi-radius-lg:   12px;
  --mi-radius-xl:   14px;
  --mi-radius-pill: 999px;

  --mi-shadow-sm: 0 1px 2px rgba(15, 20, 25, 0.08);
  --mi-shadow-md: 0 6px 18px rgba(14, 116, 144, 0.18);

  /* --- maten ---------------------------------------------------------- */
  --mi-header-h:      64px;
  --mi-header-h-sm:   56px;   /* mobiel */
  --mi-tabbar-h:      66px;   /* bottom tab bar op social, mobiel */
  --mi-control-h:     44px;   /* minimale raakvlakhoogte — nooit lager */
  --mi-control-h-lg:  52px;
  --mi-avatar:        42px;
  --mi-avatar-sm:     38px;
  --mi-rail-left:     218px;
  --mi-rail-right:    326px;
  --mi-feed-w:        636px;
  --mi-page-w:        1120px;
  --mi-page-w-wide:   1200px;

  /* --- overig --------------------------------------------------------- */
  --mi-transition: 140ms ease;
  --mi-focus-ring: 0 0 0 3px rgba(14, 116, 144, 0.28);
}

/* Social draait op wit met zachtere lijnen. Zet deze class op <body>
   vanuit de surface-middleware, niet per pagina. */
.mi-surface-social {
  --mi-bg:        #FFFFFF;
  --mi-bg-sunken: #F7F8F9;
  --mi-rule:      #EDEFF1;
  --mi-rule-soft: #F3F5F6;
}

/* Onderzoek en hub gebruiken de standaardwaarden hierboven.
   Beide classes bestaan zodat de middleware er altijd één kan zetten. */
.mi-surface-research,
.mi-surface-hub { }

/* ---------------------------------------------------------------------------
   Basis. Bewust minimaal: dit vervangt geen bestaande CSS, het legt alleen
   de grondlaag zodat de partials er niet elk hun eigen aannames op nahouden.
   -------------------------------------------------------------------------*/

body.mi {
  margin: 0;
  background: var(--mi-bg);
  color: var(--mi-ink);
  font-family: var(--mi-font-ui);
  font-size: var(--mi-text-base);
  line-height: var(--mi-leading-body);
  -webkit-font-smoothing: antialiased;
}

/* :where() geeft deze regels specificiteit 0, zodat een utility-class als
   text-white of font-sans er altijd overheen kan. Zonder dit won .mi a van
   .text-white en werd witte tekst op een teal knop onzichtbaar. */
:where(.mi) :where(a) { color: var(--mi-brand); text-decoration: none; }
:where(.mi) :where(a:hover) { color: var(--mi-brand-hover); }

.mi :focus-visible {
  outline: none;
  box-shadow: var(--mi-focus-ring);
  border-radius: var(--mi-radius-sm);
}

:where(.mi) :where(h1, h2, h3) {
  font-family: var(--mi-font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: var(--mi-leading-tight);
  margin: 0;
}

/* Tabelcijfers overal waar getallen naast elkaar staan (tellers, saldo,
   voortgang). Zonder dit springen de cijfers bij elke refresh. */
.mi-num { font-variant-numeric: tabular-nums; }

/* Raakvlakken. Elke knop en link die op mobiel aangeraakt wordt, krijgt
   deze class — 44px is de ondergrens, geen richtlijn. */
.mi-tap {
  min-height: var(--mi-control-h);
  display: inline-flex;
  align-items: center;
}

/* ---------------------------------------------------------------------------
   Case-kleur per slug. De template zet class="mi-case mi-case--{{ slug }}"
   en hoeft dan geen kleurenlogica meer te bevatten — dat scheelt de dict
   die nu in post_card.html staat.
   -------------------------------------------------------------------------*/
.mi-case { --c: var(--mi-case-default); --c-tint: var(--mi-case-default-tint); }
.mi-case--mccann        { --c: var(--mi-case-mccann);    --c-tint: var(--mi-case-mccann-tint); }
.mi-case--epstein-files { --c: var(--mi-case-epstein);   --c-tint: var(--mi-case-epstein-tint); }
.mi-case--casa-pia      { --c: var(--mi-case-casapia);   --c-tint: var(--mi-case-casapia-tint); }
.mi-case--rui-pedro     { --c: var(--mi-case-ruipedro);  --c-tint: var(--mi-case-ruipedro-tint); }

.mi-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-space-1);
  padding: 2px 9px;
  border-radius: var(--mi-radius-pill);
  font-size: var(--mi-text-xs);
  font-weight: 600;
  color: var(--c);
  background: var(--c-tint);
}

@media (prefers-reduced-motion: reduce) {
  .mi * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------------------
   Antwoordtekst en bronnenlijst — 3 oktober 2026.

   Antoine: "pagina moet een beetje body krijgen (...) wel business kleuren
   geen carnaval." Hieronder komt geen enkele nieuwe kleur voor: alles is een
   token dat hierboven al staat.

   `.mi-prose` had tot nu toe GEEN enkele regel. Het was een haakje zonder
   opmaak, en daarom lag de antwoordtekst zo vlak: de citaten stonden gelijk
   met de rest.
   -------------------------------------------------------------------------*/

.mi-prose > p { margin: 0 0 .8rem; }
.mi-prose > p:last-child { margin-bottom: 0; }
.mi-prose strong { color: var(--mi-ink); font-weight: 600; }

/* Het citaat is het bewijs. Dat mag je zien: verzonken vlak met een teal
   kantlijn, zodat je bij het scrollen meteen ziet waar het document spreekt
   en waar het antwoord spreekt. */
.mi-prose blockquote {
  margin: 0 0 .9rem;
  padding: .65rem .9rem;
  background: var(--mi-bg-sunken);
  border-left: 3px solid var(--mi-brand);
  border-radius: 0 10px 10px 0;
}
.mi-prose blockquote p { margin: 0; }
.mi-prose blockquote p + p { margin-top: .5rem; }

/* De aanhef ("1. David Rodgers — Chief Pilot" plus de bronregel) hoort bij het
   citaat eronder. Met :has() worden die twee een kaart. Kent de browser :has()
   niet, dan blijft de regel hierboven staan en is het nog steeds leesbaar -
   dat is met opzet zo gebouwd. */
@supports selector(p:has(> strong)) {
  /* `:has(+ blockquote)` erbij, anders krijgt een vetgedrukte aanhef zonder
     citaat eronder - bijvoorbeeld in de samenvatting - een kaart met een open
     onderkant. */
  .mi-prose > p:has(> strong:first-child):has(+ blockquote) {
    margin-bottom: 0;
    padding: .65rem .9rem .4rem;
    background: var(--mi-bg-sunken);
    border-left: 3px solid var(--mi-brand);
    border-radius: 0 10px 0 0;
  }
  .mi-prose > p:has(> strong:first-child):has(+ blockquote) + blockquote {
    margin-top: 0;
    padding-top: .4rem;
    border-radius: 0 0 10px 0;
  }
  /* Tussen twee kaarten lucht, zodat het losse onderdelen blijven. */
  .mi-prose > blockquote + p:has(> strong:first-child) { margin-top: 1rem; }
}

/* De bronnenlijst: een geheel in plaats van acht losse randjes. Staat hier en
   niet in klassen, omdat `bg-mi-bg` niet in de kleurenkaart zit en ik niet ga
   gokken welke wel. Geldt op beide plekken waar de lijst staat: de
   rechterkolom en het zijpaneel. */
[data-bronlijst] {
  background: var(--mi-bg-sunken);
  border-radius: 12px;
  overflow: hidden;
}
[data-bronlijst] > li + li { border-top: 1px solid var(--mi-rule); }
[data-bronlijst] button { transition: background .15s ease; }
[data-bronlijst] button:hover { background: var(--mi-bg); }

/* ---------------------------------------------------------------------------
   De bronregel - 3 oktober 2026.

   Antoine: "bij de sources nog net niet duidelijk genoeg, het mag net wat
   frivoler, gepast dat wel."  Eén merkkleur, op drie plekken, elke keer
   functioneel: het rangnummer, de score, en het streepje bij hover. Dat
   streepje is hetzelfde als links van de bewijskaarten in het antwoord, zodat
   de rail en het antwoord dezelfde taal spreken.
   -------------------------------------------------------------------------*/

.mi-bronnr {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-top: 1px;
  border-radius: var(--mi-radius-pill, 999px);
  background: var(--mi-brand); color: #fff;
  font-size: 11px; font-weight: 600; line-height: 1;
}

.mi-bronscore {
  flex: 0 0 auto;
  padding: 1px 6px; margin-top: 1px;
  border-radius: var(--mi-radius-pill, 999px);
  font-size: 10.5px; font-weight: 600; line-height: 1.5;
  color: var(--mi-brand);
  background: color-mix(in srgb, var(--mi-brand) 10%, transparent);
}
@supports not (color: color-mix(in srgb, red 10%, white)) {
  .mi-bronscore { background: var(--mi-bg); }
}

/* Het streepje verschijnt pas bij hover, dus in rust blijft de lijst rustig. */
[data-bronlijst] > li { position: relative; }
[data-bronlijst] > li::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mi-brand); opacity: 0; transition: opacity .15s ease;
}
[data-bronlijst] > li:hover::before { opacity: 1; }

/* Het aantal in de kop van de rail als gevuld pilletje. */
[data-bronrail] h3 .mi-num {
  display: inline-block; min-width: 18px; padding: 1px 6px;
  border-radius: var(--mi-radius-pill, 999px);
  background: var(--mi-brand); color: #fff;
  font-size: 10.5px; font-weight: 700; text-align: center;
  letter-spacing: 0;
}