/* LA BARRE — sa FORME, écrite une fois. Ses COULEURS viennent de l'écran qui la porte.
 *
 * ⚠ ELLE VIT AU SOCLE POUR LA MÊME RAISON QUE `shell.ts` : trois écrans peignaient le même en-tête,
 * et ils divergeaient déjà. Le CSS a suivi le module — *une forme partagée dont chacun garde sa
 * copie diverge exactement comme le code qu'elle habille.*
 *
 * ⚠ ET ELLE NE CONNAÎT AUCUNE PALETTE. Le bureau nomme ses couleurs `--ink`/`--line`/`--surface`,
 * l'atelier les siennes `--fg`/`--rule`/`--bar` : imposer l'une aurait forcé l'autre à la traduire
 * chez elle, ou à se renier. La barre demande SIX variables à elle, que chaque écran mappe sur les
 * siennes — et elle a un repli pour chacune, afin qu'un écran neuf l'affiche avant de l'habiller.
 * *Ce qu'on partage se demande par un contrat, jamais en imposant son vocabulaire.* */

/* ⚠ LA HAUTEUR SE RÉSERVE AVANT QUE LE MODULE N'ARRIVE, et c'est ce qui supprime le saut. Le reste de
 * la page est du HTML statique : il se peint dès l'arrivée du document, quand `#shell` est encore un
 * conteneur VIDE de zéro pixel. La barre n'apparaissait qu'après `/mine` — le contenu s'affichait
 * 56 px trop haut, puis tombait. Le CSS, lui, bloque le rendu : la place est prise avant la première
 * peinture. *Ce qui arrive en retard doit avoir sa place réservée d'avance.*
 *
 * ⚠ ET C'EST L'ID QUI LA PORTE, pas la classe : la classe est posée par le module, donc trop tard.
 * `56px` est la hauteur d'une barre AVEC son sélecteur — le cas haut, celui qu'il faut réserver. */
#shell {
  min-height: 56px;
  box-sizing: border-box;
}

/* ⚠ SES NOMS À ELLE NE SONT CEUX D'AUCUN ÉCRAN (2026-09-24). Elle s'appelait `--ink`, `--line`, `--dim` — les noms mêmes
 * du bureau, de l'accueil et de l'atelier, qui posent `--shell-line: var(--line)` sur le même élément. Chaque nom renvoyait
 * alors à l'autre : une boucle, que CSS annule en vidant les deux. Le bandeau du bureau et de l'accueil n'avait plus ni
 * trait ni cadre, et le prénom de l'atelier perdait son gris. *Un nom qu'on partage sans le savoir se prend pour un autre.* */
