/* #302 — Rapport global de situation (/situation). Surcouche au shell partagé. */

/* #380 (#392) — le rapport est désormais l'onglet « Situation détaillée » du cockpit :
   on borne la mesure de lecture sur le panneau (l'ancien .wrap.situation n'existe plus). */
#vue-panel-situation { max-width: 1080px; margin: 0 auto; }

/* Bandeau santé des données (transparence : nb produits + réconciliation). */
.sit-sante {
  margin: 0 0 1rem; padding: .55rem .9rem; border-radius: var(--of-radius-sm);
  font-size: .9rem; font-weight: 600;
  border: 1px solid var(--of-line-300);
}
.sit-sante.ok { background: var(--of-teal-100); color: var(--of-petrol-800); border-color: var(--of-teal-100); }
.sit-sante.ko { background: var(--of-negative-100); color: var(--of-negative-700); border-color: var(--of-negative-100); }

/* Cartes. */
.sit-card {
  background: var(--of-white); border: 1px solid var(--of-line-300); border-radius: var(--of-radius-md);
  padding: 1.1rem 1.25rem; margin: 0 0 1.1rem;
}
/* — TITRE DE CARTE — #805, #794.
   Cet écran porte 19 cartes, et leurs 19 titres sortaient TOUS en Manrope 1,05 rem :
   la faute que #794 a mesurée ailleurs (« 189 titres de section dans les maquettes,
   185 en Newsreader »), à sa plus forte densité du produit. Deux conséquences, pas
   une : la valeur de design vivait dans une feuille d'écran, hors de la source
   canonique unique — et, surtout, dix-neuf cartes de RANG STRICTEMENT ÉGAL, où rien
   ne distingue le sujet du contexte (la faute mère de #626).

   Les deux paliers viennent de `optifisc-tokens.css`, jamais d'ici, et le rang est
   porté par une classe posée à la fabrique, pas par une taille écrite sur place.
   `BRAND_LANGUAGE.md` §1 : deux paliers de titre de carte, pas trois. — */
.sit-card-h { margin: 0 0 .9rem; font: var(--of-card-title); letter-spacing: 0; color: var(--of-ink-950); }

/* Rang 1 — les cinq cartes que la maquette `Situation detaillee 29 pouces.dc.html`
   NOMME à 22/28 quand les autres sont à 20/26 (h-evolution:250, h-perf:311,
   h-rail:337, h-chaine:424, h-risque:504). Mesuré sur la maquette, pas déduit :
   une hiérarchie inventée serait un arbitrage silencieux. */
.sit-card.rang-1 > .sit-card-h { font: var(--of-card-title-l); letter-spacing: 0; }

/* Bandeau d'insights (#329) : synthèse actionnable inter-sections, calculée
   côté front à partir de champs déjà renvoyés par /api/situation (aucun
   calcul fiscal/financier ajouté ici, uniquement une mise en avant). Chaque
   carte est un <button> qui bascule vers l'onglet où creuser. */
.sit-insights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: .7rem; margin: 0 0 1.2rem;
}
.sit-insight {
  display: flex; flex-direction: column; gap: .5rem; padding: .85rem 1rem;
  border-radius: var(--of-radius-bloc); border: 1px solid var(--of-line-300); border-left: 3px solid var(--of-petrol-800);
  background: var(--of-white); font: inherit; font-size: .88rem; color: var(--of-ink-650);
  line-height: 1.4; text-align: left; cursor: pointer;
  transition: box-shadow .12s ease;
}
.sit-insight:hover { box-shadow: var(--of-shadow-1); }
.sit-insight:focus-visible { outline: 2px solid var(--of-teal-650); outline-offset: 2px; }
.sit-insight b { color: var(--of-ink-950); font-variant-numeric: tabular-nums; }
.sit-insight-go { font-size: .76rem; font-weight: 600; color: var(--of-petrol-800); }
.sit-insight.warn { border-left-color: var(--of-ink-550); }
.sit-insight.neg { border-left-color: var(--of-negative-700); }
.sit-insight.pos { border-left-color: var(--of-positive-700); }

/* §1 — patrimoine net à deux niveaux. */
.sit-net-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 1rem; margin-bottom: 1rem; }
.sit-net-kpi {
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem; border-radius: var(--of-radius-bloc); background: var(--of-surface-100); border: 1px solid var(--of-line-200);
}
.sit-net-kpi.big { background: var(--of-teal-100); border-color: var(--of-teal-100); }
.sit-net-lbl { font-size: .82rem; color: var(--of-ink-650); }
.sit-net-val { font-size: 1.7rem; font-weight: 700; color: var(--of-ink-950); font-variant-numeric: tabular-nums; }
.sit-net-kpi.big .sit-net-val { color: var(--of-petrol-800); }
.sit-net-sub { font-size: .78rem; color: var(--of-ink-550); }
.sit-net-detail { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 0; }
.sit-net-detail > div { display: flex; flex-direction: column; }
.sit-net-detail dt { font-size: .78rem; color: var(--of-ink-650); }
.sit-net-detail dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--of-ink-950); font-variant-numeric: tabular-nums; }
/* #887 §6 — l'écart de contrôle des deux moteurs du net financier. AUCUNE
   couleur n'est déclarée ici : la mention est rendue par `OF.mentionEcartControle`
   dans un `.ck-ecart`, dont la teinte vit déjà dans `cockpit.css:239` — et les
   deux feuilles sont chargées par le MÊME document (`cockpit.html:11`, `:15`).
   Une seconde déclaration serait une seconde source de la même couleur. */
.sit-net-ctrl { margin: 0 0 1rem; }
.sit-net-ctrl[hidden] { display: none; }

/* §2/§3 — allocation : donut + table. */
.sit-alloc { display: grid; grid-template-columns: 180px 1fr; gap: 1.25rem; align-items: center; }
/* .sit-donut retiré (#559 L4) : l'anneau porte sa taille depuis OFChart. */
.sit-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.sit-table th, .sit-table td { text-align: left; padding: .4rem .5rem; border-bottom: 1px solid var(--of-line-200); }
.sit-table th { color: var(--of-ink-650); font-weight: 600; font-size: .8rem; }
.sit-table td.num, .sit-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sit-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: .5rem; vertical-align: middle; }
.sit-prod { font-weight: 600; color: var(--of-ink-950); }

