/* workflowy.css — styles des composants d'arbre (treeview / treenode).
 *
 * Repris de workflowy-replicate/src/wfreplicate/static/style.css : puce,
 * sous-listes, nom, badge de tag. Le repli/déploi et le chevron sont laissés
 * au rendu natif de Pico sur <details>/<summary> ; on ne fait qu'atténuer le
 * chrome d'accordéon (bordures, gros espacements) pour que ça lise comme un
 * arbre. Tout est préfixé `wf-` et cantonné à un conteneur `.wf`.
 */

/* ====================================================================
 * Fil d'ariane dans la topbar (#app-breadcrumb) — composants maison
 * (<span>/<a> + max-width), PAS le <nav><ul> natif Pico : son séparateur
 * généré en `::after` (position calculée en flux normal) et son dropdown en
 * `position: absolute` ne survivent pas à la bande d'ancêtres scrollable
 * horizontalement ci-dessous (séparateurs mal placés, dropdown clippé par
 * l'overflow-x). Voir breadcrumb.py.
 * ==================================================================== */
.app-breadcrumb {
  flex: 1 1 auto;
  min-width: 0;
  /* ancre du panneau de bascule (.app-crumb-switch-panel) : case, voile et
     panneau sont des siblings du <nav>, pas des enfants (voir breadcrumb.py)
     — l'ancre vit donc ici, sur le conteneur commun, pas sur <nav>. */
  position: relative;
}
/* quand le fil d'ariane est là, c'est lui qui occupe l'espace libre,
   pas l'espaceur auto de la topbar */
.pfx-bar:has(.app-breadcrumb) .pfx-bar__spacer { flex-grow: 0; }

.app-breadcrumb nav[aria-label="breadcrumb"] {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  font-size: 0.8125rem;
}

/* accueil : jamais compressé (juste une icône) — hors de la bande scrollable
   ci-dessous, donc « fixe » de fait, toujours entièrement visible quelle que
   soit la place manquante. */
.app-crumb-home { flex-shrink: 0; }

/* séparateur : un <span> normal dans le flux, pas un pseudo-élément généré
   en position calculée — c'est justement ce qui cassait en bande scrollable. */
.app-crumb-sep {
  flex-shrink: 0;
  padding: 0 0.28rem;
  color: var(--pico-muted-color, var(--u-muted));
}

/* segment générique (accueil, ancêtre, page courante sans bascule…) :
   tronqué en ellipsis au-delà d'un plafond raisonnable. */
.app-crumb-seg {
  display: inline-block;
  max-width: 12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: inherit;
  text-decoration: none;
}
a.app-crumb-seg:hover { color: var(--pico-primary); }
.app-crumb-seg[aria-current] { font-weight: 600; pointer-events: none; }

/* icônes inline (accueil / calendrier / kanban) — voir ux/components/icons.py.
   Taille en `em` : suit le corps du texte du fil d'ariane (0.8125rem) au lieu
   d'une taille fixe ; le décalage vertical aligne l'icône sur la ligne de
   base du texte voisin, comme une police d'icônes. */
.app-breadcrumb nav[aria-label="breadcrumb"] svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  margin-right: 0.2em;
  flex-shrink: 0;
}

/* bande scrollable : ancêtres + dernier maillon (déclencheur de bascule, ou
   nom du nœud + « Kanban » — voir breadcrumb.py) réunis dans le même
   conteneur, tout à droite par défaut. `.app-crumb-scroll-slot` peut se
   compresser pour ne garder qu'une fenêtre étroite ; son CONTENU
   (`.app-crumb-scroll`), lui, ne se compresse jamais — il déborde et défile. */
.app-crumb-scroll-slot {
  flex: 1 1 auto;
  min-width: 3.5em;
  overflow: hidden;
}
.app-crumb-scroll {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;              /* scrollable mais sans barre visible (Firefox) */
  -webkit-overflow-scrolling: touch;
}
.app-crumb-scroll::-webkit-scrollbar { display: none; }  /* idem, Chrome/Safari */
/* chaque segment garde sa taille naturelle (jusqu'à l'ellipsis ci-dessus s'il
   est vraiment très long) : c'est la BANDE qui défile, pas le texte qui
   s'écrase. `wf-edit.js` la scrolle tout à droite par défaut au chargement et
   à chaque rafraîchissement oob du fil d'ariane — le dernier maillon (page
   courante) est donc celui visible par défaut. */
.app-crumb-scroll > * { flex-shrink: 0; }

/* --- bascule vers un frère (remplace le dropdown Pico) : case cachée +
   <label> déclencheur (dans la bande, comme un segment normal) + panneau —
   même mécanique que Drawer/PopMenu (picofasthtml). Case, voile et panneau
   sont rendus HORS du <nav> (voir breadcrumb.py::Breadcrumb) : ni dans
   `.app-crumb-scroll` (jamais rognés par son `overflow-x`, pas besoin de
   repositionnement en JS), ni dans <nav> (échappent au `nav, nav ul {
   display: flex }` de Pico, qui aurait mis le <ul> du panneau en ligne). --- */
.app-crumb-switch-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* `all: unset` : ce <label> précède la case dans le DOM (voir plus haut), et
   le reset Pico `[type=checkbox]~label{display:inline-block;…}` ne cible que
   les labels qui SUIVENT une case (combinateur de sibling suivant) — sans
   ça il hériterait du `label{display:block;margin-bottom:…}` générique de
   Pico. `.app-crumb-seg` (2e classe posée dessus) fournit déjà l'ellipsis. */
.app-crumb-switch {
  /* `all: unset` réinitialise TOUTES les longhands posées par `.app-crumb-seg`
     (2e classe sur ce même <label>, voir breadcrumb.py) — même spécificité
     qu'une classe, cette règle gagne car elle vient après dans la feuille.
     Volontaire pour `max-width` (nom complet visible, pas d'ellipsis interne :
     ce segment défile avec le reste de la bande) ; `flex-shrink`/`overflow`/
     `white-space`/`vertical-align` sont redéclarés ci-dessous car on en a
     encore besoin. Oubli de `flex-shrink` ici = seul CE segment redevenait
     compressible (flex-shrink: 1, valeur initiale) pendant que ses voisins
     restaient à 0 : il absorbait alors TOUTE la compression à lui seul
     (écrasé) et `.app-crumb-scroll` n'avait plus jamais besoin de déborder —
     rien à scroller, le dropdown semblait juste inatteignable. */
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  flex-shrink: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: inherit;
  cursor: pointer;
  font-weight: 600;
}
.app-crumb-switch svg { width: 0.7em; height: 0.7em; margin: 0; flex-shrink: 0; }
.app-crumb-switch:hover { color: var(--pico-primary); }

.app-crumb-switch-scrim {
  position: fixed;
  inset: 0;
  z-index: 1090;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.app-crumb-switch-toggle:checked ~ .app-crumb-switch-scrim {
  opacity: 1;
  pointer-events: auto;
}

.app-crumb-switch-panel {
  position: absolute;
  top: calc(100% + 0.3rem);
  right: 0;
  z-index: 1100;
  min-width: 12rem;
  max-width: min(28rem, 82vw);
  max-height: 60vh;
  overflow: hidden auto;
  background: var(--pico-dropdown-background-color, var(--u-surface));
  border: 1px solid var(--u-line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
  padding: 0.25rem;
  font-size: 0.875rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.3rem);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.app-crumb-switch-toggle:checked ~ .app-crumb-switch-panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.app-crumb-switch-panel ul { list-style: none; margin: 0; padding: 0; }
.app-crumb-switch-panel li a {
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pico-color, var(--u-text));
  text-decoration: none;
}
.app-crumb-switch-panel li a:hover { background: var(--u-halo); }
.app-crumb-switch-panel li a[aria-current]:not([aria-current="false"]) {
  font-weight: 600;
  background: var(--wf-halo);
}

/* ====================================================================
 * Déclencheurs `PopMenu` de la barre d'actions (#app-viewswitch : Liste /
 * Kanban / Calendrier / Aujourd'hui, voir viewswitch.py ; #app-tagfilter :
 * Filtrer par tag/mention, voir tagfilter.py) — classe commune
 * `.app-actionbar-pop` sur le conteneur. Le déclencheur par défaut d'un
 * `PopMenu` (picofasthtml) est un bouton carré icône-seule (`.pfx-iconbtn`,
 * 2.75rem × 2.75rem) ; ici on le fait ressembler aux autres boutons de
 * `.pfx-actionbar` (icône + libellé empilés, même largeur, mobile ET
 * bureau) puisque c'est leur seul et unique déclencheur, la barre d'actions
 * restant visible aux deux tailles.
 * ==================================================================== */
.pfx-actionbar .app-actionbar-pop { flex: 1 1 0; display: flex; }
.pfx-actionbar .app-actionbar-pop .pfx-pop { flex: 1 1 0; display: flex; }
.pfx-actionbar .app-actionbar-pop .pfx-pop__trigger {
  width: 100%;
  height: 100%;
  min-width: 3rem;
  min-height: 2.75rem;
  flex-direction: column;
  gap: 2px;
  padding: 0.2rem;
  border-radius: 8px;
  background: transparent;
  color: var(--u-muted);
}
.pfx-actionbar .app-actionbar-pop .pfx-pop__trigger:hover {
  background: var(--u-halo);
  color: var(--u-text);
}
/* bouton « Filtrer » (tagfilter.py) : couleur d'accent tant qu'au moins un
   filtre tag/mention est actif — `aria-pressed` posé/retiré en JS
   (renderTagFilterTrigger, wf-edit.js). */
.pfx-actionbar .app-tagfilter .pfx-pop__trigger[aria-pressed="true"] {
  color: var(--u-accent);
}
/* le `trigger` (icône + libellé) est passé comme un `<span>` unique
   enveloppant les deux — `display: contents` l'efface de l'arbre de boîtes
   pour que l'icône et le libellé deviennent directement les items du flex
   column ci-dessus (sinon ils restent en ligne l'un à côté de l'autre au
   lieu d'être empilés). */
.pfx-actionbar .app-actionbar-pop .pfx-pop__trigger > span {
  display: contents;
}
/* bureau : `.pfx-actionbar__btn` passe en largeur resserrée sur son contenu
   (voir picofasthtml.css) plutôt qu'étalée sur toute la barre — ces
   déclencheurs doivent suivre la même règle, sinon ils absorbent tout
   l'espace restant de la rangée flex. */
@media (min-width: 768px) {
  .pfx-actionbar .app-actionbar-pop { flex: 0 0 auto; min-width: 4rem; }
  .pfx-actionbar .app-actionbar-pop .pfx-pop { flex: 0 0 auto; }
  .pfx-actionbar .app-actionbar-pop .pfx-pop__trigger { width: auto; min-width: 4rem; }
}
.pfx-pop__item[aria-current] {
  font-weight: 600;
  background: var(--u-halo);
}

/* ====================================================================
 * Panneau du bouton « Filtrer » (barre d'actions, #app-tagfilter, voir
 * tagfilter.py) : nuage de badges tag/mention cliquables, construit en JS
 * (wf-edit.js) à l'ouverture en scannant les badges du sous-arbre affiché
 * — pas de liste verticale façon menu, les badges gardent leur apparence de
 * pastille (`.wf-tag`/`.wf-mention`, mêmes variables `--wf-tag-c`/
 * `--wf-tag-bg` posées en style inline par le JS).
 * ==================================================================== */
.app-tagfilter-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.3rem;
  max-width: 18rem;
}
.app-tagfilter-list--empty {
  display: block;
  color: var(--u-muted);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
}
.app-tagfilter-item {
  border: none;
  cursor: pointer;
  font-family: inherit;
}
/* filtre actif : anneau de la couleur du tag/de la mention autour du badge. */
.app-tagfilter-item[aria-pressed="true"] {
  box-shadow: 0 0 0 2px var(--wf-tag-c, var(--u-accent));
}

