/* =============================================================================
   Jugoo Atlas — wat alleen deze applicatie heeft.

   De vormgeving komt uit het Coen Design System in ds/. Hier staat alleen wat
   daar niet in zit: de schil eromheen, de kolomnavigatie, de serverkaart, de
   containerlijst en de blokken van de databasegezondheid.

   Gebruik de tokens uit ds/tokens.css. Zet hier geen losse kleurwaarde neer, en
   ook geen nieuw token: dat hoort in de bron van het design-system thuis.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   De schil. Het design-system levert .sidebar en .main, maar die gaan uit van
   een zijbalk die er altijd staat. Op telefoonbreedte schuift hij hier weg.
   -------------------------------------------------------------------------- */

body {
    background: var(--app-bg);
}

/* Geen onderstreping bij hover. Het design-system zet die aan voor elke link, en
   dat werkt in lopende tekst — maar hier is bijna elke link een kaart, een rij in
   een lijst of een menu-item. Een streep onder een hele kaartnaam leest als een
   fout in plaats van als een aanwijzing; de kleur en de cursor zeggen het al. */
a:hover {
    text-decoration: none;
}

.atlas-skip {
    position: absolute;
    left: -9999px;
}

.atlas-skip:focus {
    left: 1rem;
    top: 1rem;
    z-index: var(--z-toast);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* Onder 1024px schuift de zijbalk weg en komt hij over de inhoud heen. Daarboven
   staat hij vast en krijgt de inhoud zijn breedte ernaast. */
.sidebar {
    transform: translateX(-100%);
    transition: transform var(--transition);
}

.sidebar.is-open {
    transform: none;
}

.main {
    max-width: 1536px;
}

.atlas-backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-sidebar) - 1);
    background: rgb(0 0 0 / .4);
}

.atlas-backdrop[hidden] {
    display: none;
}

.atlas-burger {
    position: fixed;
    top: var(--sp-3);
    left: var(--sp-3);
    z-index: var(--z-dropdown);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    color: var(--text-default);
}

@media (min-width: 1024px) {
    .sidebar {
        transform: none;
    }

    .atlas-burger,
    .atlas-backdrop {
        display: none;
    }
}