/* §3 — décomposition dépliable par classe économique. */
.sit-eco-list { display: flex; flex-direction: column; gap: .35rem; }
.sit-eco-class { border: 1px solid var(--of-line-200); border-radius: var(--of-radius-sm); background: var(--of-surface-100); }
.sit-eco-class > summary {
  display: flex; align-items: center; gap: .5rem; cursor: pointer; padding: .5rem .7rem;
  list-style: none; font-size: .9rem;
}
.sit-eco-class > summary::-webkit-details-marker { display: none; }
.sit-eco-class > summary:focus-visible { outline: 2px solid var(--of-petrol-800); outline-offset: 2px; border-radius: var(--of-radius-sm); }
.sit-eco-name { font-weight: 600; color: var(--of-ink-950); }
.sit-eco-num { margin-left: auto; color: var(--of-ink-650); font-variant-numeric: tabular-nums; }
.sit-eco-detail { margin: 0; padding: .2rem .7rem .6rem 1.7rem; list-style: none; }
.sit-eco-detail li { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0;
  font-size: .85rem; border-top: 1px solid var(--of-line-200); }
.sit-eco-lib { color: var(--of-ink-650); }
.sit-eco-val { color: var(--of-ink-950); font-variant-numeric: tabular-nums; }
.sit-eco-vide { margin: 0; padding: .2rem .7rem .6rem 1.7rem; font-size: .82rem; color: var(--of-ink-550); }

/* §10 (#325) — allocation géo/sectorielle (look-through) : deux colonnes de barres. */
.sit-geo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
/* #325 — toggle « patrimoine investi seulement » du §10. */
.sit-geo-toggle { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem;
  margin-bottom: .6rem; cursor: pointer; }
.sit-geo-toggle input:focus-visible { outline: 2px solid var(--of-petrol-800); outline-offset: 2px; }

/* Pied de réconciliation (preuve de l'invariant). */
.sit-reco { margin: .8rem 0 0; font-size: .85rem; font-weight: 600; }
.sit-reco.ok { color: var(--of-petrol-800); }
.sit-reco.ok span { color: var(--of-ink-550); font-weight: 400; }
.sit-reco.ko { color: var(--of-negative-700); }

/* §4 — Cible vs réel. */
.sit-cib-table td { vertical-align: top; }
.sit-cib-ecart { font-size: .85rem; font-weight: 600; white-space: nowrap; }
.sit-cib-ecart.retard { color: var(--of-ink-950); }
.sit-cib-ecart.avance { color: var(--of-teal-650); }
.sit-cib-ecart.fige { color: var(--of-ink-550); font-weight: 400; }
.sit-cib-ecart.ok { color: var(--of-petrol-800); }
.sit-cib-row.retard td:first-child { border-left: 3px solid var(--of-ink-550); }
.sit-cib-row.avance td:first-child { border-left: 3px solid var(--of-teal-650); }
.sit-cib-row.fige td:first-child { border-left: 3px solid var(--of-line-300); }
.sit-cib-det { margin-top: .35rem; }
.sit-cib-det > summary { cursor: pointer; font-size: .78rem; color: var(--of-petrol-800); }
.sit-cib-det > summary:focus-visible { outline: 2px solid var(--of-petrol-800); outline-offset: 2px; }
.sit-cib-under { color: var(--of-ink-650); font-size: .78rem; }
.sit-cib-over { color: var(--of-teal-650); font-size: .78rem; }
/* #359 — ligne détenue hors plan DCA (fonds maison, part obligataire FOF) : présente
   pour que la décomposition somme à la poche, mais sans cible d'achat. */
.sit-cib-horsplan { color: var(--of-ink-550); font-size: .78rem; font-style: italic; }
.sit-cib-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: .9rem; padding: .7rem .9rem; border-radius: var(--of-radius-sm); background: var(--of-surface-100);
  border: 1px solid var(--of-line-200); font-size: .9rem;
}

/* §4 bis (#312) — convergence des poches vers le glidepath. */
.sit-conv-couv { margin: 0 0 .9rem; padding: .55rem .85rem; border-radius: var(--of-radius-sm);
  font-size: .85rem; border: 1px solid var(--of-line-200); background: var(--of-surface-100); color: var(--of-ink-650); }
.sit-conv-couv.partiel { background: var(--of-surface-100); border-color: var(--of-line-300);
  color: var(--of-ink-950); box-shadow: inset 3px 0 0 var(--of-ink-550); }
.sit-conv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sit-conv-bloc { border: 1px solid var(--of-line-200); border-radius: var(--of-radius-bloc); padding: .8rem .9rem;
  background: var(--of-surface-100); }
.sit-conv-head { display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  flex-wrap: wrap; margin-bottom: .4rem; }
.sit-conv-now { font-weight: 700; color: var(--of-ink-950); font-variant-numeric: tabular-nums; }
/* Même sémantique de couleur que §4 (.sit-cib-ecart). #559/L1 : l'ambre codé en
   dur a disparu — « en retard » est une DIRECTION (renforcer), pas une alarme ;
   il se lit en encre pleine + le chiffre signé, « en avance » en pétrole. */
.sit-conv-now.retard { color: var(--of-ink-950); }
.sit-conv-now.avance { color: var(--of-teal-650); }
.sit-conv-now.ok { color: var(--of-petrol-800); }
.sit-conv-vs { display: block; font-weight: 400; font-size: .76rem; color: var(--of-ink-550); }
.sit-conv-svg { width: 100%; height: 120px; display: block; background: var(--of-white);
  border-radius: var(--of-radius-sm); border: 1px solid var(--of-line-200); }
.sit-conv-table { margin-top: .5rem; font-size: .82rem; }
.sit-conv-bloc .sit-cib-det { margin-top: .5rem; }

