/* =========================================================================
   TO-YOTA — console de modération, feuille de style V4
   =========================================================================
   CE QUI CHANGE PAR RAPPORT À LA V3, ET POURQUOI.

   La V3 avait raison sur le fond — profondeur plutôt que traits, neutres
   teintés, chiffres en chasse fixe — mais elle habillait une disposition de
   tableau de bord grand public. Or ce panel n'est pas un tableau de bord :
   c'est un poste de travail. On y passe du temps, on y compare des lignes,
   on y cherche quelqu'un, on y décide. Les consoles professionnelles qui
   servent à ça se ressemblent toutes sur quatre points, et la V3 n'en avait
   aucun.

   1. LA DENSITÉ EST UNE FONCTIONNALITÉ. Un annuaire de six cents membres se
      lit en lignes serrées, pas en cartes aérées. Toute l'échelle descend
      d'un cran : corps à 13 px, interlignes courts, marges de panneau
      divisées par deux. On voit deux fois plus de monde sans défiler.

   2. LES LISTES SONT DES TABLEAUX. Colonnes alignées, séparateurs d'un
      pixel, chiffres à chasse égale, actions révélées au survol. Une liste
      où les actions sont toujours visibles est une liste où l'œil bute sur
      douze boutons avant d'atteindre le nom qu'il cherche.

   3. LE CHROME S'EFFACE, LE CONTENU RESTE. Un seul niveau d'ombre, réservé
      à ce qui flotte vraiment. Les panneaux sont des surfaces, pas des
      cartes : un liseré, pas une ombre portée. Ce qui est décoratif a été
      retiré, pas atténué.

   4. LE CLAVIER EST UN CITOYEN DE PREMIÈRE CLASSE. Palette de commandes,
      anneau de focus franc partout, raccourcis. Sur un poste de travail,
      la souris est le chemin lent.

   CE QUI NE CHANGE PAS, PARCE QUE C'ÉTAIT JUSTE :
   — aucune police externe. Le panel est auto-hébergé et sert du contenu de
     modération ; appeler un serveur de polices tiers lui ferait connaître
     qui l'ouvre et quand, pour un gain que la pile système rend mince.
   — les chiffres restent en chasse fixe à colonnes égales.
   — `[hidden]` l'emporte sur tout.

   LE THÈME SOMBRE EST LE THÈME PRINCIPAL, et c'est pour cela qu'il est
   défini sur `:root` nu : c'est celui que la quasi-totalité du staff
   utilise, donc celui qui doit s'afficher pendant les millisecondes qui
   précèdent l'exécution du script. Le clair est complet, pas concédé.
   ========================================================================= */

/* ---------- 1. Remise à zéro ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* L'ATTRIBUT `hidden` DOIT GAGNER, ET IL NE GAGNE PAS TOUT SEUL.
 *
 * Le navigateur lui donne `display: none`, mais avec la même force qu'une règle
 * ordinaire : dès qu'une classe fixe un `display`, l'attribut ne fait plus rien. Or
 * presque tout ce que le panel montre ou cache passe par lui — la page de connexion, la
 * console, les onglets fermés à quelqu'un, le lecteur d'écoute. Sans cette ligne, la
 * page de connexion reste affichée avec la console empilée en dessous, et les onglets
 * interdits restent cliquables : la restriction d'accès devient décorative.
 *
 * Le `!important` n'est pas un raccourci ici, c'est le sens de la règle : « caché »
 * l'emporte sur toute mise en forme, sans exception à retenir. */
[hidden] {
  display: none !important;
}

/* ---------- 2. Jetons ---------- */

