/* ═══════════════════════════════════════════════════════════════════════
   PIPSTER PRO · CENTRE D'ALERTES — habillage
   ─────────────────────────────────────────────────────────────────────
   Toutes les règles sont préfixées `.alc-`, sauf trois qui NOMMENT la
   fenêtre existante (`#alertModal`, `#alertsBtn .ab-dot`). C'est délibéré :
   la grammaire des onglets (`sm-tabs`, `sm-tab`, `sm-panel`), des rangs
   (`sm-row`, `sm-row-check`) et des titres (`sm-section`) est déjà écrite
   par style.css ET rhabillée par la peau ogilio. Le centre l'emprunte au
   lieu d'en fabriquer une seconde, qui aurait divergé au premier ajustement
   de la peau.

   ORDRE DE CHARGEMENT. Cette feuille est posée APRÈS la peau et après
   terminal-layout.css : elle élargit la fenêtre, que la peau habille par
   `body #alertModal` (une classe de plus). D'où `#alertModal.alc-modal`,
   qui pèse un identifiant + une classe — et l'ordre départage le reste.

   BIDI. Aucune valeur physique : `margin-inline`, `padding-inline`,
   `inset-inline`, `border-inline-start`. La fenêtre est servie en arabe.
   ═══════════════════════════════════════════════════════════════════ */

/* Le journal a besoin d'air que le formulaire de 440 px ne donnait pas :
   un titre, un corps et une heure sur la même ligne y passaient à trois
   lignes chacun. */
#alertModal.alc-modal {
  width: min(560px, calc(100vw - 32px));
}

/* ── La pastille de la cloche ─────────────────────────────────────────
   `.ab-dot` était un point de 6 px, affiché par `#alertsBtn.on .ab-dot`.
   Il le reste quand rien n'est non lu. Avec un compte, il devient une
   pastille chiffrée — et elle doit s'afficher MÊME quand les alertes sont
   coupées : c'est justement là qu'on a quelque chose à rattraper.

   `display` posé par une règle bat l'attribut `hidden` — la leçon des
   pastilles du rail. On ne pilote donc que par classe, jamais par attribut. */
/* ── TROIS SÉLECTEURS, ET C'EST UNE LEÇON PAYÉE ────────────────────────
   Premier jet : le seul `#alertsBtn .ab-dot.alc-count` (1 id, 2 classes).
   Il bat bien `#alertsBtn .ab-dot` de style.css et `body #alertsBtn .ab-dot`
   de la peau. Mesuré EN PRODUCTION, la pastille rendait pourtant 16 × **6**
   px en `#ef4444` : une QUATRIÈME règle existait, que la lecture des deux
   premières ne pouvait pas faire soupçonner —
   `body #toolbar .og-tb-right #alertsBtn .ab-dot`, soit **2 ids**. À ids
   inégaux, aucun nombre de classes ne rattrape.

   Seul le contrôle qui interroge les RÈGLES (parcourir `document.styleSheets`
   et lister celles dont `el.matches(selectorText)` est vrai) l'a montré ;
   `getComputedStyle` disait « 6px » sans dire par qui. La liste ci-dessous
   couvre les deux habillages, chaque sélecteur pesant son propre poids :
   c'est le plus lourd qui matche qui gouverne. */
