/* ============================================
   WAB OS — socle (partagé : body.os)
   Le fond blanc net et son grain, le bleu système (sélection, focus,
   curseur), Sligoil en signature, la colonne et le rythme.
   ============================================ */

/* La lumière de l'heure (--sky-*, os-sky.css) et le grain sur le fond
   de la racine ; le corps reste transparent par-dessus. */
:root:has(body.os) {
    background:
        radial-gradient(120% 50% at 50% 0%, var(--sky-glow), transparent 70%),
        linear-gradient(180deg, var(--sky-top), transparent 900px),
        var(--grain) 0 0 / 160px 160px,
        var(--desk);
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
}

body.os {
    background: transparent;
}

/* La trame de points (Eliott, 03.10 : « les petits points d'avant,
   c'était bien ») : le motif « Dot Pattern » traduit sans React. Une
   seule couche fixe sous le contenu ; sa couleur est --desk-dot, le
   SVG (16 px, un point de rayon 1 en 1,1) n'en est que le masque,
   net sur tout écran. */
.os::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background: var(--desk-dot);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E") 0 0 / var(--desk-grid) var(--desk-grid) repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Ccircle cx='1' cy='1' r='1'/%3E%3C/svg%3E") 0 0 / var(--desk-grid) var(--desk-grid) repeat;
}

/* ── Le bleu, couleur système ── */
.os ::selection {
    background: var(--mark);
    color: var(--on-accent);
}

.os {
    caret-color: var(--klein-text);
}

/* L'anneau de focus : 2 px, décollé de 2 px, sans délai. Sur une
   surface Klein, --accent devient blanc (os-tokens.css). */
.os :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.os ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.os ::-webkit-scrollbar-thumb {
    border: 3px solid transparent;
    border-radius: var(--r-pill);
    background: var(--line-strong) padding-box;
}

/* ── Typographie ── titres en Instrument Sans, interlettrage optique
   qui se resserre avec la taille ; Sligoil en signature seulement. */
.os :is(h1, h2, h3):not(.badge) {
    font-weight: var(--w-medium);
    letter-spacing: var(--track-optical);
    text-wrap: balance;
}

.os :is(kbd, code, samp, time, .file-name, .win__title, .badge) {
    font-family: var(--font-mono);
}

.os {
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

/* ── Colonne et rythme ── */
.os-wrap,
.desk-wrap {
    width: 100%;
    max-width: calc(var(--measure) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* La carte de section : une grande carte gris chaud posée sur le
   bureau (coins du panneau, liseré, relief, feuille décalée dessous)
   au lieu d'une bande pleine largeur. --wash : la teinte très claire
   de la section ; --even : le même retrait en haut et en bas, pour un
   contenu centré. */
.os-card {
    padding: clamp(48px, 7vw, 88px) clamp(16px, 4vw, 48px) clamp(16px, 4vw, 48px);
    border-radius: var(--r-panel);
    background: var(--panel);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), var(--sheet);
}

.os-card--wash {
    background: var(--klein-wash);
    box-shadow: 0 0 0 var(--hair) var(--klein-tint), var(--relief), var(--sheet);
}

.os-card--even {
    padding-block: clamp(48px, 7vw, 88px);
}

/* Le badge des sections : une petite étiquette en Sligoil, un carré
   Klein devant, comme une touche de légende. */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 26px;
    padding: 0 10px;
    border-radius: var(--r-key);
    background: var(--paper);
    box-shadow: 0 0 0 var(--hair) var(--edge), var(--relief), 0 1px 2px oklch(0.18 0.005 265 / 0.08);
    font-size: var(--t-cap);
    font-weight: var(--w-medium);
    letter-spacing: var(--track-caps);
    text-transform: uppercase;
    color: var(--ink-muted);
}

.badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 1px;
    background: var(--klein);
}

.block {
    padding-top: var(--section);
}

/* La barre de menus est fixe : une ancre ou un élément qui prend le
   focus au clavier s'arrête sous elle, jamais dessous. */
:root:has(body.os) {
    scroll-padding-top: calc(var(--bar-h) + 16px);
}

/* Ce qui n'existe qu'avec JavaScript (terminal, recherche, widget
   horaire) n'apparaît pas sans lui. */
html.no-js [data-js-only] {
    display: none !important;
}