.shell {
  --sh-ink: var(--shell-ink, #1a1a1a);
  --sh-dim: var(--shell-dim, #6b7280);
  --sh-line: var(--shell-line, #e5e7eb);
  --sh-face: var(--shell-face, #ffffff);
  --sh-sunk: var(--shell-sunk, #f9fafb);
  --sh-lit: var(--shell-accent, #2563eb);

  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--sh-line);
  background: var(--sh-face);
  flex-wrap: wrap;
}

/* ⚠ LA MARQUE EST LE RETOUR : elle mène à `/`, que le socle ramène à l'accueil. C'est ce que l'usage
 * a appris à tout le monde, et cela supprime un bouton par écran. */
.shell-brand { font-weight: 700; color: var(--sh-ink); text-decoration: none; }
.shell-brand:hover { color: var(--sh-lit); }

/* UN LIBELLÉ quand il n'y a rien à choisir, un SÉLECTEUR quand il y a un choix. */
.shell-here { font-weight: 600; font-size: 13px; color: var(--sh-ink); }
.shell-sep { color: var(--sh-dim); }
.shell-pick {
  font: inherit;
  font-size: 13px;
  padding: 4px 8px;
  border: 1px solid var(--sh-line);
  border-radius: calc(8px * var(--corner, 1));
  background: var(--sh-sunk);
  color: var(--sh-ink);
}

/* ⚠ `margin-left: auto` POUSSE TOUT CE QUI SUIT À DROITE — le prénom et la sortie. Sans lui, la
 * barre se tasse à gauche dès qu'un écran n'a pas de sélecteur d'app. */
.shell-who { margin-left: auto; color: var(--sh-dim); font-size: 12px; }
.shell-out {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--sh-line);
  border-radius: calc(8px * var(--corner, 1));
  background: var(--sh-face);
  color: var(--sh-dim);
  cursor: pointer;
}
.shell-out:hover { color: var(--sh-ink); border-color: var(--sh-lit); }

/* L'AIDE ET LES INFOBULLES (2026-09-25) — un lien et un interrupteur, habillés comme la sortie ; l'interrupteur allumé se lit à son
 * trait (`aria-pressed`). La bulle, elle, flotte au-dessus de tout et ne capte jamais le pointeur : elle nomme, elle ne gêne pas. */
.shell-help, .shell-hints, .shell-checks, .shell-edge, .shell-look, .shell-password, .shell-rekey > button {
  font: inherit;
  font-size: 12px;
  padding: 5px 10px;
  border: 1px solid var(--sh-line);
  border-radius: calc(8px * var(--corner, 1));
  background: var(--sh-face);
  color: var(--sh-dim);
  cursor: pointer;
  text-decoration: none;
}
.shell-help:hover, .shell-hints:hover, .shell-checks:hover, .shell-edge:hover, .shell-look:hover, .shell-password:hover, .shell-rekey > button:hover { color: var(--sh-ink); border-color: var(--sh-lit); }
.shell-hints[aria-pressed="true"], .shell-checks[aria-pressed="true"], .shell-look[aria-pressed="true"] { color: var(--sh-ink); border-color: var(--sh-lit); }
.shell-hint {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  padding: 6px 9px;
  border: 1px solid var(--sh-lit);
  border-radius: calc(6px * var(--corner, 1));
  background: var(--sh-face);
  color: var(--sh-ink);
  font: 12px/1.4 system-ui, sans-serif;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.18);
  pointer-events: none;
}
.shell-hint b { font-weight: 600; }

/* LE FIL D'UNE PAGE (`dock`, 2026-09-24) — ses gestes de navigation, juste après le menu des vues. Le socle fait la place ; la page
 * habille ce qu'elle y pose. */
.shell-nav { display: flex; align-items: center; gap: 6px; }

/* LES ANGLES VIFS (2026-09-25) — le bouton « round » de l'atelier, monté au bandeau. Un seul réglage, `--corner`, qui MULTIPLIE
 * chaque rayon écrit en dur (`calc(8px * var(--corner, 1))`) : à 1, rien ne change ; à 0, tout s'équerre. Et les rayons que
 * les écrans tiennent en variables (`--radius`, `--radius-sm`) tombent avec. Les cercles (`50%`) restent ronds : une pastille
 * n'est pas un angle. ⚠ `:root[data-edge]` pèse plus que `:root`, où les écrans posent leurs rayons : l'ordre des feuilles
 * n'y fait rien. */
:root[data-edge="sharp"] {
  --corner: 0;
  --radius: 0px;
  --radius-sm: 0px;
}

/* LE MENU DU COMPTE (2026-09-25) — le prénom l'ouvre ; l'aide, les réglages et la sortie s'y rangent. Un `details` : il s'ouvre
 * au clavier comme à la souris, et la barre le referme au clic ailleurs ou par Échap. */
.shell-account { position: relative; }
.shell-account > summary { list-style: none; cursor: pointer; user-select: none; }
.shell-account > summary::-webkit-details-marker { display: none; }
.shell-account > summary::after { content: " ▾"; }
.shell-account[open] > summary { color: var(--sh-ink); }
.shell-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 900;
  display: grid;
  gap: 6px;
  min-width: 260px;
  padding: 10px;
  border: 1px solid var(--sh-line);
  border-radius: calc(10px * var(--corner, 1));
  background: var(--sh-face);
  box-shadow: 0 4px 18px rgb(0 0 0 / 0.14);
}
.shell-menu > .shell-help, .shell-menu > button { text-align: left; }
.shell-menu hr { width: 100%; margin: 2px 0; border: 0; border-top: 1px solid var(--sh-line); }
.shell-looks { display: flex; gap: 4px; }
.shell-looks > .shell-look { flex: 1; padding: 5px 6px; white-space: nowrap; }
/* LE CHANGEMENT DE MOT DE PASSE (2026-09-25) — trois champs sous l'entrée, qu'elle ouvre et referme ; la réponse s'écrit dessous. */
.shell-rekey { display: grid; gap: 6px; }
.shell-rekey[hidden] { display: none; }
.shell-rekey > input {
  font: inherit;
  font-size: 12px;
  padding: 5px 8px;
  border: 1px solid var(--sh-line);
  border-radius: calc(6px * var(--corner, 1));
  background: var(--sh-sunk);
  color: var(--sh-ink);
}
.shell-rekey > .shell-said { color: var(--sh-dim); font-size: 12px; }
.shell-rekey > .shell-said:empty { display: none; }