:root {
  color-scheme: dark;

  /* LES NEUTRES SONT TEINTÉS PÉTROLE. Un gris pur passe pour un défaut d'écran ;
     un gris qui tire imperceptiblement vers l'accent passe pour un choix. Toute
     la palette dérive de la même teinte froide, accent compris. */
  --ground: #0d0f13;
  --surface: #14171d;
  --surface-2: #1a1e26;
  --surface-3: #222732;
  --surface-4: #2b313e;
  --line: #232833;
  --line-strong: #333a48;
  --text: #e4e8ef;
  --muted: #97a1b1;
  --faint: #6a7382;

  /* L'ACCENT EST UN PÉTROLE, PAS UN BLEU DE BIBLIOTHÈQUE. Il doit se distinguer
     des trois couleurs sémantiques ci-dessous — sans quoi « sélectionné » et
     « en cours » deviennent la même information. */
  --accent: #2f93ae;
  --accent-hi: #3fabc8;
  --accent-dim: #1c5c6d;
  --accent-ghost: rgba(63, 171, 200, 0.14);
  --on-accent: #06161b;

  /* Sémantique : séparée de l'accent, et jamais utilisée pour décorer. */
  --ok: #3faf80;
  --ok-ghost: rgba(63, 175, 128, 0.14);
  --warn: #d9a23c;
  --warn-ghost: rgba(217, 162, 60, 0.14);
  --danger: #e2606b;
  --danger-ghost: rgba(226, 96, 107, 0.14);

  --focus: #52c2dd;

  /* Une seule ombre, pour ce qui flotte vraiment. */
  --lift: 0 12px 32px -8px rgba(0, 0, 0, 0.6), 0 2px 8px -2px rgba(0, 0, 0, 0.4);

  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 9px;

  /* Rythme vertical. Tout espacement du panel sort de cette échelle. */
  --s1: 4px;
  --s2: 6px;
  --s3: 10px;
  --s4: 14px;
  --s5: 20px;
  --s6: 28px;

  --rail: 216px;
  --rail-compact: 58px;
  --topbar: 52px;

  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono",
    monospace;
}

/* Le clair : complet, pas concédé. Il s'applique quand le système le demande et
   que personne n'a explicitement choisi le sombre… */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --ground: #eef1f5;
    --surface: #ffffff;
    --surface-2: #f5f7fa;
    --surface-3: #eaeef4;
    --surface-4: #dde3ec;
    --line: #dfe4ec;
    --line-strong: #c2cad7;
    --text: #0f151d;
    --muted: #55606f;
    --faint: #8792a2;
    --accent: #177e97;
    --accent-hi: #11697f;
    --accent-dim: #a9d7e2;
    --accent-ghost: rgba(23, 126, 151, 0.1);
    --on-accent: #ffffff;
    --ok: #157f59;
    --ok-ghost: rgba(21, 127, 89, 0.1);
    --warn: #8d610d;
    --warn-ghost: rgba(141, 97, 13, 0.12);
    --danger: #c03340;
    --danger-ghost: rgba(192, 51, 64, 0.1);
    --focus: #177e97;
    --lift: 0 12px 30px -10px rgba(15, 21, 29, 0.22), 0 2px 6px -2px rgba(15, 21, 29, 0.1);
  }
}

/* …et quand on le choisit à la main, quel que soit le réglage du système. */
:root[data-theme="light"] {
  color-scheme: light;
  --ground: #eef1f5;
  --surface: #ffffff;
  --surface-2: #f5f7fa;
  --surface-3: #eaeef4;
  --surface-4: #dde3ec;
  --line: #dfe4ec;
  --line-strong: #c2cad7;
  --text: #0f151d;
  --muted: #55606f;
  --faint: #8792a2;
  --accent: #177e97;
  --accent-hi: #11697f;
  --accent-dim: #a9d7e2;
  --accent-ghost: rgba(23, 126, 151, 0.1);
  --on-accent: #ffffff;
  --ok: #157f59;
  --ok-ghost: rgba(21, 127, 89, 0.1);
  --warn: #8d610d;
  --warn-ghost: rgba(141, 97, 13, 0.12);
  --danger: #c03340;
  --danger-ghost: rgba(192, 51, 64, 0.1);
  --focus: #177e97;
  --lift: 0 12px 30px -10px rgba(15, 21, 29, 0.22), 0 2px 6px -2px rgba(15, 21, 29, 0.1);
}

/* ---------- 3. Base ---------- */

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--text);
  font-family: var(--ui);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-weight: 600;
  letter-spacing: -0.011em;
  text-wrap: balance;
}

h1 {
  font-size: 19px;
  line-height: 1.2;
}

h3 {
  font-size: 13.5px;
}

strong {
  font-weight: 600;
}

