/* Lijnennet, copied unchanged from jufi-send (crates/send-web/static/app.css)
   at commit bc93f9c5cbfe88353e17150aee23a96ba8b7b0d7, with its self-hosted
   fonts in static/fonts. To be extracted into a shared, versioned asset in
   the jufi repo (docs/README.md, open tasks); until then, change it in
   jufi-send first and copy it here again. JuFi ID's own rules follow the
   copy, in the section "JuFi ID" at the end; they are not part of it. */

/* Lijnennet (docs/dashboard-stijl.md). The Paper file "JuFi", page
   "Design", holds what is ready for the app; this file follows it piece
   by piece. Foundations: colour and type. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Overpass";
  src: url("/static/fonts/overpass.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Overpass Mono";
  src: url("/static/fonts/overpass-mono.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Martian Mono";
  src: url("/static/fonts/martian-mono.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Colour: one meaning per colour. */
  --ink: #121212;           /* text, rules, boards, the live bar */
  --text-2: #4f4f4b;        /* secondary text (8.2:1) */
  --line: #dadad6;          /* hairlines between rows */
  --surface: #f2f2ef;       /* value fields, the active row */
  --paper: #ffffff;
  --cobalt: #1f3fd1;        /* the line, primary actions, links */
  --cobalt-tint: #eef1fd;   /* explanations next to a value */
  --highlighter: #ffe800;   /* what you have to do now; with ink only */
  --highlighter-tint: #fff9c4; /* a row that asks for it */
  --red: #c8321b;           /* fails or blocked (5.4:1) */
  --green: #137a47;         /* in order (5.5:1) */
  --led-green: #46d483;     /* LED colours: only on ink */
  --led-amber: #ffb020;
  --led-red: #ff6b57;
  --riso-pink: #ff48b0;     /* accent only */
  --riso-blue: #0078bf;
  --ink-line: #2c2c2c;      /* hairlines on ink */
  --ink-text-2: #a6a6a6;    /* labels and quiet words on ink */
  --ink-text: #d6d6d6;      /* values on ink */
  --pass-tint: #8fc4a6;     /* a passed round in a strip */
  --open-line: #b5b5b0;     /* a round still running */

  /* Type: one family per job. */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-ui: "Overpass", system-ui, sans-serif;
  --font-mono: "Overpass Mono", ui-monospace, monospace;
  --font-label: "Martian Mono", ui-monospace, monospace;

  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 800;
  margin: 0;
}
h1 { font-size: 34px; line-height: 42px; letter-spacing: -0.03em; }
h2 { font-size: 28px; line-height: 34px; letter-spacing: -0.03em; }
h3 { font-size: 17px; line-height: 22px; }

code, .value { font-family: var(--font-mono); font-size: 14px; }
.value.muted { font-size: 12px; }
.label {
  font-family: var(--font-label);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
.muted, .hint { color: var(--text-2); }
a { color: var(--cobalt); }

/* Until the shell and components land: the phase 1 pages, square. */
header.site {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px; border-bottom: 2px solid var(--ink);
}
.brand { font-family: var(--font-display); font-weight: 800; font-size: 20px; }
header.site .logo { padding: 0; font-size: 20px; }
body:not(.app) main { max-width: 40rem; margin: 40px auto; padding: 0 24px; }
body:not(.app) h1 { margin-bottom: 16px; }
.panel { border-top: 2px solid var(--ink); padding: 24px 0; }
label { display: block; margin: 0 0 16px; font-weight: 700; }
input[type=email], input[type=password], input[type=text], input[type=number], select {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px;
  font-family: inherit; font-weight: 400; color: inherit; background: var(--surface);
  border: 1px solid var(--line); border-radius: 0;
}
/* Inputs are always 16px: smaller makes phones zoom in on focus. */
input, select, textarea, input[type=email], input[type=password], input[type=text], input[type=number] {
  font-size: 16px; line-height: 22px;
}
button.link {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-weight: 700; cursor: pointer;
  border: 0; background: none; color: var(--cobalt); padding: 0;
}
button.link .icon { width: 14px; height: 14px; }
.error { color: var(--red); font-weight: 700; margin: 0 0 16px; }
table { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); }
th {
  font-family: var(--font-label); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2);
}

/* Actions & status (Paper "Design", Components — Actions & status). */
.icon {
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10.5px 16px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700; line-height: 18px;
  color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--ink); border-radius: 0; box-shadow: none;
  text-decoration: none; cursor: pointer;
}
.button.primary {
  padding: 12px 18px;
  color: var(--paper); background: var(--cobalt); border: 0;
  box-shadow: 4px 4px 0 var(--riso-pink);
}
.button.now { background: var(--highlighter); }
.button.compact, .button.now { gap: 7px; padding: 8px 12px; font-size: 14px; }
.button:focus-visible, a:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }
.button.primary:focus-visible { outline-color: var(--ink); }
a.more { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--cobalt); text-decoration: none; }
a.more .icon { width: 14px; height: 14px; }

