/* Grounded Studios — shared design-system polish.
   Additive only: visual refinement, no layout or behaviour changes. */

:root {
  --gs-ease: cubic-bezier(.4, 0, .2, 1);
  --gs-t: 180ms;
}

/* Crisp, accessible focus rings everywhere. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid #38bdf8;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Smooth micro-transitions on interactive surfaces (no layout props). */
button,
.btn,
a.btn,
.card,
.panel,
[class*="tab"],
summary {
  transition:
    transform var(--gs-t) var(--gs-ease),
    box-shadow var(--gs-t) var(--gs-ease),
    border-color var(--gs-t) var(--gs-ease),
    background-color var(--gs-t) var(--gs-ease),
    opacity var(--gs-t) var(--gs-ease),
    filter var(--gs-t) var(--gs-ease);
}

/* Gentle card lift — pointer devices only. */
@media (hover: hover) and (pointer: fine) {
  .card:hover,
  .panel:hover {
    transform: translateY(-2px);
  }
}

/* Accordion drop-in. */
details > *:not(summary) {
  animation: gs-fade var(--gs-t) var(--gs-ease);
}
details summary {
  cursor: pointer;
}
@keyframes gs-fade {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}

/* Paywall overlay — executive upgrade polish. */
#gs-paywall > div {
  border-radius: 20px;
  background: linear-gradient(160deg, #12161f, #0b0f16);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(255, 255, 255, .07),
    0 0 60px rgba(245, 158, 11, .07);
}
#gs-paywall [data-gs-buy] {
  border-radius: 12px;
}
#gs-paywall [data-gs-buy]:hover {
  transform: translateY(-1px);
  filter: brightness(1.07);
}
#gs-paywall input {
  border-radius: 10px;
}

/* Honor reduced motion. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Component surface refinement — shape, spacing, shadow only (no color/layout) ---- */
.card,
.panel,
.modal-card {
  border-radius: 16px;
}
.modal-card {
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
}
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger,
.btn-sm,
.btn-icon,
.icon-btn {
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .01em;
}
.input,
.textarea,
select {
  border-radius: 12px;
}
.input:focus,
.textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .15);
}
.tag,
[class*="tag-"] {
  border-radius: 999px;
  font-weight: 600;
}
.table-wrap tbody tr {
  transition: background-color var(--gs-t) var(--gs-ease);
}
.table-wrap tbody tr:hover {
  background: rgba(255, 255, 255, .035);
}
.nav-item,
.side-btn {
  border-radius: 10px;
}
.toast {
  border-radius: 12px;
  box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .6);
}
.section-title {
  letter-spacing: -0.01em;
}