/* ================================================================ NeoDemos — palette.css (Command palette · ⌘K + rail search trigger) Ported 1:1 from the design system (ui_kits/cockpit/cockpit.css §"Command palette"). Tokens only. Loaded on every page that loads palette.js (cockpit_base.html + dossier.html). ================================================================ */ /* ── Command palette (⌘K) — keyboard-first layer over the visible nav ─────── */ /* z-index: the design uses 900, but production's dossier page stacks its docviewer/refine panels at --z-modal (1000) — the palette is the global layer and must sit on top (it is appended last in ). */ .cmdk-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: color-mix(in oklab, var(--color-primary) 32%, transparent); display: flex; align-items: flex-start; justify-content: center; padding: 12vh var(--space-4) var(--space-4); } .cmdk { width: min(640px, 100%); max-height: min(62vh, calc(var(--cmdk-vvh, 100dvh) - 16vh)); display: flex; flex-direction: column; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); overflow: hidden; } .cmdk__inputrow { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); } .cmdk__ic { color: var(--color-text-tertiary); font-size: 18px; } .cmdk__input { flex: 1; border: none; outline: none; background: none; font-family: var(--font-body); font-size: var(--font-size-base); color: var(--color-text); } .cmdk__input::placeholder { color: var(--color-text-tertiary); } .cmdk__esc { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-tertiary); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 7px; cursor: pointer; background: none; } .cmdk__esc:hover { color: var(--color-primary); border-color: var(--color-border-strong); } .cmdk__list { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-2); } .cmdk__group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-tertiary); padding: var(--space-3) var(--space-3) var(--space-1); } .cmdk__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer; background: none; border: none; font-family: var(--font-body); } .cmdk__item.is-sel { background: var(--color-accent-light); } .cmdk__item-ic { flex-shrink: 0; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); font-size: 12px; color: var(--color-text-secondary); } .cmdk__item-body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .cmdk__item-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__item-sub { font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__item-enter { font-size: var(--font-size-xs); color: var(--color-accent-ink); font-weight: 700; } .cmdk__empty { padding: var(--space-6) var(--space-4); font-size: var(--font-size-sm); color: var(--color-text-secondary); text-align: center; } .cmdk__status { padding: var(--space-2) var(--space-3); color: var(--color-text-tertiary); font-size: var(--font-size-xs); } .cmdk__status--warning { color: var(--color-warning); } .cmdk__foot { display: flex; gap: var(--space-5); padding: var(--space-2) var(--space-4); border-top: 1px solid var(--color-border-subtle); background: var(--color-surface); font-size: var(--font-size-xs); color: var(--color-text-tertiary); } .cmdk__foot kbd, .rail__kbd, .home-search__hint kbd { font-family: var(--font-mono); font-size: 10px; color: var(--color-text-secondary); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 1px 5px; } .cmdk__foot kbd { margin-right: 3px; } @media (prefers-reduced-motion: no-preference) { .cmdk { animation: cmdk-in .16s cubic-bezier(.22,.8,.32,1); } @keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: none; } } } /* ── @tag autocomplete + entity-filter chips (WS108 PR3) ─────────── */ /* Dropdown anchored under the input row; overlays the result list within the card, so no extra stacking context beyond the card is needed. */ .cmdk__tagbox { position: absolute; top: calc(100% + 2px); left: var(--space-3); right: var(--space-3); z-index: var(--z-dropdown); max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--space-1); background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); } .cmdk__tagbox[hidden] { display: none; } .cmdk__tag-group { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-tertiary); padding: var(--space-2) var(--space-3) var(--space-1); } .cmdk__tag-item { display: flex; align-items: baseline; gap: var(--space-2); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-sm); background: none; cursor: pointer; font-family: var(--font-body); } .cmdk__tag-item.is-sel { background: var(--color-accent-light); } .cmdk__tag-label { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__tag-sub { flex-shrink: 0; font-size: var(--font-size-xs); color: var(--color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Chips row sits between the input row and the results. */ .cmdk__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border-subtle); } .cmdk__chips[hidden] { display: none; } .cmdk__chip { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--font-size-xs); font-weight: 600; color: var(--color-accent-ink); background: var(--color-accent-light); border: 1px solid color-mix(in oklab, var(--color-accent) 45%, transparent); border-radius: var(--radius-full); padding: 3px 10px; cursor: pointer; } .cmdk__chip:hover { border-color: var(--color-accent); } .cmdk__chip:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; } .cmdk__chip-x { color: var(--color-text-tertiary); font-size: 10px; } .cmdk__chip:hover .cmdk__chip-x { color: var(--color-accent-ink); } @media (hover: none) { .cmdk__tag-item { min-height: 44px; } .cmdk__chip { min-height: 32px; } } /* rail search trigger */ .rail__search { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-tertiary); font-size: var(--font-size-sm); cursor: pointer; font-family: var(--font-body); } .rail__search:hover { border-color: var(--color-border-strong); color: var(--color-text-secondary); } .rail__search .rail__kbd { margin-left: auto; } html.no-hw-kbd .rail__kbd, html.no-hw-kbd .cmdk__foot, html.no-hw-kbd .arch-kbd, html.no-hw-kbd .home-search__hint .kbd-only { display: none; } html:not(.no-hw-kbd) .touch-only { display: none; } @media (max-width: 640px) { .cmdk-scrim { padding-top: max(var(--space-4), env(safe-area-inset-top)); } } @media (hover: none) { .cmdk__item { min-height: 44px; } .cmdk__esc { min-width: 44px; min-height: 44px; padding: var(--space-2); } } /* ================================================================ Keyboard-selection (roving focus) · keynav.js — the selection layer that sits on top of the ⌘K palette. Homed here (not in shell.css) because this is the one stylesheet loaded on BOTH cockpit_base.html and the shell-less dossier.html, so the marker + cheat-sheet reach every cockpit surface. Tokens only; --z-* scale (never a raw z-index). ================================================================ */ /* .kbd-cursor is the visible selection marker; real DOM focus lives on the row (keynav.js), this class is the token-based highlight. */ .kbd-cursor { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; background: var(--color-accent-light); border-radius: var(--radius-lg); /* Keep the selected row clear of the sticky topbar when scrolled into view. */ scroll-margin-block: 96px var(--space-8); } /* Tab-only fallback: the same accent frame for keyboard users who Tab through the rows without engaging the roving cursor. */ .feed-link:focus-visible, .row-card:focus-visible, .lf-link:focus-visible, .datarow__link:focus-visible, .appraise__btn:focus-visible, .term-row__btn:focus-visible, .noterow__link:focus-visible, .dcard:focus-visible, .cal-event__btn:focus-visible, .bron-row__btn--reader:focus-visible, .docpill:focus-visible, .arch-recent:focus-visible, [data-keyitem]:focus-visible { outline: 2px solid var(--color-accent-ink); outline-offset: 2px; border-radius: var(--radius-lg); } /* ── ? cheat-sheet ── built by keynav.js on demand. --z-modal. ──────── */ .kbdhelp { position: fixed; inset: 0; z-index: var(--z-modal); display: grid; place-items: center; padding: var(--space-4); background: color-mix(in oklab, var(--color-primary) 35%, transparent); } .kbdhelp__card { position: relative; width: min(28rem, 100%); max-height: 100%; overflow-y: auto; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); } /* Close button — the focus target that keynav.js moves focus to on open, so the aria-modal dialog traps Tab and keeps activation off the obscured page. */ .kbdhelp__close { position: absolute; top: var(--space-3); right: var(--space-3); display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; font: var(--body); line-height: 1; color: var(--color-text-secondary); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; } .kbdhelp__close:hover { color: var(--color-text); } .kbdhelp__title { margin: 0 0 var(--space-4); font: var(--eyebrow); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-secondary); } .kbdhelp__rows { display: grid; gap: var(--space-2); } .kbdhelp__row { display: grid; grid-template-columns: 7rem 1fr; align-items: center; gap: var(--space-3); min-height: 32px; } .kbdhelp__keys { display: flex; gap: var(--space-2); flex-wrap: wrap; } .kbdhelp__key { display: inline-flex; align-items: center; justify-content: center; min-width: 1.75rem; padding: 2px var(--space-2); font: var(--code); color: var(--color-text); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: var(--radius-md); } .kbdhelp__label { font: var(--body); color: var(--color-text); } .kbdhelp__hint { margin: var(--space-4) 0 0; font: var(--small); color: var(--color-text-secondary); } /* Reduced motion: no smooth-scroll easing when the cursor jumps rows. */ @media (prefers-reduced-motion: reduce) { .main-scroll, .dossier { scroll-behavior: auto; } }