/* V1.0.7 compact top bar. Every rule is scoped by .mf-compact, set by compact-topbar.js; the classic layout simply never gets that class. */
/* First-paint guard (inline script in index.html sets .mf-boot): never show the classic header while the compact one is pending. */
.mf-boot:not(.mf-compact) :is(header, #toolbar) { visibility:hidden; }
.mf-compact header { gap:0; padding:4px 12px; flex-wrap:wrap; }
.mf-compact .brand { gap:7px; flex-shrink:0; }
.mf-compact .brand-mark { width:26px; height:26px; border-radius:7px; font-size:11px;
  background:none; border:0; }
.mf-compact .mf-brand-logo { display:block; width:26px; height:26px; object-fit:contain;
  border-radius:inherit; }
.mf-compact .brand-text .t1 { font-size:14px; white-space:nowrap; }
.mf-compact .brand-text .t2 { display:none; }
.mf-compact #toolbar { flex:1; justify-content:center; padding:0; gap:0; background:none; border:0; }
.mf-compact #toolbar > .tgroup > .lbl { display:none; }
.mf-compact #toolbar > .mf-control-family { position:relative; display:flex;
  align-items:center; gap:4px; flex-shrink:0; padding-left:15px; }
.mf-compact #toolbar > .mf-control-family::before { content:""; position:absolute;
  left:7px; top:50%; transform:translateY(-50%); width:1px; height:20px;
  background:var(--text); opacity:.72; pointer-events:none; }
.mf-compact #toolbar > .mf-control-family .pillset,
.mf-compact #toolbar > .mf-control-family .mode-toggle { gap:4px; }
.mf-compact .tgroup { gap:6px; }
.mf-compact .pillset { gap:3px; }
.mf-compact .pillset button,
.mf-compact .mode-toggle button { min-height:30px; padding:5px 8px; font-size:11px; }
.mf-compact #toolbar > .mf-control-family button,
.mf-compact #toolbar .mf-settings-panel button { display:inline-flex;
  align-items:center; justify-content:center; text-align:center; height:26px; min-height:26px;
  line-height:18px; padding:3px 8px; border-radius:6px;
  background:var(--pill); color:var(--muted); border:1px solid var(--pill-border);
  font-size:10px; white-space:nowrap; cursor:pointer; }
.mf-compact #btn-fit { margin-left:0; }
.mf-compact #toolbar > .mf-control-family button.active,
.mf-compact #toolbar .mf-settings-panel button.active { background:var(--pill); color:var(--accent);
  border-color:#80652f; box-shadow:inset 0 0 8px #e8b44a0a; font-weight:600; }
.mf-compact #toolbar > .mf-control-family button:hover,
.mf-compact #toolbar .mf-settings-panel button:hover:not(:disabled) { border-color:var(--accent); }
.mf-compact #toolbar .mf-settings-panel button:disabled { color:var(--muted);
  border-color:var(--pill-border); opacity:.65; cursor:default; box-shadow:none; }
.mf-compact .mf-toggle:disabled { opacity:.45; cursor:default; }
.mf-compact .nav-right { margin-left:0; white-space:nowrap; }
.mf-compact .nav-right #nav-instrument { display:none; }
.mf-compact .mode-toggle { margin-right:0; gap:3px; }
.mf-compact #mf-instrument-menu { position:relative; }
.mf-compact #mf-instrument-current { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  list-style:none; height:26px; padding:3px 8px; line-height:18px; border-radius:6px;
  font-size:10px; font-weight:600; color:var(--accent); background:var(--pill);
  border:1px solid #80652f; box-shadow:inset 0 0 8px #e8b44a0a; cursor:pointer; }
