/* ===========================================================================
   r2debug — design system. Dark dev-tool UI, Linear-flavoured, on top of Pico.

   Surfaces/type/weights are Linear's real production values (their shipped CSS).
   Every text/background pair below was COMPUTED (WCAG 2.1 relative luminance),
   not eyeballed; the ratio in each comment is the measured one.

   Replaces: 47 hardcoded hexes, 14 font sizes, 7 radii, 4 pill systems,
   5 button styles, 53 inline styles. Colour lives HERE and nowhere else.
   ======================================================================== */
:root {
  /* --- Pico overrides: retuning Pico's own vars means classless elements
         (h1-h6, table, a, input, article) inherit the system for free. ----- */
  --pico-font-size: 15px;
  --pico-background-color: var(--bg-0);
  --pico-card-background-color: var(--bg-1);
  --pico-card-border-color: var(--bd);
  --pico-color: var(--tx-1);
  --pico-muted-color: var(--tx-3);
  --pico-muted-border-color: var(--bd);
  --pico-primary: var(--ac-text);
  --pico-primary-background: var(--ac);
  --pico-primary-hover-background: var(--ac-hover);
  --pico-code-background-color: var(--bg-sunken);
  --pico-border-radius: var(--r);

  /* --- SURFACES: a tight 4-step near-black ramp (Linear).
         Steps are ~2-3% lightness apart: distinguishable, never loud.
         Pure #000 canvas is the classic amateur tell; #08090a is cooler and
         more forgiving. Elevation = surface step + hairline, NEVER a shadow. */
  --bg-0: #08090a;   /* page canvas   */
  --bg-1: #0f1011;   /* card / panel  */
  --bg-2: #141516;   /* raised, hover */
  --bg-3: #191a1b;   /* highest       */
  --bg-sunken: #050607;  /* code wells */

  /* --- BORDERS: white at low alpha, so they composite correctly over ANY
         surface level. A hex grey would only look right on one of them. ---- */
  --bd:        rgba(255,255,255,.06);
  --bd-strong: rgba(255,255,255,.10);
  --bd-loud:   #6b7785;   /* 3.78:1 vs card — only when a border ALONE carries
                             meaning (WCAG 1.4.11 non-text needs 3:1) */

  /* --- TEXT: 4 greys carry the whole hierarchy, which is why weights can stay
         low (400/510/590). Never pure white. Measured on --bg-1: ----------- */
  --tx-1: #f7f8f8;  /* 17.90 — primary   */
  --tx-2: #d0d6e0;  /* 12.79 — secondary */
  --tx-3: #a3adbf;  /*  8.42 — muted     */
  --tx-4: #8791a3;  /*  5.99 — faint     */
  --tx-on-fill: #ffffff;  /* only over --*-solid fills, each verified >=4.5 */

  /* --- ACCENT: ONE colour. It appears on the primary button, the active nav
         item, the focus ring, and selection. Nowhere else. ----------------- */
  --ac: #5e6ad2;         /* solid fill; white text = 5.31:1 */
  --ac-hover: #4f5ac0;
  --ac-text: #8b95f5;    /* accent AS TEXT on dark: 6.61:1 on bg-1 */
  --ac-tint: #18182f;    /* accent flattened onto canvas, not opacity */

  /* --- SEMANTIC TEXT — measured on --bg-1 (all pass AA 4.5:1) ------------ */
  --success: #4ade80;  /* 11.30 */
  --warning: #fbbf24;  /* 11.79 */
  --danger:  #f87171;  /*  7.13 */
  --info:    #38bdf8;  /*  9.19 */
  --accent:  #c4b5fd;  /* 10.66 — purple = MR */
  --neutral: #a3adbf;  /*  8.42 */

  /* --- SEMANTIC TINTS for pills: the hue flattened at 18% over --bg-1.
         Precomputed (not alpha) so a pill reads the same on any surface.
         Worst measured text-on-tint pair: danger at 5.77:1. -------------- */
  --success-tint: #12311f;
  --warning-tint: #382a10;
  --danger-tint:  #37191a;
  --info-tint:    #0f2b38;
  --accent-tint:  #251e3a;
  --neutral-tint: #202225;

  /* --- SOLID fills (buttons only) --------------------------------------- */
  --danger-solid: #b02a2a;        /* white text 5.55:1 */
  --danger-solid-hover: #942424;

  /* --- TYPE: small, tight, low weight-contrast. Negative tracking is what
         makes Inter look designed rather than default. --------------------- */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  --fs-display: 1.6rem;    /* 24px — KPI value        */
  --fs-title:   1.15rem;   /* 17px — page title       */
  --fs-lg:      1rem;      /* 15px — section title    */
  --fs-body:    .875rem;   /* 13px — tables, prose    */
  --fs-sm:      .8125rem;  /* 12px — secondary, meta  */
  --fs-xs:      .75rem;    /* 11px — pills, tags      */
  --ls-body:  -.011em;
  --ls-title: -.022em;
  --fw:    400;
  --fw-md: 510;   /* Linear's non-standard weights: hierarchy comes from */
  --fw-sb: 590;   /* colour, not from jumping 400 -> 700.                */

  /* --- GEOMETRY: one radius, small, everywhere. Mixed radii is the loudest
         template tell. 4px spacing grid — never 5, 7, 15, 18. ------------- */
  --r: 6px;
  --r-full: 9999px;
  /* Shadows are for OVERLAYS only (popovers/dialogs). Inline elevation
     is surface step + hairline — a shadow on a card is a template tell. */
  --shadow-pop: 0 8px 24px rgba(0,0,0,.35);
  --bw: 1px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px;
  --row-h: 36px;

  /* --- FOCUS: outline (not box-shadow), and the offset is LOAD-BEARING —
         it keeps the ring on the surface (>=3:1) instead of on a button fill
         where it would only reach 2.69:1. --------------------------------- */
  --focus: #79c0ff;
  --focus-w: 2px;
  --focus-off: 2px;
}

