/* =============================================================================
   Bartenders Knowledge — Component System
   Layer on top of `colors_and_type.css`. Provides reusable atoms + molecules.

   Covers:  .bk-app-bg,  .bk-card,  .bk-button,  .bk-input,  .bk-chip,
            .bk-badge (full/batch/cat/due/mastery),
            .bk-flashcard (3D flip + faces),
            .bk-nav-side, .bk-nav-link, .bk-header,
            .bk-stat-tile, .bk-quick-action, .bk-toast, etc.
   ============================================================================= */

/* ---------- Reset-ish ------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
button { font: inherit; color: inherit; }

/* ---------- App background -------------------------------------------------- */
.bk-app-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bk-app-bg__orb {
  position: absolute;
  border-radius: 999px;
  filter: blur(80px);
  opacity: 0.9;
}
.bk-app-bg__orb--1 { top: -8rem; left: -7rem; width: 34rem; height: 34rem; background: var(--bg-orb-1); }
.bk-app-bg__orb--2 { top: 6rem; right: -8rem; width: 36rem; height: 36rem; background: var(--bg-orb-2); }
/* Third ambient orb (CSS-only) low-centre, so the Liquid Glass chrome refracts a third hue */
.bk-app-bg::after {
  content: ''; position: absolute; bottom: -12rem; left: 34%;
  width: 34rem; height: 34rem; border-radius: 999px;
  background: var(--bg-orb-3, transparent); filter: blur(80px); opacity: 0.85; pointer-events: none;
}
.bk-app-bg__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.4), transparent 78%);
}

/* ---------- Liquid Glass --------------------------------------------------- */
/* One reusable Apple-grade material for chrome surfaces (desktop SideNav +
   Header, the iOS tab bar, bottom sheets and popovers). A strong blur +
   saturation boost makes the page refract through; the inset spec highlight
   reads as a polished top edge, and the soft drop shadow lifts the panel off
   the canvas. Tokens (light + dark) live in colors_and_type.css. Where
   backdrop-filter is unavailable we fall back to an opaque tint so text never
   sits on bare page content. Content cards stay solid — glass is chrome-only. */
.bk-glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-spec),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 10px 40px -12px rgba(0, 0, 0, 0.18);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bk-glass { background: var(--glass-bg-solid); }
}

/* ---------- Surfaces -------------------------------------------------------- */
.bk-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
}
.bk-card--flat   { box-shadow: none; }
.bk-card--sunken { background: var(--surface-sunken); border-color: var(--line); }
.bk-card--elev   { box-shadow: var(--shadow-lg); }
.bk-card--inline { padding: var(--space-4); border-radius: var(--radius-lg); }

/* ---------- Eyebrow + section header --------------------------------------- */
.bk-section-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.bk-section-header__copy { display: flex; flex-direction: column; gap: 4px; }
.bk-section-header h2 { margin: 0; }
.bk-section-header p  { color: var(--fg-muted); margin: 0; }

/* ---------- Buttons --------------------------------------------------------- */
.bk-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;             /* Apple HIG minimum, mobile-friendly */
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font: 600 0.9375rem/1 var(--font-display);
  letter-spacing: -0.01em;
  cursor: pointer;
  transition:
    transform var(--dur-press) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out),
    background var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
  user-select: none;
  white-space: nowrap;
}
.bk-button:focus-visible {
  outline: 2px solid var(--accent-action);
  outline-offset: 2px;
}

/* PRIMARY — solid action */
.bk-button--primary {
  background: var(--accent-action);
  color: var(--fg-on-accent);
  box-shadow: 0 4px 12px var(--accent-action-soft);
}
.bk-button--primary:hover { background: var(--accent-action-strong); transform: translateY(-1px); box-shadow: 0 6px 18px var(--accent-action-soft); }
.bk-button--primary:active { transform: translateY(0) scale(0.98); }
/* Tactile press for the remaining variants (primary keeps its own above). */
.bk-button:not(.bk-button--primary):not(:disabled):active { transform: scale(0.97); }

/* SECONDARY — outlined */
.bk-button--secondary {
  background: var(--surface);
  color: var(--fg);
  border-color: var(--line-strong);
}
.bk-button--secondary:hover { border-color: var(--accent-action); color: var(--accent-action); }

/* GHOST — no border */
.bk-button--ghost {
  background: var(--accent-soft);
  color: var(--fg);
}
.bk-button--ghost:hover { background: var(--accent-action-soft); color: var(--accent-action); }

