/* ==========================================================================
   polish_boardroom.css — Cross-page accessibility + motion polish.
   Loaded via base.html so it applies on every surface.
   - Stronger focus rings on every interactive element (keyboard a11y).
   - prefers-reduced-motion: kills non-essential animations, keeps semantic
     state changes.
   - Light-mode cream surfaces a touch deeper where contrast bleached out.
   - Print: clean receipts, hide chrome.
   ========================================================================== */

/* ── Universal focus ring (keyboard only, via :focus-visible) ─────────── */
*:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible,
[role="link"]:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent),
              0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent) !important;
  border-radius: var(--radius-sm, 4px);
  transition: box-shadow 0.12s var(--ease-ui, ease);
}
/* Form fields keep their visible border + add the soft halo */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Specific motion-heavy elements: kill them entirely */
  .gc-live-dot,
  .bubble-halo,
  .cstl-ghost,
  .car,
  .live-dot,
  .led-indicator {
    animation: none !important;
  }
  /* Smooth scroll → instant */
  html { scroll-behavior: auto !important; }
}

/* ── Light-mode contrast tightening ──────────────────────────────────── */
[data-theme="light"] {
  /* Slightly darker borders so cream cards on cream bg always have a
     visible silhouette. Override the explore_v2_boardroom adjustment
     applied earlier (already darker than pkg 1's spec). */
  --shadow-sm: 0 1px 3px rgba(20, 36, 30, 0.10) !important;
  --shadow-md: 0 4px 16px rgba(20, 36, 30, 0.12) !important;
  --shadow-lg: 0 12px 36px rgba(20, 36, 30, 0.14) !important;
}

/* Make every surface card explicitly visible against bg in light mode. */
[data-theme="light"] .gc-cockpit,
[data-theme="light"] .gc-actions,
[data-theme="light"] .gc-parked-card,
[data-theme="light"] .upload-info,
[data-theme="light"] .info-card,
[data-theme="light"] .payment-info-card,
[data-theme="light"] .credit-package-card,
[data-theme="light"] .summary-card,
[data-theme="light"] .pricing-card,
[data-theme="light"] .receipt-container,
[data-theme="light"] .auth-card,
[data-theme="light"] main > .content > form {
  border-color: var(--line-strong) !important;
}

/* ── Print — clean receipts + transaction history ────────────────────── */
@media print {
  body, html {
    background: white !important;
    color: black !important;
  }
  .site-header,
  .site-footer,
  .gc-pagehead,
  .gc-toolbar,
  .frameless-site-nav,
  .credit-balance-widget,
  .gc-cta-primary,
  .gc-cta-ghost,
  .btn-primary,
  .btn-secondary,
  .btn,
  nav,
  footer,
  .no-print {
    display: none !important;
  }
  .receipt-container,
  .payment-info-card,
  .transaction-row-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
  }
  table {
    border-collapse: collapse !important;
  }
  table thead th,
  table tbody td {
    border: 1px solid #ddd !important;
    color: black !important;
    background: white !important;
  }
  a {
    color: black !important;
    text-decoration: none !important;
  }
  a[href]:after {
    content: " (" attr(href) ")";
    font-size: 10px;
    color: #555;
  }
}

/* ── Skip link (keyboard a11y) ───────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--accent);
  color: var(--on-accent);
  padding: 8px 14px;
  border-radius: 0 0 6px 0;
  font-family: 'Exo 2', sans-serif;
  font-size: 13px;
  font-weight: 600;
  z-index: 99999;
  text-decoration: none;
  transition: top 0.12s var(--ease-ui);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
}

/* ── Selection ───────────────────────────────────────────────────────── */
::selection {
  background: color-mix(in srgb, var(--accent) 35%, transparent);
  color: var(--text);
}

/* ── Scrollbar polish (webkit) ───────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 5px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-mute);
  background-clip: padding-box;
}