/* ══════════════════════════════════════════════════════════════════════
   MISE EN PAGE — MOBILE D'ABORD
   ----------------------------------------------------------------------
   Les styles de base ci-dessous sont ceux du TÉLÉPHONE. Les deux media
   queries n'ajoutent que ce que la largeur permet ; aucune ne contredit
   ni ne retire. Plus aucun !important : les propriétés de mise en page
   ont été sorties des styles en ligne pour que les classes fassent leur
   travail normalement.
   Points de rupture : 760 px (tablette) et 1101 px (bureau, rail latéral).
   ══════════════════════════════════════════════════════════════════════ */

/* ── Navigation : barre basse sur téléphone et tablette ───────────────── */
/* ── La colonne de gauche est le menu du BUREAU ────────────────────────────
   Jusqu'au 2026-09-02 le même élément tenait les deux rôles : colonne à
   gauche sur ordinateur, barre en bas au téléphone. Le design system V4 en a
   fait deux composants distincts — `MainMenu_desktop` et `MenuMobile_Footer` —
   et le gabarit deux éléments. Celui-ci n'existe donc plus qu'au-delà de
   1101 px, où `6-adaptatif.css` le rallume ; l'autre s'éteint là-bas.
   Il ne garde donc ici que sa POSITION : une colonne fixe, collée à gauche,
   au-dessus du contenu. Ce qu'elle EST — largeur, retraits, fond, filet —
   appartient entièrement à `MainMenu_desktop`.
   L'habillage de l'ancienne barre basse était encore écrit ici jusqu'au
   2026-09-03. Comme cette feuille est chargée APRÈS le design system et que
   les deux sélecteurs ont la même spécificité, il l'emportait : le fond du
   composant (`--panel-color`) était remplacé par `--fof-surface`. Il est
   parti. NE RIEN REMETTRE ICI qui soit déjà dit par le composant. */
.fof-sidebar{display:none;position:fixed;left:0;z-index:35;}
/* ── Bandeau de marque, en tête de la barre latérale ──────────────────────
   Le logo occupe toute la largeur disponible : 248 px de rail moins 30 px de
   marge de chaque côté, soit 188 px. Sa largeur est donnée en pourcentage et
   non en pixels, pour qu'il suive si la barre change de largeur. */
.fof-logo{display:none;}
.fof-logo img{width:100%;height:auto;display:block;}
/* L'emblème rond ne sert qu'à la barre repliée (bureau) : partout ailleurs
   c'est le mot qui s'affiche. Le sélecteur reprend le `img` de la règle
   ci-dessus — sans lui il serait moins spécifique qu'elle, et le `display`
   de la règle générale l'emporterait. */
.fof-logo img.fof-logo-mark{display:none;}
.fof-logo-word{margin-top:calc(12 * var(--fof-px));text-align:center;font-size:calc(15px * var(--fof-echelle-texte));
  letter-spacing:calc(2.6 * var(--fof-px));font-weight:600;color:var(--fof-faint);}
.fof-nav{display:flex;flex-direction:row;justify-content:space-around;
  align-items:stretch;gap:calc(2 * var(--fof-px));padding:calc(6 * var(--fof-px));flex:1;}
.fof-nav-item{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center;gap:calc(5 * var(--fof-px));padding:calc(8 * var(--fof-px)) calc(4 * var(--fof-px));
  flex:1 1 0;min-width:0;border-radius:calc(10 * var(--fof-px));cursor:pointer;
  font-family:inherit;font-size:calc(12px * var(--fof-echelle-texte));font-weight:600;line-height:1.15;
  color:var(--fof-faint);background:none;border:none;
  transition:background .12s,color .12s;}
.fof-nav-item.is-active{color:var(--fof-primary);}
.fof-nav-icon{width:calc(24 * var(--fof-px));height:calc(24 * var(--fof-px));flex-shrink:0;}
/* Le libellé était un simple nœud de texte. Il lui fallait une boîte à lui
   pour se laisser réduire, s'effacer, et devenir l'étiquette de survol de la
   barre repliée. Rien ici pour la barre BASSE du téléphone : tout ce qui
   suit est dans la requête « bureau ». */
.fof-nav-label{min-width:0;}
/* Bouton replier / déployer : il n'existe qu'au-dessus de 1101 px, là où il
   y a une barre latérale à replier. */
