/*
 * PO Assistant — feuille de style unique.
 *
 * Deux densités assumées : faible sur le check-in (une chose à la fois),
 * forte sur les listes. Pas de police distante : l'application doit fonctionner
 * hors réseau.
 */

/*
 * Apparence — clair, sombre, ou celle du système.
 *
 * Contrat partagé avec `Theme::domAttribute()` et `theme_controller.js` :
 *   pas d'attribut `data-theme`  → on suit le système
 *   data-theme="light" / "dark"  → choix explicite, qui doit gagner sur le système
 *
 * `color-scheme` est déclaré en plus des jetons : sans lui, les contrôles rendus
 * par le navigateur — cases à cocher, sélecteurs de date, ascenseurs — restent
 * clairs sur fond sombre.
 */

:root {
    color-scheme: light;

    --ink: #16161a;
    --ink-soft: #55555f;
    --ink-faint: #85858f;
    --paper: #f7f7f9;
    --surface: #ffffff;
    --surface-alt: #f0f0f4;
    --line: #dcdce4;
    --line-strong: #c2c2ce;

    --accent: #2f4b7c;
    --accent-soft: #e8edf6;
    --accent-ink: #24395f;
    /* Texte posé sur un aplat d'accent ou d'alerte. En sombre, ces aplats
       s'éclaircissent : le texte doit alors foncer, pas rester blanc. */
    --on-accent: #ffffff;
    --on-critical: #ffffff;

    --critical: #a4262c;
    --critical-soft: #fdeaea;
    --warning: #8a5300;
    --warning-soft: #fdf3e2;
    --info: #2b5f74;
    --info-soft: #e8f2f6;
    --success: #1f6b45;
    --success-soft: #e6f3ec;

    --radius: 6px;
    --radius-lg: 10px;
    --shadow: 0 1px 2px rgba(20, 20, 30, .06), 0 4px 12px rgba(20, 20, 30, .04);

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Consolas, monospace;
}

/*
 * La palette sombre a deux points d'entrée — le choix explicite et le réglage
 * système sans choix enregistré. CSS n'offrant aucun moyen de nommer une palette
 * pour la réutiliser, les deux règles portent les mêmes valeurs. Toute retouche
 * doit se faire dans les deux.
 */

:root[data-theme="dark"] {
    color-scheme: dark;

    --ink: #e8e8ee;
    --ink-soft: #b0b0bc;
    --ink-faint: #85858f;
    --paper: #131317;
    --surface: #1b1b21;
    --surface-alt: #23232b;
    --line: #32323c;
    --line-strong: #45454f;

    --accent: #8fb0e0;
    --accent-soft: #1e2a3d;
    --accent-ink: #b9cdec;
    --on-accent: #10192a;
    --on-critical: #2a1012;

    --critical: #f08a8f;
    --critical-soft: #33191b;
    --warning: #e0ab5f;
    --warning-soft: #302514;
    --info: #8fc0d4;
    --info-soft: #16262d;
    --success: #79c39b;
    --success-soft: #16281f;

    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .28);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;

        --ink: #e8e8ee;
        --ink-soft: #b0b0bc;
        --ink-faint: #85858f;
        --paper: #131317;
        --surface: #1b1b21;
        --surface-alt: #23232b;
        --line: #32323c;
        --line-strong: #45454f;

        --accent: #8fb0e0;
        --accent-soft: #1e2a3d;
        --accent-ink: #b9cdec;
        --on-accent: #10192a;
        --on-critical: #2a1012;

        --critical: #f08a8f;
        --critical-soft: #33191b;
        --warning: #e0ab5f;
        --warning-soft: #302514;
        --info: #8fc0d4;
        --info-soft: #16262d;
        --success: #79c39b;
        --success-soft: #16281f;

        --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .28);
    }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .4em; line-height: 1.25; font-weight: 650; }
h1 { font-size: 1.6rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .8em; }

/* ------------------------------------------------------------------ Layout */

/*
 * Coquille : sidebar fixe à gauche, contenu qui défile à droite.
 *
 * La sidebar est groupée par familles parce que onze entrées à plat ne se lisent
 * pas. Sous 980 px elle repasse en bandeau horizontal défilable : sur tablette,
 * une colonne fixe mange trop de largeur pour un usage debout en réunion.
 */