.status {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 700; font-size: 14px; line-height: 18px;
}
.status .icon { width: 15px; height: 15px; }
.status.ok { color: var(--green); }
.status.fail { color: var(--red); }
.status.wait { color: var(--ink); }
.status.none { color: var(--text-2); font-weight: 500; }

/* LED words: only on ink. */
.led { font-family: var(--font-mono); font-weight: 700; text-transform: uppercase; }
.led.ok { color: var(--led-green); }
.led.wait { color: var(--led-amber); }
.led.fail { color: var(--led-red); }
.led.none { color: var(--ink-text-2); }

.badge, .count {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; line-height: 16px;
  color: var(--text-2);
}
.badge.alert { padding: 1px 6px; font-weight: 700; color: var(--paper); background: var(--red); }
.badge.live { display: inline-flex; align-items: center; gap: 5px; }
.badge.live::before { content: ""; width: 7px; height: 7px; background: var(--green); }

/* Shell (Paper "Design", Components — Shell). */
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
body.app { display: flex; flex-direction: column; min-height: 100vh; }

.live-bar {
  display: flex; align-items: center; gap: 22px; flex-shrink: 0;
  height: 40px; padding: 0 24px; overflow: hidden;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-label); font-size: 11px; font-weight: 500;
  letter-spacing: 0.06em; line-height: 14px; text-transform: uppercase;
  white-space: nowrap;
}
.live-chip { padding: 3px 7px; font-weight: 700; color: var(--ink); background: var(--led-green); }
.live-bar .sep { color: var(--ink-text-2); }
.live-bar .fact { display: inline-flex; align-items: center; gap: 7px; }
.live-bar .dot { width: 7px; height: 7px; }
.live-bar .dot.ok { background: var(--led-green); }
.live-bar .dot.wait { background: var(--led-amber); }
.live-bar .dot.fail { background: var(--led-red); }

.frame { display: flex; flex-grow: 1; }
.sidebar {
  width: 248px; flex-shrink: 0; display: flex; flex-direction: column; gap: 28px;
  padding: 24px 16px; border-right: 1px solid var(--line);
}
.logo {
  display: flex; align-items: center; gap: 10px; padding: 0 8px;
  font-family: var(--font-display); font-size: 22px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 26px; color: var(--ink); text-decoration: none;
  text-shadow: 2px 2px 0 var(--riso-pink);
}
.logo .mark {
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  color: var(--paper); background: var(--cobalt);
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 12px; padding: 9px 10px;
  font-size: 15px; font-weight: 600; line-height: 18px; color: var(--ink); text-decoration: none;
}
.nav a .icon { width: 18px; height: 18px; stroke-width: 1.8; }
.nav a .name { flex-grow: 1; }
.nav a:hover { background: var(--surface); }
.nav a.active { font-weight: 800; background: var(--highlighter); }
.domains { display: flex; flex-direction: column; gap: 8px; padding: 20px 10px 0; border-top: 1px solid var(--line); }
.domains ul { display: flex; flex-direction: column; gap: 8px; }
.domains li { display: flex; align-items: center; gap: 8px; }
.domains .value { font-size: 13px; line-height: 18px; }
.user {
  margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 0 10px; font-size: 13px; line-height: 16px;
}
.user strong { font-size: 14px; line-height: 18px; }
.user button.link { margin-top: 4px; font-size: 13px; }

main.page {
  flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 40px;
  padding: 28px 48px 64px;
}

/* Page parts (Paper "Design", Components — Page parts). */

.page-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-head .date-line { font-size: 14px; font-weight: 600; line-height: 18px; color: var(--text-2); }
.page-head .headline { display: flex; align-items: baseline; gap: 16px; }
.page-head .number { font-size: 80px; line-height: 80px; letter-spacing: -0.05em; }
.page-head .sentence {
  margin: 4px 0 0; font-family: var(--font-display); font-size: 26px; font-weight: 700;
  line-height: 34px; letter-spacing: -0.02em;
}
mark, a.mark {
  color: var(--ink); background: var(--highlighter); padding: 0 8px; text-decoration: none;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tag { display: inline-block; color: var(--ink); border: 1.5px solid var(--ink); }
.tag.now { padding: 6px 10px; font-size: 14px; font-weight: 700; background: var(--highlighter); }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  padding-bottom: 14px; border-bottom: 2px solid var(--ink);
}
.caption { font-size: 14px; line-height: 18px; color: var(--text-2); }
.section-head h2 { flex-shrink: 0; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-bottom: 1px solid var(--line); }

.problem { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; }
.problem .subject { width: 200px; flex-shrink: 0; display: flex; gap: 10px; }
.problem .subject > div { display: flex; flex-direction: column; gap: 3px; }
.problem .subject .icon { width: 18px; height: 18px; color: var(--red); }
.problem .subject strong { font-size: 16px; font-weight: 800; line-height: 20px; }
.problem .what { flex: 1 1 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; line-height: 20px; }
.problem .what .title { font-size: 16px; line-height: 20px; color: var(--red); }
.problem .when { width: 170px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; line-height: 18px; }
.problem .step { width: 190px; flex-shrink: 0; display: flex; justify-content: flex-end; }