.fof-rail-toggle{display:none;}
/* Badge de comptage (maquette 1a : « 3 » orange sur l'icône Mail). Dans la
   barre basse il chevauche l'icône ; dans le rail il devient un compteur
   aligné à droite du libellé. */
.fof-nav-badge{position:absolute;top:calc(5 * var(--fof-px));left:50%;margin-left:calc(3 * var(--fof-px));
  min-width:calc(19 * var(--fof-px));height:calc(19 * var(--fof-px));padding:0 calc(5 * var(--fof-px));border-radius:calc(10 * var(--fof-px));
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--fof-badge);color:var(--fof-badge-ink);
  font-family:var(--police-mono);font-size:calc(11.5px * var(--fof-echelle-texte));font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1;}
/* Intertitre de groupe du rail : jamais visible dans la barre basse. */
.fof-nav-head{display:none;}

/* ── Coquille ─────────────────────────────────────────────────────────── */
.fof-shell{margin-left:0;min-height:100vh;display:flex;flex-direction:column;}
.fof-header{min-height:calc(56 * var(--fof-px));display:flex;align-items:center;gap:calc(10 * var(--fof-px));
  padding:calc(8 * var(--fof-px)) calc(12 * var(--fof-px));position:sticky;top:0;z-index:30;
  background:var(--fof-surface);border-bottom:1px solid var(--fof-border);}
/* La barre basse mesure 86 px : le contenu doit pouvoir défiler au-dessus. */
.fof-main{width:100%;padding:calc(16 * var(--fof-px)) calc(20 * var(--fof-px));
  padding-bottom:calc(106 * var(--fof-px) + env(safe-area-inset-bottom));}

/* ── Barre supérieure de l'application ────────────────────────────────────
   En dessous de 1101 px, les maquettes 1a (Agenda) et 3a (Boîte mail) ne
   montrent AUCUNE barre séparée : le compte est un bouton carré dans
   l'en-tête de l'écran. On masque donc la barre sur ces écrans-là — d'où
   `is-ownhead`, « cet écran porte son propre en-tête ». Les autres écrans
   n'ont pas encore reçu ce traitement. */
.fof-shell.is-ownhead .fof-header{display:none;}

/* ── Contenu de la barre supérieure (maquette 2a) ─────────────────────────
   Sur ordinateur, TOUT le haut d'écran de l'Agenda vit dans cette barre :
   titre + sous-titre, segmenté à trois onglets, champ de recherche,
   le carré « + » et la vignette d'identité (les vignettes des autres
   utilisateurs sont passées dans le menu du compte).
   En dessous de 1101 px ces éléments n'existent pas : l'Agenda ET la Boîte
   mail ont leur propre en-tête d'écran, dans la page (maquettes 1a et 3a). */
.fof-hd-titles,.fof-hd-seg,.fof-hd-search,.fof-hd-new,.fof-hd-ghost,.fof-hd-addwrap{display:none;}
.fof-hd-right{margin-left:auto;display:flex;align-items:center;gap:calc(10 * var(--fof-px));}
/* Le titre de la barre du haut, en --police-titre comme tous les titres de
   l'application (décision d'Etienne du 2026-08-26).

   26 px et `line-height:1` vont ensemble, et la barre en dépend : elle fait
   56 px, et Bebas a des métriques verticales bien plus hautes que League
   Spartan. Sans hauteur de ligne écrite, le titre se réserve une bande qui
   pousse la barre à 62 px — et les deux colonnes collantes calées à 88 px
   juste en dessous se décalent d'autant.
   C'est le retrait du sous-titre qui rend ces 26 px possibles : à deux
   lignes, il fallait redescendre à 22 px pour tenir, et le titre paraissait
   alors plus petit qu'avant alors que tous les autres ont grossi.

   `.fof-hd-sub` est parti avec lui : plus aucun titre de l'application n'a
   de seconde ligne. La règle ne reste pas derrière — c'est ce que vérifie
   `probe_entete_ecran`. */
.fof-hd-h1{margin:0;font-family:var(--police-titre);
  font-size:calc(26px * var(--fof-echelle-texte));font-weight:400;
  letter-spacing:normal;line-height:1;color:var(--fof-ink);
  display:flex;align-items:center;gap:calc(9 * var(--fof-px));}
