:root { --radius: 10px; }
/* Kleuren komen uit ds/tokens.css; lettertypen en aliassen uit brand.css. */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 var(--font-body);
}
a { color: var(--link); }
h1 { font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 1.6rem; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5rem; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }

.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1rem; background: var(--surface); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--text);
  font-family: var(--font-display); font-stretch: 125%; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.brand svg, .ds-brand svg { width: 34px; height: 34px; flex: none; }
.logo-tile { fill: var(--logo-bg); }
.logo-s { fill: none; stroke: var(--logo-fg); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
/* Volt is op een lichte achtergrond niet leesbaar als tekst; daar staat het woordmerk in één kleur. */
.brand .wordmark span { color: var(--text); }
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]):not([data-theme="light"]) .wordmark span { color: var(--logo-bg); }
}
:root[data-mode="dark"] .wordmark span,
:root[data-theme="dark"] .wordmark span { color: var(--logo-bg); }
.ds-logout { display: flex; margin: 0; }
.ds-logout button {
  min-height: var(--control); padding: 0 10px; border: 0; background: transparent;
  color: var(--ink-2, var(--muted)); font: inherit; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.ds-preview-name { color: var(--ink); margin-right: auto; }
.nav { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--text); }
.nav a:hover { color: var(--link); }

/* S3: dezelfde semantische tokens werken in alle thema's en licht/donker. */
.new-shell .topbar { position: relative; z-index: 2; }
.shell-layout { display: grid; grid-template-columns: minmax(12rem, 15rem) minmax(0, 1fr); max-width: 90rem; margin: 0 auto; }
.shell-layout > main { min-width: 0; width: 100%; }
.shell-sidebar { border-right: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-4); }
.shell-nav { display: flex; flex-direction: column; gap: var(--space-1); }
.shell-nav-group { display: flex; flex-direction: column; gap: var(--space-1); }
.shell-nav a { display: block; padding: var(--space-2) var(--space-3); min-height: 44px; border-radius: var(--radius); color: var(--color-text); text-decoration: none; }
.shell-nav a:hover { background: var(--color-surface-alt); }
.shell-nav a[aria-current=page] { background: var(--color-surface-alt); border-left: 4px solid var(--color-link); font-weight: 700; }
.shell-nav a.shell-nav-parent.is-active { font-weight: 700; }
.shell-nav a.shell-nav-area { color: var(--color-text-muted); }
.shell-nav-sub { display: flex; flex-direction: column; gap: var(--space-1); margin-left: var(--space-3); padding-left: var(--space-2); border-left: 2px solid var(--color-border); }
.shell-nav-heading { margin: var(--space-4) var(--space-3) var(--space-1); color: var(--color-text-muted); font-weight: 700; }
.shell-nav-heading.is-active { color: var(--color-text); border-bottom: 2px solid var(--color-link); }
.shell-menu, .shell-bottom { display: none; }
.shell-skip { position: absolute; left: var(--space-4); top: -5rem; z-index: 10; padding: var(--space-2) var(--space-3); background: var(--color-surface); }
.shell-skip:focus { top: var(--space-2); }
@media (max-width: 767px) {
  .shell-layout { display: block; }
  .shell-sidebar { display: none; }
  .shell-top-links { gap: var(--space-2); }
  .shell-top-links > a:first-child, .shell-top-links > span { display: none; }
  .shell-menu { display: block; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .shell-menu summary { cursor: pointer; min-height: 44px; padding: var(--space-2); }
  .shell-menu .shell-nav { max-height: 70vh; overflow-y: auto; }
  .new-shell { padding-bottom: 4.5rem; }
  .shell-bottom { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset: auto 0 0; z-index: 4;
    padding: var(--space-1) env(safe-area-inset-right) calc(var(--space-1) + env(safe-area-inset-bottom)) env(safe-area-inset-left);
    background: var(--color-surface); border-top: 1px solid var(--color-border); }
  .shell-bottom a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 48px;
    padding: var(--space-1); color: var(--color-text); font-size: .8rem; text-decoration: none; overflow-wrap: anywhere; }
  .shell-bottom a[aria-current=page] { font-weight: 700; border-top: 3px solid var(--color-link); }
  .shell-bottom a.is-active { font-weight: 700; border-top: 3px solid var(--color-link); }
}
@media print { .shell-sidebar, .shell-menu, .shell-bottom { display: none; } .shell-layout { display: block; } }