.section > table, .board table { border-top: 0; }
.receivers td { padding: 12px 8px; vertical-align: middle; }
/* The greeting takes what is left and ends in an ellipsis. */
.receivers td.greeting { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.split { display: flex; gap: 32px; align-items: flex-start; }
.split > .section { flex: 1 1 0; min-width: 0; }
.strips > li { display: flex; align-items: center; gap: 24px; padding: 18px 0; }
.strips > li > div:first-child { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.strips strong { font-size: 16px; font-weight: 800; }
.strip { display: flex; gap: 4px; margin-bottom: 6px; }
.strip span { width: 10px; height: 24px; flex-shrink: 0; }
.strip .pass { background: var(--pass-tint); }
.strip .fail { background: var(--red); }
.strip .open { border: 1.5px solid var(--open-line); }

.board { width: 470px; flex-shrink: 0; color: var(--paper); background: var(--ink); }
@media (min-width: 1101px) { .board:has(table.latest) { width: 560px; } }
.board-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--ink-line);
}
.board-head .label { color: var(--ink-text-2); }
.board th, .board td { padding: 10px 18px; border-bottom: 1px solid var(--ink-line); }
.board th { padding-block: 9px; color: var(--ink-text-2); }
.board td { font-family: var(--font-mono); font-size: 13.5px; }
.board tr:last-child td { border-bottom: 0; }
.board .dim { color: var(--ink-text); }
.board .right { text-align: right; }

/* Route & records (Paper "Design", Components — Route & records). */
.page-head.with-action { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 32px; }
.page-head.with-action > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.crumbs .icon { width: 14px; height: 14px; }
.crumbs a { color: var(--text-2); text-decoration: none; }
.headline.domain { font-size: 80px; line-height: 84px; letter-spacing: -0.05em; overflow-wrap: anywhere; }

.route { list-style: none; margin: 0; padding: 24px 0 8px; display: flex; }
.station {
  position: relative; flex: 1 1 0; display: flex; flex-direction: column;
  align-items: center; gap: 2px; text-align: center;
}
/* The line from this station to the next: cobalt while unbroken, dashed
   after the first station that does not pass. */
.station::after {
  content: ""; position: absolute; top: 12px; left: 50%; width: 100%;
  border-top: 3px dashed var(--open-line);
}
.station:last-child::after { display: none; }
.station.on::after { border-top: 4px solid var(--cobalt); }
.station .stop {
  position: relative; z-index: 1; width: 28px; height: 28px; margin-bottom: 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--paper);
}
.station .stop .icon { width: 14px; height: 14px; stroke-width: 2.8; }
.station.ok .stop { background: var(--green); }
.station.fail .stop { background: var(--red); }
.station.wait .stop { background: var(--paper); border: 2px dashed var(--open-line); color: var(--text-2); }
.station.ok:first-child .stop { background: var(--cobalt); }
.station strong { font-size: 15px; font-weight: 800; line-height: 18px; }
.station .note { font-size: 13px; line-height: 16px; color: var(--text-2); }
.station.ok .note { color: var(--green); font-weight: 700; }
.station.fail .note { color: var(--red); font-weight: 700; }

.records td { vertical-align: top; padding: 14px 8px; }
.records td:first-child, .records td.value { padding-top: 23px; }
.records td:first-child { white-space: nowrap; }
.field { padding: 9px 12px; background: var(--surface); font-size: 13.5px; line-height: 18px; overflow-wrap: anywhere; }
.select { user-select: all; cursor: text; }
.records .note { margin-top: 6px; font-size: 13px; line-height: 18px; }
.rows .line { padding: 12px 0; }