/* Badge de non-lus du titre : STRICTEMENT celui du menu de gauche
   (`.fof-nav-badge`), seule sa position change. Le sélecteur double
   l'emporte sur la règle du rail, quel que soit l'ordre des règles. */
.fof-nav-badge.fof-hd-badge{position:static;top:auto;left:auto;margin-left:0;}
/* Le champ de recherche est un VRAI champ : on tape dedans et la liste du
   menu courant se filtre à chaque caractère. Plus de fenêtre intermédiaire. */
/* `flex:0 1 320px` et non `width:320px` : sur la Boîte mail la barre porte en
   plus un titre, un segmenté et le bouton de réglages — juste au-dessus de
   1101 px le champ doit pouvoir se resserrer plutôt que tout faire déborder. */
/* 400 px, FIGÉ (`flex:0 0`) — demande d'Etienne du 2026-07-28.
   Le figer est le seul moyen d'obtenir la même largeur sur les trois écrans :
   tant qu'il était le seul élément rétractable de la barre, il absorbait tout
   le manque de place et sa largeur variait avec le nombre d'onglets — porter
   sa valeur de 320 à 480 ne se voyait alors pas du tout.
   C'est désormais le TITRE qui cède (voir `.fof-hd-titles`, plus bas) :
   il porte `flex-shrink:100` contre 1 ici, donc il absorbe le manque de
   place presque entièrement avant que la recherche ne bouge. Elle tient ses
   400 px partout où le titre a encore de la marge, et ne se réduit qu'à
   l'extrême — jusqu'à 260 px, pour ne jamais faire déborder la barre.
   C'est le MÊME élément pour l'Agenda, la Boîte mail et Clients : les trois
   sont uniformes par construction, il n'y a pas trois règles à accorder. */
.fof-hd-search{align-items:center;gap:calc(9 * var(--fof-px));flex:0 1 calc(400 * var(--fof-px));min-width:calc(260 * var(--fof-px));
  height:calc(44 * var(--fof-px));padding:0 calc(6 * var(--fof-px)) 0 calc(12 * var(--fof-px));
  border:1px solid var(--fof-border);border-radius:var(--fof-r-md);
  background:var(--fof-surface-2);color:var(--fof-faint);
  transition:background .12s,border-color .12s,box-shadow .12s;}
.fof-hd-search:hover{background:var(--fof-surface);border-color:var(--fof-faint);}
.fof-hd-search:focus-within{background:var(--fof-surface);
  border-color:var(--fof-primary);box-shadow:0 0 0 calc(3 * var(--fof-px)) var(--fof-focus);}
.fof-hd-search svg{flex-shrink:0;}
.fof-hd-search-input{flex:1;min-width:0;height:calc(42 * var(--fof-px));border:none;outline:none;
  background:none;font-family:inherit;font-size:var(--fof-t-second);color:var(--fof-ink);}
/* Le halo de focus est porté par le CADRE (:focus-within ci-dessus), jamais
   par le champ. La règle générale « :focus-visible » en dessinait un second
   autour du seul champ : comme le champ commence après la loupe, ce halo
   apparaissait décalé de quelques pixels vers la droite, et on voyait deux
   cadres emboîtés dès qu'on tapait. */
.fof-hd-search-input:focus-visible{box-shadow:none;border-radius:0;}
/* Croix d'effacement : 32 px visibles, mais la zone tactile fait la hauteur
   du champ, ce qui suffit à la règle des 44 px sur cet axe. */
.fof-hd-search-x{flex:0 0 calc(32 * var(--fof-px));width:calc(32 * var(--fof-px));height:calc(42 * var(--fof-px));padding:0;display:flex;
  align-items:center;justify-content:center;border:none;background:none;
  color:var(--fof-faint);cursor:pointer;border-radius:var(--fof-r-sm);}
.fof-hd-search-x:hover{color:var(--fof-ink);background:var(--fof-surface-2);}
/* Carré strict, sans libellé : mêmes 44 px que la vignette d'identité
   voisine, et même geste que le « + » de l'en-tête d'écran au téléphone. */
.fof-hd-addwrap{position:relative;flex:0 0 auto;}
.fof-hd-new{align-items:center;justify-content:center;
  width:calc(44 * var(--fof-px));height:calc(44 * var(--fof-px));flex:0 0 calc(44 * var(--fof-px));padding:0;
  border:none;border-radius:var(--fof-r-md);
  background:var(--fof-primary-degrade);color:var(--fof-on-primary);
  font-family:inherit;cursor:pointer;transition:background .12s;}