a {
  color: var(--accent-hi);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* LES CHIFFRES SONT DES CHIFFRES. Dans une console où l'on empile des durées, des
   compteurs et des identifiants, la chasse égale est la différence entre lire et
   déchiffrer : les colonnes s'alignent d'elles-mêmes. */
code,
.mono,
.count,
.freshness,
.item-meta,
.fact span,
.card .value,
.invite-code,
.live-chip.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

code {
  background: var(--surface-3);
  border-radius: var(--r-sm);
  padding: 1px 5px;
  font-size: 0.92em;
}

.muted {
  color: var(--muted);
}

.small {
  font-size: 12px;
}

.hint,
.fineprint,
.panel-sub,
.topbar-sub {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.error {
  color: var(--danger);
}

.spacer {
  flex: 1;
}

.ico {
  width: 16px;
  height: 16px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico.xl {
  width: 34px;
  height: 34px;
  stroke-width: 1.2;
}

/* L'ANNEAU DE FOCUS EST LE MÊME PARTOUT, ET IL EST FRANC. Ce n'est pas une
   politesse d'accessibilité ajoutée à la fin : c'est ce qui rend le panel
   utilisable au clavier, et ce qui distingue une interface finie. */
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::selection {
  background: var(--accent-dim);
  color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 4. Charpente ---------- */

.shell {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  min-height: 100vh;
}

/* Le rail replié : les libellés disparaissent, les icônes restent, la largeur
   passe à celle d'une colonne d'icônes. L'état est retenu par `shell.js`. */
.shell[data-rail="compact"] {
  grid-template-columns: var(--rail-compact) minmax(0, 1fr);
}

.viewport {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

main {
  flex: 1;
  min-width: 0;
  padding: var(--s5) var(--s5) var(--s6);
}

.tab {
  display: none;
  max-width: 1380px;
  margin: 0 auto;
}

.tab.active {
  display: grid;
  gap: var(--s4);
  align-content: start;
}

/* ---------- 5. Rail de navigation ---------- */

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s3) var(--s2) var(--s3) var(--s3);
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow: hidden;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s2) var(--s2) var(--s1);
  min-height: 34px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--on-accent);
}

.brand-mark svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.brand-text strong {
  font-size: 13px;
  font-weight: 650;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.brand-text small {
  color: var(--faint);
  font-size: 10.5px;
  white-space: nowrap;
}

/* Le sélecteur de serveur est le contexte de TOUT le reste de la page : il est
   donc au sommet, juste sous la marque, et jamais perdu dans un menu. */
.guild-picker {
  display: grid;
  gap: 3px;
  padding: 0 var(--s1);
}

.guild-picker span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.sidenav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: var(--s1);
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}

.nav-group {
  margin-top: var(--s4);
  padding: 0 var(--s2) var(--s1);
  color: var(--faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.nav-group:first-child {
  margin-top: var(--s1);
}

.sidenav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s3);
  width: 100%;
  padding: 6px var(--s2);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.sidenav .ico {
  width: 15px;
  height: 15px;
  opacity: 0.85;
}

.sidenav button span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.sidenav button:hover {
  background: var(--surface-3);
  color: var(--text);
}

.sidenav button.active {
  background: var(--accent-ghost);
  color: var(--text);
  font-weight: 550;
}

/* Un marqueur de SÉLECTION, pas un liseré décoratif : il n'existe que sur
   l'onglet ouvert, et il dit lequel c'est. */
.sidenav button.active::before {
  content: "";
  position: absolute;
  inset-block: 5px;
  left: -7px;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--accent-hi);
}

.sidenav button.active .ico {
  color: var(--accent-hi);
  opacity: 1;
}

.sidebar-foot {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* Rail replié : tout ce qui est texte s'efface, le bouton reste centré et garde
   sa cible de clic. Le titre natif prend le relais de l'étiquette. */
.shell[data-rail="compact"] .brand-text,
.shell[data-rail="compact"] .guild-picker,
.shell[data-rail="compact"] .nav-group,
.shell[data-rail="compact"] .sidenav button span,
.shell[data-rail="compact"] .rail-toggle span,
.shell[data-rail="compact"] .identity-text {
  display: none;
}

/* Replié, le bouton de repli redevient une icône centrée — et il garde sa cible de
   clic, sans quoi on ne pourrait plus déplier. */
.shell[data-rail="compact"] .rail-toggle {
  justify-content: center;
  padding-inline: 0;
}

.rail-toggle {
  justify-content: flex-start;
  width: 100%;
}

.shell[data-rail="compact"] .sidebar {
  padding-inline: var(--s2);
  align-items: stretch;
}

.shell[data-rail="compact"] .sidenav button,
.shell[data-rail="compact"] .brand,
.shell[data-rail="compact"] .identity {
  justify-content: center;
}

.shell[data-rail="compact"] .sidenav button {
  padding: 8px 0;
}

.shell[data-rail="compact"] .sidenav button.active::before {
  left: -8px;
}

/* ---------- 6. Barre de commande ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: var(--topbar);
  padding: var(--s2) var(--s5);
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.topbar-title {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.topbar-title h1 {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Le sous-titre disparaît quand la place manque plutôt que de pousser la barre
   sur deux lignes : c'est un complément, pas une information. */
.topbar-sub {
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-toggle {
  flex: none;
}

.freshness {
  color: var(--faint);
  font-size: 11px;
  white-space: nowrap;
}

/* Le champ qui ouvre la palette. Ce n'est pas un vrai champ : c'est un bouton
   qui en a l'apparence, parce que la recherche vit dans la palette — un seul
   endroit où chercher vaut mieux que deux qui se ressemblent. */
.omni {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 160px;
  max-width: 300px;
  flex: 1;
  padding: 5px var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--faint);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.omni:hover {
  border-color: var(--line-strong);
  color: var(--muted);
}

.omni .ico {
  width: 14px;
  height: 14px;
}

.omni span {
  flex: 1;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

kbd {
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

/* LE BOUTON DE THÈME MONTRE LA DESTINATION, PAS L'ÉTAT COURANT. En sombre on voit
   un soleil — « aller vers le clair » ; en clair, une lune. Montrer l'état actuel
   serait redondant : on l'a sous les yeux, c'est toute la page.

   Les trois états du thème sont traités comme ceux de la palette : `:root` nu porte
   le sombre, la préférence système ne s'applique que si personne n'a choisi, et le
   choix explicite l'emporte dans les deux sens. */
#theme-toggle .moon {
  display: none;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) #theme-toggle .sun {
    display: none;
  }

  :root:not([data-theme="dark"]) #theme-toggle .moon {
    display: block;
  }
}

:root[data-theme="light"] #theme-toggle .sun {
  display: none;
}

