/* ============================================================================
   QuietMeta — text cleaner page.

   Ne redefinit rien de styles.css : cette feuille se charge par-dessus et
   n'ajoute que ce qui n'existe pas encore (zone de saisie, marqueurs,
   inventaire des caracteres). Tout le reste — .panel, .btn, .toggle, .switch,
   .gate, .prose — vient de la feuille commune, volontairement.
   ========================================================================= */

:root {
  /* Une couleur par classe. Les variantes sombres sont plus bas : la palette
     commune ne definit pas de contraste suffisant pour du texte minuscule. */
  --mk-inv-fg: var(--amber-600);
  --mk-inv-bg: var(--amber-50);
  --mk-inv-line: color-mix(in srgb, var(--amber-500) 40%, transparent);

  --mk-sp-fg: var(--text-2);
  --mk-sp-bg: var(--surface);
  --mk-sp-line: var(--n-300);

  --mk-bidi-fg: var(--rose-600);
  --mk-bidi-bg: var(--rose-50);
  --mk-bidi-line: color-mix(in srgb, var(--rose-500) 40%, transparent);

  --mk-typo-line: var(--n-400);

  --mk-kept-fg: var(--a-700);
  --mk-kept-bg: var(--accent-soft);
  --mk-kept-line: var(--accent-line);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* En sombre, ce sont les tons 500 qui portent le contraste ; les tons 600
       de la palette claire deviendraient illisibles sur fond fonce. */
    --mk-inv-fg: var(--amber-500);
    --mk-sp-fg: var(--text-2);
    --mk-sp-bg: var(--surface-2);
    --mk-sp-line: var(--n-600);
    --mk-bidi-fg: var(--rose-500);
    --mk-typo-line: var(--n-500);
    --mk-kept-fg: var(--a-300);
  }
}

/* ------------------------------------------------------------------- hero */
.hero-text { padding-bottom: 1rem; text-align: left; }
.hero-text h1 { font-size: clamp(1.9rem, 4.4vw, 2.9rem); }
.hero-text .lede { margin-left: 0; margin-right: 0; max-width: 62ch; }

/* ------------------------------------------------------------------- tool */
.tool { margin-top: 1.5rem; }

.txt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 900px) { .txt-grid { grid-template-columns: 1fr; } }

.txt-col { min-width: 0; }
.col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .45rem;
}
.col-label { font-size: .8rem; font-weight: 620; color: var(--text-2); }
.col-stat { font-family: var(--mono); font-size: .72rem; color: var(--text-3); }

/* La zone de saisie et l'apercu doivent avoir exactement la meme metrique :
   c'est ce qui permet de comparer les deux colonnes d'un coup d'oeil. */
.ta, .viz {
  width: 100%; height: 19rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface-2); color: var(--text);
  font-family: var(--mono); font-size: .85rem; line-height: 1.9;
}
.ta { display: block; resize: vertical; overflow: auto; }
.ta::placeholder { color: var(--text-3); }
.ta:focus-visible, .viz:focus-visible { outline: 2px solid var(--a-500); outline-offset: 1px; border-color: transparent; }

