/**
 * Basis: lettertype, kleuren, typografie, knoppen en formulieren.
 *
 * De opzet komt uit DESIGN.md van anti-crime-academy.com: dezelfde tokennamen,
 * dezelfde rollen, dezelfde schaal en hetzelfde ritme. Alleen de kleurwaarden
 * zijn vervangen door die van Tor, zodat je ziet dat dit dezelfde familie is en
 * tegelijk dat het een andere plek is.
 *
 * Donker is hier de standaard, waar IACA licht is met een donkere hero. Dit is
 * gereedschap voor dark-web-onderzoek en wordt op rare uren gebruikt. De lichte
 * weergave staat eronder en volgt de voorkeur van de bezoeker.
 *
 * De tokens heetten hiervoor naar hun kleur (--dwt-wit, --dwt-blauw). Dat werkt
 * niet bij twee weergaven: --dwt-wit was vijf keer een achtergrond en twaalf
 * keer een tekstkleur, en die twee moeten in het donker de andere kant op. Ze
 * heten nu naar hun rol.
 *
 * Barlow en Barlow Condensed staan in public/fonts/ en worden niet bij Google
 * opgehaald. De site belooft de bezoeker dat er niets wordt gelogd; een
 * lettertype dat bij elke paginaweergave het IP-adres van de bezoeker naar een
 * derde partij stuurt hoort daar niet bij. Om diezelfde reden staat er voor de
 * onion-adressen geen eigen mono-lettertype maar de systeemletter: dat scheelt
 * een bestand en kost niets aan privacy.
 */

/* ------------------------------------------------------------- lettertype */

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/barlow-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/barlow-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/barlow-condensed-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/barlow-condensed-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Barlow Condensed';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/barlow-condensed-800.woff2') format('woff2');
}

/* ----------------------------------------------------------------- tokens */

:root {
    /* merk. --brand is Tor-paars en mag alleen een vlak vullen: als tekst op
       deze grond haalt het 2,9:1 en zakt het zelfs door de drempel voor randen.
       Met witte tekst erop haalt het 6,6:1. --accent is dezelfde kleur
       opgehelderd en draagt alle tekst en lijnen, op 6,3:1. Dezelfde splitsing
       die IACA in het donker maakt tussen --blue en --accent. */
    --brand:          #7D4698;
    --brand-bright:   #C39BE4;
    --accent:         #B07FD4;
    --accent-soft:    rgba(176, 127, 212, .12);

    /* donkere vlakken, tegenhanger van --navy bij IACA */
    --navy:           #141019;
    --navy-700:       #1c1626;
    --navy-900:       #0a0710;

    /* vlakken en lijnen */
    --bg:             #0b0a10;
    --surface:        #15121c;
    --surface-2:      #100e16;
    --surface-trans:  rgba(11, 10, 16, .82);
    --border:         rgba(176, 127, 212, .14);
    --border-2:       rgba(176, 127, 212, .26);

    /* tekst */
    --heading:        #f5f3f8;
    --text:           #e8e6ee;
    --steel:          #a49cb0;
    --text-dim:       #948da0;

    /* betekeniskleuren. Functioneel: ze zeggen iets over de stand van zaken en
       worden nooit gebruikt omdat een blok wat kleur kan gebruiken. Het groen is
       dat van Tor en betekent hier bereikbaar. */
    --success:        #68B030;
    --amber:          #e0a33a;
    --danger:         #e2564a;
    --unknown:        #7f8ca1;

    /* schrift */
    --font-display:   'Barlow Condensed', system-ui, sans-serif;
    --font-body:      'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono:      ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* ritme */
    --maxw:           1180px;
    --narrow:         920px;
    --r-sm:           4px;
    --r-md:           6px;
    --r-lg:           10px;
    --r-pill:         999px;
    --sh-1:           0 2px 12px rgba(0, 0, 0, .36);
    --sh-2:           0 10px 30px rgba(0, 0, 0, .5);
    --ease:           cubic-bezier(.4, 0, .2, 1);
    --regel:          1.65;

    /* Vertelt de browser in welke stand hij zijn eigen onderdelen moet tekenen:
       de uitklaplijst van een <select>, de schuifbalken, de invoercursor. Zonder
       dit tekent hij die licht, en dan staat er zwarte tekst op een donkere
       lijst. Dat is precies wat er misging in het beheerpaneel. */
    color-scheme: dark;
}