:root[data-theme="light"] #theme-toggle .moon {
  display: block;
}

.identity {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
}

.identity-text {
  display: grid;
  gap: 0;
  min-width: 0;
  line-height: 1.25;
}

.identity-text strong {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.avatar {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  object-fit: cover;
}

.mini-avatar {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--surface-3);
  object-fit: cover;
}

.badge {
  align-self: start;
  padding: 0 5px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.admin {
  background: var(--accent-ghost);
  color: var(--accent-hi);
}

.badge.super {
  background: var(--warn-ghost);
  color: var(--warn);
}

/* ---------- 7. Panneaux et cartes ---------- */

/* UN PANNEAU EST UNE SURFACE, PAS UNE CARTE. Liseré d'un pixel, pas d'ombre :
   l'ombre est réservée à ce qui flotte réellement au-dessus de la page. */
.panel {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}

.panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}

.panel-head > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.panel-head h3 {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.count {
  color: var(--faint);
  font-size: 11px;
  font-weight: 400;
}

.subhead {
  color: var(--faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel.tool {
  background: var(--surface-2);
}

.placeholder {
  place-items: center;
  gap: var(--s3);
  padding: var(--s6) var(--s4);
  color: var(--faint);
  text-align: center;
}

.placeholder .ico.xl {
  opacity: 0.4;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: var(--s3);
}

.card {
  display: grid;
  gap: var(--s1);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color 0.12s ease;
}

.card:hover {
  border-color: var(--line-strong);
}

.card .label {
  color: var(--faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.card .value {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.card .value.small {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ---------- 8. Boutons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: 6px var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.button:hover {
  background: var(--surface-3);
  border-color: var(--faint);
}

.button:active {
  transform: translateY(0.5px);
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
}

.button.primary:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
}

.button.danger {
  border-color: transparent;
  background: var(--danger-ghost);
  color: var(--danger);
}

.button.danger:hover {
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}

.button.ghost {
  border-color: transparent;
  background: transparent;
  color: var(--muted);
}

.button.ghost:hover {
  background: var(--surface-3);
  border-color: transparent;
  color: var(--text);
}

.button.small {
  padding: 3px var(--s3);
  font-size: 11.5px;
}

.button.lg {
  padding: 9px var(--s5);
  font-size: 13.5px;
}

.button.block {
  width: 100%;
}

.button.icon {
  padding: 6px;
  width: 30px;
  height: 30px;
}

.button.icon .ico {
  width: 15px;
  height: 15px;
}

/* Un bouton occupé garde sa taille : sans ça, la ligne saute au moment précis
   où l'on vient de cliquer, et le clic suivant part à côté. */
.button.busy {
  color: transparent;
  pointer-events: none;
  position: relative;
}

.button.busy::after {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid var(--faint);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

.button.primary.busy::after {
  border-color: var(--on-accent);
  border-top-color: transparent;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 9. Champs ---------- */

input[type="text"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="datetime-local"],
select,
textarea {
  width: 100%;
  padding: 6px var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--text);
  font-size: 12.5px;
  transition: border-color 0.12s ease, background 0.12s ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: var(--faint);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-ghost);
}

input::placeholder,
textarea::placeholder {
  color: var(--faint);
}

textarea {
  min-height: 72px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}

select {
  appearance: none;
  padding-right: var(--s5);
  background-image: linear-gradient(45deg, transparent 50%, var(--faint) 50%),
    linear-gradient(135deg, var(--faint) 50%, transparent 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  cursor: pointer;
}

input[type="checkbox"] {
  width: 15px;
  height: 15px;
  flex: none;
  accent-color: var(--accent);
  cursor: pointer;
}

.field {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.field > span {
  color: var(--faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.field.grow {
  flex: 1;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  flex-wrap: wrap;
}

.row > input[type="number"] {
  width: 96px;
}

.row > select,
.row > textarea {
  flex: 1;
  min-width: 160px;
}

.row.tight {
  gap: var(--s2);
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 150px;
}

.search .ico {
  position: absolute;
  left: var(--s3);
  width: 14px;
  height: 14px;
  color: var(--faint);
  pointer-events: none;
}

.search input {
  padding-left: 30px;
}

.search.compact {
  max-width: 260px;
}

.proof-file {
  padding: 4px;
  font-size: 12px;
}

.proof-file::file-selector-button {
  margin-right: var(--s3);
  padding: 3px var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--text);
  font-size: 11.5px;
  cursor: pointer;
}

.proof-file::file-selector-button:hover {
  background: var(--surface-4);
}

/* Les interrupteurs : une grille, pas une colonne. À vingt réglages, la colonne
   fait défiler trois écrans pour ne montrer que du vide à droite. */
.toggles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: var(--s2);
}

.toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--s1) var(--s3);
  padding: var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.toggle:hover {
  border-color: var(--line-strong);
}

.toggle input {
  margin-top: 1px;
}

.toggle span {
  font-size: 12.5px;
  font-weight: 500;
}

.toggle small {
  grid-column: 2;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.toggle:has(input:checked) {
  border-color: var(--accent-dim);
  background: var(--accent-ghost);
}

.toggle:has(input:checked) span {
  color: var(--text);
}

.caps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--s2);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
  font-size: 12.5px;
  cursor: pointer;
}

.caps .check:has(input:checked) {
  border-color: var(--accent-dim);
  background: var(--accent-ghost);
}

/* ---------- 10. Listes, la brique centrale ---------- */

/* CE SONT DES TABLEAUX, PAS DES CARTES EMPILÉES. Séparateurs d'un pixel,
   hauteur de ligne constante, actions révélées au survol. `listItem` dans
   `dom.js` dessine chaque ligne du panel : tout se joue ici. */
.list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}

.list li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-top: 1px solid var(--line);
  min-height: 42px;
}

.list li:first-child {
  border-top: 0;
}

.list.dense li {
  padding: var(--s2) var(--s3);
  min-height: 34px;
}

.list li.clickable {
  cursor: pointer;
  transition: background 0.1s ease;
}

.list li.clickable:hover {
  background: var(--surface-3);
}

/* La ligne sélectionnée porte un marqueur à gauche, pas seulement un fond :
   sur un écran peu contrasté, un fond seul ne se voit pas. */
.list li.selected {
  background: var(--accent-ghost);
  box-shadow: inset 2px 0 0 var(--accent-hi);
}

.list li.empty {
  display: block;
  padding: var(--s5) var(--s4);
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

/* Une ligne repliée sous sa parente — un alias sous son terme. Le retrait dit
   la subordination ; la barre verticale dit jusqu'où elle va. */
.list li.sub {
  padding-left: var(--s6);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
  box-shadow: inset 2px 0 0 var(--line-strong);
}

.list li:has(.excerpt) {
  align-items: flex-start;
}

.item-main {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.item-title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: 12.5px;
  font-weight: 500;
}

.item-meta {
  color: var(--faint);
  font-size: 11px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.excerpt {
  margin-top: 2px;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
}

.item-actions select {
  width: auto;
  min-width: 120px;
  padding: 3px var(--s5) 3px var(--s3);
  font-size: 11.5px;
}

/* LES ACTIONS S'EFFACENT JUSQU'AU SURVOL — mais SEULEMENT là où survoler existe.
   Sur tactile, il n'y a pas de survol : les cacher les rendrait inatteignables.
   D'où la condition, qui n'est pas une précaution mais la règle elle-même. */
@media (hover: hover) and (pointer: fine) {
  .list li .item-actions {
    opacity: 0;
    transition: opacity 0.12s ease;
  }

  .list li:hover .item-actions,
  .list li:focus-within .item-actions,
  .list li.selected .item-actions {
    opacity: 1;
  }
}

.member {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.member img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-3);
}

.member > div {
  min-width: 0;
}

.member-name {
  font-size: 14px;
  font-weight: 600;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}

/* ---------- 11. Signalétique ---------- */

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 3px var(--s3);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11.5px;
  white-space: nowrap;
}

.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--faint);
}

.pill.on {
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  background: var(--ok-ghost);
  color: var(--ok);
}

.pill.on::before {
  background: var(--ok);
}

.pill.off {
  color: var(--faint);
}

.tag {
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-4);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.tag.strict {
  background: var(--danger-ghost);
  color: var(--danger);
}

.tag.contextuel {
  background: var(--warn-ghost);
  color: var(--warn);
}

.tag.lien {
  background: var(--accent-ghost);
  color: var(--accent-hi);
}

.tag.spam {
  background: var(--warn-ghost);
  color: var(--warn);
}

.fact {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s2);
}

.fact b {
  color: var(--faint);
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.fact span {
  font-size: 12.5px;
}

.meter {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-4);
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--faint);
  transition: width 0.25s ease;
}

