/* Phase 5 — global polish: motion, a11y, micro-interactions, theme tokens */

:root {
  --label-upper: #5a524c;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
  --nav-hide-duration: 0.3s;
  --surface-glass: color-mix(in srgb, var(--paper) 88%, transparent);
  --on-hero: #faf8f4;
}

[data-theme="dark"] {
  --label-upper: #b8aea6;
  --surface-glass: color-mix(in srgb, var(--paper) 90%, transparent);
}

/* Skip to content */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10001;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  background: var(--ink);
  color: var(--paper);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  transition: top 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 1rem;
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

/* Page load fade — no preloader curtain */
#main-content {
  animation: tls-page-in 0.4s ease both;
}
@keyframes tls-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  #main-content { animation: none; }
}

/* Uppercase / letter-spaced labels — ≥ 4.5:1 on paper */
.tls-footer-label,
.filter-dimension-label,
.filter-sort-label,
.hub-eyebrow,
.article-toc-label,
.article-toc-mobile-summary,
.land-eyebrow,
.signup-eyebrow,
.newsletter-inline-eyebrow,
.err-suggestions-label {
  color: var(--label-upper) !important;
}

/* Focus visible — all interactive */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}
button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Site nav — shared layout + link chrome ─────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
}

.site-nav-start {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  min-width: 0;
}

.site-nav-links {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.site-nav-end {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  flex-shrink: 0;
}

.site-nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nav-link-color, var(--muted));
  text-decoration: none;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: color 0.18s ease, background 0.18s ease;
}

.site-nav-link:hover {
  color: var(--nav-link-hover, var(--ink));
  background: color-mix(in srgb, var(--nav-link-hover, var(--ink)) 8%, transparent);
}

.site-nav-link.is-active {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.site-nav-staff {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  text-decoration: none;
  padding: 0.42rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  white-space: nowrap;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.site-nav-staff:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  color: var(--accent);
}

.site-nav-end .theme-toggle {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}

.site-nav-logo .accent {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}

@media (min-width: 768px) {
  .site-nav {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  .site-nav-start { justify-self: start; }
  .site-nav-links {
    display: flex;
    justify-self: center;
  }
  .site-nav-end { justify-self: end; }
}

/* Shared nav hide/show */
.site-nav.tls-nav-auto-hidden,
.land-nav.tls-nav-auto-hidden,
.explore-topnav.tls-nav-auto-hidden,
.page-topnav.tls-nav-auto-hidden,
.article-topnav.tls-nav-auto-hidden {
  transform: translateY(calc(-100% - 4px));
  pointer-events: none;
}

.land-nav,
.explore-topnav,
.page-topnav,
.article-topnav {
  transition:
    transform var(--nav-hide-duration) cubic-bezier(0.4, 0, 0.2, 1),
    background 0.35s ease,
    border-color 0.35s ease,
    backdrop-filter 0.35s ease,
    box-shadow 0.35s ease;
}

/* Button sweep + arrow nudge */
.tls-btn-sweep,
.err-btn,
.page-btn,
.filter-toggle,
.newsletter-inline-submit,
.newsletter-slidein-submit,
.article-feedback-submit,
.signup-save {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.tls-btn-sweep::before,
.err-btn::before,
.page-btn::before,
.filter-toggle::before,
.newsletter-inline-submit::before,
.newsletter-slidein-submit::before,
.article-feedback-submit::before,
.signup-save::before {
  content: '';
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--paper) 18%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.tls-btn-sweep:hover::before,
.err-btn:hover::before,
.page-btn:not(:disabled):hover::before,
.filter-toggle:hover::before,
.newsletter-inline-submit:hover::before,
.newsletter-slidein-submit:hover::before,
.article-feedback-submit:hover:not(:disabled):hover::before,
.signup-save:hover::before {
  transform: scaleX(1);
}
.tls-btn-sweep > *,
.err-btn > *,
.page-btn > *,
.filter-toggle > *,
.newsletter-inline-submit,
.article-feedback-submit,
.signup-save {
  position: relative;
  z-index: 1;
}

.tls-arrow-nudge,
.read-more-arrow,
.land-nav-cta-arrow,
.err-btn svg {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
a:hover .tls-arrow-nudge,
.tls-btn-sweep:hover .tls-arrow-nudge,
.case-card:hover .read-more-arrow,
.land-nav-cta:hover .land-nav-cta-arrow,
.article-adjacent-next:hover .article-adjacent-label {
  transform: translateX(4px);
}
.article-adjacent-prev:hover .article-adjacent-label {
  transform: translateX(-4px);
}

/* Prose links — underline grows from left */
.tls-prose a:not(.co-badge):not(.cat-chip):not(.case-card-link):not(.article-author-box-inner):not(.empty-suggestion),
.modal-content .story-body a:not(.dict-term),
.article-content .story-body a:not(.dict-term),
.tls-page-prose a:not(.land-founder-card) {
  color: var(--accent);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-size: 0% 1.5px;
  background-position: 0 100%;
  transition: background-size 0.25s ease, color 0.15s ease;
}
.tls-prose a:not(.co-badge):not(.cat-chip):hover,
.modal-content .story-body a:not(.dict-term):hover,
.article-content .story-body a:not(.dict-term):hover,
.tls-page-prose a:not(.land-founder-card):hover {
  background-size: 100% 1.5px;
}

/* Form fields — focus ring; floating label pattern */
.tls-field {
  position: relative;
  display: flex;
  flex-direction: column;
}
.tls-field-label {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.72rem;
  color: var(--muted);
  pointer-events: none;
  transition: transform 0.18s ease, font-size 0.18s ease, color 0.18s ease, top 0.18s ease;
  background: var(--bg, var(--paper));
  padding: 0 0.2rem;
}
.tls-field-input {
  width: 100%;
  padding: 0.85rem 0.75rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  font: inherit;
  color: var(--ink);
  background: var(--card-bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.tls-field-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.tls-field-input:focus + .tls-field-label,
.tls-field-input:not(:placeholder-shown) + .tls-field-label,
.tls-field-input.tls-has-value + .tls-field-label {
  top: 0;
  transform: translateY(-50%);
  font-size: 0.62rem;
  color: var(--accent);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.signup-field:focus,
.newsletter-inline-field:focus,
.newsletter-slidein-field:focus,
.hero-search-input:focus,
.filter-sort-select:focus,
.feedback-comment:focus,
.article-feedback-comment:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Reduced motion — marquees + counters */
@media (prefers-reduced-motion: reduce) {
  .land-nav.tls-nav-auto-hidden,
  .explore-topnav.tls-nav-auto-hidden,
  .page-topnav.tls-nav-auto-hidden,
  .article-topnav.tls-nav-auto-hidden {
    transform: none;
    opacity: 0;
  }
  [data-counter],
  [data-counter-hero] {
    animation: none !important;
  }
}