/* ====================================================================
 * Puces de filtres actifs (#app-active-filters, voir tagfilter.py) : posée
 * en tout premier enfant de `<main>` (Shell(main_lead=...)), donc hors du
 * `.container` qui porte le contenu. Icône + bouton « tout effacer »
 * statiques (serveur) ; seule `.app-active-filters__list` (une puce par
 * filtre tag/mention actif, même pastille `.wf-tag`/`.wf-mention` + un
 * « × » pour la retirer) est rempli/vidée en JS.
 * ==================================================================== */
.app-active-filters {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem var(--pico-spacing, 1rem);
  border-bottom: 1px solid var(--u-line);
  background: var(--u-halo);
}
.app-active-filters[hidden] { display: none; }
.app-active-filters__icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--u-muted);
}
.app-active-filters__icon svg { width: 16px; height: 16px; display: block; }
.app-active-filters__list {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.app-active-filters__list::-webkit-scrollbar { display: none; }
.app-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.app-filter-chip__close {
  font-size: 13px;
  line-height: 1;
  opacity: 0.7;
}
.app-filter-chip:hover .app-filter-chip__close { opacity: 1; }
/* bouton « tout effacer » : toujours aligné à droite, même quand la liste
   de puces ne remplit pas toute la largeur (`.app-active-filters__list`
   étant `flex:1`, ce bouton reste poussé en bout de ligne). */
.app-active-filters__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.6rem;
  height: 1.6rem;
  margin-left: auto;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--u-muted);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.app-active-filters__clear:hover { background: var(--u-line); color: var(--u-text); }

/* ====================================================================
 * Vue recherche : champ dans la topbar (#app-breadcrumb) + résultats au
 * centre (.wf-search). Voir ux/components/search.py. `input[type=search]`
 * natif Pico (icône loupe + croix d'effacement intégrées) — on ne touche
 * qu'au gabarit pour l'aligner sur la hauteur de la topbar, jamais au fond/
 * padding qui porterait l'icône. `!important` sur la marge : le sélecteur
 * Pico visé (`input:not([type=...])`) est plus spécifique qu'une classe
 * seule, et sans ça sa marge basse par défaut (~1rem) désaxe le champ vers
 * le haut de la topbar (tout l'espace libre reste sous le champ).
 * ==================================================================== */
.app-search {
  width: 100%;
  margin: 0 !important;
  --pico-form-element-spacing-vertical: 0.5rem;
}

.wf.wf-search .wf-refs-list { list-style: none; margin: 12px 0 0; padding: 0; }
.wf.wf-search .app-search__result { padding: 8px 0; }
.wf .app-search__count {
  color: var(--wf-muted);
  font-weight: 400;
  font-size: 0.62em;
}
.wf .app-search__excerpt {
  flex-basis: 100%;
  color: var(--wf-muted);
  font-size: 13px;
  line-height: 1.45;
}
.wf .app-search__excerpt mark {
  background: #fde68a;
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}

/* ==================================================================== */

.wf {
  /* palette reprise de maquette-noeuds-editable.html (police système gardée) */
  --wf-bg: #ffffff;
  --wf-surface: #f6f5f2;
  --wf-text: #2c2c2e;
  --wf-secondary: #7a766d;
  --wf-muted: #a6a297;
  --wf-line: #e4e2dc;
  --wf-halo: #dcdad2;
  --wf-dot: #7a766d;
  --wf-accent: #29588f;

  color: var(--wf-text);
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

/* atelier : marge de page quand le composant est prévisualisé seul */
.wf.wf-preview {
  max-width: 800px;
  margin: 0 auto;
  padding: 24px 32px 120px;
}

/* ====================================================================
 * Effet « carte » de la vue centrale d'un nœud (maquette : <main> — fond
 * blanc, bordure, coins arrondis, colonne resserrée et centrée), sur
 * `.wf-tree` spécifiquement : c'est la classe propre à `TreeView` (racines
 * du compte ou nœud zoomé), pas `.wf` — partagée avec les vues kanban et
 * calendrier (mois / jour), qui elles n'ont pas cet effet.
 * `:has()` retrouve son état tout seul après un swap HTMX (changement de
 * vue), pas besoin de le repiloter en JS.
 * ==================================================================== */
.pfx-shell__main:has(.wf-tree) { background: #f6f5f2; } /* = --wf-surface */
.wf .wf-tree {
  max-width: 640px;
  margin-inline: auto;
  background: var(--wf-bg);
  border: 1px solid var(--wf-line);
  border-radius: 12px;
  padding: 12px;
}

/* titre « nu » (racines du compte, résultats de recherche, pages d'erreur de
   l'atelier) — le titre d'une *page de nœud* est un nœud éditable, voir
   `.wf-title-node` plus bas. */
.wf .wf-title {
  font-size: 27px;
  font-weight: 700;
  color: var(--wf-node-color, var(--wf-text));
  margin: 0 0 6px;
}
.wf .wf-empty { color: var(--wf-muted); font-size: 14px; }

/* --- en-tête d'une page de nœud : même anatomie qu'un nœud éditable
   (puce + nom + bouton ⋮, puis note), sans chevron, en plus gros.
   Voir _title_node() / la maquette (`.title-node`). --- */
.wf .wf-title-node > .wf-firstrow { padding: 10px 8px; }
.wf .wf-title-node > .wf-firstrow:hover { background: transparent; }
.wf .wf-title-node .wf-bullet {
  width: 26px;
  height: 26px;
  margin-top: 2px;
  color: var(--wf-node-color, var(--wf-muted));
}
.wf .wf-title-node .wf-bullet svg,
.wf .wf-title-node .wf-bullet--tag svg,
.wf .wf-title-node .wf-bullet--mention svg { width: 20px; height: 20px; }
.wf .wf-title-node .wf-name {
  font-size: 22px;
  font-weight: 650;
  line-height: 1.3;
  color: var(--wf-node-color, var(--wf-text));
}
.wf .wf-title-node .wf-menu-btn { margin-top: 6px; }
/* note du nœud-titre : indentation réduite (8 pad + 26 puce + 8 gap = 42) et
   registre un peu plus aéré que dans l'arbre. */
.wf .wf-title-node > .wf-note {
  margin: -2px 30px 4px 42px;
  font-size: 14px;
  font-style: oblique 4deg;
}

/* filet sous l'en-tête, avant l'arbre (maquette : `.tree-separator`) */
.wf .wf-tree-sep {
  border: 0;
  border-top: 1px solid var(--wf-line);
  margin: 4px 8px 6px;
}

/* --- fil d'ariane (zoom) --- */
.wf .wf-crumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--wf-muted);
  margin-bottom: 4px;
}
.wf .wf-crumbs a { color: var(--wf-muted); text-decoration: none; }
.wf .wf-crumbs a:hover { color: var(--wf-text); text-decoration: underline; }
.wf .wf-crumb-sep { opacity: 0.6; }

/* --- sous-listes --- */
.wf .wf-children,
.wf .wf-children .wf-children {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wf .wf-node { list-style: none; margin: 0; padding: 0; }
.wf .wf-children.wf-top { margin-top: 10px; }
.wf .wf-children .wf-children {
  margin-left: 10px;
  padding-left: 25px;
  border-left: 1px solid var(--wf-line);
}
/* repli : piloté par data-open sur le .wf-node (plus de <details>). Le clic
   sur .wf-caret bascule l'attribut ET poste data-toggle-url (wf-edit.js). */
.wf .wf-node[data-open="false"] > .wf-children { display: none; }

/* filtre d'arbre en direct (barre d'actions, voir tagfilter.py + wf-edit.js) :
   ne touche pas data-open (état persisté côté serveur) — .wf-filter-open
   force juste la visibilité par-dessus, avec une spécificité plus élevée que
   la règle de repli ci-dessus. */
.wf .wf-node.wf-filter-hide { display: none; }
.wf .wf-node.wf-filter-open[data-open="false"] > .wf-children { display: block; }

/* --- ligne principale : chevron + puce + nom + bouton menu --- */
.wf .wf-firstrow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 8px;
}
.wf .wf-firstrow:hover { background: var(--wf-surface); }