/* §5 — risque. */
.sit-risk-leg { list-style: none; margin: 0 0 .6rem; padding: 0; }
.sit-risk-leg li { padding: .25rem 0; font-size: .92rem; color: var(--of-ink-950); }
.sit-note { margin: .4rem 0 0; font-size: .82rem; color: var(--of-ink-550); }

/* §5 (#313) — ventilation SR/AR dépliable (transparence de l'assiette). */
.sit-risk-detail { margin-top: .9rem; border-top: 1px solid var(--of-line-200); padding-top: .7rem; }
.sit-risk-detail > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--of-petrol-800); }
.sit-risk-detail > summary:focus-visible { outline: 2px solid var(--of-petrol-800); outline-offset: 2px; border-radius: var(--of-radius-xs); }
.sit-risk-table { margin-top: .7rem; }
.sit-risk-table td { vertical-align: top; }
/* Liseré gauche par verdict (couleur AA, non porteuse d'info à elle seule). */
.sit-risk-row.ar td:first-child { border-left: 3px solid var(--of-ink-550); }
.sit-risk-row.sr td:first-child { border-left: 3px solid var(--of-petrol-800); }
.sit-risk-row.ex td:first-child { border-left: 3px solid var(--of-line-300); }
/* Pastille texte de verdict — le mot reste lisible (pas que la couleur). */
.sit-risk-verdict { display: inline-block; font-size: .78rem; font-weight: 600;
  padding: .05rem .45rem; border-radius: var(--of-radius-pilule); border: 1px solid transparent; }
.sit-risk-verdict.ar { color: var(--of-ink-950); background: var(--of-surface-100); border-color: var(--of-line-300); }
.sit-risk-verdict.sr { color: var(--of-petrol-800); background: var(--of-teal-100); border-color: var(--of-teal-100); }
.sit-risk-verdict.ex { color: var(--of-ink-550); background: var(--of-surface-100); border-color: var(--of-line-200); }
.sit-risk-tag { font-weight: 600; font-size: .76rem; }
.sit-risk-tag.ar { color: var(--of-ink-950); }
.sit-risk-tag.sr { color: var(--of-petrol-800); }
.sit-risk-mixte { color: var(--of-ink-550); font-weight: 400; font-size: .78rem; }
/* Légende d'accessibilité visuellement masquée mais lue par les lecteurs d'écran. */
.sit-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* §6 — cashflow KPI. */
.sit-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.sit-kpi { display: flex; flex-direction: column; gap: .25rem; padding: .8rem;
  border-radius: var(--of-radius-bloc); background: var(--of-surface-100); border: 1px solid var(--of-line-200); }
.sit-kpi.accent { background: var(--of-teal-100); border-color: var(--of-teal-100); }
.sit-kpi-l { font-size: .78rem; color: var(--of-ink-650); }
.sit-kpi-v { font-size: 1.25rem; font-weight: 700; color: var(--of-ink-950); font-variant-numeric: tabular-nums; }
.sit-kpi.accent .sit-kpi-v { color: var(--of-petrol-800); }

/* §11 bis — comparaison à l'indice (#346) : sous-titre de carte, plus discret
   que le titre h2 (.sit-card-h), espacé du bloc KPI qui précède. */
.sit-sub-h { margin: 1.1rem 0 .6rem; font-size: .92rem; font-weight: 600; color: var(--of-ink-650); }

/* §7 — lentille fiscale. */
.sit-fisc { display: flex; flex-direction: column; }
.sit-fisc-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .5rem 0; border-bottom: 1px solid var(--of-line-200); }
.sit-fisc-row:last-child { border-bottom: none; }
.sit-fisc-l { color: var(--of-ink-650); font-size: .9rem; }
.sit-fisc-v { font-weight: 600; color: var(--of-ink-950); font-variant-numeric: tabular-nums; }
.sit-fisc-sub { font-size: .76rem; color: var(--of-ink-550); font-weight: 400; }

/* §8 — série temporelle.
   #828 — `.sit-serie-svg` est RETIRÉE : elle habillait le SVG que cet écran dessinait
   lui-même, avant que la série ne passe à `OFChart` (qui porte son propre habillage,
   `.ofc-*`). Plus aucun nœud ne la portait. La légende et le pied de série, eux, sont
   bien rendus ici. */
.sit-serie-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin-top: .5rem; font-size: .9rem; color: var(--of-ink-650); font-variant-numeric: tabular-nums; }
/* #812 — `up` / `down` / `zero` : le vocabulaire de `OF.signCls`, celui de `.delta-pill`,
   et non un `pos`/`neg` propre à cet écran. La FORME reste locale (texte coloré, pas
   pastille) — ce qui devait cesser d'être local, c'est la règle qui décide de la classe.
   `zero` gagne au passage une encre neutre : un solde plat n'est pas un gain, et les sept
   sites d'ici le peignaient en vert parce qu'ils testaient `>= 0`. */
.sit-serie-foot .up { color: var(--of-positive-700); }
.sit-serie-foot .down { color: var(--of-negative-700); }
.sit-serie-foot .zero { color: var(--of-neutral-state); }
/* #575 — région live du bandeau de fraîcheur : persistante (donc annoncée), mais
   sans réserver d'espace quand il n'y a rien à dire. */
#sit-serie-fraicheur:not(:empty) { margin: .2rem 0 .8rem; }

/* §11 (#326) — performance réelle (TRI) : signe coloré dans les KPI et la table.
   #575 — les rendements de séance listés dans « Qualité de la mesure » suivent la
   même convention : le signe porte l'information, la teinte ne fait que la doubler. */
.sit-kpi-v .up, .sit-table .up, .risqmet-phrases .up { color: var(--of-positive-700); }
.sit-kpi-v .down, .sit-table .down, .risqmet-phrases .down { color: var(--of-negative-700); }
.sit-kpi-v .zero, .sit-table .zero, .risqmet-phrases .zero { color: var(--of-neutral-state); }

