/* ═══════════════════════════════════════════════════════════════════════
   STREAMLOG — Listes
   Le bloc-notes du membre. Tout dérive des tokens de streamlog.css : la
   page suit l'habillage clair ou sombre du thème sans réglage dédié.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 0. Blindage contre le thème ──────────────────────────────────────────
   Le profil membre est rendu dans la zone de contenu du thème, qui réapplique
   ses styles de liste (puces, retrait) à nos <ul>. On neutralise donc ces
   héritages sur nos propres classes, sinon les cartes s'affichent avec des
   puces et un décalage sur le profil (mais pas sur la page pleine largeur). */
.stl-note-card-lines,
.stl-note-public-lines,
.stl-note-lines,
.stl-recent-strip {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.stl-note-card-lines > li,
.stl-note-public-lines > li,
.stl-note-lines > li,
.stl-recent-strip > li {
  list-style: none !important;
  margin: 0;
  text-indent: 0;
}
.stl-note-card-lines > li   { padding: 0 0 0 12px !important; }
.stl-note-public-lines > li { padding: 7px 0 !important; }
.stl-note-card-lines > li::marker,
.stl-note-public-lines > li::marker,
.stl-note-lines > li::marker { content: '' !important; }
.stl-note-card a { box-shadow: none; }

/* ── 1. Page ──────────────────────────────────────────────────────────── */
.stl-lists {
  font-family: var(--stl-sans);
  color: var(--stl-text);
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 16px 120px;
}

.stl-lists-head { margin-bottom: 28px; }

.stl-lists-title {
  font-family: var(--stl-serif);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.1;
  margin: 4px 0 10px;
}

.stl-lists-lede {
  color: var(--stl-text-muted);
  font-size: .95rem;
  line-height: 1.55;
  margin: 0;
  max-width: 52ch;
}

.stl-lists-lede code {
  background: var(--stl-surface-2);
  border-radius: var(--stl-radius-sm);
  padding: 1px 5px;
  font-family: var(--stl-mono);
  font-size: .9em;
}

.stl-lists-local-note { color: var(--stl-text-muted); font-style: italic; }

/* ── 2. Cartes ────────────────────────────────────────────────────────── */
.stl-notes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.stl-note-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 160px;
  /* Sans ceci, un élément de grille prend `min-width: auto` et s'élargit pour
     contenir une ligne en `nowrap` : le texte déborde alors au lieu d'être
     tronqué par l'ellipse. */
  min-width: 0;
  overflow: hidden;
  padding: 14px 15px;
  background: var(--stl-surface);
  border: 1px solid var(--stl-border);
  border-radius: var(--stl-radius-lg);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--stl-transition), transform var(--stl-transition), box-shadow var(--stl-transition);
}

.stl-note-card:hover,
.stl-note-card:focus-visible {
  border-color: var(--stl-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--stl-shadow);
  outline: none;
}

.stl-note-card--system { background: var(--stl-primary-dim); border-style: dashed; }
.stl-note-card.is-pinned { border-color: color-mix(in srgb, var(--stl-gold) 45%, var(--stl-border)); }

.stl-note-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.stl-note-card-title {
  font-family: var(--stl-serif);
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.stl-note-pin { color: var(--stl-gold); font-size: .85rem; flex: none; }

.stl-note-card-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: .86rem;
  color: var(--stl-text-dim);
}

.stl-note-card-lines li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 12px;
  position: relative;
}

.stl-note-card-lines li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid var(--stl-text-muted);
}

.stl-note-card-lines li.is-done {
  color: var(--stl-text-muted);
  text-decoration: line-through;
}
.stl-note-card-lines li.is-done::before { background: var(--stl-text-muted); }

.stl-note-card-empty {
  flex: 1;
  margin: 0;
  color: var(--stl-text-muted);
  font-size: .86rem;
  font-style: italic;
}

.stl-note-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  color: var(--stl-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stl-note-count { font-family: var(--stl-mono); }

.stl-note-vis {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--stl-surface-2);
}
.stl-note-vis.is-public   { background: var(--stl-green-dim); color: var(--stl-green); }
.stl-note-vis.is-unlisted { background: var(--stl-gold-dim);  color: var(--stl-gold); }
.stl-note-vis.is-system   { background: var(--stl-primary-dim); color: var(--stl-primary); }

.stl-note-when { margin-left: auto; text-transform: none; letter-spacing: 0; }

.stl-notes-empty {
  color: var(--stl-text-muted);
  font-style: italic;
  padding: 28px 0;
}