/* chevron plier/déplier (<button>) — clic géré par wf-edit.js */
.wf .wf-caret {
  position: relative;
  z-index: 2;               /* prime sur la puce voisine au toucher */
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin: 2px 0 0 0;        /* annule le margin-bottom des <button> Pico */
  padding: 0;
  border: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-muted);
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.15s ease, color 0.12s ease;
}
.wf .wf-caret svg { width: 10px; height: 10px; pointer-events: none; }
.wf .wf-caret:hover { color: var(--wf-text); }
.wf .wf-caret:focus { outline: none; }
.wf .wf-caret:focus-visible { outline: 2px solid var(--wf-accent); outline-offset: 1px; }
.wf .wf-caret:active { color: var(--wf-text); }
.wf .wf-node.isGroup[data-open="false"] > .wf-firstrow > .wf-caret {
  transform: rotate(-90deg);
}
.wf .wf-node.isLeaf > .wf-firstrow > .wf-caret {
  visibility: hidden;
  pointer-events: none;
}
/* sans survol (tactile) : cible de tap agrandie (~40 px) sans décaler la
   mise en page — le chevron minuscule est sinon quasi impossible à viser et
   le tap tombe sur la puce (= zoom) au lieu de plier/déplier. */
@media (hover: none) {
  .wf .wf-node.isGroup > .wf-firstrow > .wf-caret::after {
    content: "";
    position: absolute;
    inset: -10px -11px;
  }
}

/* bouton menu du nœud : apparaît au survol de la ligne (toujours visible au
   tactile, faute de survol) */
.wf .wf-menu-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0 0;               /* annule le margin-bottom des <button> Pico */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wf-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.wf .wf-menu-btn svg { width: 14px; height: 14px; display: block; }
.wf .wf-firstrow:hover .wf-menu-btn,
.wf .wf-menu-btn:focus-visible,
.wf .wf-menu-btn.is-open { opacity: 1; }
.wf .wf-menu-btn:hover { background: var(--wf-line); color: var(--wf-text); }
@media (hover: none) { .wf .wf-menu-btn { opacity: 0.55; } }

/* --- nœuds fichier / dossier (lot 8 : dépôt drag-and-drop) ------------- */
/* la puce garde son gabarit ; seule l'icône change (dossier / feuille). */
.wf .wf-bullet--file svg,
.wf .wf-bullet--folder svg { width: 13px; height: 13px; }
.wf .wf-bullet--folder { color: var(--wf-muted); }

/* taille du fichier, à droite du nom */
.wf .wf-file-size {
  flex-shrink: 0;
  align-self: center;
  margin-left: 8px;
  font-size: 11px;
  color: var(--wf-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* boutons « œil » (aperçu) et « flèche » (téléchargement), à droite du nom */
.wf .wf-file-dl,
.wf .wf-file-eye {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 1px 0 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--wf-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.wf .wf-file-dl svg,
.wf .wf-file-eye svg { width: 14px; height: 14px; display: block; }
.wf .wf-firstrow:hover .wf-file-dl,
.wf .wf-firstrow:hover .wf-file-eye,
.wf .wf-file-dl:focus-visible,
.wf .wf-file-eye:focus-visible { opacity: 1; }
.wf .wf-file-dl:hover,
.wf .wf-file-eye:hover { background: var(--wf-line); color: var(--wf-text); }
@media (hover: none) {
  .wf .wf-file-dl,
  .wf .wf-file-eye { opacity: 0.55; }
}

/* vignette d'un fichier image, sous la ligne principale */
.wf .wf-file-thumb-link {
  display: inline-block;
  margin: 2px 0 4px 34px;            /* aligné sur le texte, après la puce */
}
.wf .wf-file-thumb {
  display: block;
  max-width: 260px;
  max-height: 200px;
  width: auto;
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--wf-line);
}

/* cible de dépôt survolée pendant un glisser de fichiers */
.wf .wf-file-dropzone {
  outline: 2px dashed var(--wf-accent, #29588f);
  outline-offset: -2px;
  border-radius: 6px;
  background: rgba(61, 139, 253, 0.06);
}
#wf-root.wf-file-dropzone { display: block; min-height: 40px; }

/* petit bandeau de progression pendant l'upload */
.wf-upload-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  padding: 8px 16px;
  border-radius: 999px;
  background: #1a1a1a;
  color: #fff;
  font: 500 13px/1.4 system-ui, sans-serif;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.wf-upload-toast--err { background: #c92a2a; }

/* --- popup de prévisualisation d'un fichier (PDF / Markdown / .feature) --- */
.wf-preview__scrim {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.45);
}
.wf-preview {
  position: fixed;
  z-index: 10001;
  inset: 4vh 4vw;
  margin: auto;
  max-width: 900px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.3);
  overflow: hidden;
}
.wf-preview__inner {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.wf-preview__inner--loading {
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--wf-muted);
}
.wf-preview__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--wf-line);
  flex: none;
}
.wf-preview__icon { display: flex; color: var(--wf-muted); }
.wf-preview__icon svg { width: 18px; height: 18px; }
.wf-preview__title {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf-preview__dl {
  flex: none;
  font-size: 12px;
  color: var(--wf-accent);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 6px;
}
.wf-preview__dl:hover { background: var(--wf-halo); }
.wf-preview__close {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--wf-muted);
  cursor: pointer;
}
.wf-preview__close:hover { background: var(--wf-line); color: var(--wf-text); }
.wf-preview__body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: #fbfbfc;
}
.wf-preview__frame {
  width: 100%;
  height: 100%;
  min-height: 60vh;
  border: 0;
  background: #fff;
}
.wf-preview__body--pdf,
.wf-preview .wf-preview__body:has(.wf-preview__frame) { overflow: hidden; }
.wf-preview__md,
.wf-preview__code {
  padding: 20px 24px;
  margin: 0;
}
.wf-preview__md {
  font-size: 14px;
  line-height: 1.6;
  color: var(--wf-text);
}
.wf-preview__md h1,
.wf-preview__md h2,
.wf-preview__md h3 { line-height: 1.3; margin: 1.2em 0 0.5em; }
.wf-preview__md h1:first-child,
.wf-preview__md h2:first-child { margin-top: 0; }
.wf-preview__md pre {
  background: #f2f3f5;
  padding: 12px 14px;
  border-radius: 8px;
  overflow-x: auto;
}
.wf-preview__md code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
}
.wf-preview__md :not(pre) > code {
  background: #f2f3f5;
  padding: 1px 4px;
  border-radius: 4px;
}
.wf-preview__md table { border-collapse: collapse; }
.wf-preview__md th,
.wf-preview__md td { border: 1px solid var(--wf-line); padding: 4px 8px; }
.wf-preview__md img { max-width: 100%; height: auto; }
.wf-preview__code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
  color: var(--wf-text);
  overflow-x: auto;
}
.wf-preview__code .g-kw { color: #7048e8; font-weight: 700; }
.wf-preview__code .g-tag { color: #1971c2; }
.wf-preview__code .g-comment { color: var(--wf-muted); font-style: italic; }
body.wf-preview-open { overflow: hidden; }

@media (max-width: 640px) {
  .wf-preview { inset: 0; max-height: 100vh; border-radius: 0; }
}

/* --- bouton « Ajouter un nœud » sous l'arbre (ajoute en fin de liste) --- */
.wf .wf-add-end {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 0 34px;              /* aligné sur le texte, après la puce */
  padding: 3px 10px 3px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--wf-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.wf .wf-add-end:hover,
.wf .wf-add-end:focus-visible {
  opacity: 1;
  color: var(--wf-text);
  background: var(--wf-line);
  outline: none;
}
.wf .wf-add-end__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--wf-halo);
  font-size: 13px;
  line-height: 1;
}

/* --- rétroliens (page d'un nœud) : « Référencé par » --- */
.wf .wf-refs {
  margin-top: 26px;
  padding-top: 14px;
  border-top: 1px solid var(--wf-line);
}
.wf .wf-refs-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--wf-muted);
  margin: 0 0 8px;
}
.wf .wf-refs-list { list-style: none; margin: 0; padding: 0; }
.wf .wf-ref {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--wf-line);
}
.wf .wf-ref-name { color: var(--wf-text); text-decoration: none; font-size: 15px; }
.wf .wf-ref-name:hover { text-decoration: underline; }
.wf .wf-ref-path { color: var(--wf-muted); font-size: 12px; }
.wf .wf-ref-field {
  color: var(--wf-muted);
  font-size: 11px;
  border: 1px solid var(--wf-line);
  border-radius: 8px;
  padding: 0 6px;
}

/* --- note : 2e ligne sous le nom (.secondrow de la maquette). Enfant direct
   du .wf-node, alignée sous le nom (8 pad + 16 caret + 8 gap + 18 puce + 8 gap
   = 58px). Éditable au clic ; `Maj+Entrée` la crée, un blur à vide la retire
   (wf-edit.js). --- */
.wf .wf-note {
  display: block;
  margin: -3px 38px 6px 58px;
  padding: 1px 6px;
  color: var(--wf-secondary);
  font-size: 12.5px;
  font-style: oblique 6deg;
  line-height: 1.45;
  white-space: pre-wrap;
  cursor: text;
  outline: none;
  border-radius: 4px;
}
.wf .wf-note:focus { background: var(--wf-bg); box-shadow: 0 0 0 1px var(--wf-accent); }
/* note vide (juste créée, en cours de saisie) : garder une cible cliquable */
.wf .wf-note:empty { min-height: 1.1em; min-width: 6ch; }
.wf .wf-note a:not(.wf-tag) { color: var(--wf-accent); text-decoration: none; }
.wf .wf-note a:not(.wf-tag):hover { text-decoration: underline; }

/* --- puce = icône de type (maquette : `.type-icon`) + lien de zoom + poignée
   de drag. Rond / étiquette / personne en SVG `currentColor`, teinté à la
   couleur propre du nœud (`--wf-node-color`). --- */