.viz { overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.viz-empty { color: var(--text-3); font-family: var(--font); font-size: .86rem; }

.detail {
  margin-top: .45rem; min-height: 1.3rem;
  font-family: var(--mono); font-size: .75rem; color: var(--text-3);
}
.detail.is-live { color: var(--text); }

/* --------------------------------------------------------------- marqueurs */
/* Un marqueur remplace un caractere qui ne se voit pas. Il porte le point de
   code en hexadecimal plutot qu'une abreviation : c'est verifiable, et deux
   caracteres differents ne peuvent pas se confondre. */
.mk {
  display: inline-block; vertical-align: baseline;
  margin: 0 .08rem; padding: 0 .2rem;
  border: 1px solid transparent; border-radius: 4px;
  font-family: var(--mono); font-size: .7rem; font-weight: 600;
  letter-spacing: .03em; line-height: 1.45; cursor: help;
}
.mk-invisible { background: var(--mk-inv-bg); color: var(--mk-inv-fg); border-color: var(--mk-inv-line); }
.mk-spacing   { background: var(--mk-sp-bg);  color: var(--mk-sp-fg);  border-color: var(--mk-sp-line); }
.mk-bidi      { background: var(--mk-bidi-bg); color: var(--mk-bidi-fg); border-color: var(--mk-bidi-line); }

/* La typographie, elle, se voit : on garde le glyphe et on le souligne. */
.mk-typography {
  background: transparent; color: inherit; border: none; border-radius: 0;
  font-size: inherit; font-weight: inherit; margin: 0; padding: 0 .05rem;
  border-bottom: 2px dotted var(--mk-typo-line);
}

/* Conserve volontairement : trait discontinu, pour dire « reconnu, laisse en
   place » sans le confondre avec ce qui va partir. */
.mk-kept {
  background: var(--mk-kept-bg); color: var(--mk-kept-fg);
  border-color: var(--mk-kept-line); border-style: dashed;
}

.mk.is-cued { outline: 2px solid var(--a-500); outline-offset: 1px; }

.legend {
  list-style: none; margin: .9rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .35rem 1.1rem;
  font-size: .78rem; color: var(--text-3);
}
.legend li { display: inline-flex; align-items: center; gap: .35rem; }

/* ------------------------------------------------------------ inspection */
.summary {
  margin-top: 1.4rem; font-size: 1.02rem; font-weight: 620; color: var(--text);
}

.findings { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .25rem; }
.finding {
  width: 100%; display: grid; align-items: center; gap: .3rem .9rem;
  grid-template-columns: 5.5rem minmax(0, 1fr) 8rem 3.5rem 11rem;
  padding: .4rem .55rem; border: 1px solid transparent; border-radius: var(--r-sm);
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.finding:hover { background: var(--surface-2); border-color: var(--line-soft); }
.finding:focus-visible { outline: 2px solid var(--a-500); outline-offset: 1px; }
.finding code { font-family: var(--mono); font-size: .78rem; color: var(--text); }
.fd-name { font-size: .82rem; color: var(--text-2); overflow-wrap: anywhere; }
.fd-class { font-family: var(--mono); font-size: .72rem; color: var(--text-3); }
.fd-count { font-family: var(--mono); font-size: .82rem; font-weight: 700; color: var(--text); text-align: right; }
.fd-where { font-family: var(--mono); font-size: .72rem; color: var(--text-3); }
@media (max-width: 760px) {
  .finding { grid-template-columns: 5.5rem 1fr 3.5rem; }
  .fd-class, .fd-where { display: none; }
}

/* Un lisere de la couleur de la classe : la liste et l'apercu se repondent. */
.fd-invisible code { color: var(--mk-inv-fg); }
.fd-bidi code { color: var(--mk-bidi-fg); }

/* Ce que « position » veut dire exactement. Une ligne discrete, juste sous la
   liste : le lecteur y arrive au moment ou il se pose la question. */
.pos-note {
  margin-top: .5rem; font-size: .76rem; color: var(--text-3); max-width: 72ch;
}

/* Les notes du moteur : elles disent ce qu'un compte ne peut pas dire. */
.notes { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .4rem; }
.notes li {
  padding-left: .8rem; border-left: 2px solid var(--accent-line);
  font-size: .83rem; color: var(--text-2); max-width: 78ch;
}

/* Ce que le moteur a reconnu et decide de garder. */
.kept-block {
  margin-top: 1rem; padding: .9rem 1.05rem;
  border: 1px dashed var(--accent-line); border-radius: var(--r-md);
  background: var(--accent-soft);
}
.kept-head { font-size: .78rem; font-weight: 680; letter-spacing: .05em;
             text-transform: uppercase; color: var(--accent); }
.kept-list { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: .2rem; }
.kept {
  display: grid; align-items: center; gap: .3rem .9rem;
  grid-template-columns: 5.5rem minmax(0, 1fr) 3.5rem 16rem;
}
.kept code { font-family: var(--mono); font-size: .78rem; color: var(--accent); }
@media (max-width: 760px) {
  .kept { grid-template-columns: 5.5rem 1fr 3.5rem; }
  .kept .fd-where { grid-column: 1 / -1; }
}

/* L'interrupteur qui retire quand meme ce qui est conserve. Il vit DANS
   l'encadre, sous la liste : on ne propose pas de supprimer des caracteres sans
   avoir montre lesquels et pourquoi ils sont la. */
.kept-toggle {
  margin-top: .75rem; padding: .7rem 0 0;
  border-bottom: none; border-top: 1px dashed var(--accent-line);
}
/* .toggle impose display:grid, qui l'emporte sur la regle [hidden] du
   navigateur : sans cette ligne, un interrupteur cache resterait visible. */
.toggle[hidden] { display: none; }

/* -------------------------------------------------------------- switches */
.tg-count {
  display: inline-block; margin-left: .1rem; padding: .05rem .35rem;
  border-radius: 99px; background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent); font-family: var(--mono); font-size: .68rem; font-weight: 600;
  vertical-align: .05em;
}
.tg-count.is-zero { background: var(--surface-2); border-color: var(--line); color: var(--text-3); }
/* Attenue, jamais desactive : une classe absente de ce texte-ci peut tres bien
   apparaitre dans le suivant, l'interrupteur doit rester manipulable. */
.toggle.tg-empty .toggle-text strong { color: var(--text-2); }

#typographyGate { margin-top: 1rem; }

/* --------------------------------------------------------------- actions */
.txt-actions {
  margin-top: 1.4rem; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
.txt-actions .spacer { flex: 1 1 1rem; }
/* .btn impose display:inline-flex, qui l'emporte sur la regle [hidden] du
   navigateur : sans cette ligne, le bouton d'annulation resterait visible. */
.btn[hidden] { display: none; }

.result { margin-top: .9rem; min-height: 1.4rem; font-size: .9rem; color: var(--text-2); }
.result.is-ok { color: var(--text); }
.result.is-warn { color: var(--rose-500); }

.privacy-line {
  margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line-soft);
  display: flex; gap: .6rem; align-items: flex-start;
  font-size: .84rem; color: var(--text-2); max-width: 78ch;
}
.privacy-line svg { width: 17px; height: 17px; flex: none; margin-top: .18rem; color: var(--accent); }
.privacy-line strong { color: var(--text); }

/* ---------------------------------------------------------------- honnetete */
/* L'avertissement doit se lire, pas se deviner : encadre, pleine taille, place
   juste sous l'outil. Ce n'est pas une mention legale en bas de page. */
.honest {
  margin-top: 1.6rem; padding: 1.3rem 1.5rem;
  border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--r-md); background: var(--surface);
}
.honest h2 { font-size: 1.02rem; margin-bottom: .6rem; }
.honest p { color: var(--text-2); font-size: .89rem; max-width: 76ch; }
.honest p + p { margin-top: .7rem; }

