/* Administrer : droits, groupes, pages orphelines et l'arborescence « mes pages ». */

/* ============================================================
   DROITS ET GROUPES
   Deux questions et deux seulement : qui lit, qui écrit. L'écran doit se
   parcourir sans lire une notice — d'où les jetons nommés plutôt qu'un
   tableau de cases à cocher.
   ============================================================ */
.token { display: inline-flex; align-items: center; gap: 5px;
  background: var(--bg3); border: 1px solid var(--line); border-radius: 999px;
  padding: 3px 10px; font-size: var(--fs-floor); color: var(--fg); }
.token.group { border-color: var(--purple); }
.token button { background: none; border: none; color: var(--fg3); cursor: pointer;
  font-size: 1.15em; line-height: 1; padding: 0; }
.token button:hover { color: var(--red); }

.perm-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 6px 0; border-bottom: 1px solid var(--line); }
.perm-row:last-of-type { border-bottom: none; }
.perm-level { font-size: var(--fs-floor); color: var(--fg2); }
.perm-origin { font-family: var(--mono); font-size: var(--fs-floor); color: var(--fg3); }
.perm-row .btn { margin-left: auto; }
.perm-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.perm-add select { flex: 1; min-width: 120px;
  background: var(--bg3); color: var(--fg); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 10px; font: inherit; font-size: var(--fs-ui); }

.group { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 9px 0; border-bottom: 1px solid var(--line); }
.group:last-of-type { border-bottom: none; }
.group-t { width: 100%; font-weight: 600; font-size: var(--fs-ui); }
.group select { background: var(--bg3); color: var(--fg2); border: 1px dashed var(--line);
  border-radius: 999px; padding: 3px 9px; font: inherit; font-size: var(--fs-floor); cursor: pointer; }
.group .btn { margin-left: auto; }

/* ---- pages et droits : la vue de l'administrateur ----
   Une ligne orpheline — dont le .md n'existe plus — se repère d'un coup d'œil :
   c'est la seule chose de cet écran sur laquelle il y a quelque chose à faire. */
.dlg .orphan td { opacity: .72; }
.dlg .chip {
  font-size: var(--fs-floor); text-transform: uppercase; letter-spacing: .5px;
  color: var(--amber); border: 1px solid var(--amber); border-radius: 5px;
  padding: 1px 5px; white-space: nowrap;
}
.dlg .orphan td:first-child { color: var(--fg3); }

/* ============================================================
   « MES PAGES » — UNE ARBORESCENCE, PAS UN MUR

   C'était un tableau de cent quatre-vingts lignes, chemins complets compris,
   avec le mot « DOSSIER » écrit en toutes lettres au bout d'un chapitre sur
   trois. Rien n'y disait la forme du wiki, et retrouver un chapitre y coûtait
   plus cher que de l'ouvrir.

   Ce qui reste ici est ce que le plan ne sait pas faire : cocher plusieurs
   pages et les emmener d'un bloc. Les gestes d'UNE page vivent maintenant sur
   son entrée du sommaire.
   ============================================================ */
.dlg-filter {
  width: 100%; background: var(--bg3); color: var(--fg);
  border: 1px solid var(--line); border-radius: 8px; padding: 7px 11px;
  font: inherit; font-size: var(--fs-ui);
}
.dlg-filter:focus { outline: none; border-color: var(--blue); }

/* LA GOUTTIÈRE EST NEUTRE, LES CADRES RESSORTENT. Le fond de la liste était
   celui des lignes : l'espace entre deux wikis montrait donc LE MÊME BLEU que
   partout, et ne séparait rien — « y'a toujours du bleu entre 2 catégories,
   donc ça change rien » (22 septembre 2026). Le vide prend la couleur de la
   page, chaque wiki garde la sienne : c'est le CONTRASTE qui coupe, pas les
   pixels d'écart. */
.ptree {
  align-self: stretch; max-height: 46vh; max-height: 46dvh; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); padding: 6px;
}
.prow {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 10px; border-bottom: 1px solid var(--line);
}
.prow:last-child { border-bottom: none; }
.prow:hover { background: var(--bg2); }
/* 📁 ou 📄, jamais « DOSSIER » : c'est la seule chose que cette colonne a à
   dire, et un emoji la dit sans prendre un mot ni une largeur. */
