/* OPTIONS-UI-M01 -- boutons Options / Exposure, reglages Options, panneau de statut. LAB uniquement (elements crees par options-overlay.js). */

/* Layout compact : #mf-options-controls est une famille de barre (.mf-control-family) placee juste apres "Suivre le marche" ;
   separateur vertical et style des boutons viennent de compact-topbar.css (aucun composant ni style nouveau). */
.mf-compact #mf-options-controls button:disabled { opacity:.45; cursor:default; }

/* Layout classique (opt-out) : boutons nus a cote de "Suivre le marche". */
html:not(.mf-compact) #mf-options-controls { display:inline-flex; gap:4px; margin-left:8px; }
html:not(.mf-compact) .mf-options-btn { height:26px; padding:0 10px; border-radius:6px; cursor:pointer; white-space:nowrap;
  font:inherit; font-size:10px; font-weight:600; color:var(--muted); background:var(--pill); border:1px solid var(--pill-border); }
html:not(.mf-compact) .mf-options-btn[aria-pressed="true"] { color:var(--accent); border-color:var(--accent); }
html:not(.mf-compact) .mf-options-btn:disabled { opacity:.45; cursor:default; }

/* Reglages > Options (meme grammaire que le panneau : titre h2 + lignes compactes). */
#mf-options-settings .mf-opt-row { display:flex; align-items:center; gap:8px; margin:9px 0; font-size:11px; color:var(--muted); cursor:pointer; }
#mf-options-settings .mf-opt-row input { margin:0; accent-color:var(--accent); }
html:not(.mf-compact) #mf-options-settings { display:inline-flex; align-items:center; gap:10px; margin-left:8px; }
html:not(.mf-compact) #mf-options-settings h2 { display:none; }

/* Pastille Options (emplacement libere par l'ancien texte "live depuis" ; left:56px = a droite du rail d'outils de dessin) : "OPTIONS NQ . Gamma Pos" (cliquable). Fraicheur = COULEUR DE BORDURE : verte (recent) / ambre (plus ancien, toujours affiche) / rouge (indisponible). */
#options-badge { display:none; position:absolute; top:10px; left:56px; z-index:7; align-items:center; gap:6px; padding:3px 9px; cursor:pointer;
  border-radius:999px; font:inherit; font-size:10px; letter-spacing:.3px; color:var(--muted); white-space:nowrap;
  background:var(--pill); border:1px solid var(--pill-border); }
#options-badge.visible { display:flex; }
#options-badge.fresh { border-color:var(--live-ok); }
#options-badge.aging { border-color:var(--live-warn); }
#options-badge.unavailable { border-color:var(--live-bad); }
#options-badge:hover { filter:brightness(1.25); }
#options-badge:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#options-badge .ob-gamma { margin-left:-2px; font-weight:700; }
#options-badge .ob-gamma.pos { color:#2e9d52; } /* vert plus sombre que --live-ok */
#options-badge .ob-gamma.neg { color:var(--live-bad); }
/* Indicateur d'ouverture : chevron discret, purement CSS (aucun texte ajoute au chip) ; ferme = v, ouvert = ^ */
#options-badge::after { content:"\25BE"; font-size:9px; line-height:1; opacity:.7; margin-left:1px; }
#options-badge[aria-expanded="true"]::after { content:"\25B4"; opacity:1; color:var(--accent); }

/* Popover : contexte gamma / niveaux canoniques / fraicheur (meme grammaire que le panneau Flowha et les menus de la barre). */
#options-popover { position:absolute; top:40px; left:56px; z-index:8; min-width:230px; padding:10px 12px; font-size:11px; line-height:1.5;
  background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 32px #0008; color:var(--text); }
#options-popover[hidden] { display:none; }
#options-popover .op-head { font-size:12px; font-weight:700; letter-spacing:.4px; color:var(--accent); margin-bottom:6px; }
#options-popover .op-sec { padding:6px 0; border-top:1px solid var(--border); }
#options-popover .op-row, #options-popover .op-when { display:flex; justify-content:space-between; gap:18px; white-space:nowrap; }
#options-popover .op-when { margin-top:2px; }
#options-popover .op-k { color:var(--muted); }
#options-popover .op-v { color:var(--text); font-variant-numeric:tabular-nums; text-align:right; }
#options-popover .op-v.pos { color:var(--live-ok); }
#options-popover .op-v.neg { color:var(--live-bad); }