/* ---- Base ------------------------------------------------------------- */
body {
  font-family: var(--font);
  font-weight: var(--fw-md);
  letter-spacing: var(--ls-body);
}
h1, h2, h3, h4, h5, h6 { letter-spacing: var(--ls-title); font-weight: var(--fw-sb); }

/* ONE focus language across the app (there was none at all before).
   Pico paints a box-shadow glow; suppress it so we don't get two rings. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-off);
}
:where(a, button, input, select, textarea, summary):focus { box-shadow: none; }

/* ---- Buttons: one system, 4 variants, 2 sizes -------------------------- */
/* 32px height clears WCAG 2.5.8 (Target Size Minimum, AA, 24x24). */
.btn {
  --btn-h: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  min-height: var(--btn-h); min-width: var(--btn-h);
  padding: 0 var(--s-3);
  margin: 0;
  font-family: inherit;
  font-size: var(--fs-sm); font-weight: var(--fw-sb);
  letter-spacing: var(--ls-body);
  border: var(--bw) solid transparent;
  border-radius: var(--r);
  cursor: pointer; white-space: nowrap;
  /* Pico's `button[type=submit]{width:100%}` is (0,0,1,1) — MORE specific than a
     class, so a plain `.btn{width:auto}` loses no matter the load order. Match its
     specificity to win. This is why the action buttons rendered as full-width bars. */
  width: auto;
  transition: background-color .12s ease, border-color .12s ease;
}
button.btn[type=submit], .btn[type=submit] { width: auto; }
.btn--sm { --btn-h: 26px; padding: 0 var(--s-2); font-size: var(--fs-xs); }
.btn--primary { background: var(--ac); color: var(--tx-on-fill); border-color: var(--ac); }
.btn--primary:hover:not(:disabled) { background: var(--ac-hover); border-color: var(--ac-hover); }
.btn--danger { background: var(--danger-solid); color: var(--tx-on-fill); border-color: var(--danger-solid); }
.btn--danger:hover:not(:disabled) { background: var(--danger-solid-hover); border-color: var(--danger-solid-hover); }
.btn--secondary { background: transparent; color: var(--tx-1); border-color: var(--bd-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--bg-2); border-color: var(--bd-loud); }
.btn--ghost { background: transparent; color: var(--tx-3); border-color: transparent; }
.btn--ghost:hover:not(:disabled) { background: var(--bg-2); color: var(--tx-1); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---- Pills: ONE system (replaced .badge/.statusbadge/.cls/.seen) -------- */
/* Indicateurs urgence / confiance : petits, discrets, sous le titre de l'erreur. La
   FORME (dans le texte : △ urgence, ○ confiance) porte le sens sans la couleur (WCAG
   1.4.1) ; la couleur ne fait que renforcer. Deux familles distinctes pour ne pas
   confondre les axes. */
.ind { display:inline-block; margin-left:.4rem; font-size:var(--fs-xs);
       white-space:nowrap; }
.ind--u-urgent     { color:var(--danger); font-weight:var(--fw-sb); }
.ind--u-surveiller { color:var(--warning); }
.ind--u-calme      { color:var(--pico-muted-color); }
.ind--c-haute      { color:var(--success); }
.ind--c-moyenne    { color:var(--pico-muted-color); }
.ind--c-faible     { color:var(--pico-muted-color); opacity:.75; }

/* Icône d'aide « ? » cerclée, dans un en-tête de colonne : explique un concept
   (ce qu'est un déclencheur) sans occuper une ligne. Le tooltip natif (title) porte
   le texte ; l'icône signale qu'il y a de l'aide à survoler. */
.qmark {
  display:inline-flex; align-items:center; justify-content:center;
  width:14px; height:14px; margin-left:.35rem; vertical-align:middle;
  border:1px solid currentColor; border-radius:var(--r-full);
  font-size:10px; line-height:1; font-weight:var(--fw-sb);
  color:var(--pico-muted-color); cursor:help; opacity:.7;
}
.qmark:hover { opacity:1; }
.pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: 2px var(--s-2);
  font-size: var(--fs-xs); font-weight: var(--fw-sb);
  line-height: 1.5;
  border-radius: var(--r-full);
  white-space: nowrap;
  background: var(--neutral-tint); color: var(--neutral);
}
.pill--success { background: var(--success-tint); color: var(--success); }
.pill--warning { background: var(--warning-tint); color: var(--warning); }
.pill--danger  { background: var(--danger-tint);  color: var(--danger); }
.pill--info    { background: var(--info-tint);    color: var(--info); }
.pill--accent  { background: var(--accent-tint);  color: var(--accent); }
.pill--neutral { background: var(--neutral-tint); color: var(--neutral); }