.fof-hd-new:hover{background:var(--fof-primary-hover);}
/* Pendant discret de `.fof-hd-new`, pour une seconde action dans la barre :
   même carré, habillage de `.fof-btn-secondary`. */
.fof-hd-ghost{display:none;align-items:center;justify-content:center;
  width:calc(44 * var(--fof-px));height:calc(44 * var(--fof-px));flex:0 0 calc(44 * var(--fof-px));padding:0;
  border:1px solid var(--fof-border);border-radius:var(--fof-r-md);
  background:var(--fof-surface);color:var(--fof-ink);
  font-family:inherit;cursor:pointer;transition:background .12s;}
.fof-hd-ghost:hover{background:var(--fof-surface-2);}
/* Le menu est celui de l'Agenda (`.fof-ag-addmenu`), ancrage compris : depuis
   que les carrés de l'en-tête d'écran mesurent 44 px eux aussi (2026-08-21),
   les deux tombent au même endroit et cette classe n'a plus de style propre.
   Elle reste dans le gabarit : c'est elle qui distingue le menu de la barre de
   celui de la page. */
/* ── Vignette d'identité de la barre du haut ──────────────────────────────
   Carré à bords arrondis, sur le modèle des autres utilisateurs de
   l'application (mêmes dimensions que les boutons carrés de la barre).
   Elle est visible à TOUTES les largeurs : hors Agenda, c'est le seul accès
   au compte sur téléphone. Elle a remplacé à la fois le bouton « Apparence
   de l'application » et l'ancienne ligne nom + rôle du pied de rail. */
.fof-hd-me{display:inline-flex;width:calc(44 * var(--fof-px));height:calc(44 * var(--fof-px));flex:0 0 calc(44 * var(--fof-px));padding:0;
  align-items:center;justify-content:center;overflow:hidden;
  border-radius:var(--fof-r-md);background:var(--fof-surface-2);
  border:1px solid var(--fof-border);color:var(--fof-ink);
  font-family:inherit;font-size:var(--fof-t-libelle);font-weight:700;letter-spacing:calc(.2 * var(--fof-px));
  cursor:pointer;transition:background .12s;}
.fof-hd-me:hover{background:var(--fof-bg);}
.fof-hd-me img{width:100%;height:100%;object-fit:cover;display:block;}

/* Menu du compte : sorti de la barre supérieure pour rester ouvrable depuis
   n'importe quel déclencheur. Feuille basse sur téléphone, menu ancré en
   haut à droite sur ordinateur. */
.fof-usermenu{position:fixed;left:calc(12 * var(--fof-px));right:calc(12 * var(--fof-px));
  bottom:calc(98 * var(--fof-px) + env(safe-area-inset-bottom));z-index:41;
  background:var(--fof-surface);border:1px solid var(--fof-border-soft);
  border-radius:calc(13 * var(--fof-px));box-shadow:var(--fof-shadow);
  /* Plafonné et défilant : avec la grille des autres utilisateurs en pied,
     une équipe nombreuse pouvait faire sortir le haut du menu de l'écran. */
  max-height:calc(100vh - 130 * var(--fof-px));overflow-y:auto;overscroll-behavior:contain;
  animation:popIn .14s ease;}
/* Autres utilisateurs, en grille sous « Se déconnecter ». Les vignettes
   portent leur taille (30 px) en style en ligne, avec l'anneau vert des
   connectés : la grille ne fait que les répartir. */
.fof-usermenu-pres{padding:calc(12 * var(--fof-px)) calc(15 * var(--fof-px)) calc(14 * var(--fof-px));
  border-top:1px solid var(--fof-border-soft);background:var(--fof-bg);}
.fof-usermenu-pres-t{font-size:var(--fof-t-badge);font-weight:600;color:var(--fof-muted);
  margin-bottom:calc(9 * var(--fof-px));}
.fof-usermenu-grid{display:grid;grid-template-columns:repeat(auto-fill,calc(30 * var(--fof-px)));
  gap:calc(9 * var(--fof-px));justify-content:start;}

.lbl-full{display:none;}
.lbl-short{display:inline;}