body {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem .75rem;
    background: var(--surface);
    border-right: 1px solid var(--line);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

/* Marque et bascule de thème sur la même ligne, en tête de colonne. */
.sidebar__top {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}

.sidebar__brand {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .25rem .35rem;
    color: var(--ink);
    flex: 1;
    min-width: 0;
}
.sidebar__brand:hover { text-decoration: none; }
.sidebar__mark { font-size: 1.35rem; line-height: 1; }
.sidebar__brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sidebar__brand-text strong { letter-spacing: -.02em; }
.sidebar__brand-text span { color: var(--ink-faint); font-size: .78rem; }

/*
 * Le pied suit la navigation au lieu d'être poussé au bas de la colonne (pas de
 * `flex: 1` ici). Collé en bas d'un 100 vh, la bascule de thème et le compte
 * passaient sous la barre de débogage Symfony sur une fenêtre courte : on les
 * perdait complètement. Leur position ne doit pas dépendre de la hauteur de
 * fenêtre.
 */
.sidebar__nav { display: flex; flex-direction: column; gap: 1rem; }
.sidebar__group { display: flex; flex-direction: column; gap: .1rem; }

.sidebar__group-title {
    color: var(--ink-faint);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    padding: 0 .45rem .25rem;
}

.sidebar__link {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .4rem .45rem;
    border-radius: var(--radius);
    color: var(--ink-soft);
    font-size: .9rem;
    line-height: 1.3;
}
.sidebar__link:hover { background: var(--surface-alt); color: var(--ink); text-decoration: none; }
.sidebar__link.is-active { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

.sidebar__icon {
    width: 1.1rem;
    text-align: center;
    flex: none;
    color: var(--ink-faint);
    font-size: .95rem;
}
.sidebar__link.is-active .sidebar__icon { color: var(--accent); }
.sidebar__label { flex: 1; min-width: 0; }

.sidebar__badge {
    flex: none;
    min-width: 1.25rem;
    padding: 0 .3rem;
    border-radius: 999px;
    background: var(--critical);
    color: var(--on-critical);
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
    line-height: 1.25rem;
}

.sidebar__foot {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding-top: .75rem;
    /* Marge basse : la barre de débogage Symfony se superpose au bas de l'écran
       en développement, et le compte s'y retrouvait caché. */
    padding-bottom: .5rem;
    border-top: 1px solid var(--line);
}

.sidebar__account {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    padding: 0 .45rem;
    font-size: .8rem;
}
.sidebar__account-name {
    color: var(--ink-faint);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar__logout { color: var(--ink-soft); flex: none; }

.shell__body { min-width: 0; }

@media (max-width: 980px) {
    body { grid-template-columns: minmax(0, 1fr); }

    .sidebar {
        position: static;
        height: auto;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        flex-direction: row;
        align-items: center;
        gap: .75rem;
        padding: .5rem .75rem;
        overflow-x: auto;
    }

    .sidebar__top { border-bottom: 0; padding-bottom: 0; flex: none; }
    .sidebar__brand { padding: 0 .35rem; flex: none; }
    .sidebar__brand-text span { display: none; }
    .sidebar__nav { flex-direction: row; gap: .75rem; align-items: center; }
    .sidebar__group { flex-direction: row; gap: .1rem; align-items: center; }
    .sidebar__group-title { display: none; }
    .sidebar__link { white-space: nowrap; }
    .sidebar__label { display: none; }
    .sidebar__link.is-active .sidebar__label { display: inline; }
    .sidebar__icon { font-size: 1.05rem; }
    .sidebar__foot { flex-direction: row; border-top: 0; padding-top: 0; margin-left: auto; align-items: center; }
    .sidebar__account { padding: 0; }
    .sidebar__account-name { display: none; }
}

/* Bascule d'apparence : discrète, mais toujours au même endroit. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .55rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink-soft);
    font: inherit;
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-alt); color: var(--ink); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-toggle__icon { font-size: .95rem; line-height: 1; }
.theme-toggle__label { font-variant-numeric: tabular-nums; }

/*
 * En tête de sidebar la place manque : seul le pictogramme est montré. L'état
 * reste lisible — ☀ clair, ☾ sombre, ◐ système — et le libellé complet passe par
 * `title` et `aria-label`, tenus à jour par le contrôleur Stimulus.
 */
.theme-toggle--compact {
    flex: none;
    padding: .3rem .4rem;
}
.theme-toggle--compact .theme-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ------------------------------------------------------------- Connexion */

/*
 * L'écran de connexion remplace la coquille : pas de sidebar, une seule chose
 * à faire. Le corps redevient donc une colonne unique.
 */
body.is-signin { grid-template-columns: minmax(0, 1fr); }

.signin {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
}

.signin__card {
    width: 100%;
    max-width: 380px;
    padding: 1.75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.signin__brand { text-align: center; margin-bottom: 1.5rem; }
.signin__mark { display: block; font-size: 2rem; line-height: 1; margin-bottom: .4rem; }
.signin__brand strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.signin__sub { color: var(--ink-faint); font-size: .82rem; }

.signin__error {
    margin-bottom: 1rem;
    padding: .6rem .75rem;
    border-left: 3px solid var(--critical);
    border-radius: var(--radius);
    background: var(--critical-soft);
    color: var(--critical);
    font-size: .88rem;
}

.signin__form { display: flex; flex-direction: column; gap: .9rem; }

.signin__remember {
    display: flex;
    align-items: center;
    gap: .45rem;
    color: var(--ink-soft);
    font-size: .87rem;
    cursor: pointer;
}

.signin__submit { justify-content: center; width: 100%; }

.signin__note {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: .78rem;
    text-align: center;
}
.signin__note code { font-size: .95em; }

/* Page d'erreur : elle réutilise la carte de connexion, seule mise en page
   autonome de l'application — voir le commentaire du gabarit. */
.errorpage { text-align: center; max-width: 460px; }
.errorpage__code {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}
.errorpage__title { margin: .6rem 0 .5rem; font-size: 1.2rem; }
.errorpage__text { margin: 0 0 1.4rem; color: var(--ink-soft); font-size: .9rem; }
.errorpage__actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

.page {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.5rem 1rem 4rem;
}

.page--narrow { max-width: 760px; }

.page__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}
.page__head p { margin: 0; color: var(--ink-soft); font-size: .92rem; }

.grid { display: grid; gap: 1rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }

/* -------------------------------------------------------------------- Cards */

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow);
}
.card--flush { padding: 0; overflow: hidden; }
.card__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .75rem;
}
.card__head h2, .card__head h3 { margin: 0; }

