/* SNAPPI INTERFACE QUALITY LAYER
   Shared accessibility, responsive, and interaction corrections verified in the
   October 2026 cross-discipline interface review. Keep new feature styling in
   styles.css and reserve this file for system-wide usability rules. */

/* Keyboard navigation */
.skip-link {
  position: fixed;
  top: .75rem;
  left: .75rem;
  z-index: 10000;
  padding: .7rem 1rem;
  border: 2px solid #000;
  border-radius: 999px;
  background: #d4ff3a;
  color: #000;
  font-weight: 850;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 180ms ease;
}
.skip-link:focus { transform: translateY(0); }
:is(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid #8116e0;
  outline-offset: 3px;
}
:is(.site-header, .site-footer, .snappi-modal-panel, .contact-section) :is(a, button, input, select, textarea, summary):focus-visible {
  outline-color: #d4ff3a;
}

/* Modal actions that visually behave like contextual text links */
.modal-text-trigger:not(.button) {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  text-decoration: inherit;
  cursor: pointer;
}
.nav-mega-menu .modal-text-trigger {
  display: grid;
  gap: .15rem;
  width: 100%;
  padding: .8rem;
  border-radius: .9rem;
  text-align: left;
}
.nav-mega-menu .modal-text-trigger:hover { background: var(--sn-minimal-soft); }
.faq-intro .modal-text-trigger,
.legal-notice .modal-text-trigger {
  color: #8116e0;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.footer-column .modal-text-trigger {
  color: rgba(255,255,255,.76);
  font-size: .9rem;
  text-align: left;
}
.footer-column .modal-text-trigger:hover { color: #d4ff3a; }
.login-link.modal-text-trigger { color: inherit; }

/* Complete tab affordance */
[role="tab"]:focus-visible { position: relative; z-index: 3; }
[role="tabpanel"] { min-width: 0; }

/* Responsive Admin tables */
@media (max-width: 760px) {
  .admin-table-wrap { overflow: visible; border: 0; background: transparent; }
  .admin-table-wrap table,
  .admin-table-wrap tbody { display: grid; width: 100%; min-width: 0; gap: .8rem; }
  .admin-table-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .admin-table-wrap tr { display: grid; overflow: hidden; border: 1px solid rgba(11,11,11,.14); border-radius: 1rem; background: #fefffc; }
  .admin-table-wrap td {
    display: grid;
    grid-template-columns: minmax(6.5rem,.38fr) minmax(0,1fr);
    gap: .8rem;
    align-items: start;
    padding: .8rem 1rem;
    border-top: 1px solid #e2e2de;
    overflow-wrap: anywhere;
  }
  .admin-table-wrap td:first-child { border-top: 0; }
  .admin-table-wrap td::before {
    content: attr(data-label);
    color: #5f5f5f;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  .admin-table-wrap td[colspan] { display: block; }
  .admin-table-wrap td[colspan]::before { content: none; }
  .admin-toolbar { grid-template-columns: 1fr; }
}

/* Touch devices use intentional selected and pressed states, not sticky hover. */
@media (hover: none), (pointer: coarse) {
  :is(.button, .price-card, .feed-card img, .outcome, .category-orbit span,
      .creator-benefit-card, .creator-process-grid li, .about-purpose-card,
      .about-service-grid article, .about-principle-list article,
      .brand-handle-grid article, .brand-journey-grid li, .brand-right-grid article,
      .format-card, .admin-navigation button, .admin-table-button):hover {
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Compact consent notice on narrow screens without obscuring the main action. */
@media (max-width: 600px) {
  .cookie-consent { max-height: min(42svh,18rem); overflow-y: auto; overscroll-behavior: contain; }
  .cookie-consent p { margin-bottom: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
  .announcement-track { animation: none !important; }
}

/* Content lists use the supplied Snappi symbol. Navigation, steps, and status chips keep their own visuals. */
:is(.pricing-grid .plan .features, .audience-card ul, .capability-preview ul, .creator-eligibility-panel ul, .about-audience-card ul) li::before {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 1.2rem !important;
  width: 1.2rem !important;
  height: 1.2rem !important;
  margin-right: .55rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #8116e0 !important;
  -webkit-mask: url("assets/coins.png") center / contain no-repeat;
  mask: url("assets/coins.png") center / contain no-repeat;
  vertical-align: -.2em;
}
.pricing-grid .plan .features li::before { margin-right: 0 !important; }
.audience-creator ul li::before { background: #d4ff3a !important; }
.creator-eligibility-panel li::before { top: .15rem; margin-right: 0 !important; }