/* ── Fiche lieu : plein écran ─────────────────────────────────────────── */
.fof-drawer-overlay{padding:0;align-items:stretch;justify-content:flex-end;}
.fof-drawer{width:100vw;height:100vh;height:100dvh;border-radius:0;}
/* Le fondu du voile était écrit dans l'attribut `style` du gabarit. Une
   valeur posée en ligne l'emporte sur toute feuille de style : elle empêchait
   le glissé du téléphone (`is-navin`, feuille 6) de prendre la main. Elle est
   donc ici, à l'identique — rien ne change pour l'ordinateur, où c'est
   toujours ce fondu qui joue. */
.fof-drawer-overlay{animation:drwFade .2s ease;}

/* Fiche client ouverte, ou fenêtre en surimpression : la PAGE derrière est
   figée. C'est ce qui empêche la molette, le clavier et l'ascenseur de faire
   défiler ce qui reste visible autour de la fenêtre. La classe est posée sur
   <html> par `_applyPageLock` ; `--fof-sbw` compense la disparition de
   l'ascenseur pour que la page ne saute pas latéralement à l'ouverture. */
html.fof-page-lock,
html.fof-page-lock body{overflow:hidden;}
/* Fiche recouverte par la fenêtre d'évènement : elle s'efface, mais reste
   en place. `visibility:hidden` — et surtout PAS `display:none`, qui
   détruirait la boîte de mise en page et remettrait le défilement à zéro :
   on retrouverait la fiche en haut au lieu de l'endroit qu'on lisait.
   Masquée ainsi, elle n'est ni cliquable, ni atteignable au clavier, ni
   annoncée par un lecteur d'écran. */
.fof-drawer-overlay.is-behind{visibility:hidden;pointer-events:none;}
html.fof-page-lock body{padding-right:var(--fof-sbw,0px);}

/* ── Éditeur devis / factures : une FENÊTRE ───────────────────────────────
   Même traitement que l'ajout d'un client ou d'un évènement : voile sur
   l'écran courant, carte blanche à coins arrondis par-dessus. La largeur
   vient de `--ed-w`, posée en ligne — 1180 px pour l'édition (formulaire +
   aperçu côte à côte), 900 pour la consultation (le document seul).
   Sous 1101 px la carte reprend tout l'écran : le formulaire y est long et
   le clavier mange la hauteur. Même arbitrage que `.is-fullpage`. */
.fof-ed-shell{position:fixed;inset:0;z-index:70;display:flex;
  align-items:center;justify-content:center;
  background:rgba(20,4,10,.45);animation:drwFade .16s ease;
  overscroll-behavior:contain;}
.fof-ed-card{width:100%;height:100%;min-height:0;
  background:var(--fof-surface);display:flex;flex-direction:column;
  overflow:hidden;}

/* ── Éditeur devis / factures : panneaux empilés ──────────────────────── */
.fof-ed-header{display:flex;align-items:center;flex-wrap:wrap;row-gap:calc(8 * var(--fof-px));
  gap:calc(14 * var(--fof-px));padding:calc(10 * var(--fof-px)) calc(12 * var(--fof-px));flex-shrink:0;
  background:var(--fof-surface);border-bottom:1px solid var(--fof-border);}
.fof-ed-header h2{font-size:var(--fof-t-libelle);}
.fof-ed-actions{display:flex;align-items:center;gap:calc(9 * var(--fof-px));
  flex-wrap:wrap;justify-content:flex-end;row-gap:calc(6 * var(--fof-px));margin-left:0;width:100%;}
/* Picto AU-DESSUS du libellé, toujours. Le pli était jusqu'ici subi : un
   devis, qui porte six boutons, les serrait assez pour que le texte passe
   sous l'icône ; une facture, qui en porte quatre, les laissait sur une
   ligne. Les mêmes boutons prenaient deux allures selon le document
   (constat d'Etienne, 2026-08-20). Il est maintenant décidé. */
.fof-ed-actions button{padding:calc(8 * var(--fof-px)) calc(10 * var(--fof-px));font-size:calc(12px * var(--fof-echelle-texte));
  display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:calc(3 * var(--fof-px));line-height:1.2;text-align:center;}
