/* ============================================================
   Buttons, after Bklit UI (bklit.com).

   Bklit ships as React components for shadcn; this site is plain
   HTML, so its button system is rebuilt here in CSS, measured off
   bklit.com: a solid near-white primary with a 1px top highlight,
   a faint outlined secondary, and a quiet ghost. 10px radius at the
   default size, 8px small. Shared by index.html, site.html and
   simple.html.

   <a class="b-btn b-btn--primary">   main action
   <a class="b-btn">                  secondary (outlined)
   <a class="b-btn b-btn--ghost">     tertiary, icon buttons
   .b-btn--sm / .b-btn--lg            28px / 40px tall (default 34px)
   .b-group                           joined row, like bklit's split buttons
   ============================================================ */

:root {
  --b-fg: #ededed;
  --b-muted: #a1a1a1;
  --b-bg: rgba(255, 255, 255, .03);
  --b-bg-hover: rgba(255, 255, 255, .07);
  --b-line: rgba(255, 255, 255, .09);
  --b-line-hover: rgba(255, 255, 255, .16);
  --b-primary: #f5f5f5;
  --b-primary-hover: #e3e3e3;
  --b-primary-fg: #171717;
  --b-ring: var(--accent, #4cc3ff);
}
@media (prefers-color-scheme: light) {
  :root {
    --b-fg: #171717;
    --b-muted: #5c5c5c;
    --b-bg: #ffffff;
    --b-bg-hover: #f4f4f5;
    --b-line: rgba(0, 0, 0, .1);
    --b-line-hover: rgba(0, 0, 0, .18);
    --b-primary: #171717;
    --b-primary-hover: #2e2e2e;
    --b-primary-fg: #fafafa;
  }
}

.b-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 13px;
  border: 1px solid var(--b-line);
  border-radius: 10px;
  background: var(--b-bg);
  color: var(--b-fg);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.b-btn:hover { background: var(--b-bg-hover); border-color: var(--b-line-hover); }
.b-btn:active { transform: translateY(1px); }
.b-btn:focus-visible { outline: 2px solid var(--b-ring); outline-offset: 2px; }
.b-btn svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.b-btn .b-kbd { font: 500 11px/1 var(--font-mono, ui-monospace, monospace); color: var(--b-muted); }

.b-btn--primary {
  background: var(--b-primary);
  border-color: var(--b-primary);
  color: var(--b-primary-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .24);
}
.b-btn--primary:hover { background: var(--b-primary-hover); border-color: var(--b-primary-hover); }
.b-btn--primary .b-kbd { color: color-mix(in srgb, var(--b-primary-fg) 55%, transparent); }

.b-btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--b-muted); }
.b-btn--ghost:hover { background: var(--b-bg-hover); border-color: transparent; color: var(--b-fg); }

.b-btn--sm { height: 28px; padding: 0 9px; border-radius: 8px; font-size: 13px; gap: 6px; }
.b-btn--sm svg { width: 14px; height: 14px; }
.b-btn--lg { height: 40px; padding: 0 15px; font-size: 15px; }
.b-btn--icon { width: 34px; padding: 0; }
.b-btn--sm.b-btn--icon { width: 28px; }

/* a pressed toggle (aria-pressed) reads as selected, in the accent */
.b-btn[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--b-ring) 55%, var(--b-line));
  background: color-mix(in srgb, var(--b-ring) 12%, var(--b-bg));
  color: var(--b-fg);
}

.b-group { display: inline-flex; }
.b-group > .b-btn { border-radius: 0; }
.b-group > .b-btn + .b-btn { margin-left: -1px; }
.b-group > .b-btn:first-child { border-radius: 10px 0 0 10px; }
.b-group > .b-btn:last-child { border-radius: 0 10px 10px 0; }
.b-group > .b-btn--sm:first-child { border-radius: 8px 0 0 8px; }
.b-group > .b-btn--sm:last-child { border-radius: 0 8px 8px 0; }

@media (prefers-reduced-motion: reduce) { .b-btn { transition: none; } .b-btn:active { transform: none; } }