/* ----------------------------------------------------------------- contenu */
.next-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }

/* Reduction des animations.

   ATTENTION, ce que cette regle NE FAIT PAS : elle ne coupe pas le defilement
   vers un marqueur. Celui-la est demande en JavaScript avec
   `scrollIntoView({behavior:'smooth'})`, et un `behavior` explicite l'emporte
   sur `scroll-behavior`. La preference est donc lue en JavaScript, dans
   `prefersReducedMotion()` de text.js — c'est la que le mouvement se coupe
   vraiment. La regle ci-dessous ne couvre que les defilements declenches par le
   navigateur lui-meme (ancre, restauration de position) ; elle reste utile, mais
   elle ne suffit a rien toute seule.

   Les transitions des interrupteurs viennent de styles.css et sont breves ; le
   mouvement notable de cette page est bien ce defilement-la. */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .switch .track, .switch .thumb { transition: none; }
}

/* ------------------------------------------------------------------ aside
   Le repli « pour les curieux ».

   Il porte une explication que Philippe voulait accessible sans alourdir la
   page : replie par defaut, il n'occupe qu'une ligne tant qu'on ne le demande
   pas. Un <details> natif plutot qu'un accordeon en JavaScript — le navigateur
   gere deja le clavier, le focus et l'etat ouvert/ferme, et la page continue de
   fonctionner si le script ne se charge pas. */
.aside {
  margin: 2rem 0 0;
  padding: 0 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2, transparent);
}

.aside > summary {
  padding: .95rem 0;
  margin: 0 0 0 -.2rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  list-style-position: outside;
}

.aside > summary:focus-visible {
  outline: 2px solid var(--a-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.aside[open] > summary { border-bottom: 1px solid var(--line); }

.aside > p {
  margin: .95rem 0;
  color: var(--text-2);
}

.aside > p:last-child { margin-bottom: 1.1rem; }