/* ============================================================================ Shared header menu — account + theme (+ language) File: /shared/css/account-menu.css · Version 0.2.0 · 2026-07-05 SELF-CONTAINED palette: the widget defines its own light/dark colors keyed off , so it renders correctly in ANY section (toolbox/auth use --t-*, fun uses --bg/--surface, etc.) without depending on host tokens. Not used on the coaching/marketing root. ============================================================================ */ .acctm { position: relative; display: inline-flex; /* light (default) */ --acctm-bg: #ffffff; --acctm-fg: #111111; --acctm-muted: #555555; --acctm-border: rgba(0, 0, 0, .15); --acctm-border-hover: rgba(0, 0, 0, .4); --acctm-hover: #f2f1ee; --acctm-accent: #0a4f8a; --acctm-danger: #b02020; --acctm-radius: 8px; --acctm-radius-lg: 10px; } :root[data-theme="dark"] .acctm { --acctm-bg: #242424; --acctm-fg: #f5f2ed; --acctm-muted: #c8c4be; --acctm-border: rgba(255, 255, 255, .16); --acctm-border-hover: rgba(255, 255, 255, .5); --acctm-hover: #2e2e2e; --acctm-accent: #7ab8f5; --acctm-danger: #ff8a8a; } .acctm-btn { width: 34px; height: 34px; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: var(--acctm-bg); color: var(--acctm-muted); border: 1px solid var(--acctm-border); border-radius: var(--acctm-radius); transition: border-color .15s, background .15s, color .15s; -webkit-appearance: none; } .acctm-btn:hover { color: var(--acctm-fg); background: var(--acctm-hover); border-color: var(--acctm-border-hover); } .acctm-btn:focus-visible { outline: 2px solid var(--acctm-accent); outline-offset: 2px; } .acctm-btn svg { display: block; } /* Fixed + JS-positioned so it can't be clipped by an ancestor or run off the viewport on narrow/mobile layouts (top/left are set by account-menu.js). */ .acctm-panel { position: fixed; top: 0; left: 0; z-index: 2000; min-width: 210px; max-width: calc(100vw - 16px); padding: 6px; background: var(--acctm-bg); color: var(--acctm-fg); border: 1px solid var(--acctm-border); border-radius: var(--acctm-radius-lg); box-shadow: 0 8px 24px rgba(0, 0, 0, .28); } @media (max-width: 380px) { .acctm-panel { min-width: 180px; } } .acctm-panel[hidden] { display: none; } .acctm-who { font-size: .8rem; color: var(--acctm-muted); padding: 8px 10px 6px; line-height: 1.35; word-break: break-word; } .acctm-who strong { color: var(--acctm-fg); font-weight: 600; } .acctm-item { display: block; width: 100%; text-align: left; box-sizing: border-box; font: inherit; font-size: .9rem; color: var(--acctm-fg); background: none; border: 0; border-radius: var(--acctm-radius); padding: 9px 10px; cursor: pointer; text-decoration: none; -webkit-appearance: none; } .acctm-item:hover { background: var(--acctm-hover); } .acctm-item:focus-visible { outline: 2px solid var(--acctm-accent); outline-offset: -2px; } .acctm-item:disabled { opacity: .5; cursor: progress; } .acctm-sep { height: 1px; margin: 6px 4px; background: var(--acctm-border); } /* Language: collapsible sub-section (compact by default, expands on click). */ .acctm-langtoggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .acctm-langcur { color: var(--acctm-muted); } .acctm-chev { color: var(--acctm-muted); transition: transform .15s; } .acctm-langtoggle.open .acctm-chev { transform: rotate(90deg); } .acctm-sublist { display: flex; flex-direction: column; } .acctm-sublist[hidden] { display: none; } .acctm-sublist .acctm-lang { padding-left: 26px; font-size: .86rem; } .acctm-lang.active { font-weight: 700; color: var(--acctm-accent); } .acctm-signout { color: var(--acctm-danger); } /* Legacy theme/lang buttons are kept in the DOM (their scripts still reference them) but replaced visually by this menu. Their class sets `display`, which beats the plain [hidden] UA rule — so force them hidden. */ .theme-btn[hidden], .btn-icon[hidden] { display: none !important; }