/* Flow (Paper "Design", Components — Flow). */
.flow { display: flex; align-items: center; gap: 24px; padding: 18px 0; }
.flow-name { width: 190px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.flow-name strong { font-size: 16px; font-weight: 800; }
.flow-line { list-style: none; margin: 0; padding: 0; flex-grow: 1; display: flex; }
.flow-line li { flex: 1 1 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; position: relative; }
.flow-line li.end { flex: 0 0 110px; }
.flow-line .count { font-family: var(--font-display); font-size: 26px; font-weight: 800; line-height: 26px; }
.flow-line .stop { width: 18px; height: 18px; border-radius: 50%; background: var(--open-line); position: relative; z-index: 1; }
.flow-line li.on .stop { background: var(--cobalt); }
.flow-line li.end.on .stop { background: var(--green); }
/* The line into the next station: cobalt when mail reached it. */
.flow-line li:not(.end)::after {
  content: ""; position: absolute; left: 18px; right: 0; top: 40px; height: 0;
  border-top: 3px dashed var(--open-line);
}
.flow-line li:has(+ li.on)::after { border-top: 6px solid var(--cobalt); top: 39px; }
.flow-notes { width: 230px; flex-shrink: 0; display: flex; flex-direction: column; gap: 6px; }

.table-scroll { overflow-x: auto; }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
/* The latest messages fit the board: fixed time and status columns, the
   subject takes what is left and ends in an ellipsis. */
.board table.latest { table-layout: fixed; }
.board .latest th, .board .latest td { padding-inline: 14px; }
.board .latest th:first-child { width: 132px; }
.board .latest th:last-child { width: 164px; }
.board .latest td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-empty, .board-note { margin: 0; padding: 16px 18px; color: var(--ink-text-2); }

/* Messages (Paper "Design", Components — Journey). */
.headline.title { font-size: 56px; line-height: 60px; letter-spacing: -0.04em; overflow-wrap: anywhere; }
.route-line { margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 14px; line-height: 20px; overflow-wrap: anywhere; }
.route-line .icon { width: 14px; height: 14px; color: var(--text-2); }
.sentence.verdict { display: flex; align-items: center; gap: 12px; }
.sentence.verdict .icon { width: 28px; height: 28px; }

.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.filters label { margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.filters label.grow { flex: 1 1 260px; }
.filters input, .filters select { margin-top: 0; }
.filters .button { padding-block: 11px; }
.filters .clear { align-self: center; font-weight: 700; }
.messages td, .apps td, .keys td, .messages .subject { min-width: 260px; }
.messages .subject a { font-weight: 700; color: var(--ink); text-decoration: none; }
.messages .subject a:hover, .board .subject a:hover { text-decoration: underline; }
.messages .subject .muted { font-size: 13px; }
.tag.small {
  padding: 1px 6px; font-family: var(--font-label); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; border-width: 1px;
}
.tag.small.live { color: var(--paper); background: var(--ink); }
.board-head a.label { color: var(--ink-text); text-decoration: none; }
.board-head a.label .icon { width: 12px; height: 12px; }
.board .subject a { color: var(--paper); text-decoration: none; }

.split > .side { width: 420px; flex-shrink: 0; display: flex; flex-direction: column; gap: 32px; }
.journey { list-style: none; margin: 0; padding: 20px 0 0; }
.journey { --time: 96px; --gap: 16px; }
.step {
  position: relative; display: grid; grid-template-columns: var(--time) 28px 1fr;
  column-gap: var(--gap); padding-bottom: 24px;
}
/* The line below a step, from the centre of its dot: cobalt while all is
   well, dashed after a wait. */
.step::after {
  content: ""; position: absolute; left: calc(var(--time) + var(--gap) + 12px); top: 24px; bottom: 0;
  border-left: 4px solid var(--cobalt);
}
.step:not(.on, .ok)::after { margin-left: 1px; border-left: 3px dashed var(--open-line); }
.step:last-child::after { display: none; }
.step .time { padding-top: 3px; font-size: 12px; color: var(--text-2); }
.step .dot {
  position: relative; z-index: 1; width: 22px; height: 22px; margin-left: 3px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--paper); background: var(--cobalt);
}
.step .dot .icon { width: 14px; height: 14px; stroke-width: 2.8; }
.step.ok .dot { background: var(--green); }
.step.fail .dot { background: var(--red); }
.step.wait .dot, .step.none .dot { background: var(--paper); }
.step.wait .dot .icon, .step.none .dot .icon { width: 22px; height: 22px; stroke-width: 2.2; }
.step.wait .dot { color: var(--ink); }
.step.none .dot { color: var(--text-2); }
.step .what { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; font-size: 14px; line-height: 20px; }
.step .what strong { font-size: 16px; line-height: 22px; }
.step.ok .what strong { color: var(--green); }
.step.fail .what strong { color: var(--red); }
.reply {
  display: block; max-width: 100%; margin-top: 4px; padding: 7px 10px;
  font-size: 13px; line-height: 18px; background: var(--surface);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.recipient { display: flex; flex-direction: column; gap: 6px; padding: 12px 0; }
.recipient > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; overflow-wrap: anywhere; }
.facts { margin: 0; }
.facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.facts dt { flex-shrink: 0; color: var(--text-2); }
.facts dd.value { font-size: 13.5px; }
.facts dd { margin: 0; text-align: right; overflow-wrap: anywhere; min-width: 0; }
.explain { margin: 0; padding: 14px 16px; font-size: 14px; line-height: 20px; background: var(--cobalt-tint); }

/* Apps & keys. */
/* A row that asks for something: an idle key, a token ending soon. */
tr.attention td { background: var(--highlighter-tint); }
.keys form { margin: 0; }
.new-key { margin-top: 20px; }
.new-key + .error { margin-top: 12px; }
.secret {
  display: flex; flex-direction: column; gap: 8px; padding: 20px 24px;
  background: var(--highlighter); border: 2px solid var(--ink);
}
.secret h2 { font-size: 22px; line-height: 28px; }
.secret p { margin: 0; }
.secret .field { background: var(--paper); font-size: 15px; }
.board-note { font-size: 14px; line-height: 20px; color: var(--ink-text); border-bottom: 1px solid var(--ink-line); }

/* Agents. */
.date-line.endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.date-line.endpoint .field { padding: 4px 8px; color: var(--ink); }
/* Who did something: an icon for the kind of actor and the name. */
.who { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.who .icon { width: 15px; height: 15px; }
.tokens .scopes { display: flex; flex-wrap: wrap; gap: 4px; }
.tokens .note { margin-top: 4px; font-size: 13px; }
.tokens tr.ended td { color: var(--text-2); }
details.confirm { display: inline-block; text-align: left; }
details.confirm summary { list-style: none; }
details.confirm summary::-webkit-details-marker { display: none; }
details.confirm[open] summary { background: var(--surface); }
details.confirm form {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  margin-top: 8px; padding: 12px; max-width: 260px; border: 1.5px solid var(--ink); background: var(--paper);
}
details.confirm p { margin: 0; font-size: 13px; line-height: 18px; }
.button.danger { color: var(--paper); background: var(--red); border-color: var(--red); }
.button.danger:hover { background: var(--red); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.tools > li { display: grid; grid-template-columns: minmax(120px, max-content) minmax(60px, 1fr) 40px; align-items: center; gap: 16px; padding: 10px 0; }
.tools .bar { height: 8px; background: var(--surface); }
.tools .bar span { display: block; height: 100%; width: var(--share); background: var(--ink); }
.never { margin-top: 24px; padding-top: 16px; border-top: 2px solid var(--ink); }
.never ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.never li { display: flex; align-items: center; gap: 10px; }
.never .icon { width: 15px; height: 15px; }
.token-form { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 20px; }
.token-form .filters { width: 100%; }
.scope-choices { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: 10px; }
.scope-choices legend { margin-bottom: 8px; font-size: 13px; font-weight: 700; }
label.check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 400; font-size: 14px; line-height: 20px; cursor: pointer; }
label.check input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cobalt); flex-shrink: 0; }