/* §9 — événements marquants (#314 : auto-détectés + annotables). */
.sit-ev-list { list-style: none; margin: 0; padding: 0; }
.sit-ev { border-bottom: 1px solid var(--of-line-200); font-size: .9rem; }
.sit-ev:last-child { border-bottom: none; }
.sit-ev.annote { background: var(--of-teal-100); border-radius: var(--of-radius-xs); }

/* La ligne = le <summary> du <details> natif (clavier + ARIA gratuits). */
.sit-ev-det > summary {
  display: grid; grid-template-columns: 92px 1fr auto auto; gap: .8rem; align-items: baseline;
  padding: .5rem .4rem; cursor: pointer; list-style: none;
}
.sit-ev-det > summary::-webkit-details-marker { display: none; }
.sit-ev-det > summary:focus-visible { outline: 2px solid var(--of-petrol-800); outline-offset: -2px; border-radius: var(--of-radius-xs); }
.sit-ev-date { color: var(--of-ink-550); font-size: .82rem; font-variant-numeric: tabular-nums; }
.sit-ev-lib { color: var(--of-ink-950); display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: baseline; }
.sit-ev-mt { font-weight: 600; font-variant-numeric: tabular-nums; }
.sit-ev.debit .sit-ev-mt { color: var(--of-negative-700); }
.sit-ev.credit .sit-ev-mt { color: var(--of-positive-700); }
.sit-ev-type {
  font-size: .72rem; font-weight: 600; padding: .05rem .45rem; border-radius: var(--of-radius-pilule);
  background: var(--of-petrol-800); color: var(--of-white); white-space: nowrap;
}
.sit-ev-note { font-size: .8rem; color: var(--of-ink-650); font-style: italic; }
.sit-ev-cta { font-size: .78rem; color: var(--of-petrol-800); font-weight: 600; white-space: nowrap; }
.sit-ev-det[open] > summary .sit-ev-cta::after { content: ' ▾'; }

/* Formulaire d'annotation déplié. */
.sit-ev-form { padding: .2rem .6rem .8rem; display: flex; flex-direction: column; gap: .6rem; }
.sit-ev-f-grid { display: grid; grid-template-columns: 1fr 200px; gap: .8rem; }
.sit-ev-f { display: flex; flex-direction: column; gap: .25rem; }
.sit-ev-f label { font-size: .78rem; color: var(--of-ink-650); font-weight: 600; }
.sit-ev-f input, .sit-ev-f select, .sit-ev-f textarea {
  font: inherit; padding: .45rem .55rem; border: 1px solid var(--of-line-300); border-radius: var(--of-radius-sm);
  background: var(--of-white); color: var(--of-ink-950); width: 100%;
}
.sit-ev-f input:focus, .sit-ev-f select:focus, .sit-ev-f textarea:focus {
  outline: 2px solid var(--of-petrol-800); outline-offset: 1px; border-color: var(--of-petrol-800);
}
.sit-ev-f textarea { resize: vertical; }
.sit-ev-f-err { margin: 0; font-size: .82rem; color: var(--of-negative-700); font-weight: 600; }
.sit-ev-f-act { display: flex; gap: .6rem; flex-wrap: wrap; }

/* #416 — Coiffe « Convergence & jalons ». Convergence = pétrole (--accent) ;
   laiton intouché (réservé fiscal) ; aucun rouge sur un retard (ambre sourd). */
.sit-convhead { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.sit-convhead-txt { flex: 1 1 260px; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.sit-convkpi { display: flex; gap: 1.6rem; margin: 0; flex-wrap: wrap; }
.sit-convkpi dt { font-size: .74rem; color: var(--of-ink-550); }
.sit-convkpi dd { margin: .1rem 0 0; font-family: var(--of-font-data); font-variant-numeric: tabular-nums;
  font-weight: 600; font-size: 1.05rem; color: var(--of-ink-950); }
.sit-conv-in { font-weight: 400; font-size: .76rem; color: var(--of-ink-550); }

.sit-convgauges { display: grid; gap: .7rem; margin: .4rem 0 .2rem; }
.sit-convgauge { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto auto;
  align-items: center; gap: .8rem; font-size: .84rem; }
.sit-convgauge-lbl { color: var(--of-ink-650); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sit-convgauge-bar { position: relative; }
.sit-convgauge-bar .track { height: 7px; background: var(--of-line-300); border-radius: var(--of-radius-pilule); overflow: hidden; }
.sit-convgauge-bar .fill { height: 100%; border-radius: var(--of-radius-pilule);
  background: linear-gradient(90deg, var(--of-petrol-800), var(--of-teal-650)); transition: width .6s var(--of-ease-ouvre); }
/* Repère de cible = bord droit (100 %) : un tick d'encre discret.
   #806 — `border-radius: 1px` reste LITTÉRAL, et c'est écrit plutôt que subi : ce tick
   fait 2 px de large sur 11 de haut. Ce n'est pas une surface, c'est un trait ; lui donner
   un palier de l'échelle (6 au minimum) le rendrait ovale. Même famille que les pastilles
   de série de `optifisc.css`, et les maquettes écrivent aussi ces valeurs en littéral. */
.sit-convgauge-bar .tick { position: absolute; top: -2px; right: 0; width: 2px; height: 11px;
  background: var(--of-ink-550); border-radius: 1px; }
.sit-convgauge.avance .fill { background: linear-gradient(90deg, var(--of-teal-650), var(--of-teal-650)); }
.sit-convgauge.fige .fill { background: var(--of-ink-550); opacity: .5; }
.sit-convgauge-pc { min-width: 3.4em; text-align: right; color: var(--of-ink-650); font-variant-numeric: tabular-nums; }
.sit-convgauge-etat { min-width: 8.5em; text-align: right; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.sit-convgauge-etat.retard { color: var(--of-ink-950); }
.sit-convgauge-etat.avance { color: var(--of-teal-650); }
.sit-convgauge-etat.ok { color: var(--of-petrol-800); }
.sit-convgauge-etat.fige { color: var(--of-ink-550); font-weight: 400; }

.sit-conv-h3 { font-size: .82rem; font-weight: 600; color: var(--of-ink-650); text-transform: uppercase;
  letter-spacing: .04em; margin: 1.3rem 0 .7rem; }
/* Frise de jalons : rail temporel, « on est ici » emphasé, futurs discrets. */
.sit-jalons { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--of-line-300);
  border: 1px solid var(--of-line-300); border-radius: var(--of-radius-md); overflow: hidden; }
.sit-jalon { background: var(--of-white); padding: .7rem .8rem .8rem; position: relative; }
.sit-jalon::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--of-line-300); }
.sit-jalon.now::before { background: linear-gradient(90deg, var(--of-petrol-800), var(--of-teal-650)); }
.sit-jalon.major::before { background: var(--of-teal-650); }
.sit-jalon.now { background: linear-gradient(180deg, var(--of-teal-100), var(--of-white)); }
.sit-jalon-yr { font-family: var(--of-font-data); font-weight: 600; font-size: .82rem; }
.sit-jalon.now .sit-jalon-yr { color: var(--of-petrol-800); }
.sit-jalon-lb { display: block; font-size: .77rem; color: var(--of-ink-650); margin-top: .3rem; line-height: 1.35; }
.sit-jalon-in { display: block; font-size: .7rem; color: var(--of-ink-550); margin-top: .4rem; }
.sit-jalon-tag { display: inline-block; margin-top: .4rem; font-size: .66rem; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--of-petrol-800); font-family: var(--of-font-data); }