.stat { text-align: left; }
.stat__value { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; display: block; }
.stat__label { color: var(--ink-soft); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }

/* ------------------------------------------------------------------- Alerts */

.alerts { display: flex; flex-direction: column; gap: .55rem; }

.alert {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .7rem .9rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    border-left-width: 4px;
    background: var(--surface);
}
.alert--critical { border-left-color: var(--critical); background: var(--critical-soft); }
.alert--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.alert--info { border-left-color: var(--info); background: var(--info-soft); }

.alert__body { flex: 1; min-width: 0; }
.alert__message { font-weight: 600; }
.alert__detail { color: var(--ink-soft); font-size: .87rem; }
.alert__actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

.severity-tag {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .1rem .4rem;
    border-radius: 3px;
}
.severity-tag--critical { color: var(--critical); background: var(--critical-soft); }
.severity-tag--warning { color: var(--warning); background: var(--warning-soft); }
.severity-tag--info { color: var(--info); background: var(--info-soft); }

/* ------------------------------------------------------------------ Buttons */

.btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    padding: .42rem .8rem;
    border-radius: var(--radius);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-alt); text-decoration: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { filter: brightness(1.08); background: var(--accent); color: var(--on-accent); }
.btn--danger { color: var(--critical); border-color: var(--critical); background: transparent; }
.btn--danger:hover { background: var(--critical-soft); }
.btn--ghost { border-color: transparent; background: transparent; color: var(--ink-soft); }
.btn--ghost:hover { background: var(--surface-alt); }
.btn--sm { font-size: .8rem; padding: .25rem .55rem; }
.btn--lg { font-size: 1rem; padding: .6rem 1.15rem; }
.btn--block { width: 100%; justify-content: center; }

.btn-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------------- Tables */

.table-wrap { overflow-x: auto; }

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}
table.data th, table.data td {
    text-align: left;
    padding: .55rem .7rem;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
table.data th {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
    background: var(--surface-alt);
    white-space: nowrap;
}
table.data tbody tr:hover { background: var(--surface-alt); }
table.data td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------- Badges */

.badge {
    display: inline-block;
    font-size: .74rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    white-space: nowrap;
}
.badge--critical { color: var(--critical); border-color: var(--critical); background: var(--critical-soft); }
.badge--warning { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); }
.badge--success { color: var(--success); border-color: var(--success); background: var(--success-soft); }
.badge--info { color: var(--info); border-color: var(--info); background: var(--info-soft); }
.badge--muted { color: var(--ink-faint); }
.badge--accent { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.badge--neutral { color: var(--ink-soft); border-color: var(--line-strong); background: var(--surface-alt); }

.tag {
    display: inline-block;
    font-size: .74rem;
    padding: .05rem .4rem;
    border-radius: 3px;
    background: var(--surface-alt);
    color: var(--ink-soft);
}

.muted { color: var(--ink-soft); }
.faint { color: var(--ink-faint); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); font-size: .85em; }
.nowrap { white-space: nowrap; }
.strong { font-weight: 650; }