/* ---- Tables: tight rows, hairline seams, no zebra ---------------------- */
.table { font-size: var(--fs-body); width: 100%; }
.table th {
  font-size: var(--fs-xs); font-weight: var(--fw-sb); text-transform: uppercase;
  letter-spacing: .04em; color: var(--tx-4);
  padding: var(--s-2) var(--s-3); border-bottom: var(--bw) solid var(--bd);
}
.table td { padding: var(--s-2) var(--s-3); border-bottom: var(--bw) solid var(--bd); }
.table tbody tr:hover { background: var(--bg-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Cards & KPI tiles ------------------------------------------------- */
.card { background: var(--bg-1); border: var(--bw) solid var(--bd); border-radius: var(--r); }

body { padding: 0 1.5rem 3rem; max-width: 1200px; margin: auto; }
nav.top { display:flex; gap:1rem; align-items:center; border-bottom:1px solid var(--pico-muted-border-color); }
nav.top a { padding:.8rem .2rem; text-decoration:none; border-bottom:2px solid transparent; }
nav.top a.active { border-bottom-color: var(--pico-primary); font-weight:600; }
.tiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin:1rem 0; }
.tile { background:var(--pico-card-background-color); border:1px solid var(--pico-muted-border-color); border-radius:var(--r); padding:.9rem 1rem; }
.tile .v { font-size:var(--fs-display); font-weight:700; line-height:1.1; }
.tile .l { font-size:var(--fs-sm); color:var(--pico-muted-color); text-transform:uppercase; letter-spacing:.03em; }
/* Quota de MR ouvertes par projet. Même grammaire que .tile (grand chiffre + libellé
   discret) : c'est la même nature d'info, elle ne mérite pas un langage visuel de plus.
   Un sous-cap plein se lit à l'ambre — c'est le seul cas qui change quelque chose pour
   le lecteur (les fix de CE projet attendent). */
.caps { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
        gap:.8rem; margin:.5rem 0 1rem; }
.cap { background:var(--pico-card-background-color); border:var(--bw) solid var(--bd);
       border-radius:var(--r); padding:.7rem .9rem; }
.cap--full { border-color:var(--warning); background:var(--warning-tint); }
.cap-n { display:block; font-size:var(--fs-display); font-weight:var(--fw-sb);
         line-height:1.1; font-variant-numeric:tabular-nums; }
.cap--full .cap-n { color:var(--warning); }
.cap-max { font-size:var(--fs-body); font-weight:400; color:var(--tx-2); }
.cap-l { font-size:var(--fs-sm); color:var(--pico-muted-color); }
.cap-tag { display:block; margin-top:.2rem; font-size:var(--fs-xs); color:var(--warning); }
/* La raison du blocage : c'est LA phrase qu'on cherchait quand « le drain ne relance
   rien » — elle passe avant les chiffres, pas après. */
.cap-why { background:var(--warning-tint); border:var(--bw) solid var(--warning);
           border-radius:var(--r); padding:.6rem .8rem; margin:.5rem 0;
           font-size:var(--fs-sm); color:var(--tx-1); }
.funnel { display:flex; flex-direction:column; gap:.35rem; margin:.5rem 0 1.5rem; }
.funnel .row { display:flex; align-items:center; gap:.6rem; font-size:var(--fs-body); }
.funnel .bar { height:20px; border-radius:var(--r); background:var(--pico-primary); min-width:2px; }
.funnel .row span.lbl { width:130px; color:var(--pico-muted-color); }
table.runs { font-size:var(--fs-body); } table.runs td { padding:.4rem .5rem; vertical-align:middle; }
.cost { font-variant-numeric:tabular-nums; text-align:right; }
.muted { color:var(--pico-muted-color); }
.chips a { display:inline-block; padding:.2rem .6rem; margin:.15rem; border-radius:var(--r-full); border:1px solid var(--pico-muted-border-color); text-decoration:none; font-size:var(--fs-sm); }
.chips a.on { background:var(--pico-primary); color:var(--tx-on-fill); border-color:var(--pico-primary); }
/* ---- Documentation ---------------------------------------------------
   Readability follows WCAG 1.4.8: line length <= 80 chars (70ch renders ~78),
   line-height >= 1.5, paragraph spacing >= 1.5x line-height, never justified.
   No <details> anywhere findable: Ctrl+F does not search inside a closed one
   on Firefox/Safari. */
.doc-layout { display:grid; grid-template-columns:minmax(230px,250px) minmax(0,1fr); gap:var(--s-6); align-items:start; }
/* Pico ships `nav,nav ul{display:flex}` for top bars — it turns this rail into
   columns. Force the vertical list back. */
nav.doc-toc, nav.doc-toc ul { display:block; }
.doc-toc { position:sticky; top:var(--s-4); align-self:start; max-height:calc(100vh - 2rem); overflow-y:auto; font-size:var(--fs-sm); border-right:var(--bw) solid var(--bd); padding-right:var(--s-3); }
.doc-toc-title { text-transform:uppercase; letter-spacing:.05em; font-size:var(--fs-xs); font-weight:700; color:var(--tx-3); margin-bottom:var(--s-2); white-space:nowrap; }
.doc-toc ul { list-style:none; padding:0; margin:0; }
.doc-toc ul ul { padding-left:var(--s-3); }
.doc-toc li { margin:0; display:block; }
.doc-toc a { display:block; padding:var(--s-1) var(--s-2); border-radius:var(--r); text-decoration:none; color:var(--tx-3); border-left:2px solid transparent; line-height:1.35; }
.doc-toc a:hover { background:var(--bg-2); color:var(--tx-1); }
.doc-toc a.on { color:var(--ac-text); border-left-color:var(--ac-text); background:var(--bg-2); font-weight:600; }
.doc-body { max-width:70ch; line-height:1.6; text-align:left; }
.doc-body p { margin-bottom:1.5em; }            /* >= 1.5x line-height (WCAG AAA) */
.md h2 { margin-top:var(--s-6); padding-top:var(--s-4); border-top:var(--bw) solid var(--bd); scroll-margin-top:var(--s-4); }
.md h3 { margin-top:var(--s-5); scroll-margin-top:var(--s-4); }
.md h2 .headerlink, .md h3 .headerlink { opacity:0; margin-left:var(--s-2); text-decoration:none; color:var(--tx-3); font-weight:400; }
.md h2:hover .headerlink, .md h3:hover .headerlink { opacity:1; }
.md pre { background:var(--bg-sunken); padding:var(--s-3); border-radius:var(--r); overflow:auto; }
.md code { font-size:var(--fs-body); } .md table { font-size:var(--fs-body); }
/* Tables and code may exceed the reading measure — let them scroll, not the page. */
.md table { display:block; overflow-x:auto; max-width:100%; }
.md blockquote { border-left:3px solid var(--ac-text); background:var(--bg-2); padding:var(--s-2) var(--s-3); margin:var(--s-4) 0; }
.md .admonition { border:var(--bw) solid var(--bd); border-left:4px solid var(--ac-text); border-radius:var(--r); padding:var(--s-3) var(--s-4); margin:var(--s-4) 0; background:var(--bg-2); }
.md .admonition-title { font-weight:700; margin:0 0 var(--s-1); }
.md .admonition.warning, .md .admonition.attention { border-left-color:var(--warning); }
.md .admonition.danger, .md .admonition.error { border-left-color:var(--danger); }
.md .admonition.tip, .md .admonition.note { border-left-color:var(--info); }
.back-top { position:fixed; right:var(--s-4); bottom:var(--s-4); display:none; background:var(--bg-1); border:var(--bw) solid var(--bd); border-radius:var(--r); padding:var(--s-2) var(--s-3); font-size:var(--fs-sm); text-decoration:none; }
.back-top.show { display:block; }
@media (max-width:900px) { .doc-layout { grid-template-columns:1fr; } .doc-toc { position:static; max-height:none; border-right:none; border-bottom:1px solid var(--pico-muted-border-color); padding-bottom:.8rem; } }
table.runs tbody tr.clickable { cursor:pointer; } table.runs tbody tr.clickable:hover { background:var(--pico-card-background-color); }
.outcome { font-size:var(--fs-lg); margin:.2rem 0 .8rem; padding:.6rem .8rem; background:var(--pico-card-background-color); border:1px solid var(--pico-muted-border-color); border-radius:var(--r); }
.blockbox { border:1px solid var(--bd-loud); border-left:4px solid var(--tx-3); background:var(--bg-2); border-radius:var(--r); padding:.8rem 1rem; margin:1rem 0; }
/* Two secondary TOOLS, not banners: full-width bordered strips read as navigation.
   Side by side, compact, and only the open one expands. */
.tools { display:flex; gap:var(--s-2); flex-wrap:wrap; margin:var(--s-4) 0; }
.tools > details { flex:1 1 260px; border:var(--bw) solid var(--bd-strong);
                   border-radius:var(--r); background:var(--bg-2);
                   padding:var(--s-2) var(--s-3); }
.tools > details:hover { border-color:var(--bd-loud); background:var(--bg-3); }
.tools > details[open] { flex-basis:100%; border-color:var(--bd-strong); }
.tools > details > summary { cursor:pointer; font-size:var(--fs-sm);
                             color:var(--tx-1); font-weight:var(--fw-sb);
                             list-style:none; display:flex; align-items:center;
                             gap:var(--s-2); }
.tools > details > summary::-webkit-details-marker { display:none; }
.tools > details > summary::marker { content:""; }
.tools > details > summary::after { width:.8rem; height:.8rem; background-size:.8rem auto;
                                    opacity:.4; margin-inline-start:auto; float:none; }
.tools > details[open] > summary::after { transform:rotate(0deg); }
.hintbox[open] { border-color:var(--accent) !important; background:var(--accent-tint); }
.hintbox textarea { font-size:var(--fs-body); margin:var(--s-2) 0; }
.blockform { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin:.5rem 0 0; }
.blockform select, .blockform input { width:auto; margin:0; padding:.3rem .5rem; font-size:var(--fs-sm); }
.blockform input { flex:1; min-width:180px; }
pre.diff span { display:block; white-space:pre-wrap; word-break:break-word; }
pre.diff .add { color:var(--success); } pre.diff .del { color:var(--danger); }
pre.diff .hunk { color:var(--info); } pre.diff .meta { color:var(--bd-loud); }
.whybox { border:1px solid var(--warning); background:var(--warning-tint); border-left:4px solid var(--warning); border-radius:var(--r); padding:1rem 1.1rem; margin:1rem 0; }
.whybox h4 { margin:0 0 .5rem; color:var(--warning); font-size:var(--fs-lg); }
.whybox .why { font-size:var(--fs-lg); margin:.3rem 0 .7rem; }
.whybox .next { background:var(--success-tint); color:var(--success); border-radius:var(--r); padding:.5rem .7rem; font-size:var(--fs-body); }
.facts { display:flex; flex-wrap:wrap; gap:.5rem; margin:.6rem 0; }
.fact { background:var(--pico-card-background-color); border:1px solid var(--pico-muted-border-color); border-radius:var(--r); padding:.35rem .7rem; font-size:var(--fs-sm); }
.fact b { color:var(--pico-color); } .fact .k { color:var(--pico-muted-color); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.03em; display:block; }
.steps { list-style:none; padding:0; margin:.5rem 0; }
.steps li { display:flex; gap:.7rem; padding:.45rem .2rem; border-bottom:1px solid var(--pico-muted-border-color); font-size:var(--fs-body); }
.steps .ph { width:110px; flex-shrink:0; font-weight:600; color:var(--pico-muted-color); }
.steps .ic { width:1.3rem; flex-shrink:0; }
/* needs_human triage queue — dense card, one row per problem */
.queue { border:var(--bw) solid var(--bd); border-radius:var(--r); background:var(--bg-1);
         padding:0 var(--s-3) var(--s-2); margin:var(--s-2) 0 var(--s-5); }
/* The whole queue folds: it can be 32 problems tall and push the table off-screen. */
.queue > .hd { display:flex; align-items:baseline; gap:var(--s-2);
               padding:var(--s-3) var(--s-1) var(--s-2); cursor:pointer;
               list-style:none; }
.queue > .hd::-webkit-details-marker { display:none; }
.queue > .hd::marker { content:""; }
.queue > .hd::after { width:.8rem; height:.8rem; background-size:.8rem auto;
                      opacity:.4; margin-inline-start:auto; float:none; }
.queue[open] > .hd::after { transform:rotate(0deg); }
.queue > .hd h5 { margin:0; font-size:var(--fs-lg); }
.queue > .hd .n { color:var(--warning); font-weight:700; }
.queue .grp { display:flex; align-items:center; gap:var(--s-2);
              margin:var(--s-3) 0 var(--s-1); cursor:pointer; list-style:none; }
/* Pico's chevron is welcome here — it signals foldability — but it floats right and
   needs taming; the duplicate ::marker has to go either way. */
.queue .grp::-webkit-details-marker { display:none; }
/* « tout bloquer » : poussé à droite, discret jusqu'au survol du groupe. C'est une
   action de nettoyage, pas l'action principale de la ligne — elle ne doit pas rivaliser
   avec la lecture des problèmes. */
.queue .grp-block { margin:0 0 0 auto; display:inline; }
.queue .grp-block .btn { opacity:.45; transition:opacity .12s; }
.queue .grp-fold:hover .grp-block .btn,
.queue .grp-block .btn:focus-visible { opacity:1; }
/* min-height 24px, pas `min-height:0` : le padding seul donnait une cible de 20px, sous
   le minimum WCAG 2.5.8 (24×24). Le bouton reste visuellement petit, la zone cliquable
   non. */
.btn--xs { padding:2px var(--s-2); font-size:var(--fs-xs); min-height:24px; }
.queue .grp::marker { content:""; }
.queue .grp::after { width:.8rem; height:.8rem; background-size:.8rem auto;
                     opacity:.5; margin-inline-start:0; float:none; }
.grp-fold[open] > .grp::after { transform:rotate(0deg); }
.grp-fold { border-bottom:var(--bw) solid var(--bd); }
.grp-fold:last-child { border-bottom:none; }
.queue .cls { display:inline-block; padding:2px var(--s-2); border-radius:var(--r-full);
              font-size:var(--fs-xs); font-weight:var(--fw-sb);
              background:var(--warning-tint); color:var(--warning); }
.queue .cnt { color:var(--tx-3); font-size:var(--fs-xs); }
.qrow { display:grid; grid-template-columns:88px 1fr auto; align-items:center; gap:.7rem; padding:.4rem .3rem; border-radius:var(--r); cursor:pointer; text-decoration:none; color:inherit; border-bottom:1px solid var(--pico-muted-border-color); }
/* « + N restants » : discret, il révèle le reste sans peser comme une ligne à traiter. */
.qrow-more { display:block; padding:.45rem .3rem; font-size:var(--fs-sm); color:var(--pico-muted-color); text-decoration:none; }
.qrow-more:hover { color:var(--accent); }
.qrow:last-child { border-bottom:none; } .qrow:hover { background:var(--bg-2); }
.qrow .proj { font-size:var(--fs-xs); color:var(--pico-muted-color); text-transform:uppercase; letter-spacing:.02em; }
.qrow .main { min-width:0; }
.qrow .ttl { font-size:var(--fs-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qrow .ttl .id { color:var(--pico-muted-color); font-variant-numeric:tabular-nums; margin-right:.3rem; }
.qrow .sub { font-size:var(--fs-xs); color:var(--pico-muted-color); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qrow .seen { justify-self:end; font-size:var(--fs-xs); color:var(--warning); background:var(--warning-tint); border:1px solid var(--warning); border-radius:var(--r-full); padding:.05rem .5rem; white-space:nowrap; }

/* ---- Utilities: replace the repeated inline styles ------------------- */
.u-sm    { font-size: var(--fs-sm); }
.u-xs    { font-size: var(--fs-xs); }
.u-right { text-align: right; }
.u-flush { margin: 0; }
.u-gap   { margin: var(--s-2) 0; }
.u-push  { margin-left: auto; }      /* replaces <span style="flex:1"> spacers */
.codeblock { background: var(--bg-sunken); padding: var(--s-3);
             border-radius: var(--r); overflow: auto;
             font-size: var(--fs-sm); }

/* ---- The verdict banner: answers 'is anything waiting for me?' -------- */
.verdict { display:flex; align-items:center; gap: var(--s-3);
           padding: var(--s-3) var(--s-4); border-radius: var(--r);
           margin: var(--s-3) 0 var(--s-4); text-decoration:none;
           border: var(--bw) solid transparent; }
.verdict--wait { background: var(--warning-tint); border-color: var(--warning);
                 color: var(--warning); }
.verdict--wait:hover { background: var(--bg-2); }
.verdict--ok { background: var(--success-tint); color: var(--success); }
.verdict-n { font-size: var(--fs-display); font-weight: var(--fw-sb);
             font-variant-numeric: tabular-nums; line-height:1; }
.verdict-t { flex:1; font-size: var(--fs-body); color: var(--tx-1); }
.verdict-go { font-size: var(--fs-sm); font-weight: var(--fw-sb); }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.bar--accent  { background: var(--accent); }
.bar--warning { background: var(--warning); }
.bar--success { background: var(--success); }
.bar--danger  { background: var(--danger); }
/* La dernière ligne de l'entonnoir est un INSTANTANÉ, pas un cumul comme celles du
   dessus. Sans marque, la colonne se lit comme une progression : « 32 créées → 1 en
   review ?? ». Le trait sépare les deux natures sans sortir le chiffre de la vue. */
.funnel .row--now { margin-top: var(--s-2); padding-top: var(--s-2);
                    border-top: var(--bw) dashed var(--bd); }
.funnel .now { font-size: var(--fs-xs); color: var(--warning); margin-left: .3rem; }
.u-danger { color: var(--danger); }

/* ---- User menu: an avatar, not a banner ------------------------------- */
.usermenu { margin-left: auto; position: relative; }
/* Pico paints its own chevron via `details summary::after` (float:right, a
   background-image) — it was rendering UNDER the avatar. Kill all three marker
   mechanisms: Pico's ::after, the WebKit marker, and the standard ::marker. */
.usermenu > summary { list-style: none; cursor: pointer; padding: var(--s-1);
                      display: inline-flex; align-items: center; }
.usermenu > summary::after { display: none; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary::marker { content: ""; }
.avatar { display: grid; place-items: center; width: 26px; height: 26px;
          border-radius: var(--r-full); background: var(--bg-2);
          border: var(--bw) solid var(--bd-strong);
          font-size: var(--fs-xs); font-weight: var(--fw-sb); color: var(--tx-2); }
.usermenu[open] > summary .avatar { border-color: var(--ac-text); color: var(--tx-1); }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + var(--s-1));
                background: var(--bg-1); border: var(--bw) solid var(--bd-strong);
                border-radius: var(--r); padding: var(--s-1); min-width: 190px;
                z-index: 20; box-shadow: var(--shadow-pop); }
.usermenu-mail { font-size: var(--fs-xs); color: var(--tx-3);
                 padding: var(--s-1) var(--s-2) var(--s-2);
                 border-bottom: var(--bw) solid var(--bd); margin-bottom: var(--s-1);
                 word-break: break-all; }
.usermenu-pop a { display: block; padding: var(--s-2); border-radius: var(--r);
                  font-size: var(--fs-sm); font-weight: var(--fw-md);
                  text-decoration: none; color: var(--tx-2); }
.usermenu-pop a:hover { background: var(--bg-2); }

/* ---- Settings --------------------------------------------------------- */
.settings-table { max-width: 620px; }
.cfg-num { width: 5.5rem; padding: var(--s-1) var(--s-2); margin: 0; }
.cfg-cell { white-space: nowrap; }
.cfg-group { color: var(--tx-3); font-weight: var(--fw-sb);
             margin: var(--s-4) 0 var(--s-1); font-size: var(--fs-sm); }
.advanced { margin-top: var(--s-5); border-top: var(--bw) solid var(--bd);
            padding-top: var(--s-3); }
.advanced > summary { cursor: pointer; font-weight: var(--fw-sb);
                      font-size: var(--fs-body); padding: var(--s-1) 0; }
.empty-row { padding: var(--s-5); text-align: center; }

/* ---- Clickable rows: a real <a>, stretched over the whole row ----------
   The link lives in one cell but its ::after covers the row, so the entire row is
   the target — while staying a real link (keyboard, ⌘-click, right-click). This
   rule is what makes .rowlink work; without it the link only covers its own cell
   (shipped that way once — the row stopped being clickable). */
table.runs tbody tr.clickable { position: relative; }
.rowlink { text-decoration: none; color: inherit; }
.rowlink::after { content: ""; position: absolute; inset: 0; }
table.runs tbody tr.clickable:hover { background: var(--bg-2); }
table.runs tbody tr.clickable:focus-within { outline: var(--focus-w) solid var(--focus);
                                            outline-offset: calc(-1 * var(--focus-w)); }
/* Anything else interactive in the row must sit above the stretched pseudo-element. */
table.runs tbody tr.clickable .ontop,
table.runs tbody tr.clickable .pill { position: relative; z-index: 1; }

/* ---- Form controls inside the tools ------------------------------------
   Pico's inputs are built for a settings page: 100% wide, big padding, tall.
   Inside a compact tool they read as slabs. Scope them down here only. */
.tools textarea, .tools input[type=text], .tools select {
  background: var(--bg-0);
  border: var(--bw) solid var(--bd-strong);
  border-radius: var(--r);
  font-size: var(--fs-body);
  padding: var(--s-2) var(--s-3);
  margin: 0;
  height: auto;
}
.tools textarea { min-height: 72px; resize: vertical; }
.tools textarea:focus, .tools input[type=text]:focus, .tools select:focus {
  border-color: var(--ac-text);
}
.blockform { display: flex; gap: var(--s-2); align-items: center;
             flex-wrap: wrap; margin-top: var(--s-2); }
.blockform select { flex: 0 0 auto; width: auto; }
.blockform input[type=text] { flex: 1 1 180px; }
.blockform p { flex: 1 1 100%; margin: 0 0 var(--s-1); }
.hint-actions { display: flex; gap: var(--s-3); align-items: center;
                margin-top: var(--s-2); }

/* Lists in the doc: room to breathe. A dense numbered list of steps is the hardest
   thing to read in a wall of prose. */
.md ol, .md ul { margin: var(--s-3) 0; padding-left: var(--s-5); }
.md li { margin-bottom: var(--s-2); }
.md li > ul, .md li > ol { margin: var(--s-2) 0; }
.md li::marker { color: var(--tx-4); }

/* Admonitions: the doc's callouts. Coloured by intent so a warning reads as one at
   a glance — this is the one place colour earns its keep in prose. */
.md .admonition { border-radius: var(--r); padding: var(--s-3) var(--s-4);
                  margin: var(--s-4) 0; border-left-width: 3px; }
.md .admonition-title { font-size: var(--fs-sm); text-transform: uppercase;
                        letter-spacing: .04em; margin: 0 0 var(--s-2); }
.md .admonition.tip, .md .admonition.note { background: var(--info-tint); border-color: var(--info); }
.md .admonition.tip .admonition-title { color: var(--info); }
.md .admonition > p:last-child { margin-bottom: 0; }
/* The "3 things to know" list: bigger, it's the entry point of the whole doc. */
.md > ol:first-of-type > li { font-size: var(--fs-lg); margin-bottom: var(--s-3); }