/* ── 3. Puces de fiches ───────────────────────────────────────────────── */
.stl-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 2px 8px;
  margin: 0 1px;
  border-radius: 999px;
  background: var(--stl-primary-dim);
  color: var(--stl-primary);
  border: 1px solid color-mix(in srgb, var(--stl-primary) 22%, transparent);
  font-size: .92em;
  line-height: 1.45;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  -webkit-user-select: none;
  user-select: none;
}

a.stl-ref:hover { background: color-mix(in srgb, var(--stl-primary) 20%, var(--stl-paper)); }

.stl-ref--person { background: var(--stl-gold-dim);  color: var(--stl-gold);  border-color: color-mix(in srgb, var(--stl-gold) 22%, transparent); }
.stl-ref--series { background: var(--stl-green-dim); color: var(--stl-green); border-color: color-mix(in srgb, var(--stl-green) 22%, transparent); }

.stl-ref-label { display: inline; }

/* Dans l'éditeur, la puce entière est cliquable (ouvre la fiche). */
.stl-note-editor .stl-ref { cursor: pointer; }

/* Badge de saison : « où j'en suis » dans la série. */
.stl-ref-season {
  font-family: var(--stl-mono);
  font-size: .82em;
  font-weight: 600;
  padding: 0 5px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
}
.stl-ref-season[hidden] { display: none; }

/* Icône d'ouverture de la fiche, à la fin de la puce (surtout dans l'éditeur,
   où la puce elle-même n'est pas cliquable). */
.stl-ref-go {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: .6;
  font-size: .9em;
  text-decoration: none;
  padding: 0 1px;
}
.stl-ref-go:hover { opacity: 1; }
.stl-ref-go[hidden] { display: none; }

/* Mention sans fiche : elle reste lisible, mais en retrait. */
.stl-ref.is-unresolved,
.stl-mention-raw {
  background: none;
  border: none;
  color: var(--stl-text-muted);
  padding: 0;
}

/* ── 4. Bouton flottant ───────────────────────────────────────────────── */
.stl-fab {
  position: fixed;
  left: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 9000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 48px;
  padding: 0 18px 0 15px;
  border: 1px solid var(--stl-border);
  border-radius: 999px;
  background: var(--stl-ink);
  color: var(--stl-paper);
  font-family: var(--stl-sans);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--stl-shadow-lg);
  transition: transform var(--stl-transition), opacity var(--stl-transition);
}

/* `display: inline-flex` gagnerait sur l'attribut hidden : on le neutralise. */
.stl-fab[hidden] { display: none; }

.stl-fab:hover { transform: translateY(-2px); }
.stl-fab:active { transform: scale(.97); }

.stl-fab--page { position: fixed; }

body.stl-note-open .stl-fab,
body.stl-sheet-open .stl-fab { opacity: 0; pointer-events: none; }

@media (max-width: 480px) {
  .stl-fab { padding: 0; width: 52px; height: 52px; justify-content: center; }
  .stl-fab-label { display: none; }
}

/* ── 5. Feuille « Mes listes » ────────────────────────────────────────── */
.stl-sheet { position: fixed; inset: 0; z-index: 9100; }
.stl-sheet[hidden] { display: none; }

.stl-sheet-scrim {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--stl-ink) 45%, transparent);
  backdrop-filter: blur(2px);
}

.stl-sheet-panel {
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(460px, 100%);
  max-height: 82vh;
  overflow-y: auto;
  padding: 18px 18px calc(24px + env(safe-area-inset-bottom, 0px));
  background: var(--stl-bg);
  border: 1px solid var(--stl-border);
  border-radius: var(--stl-radius-lg) var(--stl-radius-lg) 0 0;
  box-shadow: var(--stl-shadow-lg);
  animation: stl-sheet-up .22s ease;
}

@keyframes stl-sheet-up { from { transform: translateY(14px); opacity: .6; } }

.stl-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.stl-sheet-head h2 { font-family: var(--stl-serif); font-size: 1.15rem; margin: 0; }