.empty {
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--ink-faint);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
}

/* --------------------------------------------------------------------- Forms */

form .row { margin-bottom: .95rem; }
label { display: block; font-weight: 600; font-size: .87rem; margin-bottom: .25rem; }
.help { color: var(--ink-soft); font-size: .84rem; margin-top: .2rem; }

input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="url"], input[type="email"], input[type="time"], input[type="password"],
input[type="search"], input[type="tel"], select, textarea {
    width: 100%;
    font: inherit;
    font-size: .93rem;
    padding: .45rem .6rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
}
textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
input:focus-visible, select:focus-visible, textarea:focus-visible, .btn:focus-visible, a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--accent); }

.checkbox, .radio {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    font-weight: 400;
    font-size: .93rem;
    margin-bottom: .3rem;
}
.checkbox input, .radio input { margin-top: .3rem; }

fieldset {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: .9rem 1rem;
    margin: 0 0 1rem;
}
legend { font-weight: 650; font-size: .9rem; padding: 0 .35rem; }

.form-grid { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.errors { color: var(--critical); font-size: .85rem; margin: .2rem 0 0; padding-left: 1.1rem; }

/* ------------------------------------------------------------------ Check-in */

.checkin { max-width: 720px; margin: 0 auto; }

.progress {
    height: 6px;
    background: var(--surface-alt);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.progress__bar { height: 100%; background: var(--accent); transition: width .2s ease; }

.question {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.7rem;
    box-shadow: var(--shadow);
}
.question__section {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent);
    font-weight: 700;
    margin-bottom: .5rem;
}
.question__label { font-size: 1.22rem; font-weight: 650; line-height: 1.35; margin-bottom: .4rem; }
.question__help { color: var(--ink-soft); font-size: .9rem; margin-bottom: 1.1rem; }
.question__item {
    display: inline-block;
    margin-bottom: 1rem;
    padding: .5rem .75rem;
    border-left: 3px solid var(--accent);
    background: var(--accent-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: .88rem;
}
.question__foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1.4rem;
    flex-wrap: wrap;
}

.scale { display: flex; gap: .4rem; }
.scale label {
    flex: 1;
    text-align: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    padding: .6rem 0;
    cursor: pointer;
    font-weight: 600;
    margin: 0;
    position: relative;
}
.scale input { position: absolute; opacity: 0; inset: 0; }
.scale label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }

/*
 * Trois états sur une ligne, et le panneau de vérification qui passe dessous.
 * `align-items: flex-start` empêche les boutons de s'étirer sur la hauteur du
 * panneau une fois celui-ci déplié.
 */
.yesno { display: flex; flex-wrap: wrap; gap: .6rem; align-items: flex-start; }
.yesno .btn { flex: 1; min-width: 7rem; justify-content: center; padding: .7rem; }
.yesno .verify .btn { flex: none; }

.line-list { display: flex; flex-direction: column; gap: .4rem; }

/* ----------------------------------------------------------------- Checklist */

.checklist { list-style: none; margin: 0; padding: 0; }
.checklist li {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .5rem 0;
    border-bottom: 1px solid var(--line);
}
.checklist li:last-child { border-bottom: 0; }
.checklist li.is-done .checklist__label { color: var(--ink-faint); text-decoration: line-through; }
.checklist__label { flex: 1; font-weight: 500; }

/* ------------------------------------------------------------------ Timeline */

.timeline { list-style: none; margin: 0; padding: 0 0 0 1.1rem; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 1.1rem .9rem; }
.timeline li::before {
    content: "";
    position: absolute;
    left: -1.42rem;
    top: .45rem;
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    background: var(--line-strong);
    border: 2px solid var(--paper);
}
.timeline__meta { font-size: .8rem; color: var(--ink-faint); }
.timeline__body { white-space: pre-line; }

/* ------------------------------------------------------- Aide à la décision */

/*
 * Choix du niveau de backlog. Les cartes expliquent ce que chaque niveau désigne
 * et quelle technique s'y applique : c'est le seul endroit où ce vocabulaire est
 * posé, et s'en passer produit exactement le flottement qu'on veut éviter.
 */
.level-picker {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: flex-end;
    margin-bottom: 1rem;
}
.level-picker .field { flex: 1; min-width: 200px; margin: 0; }

.level-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