/* De lichte weergave, alleen via de knop (#76). Donker is voor iedereen de
   standaard: Tor Browser meldt elke site dat de bezoeker licht wil, om hem
   niet herkenbaar te maken, dus met een mediaquery op prefers-color-scheme
   was de site in Tor altijd licht. */
:root[data-theme="light"] {
    --brand:          #59316B;
    --brand-bright:   #7D4698;
    --accent:         #6b3d84;
    --accent-soft:    rgba(107, 61, 132, .10);
    --navy:           #efeaf3;
    --navy-700:       #e5dcec;
    --navy-900:       #f7f4f9;
    --bg:             #faf8fc;
    --surface:        #ffffff;
    --surface-2:      #f4f0f7;
    --surface-trans:  rgba(255, 255, 255, .92);
    --border:         #e6dcec;
    --border-2:       #cfc0d9;
    --heading:        #241a2e;
    --text:           #2c2436;
    --steel:          #6b6178;
    --text-dim:       #70667d;
    --success:        #3d7a12;
    --amber:          #8a5a06;
    --danger:         #b8342a;
    --unknown:        #6b6178;
    --sh-1:           0 2px 10px rgba(36, 26, 46, .05);
    --sh-2:           0 6px 22px rgba(36, 26, 46, .09);
    color-scheme: light;
}

/* ------------------------------------------------------------------ reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: var(--regel);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
}

/* ------------------------------------------------------------- typografie */

/* Alle koppen staan in kapitalen via CSS en niet in de HTML: een schermlezer
   leest een woord dat in hoofdletters getypt is letter voor letter voor. */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 .6em;
    font-family: var(--font-display);
    text-transform: uppercase;
    line-height: 1.08;
    color: var(--heading);
    text-wrap: balance;
}

h1 { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; letter-spacing: .02em; }
h2 { font-size: clamp(24px, 3.1vw, 34px); font-weight: 800; letter-spacing: .04em; }
h3 { font-size: 16px; font-weight: 700; letter-spacing: .05em; }
h4 { font-size: 14px; font-weight: 700; letter-spacing: .06em; }
h5, h6 { font-size: 13px; font-weight: 700; letter-spacing: .06em; }

p {
    margin: 0 0 1em;
}

.dwt-inleiding {
    font-size: 19px;
    color: var(--steel);
    max-width: 62ch;
}

.dwt-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Onion-adressen in een mono. Zo'n adres is 56 tekens willekeurige base32; in
   een schreefloze letter zijn twee adressen niet te vergelijken en niet over te
   typen, in een mono staan de tekens onder elkaar. */