.mf-compact #mf-instrument-contract { color:var(--muted); font-weight:500; letter-spacing:.2px; }
.mf-compact #mf-instrument-current .live-status { display:inline-flex; align-items:center; flex-shrink:0; margin:0; }
.mf-compact #mf-instrument-contract:empty { display:none; }
.mf-compact #mf-instrument-current::-webkit-details-marker { display:none; }
.mf-compact #mf-instrument-current:hover { border-color:var(--accent); }
.mf-compact #mf-instrument-menu:not([open]) .mf-instrument-panel { display:none; }
.mf-compact .mf-instrument-panel { position:absolute; left:0; top:calc(100% + 7px);
  display:flex; flex-direction:column; gap:4px; z-index:30; min-width:96px; padding:6px;
  max-height:calc(100vh - 100px); overflow:auto; background:var(--panel);
  border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 32px #0008; }
/* V1.1.0 UI ORDRES: "Ordres ▾" menu, same trigger/panel language as the instrument selector. Trigger is gold while at
   least one order layer is shown, muted when every layer is off. */
.mf-compact #mf-orders-menu { position:relative; }
.mf-compact #mf-orders-current { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  list-style:none; height:26px; padding:3px 8px; line-height:18px; border-radius:6px;
  font-size:10px; font-weight:600; color:var(--muted); background:var(--pill);
  border:1px solid var(--pill-border); cursor:pointer; white-space:nowrap; }
.mf-compact #mf-orders-current.active { color:var(--accent); border-color:#80652f; box-shadow:inset 0 0 8px #e8b44a0a; }
.mf-compact #mf-orders-current::-webkit-details-marker { display:none; }
.mf-compact #mf-orders-current:hover,
.mf-compact #mf-orders-menu[open] #mf-orders-current { border-color:var(--accent); }
.mf-compact #mf-orders-menu:not([open]) .mf-orders-panel { display:none; }
.mf-compact .mf-orders-panel { position:absolute; left:0; top:calc(100% + 7px);
  display:flex; flex-direction:column; gap:4px; z-index:30; min-width:172px; padding:6px;
  background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 32px #0008; }
/* BETA UI: one row per order layer = name on the left, ON / OFF selector on the right (both states visible). */
.mf-compact .mf-orders-row { display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:26px;
  padding:0 0 0 2px; }
.mf-compact .mf-orders-row-label { font-size:10px; font-weight:600; color:var(--text); white-space:nowrap; }
.mf-compact .mf-orders-row.is-disabled .mf-orders-row-label { color:var(--muted); }
.mf-compact .mf-segment { display:inline-flex; padding:2px; gap:2px; border-radius:6px; background:#0a0e15;
  border:1px solid var(--pill-border); }
.mf-compact #toolbar .mf-segment button { height:20px; min-height:20px; min-width:34px; padding:0 7px; font-size:9px; font-weight:600;
  letter-spacing:.4px; border-radius:4px; border:1px solid transparent; background:transparent; color:var(--muted);
  box-shadow:none; }
.mf-compact #toolbar .mf-segment button:not(:disabled):not(.active):hover { color:var(--text); border-color:transparent; }
.mf-compact #toolbar .mf-segment button.active { color:var(--accent); background:var(--pill); border-color:#80652f;
  box-shadow:inset 0 0 8px #e8b44a14; }
.mf-compact .mf-orders-tier { display:flex; flex-direction:column; gap:4px; margin-top:3px; padding-top:7px;
  border-top:1px solid var(--border); }
.mf-compact .mf-orders-tier[hidden] { display:none; }
.mf-compact .mf-orders-tier-label { font-size:10px; color:var(--muted); padding:0 2px; }
.mf-compact .mf-orders-tier-set { display:flex; gap:4px; }
.mf-compact #toolbar .mf-orders-tier-set button { flex:1; min-width:0; }
/* V1.1.0 UI OUTILS: "Outils ▾" = same trigger and panel as "Ordres ▾"; one row per tool: name (opens its panel) + ON/OFF. */
.mf-compact #toolbar > .mf-control-family[hidden] { display:none; }
.mf-compact #mf-tools-menu { position:relative; }
.mf-compact #mf-tools-current { display:inline-flex; align-items:center; justify-content:center; gap:8px;
  list-style:none; height:26px; padding:3px 8px; line-height:18px; border-radius:6px;
  font-size:10px; font-weight:600; color:var(--muted); background:var(--pill);
  border:1px solid var(--pill-border); cursor:pointer; white-space:nowrap; }