.level-card {
    display: block;
    padding: 1rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
}
.level-card:hover { border-color: var(--accent); text-decoration: none; box-shadow: var(--shadow); }

.level-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .5rem;
}
.level-card__name { font-weight: 650; font-size: 1.05rem; }
.level-card__what { margin: 0 0 .5rem; font-size: .87rem; }
.level-card__why { margin: 0; color: var(--ink-soft); font-size: .82rem; }

/* Le verdict d'un barème : le niveau d'abord, le chiffre ensuite, le détail après. */
.verdict {
    margin-bottom: 1.25rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid var(--line);
    border-left: 4px solid var(--ink-faint);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.verdict--critical { border-left-color: var(--critical); background: var(--critical-soft); }
.verdict--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.verdict--info { border-left-color: var(--info); background: var(--info-soft); }

.verdict__head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.verdict__kicker {
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
}
.verdict__level { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }

.verdict__score { text-align: right; }
.verdict__score-value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.verdict__score-max { color: var(--ink-faint); font-size: .65em; font-weight: 500; }
.verdict__score-unit { color: var(--ink-soft); font-size: .76rem; }

.verdict__formula {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .85rem;
    align-items: baseline;
    margin-top: 1rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-size: .88rem;
}
.verdict__formula strong { font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }

.verdict__note, .verdict__guidance {
    margin: .9rem 0 0;
    font-size: .88rem;
}
.verdict__guidance { font-weight: 600; }

.verdict__overrides {
    margin-top: 1rem;
    padding: .8rem 1rem;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--line);
}
.verdict__overrides-title {
    color: var(--critical);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .35rem;
}
.verdict__overrides ul { margin: 0 0 .5rem; padding-left: 1.1rem; font-size: .88rem; }

.gauge {
    height: 8px;
    margin-top: 1rem;
    border-radius: 999px;
    background: var(--surface-alt);
    overflow: hidden;
}
.gauge__fill { height: 100%; background: var(--accent); border-radius: 999px; }
.verdict--critical .gauge__fill { background: var(--critical); }
.verdict--warning .gauge__fill { background: var(--warning); }

/* --------------------------------------------------------------- Standards */

/* Une règle et sa raison : sans le « pourquoi », une convention se contourne. */
.rules { margin: 0; padding: 0 0 0 1.4rem; }
.rule { margin-bottom: .85rem; }
.rule:last-child { margin-bottom: 0; }
.rule__text { font-weight: 600; }
.rule__why { color: var(--ink-soft); font-size: .87rem; margin-top: .15rem; max-width: 74ch; }

.formula {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .6rem .85rem;
    margin-bottom: .5rem;
    border-radius: var(--radius);
    background: var(--accent-soft);
}
.formula--example { background: var(--surface-alt); }
.formula__label {
    flex: none;
    color: var(--ink-soft);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.formula__value { font-size: .95rem; background: none; padding: 0; }

/* Le gabarit se lit comme du texte brut : c'est ce qu'on va coller. */
.template-block {
    margin: 0;
    padding: 1rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
    font-family: var(--mono);
    font-size: .84rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-x: auto;
}

.standard-card__icon { color: var(--accent); margin-right: .3rem; }

ul.tight { margin: 0; padding-left: 1.2rem; }
ul.tight li { margin-bottom: .3rem; }
ul.tight li:last-child { margin-bottom: 0; }

/* ------------------------------------------- Sélecteur de jour du check-in */

.checkin-date {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: .5rem .75rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    font-size: .85rem;
}
.checkin-date label { color: var(--ink-soft); margin: 0; font-weight: 500; }
.checkin-date input[type="date"] { width: auto; padding: .3rem .5rem; font-size: .85rem; }

/* Répondre en croyant être sur aujourd'hui est l'erreur qui coûte le plus cher :
   le bandeau doit se voir avant la première question. */
.checkin-date-banner {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    margin-bottom: .75rem;
    padding: .7rem .95rem;
    border-left: 3px solid var(--info);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--info-soft);
    font-size: .87rem;
}
.checkin-date-banner--future { border-left-color: var(--warning); background: var(--warning-soft); }
.checkin-date-banner span { color: var(--ink-soft); }
.checkin-date-banner .btn { margin-left: auto; }

/* ------------------------------------------------- Objectif de sprint / vérif */

.goal-form { display: flex; flex-direction: column; gap: 1rem; }
.goal-options { display: flex; flex-direction: column; gap: .5rem; }

