:root {
    --clr-bg-deep: #0c0b0e;
    --clr-bg: #111013;
    --clr-bg-surface: #1a191d;
    --clr-border: #2a282e;
    --clr-text: #e8e4da;
    --clr-text-muted: #8f8a80;
    --clr-green: #6a9955;
    --clr-amber: #c9984a;
    --clr-red: #cf5f55;

    --clr-comment: var(--clr-green);
    --clr-ok: var(--clr-green);
    --clr-warn: var(--clr-amber);
    --clr-err: var(--clr-red);
    --clr-unknown: var(--clr-text-muted);

    --space-xs: 0.5rem;
    --space-s: 1rem;
    --space-m: 1.5rem;
    --space-l: 2rem;

    --gutter: clamp(1rem, 4vw, 4rem);
    --col-text: 34rem;
    /* Doit contenir la plus longue ligne de .terminal sans repli :
       108 caractères × 0,6 em (Fira Code) = 64,8 rem + padding. */
    --col-term: 66rem;
    --content-max: calc(var(--col-text) + var(--space-l) + var(--col-term));
}

/* L'attribut hidden doit gagner sur tout display: posé par une classe
   (ex. .services li en flex), sinon l'élément reste visible. */
[hidden] {
    display: none !important;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: "Space Grotesk";
    line-height: 1.2;
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.5rem;
}

h3 {
    font-size: 1.25rem;
}

h4 {
    font-size: 1.125rem;
}

h5 {
    font-size: 1rem;
}

strong,
b {
    font-weight: 700;
}

em,
i {
    font-style: italic;
}

body {
    font-family: "Inter";
    line-height: 1.5;
    color: var(--clr-text);
    background-color: var(--clr-bg);

    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

header,
main,
footer {
    padding-inline: var(--gutter);
}

header,
footer {
    padding-block: var(--space-xs);
}

header {
    border-bottom: 1px solid var(--clr-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-s);
}

.status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 0.25rem 0.75rem;
    border: 1px solid var(--clr-border);
    border-radius: 999px;
    background-color: var(--clr-bg-surface);
    color: var(--clr-text);
    font-size: 0.875rem;
    text-decoration: none;
}

.status:hover {
    border-color: var(--clr-text-muted);
}

.status:focus-visible {
    outline: 2px solid var(--clr-text-muted);
    outline-offset: 2px;
}

.status-dot {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background-color: var(--status-clr);
    box-shadow: 0 0 6px var(--status-clr);
}

.status[data-state="ok"] {
    --status-clr: var(--clr-ok);
}

.status[data-state="degraded"] {
    --status-clr: var(--clr-warn);
}

.status[data-state="offline"] {
    --status-clr: var(--clr-err);
}

.status[data-state="unknown"] {
    --status-clr: var(--clr-unknown);
}

main {
    display: flex;
    flex-direction: column;
    gap: var(--space-l);
    padding-block: var(--space-s) var(--space-l);

    flex: 1;
}

#stats {
    --stat-groups: 6;
    --stat-gap: var(--space-m);

    display: grid;
    /* Jamais plus de colonnes que de groupes : le h2 en pleine largeur
       empêche auto-fit de replier les pistes vides. */
    grid-template-columns: repeat(auto-fit,
            minmax(max(15rem, calc(100% / var(--stat-groups) - var(--stat-gap))), 1fr));
    gap: var(--stat-gap);
    align-items: start;
}

#stats>h2,
#stats>.stale {
    grid-column: 1 / -1;
}

.stale {
    color: var(--clr-warn);
}

#stats>section {
    border-top: 1px solid var(--clr-border);
    padding-top: var(--space-xs);
}

#stats h3 {
    margin-top: 0;
}

#stats dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-s);
    row-gap: 0.25rem;
}

#stats dt {
    color: var(--clr-text-muted);
}

#stats dd {
    text-align: right;
    font-family: "Fira Code", monospace;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.peers {
    width: 100%;
}

.peers th,
.peers td {
    padding-block: 0.125rem;
}

.peers th {
    font-weight: 400;
    color: var(--clr-text-muted);
    text-align: left;
}

.peers td,
.peers thead th:not(:first-child) {
    text-align: right;
    font-family: "Fira Code", monospace;
    font-variant-numeric: tabular-nums;
}

.peers td {
    padding-left: var(--space-s);
}

.peers tfoot th,
.peers tfoot td {
    border-top: 1px solid var(--clr-border);
    padding-top: 0.375rem;
}

.peers tfoot th {
    color: var(--clr-text);
}

.services {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-family: "Fira Code", monospace;
}

.services li {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.services li::before {
    content: "";
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: var(--clr-ok);
}

.services li[data-state="off"] {
    color: var(--clr-text-muted);
}

.services li[data-state="off"]::before {
    background-color: var(--clr-unknown);
}

footer {
    color: var(--clr-text-muted);
    border-top: 1px solid var(--clr-border);
}

section {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

section h3 {
    margin-top: var(--space-s);
}

.terminal {
    font-family: "Fira Code", monospace;
    background-color: var(--clr-bg-deep);
    padding: var(--space-xs);
    border-radius: 6px;
    border: 1px solid var(--clr-border);
    overflow-x: auto;
}

.terminal code {
    display: block;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.terminal .prompt {
    color: var(--clr-text-muted);
    font-weight: 400;
    user-select: none;
}

.terminal .comment {
    color: var(--clr-comment);
    user-select: none;
}

footer .meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-xs) var(--space-m);
    font-size: 0.875rem;
}

@media (min-width: 69rem) {
    main {
        display: grid;
        grid-template-columns: minmax(var(--col-text), 1fr) minmax(0, var(--col-term));
        align-content: center;
        justify-content: start;
    }

    #stats {
        grid-column: 1 / -1;
    }
}

@media (min-width: 100rem) {

    header,
    main,
    footer {
        padding-inline: max(var(--gutter), calc((100% - var(--content-max)) / 2));
    }
}

/* ---------- Fonts ----------
   Fichiers générés par tools/build-fonts.sh à partir des .ttf sources.
   Chaque famille est déclarée deux fois :
     - "-full"  : police complète, sans unicode-range. Déclarée en premier.
     - subset   : latin uniquement, avec unicode-range. Déclarée en dernier,
                  donc prioritaire pour les caractères latins.
   Le navigateur ne télécharge que les fichiers dont il a besoin : sur une
   page en anglais, seuls les subsets partent ; la version complète n'est
   récupérée que si un caractère hors latin (cyrillique, grec, math...)
   est affiché. */

/* Inter */
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-Variable-full.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Inter Italic */
@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-Italic-Variable-full.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter/Inter-Italic-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Space Grotesk */
@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-Variable-full.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Space Grotesk";
    src: url("../fonts/Space_Grotesk/SpaceGrotesk-Variable.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fira Code */
@font-face {
    font-family: "Fira Code";
    src: url("../fonts/Fira_Code/FiraCode-Variable-full.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Fira Code";
    src: url("../fonts/Fira_Code/FiraCode-Variable.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+2000-206F,
        U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}