/* DESTRUCTIVE */
.bk-button--danger {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}
.bk-button--danger:hover { background: var(--status-danger); color: #fff; }

/* Sizes */
.bk-button--sm  { min-height: 36px; padding: 6px 14px; font-size: 0.85rem; }
.bk-button--lg  { min-height: 52px; padding: 14px 24px; font-size: 1rem; }
.bk-button--icon{ min-height: 44px; min-width: 44px; padding: 0; border-radius: var(--radius-pill); }
.bk-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Form fields ----------------------------------------------------- */
.bk-field { display: flex; flex-direction: column; gap: 6px; }
.bk-field__label {
  font: 600 0.78rem/1 var(--font-display);
  color: var(--fg-muted);
  letter-spacing: 0.01em;
}
.bk-input,
.bk-select,
.bk-textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  background: var(--surface-strong);
  color: var(--fg);
  font: var(--type-body);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bk-input::placeholder, .bk-textarea::placeholder { color: var(--fg-subtle); }
.bk-input:focus, .bk-select:focus, .bk-textarea:focus {
  border-color: var(--accent-action);
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}
.bk-textarea { min-height: 96px; resize: vertical; }
.bk-input--search { background-image: none; padding-left: 44px; }

/* Password reveal toggle — wraps an input + an eye button pinned to the right.
   Used on the login screen and the Account & security password fields. */
.bk-input-wrap { position: relative; display: block; }
.bk-input-wrap .bk-input { padding-right: 46px; }
.bk-input-reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--fg-subtle);
  border-radius: var(--radius-sm, 10px);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.bk-input-reveal:hover { color: var(--fg); }
.bk-input-reveal:active { background: var(--surface-2, rgba(127, 127, 127, 0.14)); }
.bk-input-reveal:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring-soft); color: var(--fg); }

/* Account & security forms (Change email / Change password). These fields are
   NOT inside a .bk-form-section, so without an explicit rhythm the inputs and
   the submit button stack flush and overlap. A single flex container with a
   consistent gap keeps every field, message, button and hint clearly spaced. */
.bk-account-form { display: flex; flex-direction: column; gap: 14px; }
.bk-account-form > .bk-hint { margin: 0; }

/* Consistent vertical rhythm between stacked fields in a form section, so the
   drink form's label-above-input blocks never crowd each other. */
.bk-form-section > .bk-field + .bk-field,
.bk-form-section > .bk-field + .bk-meta-grid,
.bk-form-section > .bk-meta-grid + .bk-field { margin-top: 14px; }

/* Responsive meta grid for the short drink fields (Category, Glass, Method,
   Ice, Garnish). Each cell is a .bk-field (label ABOVE its input). Auto-fills
   2–3 columns on wider shells and collapses to a single column on narrow
   phones, keeping a clear gap so labels never overlap their inputs. */
.bk-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 12px;
  align-items: start;
}
.bk-meta-grid > .bk-field { min-width: 0; } /* let selects shrink, no overflow */
@media (max-width: 360px) {
  .bk-meta-grid { grid-template-columns: 1fr; }
}

/* ---------- Chips ----------------------------------------------------------- */
.bk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--chip-border);
  font: 600 0.8rem/1 var(--font-display);
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.bk-chip:hover { background: var(--accent-action-soft); color: var(--accent-action); }
.bk-chip:active { transform: scale(0.97); }
.bk-chip[aria-selected="true"],
.bk-chip.is-active {
  background: var(--accent-action);
  color: var(--fg-on-accent);
  border-color: transparent;
}

/* ---------- Badges (small status labels) ------------------------------------ */
.bk-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font: 600 0.7rem/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.bk-badge--full {
  background: var(--spec-full-bg);
  color: var(--spec-full-fg);
  border-color: var(--spec-full-border);
}
.bk-badge--batch {
  background: var(--spec-batch-bg);
  color: var(--spec-batch-fg);
  border-color: var(--spec-batch-border);
}
.bk-badge--cat {
  background: var(--chip-bg);
  color: var(--chip-text);
  text-transform: none;
  letter-spacing: 0;
}
.bk-badge--due {
  background: var(--status-warning-bg);
  color: var(--status-warning);
  border-color: rgba(245, 158, 11, 0.3);
}
.bk-badge--success {
  background: var(--status-success-bg);
  color: var(--status-success);
  border-color: rgba(16, 185, 129, 0.3);
}
.bk-badge--danger {
  background: var(--status-danger-bg);
  color: var(--status-danger);
  border-color: rgba(239, 68, 68, 0.3);
}
.bk-badge--mastery {
  background: var(--accent-action-soft);
  color: var(--accent-action);
  border-color: rgba(37, 99, 235, 0.25);
  text-transform: none;
}

