/* Tweaks panel chrome */ .tweaks-panel { position: fixed; bottom: 16px; right: 16px; z-index: 99999; width: 280px; background: #FFFFFF; border: 1px solid #E4E7EC; border-radius: 12px; box-shadow: 0 12px 32px rgba(16,24,40,0.12), 0 2px 6px rgba(16,24,40,0.06); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; color: #1A1A1A; overflow: hidden; display: none; } .tweaks-panel.open { display: block; } .tweaks-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid #F2F4F7; background: #FAFAFA; } .tweaks-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.01em; } .tweaks-close { width: 22px; height: 22px; border: 0; background: transparent; border-radius: 6px; cursor: pointer; color: #667085; display: grid; place-items: center; } .tweaks-close:hover { background: #F2F4F7; color: #1A1A1A; } .tweaks-body { padding: 12px; } .tweak-section { margin-bottom: 14px; } .tweak-section:last-child { margin-bottom: 0; } .tweak-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #667085; margin-bottom: 6px; } .tweak-radio { display: flex; gap: 4px; padding: 3px; background: #F2F4F7; border-radius: 8px; } .tweak-radio button { flex: 1; height: 30px; border: 0; background: transparent; border-radius: 6px; font: inherit; font-size: 12px; font-weight: 500; color: #475467; cursor: pointer; transition: background .12s ease, color .12s ease, box-shadow .12s ease; } .tweak-radio button:hover { color: #1A1A1A; } .tweak-radio button.active { background: #FFFFFF; color: #1A1A1A; box-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 0 0 1px rgba(16,24,40,0.04); } /* ============= Selected-state variant: SHADOW (lifted-pill) ============= Applied to — restores the original white pill + 1px border + soft shadow treatment in Nav v2. Behavior: - PARENT (.nav-item) is only treated as a white pill when itself .selected (a leaf parent with no children, or a parent whose row is the active target). When a parent is merely .open with an active CHILD, it stays neutral — only the chevron rotates. This matches the reference UI. - SUB-ITEM (.sub-item.selected) gets the same white-pill + shadow treatment as parents, with no blue rail accent. */ body.tweak-selected-shadow.proto-nav-v2 .nav-item:hover { background: #FFFFFF; box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(16,24,40,0.05); } /* Module header (parent with sub-nav) when expanded AND active: gets the white pill treatment so the active module is visually anchored. Chevron-only peek (open without selected) stays neutral. */ body.tweak-selected-shadow.proto-nav-v2 .nav-item.open.selected { background: #FFFFFF; box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(16,24,40,0.05); color: #1A1A1A; font-weight: 600; } body.tweak-selected-shadow.proto-nav-v2 .nav-item.open.selected .ni-icon { color: #1A1A1A; } body.tweak-selected-shadow.proto-nav-v2 .nav-item.open.selected .ni-chev { color: #5E5E5E; } /* Leaf nav item (no sub-nav) selected — keeps the white pill so users can see which item is active. */ body.tweak-selected-shadow.proto-nav-v2 .nav-item.selected:not(.open) { background: #FFFFFF; box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(16,24,40,0.05); color: #1A1A1A; } body.tweak-selected-shadow.proto-nav-v2 .nav-item.selected .ni-icon, body.tweak-selected-shadow.proto-nav-v2 .nav-item.selected .ni-chev { color: #475467; } /* Active open parent (with sub-nav) keeps the white pill. Peek-open without .selected stays neutral. */ body.tweak-selected-shadow.proto-nav-v2 .nav-group > .nav-item.open.selected, body.tweak-selected-shadow.proto-nav-v2 .nav-group > .nav-item.selected.open:has(+ .nav-sub) { background: #FFFFFF; box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(16,24,40,0.05); } /* Sub-items in shadow variant: blue text + blue left rail; transparent bg. The white pill is reserved for the parent module header. */ body.tweak-selected-shadow.proto-nav-v2 .sub-item.selected { background-color: transparent; color: #1A1A1A; box-shadow: none; font-weight: 500; } body.tweak-selected-shadow.proto-nav-v2 .sub-item.selected::before { display: none !important; }