/**
 * ambe traders — Global UI polish
 * Cross-page enhancements: cards, sections, forms, bento helpers
 * Loaded after page CSS; uses low-specificity :where() where possible.
 */

/* ——— Page rhythm ——— */
:where(.page-main) > section:first-child {
  margin-top: 0;
}

:where([class*="-body"], [class*="-deck"], [class*="-stage"]) {
  padding-top: var(--a51-space-5, 1.25rem);
  padding-bottom: var(--a51-space-10, 2.5rem);
}

/* ——— Glass card surface (shared pattern) ——— */
:where(
  [class*="-card"]:not(.a51-mobile-link):not(.a51-mobile-user-card),
  [class*="-panel"]:not(.a51-mobile-panel),
  [class*="-sheet"],
  [class*="-ledger"],
  [class*="-origin"],
  [class*="-spread"]:not([class*="-spread-cover"]):not([class*="-spread-panel"]),
  .policy-card,
  .a51-policy-sheet
) {
  border-radius: var(--a51-radius-xl, 20px);
  box-shadow: var(--a51-shadow-md);
  border: 1px solid var(--a51-border);
}

/* ——— Section headings inside page shells ——— */
:where([class*="-head"] h2, [class*="-block-head"] h2) {
  font-weight: var(--a51-weight-bold);
  line-height: var(--a51-leading-snug);
  letter-spacing: -0.025em;
}

:where([class*="-head"] p, [class*="-block-head"] p, [class*="-lede"], [class*="-prose"] p) {
  line-height: var(--a51-leading-relaxed);
  color: var(--a51-muted);
}

:where([class*="-eyebrow"], [class*="-kicker"], [class*="-tag"], [class*="-chip"]) {
  font-weight: var(--a51-weight-extrabold);
  letter-spacing: 0.14em;
  line-height: var(--a51-leading-snug);
}

/* ——— Hero sections (dark diagonal pages) ——— */
:where([class*="-hero"]) {
  padding-top: clamp(2rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5.5vw, 4rem);
}

:where([class*="-hero-copy"] h1, [class*="-hero"] h1) {
  line-height: var(--a51-leading-tight);
  font-weight: var(--a51-weight-extrabold);
}

/* ——— Primary / secondary buttons inside page shells ——— */
:where(
  [class*="-btn"]:not(.a51-mobile-close):not(.a51-menu-toggle),
  [class*="-cta"]:not([class*="-cta-link"])
) {
  border-radius: var(--a51-pill);
  font-weight: var(--a51-weight-bold);
  transition:
    transform var(--a51-transition-fast, 0.16s ease),
    box-shadow var(--a51-transition, 0.24s ease),
    background var(--a51-transition, 0.24s ease),
    border-color var(--a51-transition, 0.24s ease),
    color var(--a51-transition, 0.24s ease);
}

:where(
  [class*="-btn--primary"],
  [class*="-btn-primary"],
  [class*="-spread-btn"],
  [class*="-dock-link"]
):hover {
  transform: translateY(-2px);
}

:where([class*="-btn"]):focus-visible,
:where([class*="-cta"]):focus-visible {
  outline: none;
  box-shadow: var(--a51-focus-ring);
}