.goal-option {
    display: flex;
    gap: .7rem;
    padding: .8rem .95rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
}
.goal-option:hover { background: var(--surface-alt); }
.goal-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.goal-option input { margin-top: .25rem; flex: none; }
.goal-option__body { display: flex; flex-direction: column; gap: .15rem; }
.goal-option__label { font-weight: 650; }
.goal-option__guidance { color: var(--ink-soft); font-size: .85rem; }
.goal-option:has(input:checked) .goal-option__label { color: var(--accent-ink); }

/* Panneau « à vérifier » du check-in : replié tant qu'on n'en a pas besoin. */
.verify {
    width: 100%;
    margin-top: .9rem;
    padding: .95rem 1.1rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--info);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--info-soft);
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.verify__intro { margin: 0; font-size: .87rem; color: var(--ink-soft); }
.verify .field { margin: 0; }

/* ------------------------------------------------------------------- Guide */

/* Étapes de prise en main : l'état vient de la base, pas d'une case cochée. */
.steps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .75rem; }

.step {
    display: flex;
    gap: .9rem;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line);
    border-left: 3px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
}
.step--done { border-left-color: var(--success); }
.step--todo { border-left-color: var(--warning); }
.step--review { border-left-color: var(--info); }

.step__marker {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    font-weight: 700;
    background: var(--surface-alt);
    color: var(--ink-soft);
}
.step--done .step__marker { background: var(--success-soft); color: var(--success); }
.step--todo .step__marker { background: var(--warning-soft); color: var(--warning); }
.step--review .step__marker { background: var(--info-soft); color: var(--info); }

.step__body { flex: 1; min-width: 0; }
.step__head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.step__title { margin: 0; font-size: 1rem; }
.step__why { margin: 0 0 .5rem; font-size: .89rem; max-width: 72ch; }
.step__how { margin: 0 0 .35rem; font-size: .89rem; }
.step__detail {
    margin: 0 0 .6rem;
    padding: .3rem .55rem;
    border-radius: var(--radius);
    background: var(--surface-alt);
    color: var(--ink-soft);
    font-size: .82rem;
    display: inline-block;
}
.step--done .step__why { color: var(--ink-soft); }

/* Les trois gestes, et le déroulé horaire. */
.guide-core { margin: 0; padding-left: 1.2rem; }
.guide-core li { margin-bottom: .6rem; }
.guide-core li:last-child { margin-bottom: 0; }

.timeline-guide { margin: 0; padding: 0; list-style: none; }
.timeline-guide > li {
    display: flex;
    gap: 1.1rem;
    padding: .9rem 0;
    border-top: 1px solid var(--line);
}
.timeline-guide > li:first-child { border-top: 0; padding-top: 0; }

.timeline-guide__when {
    flex: none;
    width: 5.5rem;
    color: var(--accent);
    font-weight: 700;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}
.timeline-guide__what { flex: 1; min-width: 0; }
.timeline-guide__what p { margin: .3rem 0 .5rem; font-size: .89rem; max-width: 72ch; }

.guide-rule {
    margin: 0 0 1rem;
    padding: .8rem 1.1rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: 1.02rem;
    font-weight: 600;
}

.guide-contrast {
    padding: .9rem 1.1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
}
.guide-contrast__title {
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .4rem;
}
.guide-contrast p { margin: 0 0 .4rem; font-size: .89rem; }
.guide-contrast p:last-child { margin-bottom: 0; }

/* Légende du barème : où tombe un score, et à partir de quand. */
.legend {
    margin-bottom: 1.1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface-alt);
}

.legend__title {
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: .55rem;
}

.legend__scale { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .1rem; }

.legend__band {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    padding: .25rem .4rem;
    border-radius: var(--radius);
    font-size: .87rem;
}
.legend__band.is-current {
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-weight: 600;
}

.legend__swatch {
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    flex: none;
    align-self: center;
}
.legend__swatch--critical { background: var(--critical); }
.legend__swatch--warning { background: var(--warning); }
.legend__swatch--info { background: var(--info); }
.legend__swatch--muted { background: var(--ink-faint); }

.legend__rank { min-width: 5.5rem; }
.legend__range { color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.legend__here {
    margin-left: auto;
    padding: .05rem .4rem;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-ink);
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.legend__unit { margin: .5rem 0 0; color: var(--ink-faint); font-size: .78rem; }

.assess__questions { margin: 0; padding: 0; list-style: none; counter-reset: assess; }

.assess__question {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--line);
}
.assess__question:last-child { border-bottom: 0; }
.assess__question fieldset { border: 0; margin: 0; padding: 0; }

