/* ═══════════════════════════════════════════════════════════════
   STREAMLOG, styles partagés par tous les blocs stl/*
   Chargé côté front ET dans l'éditeur, via le handle 'stl-blocks-shared'.

   ── TOKENS ──
   Chaque variable reprend celle du thème wireframe si elle existe, et
   retombe sur une valeur autonome sinon. Le plugin s'intègre donc au
   thème sans en dépendre : changer de thème dégrade les couleurs, ça
   ne casse rien.

   ── POURQUOI L'ENCRE VIENT DE currentColor ──
   Ces variables reprenaient les tokens CLAIRS du thème (--tx, --surf,
   --bd), lus une fois pour toutes sur :root. Or un bloc peut être posé
   dans un conteneur sombre : wf/container ne redéfinit aucun de ces
   tokens, il pose un `background-color` et un `color` sur lui-même.
   Le bloc gardait donc son encre noire, ses bordures beiges et ses
   cartes claires par-dessus le fond noir du conteneur, illisible.

   Une variable custom résolue sur :root garde d'ailleurs sa valeur
   calculée dans toute la descendance : même si le conteneur avait
   redéfini --tx, --stl-tx aurait continué de valoir l'ancienne.

   Tout part maintenant de `currentColor`, l'encre que le contexte nous
   transmet par héritage, et se mélange vers `transparent` plutôt que
   vers une couleur de fond qu'on ne peut pas connaître. La palette se
   retourne d'elle-même : fond clair, fond sombre, aplat d'accent, sans
   un réglage ni une classe de plus.

   ── LA RÈGLE À TENIR ──
   Ne jamais poser --stl-mt en `color:` sur un conteneur dont les
   enfants utilisent eux aussi ces variables : currentColor y vaudrait
   déjà la valeur atténuée et les mélanges se composeraient (62 % de
   62 %). Les conteneurs gardent l'encre héritée, seules les FEUILLES
   s'atténuent.
═══════════════════════════════════════════════════════════════ */

:root {
    --stl-tx:     currentColor;
    --stl-mt:     color-mix(in srgb, currentColor 62%, transparent);
    --stl-bd:     color-mix(in srgb, currentColor 30%, transparent);
    --stl-surf:   color-mix(in srgb, currentColor  9%, transparent);

    /* L'accent est celui du thème. Il ne sert jamais seul de fond à un
       texte : un aplat prend sa couleur de texte dans la même paire du
       thème (--acc avec --on-acc), lue sur l'élément lui-même. */
    --stl-acc:    var(--acc,  #0a0a0a);

    --stl-mono:   var(--mono, 'DM Mono', ui-monospace, monospace);
    --stl-sans:   var(--sans, 'Space Grotesk', system-ui, sans-serif);
    --stl-radius: var(--wf-radius, var(--r, 0px));
}

/* ── Vignette d'affiche ──────────────────────────────────────── */
.stl-poster {
    display: block;
    flex: none;
    overflow: hidden;
    background: var(--stl-surf);
    border: 1px solid var(--stl-bd);
    border-radius: var(--stl-radius);
    aspect-ratio: 2 / 3;
}

.stl-poster--sm  { width: 34px; }
.stl-poster--md  { width: 64px; }
.stl-poster--lg  { width: 120px; }

.stl-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.stl-poster__fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font: 600 1em/1 var(--stl-mono);
    color: var(--stl-mt);
}

/* ── Étiquette / badge ───────────────────────────────────────── */
.stl-tag {
    display: inline-block;
    padding: .34em .6em;
    font: 800 .64rem/1.3 var(--stl-mono);
    letter-spacing: .09em;
    text-transform: uppercase;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 0;
    white-space: nowrap;
}

/* Étiquette pleine (finale). L'aplat et son texte forment une paire prise
   dans le thème et lue ICI, sur l'élément : --acc avec --on-acc. Le texte
   était écrit en dur, foncé, du temps où l'accent était jaune ; l'accent
   étant devenu noir, cela donnait du noir sur noir. Dans un conteneur
   sombre, le thème retourne la paire et l'étiquette suit. */
.stl-tag--accent {
    background: var(--acc, #0a0a0a);
    border-color: var(--acc, #0a0a0a);
    color: var(--on-acc, #ffffff);
}

/* Étiquette forte (brouillon). Elle était en inversion pleine, aplat
   d'encre, texte couleur du papier, ce qui suppose de connaître la
   couleur du fond. Dans un conteneur sombre, ce texte beige se posait
   sur un aplat blanc. Un cadre appuyé sur un fond dense dit la même
   chose sans rien supposer du décor. */
.stl-tag--solid {
    background: color-mix(in srgb, currentColor 14%, transparent);
    border-color: currentColor;
    border-style: dashed;
    color: inherit;
}

/* ── État vide (front et éditeur) ────────────────────────────── */
.stl-empty {
    padding: 22px;
    text-align: center;
    font: 400 .9rem/1.6 var(--stl-sans);
    color: var(--stl-mt);
    background: var(--stl-surf);
    border: 1px dashed var(--stl-bd);
    border-radius: var(--stl-radius);
}

/* ═══════════════════════════════════════════════════════════════
   ÉDITEUR, sélecteur de fiche
   Ces règles ne servent que dans l'admin, mais vivent ici pour que
   les blocs n'aient qu'un seul handle de style partagé à déclarer.
═══════════════════════════════════════════════════════════════ */

.stl-picker { margin-bottom: 8px; }

.stl-picker__status {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 2px;
    font-size: 12px;
    color: #757575;
}

.stl-picker__status.is-error { color: #cc1818; }

.stl-picker__results {
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
    max-height: 320px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.stl-picker__results li + li { border-top: 1px solid #f0f0f0; }

.stl-picker__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 7px 9px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.stl-picker__item:hover:not(:disabled) { background: #f0f6fc; }
.stl-picker__item.is-taken            { opacity: .45; cursor: default; }

.stl-picker__meta,
.stl-selected__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.stl-picker__meta strong,
.stl-selected__meta strong {
    font-size: 12.5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stl-picker__sub,
.stl-selected__sub {
    font-size: 11px;
    color: #757575;
}

.stl-selected {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 8px;
    margin-bottom: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
}

/* ── Formulaire d'ajout rapide (éditeur) ─────────────────────── */
.stl-quickadd {
    padding: 12px;
    margin-top: 10px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 2px;
}

.stl-quickadd__title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #1e1e1e;
}

.stl-quickadd__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.stl-quickadd__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.stl-quickadd__note {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.5;
    color: #757575;
}

.stl-quickadd__feedback        { margin-top: 8px; font-size: 12px; color: #007017; }
.stl-quickadd__feedback.is-error { color: #cc1818; }