/* M05 account UI: uses only the existing design tokens (--panel, --border, --accent, --muted, --pill ...). No glow, no layout change when the
   account module is inert (nothing here applies without the .mf-has-account class or the elements account.js creates). */
#mf-account { position:relative; z-index:30; margin-left:6px; }
#mf-account[hidden] { display:none; }
#mf-account summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  width:28px; height:28px; border-radius:50%; font-size:10px; font-weight:700; letter-spacing:.3px; color:var(--accent); background:var(--pill);
  border:1px solid #80652f; user-select:none; }
#mf-account summary::-webkit-details-marker { display:none; }
#mf-account summary:hover, #mf-account[open] summary { border-color:var(--accent); }
#mf-account summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
#mf-account:not([open]) .mf-account-panel { display:none; }
.mf-account-panel { position:absolute; right:0; top:calc(100% + 7px); z-index:30; width:290px; max-width:calc(100vw - 24px); padding:14px;
  background:var(--panel); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 32px #0008; font-size:11px; color:var(--text); }
.mf-acc-head { position:relative; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid var(--border); }
.mf-acc-name { font-size:12px; font-weight:600; padding-right:70px; overflow-wrap:anywhere; }
.mf-acc-mail { color:var(--muted); margin-top:2px; overflow-wrap:anywhere; }
.mf-acc-plan { position:absolute; right:0; top:0; padding:2px 7px; border-radius:4px; font-size:9px; font-weight:700; letter-spacing:.4px;
  color:var(--muted); background:var(--pill); border:1px solid var(--pill-border); }
.mf-acc-plan.full { color:var(--accent); border-color:#80652f; }
.mf-acc-plan.core { color:#a9cde8; border-color:#4b6b86; }
.mf-acc-row { display:flex; justify-content:space-between; gap:12px; padding:3px 0; }
.mf-acc-k { color:var(--muted); flex:0 0 auto; }
.mf-acc-v { text-align:right; overflow-wrap:anywhere; }
.mf-acc-upgrade { display:flex; align-items:center; justify-content:center; box-sizing:border-box; width:100%; margin-top:10px; height:26px; font-size:11px; font-weight:600;
  text-decoration:none; color:var(--accent); background:var(--pill); border:1px solid #80652f; border-radius:6px; cursor:pointer; }
.mf-acc-upgrade:hover { border-color:var(--accent); }
.mf-acc-upgrade:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mf-acc-upgrade + .mf-acc-logout { margin-top:6px; }
.mf-acc-feedback { width:100%; margin-top:10px; height:26px; font-size:11px; color:var(--text); background:var(--pill); border:1px solid var(--pill-border); border-radius:6px; cursor:pointer; }
.mf-acc-feedback:hover { border-color:var(--accent); color:var(--accent); }
.mf-acc-feedback:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.mf-acc-feedback + .mf-acc-logout { margin-top:6px; }
.mf-acc-logout { width:100%; margin-top:10px; height:26px; font-size:11px; color:var(--text); background:var(--pill); border:1px solid var(--pill-border); border-radius:6px; cursor:pointer; }
.mf-acc-logout:hover { border-color:var(--accent); color:var(--accent); }
.mf-acc-logout:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* gate: covers the chart area (never the topbar, so the account menu and sign-out stay reachable) */
.mf-gate { position:absolute; inset:0; z-index:40; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:24px; text-align:center; background:var(--bg); color:var(--text); }
.mf-gate[hidden] { display:none; }
.mf-gate-title { margin:0; font-size:16px; font-weight:600; }
.mf-gate-text { margin:0; max-width:420px; color:var(--muted); font-size:12px; line-height:1.5; }
.mf-gate-btn { display:inline-flex; align-items:center; justify-content:center; height:28px; padding:0 14px; border-radius:6px; font-size:11px; text-decoration:none;
  color:var(--accent); background:var(--pill); border:1px solid #80652f; cursor:pointer; }
.mf-gate-btn.quiet { color:var(--text); border-color:var(--pill-border); }
.mf-gate-btn:hover { border-color:var(--accent); }

/* compact layout: the gear is absolutely positioned at right:12px (>=1101px); with an account the avatar takes that rightmost slot and the
   gear moves one slot left (order: gear | avatar, as in the <=1100px flow). Flowha's centring padding grows from 40px (gear) to 80px
   (gear + avatar) so the Flowha launcher stays centred. */
@media (min-width:1101px) {
  .mf-compact #mf-account { position:absolute; right:12px; margin-left:0; } /* same stacking as the gear (z-index 30 from the base rule): the panel must paint above the chart */
  .mf-compact.mf-has-account #mf-settings { right:46px; }
  .mf-compact.mf-has-account .mf-flowha-slot { padding-right:80px; }
}
@media (max-width:760px) {
  .mf-compact.mf-has-account #toolbar { flex-basis:calc(100% - 80px); }
}

/* Options button, entitlement-locked state (CORE): visible, disabled, labelled. */
#mf-options-toggle[data-locked="true"], #mf-options-exposure-toggle[data-locked="true"] { opacity:.55; cursor:not-allowed; }
#mf-options-toggle[data-locked="true"]::after { content:"FULL"; margin-left:6px; padding:0 4px; border:1px solid var(--pill-border); border-radius:3px; font-size:8px; letter-spacing:.4px; color:var(--muted); }