.meter.calme span {
  background: var(--ok);
}

.meter.surveiller span {
  background: var(--warn);
}

.meter.alarme span {
  background: var(--danger);
}

.result {
  min-height: 18px;
  padding: var(--s2) 0;
  color: var(--muted);
  font-size: 12px;
}

.result.ok {
  color: var(--ok);
}

.result.error {
  color: var(--danger);
}

.callout {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line);
  border-left-width: 2px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.callout .ico {
  margin-top: 1px;
  color: var(--faint);
}

.callout.warn {
  border-color: color-mix(in srgb, var(--warn) 30%, var(--line));
  border-left-color: var(--warn);
  background: var(--warn-ghost);
}

.callout.warn strong,
.callout.warn .ico {
  color: var(--warn);
}

/* ---------- 12. Deux panneaux : liste et détail ---------- */

.split {
  display: grid;
  gap: var(--s4);
  align-items: start;
}

.directory-split {
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
}

/* Le détail suit le défilement : on parcourt la liste à gauche sans perdre de
   vue la fiche ouverte à droite. */
.detail {
  position: sticky;
  top: calc(var(--topbar) + var(--s4));
  display: grid;
  gap: var(--s4);
  min-width: 0;
}

.directory {
  min-width: 0;
}

@media (max-width: 1080px) {
  .directory-split {
    grid-template-columns: minmax(0, 1fr);
  }

  .detail {
    position: static;
  }
}