/* Audit log. */
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip .count { color: inherit; }
.chip.active, .chip.active:hover { color: var(--paper); background: var(--ink); box-shadow: none; transform: none; }
.chips .caption { margin-left: auto; }
.entries td { vertical-align: top; padding: 11px 8px; }
.entries td.target { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entries td.what { font-size: 14px; }

/* Micro-interactions: quick, square, never in the way. */
.button, .nav a, a.more .icon, button.link .icon, .rows > li, tbody tr, .board tbody tr, a.mark {
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.12s ease, transform 0.12s ease;
}
.button:hover { background: var(--surface); }
.button.now:hover { background: var(--highlighter); box-shadow: 3px 3px 0 var(--ink); transform: translate(-1px, -1px); }
.button.primary:hover { background: var(--cobalt); box-shadow: 6px 6px 0 var(--riso-pink); transform: translate(-2px, -2px); }
.button:active, .button.primary:active, .button.now:active { box-shadow: none; transform: translate(2px, 2px); }
.button.primary:active { box-shadow: 2px 2px 0 var(--riso-pink); }
a.more:hover .icon, .board-head a.label:hover .icon { transform: translateX(3px); }
button.link:hover .icon { transform: translateX(2px); }
a.mark:hover { box-shadow: 0 3px 0 var(--ink); }
.nav a:active { transform: translateY(1px); }
/* Rows that lead somewhere light up, and the whole row is the link. */
.messages tbody tr, .board .latest tbody tr { position: relative; }
.messages tbody tr:hover { background: var(--surface); }
.board .latest tbody tr:hover { background: var(--ink-line); }
.messages .subject a::after, .board .latest .subject a::after { content: ""; position: absolute; inset: 0; }
.messages .subject a:focus-visible, .board .latest .subject a:focus-visible { outline: none; }
.messages tbody tr:has(a:focus-visible), .board .latest tbody tr:has(a:focus-visible) { outline: 3px solid var(--cobalt); outline-offset: -3px; }
.button .icon { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* Responsive: tablet and phone. */
.live-bar { overflow-x: auto; scrollbar-width: none; }
@media (max-width: 1100px) {
  .split { flex-direction: column; align-items: stretch; }
  .board { width: 100%; }
  .flow-notes { width: auto; }
  .split > .side { width: 100%; }
}
@media (max-width: 900px) {
  .frame { flex-direction: column; }
  .sidebar {
    width: auto; flex-direction: row; align-items: center; gap: 16px;
    padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line);
    overflow-x: auto;
  }
  .logo { flex-shrink: 0; padding: 0; }
  .nav { flex-direction: row; }
  .nav a { white-space: nowrap; }
  .sidebar .domains { display: none; }
  .user { margin: 0 0 0 auto; flex-shrink: 0; align-items: flex-end; padding: 0; }
  .user .muted { display: none; }
  main.page { padding: 24px 20px 48px; gap: 32px; }
  .page-head.with-action { flex-direction: column; align-items: flex-start; }
  .problem { flex-wrap: wrap; }
  .problem .what { flex-basis: calc(100% - 216px); }
  .problem .when { margin-left: 210px; }
  .flow { flex-wrap: wrap; }
  .flow-name { width: 100%; }
  .flow-notes { width: 100%; flex-direction: row; flex-wrap: wrap; gap: 6px 20px; }
  .route { overflow-x: auto; }
  .station { min-width: 104px; }
}
@media (max-width: 600px) {
  .sidebar .logo { font-size: 0; gap: 0; }
  .sidebar { gap: 8px; }
  /* Icons only; the names stay for screen readers. */
  .nav a { gap: 6px; padding: 9px; }
  .nav a .name, .user button.link .name {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap;
  }
  .user strong { display: none; }
  .user button.link { padding: 9px; }
  .user button.link .icon { width: 18px; height: 18px; }
  /* The route runs down the page. */
  .route { flex-direction: column; overflow: visible; padding-top: 16px; }
  .station, .station:first-child, .station:last-child {
    display: grid; grid-template-columns: 28px 1fr; column-gap: 14px;
    align-items: start; text-align: left; min-width: 0; padding-bottom: 18px;
  }
  .station .stop { grid-row: span 2; margin-bottom: 0; }
  .station::after { left: 12px; top: 28px; width: 0; height: 100%; border-top: 0; border-left: 3px dashed var(--open-line); }
  .station.on::after { border-top: 0; border-left: 4px solid var(--cobalt); }
  .page-head .number { font-size: 56px; line-height: 56px; }
  .headline.domain { font-size: 44px; line-height: 48px; }
  .page-head .sentence { font-size: 20px; line-height: 27px; }
  .section-head { flex-direction: column; gap: 4px; }
  .problem .subject, .problem .what, .problem .when, .problem .step { width: 100%; flex-basis: 100%; margin-left: 0; }
  .problem .step { justify-content: flex-start; }
  .strips > li { flex-direction: column; align-items: flex-start; gap: 8px; }
  .strip span { width: 8px; }
  .flow-line li.end { flex-basis: 80px; }
  .flow-line .count { font-size: 20px; }
  /* Tables stack: each row a small grid. */
  .records thead, .messages thead, .apps thead, .keys thead, .tokens thead, .entries thead { display: none; }
  .records tr, .messages tr, .apps tr, .keys tr, .tokens tr, .entries tr { display: grid; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .records tr { grid-template-columns: auto 1fr; }
  .messages tr, .apps tr, .keys tr, .tokens tr, .entries tr { grid-template-columns: 1fr auto; }
  .records td, .messages td, .apps td, .keys td, .tokens td, .entries td { padding: 0; border: 0; }
  .entries td:first-child { grid-column: 2; grid-row: 1; color: var(--text-2); }
  .entries td:nth-child(n+3) { grid-column: 1 / -1; }
  .entries td.target { max-width: none; }
  .chips .caption { margin-left: 0; width: 100%; }
  .tokens td:nth-child(n+2) { grid-column: 1 / -1; }
  .tokens td[data-label]::before { content: attr(data-label) " "; color: var(--text-2); font-family: var(--font-ui); }
  .tokens td.right { text-align: left; }
  .tokens td:nth-child(6) { grid-column: 2; grid-row: 1; }

  .apps td:nth-child(n+3), .keys td:nth-child(2), .keys td:nth-child(3) { grid-column: 1 / -1; }
  .keys td:nth-child(4) { grid-column: 2; grid-row: 1; }
  tr.attention { background: var(--highlighter-tint); padding-inline: 8px; }
  tr.attention td { background: none; }
  .records td:first-child, .records td.value { padding-top: 0; }
  .records td:nth-child(3), .records td:nth-child(4) { grid-column: 1 / -1; }
  .receivers thead { display: none; }
  .receivers tr { display: grid; grid-template-columns: auto auto 1fr; gap: 4px 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .receivers td { padding: 0; border: 0; }
  .receivers td:first-child { grid-column: 1 / 3; }
  .receivers td:nth-child(2) { grid-column: 3; justify-self: end; }
  .receivers .status { white-space: nowrap; }
  .receivers td[data-label]::before { content: attr(data-label) " "; color: var(--text-2); }
  .receivers td.greeting { grid-column: 1 / -1; width: auto; max-width: none; }
  /* The board's rows stack: subject on top, time and status below. */
  .board .latest thead { display: none; }
  .board .latest tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 14px; border-bottom: 1px solid var(--ink-line); }
  .board .latest tr:last-child { border-bottom: 0; }
  .board .latest td { padding: 0; border: 0; }
  .board .latest td.subject { grid-column: 1 / -1; grid-row: 1; }
  .headline.title { font-size: 34px; line-height: 38px; }
  .sentence.verdict { align-items: flex-start; }
  .sentence.verdict .icon { width: 22px; height: 22px; margin-top: 3px; }
  .filters { gap: 12px; }
  .filters label { flex: 1 1 calc(50% - 6px); min-width: 0; }
  .filters label.grow { flex-basis: 100%; }
  .filters select { width: 100%; }
  .filters .button { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .messages .subject { grid-column: 1 / -1; grid-row: 1; min-width: 0; }
  .messages td:nth-child(3) { display: none; }
  .journey { --time: 60px; --gap: 12px; }
}

/* ======================================================================
   JuFi ID: id's own pages, not part of the Lijnennet copy above.
   Paper "JuFi", page "Design": ID — Sign in, ID — Second factor,
   ID — Account, ID — Request refused, and the phone boards (390).
   ====================================================================== */

body.id {
  --gutter: 72px;
  /* Wider than the boards (1440): the content stays in their width. */
  --inline: max(var(--gutter), calc((100% - 1440px) / 2 + var(--gutter)));
  display: flex; flex-direction: column; min-height: 100vh;
}
body.id main { flex-grow: 1; max-width: none; margin: 0; padding: 0; }
body.id h1 {
  margin: 0; font-size: 80px; line-height: 80px; letter-spacing: -0.04em;
  overflow-wrap: break-word;
}
body.id p { margin: 0; }
.id .lead { color: var(--text-2); }
.id .status { gap: 8px; }
.id .status .icon, .id .button .icon, .id button.link .icon { width: 16px; height: 16px; }
.id button.link:focus-visible { outline: 3px solid var(--cobalt); outline-offset: 2px; }

/* Top bar: the logo, and the host or the way out. */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 24px var(--inline); border-bottom: 1px solid var(--line);
}
.top .logo { padding: 0; }
.top .logo .mark .icon { width: 18px; height: 18px; stroke-width: 2.2; }
.top button.link { gap: 8px; font-size: 14px; line-height: 18px; }

/* The two sign-in steps. */
.sign-in {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 440px);
  column-gap: 96px; row-gap: 48px; align-items: start;
  padding: 112px var(--inline) 144px;
}
.intro { display: flex; flex-direction: column; gap: 20px; }
.for-app {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 17px; line-height: 24px; color: var(--text-2);
}
.app {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0;
  padding: 4px 10px 4px 4px; border: 1px solid var(--ink);
  font-size: 16px; font-weight: 700; line-height: 20px; color: var(--ink);
}
.app .mark {
  width: 22px; height: 22px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper); background: var(--cobalt);
}
.app .mark .icon { width: 12px; height: 12px; stroke-width: 2.6; }
.intro .lead { max-width: 440px; padding-top: 12px; font-size: 15px; line-height: 22px; }