.wf .wf-bullet {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--wf-node-color, var(--wf-dot));
  transition: background 0.12s ease, color 0.12s ease;
}
.wf .wf-bullet svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.wf .wf-bullet--tag svg,
.wf .wf-bullet--mention svg { width: 15px; height: 15px; }
/* pastille grise : au survol, ET en permanence sur une branche repliée */
.wf .wf-bullet:hover,
.wf .wf-node.isGroup[data-open="false"] > .wf-firstrow > .wf-bullet {
  background: var(--wf-halo);
}
.wf .wf-bullet:hover { color: var(--wf-node-color, var(--wf-accent)); }

/* --- nom : conteneur flex:1 de la ligne. `contenteditable` posé au clic par
   wf-edit.js et retiré au blur (pas de host d'édition permanent). --- */
.wf .wf-name {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--wf-text);
  cursor: text;
  border-radius: 4px;
}
.wf .wf-name.done { opacity: 0.37; text-decoration: line-through; }
.wf .wf-name a:not(.wf-tag) { color: var(--wf-accent); text-decoration: none; }
.wf .wf-name a:not(.wf-tag):hover { text-decoration: underline; }

/* lien hypertexte (render_rich -> <a class="wf-link" target rel>). Texte
   éditable : ce n'est pas une pastille atomique. */
.wf .wf-link {
  color: var(--wf-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--wf-accent) 40%, transparent);
  text-underline-offset: 2px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.wf .wf-link:hover { text-decoration-color: currentColor; }
.wf .wf-name { white-space: pre-wrap; overflow-wrap: anywhere; }
.wf .wf-name[contenteditable] { outline: none; }
.wf .wf-name[contenteditable]:focus {
  background: var(--wf-bg);
  box-shadow: 0 0 0 1px var(--wf-accent);
}
/* nœud vide : sans largeur mini il serait incliquable / sans curseur visible */
.wf .wf-name:empty {
  display: inline-block;
  min-width: 6ch;
  min-height: 1.2em;
}

/* surlignage (SelActionBar) : <span style="background-color:…"> — on force un
   texte sombre lisible sur la couleur marqueur, quel que soit le thème, et un
   léger arrondi. */