/* La barre d'enregistrement flotte : elle n'existe que s'il y a quelque chose à
   enregistrer, et elle doit rester atteignable quel que soit le défilement. */
.sticky-save {
  position: sticky;
  bottom: var(--s4);
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s3);
  margin-top: var(--s2);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--lift);
}

/* ---------- 13. Connexion ---------- */

.login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: var(--s5);
  background: var(--ground);
}

.login-card {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  width: min(100%, 360px);
  padding: var(--s6) var(--s5);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--lift);
  text-align: center;
}

.login-mark {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-lg);
  background: var(--accent);
  color: var(--on-accent);
}

.login-mark svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-card h1 {
  font-size: 20px;
  letter-spacing: 0.03em;
}

.login-card .button {
  margin-top: var(--s3);
}

/* ---------- 14. Fenêtres, feuilles et messages ---------- */

.modal {
  width: min(100%, 440px);
  padding: var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--lift);
}

.modal::backdrop {
  background: rgba(4, 6, 9, 0.62);
  backdrop-filter: blur(2px);
}

.modal[open] {
  display: grid;
  gap: var(--s3);
}

.modal h3 {
  font-size: 15px;
}

.modal p {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.modal input[type="text"] {
  margin-top: var(--s1);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--s2);
  margin-top: var(--s2);
}