/* ---------- FLASHCARD (3D flip — the signature animation) ------------------- */
.bk-flashcard {
  position: relative;
  display: block;
  width: 100%;
  min-height: 17rem;
  border: 0;
  background: transparent;
  perspective: 1400px;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}
.bk-flashcard__inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  transform-style: preserve-3d;
  transition: transform var(--dur-flip) var(--ease-flip);
  will-change: transform;
}
.bk-flashcard.is-flipped .bk-flashcard__inner { transform: rotateY(180deg); }

.bk-flashcard__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 22px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Belt-and-braces: opacity-toggle at the midpoint of the flip in case
     the rendering env (some headless Chrome configs) ignores
     backface-visibility under perspective + preserve-3d. The face fades
     to 0 / 1 instantly at 260ms (half of --dur-flip), which is when the
     card is edge-on, so the swap is invisible. */
  transition: opacity 0s linear 260ms;
  pointer-events: auto;
}
.bk-flashcard__face--front { opacity: 1; }
.bk-flashcard__face--back  { transform: rotateY(180deg); opacity: 0; }
.bk-flashcard.is-flipped .bk-flashcard__face--front { opacity: 0; }
.bk-flashcard.is-flipped .bk-flashcard__face--back  { opacity: 1; }
.bk-flashcard__face--front {
  align-items: center;
  justify-content: center;
  text-align: center;
}
.bk-flashcard__face--back {
  /* override added at the top of the file too; this keeps the canonical
     rotateY in the cascade so any face that doesn't get
     opacity-targeted still falls back to backface-visibility */
}

/* Top stripe — at-a-glance indicator. FULL = indigo, BATCH = cyan. */
.bk-flashcard__face::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}
.bk-flashcard--full  .bk-flashcard__face { background: var(--spec-full-bg); border-color: var(--spec-full-border); }
.bk-flashcard--full  .bk-flashcard__face::before { background: var(--spec-full-stripe); }
.bk-flashcard--batch .bk-flashcard__face { background: var(--spec-batch-bg); border-color: var(--spec-batch-border); }
.bk-flashcard--batch .bk-flashcard__face::before { background: var(--spec-batch-stripe); }

.bk-flashcard__badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.bk-flashcard__title  {
  margin: 0;
  font: 700 clamp(1.05rem, 1.6vw, 1.35rem)/1.2 var(--font-display);
  letter-spacing: -0.02em;
  color: var(--fg-strong);
}
.bk-flashcard__hint { color: var(--fg-muted); font-size: 0.8rem; }

.bk-flashcard__spec-table {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  font-size: 0.85rem;
}
.bk-flashcard__spec-table dt { color: var(--fg); font-weight: 500; }
.bk-flashcard__spec-table dd { margin: 0; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

.bk-flashcard__star {
  position: absolute;
  top: 12px; right: 12px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface-elev);
  color: var(--fg-subtle);
  cursor: pointer;
  z-index: 2;
  transition: color var(--dur-fast), border-color var(--dur-fast), background var(--dur-fast);
}
.bk-flashcard__star svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.bk-flashcard__star.is-active { color: var(--status-warning); border-color: var(--status-warning); background: var(--status-warning-bg); }
.bk-flashcard__star.is-active svg { fill: currentColor; }

/* Batch colour swatches (the visual ID dots) */
.bk-swatches { display: flex; gap: 6px; align-items: center; justify-content: center; }
.bk-swatch { width: 18px; height: 18px; border-radius: 999px; border: 1px solid var(--line); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }

/* Grade row — Again / Hard / Good / Easy */
.bk-grade-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: auto;
}
.bk-grade-btn {
  min-height: 38px;
  padding: 6px 4px;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--surface-strong);
  color: var(--fg);
  font: 600 0.72rem/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.bk-grade-btn:hover { background: var(--accent-soft); }
.bk-grade-btn--again:hover { color: var(--status-danger);  border-color: var(--status-danger); }
.bk-grade-btn--hard:hover  { color: var(--status-warning); border-color: var(--status-warning); }
.bk-grade-btn--good:hover  { color: var(--accent-action);  border-color: var(--accent-action); }
.bk-grade-btn--easy:hover  { color: var(--status-success); border-color: var(--status-success); }

/* ---------- Nav / header --------------------------------------------------- */
/* Sticky frosted top bar (positioned sticky in web-kit.css). The translucent
   fill + blur lets content scroll behind it as liquid glass; the
   @supports-not fallback restores a solid surface where blur is unavailable
   so the header text never sits on bare page content. */