.wf .wf-name span[style*="background"],
.wf .wf-note span[style*="background"] {
  color: #1f2933;
  border-radius: 2px;
  padding: 0 1px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- drag-and-drop (lot 4, voir wf-edit.js) --- */
.wf .wf-bullet {
  touch-action: none;          /* le drag tactile ne scrolle pas la page */
  -webkit-user-drag: none;     /* pas de drag natif du lien */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none; /* iOS : pas de loupe / menu au appui long */
}
/* pendant un drag tactile : plus de scroll/zoom déclenché par le doigt, plus
   de sélection de texte (l'auto-scroll programmé via scrollBy marche encore) */
body.wf-dnd-active { touch-action: none; }
body.wf-dnd-active * { -webkit-user-select: none; user-select: none; }
.wf .wf-node.wf-dragging { opacity: 0.4; }

/* --- sélection multi-nœuds (copier/coller, voir wf-edit.js) --- */
body.wf-node-selecting { -webkit-user-select: none; user-select: none; }
body.wf-node-selecting .wf-name { cursor: default; }
.wf .wf-node.wf-selected > .wf-firstrow {
  background: var(--wf-accent, #29588f);
  background: color-mix(in srgb, var(--wf-accent, #29588f) 16%, transparent);
  border-radius: 6px;
}
.wf-drag-ghost {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  max-width: 40ch;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 2px 10px;
  border-radius: 4px;
  background: var(--wf-halo, #dce0e2);
  color: var(--wf-text, #2a3135);
  font: 14px -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  opacity: 0.95;
}
.wf-drop-line {
  position: fixed;               /* coords viewport (cf. drawIndicator) */
  z-index: 9998;
  height: 2px;
  border-radius: 2px;
  background: var(--wf-accent, #29588f);
  pointer-events: none;
}
.wf-drop-line::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--wf-accent, #29588f);
  background: transparent;
}
.wf-drop-line--child { opacity: 0.9; }

/* --- badge de tag (#…) et pastille de date (<time>) ---
   `.wf-tag` non scopé à `.wf` : le menu déroulant (wf-edit.js) est monté sur
   <body>. La couleur vient d'une variable posée en style inline par
   render_rich / tagmenu.py (`--wf-tag-c` + `--wf-tag-bg`). --- */
.wf-tag,
.wf-mention,
.wf .wf-date {
  display: inline-block;
  border-radius: 999px;
  padding: 1px 9px;
  margin: 0 2px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
}
/* dans les champs éditables de l'outline : pas de marge horizontale —
   l'espacement vient des ancres &nbsp; posées autour de chaque pastille par
   render_rich (voir consigne §2), sinon on cumule marge + espace visible. */
.wf .wf-name .wf-tag,
.wf .wf-name .wf-mention,
.wf .wf-name .wf-date,
.wf .wf-note .wf-tag,
.wf .wf-note .wf-mention,
.wf .wf-note .wf-date {
  margin-left: 0;
  margin-right: 0;
}
/* dans l'outline : marge verticale négative pour que le badge (padding +
   bordure + line-height) n'agrandisse PAS la ligne — sinon une ligne « avec
   tag / mention / date » est plus haute qu'une ligne de texte nu et l'outline
   paraît irrégulier. (Hors outline — menus, fil d'ariane — pas de compensation.) */
.wf .wf-name .wf-tag,
.wf .wf-name .wf-mention,
.wf .wf-name .wf-date,
.wf .wf-note .wf-tag,
.wf .wf-note .wf-mention,
.wf .wf-note .wf-date {
  margin-top: -6px;
}
/* Tag ET mention : une seule règle, entièrement pilotée par --wf-tag-c /
   --wf-tag-bg (couleur du nœud référencé). Seul le rayon des coins distingue
   les deux (tag = capsule, mention = coins plus carrés). */
.wf-tag,
.wf-mention {
  background: var(--wf-tag-bg, rgba(61, 139, 253, 0.12)) !important;
  color: var(--wf-tag-c, #3d8bfd) !important;
  border: 1px solid
    color-mix(in srgb, var(--wf-tag-c, #3d8bfd) 45%, transparent) !important;
  text-decoration: none !important;
  cursor: pointer;
}
.wf-tag:hover,
.wf-mention:hover { filter: brightness(0.95) saturate(1.15); }
.wf-mention { border-radius: 5px; }
.wf .wf-date {
  /* Fond opaque plutôt qu'un `rgba(240, 140, 0, 0.14)` : c'est exactement la
     même couleur une fois aplatie, mais le contraste devient vérifiable (les
     analyseurs ignorent l'alpha et jugent sur l'orange plein). */
  background: #fdefdb;
  /* #b26a00 ne donnait que 3.74:1 ici ; assombri à 5.35:1 (WCAG AA) sans
     changer de teinte. */
  color: #8f5500;
}
.wf .wf-date::before { content: "📅"; margin-right: 4px; font-size: 11px; }
.wf .wf-date[data-cal] { cursor: pointer; }
.wf .wf-date[data-cal]:hover { background: #fbe3c2; }  /* idem, 4.86:1 */

/* --- badge à deux zones : .ft-badge__quick (quickaction) / .ft-badge__more
   (badgemenu ; appui long sur tactile) — voir ux/components/badge.py +
   wf-edit.js. Le badge reste UN SEUL contenteditable=false (ancres consigne §2). */
.ft-badge {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  padding: 0 !important;      /* le padding passe sur .ft-badge__quick */
}
.ft-badge__quick,
.ft-badge__more {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;   /* Pico stylerait un <button> en bleu plein */
  color: inherit;
  font: inherit;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.ft-badge__quick { padding: 1px 8px; }
.ft-badge--date .ft-badge__quick::before { content: "📅"; margin-right: 4px; font-size: 11px; }
.wf .wf-date.ft-badge::before { content: none; }   /* l'icône vit sur __quick */
.ft-badge__more {
  padding: 0 4px;
  border-left: 1px solid
    color-mix(in srgb, var(--wf-tag-c, #f08c00) 45%, transparent);
  opacity: 0.6;
}
.ft-badge__more svg { width: 9px; height: 9px; display: block; pointer-events: none; }
.ft-badge__quick:hover { background: color-mix(in srgb, var(--wf-tag-c, #f08c00) 15%, transparent); }
.ft-badge__more:hover { opacity: 1; background: transparent; }

/* --- éditeur de date (badgemenu d'une pastille <time>) — rendu dans la
   boîte .wf-tagmenu par wf-edit.js (badge.py::DateEditor) --- */
.wf-tagmenu--date .wf-tagmenu-inner { padding: 10px; }
.ft-de { display: flex; flex-direction: column; gap: 8px; min-width: 232px; }
.ft-de label { display: flex; flex-direction: column; font-size: 12px; color: var(--wf-muted); gap: 2px; margin: 0; }
.ft-de__head { display: flex; align-items: center; gap: 6px; }
.ft-de__ic {
  appearance: none;
  border: 1px solid var(--wf-line);
  background: var(--wf-surface);
  color: var(--wf-secondary);
  cursor: pointer;
  padding: 5px;
  border-radius: 7px;
  line-height: 0;
}
.ft-de__ic svg { width: 15px; height: 15px; display: block; }
.ft-de__ic:hover { color: var(--wf-text); }
.ft-de__ic[aria-pressed="true"] {
  background: color-mix(in srgb, var(--wf-accent) 12%, transparent);
  border-color: var(--wf-accent);
  color: var(--wf-accent);
}

/* --- mini calendrier façon macOS (ft-calendar.js + badge.py::Calendar) --- */
.ft-cal {
  --ft-cal-accent: var(--u-accent, #3d8bfd);
  width: 216px;
  font-size: 12px;
  user-select: none;
}
.ft-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.ft-cal__title { font-weight: 600; font-size: 12.5px; color: var(--wf-text); }
.ft-cal__nav {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  background: transparent;
  color: var(--ft-cal-accent);
  font-size: 16px;
  line-height: 1;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ft-cal__nav:hover { background: color-mix(in srgb, var(--ft-cal-accent) 14%, transparent); }
.ft-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}
.ft-cal__dow {
  text-align: center;
  font-size: 10px;
  font-weight: 600;
  color: var(--wf-muted);
  padding-bottom: 2px;
}
.ft-cal__day {
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
  width: 100%;
  height: 27px;
  background: transparent;
  color: var(--wf-text);
  font: inherit;
  font-size: 12px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ft-cal__day:hover { background: color-mix(in srgb, var(--ft-cal-accent) 14%, transparent); }
.ft-cal__day.is-out { color: var(--wf-muted); opacity: 0.55; }
.ft-cal__day.is-today { font-weight: 700; color: var(--ft-cal-accent); }
.ft-cal__day.is-selected,
.ft-cal__day.is-selected:hover,
.ft-cal__day.is-edge,
.ft-cal__day.is-edge:hover {
  background: var(--ft-cal-accent);
  color: #fff;
  font-weight: 600;
}
/* plage : jours entre start et end — bande continue (coins carrés) */
.ft-cal__day.is-in-range {
  background: color-mix(in srgb, var(--ft-cal-accent) 18%, transparent);
  border-radius: 0;
}
.ft-cal__day.is-start { border-radius: 50% 0 0 50%; }
.ft-cal__day.is-end { border-radius: 0 50% 50% 0; }
.ft-cal[data-cal-range] .ft-cal__grid { gap: 1px 0; }
.ft-cal[data-cal-range] .ft-cal__day { cursor: grab; }
.ft-cal[data-cal-range] .ft-cal__day:active { cursor: grabbing; }

.ft-de input[type="time"] {
  font-size: 13px; padding: 4px 6px; margin: 0; height: auto;
}
.ft-de__times { display: flex; gap: 10px; }
.ft-de__t { flex-direction: column; }
.ft-de__t.is-hidden { display: none; }
.ft-de__actions { display: flex; gap: 6px; margin-top: 2px; }
.ft-de__actions button { font-size: 13px; padding: 5px 12px; margin: 0; width: auto; }
.ft-de__actions .ft-de__clear { background: transparent; color: var(--wf-secondary); border-color: var(--wf-line); }

/* --- explorateur de nœuds (ux/components/explorer.py) — compact, popover --- */
.ft-explorer {
  --ft-exp-accent: var(--u-accent, #3d8bfd);
  width: 264px;
  max-width: 100%;
  font-size: 13px;
  color: var(--wf-text);
  display: flex;
  flex-direction: column;
}
.ft-explorer__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--wf-line);
}
.ft-explorer__up {
  appearance: none;
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  background: var(--wf-surface);
  color: var(--wf-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ft-explorer__up svg { width: 14px; height: 14px; }
.ft-explorer__up:hover:not(:disabled) { color: var(--wf-text); background: var(--wf-line); }
.ft-explorer__up:disabled { opacity: 0.4; cursor: default; }
.ft-explorer__here {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--wf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ft-explorer__list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  max-height: 244px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.ft-explorer__row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 4px;
  border-radius: 6px;
}
.ft-explorer__row.is-folder,
.ft-explorer__row.is-pick { cursor: pointer; }
.ft-explorer__row:hover { background: color-mix(in srgb, var(--ft-exp-accent) 10%, transparent); }
/* mode pick : ligne choisie comme destination */
.ft-explorer__row.is-selected,
.ft-explorer__row.is-selected:hover {
  background: color-mix(in srgb, var(--ft-exp-accent) 18%, transparent);
  box-shadow: inset 0 0 0 1.5px var(--ft-exp-accent);
}
.ft-explorer__row.is-selected .ft-explorer__name { font-weight: 600; }
.ft-explorer__ico {
  flex: 0 0 auto;
  /* même teinte que la puce de l'outline ; --wf-tag-c en style inline pour un
     nœud coloré (tag / mention) — voir explorer.py. */
  color: var(--wf-tag-c, var(--wf-dot, #7a766d));
  line-height: 0;
}
.ft-explorer__ico svg { width: 13px; height: 13px; display: block; }
.ft-explorer__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ft-explorer__count {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--wf-muted);
  background: var(--wf-surface);
  border-radius: 999px;
  padding: 0 6px;
}
.ft-explorer__chev { flex: 0 0 auto; color: var(--wf-muted); line-height: 0; }
.ft-explorer__chev svg { width: 9px; height: 9px; display: block; }
/* mode pick : le chevron devient un bouton « entrer dans le dossier » —
   cible tactile élargie, distincte du clic « choisir cette ligne ». */
button.ft-explorer__enter {
  border: 0;
  background: transparent;
  margin: -5px -4px -5px 0;
  padding: 5px 7px;
  border-radius: 5px;
  cursor: pointer;
  color: var(--wf-muted);
}
button.ft-explorer__enter:hover {
  color: var(--ft-exp-accent);
  background: color-mix(in srgb, var(--ft-exp-accent) 16%, transparent);
}
button.ft-explorer__enter svg { width: 11px; height: 11px; }
/* nœud sans enfant : « entrer » reste possible (il peut devenir un dossier),
   mais on l'estompe tant qu'on ne le survole pas. */
button.ft-explorer__enter.is-empty { opacity: 0.35; }
button.ft-explorer__enter.is-empty:hover { opacity: 1; }
.ft-explorer__row:hover button.ft-explorer__enter.is-empty { opacity: 0.7; }
.ft-explorer__open {
  flex: 0 0 auto;
  color: var(--wf-muted);
  line-height: 0;
  padding: 2px;
  border-radius: 5px;
  opacity: 0;
}
.ft-explorer__open svg { width: 14px; height: 14px; display: block; }
.ft-explorer__row:hover .ft-explorer__open { opacity: 1; }
.ft-explorer__open:hover { color: var(--ft-exp-accent); background: var(--wf-surface); }
@media (hover: none) { .ft-explorer__open { opacity: 0.6; } }

.ft-explorer__empty { color: var(--wf-muted); font-size: 12.5px; padding: 12px 4px; }
.ft-explorer__row.is-blocked {
  opacity: 0.4;
  cursor: not-allowed;
}
.ft-explorer__row.is-blocked:hover { background: transparent; }

/* mode « pick » (Déplacer vers… / Copier vers…) */
.ft-explorer__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wf-secondary);
  padding-bottom: 6px;
}
.ft-explorer__title svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ft-explorer__pick {
  appearance: none;
  width: 100%;
  margin-top: 6px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: var(--ft-exp-accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ft-explorer__pick svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ft-explorer__pick:hover:not(:disabled) { filter: brightness(1.06); }
.ft-explorer__pick:disabled { opacity: 0.45; cursor: not-allowed; }

.ft-explorer__foot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 6px 4px 0;
  border-top: 1px solid var(--wf-line);
  color: var(--ft-exp-accent);
  text-decoration: none;
  font-size: 12.5px;
}
.ft-explorer__foot svg { width: 14px; height: 14px; flex: 0 0 auto; }
.ft-explorer__foot:hover { text-decoration: underline; }

/* --- menu d'actions d'un nœud (bouton ⋮ ; wf-edit.js + nodemenu.py) --- */
.wf-nm {
  position: absolute;               /* coordonnées page (comme .wf-tagmenu) */
  z-index: 10001;
  min-width: 220px;
  max-width: min(300px, 92vw);
  background: #fff;
  border: 1px solid var(--wf-line, #e4e2dc);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18);
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}
.wf-nm__scrim { display: none; }
.wf-nm__inner { padding: 6px; }
.wf-nm__head {
  padding: 6px 10px 8px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--wf-line, #e4e2dc);
  font-size: 12px;
  font-weight: 600;
  color: var(--wf-secondary, #7a766d);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf-nm__list { display: flex; flex-direction: column; gap: 1px; }
.wf-nm__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  margin: 0;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--wf-text, #2c2c2e);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.wf-nm__item:hover,
.wf-nm__item:focus-visible { background: var(--wf-surface, #f6f5f2); outline: none; }
.wf-nm__item--danger { color: #a3392f; }
.wf-nm__item--danger:hover { background: #fbe8e6; }
.wf-nm__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wf-secondary, #7a766d);
}
.wf-nm__item--danger .wf-nm__icon { color: currentColor; }
.wf-nm__icon svg { width: 16px; height: 16px; display: block; }
.wf-nm__label { flex: 1 1 auto; min-width: 0; }
.wf-nm__item--color { cursor: default; gap: 8px; }
.wf-nm__item--color:hover { background: none; }
.wf-nm__item--color .wf-nm__label { flex: 1 1 auto; white-space: nowrap; }
/* <input type=color> : Pico le réduit à néant (appearance:none, border:0,
   width:100%). On restaure la pastille native + on la contraint. */
.wf-nm .wf-nm__color {
  flex: 0 0 auto;
  -webkit-appearance: auto !important;
  appearance: auto !important;
  width: 44px !important;
  height: 28px !important;
  min-width: 44px !important;
  margin: 0 !important;
  padding: 2px !important;
  border: 1px solid var(--wf-line, #e4e2dc) !important;
  border-radius: 6px !important;
  background: #fff !important;
  cursor: pointer;
}
.wf-nm .wf-nm__color::-webkit-color-swatch-wrapper { padding: 0; }
.wf-nm .wf-nm__color::-webkit-color-swatch { border: 0; border-radius: 3px; }
.wf-nm__color-reset {
  flex: 0 0 auto;
  width: 30px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  background: #fff;
  color: var(--wf-secondary);
  cursor: pointer;
  line-height: 1;
}
.wf-nm__color-reset:hover { background: var(--wf-surface); }

/* mobile : tiroir qui remonte du bas + voile */
@media (max-width: 640px) {
  .wf-nm {
    position: fixed;
    right: 0;
    bottom: 0;
    top: auto !important;
    left: 0 !important;
    max-width: none;
    border-radius: 16px 16px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
    animation: wf-nm-up 0.16s ease;
  }
  .wf-nm__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0.28);
  }
  .wf-nm__inner { padding: 8px 8px 12px; }
  .wf-nm__item { min-height: 46px; font-size: 15px; }
}
@keyframes wf-nm-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* --- notification éphémère (wf-edit.js showToast) --- */
.wf-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 10001;
  transform: translate(-50%, 8px);
  padding: 8px 14px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}
.wf-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.wf-toast--error { background: #a3392f; }

/* --- menu déroulant d'un badge de tag (wf-edit.js + tagmenu.py) --- */
.wf-tagmenu {
  /* absolute (coordonnées page) : la popup défile avec le contenu, donc reste
     collée à son badge — y compris quand le clavier mobile pousse la page. */
  position: absolute;
  z-index: 10000;
  min-width: 180px;
  max-width: min(340px, 92vw);
  max-height: 60vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--wf-line, #eceef0);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
}
.wf-tagmenu-inner { padding: 8px; }

/* popover « Déplacer vers… » / « Copier vers… » (wf-edit.js::openExplorer) */
.wf-explorer-pop { padding: 10px; max-width: min(300px, 94vw); max-height: 72vh; }

/* popover de saisie d'URL (bouton 🔗 de la SelActionBar, wf-edit.js::openLinkBar) */
.wf-linkbar {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px;
  min-width: 240px;
  max-width: min(360px, 94vw);
  overflow: visible;
}
.wf-linkbar__input {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  height: 32px;
  padding: 0 8px;
  font-size: 14px;
  border: 1px solid var(--wf-line, #eceef0);
  border-radius: 7px;
  background: var(--wf-bg, #f5f6f7);
  color: var(--wf-text, #2a3135);
}
.wf-linkbar__input:focus { outline: none; box-shadow: 0 0 0 2px var(--wf-accent, #29588f); }
.wf-linkbar__ok {
  flex: 0 0 auto;
  margin: 0;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 600;
  border: 0;
  border-radius: 7px;
  background: var(--wf-accent, #29588f);
  color: #fff;
  cursor: pointer;
}

.wf-tagmenu-head {
  --wf-tagmenu-ctl-h: 30px;      /* hauteur commune badge + boutons d'action */
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--wf-line, #eceef0);
}
/* le badge prend la place libre → les 2 boutons d'action sont poussés à droite */
.wf-tagmenu-badge {
  margin-right: auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
}
/* choix de tag = boutons groupés façon Pico : lignes de taille identique,
   jointives, séparées d'un filet, dans un cadre arrondi (même parti que
   la popup de complétion .wf-tagsug). */
.wf-tagmenu-opts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
  border: 1px solid var(--wf-line, #eceef0);
  border-radius: 8px;
  overflow: hidden;
}
.wf-tagmenu-empty {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--wf-muted, #868c90);
}
.wf-tagopt {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 32px;         /* hauteur commune quel que soit le libellé */
  margin: 0;
  border: 0;
  background: none;
  padding: 5px 10px;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}
.wf-tagopt + .wf-tagopt { border-top: 1px solid var(--wf-line, #eceef0); }
.wf-tagopt:hover { background: var(--wf-line, #eceef0); }
/* bords arrondis + contour à la couleur du tag pour chaque choix */
.wf-tagmenu .wf-tag,
.wf-tagmenu .wf-mention {
  border-color: var(--wf-tag-c, #3d8bfd);
  padding: 2px 11px;
}
.wf-tagmenu .wf-tag { border-radius: 999px; }
.wf-tagmenu .wf-mention { border-radius: 5px; }
.wf-tagopt:focus-visible {
  outline: 2px solid var(--wf-tag-c, #3d8bfd);
  outline-offset: -2px;
}
/* badge de l'en-tête : même hauteur que les boutons, centré dessus */
.wf-tagmenu-head .wf-tag,
.wf-tagmenu-head .wf-mention {
  display: inline-flex;
  align-items: center;
  height: var(--wf-tagmenu-ctl-h, 30px);
  margin: 0;
  padding: 0 12px;
  border-color: var(--wf-tag-c, #3d8bfd);
}
.wf-tagmenu-head .wf-tag { border-radius: 999px; }
.wf-tagmenu-head .wf-mention { border-radius: 6px; }

/* boutons d'action de l'en-tête : icône SVG seule, carré, taille standard,
   fond plein (bleu primaire / orange warning), glyphe blanc. */
.wf-tagact {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wf-tagmenu-ctl-h, 30px);
  height: var(--wf-tagmenu-ctl-h, 30px);
  margin: 0;                    /* neutralise le margin-bottom des <button> Pico */
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--wf-accent, #29588f);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}
.wf-tagact svg { width: 17px; height: 17px; display: block; }
.wf-tagact:focus-visible { outline: 2px solid var(--wf-accent, #29588f); outline-offset: 2px; }
.wf-tagact--view:hover { background: #2f7de8; }
.wf-tagact--danger { background: #e8770c; }
.wf-tagact--danger:hover { background: #d96e0a; }

/* --- complétion « #tag » à la frappe (wf-edit.js + tagmenu.tag_suggest) --- */
.wf-tagsug-pop {
  /* absolute (coordonnées page) : voir .wf-tagmenu. */
  position: absolute;
  z-index: 10000;
  min-width: 180px;
  max-width: min(320px, 92vw);
  max-height: 50vh;
  overflow: auto;
  background: #fff;
  border: 1px solid var(--wf-line, #eceef0);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  font-family: -apple-system, "system-ui", "Segoe UI", Roboto, sans-serif;
}
/* liste = boutons groupés façon Pico : lignes de taille identique, jointives,
   séparées d'un filet, coins extérieurs seuls arrondis. */
.wf-tagsug { padding: 0; display: flex; flex-direction: column; gap: 0; }
.wf-tagsug__opt {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 32px;         /* hauteur commune quel que soit le contenu */
  margin: 0;                /* neutralise le margin-bottom des <button> Pico */
  border: 0;
  background: none;
  padding: 5px 10px;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  line-height: 1.2;
}
.wf-tagsug__opt + .wf-tagsug__opt { border-top: 1px solid var(--wf-line, #eceef0); }
.wf-tagsug__opt:first-child { border-top-left-radius: 9px; border-top-right-radius: 9px; }
.wf-tagsug__opt:last-child { border-bottom-left-radius: 9px; border-bottom-right-radius: 9px; }
.wf-tagsug__opt.is-active { background: var(--wf-halo, rgba(61, 139, 253, 0.12)); }
.wf-tagsug__opt:hover { background: var(--wf-line, #eceef0); }
.wf-tagsug__opt .wf-tag,
.wf-tagsug__opt .wf-mention {
  margin: 0;
  padding: 1px 8px;
  line-height: 1.4;
  pointer-events: none;
}
.wf-tagsug__opt .wf-tag { border-radius: 999px; }
.wf-tagsug__opt .wf-mention { border-radius: 5px; }
.wf-tagsug__new { font-size: 12px; color: var(--wf-muted, #868c90); }
.wf-tagsug__empty {
  display: block;
  padding: 6px;
  font-size: 12px;
  color: var(--wf-muted, #868c90);
}

/* ==================================================================== */
/* Vue calendrier (mois) — voir ux/components/calendar.py                */
/* ==================================================================== */
.wf .wf-cal { max-width: 1000px; }
.wf .wf-cal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
/* ‹ collé à gauche, › collé à droite (position stable en navigation) ; entre
   les deux : nom de la période puis boutons (Aujourd'hui / Mois / n° sem.) */
.wf .wf-cal-headmid {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.wf .wf-cal-nav-next { flex: none; }
.wf .wf-cal-month {
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wf .wf-cal-weeklink {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--wf-muted);
  text-decoration: none;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  padding: 3px 8px;
}
.wf .wf-cal-weeklink:hover { background: var(--wf-line); color: var(--wf-text); }
.wf .wf-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 6px;
  color: var(--wf-text);
  font-size: 1.3rem;
  line-height: 1;
  text-decoration: none;
  background: var(--wf-line);
}
.wf .wf-cal-nav:hover { background: var(--wf-halo); }
.wf .wf-cal-today-btn {
  flex: none;
  font-size: 13px;
  color: var(--wf-accent);
  text-decoration: none;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  padding: 3px 10px;
}
.wf .wf-cal-today-btn:hover { background: var(--wf-line); }

.wf .wf-cal-dow-row,
.wf .wf-cal-week {
  display: grid;
  grid-template-columns: minmax(2.5ch, auto) repeat(7, minmax(0, 1fr));
  gap: 1px;
}
.wf .wf-cal-dow {
  padding: 4px 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--wf-muted);
}
/* colonne des n° de semaine (1re colonne de l'en-tête et de la grille) */
.wf .wf-cal-wk {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4px 6px;
  background: #fafbfc;
  font-size: 11px;
  font-weight: 600;
  color: var(--wf-muted);
  text-decoration: none;
}
a.wf-cal-wk { cursor: pointer; }
a.wf-cal-wk:hover { background: var(--wf-halo); color: var(--wf-text); }
.wf .wf-cal-wk-head {
  text-transform: uppercase;
  background: none;
}
.wf .wf-cal-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--wf-line);
  border: 1px solid var(--wf-line);
  border-radius: 8px;
  overflow: hidden;
}
/* hauteur d'une voie de barre multi-jours + de la zone du n° de jour */
.wf .wf-cal-week { --wf-cal-lane-h: 18px; --wf-cal-daynum-h: 22px; }
.wf .wf-cal-cell {
  background: #fff;
  min-width: 0;
  min-height: 96px;
  padding: 4px 5px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* réserve, sous le n° du jour, la place des barres de la semaine */
.wf .wf-cal-lane-spacer {
  flex: none;
  height: calc(var(--wf-cal-lanes, 0) * var(--wf-cal-lane-h));
}
.wf .wf-cal-week[style*="--wf-cal-lanes:0"] .wf-cal-lane-spacer { display: none; }
.wf .wf-cal-cell.out { background: #fafbfc; }
.wf .wf-cal-cell.out .wf-cal-daynum { color: var(--wf-line); }
.wf .wf-cal-cell.today { background: rgba(61, 139, 253, 0.06); }
.wf .wf-cal-cell.today .wf-cal-daynum {
  background: var(--wf-accent);
  color: #fff;
  border-radius: 50%;
}
.wf .wf-cal-daynum {
  align-self: flex-start;
  min-width: 1.5em;
  height: 1.5em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--wf-muted);
  text-decoration: none;
}
a.wf-cal-daynum:hover { background: var(--wf-halo); border-radius: 50%; color: var(--wf-text); }
.wf .wf-cal-cell.today a.wf-cal-daynum:hover { background: var(--wf-accent); color: #fff; }
.wf .wf-cal-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  min-height: 0;
}
.wf .wf-cal-item {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  line-height: 1.35;
  color: var(--wf-text);
  text-decoration: none;
  padding: 1px 5px;
  border-radius: 4px;
  background: rgba(61, 139, 253, 0.1);
  /* couleur du nœud (menu Options) : liseré à gauche + fond teinté */
  border-left: 3px solid var(--wf-node-color, transparent);
}
.wf .wf-cal-item[style*="--wf-node-color"] {
  background: color-mix(in srgb, var(--wf-node-color) 14%, transparent);
}
.wf .wf-cal-item:hover { background: rgba(61, 139, 253, 0.2); }
.wf .wf-cal-item[style*="--wf-node-color"]:hover {
  background: color-mix(in srgb, var(--wf-node-color) 26%, transparent);
}
.wf .wf-cal-item .wf-tag,
.wf .wf-cal-item .wf-date { pointer-events: none; }
.wf .wf-cal-time { font-weight: 600; color: var(--wf-accent); margin-right: 2px; }
.wf .wf-cal-count { display: block; margin-top: 8px; font-size: 12px; color: var(--wf-muted); }

/* --- plages de plusieurs jours : barre posée sur la semaine ------------- */
.wf .wf-cal-bar {
  grid-row: 1;
  align-self: start;
  position: relative;
  z-index: 1;
  margin-top: calc(var(--wf-cal-daynum-h) + var(--wf-cal-lane, 0) * var(--wf-cal-lane-h));
  height: calc(var(--wf-cal-lane-h) - 2px);
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1;
  color: var(--wf-text);
  text-decoration: none;
  padding: 0 6px;
  border-radius: 3px;
  font-weight: 500;
  background: color-mix(in srgb, var(--wf-node-color, var(--wf-accent)) 28%, #fff);
  box-shadow: inset 3px 0 0 var(--wf-node-color, var(--wf-accent));
}
.wf .wf-cal-bar > * { overflow: hidden; text-overflow: ellipsis; }
.wf .wf-cal-bar:hover {
  background: color-mix(in srgb, var(--wf-node-color, var(--wf-accent)) 42%, #fff);
}
.wf .wf-cal-bar.clip-start {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: none;
  margin-left: -1px;
}
.wf .wf-cal-bar.clip-end {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  margin-right: -1px;
}
.wf .wf-cal-bar-arr { flex: none; opacity: 0.55; font-weight: 700; }
.wf .wf-cal-bar[data-cal-date] {
  cursor: grab;
  touch-action: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.wf .wf-cal-bar.wf-dragging { opacity: 0.4; }

/* glisser-déposer une fiche datée sur un autre jour (wf-edit.js, Pointer
   Events — même mécanique que le drag de l'arbre / du kanban). Seule une
   fiche `is_start` (data-cal-date posé, voir calendar.py) est une poignée. */
.wf .wf-cal-item[data-cal-date] {
  cursor: grab;
  touch-action: none;         /* voir .wf-kan-card / .wf-bullet */
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.wf .wf-cal-item.wf-dragging { opacity: 0.4; }
.wf .wf-cal-cell.wf-drop-target {
  outline: 2px dashed var(--wf-accent, #29588f);
  outline-offset: -2px;
}

/* --- vue jour (clic sur un numéro de jour) --- */
.wf .wf-day-list { margin-top: 14px; }
.wf .wf-day-row {
  display: flex;
  gap: 14px;
  padding: 9px 0 9px 0;
  border-bottom: 1px solid var(--wf-line);
}
.wf .wf-day-row[style*="--wf-node-color"] {
  padding-left: 8px;
  border-left: 3px solid var(--wf-node-color);
}
.wf .wf-day-time {
  flex: 0 0 4rem;
  padding-top: 1px;
  font-size: 13px;
  font-weight: 600;
  color: var(--wf-accent);
}
.wf .wf-day-time.allday { color: var(--wf-muted); font-weight: 400; }
.wf .wf-day-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wf .wf-day-range { color: var(--wf-muted); font-size: 12px; }
.wf .wf-day-empty { display: block; margin-top: 16px; color: var(--wf-muted); font-size: 14px; }

/* ==================================================================== */
/* Vue semaine (agenda éditable au 1/4 h) — ux/components/week.py       */
/* ==================================================================== */
.wf .wf-week {
  --wf-wk-min: 0.9px;          /* px par minute → heure ≈ 54 px */
  --wf-wk-total: 840;          /* (21 h − 7 h) × 60 */
  --wf-wk-cols: 3.25rem repeat(7, minmax(0, 1fr));
  max-width: 1000px;
}
.wf .wf-wk-dayrow,
.wf .wf-wk-band,
.wf .wf-wk-grid {
  display: grid;
  grid-template-columns: var(--wf-wk-cols);
  gap: 1px;
}
.wf .wf-wk-corner { grid-column: 1; }

/* en-tête des jours */
.wf .wf-wk-dayrow { margin-top: 8px; }
.wf .wf-wk-dayhead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 4px 2px;
  text-decoration: none;
  color: var(--wf-text);
  border-radius: 6px;
}
.wf .wf-wk-dayhead:hover { background: var(--wf-halo); }
.wf .wf-wk-dow {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--wf-muted);
}
.wf .wf-wk-daynum { font-size: 15px; font-weight: 600; }
.wf .wf-wk-dayhead.today .wf-wk-daynum {
  background: var(--wf-accent);
  color: #fff;
  border-radius: 999px;
  min-width: 1.7em;
  height: 1.7em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* bande d'en-tête : plages multi-jours + « journée » + hors plage (non éditable) */
.wf .wf-wk-band {
  position: relative;
  margin-top: 2px;
  align-items: start;
}
.wf .wf-wk-bandcell {
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: calc(var(--wf-wk-lanes, 0) * 20px);
}
.wf .wf-wk-bar {
  grid-row: 1;
  align-self: start;
  position: relative;
  z-index: 1;
  margin-top: calc(var(--wf-wk-lane, 0) * 20px);
  height: 18px;
  display: flex;
  align-items: center;
  gap: 2px;
  overflow: hidden;
  white-space: nowrap;
  font-size: 11px;
  line-height: 1;
  font-weight: 500;
  color: var(--wf-text);
  text-decoration: none;
  padding: 0 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--wf-node-color, var(--wf-accent)) 28%, #fff);
  box-shadow: inset 3px 0 0 var(--wf-node-color, var(--wf-accent));
}
.wf .wf-wk-bar:hover {
  background: color-mix(in srgb, var(--wf-node-color, var(--wf-accent)) 42%, #fff);
}
.wf .wf-wk-bar.clip-start { border-top-left-radius: 0; border-bottom-left-radius: 0; box-shadow: none; }
.wf .wf-wk-bar.clip-end { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.wf .wf-wk-pill {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 1.4;
  color: var(--wf-text);
  text-decoration: none;
  padding: 0 4px;
  border-radius: 3px;
  background: var(--wf-surface);
  box-shadow: inset 3px 0 0 var(--wf-node-color, var(--wf-muted));
}
.wf .wf-wk-pill:hover { background: var(--wf-halo); }

/* grille horaire */
.wf .wf-wk-scroll { margin-top: 1px; }
.wf .wf-wk-scroll > .wf-wk-grid { margin-top: 1px; }
.wf .wf-wk-grid {
  background: var(--wf-line);
  border: 1px solid var(--wf-line);
  border-radius: 8px;
  overflow: hidden;
}
.wf .wf-wk-hours {
  position: relative;
  background: #fff;
  height: calc(var(--wf-wk-min) * var(--wf-wk-total));
}
.wf .wf-wk-hour {
  position: absolute;
  right: 6px;
  font-size: 10px;
  line-height: 1;
  color: var(--wf-muted);
}
.wf .wf-wk-col {
  position: relative;
  background: #fff;
  height: calc(var(--wf-wk-min) * var(--wf-wk-total));
  background-image:
    repeating-linear-gradient(
      to bottom,
      var(--wf-line) 0 1px,
      transparent 1px calc(15 * var(--wf-wk-min))
    ),
    repeating-linear-gradient(
      to bottom,
      color-mix(in srgb, var(--wf-line) 55%, #fff) 0 1px,
      transparent 1px calc(60 * var(--wf-wk-min))
    );
}
.wf .wf-wk-col.today { background-color: rgba(41, 88, 143, 0.04); }
.wf .wf-wk-col.wf-drop-target { outline: 2px dashed var(--wf-accent); outline-offset: -2px; }

.wf .wf-wk-ev {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 12px;
  overflow: hidden;
  padding: 1px 5px 2px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 1.25;
  color: var(--wf-text);
  text-decoration: none;
  background: color-mix(in srgb, var(--wf-node-color, var(--wf-accent)) 20%, #fff);
  box-shadow: inset 3px 0 0 var(--wf-node-color, var(--wf-accent));
  cursor: grab;
  touch-action: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  z-index: 1;
}
.wf .wf-wk-ev:hover {
  background: color-mix(in srgb, var(--wf-node-color, var(--wf-accent)) 32%, #fff);
}
.wf .wf-wk-ev.wf-dragging { opacity: 0.5; }
.wf .wf-wk-ev-time { font-weight: 600; color: var(--wf-accent); margin-right: 3px; }
.wf .wf-wk-ev-resize {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  cursor: ns-resize;
}
.wf .wf-wk-sel {
  position: absolute;
  left: 2px;
  right: 2px;
  border: 1px solid var(--wf-accent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--wf-accent) 18%, #fff);
  pointer-events: none;
  z-index: 3;
}

/* modale d'événement partagée (semaine / mois / jour) — ux/components/eventdialog.py */
.wf .wf-evdlg {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wf .wf-evdlg[hidden] { display: none; }
.wf .wf-evdlg__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); }
.wf .wf-evdlg__form {
  position: relative;
  width: min(92vw, 380px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--wf-bg);
  border: 1px solid var(--wf-line);
  border-radius: 12px;
  padding: 16px 18px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wf .wf-evdlg__title { font-weight: 700; font-size: 15px; }
.wf .wf-evdlg__crumb {
  font-size: 12px;
  color: var(--wf-muted);
  padding: 3px 8px;
  background: var(--wf-surface);
  border-radius: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf .wf-evdlg__crumb[hidden] { display: none; }
.wf .wf-evdlg__when { font-size: 13px; color: var(--wf-muted); }
.wf .wf-evdlg__form label,
.wf .wf-evdlg__lbl {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wf-secondary);
}
.wf .wf-evdlg__form input:not([type="color"]):not([type="hidden"]),
.wf .wf-evdlg__form textarea {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--wf-text);
  padding: 6px 8px;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
}
/* sélecteur de couleur : identique au reste de l'app (nodemenu._color_row) */
.wf .wf-evdlg__colors { display: flex; flex-direction: column; gap: 5px; }
.wf .wf-evdlg__colorrow {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wf-evdlg__colorrow .wf-nm__color {
  -webkit-appearance: auto;
  appearance: auto;
  width: 44px;
  height: 28px;
  min-width: 44px;
  margin: 0;
  padding: 2px;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.wf-evdlg__colorrow .wf-nm__color::-webkit-color-swatch-wrapper { padding: 0; }
.wf-evdlg__colorrow .wf-nm__color::-webkit-color-swatch { border: 0; border-radius: 3px; }
.wf .wf-evdlg__colorstate { font-size: 12px; color: var(--wf-muted); }
.wf .wf-evdlg__form.wf-evdlg--has-color .wf-evdlg__colorstate { color: var(--wf-text); }
.wf .wf-evdlg__open {
  font-size: 12px;
  color: var(--wf-accent);
  text-decoration: none;
}
.wf .wf-evdlg__open:hover { text-decoration: underline; }
.wf .wf-evdlg__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 2px;
}

/* événements cliquables (ouvrent la modale) */
.wf a.wf-cal-item,
.wf a.wf-cal-bar,
.wf .wf-day-row[data-cal-node] { cursor: pointer; }

/* ==================================================================== */
/* Vue kanban (enfants-tags d'un nœud = colonnes) — ux/components/kanban.py */
/* ==================================================================== */
.wf .wf-kan { max-width: 100%; }
.wf .wf-kan-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.wf .wf-kan-back {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--wf-accent);
  text-decoration: none;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  padding: 3px 10px;
}
.wf .wf-kan-back:hover { background: var(--wf-line); }
.wf .wf-kan-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--wf-node-color, var(--wf-text));
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf .wf-kan-board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 10px;
}
.wf .wf-kan-col {
  flex: 0 0 auto;
  width: 264px;
  max-height: calc(100vh - 220px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  background: #fafbfc;
}
.wf .wf-kan-colhead {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wf .wf-kan-tag {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 11px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 20px;
  text-decoration: none;
  background: var(--wf-tag-bg, rgba(61, 139, 253, 0.12));
  color: var(--wf-tag-c, #3d8bfd);
  border: 1px solid var(--wf-tag-c, #3d8bfd);
}
.wf .wf-kan-tag:hover { filter: brightness(0.95) saturate(1.15); }
.wf .wf-kan-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--wf-muted);
}
.wf .wf-kan-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.wf .wf-kan-card {
  display: block;
  padding: 7px 9px;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: #fff;
  color: var(--wf-text);
  font-size: 13.5px;
  line-height: 1.4;
  text-decoration: none;
  /* glisser-déposer tactile (wf-edit.js) — voir .wf-bullet pour le détail de
     chaque propriété : sans `touch-action: none` posé AVANT le geste, iOS
     décide « scroll » dès le premier mouvement et ignore preventDefault(). */
  touch-action: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.wf .wf-kan-card:hover { border-color: var(--wf-halo); background: var(--wf-line); }
.wf .wf-kan-card.done .wf-kan-card__name { opacity: 0.45; text-decoration: line-through; }
.wf .wf-kan-card__name { display: block; }
.wf .wf-kan-card__path {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  color: var(--wf-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf .wf-kan-empty { font-size: 12px; color: var(--wf-muted); padding: 2px; }
.wf .wf-kan-cards--empty { min-height: 48px; }

/* glisser-déposer d'une fiche entre colonnes (wf-edit.js, Pointer Events —
   même mécanique que le drag de l'arbre, voir .wf-drag-ghost plus haut). */
.wf .wf-kan-card.wf-dragging { opacity: 0.4; }
.wf .wf-kan-cards.wf-drop-target {
  background: var(--wf-halo);
  outline: 2px dashed var(--wf-accent, #29588f);
  outline-offset: -2px;
  border-radius: 6px;
}

/* --- Vue Board (board.py) : colonnes = enfants, cartes = petits-enfants.
   Titres = `.wf-name` éditables (styles hérités plus haut). --- */
.wf .wf-bd-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}
.wf .wf-bd-back {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--wf-accent);
  text-decoration: none;
  border: 1px solid var(--wf-line);
  border-radius: 6px;
  padding: 3px 10px;
}
.wf .wf-bd-back:hover { background: var(--wf-line); }
.wf .wf-bd-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--wf-node-color, var(--wf-text));
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wf .wf-bd-board {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  overflow-x: auto;
  padding-bottom: 10px;
}
.wf .wf-bd-col {
  flex: 0 0 auto;
  width: 264px;
  /* garde au moins ~5 cartes visibles même sur un viewport court (la page
     défile alors) plutôt que de tout écraser dans un mince scroll interne. */
  max-height: max(calc(100vh - 220px), 260px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--wf-line);
  border-radius: 10px;
  background: #fafbfc;
}
.wf .wf-bd-col--add {
  background: transparent;
  border-style: dashed;
}
.wf .wf-bd-colhead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.wf .wf-bd-colhead .wf-name { flex: 1 1 auto; font-size: 14px; }
.wf .wf-bd-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--wf-muted);
  flex: 0 0 auto;
}
.wf .wf-bd-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
  overflow-y: auto;
  margin: 0 -4px;
  padding: 0 4px;
}
.wf .wf-bd-cards--empty { min-height: 40px; }
.wf .wf-bd-card {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 7px 8px;
  border: 1px solid var(--wf-line);
  border-radius: 7px;
  background: #fff;
  color: var(--wf-text);
  font-size: 13.5px;
  line-height: 1.4;
  /* glisser-déposer tactile : voir .wf-kan-card / .wf-bullet pour le détail. */
  touch-action: none;
  -webkit-user-drag: none;
}
.wf .wf-bd-card:hover { border-color: var(--wf-halo); }
.wf .wf-bd-card .wf-name { flex: 1 1 auto; min-width: 0; }
.wf .wf-bd-card.done .wf-name { opacity: 0.45; text-decoration: line-through; }
.wf .wf-bd-grip,
.wf .wf-bd-open {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: var(--wf-muted);
  opacity: 0;
  transition: opacity 0.12s ease;
}
.wf .wf-bd-grip { cursor: grab; touch-action: none; align-self: stretch; }
.wf .wf-bd-open { text-decoration: none; }
.wf .wf-bd-card:hover .wf-bd-grip,
.wf .wf-bd-card:hover .wf-bd-open,
.wf .wf-bd-colhead:hover .wf-bd-open,
.wf .wf-bd-grip:focus-visible,
.wf .wf-bd-open:focus-visible { opacity: 1; }
.wf .wf-bd-grip svg,
.wf .wf-bd-open svg { width: 14px; height: 14px; display: block; pointer-events: none; }
.wf .wf-bd-card.wf-dragging { opacity: 0.4; }
.wf .wf-bd-cards.wf-drop-target {
  background: var(--wf-halo);
  outline: 2px dashed var(--wf-accent, #29588f);
  outline-offset: -2px;
  border-radius: 6px;
}
.wf .wf-bd-addfield {
  width: 100%;
  margin: 0;
  padding: 5px 7px;
  font: inherit;
  font-size: 13px;
  color: var(--wf-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
}
.wf .wf-bd-addfield::placeholder { color: var(--wf-muted); }
.wf .wf-bd-addfield:hover { background: var(--wf-line); }
.wf .wf-bd-addfield:focus {
  outline: none;
  background: var(--wf-surface, #fff);
  border-color: var(--wf-accent);
}
.wf .wf-bd-addcol { flex: 0 0 auto; width: 240px; }

@media (max-width: 640px) {
  .wf .wf-bd-col { width: min(272px, 82vw); }
  .wf .wf-bd-grip, .wf .wf-bd-open { opacity: 0.55; }
  .wf .wf-kan-col { width: min(272px, 82vw); }
  .wf .wf-day-time { flex-basis: 3.25rem; font-size: 12px; }
  .wf .wf-cal-cell { min-height: 62px; padding: 2px 3px 4px; }
  .wf .wf-cal-daynum { font-size: 11px; }
  .wf .wf-cal-item { font-size: 10.5px; padding: 0 3px; }
  .wf .wf-cal-bar { font-size: 10px; padding: 0 4px; }
  .wf .wf-cal-week { --wf-cal-lane-h: 16px; --wf-cal-daynum-h: 19px; }
  .wf .wf-cal-month { font-size: 18px; }
  .wf .wf-cal-headmid { flex-wrap: wrap; gap: 6px; }
  .wf .wf-cal-wk { padding: 2px 2px; font-size: 9.5px; }
  .wf .wf-cal-dow-row,
  .wf .wf-cal-week { grid-template-columns: minmax(2ch, auto) repeat(7, minmax(0, 1fr)); }

  .wf .wf-week { --wf-wk-cols: 2.5rem repeat(7, minmax(62px, 1fr)); }
  .wf .wf-wk-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .wf .wf-wk-scroll > * { min-width: 520px; }
  .wf .wf-wk-daynum { font-size: 13px; }
  .wf .wf-wk-hour { font-size: 9px; right: 3px; }
  .wf .wf-wk-ev { font-size: 10px; }
}