/* ── Scope switcher (header component — every page) ── */
  .scope-switcher { position: relative; display: inline-flex; }
  .scope-current { display:flex; gap:6px; align-items:center; padding:6px 12px;
                   background:var(--bg3); border:1px solid var(--border);
                   border-radius:var(--radius); color:var(--text); cursor:pointer;
                   font-size:13px; }
  .scope-current:hover { border-color: var(--accent); }
  .scope-current--active { border-color: var(--accent3); color: var(--accent3); }
  .scope-menu { position:absolute; top:calc(100% + 6px); left:0;
                background:var(--bg2); border:1px solid var(--border);
                border-radius:var(--radius); box-shadow:var(--shadow);
                min-width:280px; padding:6px; z-index:300; }
  .scope-menu[hidden] { display:none; }
  .scope-menu-item { display:block; width:100%; text-align:left; padding:8px 12px;
                     background:transparent; border:0; border-radius:7px;
                     color:var(--text); cursor:pointer; font-size:13px; }
  .scope-menu-item:hover { background:var(--bg3); }
  .scope-menu-item[data-active="true"] { color:var(--accent); }
  .scope-menu-divider { height:1px; background:var(--border); margin:6px 2px; }
  .scope-menu-label { font-size:10px; text-transform:uppercase; letter-spacing:1px;
                      color:var(--text3); padding:6px 12px 4px; }
  .scope-menu-empty { padding:10px 12px; color:var(--text3); font-size:12px; }

  /* ── Ideas Workshop parent dropdown (hidden until feature flag confirmed) ── */
  .workshop-nav { position: relative; display: inline-flex; margin-left: 8px; }
  .workshop-nav[hidden] { display: none; }
  .workshop-nav-btn { display: inline-flex; align-items: center; gap: 6px;
                      padding: 6px 12px; background: var(--bg3);
                      border: 1px solid var(--border); border-radius: var(--radius);
                      color: var(--text); cursor: pointer; font-size: 13px; }
  .workshop-nav-btn:hover { border-color: var(--accent); color: var(--accent); }
  .workshop-nav-btn--active { border-color: var(--accent3); color: var(--accent3);
                              background: var(--bg4); }
  .workshop-nav-menu { position: absolute; top: calc(100% + 6px); left: 0;
                       background: var(--bg2); border: 1px solid var(--border);
                       border-radius: var(--radius); box-shadow: var(--shadow);
                       min-width: 220px; padding: 6px; z-index: 300;
                       display: flex; flex-direction: column; gap: 2px; }
  .workshop-nav-menu[hidden] { display: none; }
  .workshop-nav-item { display: block; padding: 8px 12px; border-radius: 7px;
                       color: var(--text); text-decoration: none; font-size: 13px;
                       cursor: pointer; }
  /* Authored display:block above overrides UA's [hidden] → display:none.
     Restore the hidden-attribute semantics for JS-driven flag reveal
     (Composer link/coming-soon swap). Same pattern as .user-menu-dropdown
     [hidden] rule in base.css. */
  .workshop-nav-item[hidden] { display: none; }
  .workshop-nav-item:hover { background: var(--bg3); color: var(--text); text-decoration: none; }
  .workshop-nav-item--active { color: var(--accent3); }
  .workshop-nav-item--disabled { color: var(--text3); cursor: not-allowed;
                                 display: flex; justify-content: space-between;
                                 align-items: baseline; }
  .workshop-nav-item--disabled:hover { background: transparent; color: var(--text3); }
  .workshop-nav-soon { font-style: italic; font-size: 10px; color: var(--text3);
                       text-transform: uppercase; letter-spacing: 0.5px; }

  /* ── Header MIDI control (shown only on pages with body.uses-midi) ── */
  .midi-header-control { display: none; align-items: center; gap: 6px; margin-right: 12px; }
  body.uses-midi .midi-header-control { display: inline-flex; }
  .midi-indicator { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
                    box-shadow: 0 0 4px currentColor; transition: background 0.2s; }
  .midi-indicator[data-state="init"] { background: #f0b94a; color: #f0b94a; }
  .midi-indicator[data-state="ok"]   { background: var(--accent3); color: var(--accent3); }
  .midi-indicator[data-state="error"]{ background: #ff5c6c; color: #ff5c6c; }
  .midi-device-select { background: var(--bg3); border: 1px solid var(--border);
                        border-radius: 6px; color: var(--text); padding: 4px 8px;
                        font-size: 12px; max-width: 180px; }
  .midi-device-select:hover { border-color: var(--accent); }
  .midi-retry-btn { background: var(--bg3); border: 1px solid var(--border);
                    border-radius: 6px; color: var(--text2); width: 26px; height: 26px;
                    cursor: pointer; font-size: 14px; line-height: 1; padding: 0; }
  .midi-retry-btn:hover { border-color: var(--accent); color: var(--text); }
  .midi-retry-btn:disabled { opacity: 0.5; cursor: progress; }

  /* ── Notification bell (header component — every page) ── */
  .notif-bell { position: relative; display: inline-flex; margin-right: 12px; }
  .notif-bell-btn { position: relative; background: var(--bg3); border: 1px solid var(--border);
                    border-radius: var(--radius); width: 32px; height: 32px; cursor: pointer;
                    color: var(--text2); font-size: 14px; }
  .notif-bell-btn:hover { color: var(--text); border-color: var(--accent); }
  .notif-bell-btn[data-unread-count="0"]::after { content: none; }
  .notif-bell-btn::after {
    content: attr(data-unread-count);
    position: absolute; top: -4px; right: -4px;
    background: var(--accent2); color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 1px 5px; border-radius: 8px;
    min-width: 14px; text-align: center;
    line-height: 1.2;
  }
  .notif-dropdown { position: absolute; top: calc(100% + 6px); right: 0;
                    background: var(--bg2); border: 1px solid var(--border);
                    border-radius: var(--radius); box-shadow: var(--shadow);
                    width: 360px; max-height: 480px; overflow-y: auto; z-index: 300; }
  .notif-dropdown[hidden] { display: none; }
  .notif-dropdown-header { display: flex; justify-content: space-between; align-items: center;
                           padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .notif-mark-all { background: transparent; border: 0; color: var(--accent);
                    cursor: pointer; font-size: 11px; }
  .notif-item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border);
                cursor: pointer; text-decoration: none; color: inherit; }
  .notif-item:hover { background: var(--bg3); }
  .notif-item[data-unread="true"] { border-left: 2px solid var(--accent); }
  .notif-item-title { font-weight: 600; color: var(--text); font-size: 13px; }
  .notif-item-snippet { color: var(--text2); font-size: 12px; margin-top: 2px;
                        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .notif-item-time { color: var(--text3); font-size: 10px; margin-top: 4px; }
  .notif-empty { padding: 20px 14px; color: var(--text3); font-size: 12px; text-align: center; }