.step { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.label.rule { padding-bottom: 12px; line-height: 16px; border-bottom: 2px solid var(--ink); }
.step label { margin: 0; font-size: 14px; line-height: 18px; }
.step input[type=email], .step input[type=password], .step input[type=text] {
  margin-top: 8px; padding: 12px 14px; color: var(--ink);
}
/* Focus: the field turns white with a cobalt rule, as on the boards. */
.step input:focus {
  padding: 11px 13px; outline: none; background: var(--paper);
  border: 2px solid var(--cobalt);
}
.step input.code {
  width: 220px; max-width: 100%;
  font-family: var(--font-mono); font-size: 22px; font-weight: 700;
  line-height: 28px; letter-spacing: 0.12em;
}
/* A recovery code has 19 characters: smaller, so it fits a phone. */
.step input.code.recovery { width: 360px; font-size: 18px; letter-spacing: 0.06em; }
.field-group { display: flex; flex-direction: column; gap: 8px; }
.field-group .status { font-weight: 400; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 8px; }
.actions .hint { font-size: 13px; line-height: 18px; }
.switch { font-size: 14px; font-weight: 700; line-height: 18px; text-decoration: none; }
.switch:hover { text-decoration: underline; text-underline-offset: 3px; }
.step .error {
  display: flex; align-items: flex-start; gap: 8px; margin: 0;
  font-size: 14px; line-height: 18px;
}
.step .error .icon { width: 16px; height: 16px; margin-top: 1px; }

.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; padding: 20px var(--inline); border-top: 1px solid var(--line);
  font-size: 13px; line-height: 18px; color: var(--text-2);
}
.foot p:first-child { display: flex; align-items: flex-start; gap: 8px; }
.foot .icon { width: 16px; height: 16px; margin-top: 1px; stroke-width: 2; }
.foot .value { font-size: 12px; line-height: 16px; }

