/* TlbxHbtn: one look for the buttons that shared scripts put in an app's header: Files (shared/drive-link.js),
 * Tour (shared/tour/mount.js), View (shared/viewmode), Apps and the bell (shell/header.js, shell/notify.js).
 * The shell loads this file on every shell page. An app makes them match its own toolbar buttons with tokens, on :root
 * or its header (all optional):
 *   --tlbx-hbtn-h       height and the width of an icon-only button   (32px)
 *   --tlbx-hbtn-radius  corner radius                                   (8px)
 *   --tlbx-hbtn-bg      background                                      (transparent)
 *   --tlbx-hbtn-line    border colour                                   (the text colour at 22%)
 *   --tlbx-hbtn-hover   background under the pointer, and while open    (the text colour at 10%)
 *   --tlbx-hbtn-fs      font size                                       (13px)
 * A header without room for every label gets .tlbx-htight from shared/ui/hbtn.js: the buttons show only their icons
 * (each keeps its title and aria-label). A button with data-hbtn-yield (Convert…, AI) gives up its label first, on its own:
 * .sh-icon-only, set by hbtn.js. */
.tlbx-hbtn {
  box-sizing: border-box; position: relative; flex: none; margin: 0; padding: 0 10px;
  height: var(--tlbx-hbtn-h, 32px); min-width: var(--tlbx-hbtn-h, 32px);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: var(--tlbx-hbtn-fs, 13px); font-weight: 500; line-height: 1; letter-spacing: normal;
  white-space: nowrap; text-decoration: none; text-transform: none; vertical-align: middle;
  color: inherit; background: var(--tlbx-hbtn-bg, transparent); opacity: 1; box-shadow: none;
  border: 1px solid var(--tlbx-hbtn-line, color-mix(in srgb, currentColor 22%, transparent));
  border-radius: var(--tlbx-hbtn-radius, 8px); cursor: pointer;
}
.tlbx-hbtn:hover, .tlbx-hbtn[aria-expanded="true"], .tlbx-hbtn[aria-pressed="true"] {
  background: var(--tlbx-hbtn-hover, color-mix(in srgb, currentColor 10%, transparent));
}
.tlbx-hbtn:focus-visible { outline: 2px solid var(--tlbx-hbtn-ring, var(--sl-accent, Highlight)); outline-offset: 1px; }
.tlbx-hbtn > svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tlbx-hbtn[hidden] { display: none; }
.tlbx-htight .tlbx-hbtn-txt { display: none; }
.tlbx-htight .tlbx-hbtn { padding: 0; width: var(--tlbx-hbtn-h, 32px); }
.tlbx-hbtn.sh-icon-only { padding: 0; width: var(--tlbx-hbtn-h, 32px); }
.tlbx-hbtn.sh-icon-only .tlbx-hbtn-txt { display: none; }
@media (max-width: 560px) {
  .tlbx-hbtn-txt { display: none; }
  .tlbx-hbtn { padding: 0; width: var(--tlbx-hbtn-h, 30px); height: var(--tlbx-hbtn-h, 30px); min-width: 0; }
}