/* ── Bandeau « ce qui manque » ─────────────────────────────────────────
   Il occupe toute la largeur, sous l'en-tête, et ne défile pas avec le
   document : c'est une consigne, on doit pouvoir la relire en corrigeant.
   Les champs manquants sont des PUCES et non une phrase à rallonge — on
   compte ce qui reste d'un coup d'œil, et chaque puce reprend mot pour mot
   le libellé du champ du formulaire. */
.fof-ed-missing{flex-shrink:0;display:flex;align-items:flex-start;gap:calc(10 * var(--fof-px));
  padding:calc(11 * var(--fof-px)) calc(12 * var(--fof-px));background:var(--fof-warning-soft);color:var(--fof-warning);
  border-bottom:1px solid var(--fof-border);}
/* Les deux pictos des bandeaux portent leur taille en ATTRIBUT (20 x 20).
   Un attribut ne se multiplie pas : sans ces deux lignes ils resteraient
   a 20 px pendant que le bandeau qui les porte grossit d'un quart. */
.fof-ed-missing-i{flex-shrink:0;margin-top:1px;
  width:calc(20 * var(--fof-px));height:calc(20 * var(--fof-px));}
.fof-ed-missing-b{flex:1;min-width:0;}
.fof-ed-missing-t{font-size:var(--fof-t-badge);font-weight:600;}
.fof-ed-missing-l{display:flex;flex-wrap:wrap;gap:calc(6 * var(--fof-px));margin-top:calc(7 * var(--fof-px));}
.fof-ed-missing-item{font-size:var(--fof-t-badge);font-weight:500;line-height:1.3;
  padding:calc(3 * var(--fof-px)) calc(9 * var(--fof-px));border-radius:calc(20 * var(--fof-px));
  background:var(--fof-surface);border:1px solid var(--fof-border);}
.fof-ed-missing-go{flex-shrink:0;align-self:center;
  padding:calc(8 * var(--fof-px)) calc(13 * var(--fof-px));border:none;border-radius:calc(8 * var(--fof-px));cursor:pointer;
  font-family:inherit;font-size:var(--fof-t-badge);font-weight:600;
  background:var(--fof-warning);color:var(--fof-surface);}
.fof-ed-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;}
.fof-ed-pane{flex:0 0 auto;overflow-y:visible;padding:calc(16 * var(--fof-px)) calc(12 * var(--fof-px));
  border-bottom:1px solid var(--fof-border-soft);max-width:100vw;overflow-x:hidden;}
.ed-form-grid{display:grid;grid-template-columns:1fr;gap:calc(13 * var(--fof-px));margin-bottom:calc(20 * var(--fof-px));}
.ed-form-grid > *{grid-column:auto;}
.fof-ed-preview{flex:1;display:flex;justify-content:center;
  overflow-y:visible;padding:calc(12 * var(--fof-px)) calc(8 * var(--fof-px));background:var(--fof-paper-desk);}
.fof-ed-page{width:100%;max-width:calc(680 * var(--fof-px));align-self:flex-start;
  padding:calc(20 * var(--fof-px)) calc(14 * var(--fof-px));overflow-x:auto;position:relative;}
/* ── Filigrane « déjà envoyé » ────────────────────────────────────────────
   Sur l'aperçu uniquement (jamais sur le PDF : c'est une note interne).
   `pointer-events:none` pour qu'il ne gêne ni la sélection ni le
   défilement, et une transparence qui laisse lire le document dessous.
   Le texte est repris en clair pour les lecteurs d'écran, le filigrane
   lui-même étant `aria-hidden`. */
/* Bandeau « déjà envoyé ». C'était un filigrane en travers de la feuille :
   illisible, aussi bien lui que le document dessous (constat d'Etienne,
   2026-08-20). Il est devenu une ligne d'information sous les boutons, au
   même gabarit que le bandeau « ce qui manque ». */
.fof-ed-sent{flex-shrink:0;display:flex;align-items:center;gap:calc(10 * var(--fof-px));
  padding:calc(11 * var(--fof-px)) calc(12 * var(--fof-px));background:var(--fof-info-soft);color:var(--fof-info);
  border-bottom:1px solid var(--fof-border);}
.fof-ed-sent-i{flex-shrink:0;width:calc(20 * var(--fof-px));height:calc(20 * var(--fof-px));}
.fof-ed-sent-t{font-size:var(--fof-t-badge);font-weight:600;min-width:0;}