/* ——— Form fields inside page shells ——— */
:where(
  [class*="-form"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  [class*="-form"] select,
  [class*="-form"] textarea,
  [class*="-compose"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  [class*="-compose"] select,
  [class*="-compose"] textarea,
  [class*="-fields"] input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  [class*="-fields"] select,
  [class*="-fields"] textarea
) {
  border-radius: var(--a51-radius-lg);
  border: 1px solid var(--a51-border-strong);
  padding: 0.8rem 1rem;
  line-height: var(--a51-leading-normal);
  transition:
    border-color var(--a51-transition),
    box-shadow var(--a51-transition),
    background var(--a51-transition);
}

:where(
  [class*="-form"] input:focus,
  [class*="-form"] select:focus,
  [class*="-form"] textarea:focus,
  [class*="-compose"] input:focus,
  [class*="-compose"] select:focus,
  [class*="-compose"] textarea:focus,
  [class*="-fields"] input:focus,
  [class*="-fields"] select:focus,
  [class*="-fields"] textarea:focus
) {
  outline: none;
  border-color: var(--a51-canopy-mid);
  box-shadow: var(--a51-focus-ring);
}

/* ——— Bento grid helper ——— */
.a51-bento {
  display: grid;
  gap: var(--a51-space-5);
}

.a51-bento--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.a51-bento--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.a51-bento--asymmetric {
  grid-template-columns: 1.4fr 0.85fr;
}

@media (max-width: 960px) {
  .a51-bento--2,
  .a51-bento--3,
  .a51-bento--asymmetric {
    grid-template-columns: 1fr;
  }
}

/* ——— Dock / quick-link rows ——— */
:where([class*="-dock"], [class*="-links"]) {
  gap: var(--a51-space-3);
}

:where([class*="-dock-link"], [class*="-link"]:not(.a51-orbit-link):not(.a51-mobile-link)) {
  border-radius: var(--a51-radius-lg);
  border: 1px solid var(--a51-border);
  box-shadow: var(--a51-shadow-xs);
  transition:
    transform var(--a51-transition),
    box-shadow var(--a51-transition),
    border-color var(--a51-transition);
}

:where([class*="-dock-link"]:hover, [class*="-link"]:hover) {
  box-shadow: var(--a51-shadow-sm);
}

/* ——— Sticky index / rail bars ——— */
:where([class*="-index-bar-wrap"], [class*="-rail"]) {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* ——— Product / tile grids ——— */
:where([class*="-grid"], [class*="-tile"], [class*="-pod"]) {
  gap: var(--a51-space-3);
}

:where([class*="-tile"], [class*="-pod"]) {
  border-radius: var(--a51-radius-lg);
}

/* ——— Registry / detail cells ——— */
:where([class*="-cell"], [class*="-reg-cell"], [class*="-ledger-cell"]) {
  border-radius: var(--a51-radius-lg);
  transition:
    transform var(--a51-transition-fast),
    box-shadow var(--a51-transition),
    border-color var(--a51-transition);
}

:where([class*="-cell"]:hover, [class*="-reg-cell"]:hover, [class*="-ledger-cell"]:hover) {
  box-shadow: var(--a51-shadow-xs);
}

/* ——— Tables ——— */
:where(table) {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

:where(th) {
  font-size: var(--a51-text-xs);
  font-weight: var(--a51-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--a51-muted);
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--a51-border);
}

:where(td) {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--a51-border);
  line-height: var(--a51-leading-relaxed);
}

/* ——— Alerts / messages ——— */
:where([class*="-alert"], [class*="-message"], [class*="-notice"], [class*="-banner"]) {
  border-radius: var(--a51-radius-lg);
  padding: var(--a51-space-4) var(--a51-space-5);
  line-height: var(--a51-leading-relaxed);
  border: 1px solid var(--a51-border);
  box-shadow: var(--a51-shadow-xs);
}

/* ——— Selection color ——— */
::selection {
  background: rgba(200, 232, 108, 0.45);
  color: var(--a51-ink);
}

/* ——— Focus visible for links ——— */
a:focus-visible,
button:focus-visible {
  outline: none;
  box-shadow: var(--a51-focus-ring);
  border-radius: 4px;
}

/* ——— Smooth scroll padding for sticky header ——— */
html {
  scroll-padding-top: 96px;
}

@media (prefers-reduced-motion: reduce) {
  :where([class*="-btn"], [class*="-dock-link"], [class*="-link"], [class*="-cell"]) {
    transition: none !important;
  }

  :where([class*="-btn"]:hover, [class*="-spread-btn"]:hover) {
    transform: none !important;
  }
}