.mf-compact #mf-tools-current.active { color:var(--accent); border-color:#80652f; box-shadow:inset 0 0 8px #e8b44a0a; }
.mf-compact #mf-tools-current::-webkit-details-marker { display:none; }
.mf-compact #mf-tools-current:hover,
.mf-compact #mf-tools-menu[open] #mf-tools-current { border-color:var(--accent); }
.mf-compact #mf-tools-menu:not([open]) .mf-tools-panel { display:none; }
/* BETA UI: tool rows = same row + ON / OFF selector as "Ordres"; the name still opens the tool's panel (▾, as the menus). */
.mf-compact #toolbar .mf-orders-row .mf-tool-open { display:inline-flex; align-items:center; gap:5px; height:22px; min-height:22px;
  padding:0 4px 0 0; margin:0; border:0; background:none; box-shadow:none; color:var(--text); font-weight:600; cursor:pointer; }
.mf-compact #toolbar .mf-orders-row .mf-tool-open::after { content:"▾"; color:var(--muted); font-size:10px; line-height:1; }
.mf-compact #toolbar .mf-orders-row .mf-tool-open:hover,
.mf-compact #toolbar .mf-orders-row .mf-tool-open.is-open { color:var(--accent); border:0; }
.mf-compact #toolbar .mf-orders-row .mf-tool-open:hover::after { color:var(--accent); }
.mf-compact #toolbar .mf-orders-panel button:disabled { opacity:.45; cursor:default; box-shadow:none; }
.mf-compact #mf-settings { position:relative; margin-left:auto; }
.mf-compact #mf-settings summary { display:inline-flex; align-items:center; justify-content:center;
  list-style:none; width:28px; height:26px; border-radius:6px; cursor:pointer;
  font-size:15px; color:var(--muted); background:var(--pill); border:1px solid var(--pill-border); }
.mf-compact #mf-settings summary::-webkit-details-marker { display:none; }
.mf-compact #mf-settings[open] summary { color:var(--accent); border-color:var(--accent); }
.mf-compact #mf-settings:not([open]) .mf-settings-panel { display:none; }
.mf-compact .mf-settings-panel { position:absolute; right:0; top:calc(100% + 7px);
  z-index:30; width:290px; max-width:calc(100vw - 24px); max-height:calc(100vh - 100px);
  overflow:auto; padding:14px; background:var(--panel); border:1px solid var(--border);
  border-radius:8px; box-shadow:0 12px 32px #0008; }
.mf-compact .mf-settings-panel section + section { margin-top:16px; }
.mf-compact .mf-settings-panel h2 { margin:0 0 9px; font-size:12px; color:var(--text); }
.mf-compact .mf-settings-panel .tgroup { align-items:flex-start; flex-direction:column; margin:9px 0; }
.mf-compact .mf-settings-panel .lbl { text-transform:none; letter-spacing:0; font-size:11px; }
.mf-compact .mf-settings-panel .legend-wrap { margin-top:9px; width:100%; min-width:0; } /* + 6px .tgroup gap = 15px under the palette buttons; 9px = the panel's own vertical unit (h2, .tgroup) */
.mf-compact #toolbar .mf-settings-panel select { height:26px; font-size:10px;
  line-height:18px; padding:3px 8px; }
.mf-compact :is(button, summary, select):focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (min-width:1101px) {
  .mf-compact header { position:relative; }
  .mf-compact .brand { position:absolute; left:12px; }
  .mf-compact #mf-settings { position:absolute; right:12px; margin-left:0; }
}
@media (min-width:1101px) and (max-width:1360px) {
  /* Flowha + Options now sit in the centred toolbar: below ~1360px the version tag would touch the first control, so it is dropped (logo + name stay). */
  .mf-compact .brand-text .t1 .ver { display:none; }
}
@media (max-width:1100px) {
  .mf-compact header { gap:6px 0; }
  .mf-compact .brand-text { display:none; }
}
@media (max-width:760px) {
  .mf-compact #toolbar { flex-basis:calc(100% - 40px); }
  .mf-compact .nav-right { margin-left:0; }
}