.sit-conv-bascule { margin: 1rem 0 .2rem; font-size: .82rem; color: var(--of-ink-650); line-height: 1.5; }
.sit-conv-chip { display: inline-block; font-size: .74rem; font-weight: 600; padding: .12rem .55rem;
  border-radius: var(--of-radius-pilule); background: var(--of-teal-100); color: var(--of-petrol-800); margin-right: .35rem; }

/* #328 — Score de santé composite. Anneau pétrole (la couleur n'encode PAS la
   note), sous-scores en barres à baseline commune, maillon faible désigné. Classe
   .sante-* (jamais .sit-sante, qui est le bandeau QUALITÉ DES DONNÉES — autre sens). */
.sante-head { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
/* #559 L4 — la jauge est un SVG dimensionné par OFChart ; il ne reste ici que
   le conteneur qui porte l'ARIA. */
.sante-ring { flex: 0 0 auto; }
.sante-head-txt { flex: 1 1 260px; }
/* #555 — En-tête neutre par défaut. Le rouge --neg est réservé à « À agir » (maillon
   < 45 ou écrêté) ; « À surveiller » et « Bon » restent neutres (pas de fausse alerte). */
.sante-prio-h { display: block; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--of-ink-650); }
.sante-prio.is-agir .sante-prio-h { color: var(--of-negative-700); }
.sante-prio.is-ok .sante-prio-h { text-transform: none; letter-spacing: 0; font-size: .82rem; color: var(--of-ink-650); }
.sante-prio-c { display: block; font-size: .9rem; color: var(--of-ink-650); margin-top: .3rem; line-height: 1.5; }
.sante-prio.is-ok .sante-prio-c { color: var(--of-ink-550); font-size: .82rem; }
.sante-ecrete { margin: .6rem 0 0; font-size: .8rem; color: var(--of-ink-650); }

/* #537 — Plan « Prochaines actions » : entre l'en-tête et le détail des sous-scores.
   Plan chiffré, trié côté API. Aucun --brass ici (réservé rail/fiscal). */
.sante-plan { margin: 0 0 1.3rem; padding: .9rem 1rem; border: 1px solid var(--of-line-200);
  border-radius: var(--of-radius-md); background: var(--of-surface-100); }
.sante-plan-h { margin: 0 0 .5rem; }
.sante-plan-lead { margin: 0 0 .8rem; font-size: .84rem; color: var(--of-ink-650); line-height: 1.5; }
.sante-plan-lead .num { font-family: var(--of-font-data); font-variant-numeric: tabular-nums; }
.sante-plan .hint { margin: 0; font-size: .82rem; color: var(--of-ink-550); }
.sante-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
/* Grille alignée (P1/P2) : gain et effort bornés, le libellé absorbe le surplus. */
.sante-action { display: grid; grid-template-columns: 5.2em 1fr auto auto;
  align-items: center; gap: .3rem .8rem; font-size: .85rem; }
/* #768 — `.sante-action-gain.nc` A DISPARU. C'était le quatrième dialecte de
   « non chiffrable » du front : un rendu local, dans une feuille d'écran, pour
   un mot qui a désormais UNE fabrique (`OF.ui.etats.nonChiffrable`) et UNE
   classe (`.of-nc`, `optifisc.css`). La cellule ne fait plus que borner sa
   colonne ; le rendu de l'état vient du composant partagé — d'où le passage
   des propriétés CHIFFRÉES (mono tabulaire, gras, sans césure) sur la seule
   variante `.num`, celle qui porte réellement un nombre. */
.sante-action-gain { text-align: right; }
.sante-action-gain.num { font-family: var(--of-font-data); font-variant-numeric: tabular-nums;
  font-weight: 600; color: var(--of-positive-700); white-space: nowrap; }
.sante-action-lbl { color: var(--of-ink-650); line-height: 1.4; }
.sante-action-eff { flex: 0 0 auto; white-space: nowrap; }

.sante-gauges { display: grid; gap: 1rem; }
.sante-gauge { display: grid; grid-template-columns: minmax(150px, 230px) 1fr auto auto;
  grid-template-areas: "lbl bar pc etat" "conseil conseil conseil conseil";
  align-items: center; gap: .3rem .8rem; font-size: .85rem; padding: .5rem .6rem; border-radius: var(--of-radius-md); }
.sante-gauge.maillon { background: var(--of-negative-100); box-shadow: inset 3px 0 0 var(--of-negative-700); }
/* #555 — « À surveiller » : surlignage NEUTRE (pas de rouge), la nuance est portée par
   la pastille ambre .niv-moyen déjà présente sur la jauge. */