@media (max-width: 1023px) {
    .main {
        margin-left: 0;
        padding-top: calc(var(--sp-6) + 40px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* -----------------------------------------------------------------------------
   Het overzicht: de paginakop, meldingen en de serverkaarten
   -------------------------------------------------------------------------- */

.atlas-freshness {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 var(--sp-6);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.atlas-net {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 20px 0;
}

.atlas-net dt {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.atlas-net dd {
    margin: 0;
    color: var(--text-default);
    font-size: var(--fs-sm);
    overflow-wrap: anywhere;
}

/* Adressen en ID's: alles wat je overtypt of vergelijkt. Geen tweede letterset
   meer, wel cijfers van gelijke breedte zodat kolommen blijven uitlijnen. */
.atlas-value {
    font-variant-numeric: tabular-nums;
    letter-spacing: .01em;
}

/* De kaartvoet: twee gelabelde regels in dezelfde kolomvorm als de adressen
   erboven, zodat de labels van beide blokken op één lijn staan. */
.atlas-plate {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: auto calc(var(--sp-6) * -1) calc(var(--sp-6) * -1);
    padding: 14px var(--sp-6);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-sm);
}

.atlas-plate dt {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.atlas-plate dd {
    margin: 0;
    color: var(--text-default);
    overflow-wrap: anywhere;
}

/* ── De kolommen ────────────────────────────────────────────────────────────
   De scheidingslijnen moeten van boven tot onder lopen, ook als een kolom
   weinig inhoud heeft. Een rand op de kolom zelf stopt waar de inhoud stopt;
   daarom rekt de grid alle kolommen tot dezelfde hoogte en zit de lijn op de
   kolom die erop volgt. */
/* Het raster ligt vast en verandert niet mee met wat er gekozen is. Deed het
   dat wel, dan kromp kolom 2 op het moment dat kolom 3 verscheen — precies als
   je aan het lezen bent. Kolommen die er nog niet zijn laten hun spoor leeg. */
.atlas-kolommen {
    display: grid;
    grid-template-columns: minmax(18rem, 22rem) minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    min-height: 60vh;
    margin-top: var(--sp-6);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.atlas-kolom {
    padding: var(--sp-6);
    min-width: 0;
}

.atlas-kolom + .atlas-kolom {
    border-left: 1px solid var(--border-subtle);
}

.atlas-kolom__kop {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.atlas-kolom--servers .atlas-kolom__kop:not(:first-child) {
    margin-top: 24px;
}

/* Het blok Repositories staat boven de containers; de kop Containers hoort er los van. */
.atlas-kolom--containers .atlas-blok + .atlas-kolom__kop {
    margin-top: 24px;
}

/* Kolom 1 — de kaart is zelf geen link: de hostnaam is dat, en die legt een
   onzichtbare laag over de hele kaart. Zo blijft de hele kaart klikbaar terwijl
   er een knop in kan staan — een link in een link mag niet.

   .card uit het design-system geeft alleen een vlak, een rand en een ronding: geen
   padding en geen richting. Die twee staan hier, en ze zijn allebei nodig. Zonder
   padding plakt de tekst tegen de rand; zonder flex-kolom werkt de auto-marge van
   .atlas-plate niet, en die is wat de kaartvoet naar de onderkant duwt. */
.atlas-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--sp-6);
    margin-bottom: 12px;
}

/* De kop van een serverkaart: naam links, statusbadge rechts. */
.atlas-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
}

.atlas-host {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semi);
}

.atlas-cardlink {
    color: inherit;
}

.atlas-cardlink::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: var(--radius-card);
}

/* Onderstrepen hoort bij een regel tekst, niet bij een hele kaart. */
.atlas-cardlink:hover {
    text-decoration: none;
}

.atlas-card:hover {
    border-color: var(--accent);
}

.atlas-card.is-active {
    border-color: var(--accent);
    box-shadow: var(--focus-ring);
}

/* De knop moet bovenop die onzichtbare laag liggen, anders vangt de kaartlink de
   klik af en kom je op de serverpagina in plaats van bij het verbruik.

   De laagnummers staan expliciet op allebei — op het omhulsel én op de knop zelf.
   Met impliciete lagen ging het mis, en dat is een fout die je alleen vindt door
   te klikken. */
.atlas-card__acties {
    position: relative;
    z-index: 2;
    margin: 14px 0 0;
}

.atlas-card__acties .btn {
    position: relative;
    z-index: 2;
}

/* De verbruikstabel */
.atlas-tabelwikkel {
    overflow-x: auto;
}

.atlas-tabel {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-sm);
}

.atlas-tabel th,
.atlas-tabel td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.atlas-tabel thead th {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
}

/* Een rijkop is een naam of een adres, geen kolomkop. .table th uit het
   design-system maakt er kleine hoofdletters op een grijs vlak van, en dan
   leest een IP-adres of hostnaam als een label. */
.atlas-tabel tbody th {
    background: none;
    color: var(--text-default);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Getallen rechts, met cijfers van gelijke breedte zodat de kolom uitlijnt.
   Het element staat er bewust bij: `.atlas-tabel th` telt als (0,1,1) en zou
   anders winnen van deze klasse — dezelfde val als bij de knoptekst die eerder
   blauw op blauw stond. */
.atlas-tabel th.atlas-tabel__getal,
.atlas-tabel td.atlas-tabel__getal {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Een cel met een zin of een opdracht erin breekt af, zodat de kolom ernaast
   (een machinenaam) niet op elk streepje hoeft te breken. */
.atlas-tabel td.atlas-tabel__tekst {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Een korte naam (een machine) op één regel, ook naast zo'n lange cel. */
.atlas-tabel th.atlas-tabel__naam {
    white-space: nowrap;
}

.atlas-tabel tfoot th,
.atlas-tabel tfoot td {
    border-bottom: 0;
    border-top: 2px solid var(--border-subtle);
    font-weight: 600;
}

/* Kolom 2 — de containers */
.atlas-containerlijst {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* De badge lijnt rechts uit, zodat alle statussen onder elkaar op één lijn
   staan en je in één oogopslag ziet wat er uit staat. */
.atlas-containerlink {
    display: grid;
    grid-template-columns: 1fr max-content;
    align-items: center;
    gap: 2px 10px;
    padding: 8px 10px;
    border-radius: var(--radius);
    color: var(--text-default);
}

.atlas-containerlink:hover {
    background: var(--app-bg);
    text-decoration: none;
}

.atlas-containerlink.is-active {
    background: var(--accent-light);
    color: var(--accent);
}

.atlas-containerlink__naam {
    font-weight: 500;
    overflow-wrap: anywhere;
}

.atlas-containerlink__image {
    grid-column: 1 / -1;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    overflow-wrap: anywhere;
}

/* Kolom 3 — de blokken. Er kunnen er later bij zonder dat hier iets verandert. */
.atlas-blok + .atlas-blok {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-subtle);
}

.atlas-blok h3 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: var(--fs-sm);
}

.atlas-blok dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    margin: 0;
}

.atlas-blok dt {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
}

.atlas-blok dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* Een badge in een dd staat naast de tekst, niet op een eigen regel. */
.atlas-blok dd .badge {
    margin-left: 6px;
    vertical-align: middle;
}

/* De tabel per database staat binnen een blok en niet in een eigen kolom, dus
   hij heeft wat lucht boven zich nodig. */
.atlas-blok .atlas-tabelwikkel {
    margin-top: 16px;
}

/* Het tijdstip onder een gemeten blok. Een cijfer van vijftien seconden oud dat
   zich voordoet als "nu" is erger dan een cijfer met een tijdstip erbij. */
.atlas-meting {
    margin: 12px 0 0;
    color: var(--text-tertiary);
    font-size: var(--fs-xs);
}

.atlas-leeg {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.atlas-fout {
    color: var(--fg-danger);
}

/* Op telefoonbreedte passen drie kolommen niet: dan onder elkaar, met de
   scheidingslijn boven in plaats van links. */
@media (max-width: 900px) {
    .atlas-kolommen {
        grid-template-columns: 1fr;
    }

    .atlas-kolom + .atlas-kolom {
        border-left: 0;
        border-top: 1px solid var(--border-subtle);
    }
}

/* De kop van kolom 3 is een containernaam, geen label. Hoofdletters en
   letterspatiëring horen bij een kopje als CONTAINERS; bij een eigennaam
   maken ze het juist slechter leesbaar. */
.atlas-kolom--detail .atlas-kolom__kop,
.atlas-kolom--verbruik .atlas-kolom__kop {
    color: var(--text-primary);
    font-size: var(--fs-lg);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    margin-bottom: 20px;
}

/* Kopje boven een groep containers: de map waaruit ze gestart zijn. Het pad
   staat erbij in het klein, want dat is wat je nodig hebt als je er straks
   met docker compose naartoe moet. */
.atlas-groepkop {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 8px;
    /* De lijn loopt van rand tot rand van de kolom, dus door de padding heen. */
    margin: 24px calc(var(--sp-6) * -1) 10px;
    padding: 0 var(--sp-6) 8px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.atlas-groepkop:first-of-type {
    margin-top: 0;
}

.atlas-groepkop__pad {
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 400;
    overflow-wrap: anywhere;
}

/* De verbruikstabel staat op de plek van de containerlijst en neemt de derde
   kolom erbij: die blijft in dit scherm toch leeg, en vijf kolommen met
   getallen hebben die breedte nodig. */
.atlas-kolom--verbruik {
    grid-column: 2 / -1;
}

@media (max-width: 900px) {
    .atlas-kolom--verbruik {
        grid-column: auto;
    }
}

/* -----------------------------------------------------------------------------
   Het merkblok. Het design-system gaat uit van alleen tekst; wij zetten er een
   teken naast, dus twee kolommen.
   -------------------------------------------------------------------------- */

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.atlas-brand__tekst h1 {
    margin: 0;
}

/* -----------------------------------------------------------------------------
   Aanvullingen op componenten van het design-system
   -------------------------------------------------------------------------- */

/* Een melding met een knop erin. .alert is een rij, dus de tekst moet de knop
   naar rechts duwen. */
.atlas-alert__tekst {
    flex: 1;
    margin: 0;
}

/* De paginakop: titel links, knoppen rechts. */
.atlas-paginakop {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.atlas-paginakop .atlas-freshness {
    margin: 2px 0 0;
}

/* Een blokkop of kolomkop met een icoon ervoor: het teken lijnt uit met de tekst
   in plaats van op de regel te gaan zweven. */
.atlas-kolom__kop,
.atlas-blok h3 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Hetzelfde voor een label in een definitielijst. */
.atlas-blok dt {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* -----------------------------------------------------------------------------
   Het gebruikersmenu onderin de zijbalk
   -------------------------------------------------------------------------- */

/* De voet is het ankerpunt: het menu klapt omhoog open, want er is onder de
   zijbalk niets meer. Het design-system heeft alleen een dropdown die naar
   beneden gaat. */
.sidebar-footer {
    position: relative;
}

/* .sidebar-user is hier een knop en geen div, want er hangt een menu aan. De
   knoopvormgeving van de browser moet daarvoor weg. */
.sidebar-user {
    width: 100%;
    background: none;
    border: 0;
    text-align: left;
    border-radius: var(--radius);
    padding: var(--sp-2);
    transition: background var(--transition-fast);
}

.sidebar-user:hover {
    background: var(--sidebar-hover);
}

.atlas-usermenu__pijl {
    margin-left: auto;
    color: var(--text-muted);
}

.sidebar-user[aria-expanded="true"] .atlas-usermenu__pijl {
    transform: rotate(180deg);
}

.atlas-usermenu {
    position: absolute;
    bottom: 100%;
    left: var(--sp-3);
    right: var(--sp-3);
    margin-bottom: var(--sp-2);
    padding: var(--sp-1);
    background: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
}

.atlas-usermenu[hidden] {
    display: none;
}

.atlas-usermenu__item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    color: var(--text-default);
    font-size: var(--fs-sm);
}

.atlas-usermenu__item:hover {
    background: var(--sidebar-hover);
    color: var(--sidebar-text-active);
}

/* -----------------------------------------------------------------------------
   De profielpagina
   -------------------------------------------------------------------------- */

.atlas-profiel {
    display: grid;
    gap: var(--sp-6);
    max-width: 34rem;
}

/* .card geeft alleen een vlak met een rand; de ruimte erbinnen staat hier. */
.atlas-profielkaart {
    padding: var(--sp-6);
}

.atlas-profielkaart h2 {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
    font-size: var(--fs-lg);
}

/* Een veld is een kolom, dus het label staat boven de invoer. De hint eronder
   hoort bij het veld en niet bij het volgende. */
.atlas-profielkaart .field {
    margin-bottom: var(--sp-5);
}

.atlas-profielkaart .field input:disabled {
    cursor: default;
}

/* -----------------------------------------------------------------------------
   Het losse blad: één kaart midden op het scherm, zonder zijbalk.

   Gebruikt door het inlogscherm en de foutpagina's. De naam gaat bewust niet over
   inloggen, want de 404 is geen inlogscherm.
   -------------------------------------------------------------------------- */

.atlas-losseblad {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--sp-6);
    background: var(--app-bg);
}

.atlas-losseblad__kaart {
    width: 100%;
    max-width: 400px;
    padding: var(--sp-8);
    text-align: center;
}

.atlas-losseblad__merk {
    margin: 0 auto var(--sp-4);
}

.atlas-losseblad__sub {
    margin-bottom: var(--sp-6);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* De kop staat gecentreerd, de velden eronder links uitgelijnd — een label boven
   een invoerveld hoort bij de linkerrand van dat veld te beginnen. */
.atlas-losseblad .field {
    text-align: left;
    margin-bottom: var(--sp-4);
}

.atlas-losseblad .alert {
    margin-bottom: var(--sp-4);
    text-align: left;
}

.atlas-losseblad__knop {
    width: 100%;
    margin-top: var(--sp-2);
}

/* -----------------------------------------------------------------------------
   De uitvoer van een taak
   -------------------------------------------------------------------------- */

/* De uitvoer van een taak leest als een terminal: vaste breedte, en lange regels
   scrollen binnen het blok in plaats van de pagina breed te maken. */
.atlas-uitvoer {
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    background: var(--surface-sunken);
    padding: var(--sp-4);
    border-radius: var(--radius-md);
    max-height: 30rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── Taken ───────────────────────────────────────────────────────────────────
   Het takenscherm zet zijn secties in .card-blokken, net als de rest van de
   applicatie. Wat hier staat is alleen wat het design-system niet levert. */

/* Een kop in een .card-header. Het design-system stijlt daar een h3, maar de
   koppen op deze pagina staan onder een h1 en horen dus h2 te zijn. Zelfde maat,
   zelfde gewicht, met ruimte voor het icoon ervoor. */
.atlas-kaartkop {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semi);
    color: var(--text-primary);
}

/* ── Ruimte tussen wat onder elkaar staat ───────────────────────────────────
   base.css zet de marge van elk element op 0, en daarna geeft bijna niets hem
   terug: tekst plakte tegen een tabel, een knop tegen een formulier. Daarom
   krijgt alles wat in een kaart onder elkaar staat hier één vaste afstand, en
   een knop of een rij knoppen iets meer, zodat hij los staat van wat erboven
   staat. Zelfde voor de velden en de knop van een formulier dat direct in de
   kaart staat. Formulieren dieper in de kaart (een knop in een tabelcel)
   blijven buiten schot: daar hoort geen extra marge. */
.card-body > * + *,
.card-body > form > * + * {
    margin-top: var(--sp-4);
}

.card-body > .atlas-knoppen,
.card-body > form > .btn,
.card-body > form > .atlas-knoppen {
    margin-top: var(--sp-5);
}

/* Een knop is inline-flex, en de marge van een inline-element smelt niet samen
   met die van het veld erboven of het formulier eromheen: dan worden 16 en 20
   samen 36. Als blok met de breedte van zijn inhoud telt alleen de grootste. */
.card-body > form > .btn {
    display: flex;
    width: fit-content;
}

/* Een knop onder een invoerveld, in hetzelfde veld (Vernieuwen onder de keuzelijst). */
.field > .btn {
    margin-top: var(--sp-1);
}

/* De onderste rij van een tabel heeft geen onderrand; dat gold alleen voor de
   gewone cellen, waardoor er onder de rijkop een los stukje lijn bleef staan. */
.atlas-tabel tbody tr:last-child th {
    border-bottom: none;
}

/* Een melding of losse toelichting boven de kaarten van een pagina. */
.main > .alert,
.main > .field-hint {
    margin-bottom: var(--sp-4);
}

/* ── Labels ──────────────────────────────────────────────────────────────────
   Het design-system zet een label op --fs-xs (11,2px), kleiner dan de invoer
   eronder (14px) en onder de ondergrens van 14px voor tekst die je moet lezen.
   Label en invoer krijgen hier dezelfde maat. */
.field label {
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

/* ── De uitleg ──────────────────────────────────────────────────────────────
   Wat een kaart doet, of hoe je iets aanmaakt: één blok, overal hetzelfde, in
   de kleuren van het actieve menu-item. Zo zie je meteen dat het informatie is
   en geen invoer of melding. Een melding (.alert) zegt wat er net gebeurde;
   dit zegt hoe het werkt. */
.atlas-uitleg {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    background: var(--sidebar-active);
    border: 1px solid var(--sidebar-text-active);
    border-radius: var(--radius);
    color: var(--text-default);
    font-size: var(--fs-sm);
    line-height: var(--lh-normal);
}

.atlas-uitleg > .mi {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--sidebar-text-active);
    font-size: 20px;
}

.atlas-uitleg__tekst {
    flex: 1;
    min-width: 0;
    max-width: 90ch;
}

.atlas-uitleg__tekst p {
    color: inherit;
}

.atlas-uitleg__tekst > * + * {
    margin-top: var(--sp-2);
}

.atlas-uitleg__tekst ol,
.atlas-uitleg__tekst ul {
    padding-left: var(--sp-5);
}

/* base.css haalt de nummering weg; in een stappenlijst is die juist de inhoud. */
.atlas-uitleg__tekst ol {
    list-style: decimal;
}

.atlas-uitleg__tekst ul {
    list-style: disc;
}

.atlas-uitleg__tekst li + li {
    margin-top: var(--sp-1);
}

/* ── Formulieren ─────────────────────────────────────────────────────────────
   Twee kolommen van gelijke breedte, rij voor rij: gebruiker en wachtwoord,
   dan host en poort. Een hint onder een veld duwt het buurveld niet omlaag,
   want de velden lijnen boven uit. */
.atlas-formraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4);
    align-items: start;
}

.atlas-formraster .field {
    margin: 0;
}

@media (max-width: 720px) {
    .atlas-formraster {
        grid-template-columns: 1fr;
    }
}

/* Machine, repository en branch naast elkaar. .field-row uit het design-system
   doet twee kolommen; dit zijn er drie, en ze klappen onder elkaar zodra de
   ruimte op is — de repositorynaam is het langst en krijgt daarom meer. */
.atlas-formulierrij {
    display: grid;
    grid-template-columns: minmax(10rem, auto) minmax(14rem, 1fr) minmax(8rem, auto);
    gap: var(--sp-3);
    align-items: end;
    margin-bottom: var(--sp-4);
}

@media (max-width: 720px) {
    .atlas-formulierrij {
        grid-template-columns: 1fr;
    }
}

/* Alle velden even breed, met de knop erachter zolang die past. Past hij niet,
   dan schuift hij naar de volgende regel in plaats van een veld te knijpen. */
.atlas-formulierrij--gelijk {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
}

.atlas-formulierrij--gelijk > .field {
    flex: 1 1 12rem;
    margin: 0;
}

.atlas-formulierrij__knop {
    flex: 0 0 auto;
}

/* De badge met de afsluitcode eronder, rechts in de paginakop. */
.atlas-taakstand {
    text-align: right;
}

.atlas-taakstand .atlas-freshness {
    margin: var(--sp-2) 0 0;
}

/* Een rij knoppen in een tabelcel of onder een formulier. De formulieren eromheen
   mogen geen eigen regel pakken. */
.atlas-knoppen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.atlas-knoppen form {
    margin: 0;
}

/* Het handboek: de inhoud links, de pagina rechts. De inhoud blijft staan terwijl een
   lang hoofdstuk scrolt, en scrolt zelf als hij langer is dan het scherm. */
.atlas-handboek {
    display: grid;
    grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
    gap: var(--sp-6);
    align-items: start;
}

.atlas-handboek__inhoud {
    position: sticky;
    top: var(--sp-4);
    max-height: calc(100vh - var(--sp-8));
    overflow-y: auto;
    font-size: var(--fs-sm);
}

.atlas-handboek__inhoud ol,
.atlas-handboek__inhoud ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.atlas-handboek__inhoud li {
    margin-bottom: var(--sp-1);
}

.atlas-handboek__inhoud ul {
    margin: var(--sp-1) 0 var(--sp-2) var(--sp-3);
    font-size: var(--fs-xs);
}

.atlas-handboek__inhoud a {
    color: var(--text-secondary);
    text-decoration: none;
}

.atlas-handboek__inhoud a:hover,
.atlas-handboek__inhoud a[aria-current="page"] {
    color: var(--text-primary);
    font-weight: 600;
}

.atlas-handboek__zoeken {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
}

.atlas-handboek__zoeken .field {
    margin: 0;
}

.atlas-handboek__treffers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.atlas-handboek__treffers p {
    margin: var(--sp-1) 0 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
}

.atlas-handboek__treffers mark {
    background: var(--geel-light);
    color: inherit;
}

@media (max-width: 900px) {
    .atlas-handboek {
        grid-template-columns: 1fr;
    }

    .atlas-handboek__inhoud {
        position: static;
        max-height: none;
    }
}

/* De info-knop in een kolomkop of blokkop staat rechts, niet tegen de tekst aan. */
.atlas-kolom__kop .btn-icon,
.atlas-blok h3 .btn-icon {
    margin-left: auto;
}