#alertsBtn .ab-dot.alc-count,
body #toolbar #alertsBtn .ab-dot.alc-count,
body #toolbar .og-tb-right #alertsBtn .ab-dot.alc-count {
  display: grid;
  place-items: center;
  box-sizing: border-box;

  /* ── LES REMISES À ZÉRO PHYSIQUES D'ABORD, LES LOGIQUES ENSUITE ──────
     `top`/`right` et `inset-block-start`/`inset-inline-end` ne sont PAS deux
     familles indépendantes : en écriture latine ce sont les MÊMES propriétés,
     et c'est la dernière déclarée qui gagne. Je les avais écrites dans
     l'ordre inverse — les `auto`, destinés à effacer le `top:6px; right:7px`
     de style.css, effaçaient en réalité mes propres 3 px.

     Les quatre côtés valant alors `auto`, la pastille est retombée à sa
     POSITION STATIQUE : celle qu'elle aurait dans le flux d'un bouton
     `display:flex; justify-content:center` — donc au MILIEU, exactement sur
     la cloche, qu'elle recouvrait entièrement. Mesuré en production :
     pastille [380, 88, 18, 16], icône [379, 86, 20, 20].

     Et mon contrôle précédent ne pouvait pas le voir : il vérifiait que la
     pastille était DANS le bouton — ce qu'une pastille centrée satisfait
     parfaitement. Contrôler l'écart AU COIN, pas l'appartenance à la boîte. */
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  /* Le bouton de la peau ogilio fait 36 × 36 pour une icône de 20 centrée :
     une gélule de 16 px posée au coin mord le quart haut-droit de la cloche
     et laisse le reste lisible — la place qu'occupait déjà le point de 7 px. */
  inset-block-start: 2px;
  inset-inline-end: 2px;
  inset-inline-start: auto;
  inset-block-end: auto;
  width: auto;
  min-width: 16px;
  height: 16px;
  padding-inline: 3px;
  border: none;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  /* Même teinte que la pastille d'alerte du rail, et pour la même raison :
     le rouge de bougie (`--down`) mesure 3,49:1 sous du blanc de 9,5 px —
     sous AA. Le jeton dédié descend la clarté sans changer la teinte. */
  background: var(--rail-alert-bg, #C0392B);
  box-shadow: none;
}
/* L'onde de la peau part du POINT : autour d'une gélule chiffrée elle
   dessine une ellipse décalée. Elle n'a plus rien à faire remarquer non
   plus — un chiffre se voit tout seul. Même liste de sélecteurs que
   ci-dessus, et pour la même raison. */
#alertsBtn .ab-dot.alc-count::after,
body #toolbar #alertsBtn .ab-dot.alc-count::after,
body #toolbar .og-tb-right #alertsBtn .ab-dot.alc-count::after { content: none; }

/* Le symbole du titre : visible sur l'onglet des règles, qui parle de lui,
   masqué ailleurs. `#alertModal` en tête pour peser plus lourd que le
   `.sm-title em` de la feuille de base. */
#alertModal .sm-title em.alc-hide { display: none; }

/* ── Les onglets ──────────────────────────────────────────────────────── */
.alc-tabs .sm-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.alc-tab-n {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding-inline: 3px;
  border-radius: 99px;
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: #fff;
  background: var(--rail-alert-bg, #C0392B);
}
.alc-tab-n[hidden] { display: none; }

/* ── Le journal ───────────────────────────────────────────────────────── */
.alc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-block: 2px 10px;
}
.alc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-width: 0;
  height: 26px;
  padding-inline: 9px;
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  color: var(--text-3);
  background: none;
  border: 1px solid var(--border);
  border-radius: 99px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.alc-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.alc-chip svg { width: 13px; height: 13px; flex: none; }
.alc-chip em {
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: .65;
}
.alc-chip:hover { color: var(--text); border-color: var(--border-strong); }
.alc-chip.on {
  color: var(--accent-bright, var(--accent));
  border-color: rgba(78, 127, 255, .5);
  background: var(--accent-soft);
}

.alc-day {
  margin-block: 12px 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-3);
}
.alc-day:first-child { margin-block-start: 0; }

.alc-feed { display: grid; gap: 4px; }

.alc-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 8px);
  background: var(--surface-2);
  cursor: default;
}
.alc-item.unread {
  cursor: pointer;
  /* Le non-lu se dit par un LISERÉ DE BORD, pas par un fond coloré : dans
     une liste de vingt lignes, vingt fonds teintés ne distinguent plus
     rien — et le fond est déjà le seul relief de la ligne. */
  border-inline-start: 2px solid var(--accent);
  padding-inline-start: 8px;
}
.alc-item.unread .alc-title { color: var(--text); font-weight: 600; }
.alc-item.muted { opacity: .78; }

