/* =========================================================================
   Histoires attribuées à un profil — Imagilire Mini      (Lot 6, tâche 5)
   -------------------------------------------------------------------------
   Deux éléments, et ils répondent à la même question : « où sont passées mes
   histoires ? »

     · la **ligne de voile**, au-dessus du rayon « Mes histoires », qui compte
       ce qui est masqué et propose de tout montrer ;
     · l'**étiquette de propriétaire**, posée sur la vignette d'une histoire
       qui appartient à quelqu'un d'autre — visible seulement le voile levé.

   Ni l'une ni l'autre n'existe quand rien n'est attribué, c'est-à-dire chez
   presque tous les foyers : le rayon garde exactement l'aspect qu'il avait.

   Comportement : js/library/custom-stories.js et js/library/state.js.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Ligne de voile
   -------------------------------------------------------------------------- */

/* Sobre à dessein. Ce n'est pas un avertissement — rien n'est perdu, rien
   n'est en danger : c'est un état de l'affichage, et il se lit comme tel.
   Le bandeau ambre est réservé, dans ce projet, à ce qui peut effacer
   (css/imagilire-mini-backup.css). */
.story-scope-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    align-items: center;
    margin: 0 0 12px;
    padding: 8px 12px;
    border-radius: 8px;
    background-color: rgba(0, 0, 0, 0.05);
}

#storyScopeNotice[hidden] {
    display: none;
}

.story-scope-text {
    flex: 1 1 200px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--text-color);
    opacity: 0.85;
}

/* Bouton-lien : l'action est secondaire, elle ne doit pas concurrencer
   « Crée ton histoire » du regard. Mais la cible reste à 44 px — le rayon se
   consulte au doigt sur tablette. */
.story-scope-btn {
    flex: 0 0 auto;
    min-height: 44px;
    padding: 6px 12px;
    border: 2px solid transparent;
    border-radius: 8px;
    background: none;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
    transition: background-color 0.2s;
}

.story-scope-btn:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.story-scope-btn:focus-visible {
    outline: none;
    border-color: var(--primary-color);
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Étiquette de propriétaire
   -------------------------------------------------------------------------- */

/* En haut à gauche : l'étoile des favoris occupe le coin haut-droit et les
   boutons « supprimer » / « modifier » le bas de la vignette. Le seul coin
   libre est celui-ci — et c'est aussi celui que l'œil parcourt en premier. */
.story-owner-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 3;

    max-width: calc(100% - 52px);   /* laisse passer l'étoile des favoris */
    overflow: hidden;
    padding: 3px 8px;
    border-radius: 999px;
    background-color: rgba(0, 0, 0, 0.62);
    color: #fff;

    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;

    /* Une couverture claire sous un fond translucide sombre : l'ombre porte
       le contraste là où le fond ne suffit pas. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    pointer-events: none;           /* n'intercepte pas le clic d'ouverture */
}

/* --------------------------------------------------------------------------
   Sélecteur « Pour qui ? » des deux formulaires
   -------------------------------------------------------------------------- */

/* La colonne entière porte `hidden` tant que l'appareil ne compte qu'un
   profil. `display: none` par défaut du navigateur suffirait, mais
   `.story-form-col` pose un `display: flex` qui le battrait — même piège
   qu'au Lot 6, tâche 2 sur `.school-lock-btn[hidden]`. */
.story-form-col[hidden] {
    display: none;
}

/* --------------------------------------------------------------------------
   Contraste élevé
   -------------------------------------------------------------------------- */

/* `--text-color` passe au blanc dans ce mode, et le voile noir à 5 % de la
   ligne disparaît sur fond sombre : le cadre prend le relais. */
body.high-contrast .story-scope-toggle {
    background-color: transparent;
    border: 1px solid var(--secondary-color);
}

body.high-contrast .story-scope-text {
    opacity: 1;
}

body.high-contrast .story-scope-btn {
    color: var(--secondary-color);
}

body.high-contrast .story-owner-tag {
    background-color: #000;
    border: 1px solid var(--secondary-color);
    text-shadow: none;
}

/* --------------------------------------------------------------------------
   Petits écrans
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
    /* À 375 px, le texte et le bouton se lisent l'un sous l'autre : côte à
       côte, le compte se réduit à deux mots par ligne. */
    .story-scope-toggle {
        align-items: flex-start;
    }

    .story-scope-btn {
        align-self: stretch;
        text-align: left;
        padding-left: 0;
    }
}

/* --------------------------------------------------------------------------
   Mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .story-scope-btn {
        transition: none;
    }
}