.assess__legend {
    counter-increment: assess;
    font-weight: 650;
    font-size: 1rem;
    padding: 0;
}
.assess__legend::before {
    content: counter(assess) ". ";
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.assess__help { margin: .2rem 0 .1rem; color: var(--ink-soft); font-size: .87rem; }
.assess__weight { margin: .1rem 0 0; color: var(--ink-faint); font-size: .76rem; }

.assess__options { display: flex; flex-direction: column; gap: .1rem; margin-top: .6rem; }

.assess__option {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    padding: .35rem .5rem;
    border-radius: var(--radius);
    font-size: .91rem;
    cursor: pointer;
}
.assess__option:hover { background: var(--surface-alt); }
.assess__option input { margin-top: .25rem; flex: none; }
.assess__option:has(input:checked) { background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

.assess__actions { margin-top: 1.25rem; }

.assess__breakdown td.num, .assess__breakdown th.num { text-align: right; font-variant-numeric: tabular-nums; }

.assess__apply h2 { margin-bottom: .2rem; }
.assess__apply-form { display: flex; flex-direction: column; gap: .75rem; max-width: 560px; margin-top: .9rem; }

/* -------------------------------------------------------------------- Report */

/*
 * Un rapport doit se lire comme un document, pas comme une page d'application.
 *
 * Le corps vient de CommonMark : aucune classe à accrocher, donc toute la mise
 * en forme passe par des sélecteurs d'éléments dans `.report__body`. C'est la
 * contrainte qui protège le principe « le Markdown est la source unique du
 * rendu » : ce qui est copié dans un e-mail reste identique à ce qui s'affiche.
 *
 * Mesure de ligne bornée à 78ch : au-delà, l'œil perd la ligne suivante.
 */

.report {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* Bandeau de titre : ce qui identifie le document avant de le lire. */
.report__masthead {
    padding: 1.6rem 2.25rem 1.4rem;
    border-bottom: 1px solid var(--line);
    background:
        linear-gradient(to bottom, var(--accent-soft), transparent),
        var(--surface);
}

.report__kind {
    display: inline-block;
    margin-bottom: .5rem;
    padding: .15rem .5rem;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.report__title {
    margin: 0 0 .5rem;
    font-size: 1.65rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.report__meta {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.1rem;
    color: var(--ink-soft);
    font-size: .84rem;
}
.report__meta div { display: flex; gap: .35rem; }
.report__meta dt { color: var(--ink-faint); }
.report__meta dd { margin: 0; font-weight: 600; }

/*
 * Mesure de ligne bornée pour la prose — au-delà de 78 caractères l'œil perd la
 * ligne suivante. Mais un tableau de chiffres, lui, a besoin de toute la largeur
 * disponible : la contrainte s'applique donc au texte, pas au conteneur.
 */
.report__body {
    padding: 1.75rem 2.25rem 2.25rem;
    font-size: .95rem;
    line-height: 1.65;
}

.report__body > p,
.report__body > ul,
.report__body > ol,
.report__body > blockquote,
.report__body > h1,
.report__body > h2,
.report__body > h3 { max-width: 78ch; }

/* Le H1 du Markdown fait doublon avec le bandeau : il est masqué, pas supprimé —
   il doit rester dans le Markdown exporté, qui se lit sans ce gabarit. */
.report__body > h1:first-child { display: none; }

.report__body h1 {
    margin: 0 0 1rem;
    padding-bottom: .4rem;
    border-bottom: 2px solid var(--line-strong);
    font-size: 1.4rem;
}

/*
 * Les rubriques sont numérotées dans le Markdown. Le numéro est donc du texte :
 * on ne peut pas le styler séparément, mais on peut lui donner de l'air et une
 * règle de séparation qui structure la lecture.
 */
.report__body h2 {
    margin: 2.1rem 0 .7rem;
    padding-top: .9rem;
    border-top: 1px solid var(--line);
    color: var(--accent-ink);
    font-size: 1.08rem;
    letter-spacing: -.01em;
}
.report__body > h2:first-of-type { margin-top: .5rem; padding-top: 0; border-top: 0; }

.report__body h3 {
    margin: 1.3rem 0 .4rem;
    font-size: .93rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ink-soft);
}

.report__body p { margin: 0 0 .75rem; }
.report__body strong { font-weight: 650; }

.report__body ul, .report__body ol { margin: 0 0 .9rem; padding-left: 1.15rem; }
.report__body li { margin-bottom: .3rem; }
.report__body li::marker { color: var(--ink-faint); }
.report__body li > ul, .report__body li > ol { margin-top: .3rem; }

/* Objectif de sprint, mentions d'arrêté : mis en exergue sans crier. */
.report__body blockquote {
    margin: 0 0 1rem;
    padding: .7rem 1rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    background: var(--accent-soft);
    color: var(--accent-ink);
}
.report__body blockquote p:last-child { margin-bottom: 0; }

/*
 * Tableaux : ce sont eux qui portent les chiffres, donc ils doivent se lire en
 * diagonale. Filets horizontaux seulement, en-tête en petites capitales, et
 * chiffres alignés à droite en chasse fixe pour que les colonnes se comparent.
 */
.report__body table {
    width: 100%;
    margin: 0 0 1.2rem;
    border-collapse: collapse;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
}
.report__body thead th {
    padding: .35rem .7rem .35rem 0;
    border-bottom: 2px solid var(--line-strong);
    color: var(--ink-soft);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    text-align: left;
    white-space: nowrap;
}
.report__body tbody td {
    padding: .45rem .7rem .45rem 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}
.report__body tbody tr:last-child td { border-bottom: 0; }
.report__body tbody tr:hover { background: var(--surface-alt); }

/* La dernière colonne d'un tableau de chiffres est presque toujours la valeur. */
.report__body td:last-child:not(:first-child),
.report__body th:last-child:not(:first-child) { text-align: right; padding-right: 0; }

.report__body hr {
    margin: 2rem 0 1.2rem;
    border: 0;
    border-top: 1px solid var(--line);
}

/* Le pied de rapport — le renvoi vers Azure DevOps — est en italique. */
.report__body em { color: var(--ink-soft); }
.report__body > p > em:only-child { display: block; font-size: .86rem; }

.report__body code {
    padding: .1rem .3rem;
    border-radius: 3px;
    background: var(--surface-alt);
    font-family: var(--mono);
    font-size: .88em;
}
.report__body pre { overflow-x: auto; }

@media (max-width: 700px) {
    .report__masthead { padding: 1.2rem 1.15rem 1rem; }
    .report__body { padding: 1.25rem 1.15rem 1.75rem; }
    .report__body table { display: block; overflow-x: auto; }
}

/* -------------------------------------------------------------------- Flashes */

.flashes { max-width: 1180px; margin: 1rem auto 0; padding: 0 1rem; display: flex; flex-direction: column; gap: .5rem; }
.flash {
    padding: .6rem .9rem;
    border-radius: var(--radius);
    border: 1px solid var(--line);
    border-left: 4px solid var(--success);
    background: var(--success-soft);
    font-size: .92rem;
}
.flash--error { border-left-color: var(--critical); background: var(--critical-soft); }
.flash--warning { border-left-color: var(--warning); background: var(--warning-soft); }

/* --------------------------------------------------------------------- Misc */

.filters {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    align-items: flex-end;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.filters .row { margin: 0; min-width: 140px; }
.filters label { font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }

.pill-row { display: flex; gap: .35rem; flex-wrap: wrap; }

.def-list { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: 0; font-size: .92rem; }
.def-list dt { color: var(--ink-soft); }
.def-list dd { margin: 0; }

.section-title {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--ink-faint);
    font-weight: 700;
    margin: 1.5rem 0 .5rem;
}

.inline-form { display: inline; }

@media (max-width: 640px) {
    .page { padding: 1rem .75rem 3rem; }
    .question { padding: 1.15rem 1.1rem; }
    .report { padding: 1.15rem 1.1rem; }
    .def-list { grid-template-columns: 1fr; }
    .def-list dt { margin-top: .5rem; }
}

/*
 * Une feuille imprimée est toujours claire, même si l'écran est en sombre :
 * on remet la palette de référence plutôt que d'espérer que le navigateur
 * corrige les aplats.
 */
@media print {
    :root, :root[data-theme="dark"] {
        color-scheme: light;

        --ink: #16161a;
        --ink-soft: #40404a;
        --ink-faint: #6a6a74;
        --paper: #ffffff;
        --surface: #ffffff;
        --surface-alt: #f2f2f6;
        --line: #cfcfd8;
        --line-strong: #a8a8b4;

        --accent: #23395f;
        --accent-soft: #eef2f8;
        --accent-ink: #1b2c4a;
        --on-accent: #ffffff;
        --on-critical: #ffffff;

        --critical: #8f1f25;
        --critical-soft: #fbeaea;
        --warning: #74450a;
        --warning-soft: #fdf3e2;
        --info: #234f61;
        --info-soft: #eaf2f6;
        --success: #1a5b3b;
        --success-soft: #e8f3ec;

        --shadow: none;
    }

    .sidebar, .btn, .filters, .flashes { display: none !important; }
    body { background: #fff; }
    .report { border: 0; box-shadow: none; padding: 0; }
}