.alc-ico {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  color: var(--text-2);
  background: var(--raised);
}
.alc-ico svg { width: 14px; height: 14px; }
/* Une couleur par nature d'alerte : dans une pile, la forme de l'icône
   seule ne distingue pas un stop touché d'un objectif atteint. */
.alc-ico-price   { color: var(--accent-bright, var(--accent)); }
.alc-ico-plan    { color: var(--up, #26A69A); }
.alc-ico-matrix  { color: #E0A800; }
.alc-ico-signal  { color: var(--accent-bright, var(--accent)); }
.alc-ico-news    { color: #C08A2E; }
.alc-ico-risk    { color: var(--down, #EF5350); }
.alc-ico-mir     { color: #B07CE0; }
.alc-ico-scanner { color: var(--up, #26A69A); }
.alc-ico-market  { color: var(--text-3); }

.alc-main { display: grid; gap: 2px; min-width: 0; }
.alc-title {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-2);
  overflow-wrap: anywhere;
}
.alc-body {
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.alc-meta {
  font-size: 10px;
  color: var(--text-3);
  opacity: .8;
}
.alc-time {
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: var(--text-3);
  white-space: nowrap;
  padding-block-start: 2px;
}

.alc-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 26px 12px;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-3);
}
.alc-empty svg { width: 26px; height: 26px; opacity: .45; }

.alc-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-block-start: 14px;
}
.alc-btn {
  height: 32px;
  padding-inline: 12px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md, 8px);
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
}
.alc-btn:hover:not(:disabled) { color: var(--text); background: var(--raised); }
.alc-btn:disabled { opacity: .4; cursor: default; }
.alc-btn-ghost { border-color: var(--border); color: var(--text-3); }

/* ── Les règles : les autres instruments ──────────────────────────────── */
.alc-other .al-cond { font-weight: 600; }

/* ── Les sources ──────────────────────────────────────────────────────── */
/* La peau ogilio écrase la marge haute du PREMIER titre d'un volet
   (`body .sm-panel > .sm-section:first-child { margin-top: 2px }`) — juste
   quand le volet commence la fenêtre. Ici il commence sous l'interrupteur
   général et sa note : sans air au-dessus, « COMMENT PRÉVENIR » se collait à
   la phrase qui la précède et se lisait comme sa suite. Deux classes contre
   une : la règle passe dans les deux habillages. */
#alertModal .sm-panel > .sm-section:first-child { margin-block-start: 20px; }

.alc-row { align-items: center; gap: 10px; }
.alc-row.has-extra { align-items: flex-start; }
.alc-row.has-extra .alc-row-ctl { margin-block-start: 3px; }
.alc-row-main {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  flex: 1;
}
.alc-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.alc-src-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  margin-block-start: 1px;
  border-radius: 7px;
  color: var(--text-2);
  background: var(--raised);
}
.alc-src-ico svg { width: 14px; height: 14px; }
.alc-row-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.alc-row-hint {
  font-size: 10.5px;
  line-height: 1.35;
  color: var(--text-3);
  overflow-wrap: anywhere;
}
.alc-row-extra { display: flex; align-items: center; gap: 6px; margin-block-start: 5px; }
.alc-row-ctl {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
/* Le menu de seuil est libre de sa largeur : il vit sous le libellé, il ne
   dispute plus la place à l'interrupteur. Le plafond n'existe que pour
   l'allemand et l'arabe, dont les intitulés sont les plus longs. */
.alc-mini {
  height: 28px;
  min-width: 0;
  width: auto;
  max-width: 100%;
  padding-inline: 8px 24px;
  font-size: 11px;
}
.alc-quiet { display: inline-flex; align-items: center; gap: 5px; }
.alc-quiet-sep { color: var(--text-3); font-size: 11px; }
/* ── LE RANG DES HEURES CALMES PORTE `sm-row-check` ──────────────────────
   Et cette classe habille TOUS ses `input` en interrupteur à bascule :
   `appearance:none`, 34×20, rayon 99, pastille en `::before`. Mes deux
   champs d'heure sont devenus deux pastilles noires de 34 px, sans chiffres
   — vu à l'écran, jamais signalé par une erreur. La reprise doit peser plus
   lourd que `.sm-row-check input` (0,1,1) : l'identifiant de la fenêtre suffit,
   et il vaut mieux qu'une classe de plus — il dit OÙ la règle s'applique. */
#alertModal .alc-time-input {
  appearance: auto;
  -webkit-appearance: auto;
  width: auto;
  height: 28px;
  padding-inline: 6px;
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 6px);
  cursor: text;
}
#alertModal .alc-time-input::before { content: none; }

.alc-locked { opacity: .55; }
.alc-locked .alc-row-main,
.alc-locked .alc-row-label { cursor: default; }
.alc-lock { color: var(--text-3); display: inline-flex; align-items: center; }
.alc-lock svg { width: 14px; height: 14px; }

/* La note sous l'interrupteur général. Quand il est coupé, elle explique
   ce que le terminal continue de faire — sans quoi une alerte « une seule
   fois » consommée en silence passerait pour un défaut. */
.alc-master-note { margin-block: 6px 2px; }
.alc-note-off { color: var(--warn, #E0A800); }

/* ── LE PLANCHER TACTILE DE 860 px ────────────────────────────────────
   style.css impose sous 860 px `input, select, textarea { font-size: 16px
   !important }` — pas une préférence, une contrainte : en dessous de 16 px
   iOS zoome la page au focus et ne la défait jamais. Il donne 40 px de haut
   aux champs de la fenêtre, mais par `#alertOverlay …`, qui désigne la
   COUCHE et non la fenêtre : mes deux champs vivent dans `#alertModal` et
   passaient donc au travers. Résultat qu'on n'aurait vu que sur un
   téléphone : du 16 px dans une boîte de 28. On rejoint le plancher au lieu
   de le contourner. */
@media (max-width: 860px) {
  #alertModal .alc-time-input,
  .alc-mini { height: 40px; }
  .alc-quiet { gap: 6px; }
}

/* ── Écrans étroits ───────────────────────────────────────────────────
   Sous 560 px la fenêtre occupe la largeur : les seuils passent sous leur
   libellé plutôt que de comprimer les deux. */
@media (max-width: 560px) {
  .alc-row { flex-wrap: wrap; }
  .alc-row-ctl { margin-inline-start: auto; }
  .alc-item { gap: 8px; padding: 7px 8px; }
  .alc-time { font-size: 10px; }

  /* ── LES FILTRES DÉFILENT AU LIEU DE S'EMPILER ──────────────────────
     Mesuré sur un écran de 375 px : neuf puces qui reviennent à la ligne
     occupaient SIX rangs, soit près de 400 px avant la première alerte — le
     journal commençait sous le pli, sur l'écran où on le consulte le plus.
     Une piste qui défile tient sur un rang ; les puces hors cadre restent
     atteignables, et la première alerte revient en haut. */
  .alc-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* PAS de débord par marge négative. Essayé : `margin-inline:-16px` +
       `padding-inline:16px` pour que la piste morde la gouttière de la
       fenêtre. Mesuré au banc — le volet passait de 311 à 343 px de contenu,
       donc 32 px de défilement HORIZONTAL dans une fenêtre qui n'en veut
       aucun. Une piste qui s'arrête à la gouttière coûte un effet de style ;
       un débordement latéral coûte une fenêtre qui glisse sous le doigt. */
  }
  .alc-chips::-webkit-scrollbar { display: none; }
  .alc-chip { flex: none; }
}