.sante-gauge.maillon-surveiller { background: var(--of-surface-100); box-shadow: inset 3px 0 0 var(--of-ink-550); }
.sante-gauge-lbl { grid-area: lbl; color: var(--of-ink-650); }
.sante-poids { color: var(--of-ink-550); font-size: .72rem; margin-left: .4rem; font-family: var(--of-font-data); }
.sante-gauge-bar { grid-area: bar; }
.sante-gauge-bar .track { height: 7px; background: var(--of-line-300); border-radius: var(--of-radius-pilule); overflow: hidden; }
.sante-gauge-bar .fill { height: 100%; border-radius: var(--of-radius-pilule);
  background: linear-gradient(90deg, var(--of-petrol-800), var(--of-teal-650)); transition: width .6s var(--of-ease-ouvre); }
.sante-gauge-pc { grid-area: pc; min-width: 2.2em; text-align: right; font-variant-numeric: tabular-nums; color: var(--of-ink-950); font-weight: 600; }
/* Niveau porté par un mot + une pastille (jamais la couleur seule). #559/L1 : le
   palier « moyen » n'a plus de teinte propre — sa pastille est un ANNEAU d'encre
   là où « bon » et « faible » sont des disques pleins --pos / --neg. Ni ambre
   codé en dur, ni --brass (réservé au rail fiscal). */
.sante-gauge-etat { grid-area: etat; display: inline-flex; align-items: center; gap: 5px;
  min-width: 5.2em; font-size: .78rem; font-weight: 600; }
.sante-gauge-etat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--of-ink-550); }
.sante-gauge-etat.niv-bon { color: var(--of-positive-700); } .sante-gauge-etat.niv-bon::before { background: var(--of-positive-700); }
.sante-gauge-etat.niv-moyen { color: var(--of-ink-950); }
.sante-gauge-etat.niv-moyen::before { background: transparent; box-shadow: inset 0 0 0 2px var(--of-ink-650); }
.sante-gauge-etat.niv-faible { color: var(--of-negative-700); } .sante-gauge-etat.niv-faible::before { background: var(--of-negative-700); }
.sante-conseil { grid-area: conseil; margin: .1rem 0 0; font-size: .78rem; color: var(--of-ink-550); line-height: 1.45; }

/* prefers-reduced-motion : la jauge s'affiche à son état final, sans remplissage animé. */
@media (prefers-reduced-motion: reduce) {
  .sit-convgauge-bar .fill { transition: none; }
  .sante-gauge-bar .fill { transition: none; }
}

@media (max-width: 720px) {
  .sante-gauge { grid-template-columns: 1fr auto auto; grid-template-areas: "lbl pc etat" "bar bar bar" "conseil conseil conseil"; }
  /* Plan d'action : gain + libellé sur une ligne, effort + lien repliés dessous. */
  .sante-action { grid-template-columns: 5.2em 1fr; grid-template-areas: "gain lbl" "eff lien"; }
  .sante-action-gain { grid-area: gain; }
  .sante-action-lbl { grid-area: lbl; }
  .sante-action-eff { grid-area: eff; justify-self: start; }
  .sante-action .cd-go { grid-area: lien; justify-self: start; }
}

/* #428 — Profil de risque : tuiles de stats sobres, mono tabular. */
.risqmet-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .8rem; margin: .3rem 0 .2rem; }
.risqmet-tile { border: 1px solid var(--of-line-300); border-radius: var(--of-radius-md); padding: .7rem .85rem; background: var(--of-surface-100); }
.risqmet-lbl { display: block; font-size: .78rem; color: var(--of-ink-650); margin-bottom: .35rem; }
.risqmet-val { display: block; font-family: var(--of-font-data); font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 600; color: var(--of-ink-950); }
.risqmet-tile.neg .risqmet-val { color: var(--of-negative-700); }
.risqmet-sub { display: block; font-size: .72rem; color: var(--of-ink-550); margin-top: .25rem; }

/* #554 — Restitution LISIBLE du risque pour non-pro : les pourcentages traduits en
   euros, dits en français, et rejoués en scénarios. Tout en --ink/--ink-2 (contraste
   AA sur --surface et --surface-2), aucune information portée par la couleur seule :
   l'origine d'un scénario est un TAG TEXTUEL, la perte porte son signe. */
.risqmet-resume { margin: .2rem 0 .8rem; font-size: .95rem; line-height: 1.55; color: var(--of-ink-950);
  border-left: 3px solid var(--of-petrol-800); padding-left: .7rem; }
.risqmet-h3 { margin: 1.1rem 0 .4rem; font-size: .88rem; font-weight: 600; color: var(--of-ink-650);
  text-transform: uppercase; letter-spacing: .04em; }
.risqmet-phrases { margin: 0; padding-left: 1.1rem; }
.risqmet-phrases li { margin: 0 0 .45rem; font-size: .86rem; line-height: 1.5; color: var(--of-ink-650); }
.risqmet-hyp { display: block; margin-top: .2rem; font-size: .76rem; font-weight: 400; color: var(--of-ink-550); }
.risqmet-tag { display: inline-block; margin-left: .35rem; padding: .05rem .4rem; border-radius: var(--of-radius-pilule);
  border: 1px solid var(--of-line-200); background: var(--of-surface-100); color: var(--of-ink-650);
  font-size: .7rem; font-weight: 600; vertical-align: middle; }
.risqmet-perte { color: var(--of-negative-700); font-weight: 600; }
.risqmet-stress .sit-table { margin-top: .3rem; }

/* #410 — Chaîne budget → épargne → DCA → crédit. Maillons chaînés + courbe de
   dette. Pétrole uniquement (laiton fiscal intouché). */