/* Account. */
.account { display: flex; flex-direction: column; gap: 56px; padding: 72px var(--inline) 96px; }
.account .head { display: flex; flex-direction: column; gap: 12px; }
.account .head .lead { padding-top: 4px; font-size: 16px; line-height: 24px; }
.account-facts {
  display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 460px) minmax(0, 1fr);
  margin: 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line);
}
.account-facts > div {
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 20px 24px 22px; border-left: 1px solid var(--line);
}
.account-facts > div:first-child { padding-left: 0; border-left: 0; }
.account-facts dt { line-height: 14px; }
.account-facts dd { margin: 0; overflow-wrap: anywhere; }
.account-facts dd.value { line-height: 20px; }
.account .section-head { padding-bottom: 16px; }
.account h2 { font-size: 34px; line-height: 38px; }
.account .caption { line-height: 20px; }
.sessions { table-layout: fixed; border-top: 0; }
.sessions th, .sessions td { padding: 16px 16px 16px 0; vertical-align: middle; }
.sessions th { padding-block: 12px; font-size: 11px; line-height: 14px; }
.sessions th:nth-child(1), .sessions th:nth-child(2) { width: 200px; }
.sessions th:nth-child(4) { width: 180px; }
.sessions td.value { line-height: 20px; }
.sessions .narrow { display: none; }
.sessions .browser { display: block; font-size: 15px; line-height: 20px; overflow-wrap: anywhere; }
.sessions .ip { display: block; margin-top: 2px; font-size: 12px; line-height: 16px; color: var(--text-2); overflow-wrap: anywhere; }
.sessions td.action { padding-right: 0; text-align: right; }
.sessions form { margin: 0; }
.sessions .button.compact { gap: 8px; padding: 7px 12px; border-width: 2px; font-size: 14px; }