/* Header bar — the shared Liquid Glass material (see .bk-glass). */
.bk-app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-xl);
  background: var(--glass-bg);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-spec),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 10px 40px -12px rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bk-app-header { background: var(--glass-bg-solid); }
}
.bk-app-header__title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.bk-app-header__main  { font: var(--type-h3); color: var(--fg-strong); letter-spacing: -0.02em; }
.bk-app-header__sub   { font-size: 0.78rem; color: var(--fg-muted); }
.bk-app-header__actions { display: flex; gap: 8px; align-items: center; }

.bk-hamburger {
  width: 44px; height: 44px;
  display: grid; place-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.bk-hamburger span { display: block; width: 16px; height: 2px; background: var(--fg); border-radius: 999px; }
@media (hover: hover) and (pointer: fine) {
  .bk-hamburger:hover { border-color: var(--accent-action); transform: translateY(-1px); }
}
.bk-hamburger:active { transform: scale(0.97); }

.bk-user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 6px 14px 6px 6px;
  background: var(--surface-inverse);
  color: var(--bg);
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.85rem;
  box-shadow: var(--shadow-xs);
}
.bk-user-chip__avatar {
  width: 32px; height: 32px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-indigo));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 0.78rem;
}

/* Side nav — Liquid Glass chrome (see .bk-glass). The fixed ambient backdrop
   (.bk-app-bg, z-index 0) sits behind the nav so its orbs/grid refract through
   the blur. Width is driven by --bk-sidenav-w so the collapse toggle can
   animate it (set in web-kit.css). */
.bk-side-nav {
  width: var(--bk-sidenav-w, 280px);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--glass-bg);
  border-right: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-spec),
    inset -1px 0 0 rgba(255, 255, 255, 0.04);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  backdrop-filter: blur(30px) saturate(180%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .bk-side-nav { background: var(--glass-bg-solid); }
}
.bk-nav-brand {
  display: flex; gap: 12px; align-items: center;
  padding: 14px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.bk-nav-mark {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-indigo) 100%);
  color: #fff;
  border-radius: var(--radius-md);
  font: 700 1rem/1 var(--font-display);
  letter-spacing: -0.03em;
}
.bk-nav-brand__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bk-nav-brand__name { font: 700 0.95rem/1.1 var(--font-display); color: var(--fg-strong); letter-spacing: -0.02em; }
.bk-nav-brand__tag  { font-size: 0.72rem; color: var(--fg-muted); line-height: 1.4; }

.bk-nav-section { display: flex; flex-direction: column; gap: 4px; }
.bk-nav-section__title {
  font: var(--type-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-subtle);
  padding: 0 6px 4px;
}
.bk-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--fg);
  font: 600 0.9rem/1 var(--font-display);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out);
}
.bk-nav-link svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--fg-muted); }
@media (hover: hover) and (pointer: fine) {
  .bk-nav-link:hover { background: var(--accent-soft); transform: translateX(2px); }
}
.bk-nav-link.is-active {
  background: var(--accent-action-soft);
  color: var(--accent-action);
  border-color: rgba(37, 99, 235, 0.18);
}
.bk-nav-link.is-active svg { color: var(--accent-action); }

/* ---------- Stat tile + Quick action --------------------------------------- */
.bk-stat-tile {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-xs);
}
.bk-stat-tile__value { font: 700 1.6rem/1.1 var(--font-display); letter-spacing: -0.03em; color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.bk-stat-tile__label { font: 600 0.78rem/1 var(--font-display); color: var(--fg); }
.bk-stat-tile__sub   { font-size: 0.74rem; color: var(--fg-muted); }
.bk-stat-tile--warn  { border-color: rgba(245, 158, 11, 0.4); background: var(--status-warning-bg); }

.bk-quick-action {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-align: left;
  width: 100%;
  transition: transform var(--dur-press) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .bk-quick-action:hover { transform: translateY(-2px); border-color: var(--accent-action); box-shadow: var(--shadow-md); }
}
.bk-quick-action:active { transform: scale(0.98); }
.bk-quick-action__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--accent-action-soft);
  color: var(--accent-action);
  border-radius: var(--radius-md);
}
.bk-quick-action__icon svg { width: 22px; height: 22px; }
.bk-quick-action__text { display: flex; flex-direction: column; gap: 2px; }
.bk-quick-action__text strong { font: 600 0.95rem/1.2 var(--font-display); color: var(--fg-strong); }
.bk-quick-action__text span   { font-size: 0.78rem; color: var(--fg-muted); }

/* ---------- Visually hidden helper ----------------------------------------- */
.bk-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Spirit "any brand" chips in the cocktail finder. */
.bk-chip--spirit { font-weight: 700; }