/* La feuille : une fenêtre large, pour ce qui se lit plutôt que ce qui se
   décide — un historique, une fiche complète. */
.modal.sheet {
  width: min(100%, 720px);
  max-height: 84vh;
  overflow-y: auto;
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}

.toasts {
  position: fixed;
  right: var(--s4);
  bottom: var(--s4);
  z-index: 60;
  display: grid;
  gap: var(--s2);
  justify-items: end;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--s3);
  max-width: 340px;
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--ok);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font-size: 12.5px;
  box-shadow: var(--lift);
  animation: toast-in 0.18s ease;
}

.toast.error {
  border-left-color: var(--danger);
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 15. Palette de commandes ---------- */

/* CE QUI MANQUAIT LE PLUS À CE PANEL. Seize sections, une quarantaine
   d'actions : atteindre la bonne demandait de connaître le rail par cœur.
   Ctrl+K ouvre une liste unique, filtrable au clavier, qui mène partout. */
.palette {
  width: min(100%, 520px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--lift);
  overflow: hidden;
}

.palette::backdrop {
  background: rgba(4, 6, 9, 0.55);
  backdrop-filter: blur(3px);
}

.palette[open] {
  display: grid;
}

.palette-field {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--line);
}

.palette-field .ico {
  color: var(--faint);
}

.palette-field input {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 14px;
}

.palette-field input:focus {
  outline: none;
  box-shadow: none;
  background: transparent;
}

.palette-list {
  list-style: none;
  margin: 0;
  padding: var(--s1);
  max-height: min(52vh, 380px);
  overflow-y: auto;
}

.palette-list li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-md);
  cursor: pointer;
}

.palette-list li .ico {
  color: var(--faint);
}

/* Une seule ligne est « courante » à la fois, et elle se déplace aux flèches :
   c'est le survol qui suit le clavier, jamais l'inverse. */
.palette-list li[aria-selected="true"] {
  background: var(--accent-ghost);
}

.palette-list li[aria-selected="true"] .ico {
  color: var(--accent-hi);
}

.palette-label {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 0;
  line-height: 1.3;
}

.palette-label strong {
  font-size: 12.5px;
  font-weight: 500;
}

.palette-label small {
  color: var(--faint);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.palette-group {
  padding: var(--s3) var(--s3) var(--s1);
  color: var(--faint);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.palette-empty {
  padding: var(--s5);
  color: var(--faint);
  font-size: 12px;
  text-align: center;
}

.palette-foot {
  display: flex;
  gap: var(--s4);
  padding: var(--s2) var(--s4);
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--faint);
  font-size: 11px;
}

.palette-foot span {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
}

/* ---------- 16. Invitations ---------- */

.list.invites li {
  align-items: flex-start;
}

.list.invites .item-main {
  gap: var(--s2);
}

.invite-code {
  font-size: 12.5px;
  font-weight: 600;
}

.invite-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
}

.invite-note {
  color: var(--muted);
  font-size: 11.5px;
}

