/* ============================================================
   Kizo × Mantine integration overrides
   Loads after mantine-bundle.css; maps Mantine components onto
   the "Cyan Ledger" design tokens (cyan × gold, dark & ice light).
   ============================================================ */

/* Mantine's global body reset loads after site.css. Keep all native content
   and portaled controls on the same color/typography system. */
body {
  color: var(--text);
  background: var(--bg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  --mantine-color-text: var(--text);
  --mantine-color-body: var(--bg);
  --mantine-color-default: var(--surface);
  --mantine-color-default-hover: var(--surface-2);
  --mantine-color-default-color: var(--text);
  --mantine-color-default-border: var(--line-strong);
  --mantine-color-dimmed: var(--muted);
  --mantine-primary-color-filled: var(--accent);
  --mantine-color-matrix-filled: var(--accent);
  --mantine-color-matrix-filled-hover: var(--accent);
  --mantine-color-matrix-light: var(--cyan-soft);
  --mantine-color-matrix-light-color: var(--accent);
  --mantine-color-matrix-outline: var(--accent);
  --mantine-color-anchor: var(--accent);
  /* --gold stays site-owned: #e8b86a in dark, via site.css in light. */
  --mantine-color-yellow-filled: var(--gold);
}

/* ---------- Buttons ---------- */
.km-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 38px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  transition:
    transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.km-btn-sm { min-height: 34px; padding: 6px 12px; font-size: 12px; }
.km-btn .mantine-Button-inner { display: flex; align-items: center; justify-content: center; height: auto; }
.km-btn .mantine-Button-label { display: flex; align-items: center; justify-content: center; white-space: nowrap; height: auto; gap: 8px; text-align: center; line-height: 1.2; }
.km-btn.km-gold {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 26px -10px var(--accent);
}
.km-btn.km-gold:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 0 38px -8px var(--accent);
}
.inline-actions > [data-kizo-mount] { max-width: 100%; }

.km-btn:hover {
  transform: translateY(-2px);
}

.km-btn .arr {
  display: inline-block;
  font-family: var(--font-mono);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.km-btn:hover .arr {
  transform: translateX(3px);
}

.km-btn.km-ghost:hover {
  border-color: var(--gold) !important;
}

.km-filter-btn {
  min-height: 36px;
  padding: 6px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.km-filter-btn[aria-pressed='false']:hover {
  color: var(--text);
}

.km-filter-count {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Tags ---------- */
.km-tag {
  font-family: var(--font-mono) !important;
  font-size: 10.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: 4px;
  border-radius: 3px;
  line-height: 1.4;
  height: auto;
  max-width: 100%;
}

.km-tag .mantine-Badge-label { white-space: normal; }

/* ---------- Header controls ---------- */
.km-theme-action {
  min-width: 44px;
  min-height: 44px;
  color: var(--muted);
  border-radius: var(--radius-sm);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
}

.km-theme-action:hover {
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
  background: var(--surface) !important;
}

.km-theme-action svg,
.km-theme-action .sun-icon svg,
.km-theme-action .moon-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}

.km-theme-action .sun-icon svg,
.km-theme-action .moon-icon svg {
  width: 18px;
  height: 18px;
}

.km-burger {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  transition: color 0.2s, border-color 0.2s, background 0.2s;
  display: none;
}

.km-burger:hover {
  color: var(--text);
  border-color: var(--line-strong);
  background: var(--surface);
}

@media (max-width: 860px) {
  .km-burger {
    display: block;
  }
}

.km-burger span,
.km-burger span::before,
.km-burger span::after { background: var(--text); }

/* ---------- Drawer ---------- */
.km-drawer-link {
  display: block;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.2s, background 0.2s;
}

.km-drawer-link:hover {
  color: var(--text);
  background: var(--bg-soft);
}

.km-drawer-link.active {
  color: var(--gold);
}

.km-drawer-mail {
  margin-top: 10px;
  border-top: 1px dashed var(--line);
  border-radius: 0 0 10px 10px;
  font-family: var(--font-mono);
  font-size: 13px;
}

/* ---------- Back-to-top Affix ---------- */
.km-top {
  width: 44px;
  height: 44px;
  color: var(--muted);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  .km-btn, .km-btn .arr, .km-theme-action, .km-burger, .km-drawer-link { transition: none; }
  .km-btn:hover, .km-btn:hover .arr { transform: none; }
}

.km-top:hover {
  color: var(--gold);
  border-color: var(--gold);
}