.chaine-maillons { display: flex; align-items: stretch; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chaine-maillon { flex: 1 1 160px; border: 1px solid var(--of-line-300); border-radius: var(--of-radius-md);
  padding: .75rem .85rem; background: var(--of-surface-100); display: flex; flex-direction: column; gap: .15rem; }
.chaine-num { font-family: var(--of-font-data); font-size: .7rem; font-weight: 700; color: var(--of-petrol-800);
  background: var(--of-teal-100); width: 1.4em; height: 1.4em; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; }
.chaine-titre { font-size: .74rem; color: var(--of-ink-550); text-transform: uppercase; letter-spacing: .04em; margin-top: .3rem; }
.chaine-val { font-family: var(--of-font-data); font-variant-numeric: tabular-nums; font-size: 1.2rem; font-weight: 600; color: var(--of-ink-950); }
.chaine-sous { font-size: .74rem; color: var(--of-ink-650); }
.chaine-lien { display: flex; align-items: center; color: var(--of-petrol-800); font-size: 1.3rem; font-weight: 700; }
.chaine-courbe { margin-top: .5rem; min-height: 180px; }

@media (max-width: 760px) {
  .chaine-maillons { flex-direction: column; }
  .chaine-lien { justify-content: center; transform: rotate(90deg); height: 1.2rem; }
}

@media (max-width: 720px) {
  .sit-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .sit-net-grid { grid-template-columns: 1fr; }
  .sit-alloc { grid-template-columns: 1fr; justify-items: center; }
  .sit-geo-grid { grid-template-columns: 1fr; }
  .sit-alloc-table { width: 100%; }
  .sit-conv-list { grid-template-columns: 1fr; }
  .sit-convgauge { grid-template-columns: 1fr auto; grid-template-areas: "lbl pc" "bar bar" "etat etat"; row-gap: .3rem; }
  .sit-convgauge-lbl { grid-area: lbl; }
  .sit-convgauge-bar { grid-area: bar; }
  .sit-convgauge-pc { grid-area: pc; }
  .sit-convgauge-etat { grid-area: etat; text-align: left; }
  .sit-ev-f-grid { grid-template-columns: 1fr; }
  .sit-ev-det > summary { grid-template-columns: 70px 1fr auto; }
  .sit-ev-cta { grid-column: 1 / -1; text-align: right; }
}

/* ==================================================================
   #965 — CARTE « RÉCONCILIATION DE L'INVENTAIRE »
   ------------------------------------------------------------------
   Elle porte les CHIFFRES du verdict (la phrase, elle, vit dans le
   bandeau `#sit-sante` — un seul rendu par texte). Aucun jeton créé :
   encre, filets et états existants.
   ================================================================== */
.sit-verdict.est-ko { box-shadow: inset 0 0 0 1px var(--of-negative-100); }
.sit-verdict-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem 1.2rem; margin: 0 0 .8rem; }
.sit-verdict-kv > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.sit-verdict-kv dt { font-size: .78rem; color: var(--of-ink-550); text-transform: uppercase; letter-spacing: .04em; }
.sit-verdict-kv dd { margin: 0; font-family: var(--of-font-data); font-variant-numeric: tabular-nums;
  font-size: 1rem; font-weight: 600; color: var(--of-ink-950); }
.sit-verdict-kv dd .ok { color: var(--of-positive-700); }
.sit-verdict-kv dd .ko { color: var(--of-negative-700); }
.sit-verdict-note { display: block; font-family: var(--of-font-ui); font-size: .74rem;
  font-weight: 400; color: var(--of-ink-650); line-height: 1.35; }
.sit-verdict-t { margin-top: .4rem; }

@media (max-width: 720px) {
  .sit-verdict-kv { grid-template-columns: 1fr; }
}

/* ==================================================================
   #965 — IMPRESSION : LES SIX PANNEAUX, PAS UN SUR SIX.
   ------------------------------------------------------------------
   CE QUI ÉTAIT CASSÉ. Les six sections du rapport sont des `tabpanel`
   que `situation.js` bascule par `panel.hidden = !actif`. `Ctrl+P` ne
   sortait donc QUE l'onglet ouvert — mesuré sur le banc de parité le
   19/08/2026 : 2 831 caractères imprimés sur 30 978 rendus, soit
   90,9 % du rapport absent, avec la mise en forme d'un document
   complet, et sans que rien ne le dise. `situation.css` n'avait
   AUCUN bloc `@media print`.

   POURQUOI DU CSS, ET PAS `beforeprint` / `afterprint`. La règle
   ci-dessous a été MESURÉE sur le banc avant d'être écrite : l'attribut
   `hidden` n'est pas un style en ligne, c'est `[hidden]{display:none}`
   dans la feuille du NAVIGATEUR — une déclaration d'auteur la bat sans
   `!important`. Vérifié en `emulateMedia({media:'print'})` : les six
   panneaux passent à `display:block` et le texte imprimé va de 2 831 à
   18 209 caractères (l'écart avec les 30 978 de l'écran est ce que la
   feuille d'impression masque à dessein : boutons, barre d'onglets,
   `<details>` repliés).

   Les deux autres voies ont été écartées, et pour des raisons de fond :
     · `beforeprint`/`afterprint` MUTERAIT l'état de l'écran pendant
       l'impression. `afterprint` n'est pas garanti sur tous les chemins
       d'impression ; s'il manque, les six panneaux restent ouverts et
       la barre d'onglets ment sur `aria-selected` — un écran cassé par
       une impression. Le CSS, lui, ne change RIEN au DOM : le motif
       ARIA (roving tabindex, flèches, Home/End) n'est même pas approché.
     · Remplacer `hidden` par une classe supposerait d'éditer
       `cockpit.html` et retirerait des `tabpanel` la seule chose qui les
       sort de l'arbre d'accessibilité quand ils sont inactifs.

   La règle est bornée à `#vue-panel-situation:not([hidden])` : imprimer
   la profondeur « cockpit » ne doit pas déplier le rapport détaillé.
   ================================================================== */
