/* ============================================================================ KIMO USER MENU (/shared/menu.css) ---------------------------------------------------------------------------- A single, consistent account menu (Notion-style) for the whole Kimo suite. Houses identity, theme, the guided-tour launcher, and log out — so the floating "?" launcher no longer floats over app content. Token-driven (reads /shared/tokens.css). Namespaced under .kimo-um* so it can never clash with a host app. Presentation-only. ============================================================================ */ /* mount container — inline when slotted into a header, fixed as a fallback */ .kimo-um{ position:relative; display:inline-flex; } .kimo-um.kimo-um-fixed{ position:fixed; top:12px; right:14px; z-index:8500; } @media (max-width:860px){ .kimo-um.kimo-um-fixed{ top:10px; right:12px; } } /* ---- trigger (avatar) ---- */ .kimo-um-trigger{ display:inline-flex; align-items:center; gap:7px; height:38px; padding:3px 7px 3px 3px; border:1px solid var(--bd); border-radius:999px; background:var(--bg-1); color:var(--tx-1); cursor:pointer; font-family:var(--font); transition:background var(--dur,.16s) ease, border-color var(--dur,.16s) ease; } .kimo-um-trigger:hover{ background:var(--bg-2); border-color:var(--bd-strong); } .kimo-um-trigger:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; } .kimo-um-trigger .kimo-um-ava{ width:30px; height:30px; flex-shrink:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:12px; line-height:1; letter-spacing:.02em; } .kimo-um-trigger .kimo-um-chev{ width:14px; height:14px; color:var(--tx-2); flex-shrink:0; transition:transform var(--dur,.16s) ease; } .kimo-um[data-open="true"] .kimo-um-chev{ transform:rotate(180deg); } /* keep the trigger to a bare avatar on narrow screens */ @media (max-width:560px){ .kimo-um-trigger{ padding:3px; } .kimo-um-trigger .kimo-um-chev{ display:none; } } /* ---- host trigger (app supplies its own element via data-kimo-menu-trigger) ---- */ .kimo-um-hosttrigger{ cursor:pointer; } .kimo-um-hosttrigger .kimo-um-chev{ width:14px; height:14px; flex-shrink:0; transition:transform var(--dur,.16s) ease; } .kimo-um-hosttrigger[data-open="true"] .kimo-um-chev{ transform:rotate(180deg); } /* ---- dropdown ---- */ /* The dropdown is appended to and positioned with fixed viewport coordinates set in JS, so no narrow/overflow/transformed ancestor (sidebar rails, off-canvas drawers) can clip it. */ .kimo-um-pop{ position:fixed; top:0; left:0; width:min(280px, calc(100vw - 24px)); background:var(--bg-1); color:var(--tx-0); border:1px solid var(--bd); border-radius:var(--r-lg,10px); box-shadow:var(--shadow-pop); padding:6px; z-index:8600; opacity:0; transform:translateY(-4px); pointer-events:none; transition:opacity var(--dur,.16s) ease, transform var(--dur,.16s) ease; } .kimo-um-pop.from-bottom{ transform:translateY(4px); } /* slides up when opening upward */ .kimo-um-pop.is-open{ opacity:1; transform:none; pointer-events:auto; } /* ---- identity header ---- */ .kimo-um-id{ display:flex; align-items:center; gap:10px; padding:9px 9px 11px; margin-bottom:5px; border-bottom:1px solid var(--bd); } .kimo-um-id .kimo-um-ava{ width:38px; height:38px; flex-shrink:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px; line-height:1; } .kimo-um-id-text{ min-width:0; } .kimo-um-id-name{ font-weight:600; font-size:var(--t-base); color:var(--tx-0); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .kimo-um-id-mail{ font-size:var(--t-xs); color:var(--tx-2); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* ---- items ---- */ .kimo-um-item{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 9px; border:none; background:none; border-radius:var(--r-md,7px); font-family:var(--font); font-size:var(--t-sm); font-weight:500; color:var(--tx-1); text-align:left; cursor:pointer; text-decoration:none; transition:background var(--dur,.16s) ease, color var(--dur,.16s) ease; } .kimo-um-item:hover{ background:var(--bg-2); color:var(--tx-0); } .kimo-um-item:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; } .kimo-um-item svg{ width:16px; height:16px; flex-shrink:0; color:var(--tx-2); } .kimo-um-item:hover svg{ color:var(--tx-1); } .kimo-um-item .kimo-um-item-sub{ margin-left:auto; font-size:var(--t-xs); color:var(--tx-2); } .kimo-um-item.danger:hover{ color:var(--danger, #d6453d); } .kimo-um-item.danger:hover svg{ color:var(--danger, #d6453d); } .kimo-um-sep{ height:1px; background:var(--bd); margin:5px 4px; border:none; } @media (prefers-reduced-motion: reduce){ .kimo-um-pop,.kimo-um-trigger,.kimo-um-chev,.kimo-um-item{ transition:none !important; } }