.pkind { flex: 0 0 auto; font-size: 1.15em; line-height: 1; }
.pname {
  flex: 1 1 auto; min-width: 0; font-family: var(--mono); font-size: var(--fs-floor);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.powner { flex: 0 0 auto; font-size: var(--fs-floor); color: var(--fg3); }
/* Au doigt, les actions ne peuvent pas dépendre du survol. Elles restent donc
   là, simplement discrètes. */
.prow .row-actions { flex: 0 0 auto; }

/* ═══════ AU DOIGT, SUR UN ÉCRAN ÉTROIT ═══════
   La ligne porte six choses : une case, un emoji, un nom, un propriétaire et
   trois actions. Sous 700 px il n'y a pas la place — le propriétaire s'efface
   (il se lit dans l'onglet des droits, pas ici), et les actions passent à la
   ligne plutôt que de rogner le nom. */
@media (max-width: 700px) {
  .prow { flex-wrap: wrap; padding: 7px 10px; }
  .prow .powner { display: none; }
  .prow .pname { flex: 1 1 100%; order: -1; }
  .ptree { max-height: 40vh; max-height: 40dvh; }
}

/* Au doigt : le filtre, la ligne et sa case visent 48 px de surface. */
@media (max-width: 1000px), (pointer: coarse) {
  .dlg-filter { min-height: 48px; }
  .prow { min-height: 48px; }
  /* 48 PX DE CIBLE, 26 PX DE DESSIN. Une case native étirée à 48 devient une
     tache dans une ligne de fichier ; ce qui doit faire 48, c'est la SURFACE
     qu'un doigt vise. La boîte prend donc la place, et « appearance:none » +
     un carré peint en son centre rendent le contrôle à sa taille lisible —
     exactement ce que « .task input » et « .code-h .done input » font déjà. */
  .prow input[type="checkbox"] {
    appearance: none; width: 48px; height: 48px; flex: 0 0 48px; margin: 0;
    background: none; border: none; cursor: pointer; position: relative;
  }
  .prow input[type="checkbox"]::before {
    content: ''; position: absolute; left: 11px; top: 11px;
    width: 26px; height: 26px; border: 2px solid var(--line); border-radius: 6px;
    background: var(--bg2);
  }
  .prow input[type="checkbox"]:checked::before {
    background: var(--blue); border-color: var(--blue);
  }
  .prow input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 21px; top: 15px;
    width: 6px; height: 13px; border: solid var(--bg); border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .prow input[type="checkbox"]:focus-visible { outline: 2px solid var(--blue); outline-offset: -6px; }
}

/* ═══════ QUI VOIT QUOI — la matrice des wikis et des comptes ═══════
   Une colonne par compte : à douze wikis et six comptes, c'est la largeur qui
   décide de la lisibilité. Le nom du wiki reste à gauche et ne défile pas avec
   le reste, sinon on coche une case sans savoir sur quelle ligne. */
.matrix-wiki { text-align: left; white-space: nowrap; font-weight: 600;
  position: sticky; left: 0; z-index: 1; background: var(--bg2); }
.tw-mid tbody tr:hover .matrix-wiki { background: var(--bg3); }
/* La case est le geste de cet écran : elle se vise, au doigt comme à la souris. */
.matrix-wiki ~ td input[type=checkbox] { width: 20px; height: 20px; cursor: pointer; }
/* Un partage en ÉCRITURE se voit sans survoler : la case seule dirait « il voit »
   là où il peut aussi écrire. */
td.may-write { box-shadow: inset 0 -3px 0 var(--amber); }
/* Le wiki se déplie d'un clic : un bouton à chevron, ses chapitres en retrait, en graisse normale. */
.matrix-fold { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.matrix-fold:hover, .matrix-fold:focus-visible { color: var(--blue); }
.dlg .tw-mid .matrix-wiki { text-align: left; }
.matrix-sub .matrix-wiki { font-weight: 400; font-size: var(--fs-ui); white-space: normal; min-width: 160px; max-width: min(320px, 50vw); }
.matrix select.inherited { color: var(--fg3); font-style: italic; }
.matrix-wiki ~ td input[type=checkbox]:disabled { cursor: help; opacity: .55; }
@media (max-width: 1000px), (pointer: coarse) {
  .matrix-wiki ~ td input[type=checkbox] { width: 28px; height: 28px; }
}

/* ═══════ « MES PAGES » : UN INTERTITRE PAR WIKI ═══════
   Sans lui, cent quatre-vingts lignes se suivaient sans coupure et deux wikis
   se lisaient comme un seul. Même forme que les familles de la colonne
   (`.nav-fam`) : c'est le même geste de lecture. */
/* UN BANDEAU, PUIS SON CADRE : un intertitre seul ne coupait rien, les lignes
   continuaient de se suivre et deux wikis se lisaient comme un seul
   (22 septembre 2026). C'est la forme du sommaire — UI.md, règle 45. */
.pfam { margin: 28px 0 0; padding: 7px 10px; font-size: var(--fs-floor);
  letter-spacing: .08em; text-transform: uppercase; color: var(--fg2);
  font-weight: 700; background: var(--bg3);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  border-radius: 8px 8px 0 0; }
.pfam:first-child { margin-top: 0; }
.pgroup { border: 1px solid color-mix(in srgb, var(--blue) 30%, var(--line));
  border-top: none; border-radius: 0 0 8px 8px; background: var(--bg3); }
.pgroup > .prow:last-child { border-bottom: none; }

/* ═══════ LA SONDE DE LA PORTE ═══════
   Un verdict VERT se lit comme un verdict, pas comme une ligne d'aide : c'est
   le résultat d'un test qu'on vient de lancer, et il doit se distinguer des
   phrases qui l'entourent (UI.md, règle 1). */
.door-ok { color: var(--green); font-weight: 600; }
.door { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.door > p { margin: 0; }
.reach { font-weight: 700; font-variant-numeric: tabular-nums; }
.reach.none { color: var(--red); }
.reach.some { color: var(--amber); }
.reach.all { color: var(--green); }