/* A page that only tells something, and the sign-out question. */
.notice {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
  padding: 112px var(--inline) 144px;
}
body.id .notice h1 { max-width: 1056px; font-size: 64px; line-height: 66px; }
.notice .lead { max-width: 640px; font-size: 17px; line-height: 26px; }
.what-to-do {
  display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 640px;
  margin-top: 12px; padding: 18px 0 16px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 15px; line-height: 22px;
}
.notice .actions { padding-top: 12px; }

/* Micro-interactions: CSS only, and only for those who want motion. */
@media (prefers-reduced-motion: no-preference) {
  .step input { transition: background-color 0.12s ease, border-color 0.12s ease; }
  .logo .mark .icon { transition: transform 0.2s ease; }
  .logo:hover .mark .icon { transform: rotate(-20deg); }
}

/* Tablet. */
@media (max-width: 1100px) {
  body.id { --gutter: 40px; }
  .sign-in { column-gap: 56px; padding-block: 80px 96px; }
  body.id h1 { font-size: 64px; line-height: 64px; }
  .account { padding-block: 56px 80px; }
  .notice { padding-block: 80px 96px; }
  body.id .notice h1 { font-size: 56px; line-height: 60px; }
  .sessions th:nth-child(1), .sessions th:nth-child(2) { width: 140px; }
  .sessions th:nth-child(4) { width: 150px; }
}
/* One column. */
@media (max-width: 900px) {
  .sign-in { grid-template-columns: minmax(0, 560px); padding-block: 64px 80px; }
  .account { gap: 40px; }
  .account-facts { grid-template-columns: minmax(0, 1fr); border-bottom: 0; }
  .account-facts > div, .account-facts > div:first-child {
    gap: 6px; padding: 14px 0; border-left: 0; border-bottom: 1px solid var(--line);
  }
  .account-facts > div.codes { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
}
/* Phone, as on the 390 boards. */
@media (max-width: 600px) {
  body.id { --gutter: 20px; }
  .top { padding-block: 16px; }
  .top .host { display: none; }
  body.id h1 { font-size: 48px; line-height: 50px; }
  .sign-in { row-gap: 28px; padding-block: 40px; }
  .intro { gap: 14px; }
  .intro .lead.optional { display: none; }

  .account { gap: 36px; padding-block: 36px 48px; }
  .account .head { gap: 10px; }
  body.id .account h1 { font-size: 44px; line-height: 46px; }
  .account .head .lead { padding-top: 0; font-size: 15px; line-height: 22px; }
  .account-facts > div:nth-child(2) dd.value { font-size: 13px; line-height: 18px; }
  .account .section-head { gap: 6px; padding-bottom: 12px; }
  .account h2 { font-size: 28px; line-height: 32px; }

  /* Each session: browser and action on a line, the rest below it. */
  .sessions thead { display: none; }
  .sessions tr {
    display: flex; flex-wrap: wrap; align-items: center;
    padding: 14px 0; border-bottom: 1px solid var(--line);
  }
  .sessions tr::before { content: ""; order: 3; flex-basis: 100%; }
  .sessions td { padding: 0; border: 0; }
  .sessions td.where { display: contents; }
  .sessions .browser { order: 1; flex: 1 1 0; min-width: 0; }
  .sessions td.action { order: 2; }
  .sessions td.since, .sessions td.seen, .sessions .ip {
    margin-top: 8px; font-size: 12px; line-height: 16px; color: var(--text-2);
  }
  .sessions td.since { order: 4; }
  .sessions td.seen { order: 5; }
  .sessions .ip { order: 6; }
  .sessions td.action { margin-left: 12px; }
  .sessions .narrow { display: inline; }
  .sessions td.seen::before, .sessions .ip::before { content: "·"; margin-inline: 0.6em; }

  .notice { gap: 16px; padding-block: 48px 72px; }
  body.id .notice h1 { font-size: 40px; line-height: 44px; }
  .notice .lead { font-size: 16px; line-height: 24px; }
  .foot { flex-direction: column; align-items: flex-start; }
}