code,
.dwt-adres {
    font-family: var(--font-mono);
    font-size: .86em;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

a {
    color: var(--accent);
    text-decoration: none;
    transition: color .18s var(--ease);
}

a:hover,
a:focus-visible {
    color: var(--brand-bright);
    text-decoration: underline;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dwt-waarschuwing {
    color: var(--amber);
}

.dwt-scheiding {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 32px 0;
}

/* ------------------------------------------------------------------ lijst */

.dwt-opsomming {
    margin: 0 0 1em;
    padding-left: 1.2em;
}

.dwt-opsomming li {
    margin-bottom: .35em;
}

/* ----------------------------------------------------------------- knoppen */

.dwt-knop {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 12px 22px;
    border: 1px solid var(--brand);
    border-radius: var(--r-sm);
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    text-decoration: none;
    transition: transform .18s var(--ease), background .18s var(--ease),
                border-color .18s var(--ease), color .18s var(--ease);
}

.dwt-knop:hover,
.dwt-knop:focus-visible {
    transform: translateY(-1px);
    background: var(--brand-bright);
    border-color: var(--brand-bright);
    color: var(--navy-900);
    text-decoration: none;
}

.dwt-knop--klein {
    font-size: 13px;
    padding: 8px 15px;
}

.dwt-knop--rand {
    background: transparent;
    color: var(--accent);
    border-color: var(--border-2);
}

.dwt-knop--rand:hover,
.dwt-knop--rand:focus-visible {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

/* -------------------------------------------------------------- formulieren */

.dwt-veld {
    width: 100%;
    font: inherit;
    font-size: 16px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border-2);
    border-radius: var(--r-sm);
    padding: 12px 14px;
    transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}

.dwt-veld:focus-visible {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.dwt-veld::placeholder {
    color: var(--text-dim);
}

/* Een keuzelijst met een eigen pijltje, want de systeempijl is in het donker
   vaak onzichtbaar. Twee driehoekjes uit verlopen, zodat er geen plaatje bij
   hoeft. */
/* Niet elke browser tekent de uitklaplijst volgens color-scheme, dus de opties
   krijgen het er nog een keer bij. */
option {
    background: var(--surface);
    color: var(--text);
}

select.dwt-veld {
    appearance: none;
    padding-right: 40px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--accent) 50%),
        linear-gradient(135deg, var(--accent) 50%, transparent 50%);
    background-position: calc(100% - 20px) 52%, calc(100% - 14px) 52%;
    background-size: 6px 6px;
    background-repeat: no-repeat;
}

.dwt-etiket {
    display: block;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 8px;
}

/* ----------------------------------------------------------------- tabellen */

.dwt-tabel-omhulsel {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
}

.dwt-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.dwt-tabel th {
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    text-align: left;
    padding: 12px 16px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.dwt-tabel td {
    padding: 11px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    vertical-align: top;
}

.dwt-tabel tbody tr:last-child td {
    border-bottom: 0;
}

.dwt-tabel tbody tr:hover td {
    background: var(--navy-700);
}

/* ----------------------------------------------------------------- hulpjes */

.dwt-verborgen {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------------ karakterlaag */

/**
 * De circuit-cursor.
 *
 * IACA heeft een vizier-cursor; dit is de tegenhanger uit dit onderwerp. Een
 * Tor-verbinding loopt over drie relais (guard, middle, exit) en dat is wat er
 * achter de aanwijzer aan sleept. Zweef je over iets klikbaars, dan trekt de
 * keten strak en springt de kop op Tor-groen: circuit open.
 *
 * De echte cursor blijft staan; dit ligt er alleen overheen. Bij een gereedschap
 * waar mensen precies moeten klikken wil je de aanwijzer niet wegnemen, want
 * zodra het effect één beeld hapert klikt iemand mis.
 *
 * Decoratief: valt hij weg, dan werkt de pagina gewoon door.
 */
.dwt-circuit {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s var(--ease);
}

.dwt-circuit.is-aan {
    opacity: 1;
}

.dwt-circuit i {
    position: absolute;
    display: block;
    border-radius: 50%;
    transition: background .2s var(--ease), border-color .2s var(--ease),
                width .18s var(--ease), height .18s var(--ease), margin .18s var(--ease);
}

/* De kop is een ring en geen bolletje: een aanwijzer hoort niets af te dekken. */
.dwt-circuit__kop {
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 1.5px solid var(--accent);
    background: transparent;
}

.dwt-circuit.is-vast .dwt-circuit__kop {
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    border-color: var(--success);
}

.dwt-circuit__hop {
    background: var(--accent);
}

.dwt-circuit__hop--1 { width: 6px; height: 6px; margin: -3px 0 0 -3px;     opacity: .75; }
.dwt-circuit__hop--2 { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; opacity: .5; }
.dwt-circuit__hop--3 { width: 4px; height: 4px; margin: -2px 0 0 -2px;     opacity: .28; }

.dwt-circuit.is-vast .dwt-circuit__hop {
    background: var(--success);
}

@media (hover: none), (max-width: 760px) {
    .dwt-circuit { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .dwt-circuit { display: none !important; }
}

/* ---------------------------------------------------------- licht/donker */

/* De knop voor licht en donker, voor de site en het paneel (#76). Op de site
   staat hij zonder JavaScript verborgen, want dan kan hij niets. */
.thema-knop {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    width: auto;
    background: rgba(255, 255, 255, .08);
    border: 1px solid var(--border-2);
    border-radius: var(--r-pill);
    cursor: pointer;
    font: inherit;
}

.thema-knop:hover {
    filter: none;
    border-color: var(--accent);
}

.thema-knop span[aria-hidden] {
    padding: 3px 11px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-dim);
    transition: background .18s var(--ease), color .18s var(--ease);
}

.thema-knop[aria-pressed="true"] .thema-knop__licht,
.thema-knop[aria-pressed="false"] .thema-knop__donker {
    background: var(--brand);
    color: #fff;
}

.thema-knop[hidden] {
    display: none;
}