.stl-sheet-close {
  border: none;
  background: none;
  color: var(--stl-text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* Feuille : les mêmes cartes-aperçu que la page, en une colonne et plus courtes
   (la feuille sert à repérer et ouvrir vite, l'aperçu reste bien pratique). */
.stl-sheet-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.stl-sheet-list .stl-note-card { min-height: 0; }

.stl-sheet-empty {
  padding: 24px 8px;
  text-align: center;
  color: var(--stl-text-muted);
  font-style: italic;
  font-size: .88rem;
}

.stl-sheet-new {
  width: 100%;
  margin-top: 14px;
  padding: 12px;
  border: 1px dashed var(--stl-border-hover);
  border-radius: var(--stl-radius);
  background: none;
  color: var(--stl-text);
  font-family: var(--stl-sans);
  font-size: .92rem;
  cursor: pointer;
}
.stl-sheet-new:hover { background: var(--stl-surface); }

.stl-sheet-all {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: .84rem;
  color: var(--stl-text-muted);
}

/* ── 6. Éditeur ───────────────────────────────────────────────────────── */
.stl-note-editor {
  position: fixed;
  inset: 0;
  z-index: 9200;
  display: flex;
  flex-direction: column;
  background: var(--stl-bg);
  font-family: var(--stl-sans);
  color: var(--stl-text);
  animation: stl-note-in .18s ease;
}

@keyframes stl-note-in { from { opacity: .4; transform: translateY(8px); } }

body.stl-note-open { overflow: hidden; }

.stl-note-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 8px;
  padding-top: calc(10px + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--stl-border);
  background: var(--stl-bg);
}

.stl-note-back,
.stl-note-menu-btn {
  border: none;
  background: none;
  color: var(--stl-text);
  font-size: 1.5rem;
  line-height: 1;
  padding: 6px 12px;
  cursor: pointer;
  border-radius: var(--stl-radius);
}
.stl-note-back:hover,
.stl-note-menu-btn:hover { background: var(--stl-surface-2); }
.stl-note-menu-btn { font-size: 1.1rem; letter-spacing: .1em; }

.stl-note-title {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  font-family: var(--stl-serif);
  font-size: 1.1rem;
  color: var(--stl-text);
  padding: 6px 4px;
}
.stl-note-title:focus { outline: none; }
.stl-note-title::placeholder { color: var(--stl-text-muted); }

.stl-note-scroll {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 40vh;
  max-width: 720px;
  width: 100%;
  margin: 0 auto;
}

.stl-note-lines { list-style: none; margin: 0; padding: 0; }

.stl-ln {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 3px 0;
  transition: opacity .2s ease;
}
.stl-ln.is-sinking { opacity: .3; }

.stl-ln-check {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 4px;
  padding: 0;
  border: 1.6px solid var(--stl-border-hover);
  border-radius: 50%;
  background: none;
  cursor: pointer;
  position: relative;
  transition: background var(--stl-transition), border-color var(--stl-transition);
}
.stl-ln-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid var(--stl-paper);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .16s ease;
}
.stl-ln.is-done .stl-ln-check { background: var(--stl-primary); border-color: var(--stl-primary); }
.stl-ln.is-done .stl-ln-check::after { transform: rotate(45deg) scale(1); }

.stl-ln-txt {
  flex: 1;
  min-width: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  padding: 2px 0;
  outline: none;
  word-break: break-word;
}
.stl-ln.is-done .stl-ln-txt { color: var(--stl-text-muted); text-decoration: line-through; }

.stl-note-hint {
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--stl-border);
  font-size: .78rem;
  color: var(--stl-text-muted);
  text-align: center;
}

/* ── 7. Popup de mention ──────────────────────────────────────────────── */
.stl-mention-pop {
  position: fixed;
  z-index: 9300;
  width: 292px;
  max-height: 260px;
  overflow-y: auto;
  padding: 5px;
  background: var(--stl-bg);
  border: 1px solid var(--stl-border-hover);
  border-radius: var(--stl-radius);
  box-shadow: var(--stl-shadow-lg);
}
.stl-mention-pop[hidden] { display: none; }

.stl-mention-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 6px 7px;
  border: none;
  background: none;
  border-radius: var(--stl-radius-sm);
  cursor: pointer;
  text-align: left;
  color: var(--stl-text);
  font-family: var(--stl-sans);
}
.stl-mention-row:hover,
.stl-mention-row.is-active { background: var(--stl-surface-2); }

.stl-mention-row img,
.stl-mention-thumb--empty {
  width: 30px;
  height: 42px;
  flex: none;
  object-fit: cover;
  border-radius: var(--stl-radius-sm);
  background: var(--stl-surface-3);
  display: grid;
  place-items: center;
  font-size: .95rem;
}

.stl-mention-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stl-mention-title { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stl-mention-year  { font-size: .74rem; color: var(--stl-text-muted); }
.stl-mention-type  { font-size: .68rem; color: var(--stl-text-muted); text-transform: uppercase; letter-spacing: .04em; }

.stl-mention-hint {
  padding: 10px 9px;
  font-size: .82rem;
  color: var(--stl-text-muted);
}
.stl-mention-add { display: block; margin-top: 6px; color: var(--stl-primary); font-size: .82rem; }

/* ── 8. Menus contextuels ─────────────────────────────────────────────── */
.stl-note-menu {
  position: fixed;
  z-index: 9400;
  min-width: 210px;
  padding: 5px;
  background: var(--stl-bg);
  border: 1px solid var(--stl-border-hover);
  border-radius: var(--stl-radius);
  box-shadow: var(--stl-shadow-lg);
  display: flex;
  flex-direction: column;
}

.stl-note-menu button {
  padding: 9px 11px;
  border: none;
  background: none;
  border-radius: var(--stl-radius-sm);
  text-align: left;
  cursor: pointer;
  font-family: var(--stl-sans);
  font-size: .88rem;
  color: var(--stl-text);
}
.stl-note-menu button:hover { background: var(--stl-surface-2); }
.stl-note-menu button.is-danger { color: var(--stl-red); }
.stl-note-menu button.is-new { border-top: 1px solid var(--stl-border); margin-top: 4px; color: var(--stl-primary); }

.stl-note-menu-title {
  margin: 4px 11px 6px;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--stl-text-muted);
}

