/* SortControl — the library sort disclosure (spec §02 → Sort; arch 10). */ .wrap { position: relative; display: inline-flex; } /* Trigger — shows the current field + direction for recognition (council SORT). */ .trigger { display: inline-flex; align-items: center; gap: var(--space-1); height: 28px; padding: 0 var(--space-3); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius); background: transparent; color: var(--text-secondary); font: inherit; font-size: 12px; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .trigger:hover { background: var(--layer-01); color: var(--text); } .trigger[aria-expanded='true'] { background: var(--layer-02); color: var(--text); } .trigger:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; } /* The disclosed panel — portaled to , positioned fixed (mirrors the settings popover) so it escapes the panes' overflow clipping. */ .pop { position: fixed; z-index: 1000; min-width: 160px; padding: var(--space-2); background: var(--layer-01); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } .title { margin: 0 0 var(--space-2); padding: 0 var(--space-2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); } .field { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius); background: transparent; color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .field:hover { background: var(--layer-02); } .field:focus-visible { outline: 2px solid var(--focus); outline-offset: -1px; } /* The active field is the current sort; its trailing arrow shows the direction. */ .active { font-weight: 600; }