/* UI v3 C1 (impl-plan §11 C1), at boot: the topbar search trigger and the user-menu toggle. The palette
   dialog and the shortcut sheet load with ui/command-palette.js (css/u3-palette-dialog.css, §3.2 budget).
   Tokens of styles.css §0 only; geometry from design/reference/v3.css §11. */

/* Topbar trigger: a fixed slot after the path, its width set by the topbar width only, so its x is the same
   on every route (§2.4). Collapse order below 1360 px main width (1312 px topbar content): 1. the context
   chips become icons with their tooltip (the path keeps room for the longest section and page), 2. the
   trigger shrinks from 240 to 160 px and shows the short label «Suchen» (the aria-label keeps the full
   text), 3. «Neu» becomes an icon (A2, 800 px). */
.topbar .palette-trigger { flex: none; width: clamp(240px, 24vw, 360px); height: var(--control-sm); display: inline-flex; align-items: center; gap: 8px; padding: 0 6px 0 10px; border: 1px solid var(--border-default); border-radius: var(--radius); background: var(--bg-subtle); color: var(--text-muted); font: inherit; font-size: var(--text-sm); cursor: pointer; }
.palette-trigger:hover { border-color: var(--border-control); background: var(--bg-hover); }
.palette-trigger > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.palette-trigger > .pt-short { display: none; }
.palette-trigger > kbd, .menu-item > kbd { flex: none; margin-left: auto; }
@container topbar (max-width: 1312px) { .topbar .context-chip > span { position: absolute; width: 1px; overflow: hidden; clip-path: inset(50%); } .topbar .palette-trigger { width: 240px; } .palette-trigger > .pt-long { display: none; } .palette-trigger > .pt-short { display: block; } }
@container topbar (max-width: 1020px) { .topbar .palette-trigger { width: 160px; } .topbar .palette-trigger > kbd { display: none; } }
@container topbar (max-width: 640px) { .topbar .palette-trigger { width: var(--control-sm); padding: 0; justify-content: center; } .topbar .palette-trigger > :is(span, kbd) { display: none; } }

/* «Hilfe» (Alpi guide, lane G): a .btn between «Neu» and the user menu, at boot; the panel and the tours load
   with ui/guide.js (css/guide.css). Icon only below 1100 px topbar width, with the chips; the aria-label stays. */
.topbar-help { padding-inline: 10px 12px; }
.topbar-help[aria-expanded="true"] { border-color: var(--petrol-7); background: var(--bg-selected); }
@container topbar (max-width: 1100px) { .topbar-help { padding-inline: 7px; } .topbar-help > span { position: absolute; width: 1px; overflow: hidden; clip-path: inset(50%); } }

/* User menu: the Einzeltasten-Kürzel toggle shows its state with a check. */
.menu-item[aria-pressed="false"] > .menu-check { visibility: hidden; }
.menu-item > .menu-check { margin-left: auto; color: var(--accent); }

@media print { .palette-trigger { display: none !important; } }