@media print {
  #vue-panel-situation:not([hidden]) #sit-corps > section[role="tabpanel"][hidden] { display: block; }

  /* Chaque section reprend le nom de son onglet — la barre d'onglets est
     masquée à l'impression, six blocs anonymes se suivraient sinon.
     Le libellé vient du bouton lui-même (`situation.js`), jamais d'une
     seconde liste de noms tenue ici. */
  #vue-panel-situation #sit-corps > section[data-titre-impression]::before {
    content: attr(data-titre-impression);
    display: block; font-size: 15px; font-weight: 700; color: var(--of-print-encre);
    margin: 0 0 .6rem; padding-bottom: .25rem; border-bottom: 1px solid var(--of-line-300);
  }
  /* Une section commence en haut de page : le rapport est un document, pas
     un défilement aplati. La première ne force rien (pas de page blanche). */
  #vue-panel-situation #sit-corps > section + section { break-before: page; page-break-before: always; }
  #vue-panel-situation #sit-corps > section { break-inside: auto; }

  /* Le verdict de réconciliation SURVIT au papier — c'est la section que le
     lecteur de la feuille ne peut aller vérifier nulle part ailleurs (#804).
     Il ne se coupe pas au milieu, et son cerne d'alerte reste imprimé. */
  .sit-sante, .sit-verdict { break-inside: avoid; page-break-inside: avoid;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ══════════════════════════════════════════════════════════════════════════
   #613 — CE QUE LA SORTIE COÛTE, PAR RÉGIME FISCAL.
   ──────────────────────────────────────────────────────────────────────────
   ⚠️ SEUL ENDROIT DE CETTE FEUILLE OÙ LE LAITON EST ADMIS, et il y est borné
   à la COLONNE DE RÉGIME — `.sit-rail-regime` et rien d'autre. Pas la ligne,
   pas l'en-tête, pas le fond de carte : une table laiton de bout en bout ne
   dit plus rien, elle décore.

   ⚠️ Le nom du jeton n'est PAS écrit dans cette prose, et ce n'est pas une
   coquetterie : la garde ci-dessous lit la feuille BRUTE, commentaires
   compris. Citer la teinte hors de ses deux sélecteurs, c'est déjà en faire
   une seconde source — et une garde qui tolère la citation finit par tolérer
   l'emploi (#840, la leçon inverse).

   La liste fermée du laiton (rail fiscal, aperçu fiscal, cascade brut→net)
   s'ouvre ici d'une entrée MOTIVÉE — `DesignSystemeFabriquesTest::
   FEUILLES_AU_LAITON` la porte, et `docs/design-authority/echanges/
   2026-08-21-laiton-rail-fiscal.md` en écrit le motif. Sans cette entrée, la
   prochaine relecture lirait cet emprunt comme une dérive.

   Ce que la teinte dit ici : « cette colonne nomme un mécanisme fiscal ». Elle
   ne code PAS une performance, ni une alerte, ni une catégorie d'actif.
   ══════════════════════════════════════════════════════════════════════════ */

.sit-rail-t{ width:100% }

/* L'étiquette de colonne rappelée dans la cellule ne sert QU'à l'affichage en
   blocs (≤ 520 px) : au-dessus, l'en-tête de table la porte déjà. */
.sit-rail-lib{ display:none }

/* Colonne de régime — la marque laiton, et elle seule. */
.sit-rail-regime{
  display:inline-flex; align-items:baseline; gap:8px;
  color:var(--of-fiscal-750); font-weight:600;
}
.sit-rail-regime::before{
  content:""; flex:0 0 auto; width:3px; height:.85em; border-radius:2px;
  background:var(--of-fiscal-650);
}
/* « Régime non établi » : la marque devient CREUSE. Une absence de régime ne
   se peint pas comme un régime de plus — elle se peint comme un vide bordé. */
.sit-rail-regime[data-rail="regime_non_etabli"]::before{
  background:var(--of-fiscal-100); box-shadow:inset 0 0 0 1px var(--of-fiscal-650);
}
.sit-rail-l.est-non-etabli th[scope="row"]{ background:var(--of-surface-100) }

/* Frottement — LE SUJET de la carte : c'est lui qui porte le poids, pas la
   valeur (SPEC graphiste du 06/08). La valeur reste le contexte. */
.sit-rail-frot{
  font-family:var(--of-font-data); font-variant-numeric:tabular-nums;
  font-weight:700; color:var(--of-ink-950);
}
.sit-rail-t td.num-col, .sit-rail-t th.num-col{
  font-family:var(--of-font-data); font-variant-numeric:tabular-nums;
}
.sit-rail-total-lib{ font-weight:600 }
.sit-rail-cent{ font-variant-numeric:tabular-nums }

.sit-rail-per{ margin:10px 0 0 }

/* Ce qui n'est attribuable à aucun régime : nommé, sous la table, jamais
   réparti au prorata dans les lignes (#844). */
.sit-rail-na{
  margin-top:14px; padding-top:12px;
  border-top:1px solid var(--of-line-200);
}
.sit-rail-na-v{
  margin:4px 0 6px; font-family:var(--of-font-data);
  font-variant-numeric:tabular-nums; font-size:14px; color:var(--of-ink-950);
}

/* ── 412 px : la table devient une LISTE DE BLOCS, et RIEN NE TOMBE ──────────
   Arbitrage du 04/08 : un régime par bloc, avec ses quatre informations. Les
   en-têtes de colonne sont réinjectés en `::before` sur chaque cellule —
   masquer une colonne en étroit ferait disparaître le frottement, c'est-à-dire
   le sujet même de la carte. */
@media (max-width:520px){
  .sit-rail-t thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  }
  .sit-rail-t, .sit-rail-t tbody, .sit-rail-t tr, .sit-rail-t th, .sit-rail-t td{
    display:block; width:auto;
  }
  .sit-rail-t tr{
    margin-bottom:10px; padding:10px 12px;
    border:1px solid var(--of-line-200); border-radius:var(--of-radius-md);
    background:var(--of-white);
  }
  .sit-rail-t th[scope="row"]{ background:transparent; padding:0 0 6px }
  .sit-rail-t td{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    padding:3px 0; text-align:left;
  }
  .sit-rail-lib{
    display:inline; flex:0 0 auto; font-size:12px; color:var(--of-ink-550);
  }
}