.page { max-width: 1000px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.narrow { max-width: 460px; margin: 0 auto; padding: 2rem 1rem 3rem; }
.login-logo { display: block; margin: 0 auto 1.25rem; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.25rem; margin-bottom: 1rem;
}
.muted { color: var(--muted); }
.small { font-size: .875rem; }
.flash, .notice { background: var(--notice); border-left: 4px solid var(--link); padding: .6rem .9rem; border-radius: 6px; }
.error { color: var(--danger); font-weight: 600; }
.ok { color: var(--ok); font-weight: 600; }
.warn { color: var(--warn); font-weight: 600; }

label { display: block; margin-bottom: .9rem; font-weight: 500; }
label.check { display: flex; gap: .5rem; align-items: center; font-weight: 400; margin-bottom: .4rem; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]) {
  display: block; width: 100%; margin-top: .3rem; padding: .65rem .75rem; font: inherit;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
/* Focusring: één duidelijke ring voor alles wat bediend kan worden (WCAG 2.2: 2.4.7, 2.4.11, 1.4.11).
   De halo in de achtergrondkleur houdt de ring zichtbaar op elk vlak. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus); outline-offset: var(--focus-ring-offset);
  box-shadow: 0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--color-bg);
}
input[type=checkbox], input[type=radio] { flex: none; width: 1.2rem; height: 1.2rem; accent-color: var(--link); }
input.code { font-size: 1.4rem; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
input.link { font-family: ui-monospace, monospace; font-size: .85rem; }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; margin: 0 0 1rem; }
legend { font-weight: 600; padding: 0 .3rem; }

button, .button {
  display: inline-block; padding: .6rem 1rem; min-height: 44px; font: inherit; font-weight: 600;
  color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  cursor: pointer; text-decoration: none;
}
button.primary, .button.primary { background: var(--primary-bg); color: var(--primary-text); border-color: var(--primary-bg); }
button.danger { color: var(--danger); border-color: var(--danger); }
button.linklike { background: none; border: 0; padding: 0; min-height: 24px; min-width: 24px; color: var(--link); font-weight: 400; text-decoration: underline; }
form.inline { display: inline; }

.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .75rem; }
.row input { flex: 1 1 200px; margin-top: 0 !important; }
.headrow { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }

.tag { display: inline-block; font-size: .8rem; font-weight: 600; padding: .1rem .5rem; margin: 0 .25rem .2rem 0;
  border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; margin-top: 1.25rem; }
.tile { display: flex; flex-direction: column; gap: .25rem; padding: 1rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; color: var(--text); }
a.tile:hover { border-color: var(--link); }
.tile span { color: var(--muted); font-size: .9rem; }
.tile.soon { opacity: .6; }

.tablewrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .6rem .75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .85rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
tr:last-child td { border-bottom: 0; }
tr.inactive td { color: var(--muted); }
.batch-select { width: 1%; vertical-align: middle; }
.cooper-band-0 { --cooper-color: var(--zone-5); }
.cooper-band-1 { --cooper-color: var(--zone-4); }
.cooper-band-2 { --cooper-color: var(--zone-3); }
.cooper-band-3 { --cooper-color: var(--zone-2); }
.cooper-result { display: inline-block; white-space: nowrap; padding-left: .5rem;
  border-left: .3rem solid var(--cooper-color); print-color-adjust: exact; }
.cooper-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; }
.cooper-fallback { display: inline-block; margin-left: .3rem; color: var(--muted);
  text-decoration: underline dotted; text-underline-offset: .15rem; }

.qr { margin: .75rem 0; }
.qr svg { max-width: 100%; height: auto; border-radius: 8px; }
code.secret { word-break: break-all; }
ul.codes { list-style: none; padding: 0; columns: 2; font-size: 1.05rem; }
ul.codes li { margin-bottom: .35rem; }
ul.plain { padding-left: 1.1rem; }
ol li { margin-bottom: .75rem; }

@media print {
  .topbar, .ds-top, .ds-skip, .noprint { display: none; }
  .card { border: 0; }
}

.subnav { display: flex; gap: .25rem; flex-wrap: wrap; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.subnav a { padding: .5rem .75rem; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; }
.subnav a[aria-current=page] { color: var(--text); border-bottom-color: var(--link); font-weight: 600; }
.profile-nav { position: sticky; top: 0; z-index: 2; background: var(--bg); }
.preview-banner { position: sticky; top: 0; z-index: 3; padding: .75rem 1rem;
  background: var(--surface); border-bottom: 3px solid var(--link);
  display: flex; align-items: center; gap: .5rem 1.25rem; flex-wrap: wrap; }
.preview-banner form { margin: 0; }
.preview-mode .profile-nav { position: static; }
@media print { .preview-mode .page, .preview-banner { display: none; } }
#overzicht, #lopen, #gezondheid, #account, #rollen { scroll-margin-top: 7rem; }
.rolerow { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.rolerow:last-of-type { border-bottom: 0; }
.groupchecks { display: flex; flex-wrap: wrap; gap: .25rem 1rem; padding-left: 1.75rem; }
.groupchecks label.check { margin-bottom: .2rem; }
h2.spaced { margin-top: 1.75rem; }
form.row.inactive input { color: var(--muted); }
td.nowrap { white-space: nowrap; }
@media (max-width: 640px) {
  .hide-sm { display: none; }
}

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.cols > .card { margin-bottom: 0; }
.cols + .card { margin-top: 1rem; }
table.compact th, table.compact td { padding: .35rem .5rem; }
table.compact th { text-align: left; }
dl.grid { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: .35rem 1rem; margin: 0; }
dl.grid dt { color: var(--muted); font-size: .9rem; }
dl.grid dd { margin: 0; white-space: pre-wrap; }
.confidential { border-left: 4px solid var(--warn); }
.formgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0 1rem; align-items: end; }
.formgrid .wide { grid-column: 1 / -1; }
.formgrid button { justify-self: start; margin-bottom: .9rem; }
select, textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: inherit;
  color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px;
}
.row select { width: auto; max-width: 100%; min-width: 0; margin-top: 0; }
.filters input { flex: 2 1 220px; }
details summary { cursor: pointer; color: var(--link); margin: .5rem 0; min-height: 44px; display: flex; align-items: center; }
.vandaag-stack { display: flex; flex-direction: column; gap: 0; }
.vandaag-stack > .card, .vandaag-stack > details.card { margin-top: 1rem; }
@media (min-width: 768px) {
  .vandaag-session-details summary { display: none; }
}
.note { border-top: 1px solid var(--line); padding: .5rem 0; }
.note p { margin: .25rem 0 0; white-space: pre-wrap; }
.prewrap { white-space: pre-wrap; }
.checkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .1rem 1rem; margin-bottom: 1rem; }
.checkgrid-large { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0 0 1rem; padding: 0; border: 0; min-width: 0; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
label.check-large:focus-within { outline: 3px solid var(--link); outline-offset: 2px; }
label.check-large { display: flex; gap: .5rem; align-items: center; font-weight: 400; padding: .75rem 1rem; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: .5rem; cursor: pointer; }
label.check-large:has(input:disabled) { opacity: 0.6; cursor: not-allowed; }
table.matrix td, table.matrix th { text-align: right; white-space: nowrap; }
table.matrix td:first-child, table.matrix th:first-child { text-align: left; position: sticky; left: 0; background: var(--surface); }
tr.current td { background: var(--notice); }
.tile p { margin: .35rem 0 0; }

/* Weergave-instellingen op Mijn account. Taal staat naast het thema; het thema
   blijft de bestaande paletten, dus de rij lijnt bovenaan uit. */
.ds-appearance .ds-form-row { align-items: start; }
.ds-lang { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; }
.ds-lang a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; min-height: var(--control); padding: 0 8px;
  border: 1px solid var(--ring); border-radius: 8px; color: var(--ink-2);
  font-size: 13px; font-weight: 600; text-decoration: none; text-transform: uppercase;
}
.ds-lang a[aria-current="true"] { color: var(--ink); background: var(--wash); }
.ds-top > .ds-brand + .ds-theme,
.ds-top > .ds-brand + .ds-lang { margin-left: auto; }
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.themes label.check { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .75rem; margin: 0; }
.swatch { display: inline-flex; flex: none; width: 1.6rem; height: 1.6rem; border-radius: 6px; }
.swatch::after { content: ""; margin: auto; width: .7rem; height: .7rem; border-radius: 999px; }
.swatch.volt { background: #f4f6f5; border: 1px solid var(--line); } .swatch.volt::after { background: #006b5b; }
.swatch.stroom { background: #070D1C; } .swatch.stroom::after { background: #2DE2E6; }
.swatch.hartslag { background: #120D1A; } .swatch.hartslag::after { background: #FF4D5E; }

/* Themakeuze: naam met "standaard" eronder, zodat de tekst binnen het vakje blijft. */
.themes { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.themes label.check { align-items: center; }
.theme-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.theme-name .small { font-size: .8rem; }

/* Actief / inactief */
.segmented { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; margin-bottom: .75rem;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 10px; }
.segmented a { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: 0 .9rem;
  border-radius: 8px; text-decoration: none; color: var(--text); font-weight: 600; }
.segmented a[aria-current=page] { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
.segmented .count { font-size: .8rem; font-weight: 600; padding: .05rem .45rem; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text); }
.tag.tag-inactive { background: var(--surface2); color: var(--muted); border: 1px dashed var(--muted); }
tr.inactive td { color: var(--muted); background: var(--surface2); }
tr.inactive td a { color: var(--muted); }
.banner-inactive { padding: .6rem .9rem; border-radius: 8px; border: 1px dashed var(--muted);
  background: var(--surface2); color: var(--text); }
.tag.tag-pt { background: var(--surface); color: var(--link); border: 1px solid var(--link); }
.tag.tag-unassigned { background: var(--surface); color: var(--warn); border: 1px dashed var(--warn); }

/* Loopgroep (bovenaan) versus subgroep (label met een streep ervoor). */
.clubbar { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-weight: 600; }
.clubbar a { color: var(--text); text-decoration: none; }
.clubbar-label { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--on-accent); background: var(--accent); padding: .15rem .45rem;
  border-radius: 4px; }
.tag.tag-sub { background: var(--surface); color: var(--text); border: 1px solid var(--line);
  border-left: 3px solid var(--link); border-radius: 4px; }

/* Tabellen: duidelijke lijnen, kopregel met tint en afwisselende rijen. */
.tablewrap table, table.compact { border-collapse: collapse; }
.tablewrap th { background: var(--surface2); border-bottom: 2px solid var(--line); }
.tablewrap td, .tablewrap th { border-bottom: 1px solid var(--line); }
.tablewrap tbody tr:nth-child(even):not(.inactive) td { background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.tablewrap tbody tr:hover:not(.inactive) td { background: var(--chip-bg); }
.tablewrap td + td, .tablewrap th + th { border-left: 1px solid color-mix(in srgb, var(--line) 60%, transparent); }
table.compact tr + tr th, table.compact tr + tr td { border-top: 1px solid var(--line); }
table.compact tbody tr:nth-child(even) td, table.compact tbody tr:nth-child(even) th {
  background: color-mix(in srgb, var(--surface2) 55%, transparent); }
.tag.tag-health { background: var(--surface); color: var(--danger); border: 1px solid var(--danger); }
.message p { margin-top: .25rem; }
.footer { max-width: 1000px; margin: 0 auto; padding: 1rem 1rem 2rem; font-size: .85rem; color: var(--muted); }
.footer a { color: var(--muted); }
.legal h2 { margin-top: 1.5rem; }
.legal li { margin-bottom: .35rem; }
.draft { border: 1px dashed var(--warn); color: var(--warn); padding: .5rem .75rem; border-radius: 8px; }

/* Workouts */
.wk-list { display: flex; flex-direction: column; gap: .5rem; }
.wk-step, .wk-repeat { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .75rem; background: var(--surface); }
.wk-step { border-left: 5px solid var(--line); }
.wk-step.kind-warmup, .wk-step.kind-cooldown { border-left-color: var(--muted); }
.wk-step.kind-interval { border-left-color: var(--link); }
.wk-step.kind-recovery, .wk-step.kind-rest { border-left-color: var(--ok); }
.wk-repeat { background: var(--surface2); }
.wk-repeat > .wk-list { margin-top: .5rem; padding-left: .75rem; border-left: 2px dashed var(--line); }
.wk-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.wk-row select, .wk-row input { width: auto; margin-top: 0; }
.wk-inline { display: inline-flex; align-items: center; gap: .35rem; }
.wk-num { width: 6.5rem !important; }
.wk-note { flex: 1 1 12rem; }
.wk-controls { margin-left: auto; display: inline-flex; gap: .5rem; }
.wk-add { display: flex; gap: .5rem; }
.danger-link { color: var(--danger) !important; }
textarea.mono { font-family: var(--font-mono); font-size: .8rem; }
.wk-lines { padding-left: 1.4rem; }
.wk-lines li { margin: .3rem 0; }
.wk-lines li.indent-1 { margin-left: 1.5rem; }
.wk-lines li.indent-2 { margin-left: 3rem; }
.wk-lines li.indent-3 { margin-left: 4.5rem; }
.wk-lines.print { font-size: 1.1rem; }
.wk-lines { list-style: none; padding-left: 0; }
.wk-lines li { padding: .35rem .6rem; border-left: 3px solid var(--line); background: var(--surface2); border-radius: 4px; }
.field { margin-bottom: .9rem; }
.field > label:first-child { display: block; font-weight: 500; }
.field .muted.small { margin: .25rem 0 0; }
.formgrid .field.wide { grid-column: 1 / -1; }
.formgrid:has(> .field) { align-items: start; }

/* Zonekleuren (Garmin-volgorde, zie tempo.py): 0 rustig t/m 5 AD 110% / Z5. De naam van de zone
   staat er altijd bij; de kleur is een hulpmiddel, niet de enige informatie. */
:root {
  --zone-0: #9AA0A6; --zone-1: #1E88E5; --zone-2: #43A047;
  --zone-3: #FBC02D; --zone-4: #FB8C00; --zone-5: #E53935;
}
.zone-0 { --zone: var(--zone-0); } .zone-1 { --zone: var(--zone-1); } .zone-2 { --zone: var(--zone-2); }
.zone-3 { --zone: var(--zone-3); } .zone-4 { --zone: var(--zone-4); } .zone-5 { --zone: var(--zone-5); }
.zone-dot { display: inline-block; width: .7rem; height: .7rem; margin-right: .45rem; border-radius: 50%;
  background: var(--zone); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .18); vertical-align: -.05rem;
  print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.wk-step.zone { border-left-color: var(--zone); }
.wk-lines li.zone { border-left: 6px solid var(--zone); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
.zone-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.zone-legend > span { white-space: nowrap; }

/* Eén persoonlijke kaart per afdrukpagina; labels houden zwart-wit bruikbaar. */
.runner-card { border: 1px solid var(--line); border-radius: .5rem; padding: 1.5rem; margin-top: 1.5rem;
  overflow-wrap: anywhere; }
.runner-card-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
@media screen and (max-width: 700px) {
  .runner-card-zones { grid-template-columns: 1fr; }
}
@media print {
  .runner-cards-page { background: white; color: black; --muted: #333; --surface2: #f4f4f4; --line: #ccc; }
  .runner-cards-page .page { max-width: none; margin: 0; padding: 0; }
  .runner-card { border: 0; padding: 0; margin: 0; break-after: page; }
  .runner-card:last-child { break-after: auto; }
  .runner-card tr { break-inside: avoid; }
  .runner-card .muted { color: #333; }
}

/* Gedeelde onderdelen: foutsamenvatting, statuslabel, lege staat. */
.error-summary { margin: 0 0 1rem; padding: .75rem 1rem; background: var(--color-surface);
  border: 2px solid var(--color-danger); border-radius: var(--radius-m); }
.error-summary h2 { margin: 0 0 .25rem; font-size: 1rem; color: var(--color-danger); }
.error-summary p { margin: 0; color: var(--color-text); }
.status { display: inline-flex; align-items: center; gap: .3rem; font-size: .85rem; font-weight: 600;
  padding: .1rem .55rem; border-radius: 999px; border: 1px solid currentColor; background: var(--color-surface); }
.status-ok { color: var(--color-success); } .status-warn { color: var(--color-warning); }
.status-danger { color: var(--color-danger); } .status-neutral { color: var(--color-text-muted); }
.empty-state { padding: 1.5rem 1rem; text-align: center; color: var(--color-text-muted);
  background: var(--color-surface); border: 1px dashed var(--color-border); border-radius: var(--radius-l); }
.empty-state p { margin: 0 0 .5rem; }

/* AI-instellingen: verbindingen per provider. Kleur wijst de status nooit alleen aan: de tekst staat erbij. */
.ai-connections { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; }
.ai-connection { border: 1px solid var(--color-border, var(--line)); border-radius: var(--radius); padding: .75rem 1rem; }
.ai-connection h3 { margin: 0 0 .25rem; font-size: 1.05rem; }
.ai-connection input[type=password] { width: 100%; max-width: 100%; }
.login-code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 1.25rem; letter-spacing: .1em; }