/* ============================================================
   ROOMMIX — identité DEHAENE + PARTENAIRES
   ------------------------------------------------------------
   Palette relevée sur le logotype officiel (logo-final-c.svg) :
     olive  #6A6854   fond de marque
     jaune  #FFE930   le « + » du logotype
   et sur le site de l'agence :
     encre  #292929   texte principal
     gris   #525252   texte secondaire

   Le jaune est un accent de SURFACE, jamais de texte : sur fond
   clair il ne passe aucun seuil de contraste. L'identité en texte
   et en trait, c'est l'olive. Un rouge d'alerte reste nécessaire —
   il n'est pas décoratif, il signale une non-conformité.
   ============================================================ */

:root{
  --paper:      #FFFFFF;
  --paper-deep: #F2F2EF;
  --panel:      #FAFAF9;
  --ink:        #292929;
  --ink-soft:   #525252;
  --line:       #D9D9D3;
  --line-soft:  #ECECE7;

  --brand:      #6A6854;
  --brand-deep: #4F4E3F;
  --brand-wash: #EFEFEA;
  --accent:     #FFE930;
  --alert:      #A6321A;
  --ok:         #4F7A3F;
  --warn:       #B3771D;

  --t1:#D9A441; --t2:#8AA67A; --t3:#6E93B5; --t4:#C0756A; --t5:#937FA8;

  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
  --sans:'Circular Std','Poppins','Helvetica Neue',Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html,body{height:100%}
body{
  font-family:var(--sans);
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
  background:var(--paper);
  overflow:hidden;
  display:flex;flex-direction:column;
}

/* ---------------- header ---------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 20px;height:58px;flex:0 0 58px;
  background:var(--brand);
  color:#fff;
}
.brand{display:flex;align-items:baseline;gap:12px}
/* le « + » du logotype, à l'échelle de l'interface */
.brand-mark{
  width:18px;height:18px;display:inline-block;
  transform:translateY(3px);position:relative;
}
.brand-mark::before,.brand-mark::after{
  content:'';position:absolute;background:var(--accent);
}
.brand-mark::before{left:7px;top:0;width:4px;height:18px}
.brand-mark::after{left:0;top:7px;width:18px;height:4px}
.brand h1{
  font-family:var(--sans);font-weight:600;font-size:21px;
  letter-spacing:.14em;text-transform:uppercase;color:#fff;
}
.brand-sub{
  font-size:10px;color:rgba(255,255,255,.72);
  letter-spacing:.16em;text-transform:uppercase;
}
/* LE STADE EST UN AVERTISSEMENT, PAS UNE DÉCORATION — encore faut-il
   qu'il se voie. Je l'avais peint en `--brand` : c'est la couleur DU
   BANDEAU lui-même. Le mot était bien là, olive sur olive, invisible —
   on voyait le filet et rien d'autre. Un texte ne se colore jamais dans
   la teinte du fond qui le porte. */
/* le séparateur reste dans la teinte du sous-titre : c'est une ponctuation,
   pas une information */
.brand-sep{opacity:.5}
.brand-beta{
  margin-left:2px;padding:1px 5px;
  background:var(--accent);color:var(--ink);
  font-weight:700;letter-spacing:.14em;
  border:0;font-family:inherit;font-size:inherit;
  text-transform:uppercase;cursor:pointer;
}
.brand-beta:hover{background:#fff}
.topbar-actions{display:flex;gap:8px}

/* ---------------- boutons / champs ---------------- */
.btn{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;
  background:var(--panel);color:var(--ink);
  border:1.5px solid var(--ink);
  padding:6px 12px;cursor:pointer;
  box-shadow:2px 2px 0 rgba(27,25,20,.55);
  transition:transform .08s ease, box-shadow .08s ease, background .12s, color .12s;
  user-select:none;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:active{transform:translate(2px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn-small{padding:5px 8px;font-size:10.5px;flex:1}
.btn-big{width:100%;padding:12px;font-size:13px}
.btn-accent{border-color:var(--brand);color:var(--brand);font-weight:600}
.btn-accent:hover{background:var(--brand);color:#fff}
.btn.active{background:var(--brand);color:#fff;border-color:var(--brand)}

input[type=number],select{
  font-family:var(--mono);font-size:12.5px;color:var(--ink);
  background:transparent;border:none;border-bottom:1.5px solid var(--ink);
  width:58px;text-align:right;padding:2px 2px;outline:none;
}
select{width:auto;text-align:left;cursor:pointer}
input[type=number]:focus,select:focus{border-bottom-color:var(--brand);background:var(--brand-wash)}
input[type=number]::-webkit-inner-spin-button{opacity:1}

/* ---------------- layout ---------------- */
.layout{
  flex:1;display:grid;
  grid-template-columns:308px 1fr 340px;
  min-height:0;
}
.panel{
  background:var(--panel);
  overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.panel-left{border-right:2px solid var(--ink);padding:14px 16px 40px}
.panel-right{border-left:2px solid var(--ink);padding:14px 12px}

/* ---------------- blocs paramètres ---------------- */
.block{margin-bottom:22px}
.block-title{
  font-family:var(--sans);font-weight:700;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;
  border-bottom:1.5px solid var(--ink);
  padding-bottom:5px;margin-bottom:10px;
}
.preset-row{display:flex;gap:6px;margin-bottom:8px}
.hint{
  font-size:10.5px;line-height:1.5;color:var(--ink-soft);
  margin-top:8px;
}
.hint b{color:var(--ink)}

.field{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;padding:4.5px 0;
  border-bottom:1px dotted var(--line);
}
.field label{font-size:11.5px;color:var(--ink-soft)}
.fval{white-space:nowrap;font-size:12.5px}
.fval b{font-weight:600}

/* ---------------- table typologies ---------------- */
.typo-head,.typo-row{
  display:grid;
  grid-template-columns:14px 28px 48px 56px 52px 22px;
  gap:6px;align-items:center;
}
.typo-head{
  font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);padding:2px 0 6px;
}
.typo-row{padding:5px 0;border-bottom:1px dotted var(--line)}
.typo-row.off{opacity:.35}
.typo-row.infeasible input{color:var(--warn)}
.typo-dot{width:13px;height:13px;border:1.5px solid var(--ink)}
.typo-key{font-weight:700;font-size:12.5px}
.typo-row input[type=number]{width:100%;font-size:12px}
.typo-row input[type=checkbox]{accent-color:var(--brand);cursor:pointer}
.typo-foot{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-top:8px;font-size:11px;color:var(--ink-soft);
}
.typo-foot b.bad{color:var(--warn)}

/* ---------------- canvas ---------------- */
.canvas-wrap{
  position:relative;min-width:0;min-height:0;
  background:var(--paper-deep);
}
#plan{
  position:absolute;inset:0;width:100%;height:100%;
  display:block;cursor:grab;
}
#plan.drawing{cursor:crosshair}
#plan.panning{cursor:grabbing}

.statusbar{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;gap:24px;align-items:center;
  padding:5px 14px;font-size:10.5px;color:var(--ink-soft);
  background:linear-gradient(to top, rgba(235,230,217,.92), rgba(235,230,217,0));
  pointer-events:none;
}
.statusbar span{white-space:nowrap}
.statusbar span:nth-child(2){flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis}
.statusbar span:nth-child(3){margin-left:auto}

/* Le bandeau d'avertissements. Il était centré et limité à 70 % de la
   largeur : sur un bâtiment complexe il débordait en hauteur au milieu du
   plan, masquant justement les logements qu'il décrit. Il barre désormais
   le haut de la zone de dessin sur toute sa largeur — il lit moins de
   plan, et le texte tient sur moins de lignes. */
.warn-box{
  position:absolute;top:0;left:0;right:0;
  background:var(--ink);color:var(--paper);
  border-bottom:3px solid var(--alert);
  padding:9px 16px;font-size:11px;line-height:1.6;
  box-shadow:0 4px 0 rgba(27,25,20,.22);
  z-index:5;
  max-height:34vh;overflow-y:auto;
  /* le même ascenseur que les panneaux Programme et Bilan — mais clair,
     parce que le bandeau est sur fond sombre : `var(--line)` y serait
     invisible. */
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.34) transparent;
}
/* chaque avertissement sur sa propre ligne, précédé de son signe */
.warn-box br{display:none}
.warn-box .warn-item{
  display:block;padding:2px 0 2px 18px;text-indent:-18px;
}
.warn-box .warn-item + .warn-item{
  border-top:1px solid rgba(255,255,255,.13);margin-top:3px;padding-top:5px;
}
/* LE BANDEAU SE REPLIE. Déplié il mangeait un tiers de l'écran ; replié
   il ne garde que son compte et le premier message, ce qui suffit à
   savoir s'il faut l'ouvrir. */
.warn-head{
  display:flex;align-items:baseline;gap:8px;width:100%;
  background:none;border:0;padding:0;margin:0;
  color:var(--paper);font:inherit;text-align:left;cursor:pointer;
}
.warn-head:hover{color:#fff}
.warn-head .warn-n{font-weight:700;white-space:nowrap}
.warn-head .warn-tease{
  opacity:.72;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;
}
.warn-head .warn-chevron{
  margin-left:auto;font-size:10px;letter-spacing:.08em;white-space:nowrap;opacity:.72;
}
.warn-box.replie{max-height:none}
.warn-box.replie #warnList{display:none}
.warn-box:not(.replie) .warn-head{
  border-bottom:1px solid rgba(255,255,255,.18);
  padding-bottom:5px;margin-bottom:4px;
}
.warn-box:not(.replie) .warn-head .warn-tease{display:none}

/* ---------------- fenêtre « à propos » ----------------
   Elle s'ouvre sur la pastille BETA, et c'est là que le mot s'explique :
   ce que l'outil fait, ce qu'il ne garantit pas encore, et sur quoi il
   s'appuie. Un avertissement en trois lettres n'informe personne s'il
   n'est pas dépliable. */
.modal-back{
  position:fixed;inset:0;z-index:60;
  background:rgba(27,25,20,.62);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.modal-back[hidden]{display:none}
.modal{
  background:var(--paper);color:var(--ink);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 rgba(27,25,20,.42);
  width:min(560px,100%);max-height:min(80vh,720px);
  display:flex;flex-direction:column;
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--brand);color:#fff;padding:10px 14px;
}
.modal-head h2{
  margin:0;font-family:var(--mono);font-size:13px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.modal-head h2 span{opacity:.72;font-weight:400;margin-left:8px}
.modal-x{
  background:none;border:0;color:#fff;font-size:22px;line-height:1;
  cursor:pointer;padding:0 2px;
}
.modal-x:hover{color:var(--accent)}
.modal-body{
  padding:16px 18px 20px;overflow-y:auto;font-size:12.5px;line-height:1.62;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.modal-body p{margin:0 0 12px}
.modal-body h3{
  margin:18px 0 7px;font-family:var(--mono);font-size:10.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep);
}
.modal-body ul{margin:0 0 12px;padding-left:17px}
.modal-body li{margin-bottom:5px}
.modal-def{
  display:grid;grid-template-columns:34px 1fr;gap:3px 10px;margin:0 0 12px;
}
.modal-def dt{
  font-family:var(--mono);font-weight:700;font-size:11px;color:var(--brand-deep);
}
.modal-def dd{margin:0}
.modal-fine{font-size:11.5px;opacity:.78}
.modal-body code{font-family:var(--mono);font-size:11.5px}
/* les liens restent dans la palette du plan : le bleu du navigateur
   n'appartient à aucun des jeux de couleurs de l'application. */
.modal-body a{
  color:var(--brand-deep);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.modal-body a:hover{color:var(--ink);text-decoration-color:var(--brand)}
.modal-body a:visited{color:var(--brand-deep)}
.modal-body a:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:2px;
}

.tooltip{
  position:fixed;z-index:50;pointer-events:none;
  background:var(--ink);color:var(--paper);
  font-size:11px;line-height:1.55;
  padding:7px 11px;max-width:260px;
  box-shadow:4px 4px 0 rgba(27,25,20,.35);
}
.tooltip b{color:#fff}
.tooltip .tt-key{color:var(--accent);font-weight:600}

/* ---------------- cartouche ---------------- */
.cartouche{
  border:1.5px solid var(--ink);
  outline:1.5px solid var(--ink);
  outline-offset:3px;
  margin:4px;
  padding:14px 14px 10px;
  background:var(--panel);
}
/* Le compteur de variante rejoint la barre d'onglets : le bandeau de
   titre qu'il coiffait mangeait 70 px de hauteur pour redire le nom du
   panneau, que sa position indique déjà. */
.cartouche-sub{
  font-size:10px;color:var(--ink-soft);
  align-self:center;padding:0 2px 7px 8px;white-space:nowrap;
}

.cart-sec{
  font-family:var(--sans);font-weight:700;font-size:10.5px;
  letter-spacing:.13em;text-transform:uppercase;
  margin:14px 0 6px;padding-top:8px;
  border-top:1px solid var(--line);
}

.mix-rows{display:flex;flex-direction:column;gap:9px}
.mix-row{font-size:11px}
.mix-row-top{
  display:flex;align-items:baseline;gap:7px;margin-bottom:3px;
}
.mix-row-top .typo-dot{flex:0 0 11px;width:11px;height:11px;transform:translateY(1px)}
.mix-row-top .mk{font-weight:700;width:22px}
.mix-row-top .mc{color:var(--ink-soft)}
.mix-row-top .ms{margin-left:auto}
.mix-row-top .ok{color:var(--ok)} .mix-row-top .ko{color:var(--warn)}
.mix-bars{position:relative;height:11px;background:var(--paper-deep);border:1px solid var(--line)}
.mix-bar{position:absolute;left:0;top:0;bottom:0;opacity:.85}
.mix-tgt{
  position:absolute;top:-2px;bottom:-2px;width:0;
  border-left:2px solid var(--ink);
}

.cart-list{display:flex;flex-direction:column}
.cart-list .row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-size:11.5px;padding:3.5px 0;
}
.cart-list .row .lbl{color:var(--ink-soft)}
.cart-list .row .dots{
  flex:1;margin:0 6px;border-bottom:1px dotted var(--line);
  transform:translateY(-3px);
}
.cart-list .row b{font-weight:600;white-space:nowrap}
.cart-list .row.major b{font-size:14px;color:var(--brand)}

.cartouche-foot{
  display:flex;justify-content:space-between;
  margin-top:16px;padding-top:8px;
  border-top:1.5px solid var(--ink);
  font-size:9.5px;color:var(--ink-soft);letter-spacing:.05em;
}

/* ---------------- sélecteur segmenté ---------------- */
.seg{
  display:flex;border:1.5px solid var(--ink);margin-bottom:9px;
  box-shadow:2px 2px 0 rgba(27,25,20,.5);
}
.seg-btn{
  flex:1;font-family:var(--mono);font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  background:var(--panel);color:var(--ink-soft);
  border:none;border-right:1.5px solid var(--ink);
  padding:6px 4px;cursor:pointer;transition:background .12s,color .12s;
}
.seg-btn:last-child{border-right:none}
.seg-btn:hover{background:var(--paper-deep)}
.seg-btn.active{background:var(--ink);color:var(--paper)}

/* ---------------- sous-sections dépliables ---------------- */
details.sub{
  border-top:1px dotted var(--line);
  margin-top:2px;
}
details.sub>summary{
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);cursor:pointer;padding:7px 0 6px;
  list-style:none;user-select:none;
}
details.sub>summary::-webkit-details-marker{display:none}
details.sub>summary::before{content:'+ ';color:var(--brand);font-weight:700}
details.sub[open]>summary::before{content:'\2212 '}
details.sub[open]>summary{color:var(--ink);font-weight:600}
details.sub>.hint{margin-top:0;margin-bottom:6px}

/* ---------------- grille de prix par typologie ---------------- */
.prix-table{display:flex;flex-direction:column}
.prix-row{
  display:grid;grid-template-columns:14px 30px 1fr 42px;
  gap:6px;align-items:center;padding:4px 0;
  border-bottom:1px dotted var(--line);
}
.prix-row.off{opacity:.35}
.prix-row input[type=number]{width:100%;font-size:12px}
.prix-row .pu{font-size:9.5px;color:var(--ink-soft);text-align:right}

/* ---------------- diagnostic de capacité ---------------- */
.capa{margin-top:10px;padding-top:8px;border-top:1px solid var(--line)}
.capa .row{font-size:10.5px}
.capa .gauge{
  position:relative;height:9px;margin:6px 0 2px;
  background:var(--paper-deep);border:1px solid var(--line);
}
.capa .gauge i{position:absolute;left:0;top:0;bottom:0;background:var(--ok);opacity:.75}
.capa .gauge i.over{background:var(--warn)}
.capa .gauge b{position:absolute;top:-3px;bottom:-3px;width:0;border-left:2px solid var(--ink)}

/* ---------------- galerie de variantes ---------------- */
.variants{
  position:absolute;left:0;right:0;bottom:24px;
  background:linear-gradient(to top,rgba(226,220,204,.97) 78%,rgba(226,220,204,0));
  padding:6px 12px 8px;z-index:4;
}
.variants.collapsed .variants-strip{display:none}
.variants-head{
  display:flex;align-items:baseline;gap:10px;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:5px;
}
.link-btn{
  background:none;border:none;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--brand);cursor:pointer;padding:0;text-decoration:underline;
}
.variants-strip{
  display:flex;gap:8px;overflow-x:auto;padding-bottom:3px;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent;
}
.vcard{
  flex:0 0 132px;background:var(--panel);
  border:1.5px solid var(--ink);cursor:pointer;
  box-shadow:2px 2px 0 rgba(27,25,20,.4);
  transition:transform .08s ease,box-shadow .08s ease;
  padding:0;text-align:left;font-family:var(--mono);
}
.vcard:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(27,25,20,.5)}
.vcard.active{border-color:var(--brand);box-shadow:0 0 0 2px var(--accent)}
.vcard svg{display:block;width:100%;height:52px;background:var(--paper)}
.vcard-lbl{
  display:flex;justify-content:space-between;align-items:baseline;gap:5px;
  padding:4px 6px 5px;border-top:1.5px solid var(--ink);font-size:9.5px;
}
.vcard-lbl .vn{font-weight:700}
.vcard.active .vcard-lbl{background:var(--brand);color:#fff}
.vcard-lbl .vm{color:var(--ink-soft)}
.vcard.active .vcard-lbl .vm{color:rgba(255,255,255,.85)}
.vcard-empty{font-size:10.5px;color:var(--ink-soft);padding:12px 2px}

/* ---------------- onglets du cartouche ---------------- */
.tabs{display:flex;border-bottom:1.5px solid var(--ink);margin-bottom:12px}
.tab{
  flex:1;font-family:var(--sans);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;
  background:none;border:none;color:var(--ink-soft);
  padding:6px 4px 7px;cursor:pointer;border-bottom:3px solid transparent;
  margin-bottom:-1.5px;
}
.tab:hover{color:var(--ink)}
.tab.active{color:var(--ink);border-bottom-color:var(--accent);border-bottom-width:3px}

/* ---------------- indicateur de marge ---------------- */
.kpi{
  border:1.5px solid var(--ink);padding:10px 12px;margin-bottom:4px;
  background:var(--paper-deep);
}
.kpi-lbl{font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.kpi-val{
  font-family:var(--sans);font-weight:900;font-size:30px;line-height:1.05;
  margin:2px 0 1px;letter-spacing:-.01em;
}
.kpi-val.ok{color:var(--ok)} .kpi-val.mid{color:#B07A1E} .kpi-val.ko{color:var(--warn)}
.kpi-sub{font-size:10.5px;color:var(--ink-soft)}
.kpi-2{
  display:flex;gap:12px;margin-top:9px;padding-top:8px;
  border-top:1px dotted var(--line);
}
.kpi-2 div{flex:1}
.kpi-2 b{display:block;font-size:14px;font-weight:600}
.kpi-2 span{font-size:9.5px;color:var(--ink-soft);letter-spacing:.05em}

.cart-list .row.sub{font-size:10.5px;padding:2px 0 2px 9px}
.cart-list .row.sub .lbl{color:var(--ink-soft)}
.cart-list .row.tot{border-top:1px solid var(--line);margin-top:2px;padding-top:5px}
.cart-list .row.tot b{font-weight:700}
.cart-list .row.grand{
  border-top:1.5px solid var(--ink);margin-top:6px;padding-top:6px;
}
.cart-list .row.grand b{font-size:13px;font-weight:700}
.cart-list .row .lbl small{color:var(--line);font-size:9.5px;margin-left:4px}

/* ---------------- matrice de sensibilité ---------------- */
.sens{overflow-x:auto}
.sens table{border-collapse:collapse;width:100%;font-size:9.5px}
.sens th,.sens td{
  border:1px solid var(--line);padding:3px 2px;text-align:center;
  font-weight:400;white-space:nowrap;
}
.sens th{background:var(--paper-deep);color:var(--ink-soft);font-size:9px}
.sens th.corner{font-size:8px;line-height:1.2}
.sens td.base{outline:1.5px solid var(--ink);outline-offset:-1.5px;font-weight:700}
.sens td.g1{background:rgba(62,124,79,.34)}
.sens td.g2{background:rgba(62,124,79,.18)}
.sens td.g3{background:rgba(200,192,171,.22)}
.sens td.g4{background:rgba(179,71,29,.18)}
.sens td.g5{background:rgba(179,71,29,.36)}

/* responsive minimal */
@media (max-width:1400px){
  .layout{grid-template-columns:288px 1fr 320px}
}
@media (max-width:1100px){
  .layout{grid-template-columns:264px 1fr 290px}
  .kpi-val{font-size:25px}
}

/* ---------- façade minimale dérivée ---------- */
.fac-min {
  font: 500 12px/1.6 'IBM Plex Mono', monospace;
  text-align: right; align-self: center;
  color: var(--ink-2, #6E6455); cursor: help;
  border-bottom: 1px dotted rgba(110, 100, 85, .55);
}
.fac-min.unknown { color: #B4552F; }

/* ---------- score décomposé ---------- */
.score-box { display: flex; flex-direction: column; gap: 4px; margin-bottom: 6px; }
.score-global {
  display: flex; align-items: baseline; gap: 5px;
  padding: 4px 0 8px; border-bottom: 1px solid rgba(27, 25, 20, .13);
}
.score-global .sg-val { font: 700 26px/1 'IBM Plex Mono', monospace; }
.score-global .sg-unit { font: 400 12px/1 'IBM Plex Mono', monospace; opacity: .55; }
.score-global .sg-lbl {
  margin-left: auto; font: 600 10px/1 'IBM Plex Mono', monospace;
  letter-spacing: .09em; text-transform: uppercase; color: #4F7A3F;
}
.score-global.ko .sg-val { color: #B4552F; }
.score-global.ko .sg-lbl { color: #B4552F; }

.score-row {
  display: grid; grid-template-columns: 92px 1fr 26px;
  gap: 6px; align-items: center; font-size: 11.5px;
}
.score-row .sr-lbl { cursor: help; }
.score-row .sr-bar {
  height: 6px; border-radius: 3px; overflow: hidden;
  background: rgba(27, 25, 20, .10);
}
.score-row .sr-bar i { display: block; height: 100%; border-radius: 3px; }
.score-row .sr-bar i.ok  { background: #6E8C5A; }
.score-row .sr-bar i.mid { background: #D9A441; }
.score-row .sr-bar i.ko  { background: #C0756A; }
.score-row .sr-val {
  font: 500 11px/1 'IBM Plex Mono', monospace; text-align: right;
  font-variant-numeric: tabular-nums;
}
.score-row .sr-det {
  grid-column: 2 / -1; font-size: 10.5px; opacity: .6;
  margin: -2px 0 3px;
}

.vcard-lbl .vs {
  margin-left: auto; font: 600 10px/1 'IBM Plex Mono', monospace;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(110, 140, 90, .18); color: #4F7A3F;
}
.vcard-lbl .vs.mid { background: rgba(217, 164, 65, .20); color: #8A6216; }
.vcard-lbl .vs.ko  { background: rgba(192, 117, 106, .20); color: #A2453A; }