/* ═══════════════════════════════════════════════════════════════
   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 une couleur de marque, pas une valeur de contraste :
       il reste jaune quel que soit le fond qui le porte. */
    --stl-acc:    var(--acc,  #f5c031);

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

/* ── 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: .18em .5em;
    font: 500 .68rem/1.5 var(--stl-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--stl-mt);

    /* Le cadre ne peut pas passer par --stl-bd : l'étiquette vient de
       poser son propre `color` atténué, currentColor y vaut donc déjà
       62 % de l'encre et le mélange se composerait. Le pourcentage est
       relevé pour retomber sur le même gris une fois composé. */
    border: 1px solid color-mix(in srgb, currentColor 48%, transparent);
    border-radius: var(--stl-radius);
    white-space: nowrap;
}

.stl-tag--accent {
    background: var(--stl-acc);
    border-color: transparent;
    color: #1e1b17;
    font-weight: 600;
}

/* É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: color-mix(in srgb, currentColor 75%, transparent);
    color: inherit;
    font-weight: 600;
}

/* ── É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; }