/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius); border: 1px solid var(--border-bright);
  background: var(--panel-2); color: var(--text); cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 500;
  letter-spacing: .8px; text-transform: uppercase; transition: all .12s;
}
.btn:hover { border-color: var(--accent-2); color: var(--text-strong); text-decoration: none; background: var(--panel-3); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn.primary:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); }
.btn.sm { padding: 5px 11px; font-size: 11.5px; }
/* One step below `sm`, for actions that sit *inside* a chip or a section head
   rather than in a row of their own (the tag catalogue's two). It is here and not
   in the page that first wanted it because this file is where the button scale is
   enumerated — a fourth size declared elsewhere is one nobody retuning the scale
   would find. The `icon-only` square is stated with it for the same reason. */
.btn.xs { padding: 4px 8px; font-size: 10.5px; }

/* Inline SVG glyphs ({% icon %}). Sized to the button's type scale and kept from
   shrinking in the flex row; `.btn-ico` wraps the topbar collapse-to-icon glyph. */
/* Default icon size follows the text (1em); button/toolbar contexts below override
   with explicit px via higher-specificity `X svg` rules. Without this a standalone
   `{% icon %}` (e.g. in a `.sa-more` link) has no intrinsic size and balloons. */
.icon { display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; flex: none; }
.btn svg { width: 15px; height: 15px; }
.btn.sm svg { width: 13px; height: 13px; }
.btn.xs svg { width: 12px; height: 12px; }
.btn-ico { display: inline-flex; }
.btn-ico svg { display: block; }
/* Icon-only variant: keep the label for the accessible name + `title`, hide it
   visually, and square the button around the glyph. */
.btn.icon-only { padding-left: 0; padding-right: 0; width: 30px; justify-content: center; gap: 0; }
.btn.xs.icon-only { width: 22px; }
.btn.icon-only .btn-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Export dropdown (native <details>, no JS) ─────────────────────────── */
.export-menu { position: relative; display: inline-block; }
.export-menu > summary {
  list-style: none; cursor: pointer; user-select: none;
}
.export-menu > summary::-webkit-details-marker { display: none; }
.export-menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30;
  display: flex; flex-direction: column; min-width: 120px;
  background: var(--panel-2); border: 1px solid var(--border-bright);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.export-menu-item {
  padding: 8px 14px; color: var(--text); text-decoration: none;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .5px;
}
.export-menu-item:hover { background: var(--panel-3); color: var(--text-strong); }