/* ── 9. Bande « vu récemment » ────────────────────────────────────────── */
.stl-recent { margin-top: 40px; }

.stl-recent-title {
  font-family: var(--stl-serif);
  font-size: 1.05rem;
  margin: 0 0 2px;
}
.stl-recent-lede { margin: 0 0 12px; font-size: .82rem; color: var(--stl-text-muted); }

.stl-recent-strip {
  list-style: none;
  margin: 0;
  padding: 0 0 6px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
}
.stl-recent-strip li { scroll-snap-align: start; }

.stl-recent-item {
  width: 92px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--stl-text-dim);
  font-family: var(--stl-sans);
}

.stl-recent-item img,
.stl-recent-thumb--empty {
  width: 92px;
  height: 128px;
  object-fit: cover;
  border-radius: var(--stl-radius);
  border: 1px solid var(--stl-border);
  background: var(--stl-surface-2);
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  transition: border-color var(--stl-transition);
}
.stl-recent-item:hover img,
.stl-recent-item:hover .stl-recent-thumb--empty { border-color: var(--stl-primary); }

.stl-recent-name {
  font-size: .76rem;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 10. Liste partagée (vue publique) ────────────────────────────────── */
.stl-note-public {
  font-family: var(--stl-sans);
  color: var(--stl-text);
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.stl-note-public-title {
  font-family: var(--stl-serif);
  font-size: clamp(1.7rem, 5vw, 2.4rem);
  line-height: 1.15;
  margin: 4px 0 10px;
}

/* Bandeau auteur : nom + photo de profil, en petit sous le titre. */
.stl-note-author {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 10px 0 4px;
  text-decoration: none;
  color: var(--stl-text-dim);
}
.stl-note-author:hover { color: var(--stl-text); }
.stl-note-author-pp img,
.stl-note-author-pp .avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: block;
  border: 1px solid var(--stl-border);
}
.stl-note-author-name { font-size: .9rem; font-weight: 600; }

.stl-note-public-meta { color: var(--stl-text-muted); font-size: .85rem; margin: 6px 0 26px; }

.stl-note-public-lines { list-style: none; margin: 0; padding: 0; }

.stl-note-public-lines li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--stl-border);
  font-size: 1rem;
  line-height: 1.6;
}
.stl-note-public-lines li.is-done { color: var(--stl-text-muted); }
.stl-note-public-lines li.is-done .stl-ln-txt { text-decoration: line-through; }

.stl-note-public-lines .stl-ln-box {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 5px;
  border: 1.5px solid var(--stl-border-hover);
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.stl-note-public-lines li.is-done .stl-ln-box {
  background: var(--stl-primary);
  border-color: var(--stl-primary);
  color: var(--stl-paper);
}

.stl-note-public-foot { display: flex; gap: 10px; margin-top: 28px; flex-wrap: wrap; }

/* ── 11. Toast ────────────────────────────────────────────────────────── */
.stl-toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 14px);
  z-index: 9500;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--stl-ink);
  color: var(--stl-paper);
  font-family: var(--stl-sans);
  font-size: .86rem;
  box-shadow: var(--stl-shadow-lg);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}
.stl-toast.is-in { opacity: 1; transform: translate(-50%, 0); }

/* ── 12. Mentions sur une fiche ───────────────────────────────────────── */
.stl-in-lists { margin-top: 26px; }
.stl-in-lists h3 {
  font-family: var(--stl-serif);
  font-size: 1rem;
  margin: 0 0 10px;
}
.stl-in-lists ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.stl-in-lists a {
  display: inline-block;
  padding: 5px 12px;
  border: 1px solid var(--stl-border);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--stl-text-dim);
  text-decoration: none;
}
.stl-in-lists a:hover { border-color: var(--stl-border-hover); color: var(--stl-text); }

@media (prefers-reduced-motion: reduce) {
  .stl-note-editor, .stl-sheet-panel { animation: none; }
  .stl-fab, .stl-note-card, .stl-toast { transition: none; }
}