.invite-risk {
  display: grid;
  gap: var(--s1);
  min-width: 120px;
}

/* ---------- 17. Écoute vocale ---------- */

.live {
  position: fixed;
  left: 50%;
  bottom: var(--s4);
  z-index: 55;
  transform: translateX(-50%);
  display: grid;
  gap: var(--s3);
  width: min(calc(100% - 2 * var(--s4)), 560px);
  padding: var(--s3) var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--lift);
}

.live[hidden] {
  display: none !important;
}

.live audio {
  display: none;
}

.live-bar {
  display: flex;
  align-items: center;
  gap: var(--s3);
}

.live-play {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: none;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: background 0.12s ease;
}

.live-play:hover {
  background: var(--accent-hi);
}

.live-play:active {
  transform: scale(0.96);
}

.live-play:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.live .live-play .pause {
  display: none;
}

.live.playing .live-play .play {
  display: none;
}

.live.playing .live-play .pause {
  display: block;
}

.live-title {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 1px;
}

.live-name {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-meta {
  color: var(--faint);
  font-size: 11px;
}

.live-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--faint);
}

.live.playing .live-dot {
  background: var(--danger);
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    opacity: 0.35;
  }
}

.live-badges {
  display: flex;
  gap: var(--s2);
}

.live-badges .cast {
  color: var(--accent-hi);
}

.live-badges .warn {
  color: var(--warn);
}

.live-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.live-chip {
  padding: 1px 6px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  color: var(--muted);
  font-size: 10.5px;
}

.live-chip.good {
  background: var(--ok-ghost);
  color: var(--ok);
}

.live-chip.fair {
  background: var(--warn-ghost);
  color: var(--warn);
}

.live-chip.poor {
  background: var(--danger-ghost);
  color: var(--danger);
}

.live-vol {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex: none;
  width: 116px;
}

.live-vol .live-ico {
  color: var(--faint);
}

.live-ico {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.live-vol input[type="range"] {
  flex: 1;
  height: 3px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-4);
  accent-color: var(--accent);
  appearance: none;
  cursor: pointer;
}

.live-vol input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
}

.live-vol input[type="range"]::-moz-range-thumb {
  width: 11px;
  height: 11px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}

.live-vol input[type="range"]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.live-who {
  display: grid;
  gap: var(--s2);
  padding-top: var(--s2);
  border-top: 1px solid var(--line);
}

.live-people {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.live-people .empty {
  color: var(--faint);
  font-size: 11.5px;
}

.live-person {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 2px var(--s2) 2px 2px;
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 11.5px;
}

.live-person.on {
  background: var(--ok-ghost);
  color: var(--ok);
}

.live-face {
  position: relative;
  width: 20px;
  height: 20px;
  flex: none;
}

.live-face img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--surface-3);
}

.live-face::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 7px;
  height: 7px;
  border: 1.5px solid var(--surface);
  border-radius: 50%;
  background: var(--faint);
}

.live-person.on .live-face::after {
  background: var(--ok);
}

.live-meter {
  height: 3px;
  border-radius: 999px;
  background: var(--surface-4);
  overflow: hidden;
}

.live-meter span {
  display: block;
  height: 100%;
  background: var(--ok);
  transition: width 0.1s linear;
}

/* ---------- 18. Écrans étroits ---------- */

@media (max-width: 860px) {
  .shell,
  .shell[data-rail="compact"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .sidenav {
    flex-direction: row;
    flex-wrap: wrap;
    overflow: visible;
  }

  .nav-group {
    display: none;
  }

  .sidenav button {
    width: auto;
  }

  .sidenav button.active::before {
    display: none;
  }

  .shell[data-rail="compact"] .sidenav button span,
  .shell[data-rail="compact"] .brand-text,
  .shell[data-rail="compact"] .guild-picker,
  .shell[data-rail="compact"] .identity-text {
    display: revert;
  }

  main {
    padding: var(--s4) var(--s3) var(--s5);
  }

  .topbar {
    padding-inline: var(--s3);
  }

  .topbar-sub,
  .omni span,
  .omni kbd {
    display: none;
  }

  .omni {
    min-width: 0;
    max-width: 34px;
    justify-content: center;
  }

  .rail-toggle {
    display: none;
  }
}