/**
 * PragCore portable UI primitives — depends on tokens.css (:root).
 * Synced to public/css/pragcore-components.css for the marketing site.
 * @see Shared/Standards/DESIGN_SYSTEM.md (logo, layout, iconography, motion — path from Personal/PragCore/ hosting root)
 */

/* ——— Accessibility ——— */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--cyan);
  color: var(--skip-fg);
  font-weight: 700;
  text-decoration: none;
  border-radius: 4px;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* ——— Brand + nav (header shell stays in product CSS) ——— */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: inherit;
  text-shadow: var(--brand-text-shadow);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: -0.03em;
}

.brand-glyph {
  width: 10px;
  height: 10px;
  background: linear-gradient(135deg, var(--cyan), var(--magenta));
  border-radius: 2px;
  box-shadow: var(--brand-glyph-glow);
}

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}

.nav-link {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  color: inherit;
  opacity: 0.85;
  text-shadow: var(--nav-link-shadow);
  transition: opacity var(--duration-ui-fast), color var(--duration-ui-fast);
}

.nav-link:hover,
.nav-link:focus-visible {
  opacity: 1;
  color: var(--cyan);
}

/* ——— Theme picker ——— */
.theme-picker {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: inherit;
}

.theme-picker-label {
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  text-shadow: var(--audio-text-shadow);
}

.theme-picker-field {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.theme-picker-field::after {
  content: "";
  position: absolute;
  right: 0.72rem;
  top: 50%;
  width: 0.38rem;
  height: 0.38rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  opacity: 0.72;
  pointer-events: none;
}

.theme-picker-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 7.25rem;
  padding: 0.36rem 1.8rem 0.36rem 0.7rem;
  border: 1px solid var(--audio-border);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-shadow: var(--audio-text-shadow);
  transition: border-color var(--duration-ui-fast), color var(--duration-ui-fast), box-shadow var(--duration-ui-fast);
}

.theme-picker-select:hover,
.theme-picker-select:focus-visible {
  border-color: var(--cyan);
  color: var(--cyan);
  outline: none;
}

.theme-picker-select option {
  background: var(--void);
  color: var(--text);
}

@media (max-width: 720px) {
  .theme-picker-label {
    display: none;
  }

  .theme-picker-select {
    min-width: 6.55rem;
  }
}

/* ——— Buttons ——— */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem 1.6rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid transparent;
  text-shadow: var(--text-legibility-tight);
  transition: transform var(--duration-ui-medium) var(--ease-out), box-shadow var(--duration-ui-medium), background var(--duration-ui-medium), color var(--duration-ui-medium);
}

.btn-primary {
  background: var(--btn-primary-bg);
  color: var(--ink);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  text-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  transform: translateY(-2px);
  background: var(--btn-primary-bg-hover);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18), 0 0 22px rgba(0, 232, 216, 0.22);
}

.btn-ghost {
  border-color: var(--btn-ghost-border);
  color: var(--btn-ghost-color);
  background: var(--surface);
  backdrop-filter: blur(12px);
  text-shadow: var(--text-scene-halo-tight);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  border-color: var(--magenta);
  color: var(--magenta);
}

.btn-quiet {
  opacity: 0.9;
  border-color: var(--btn-quiet-border);
  color: var(--btn-quiet-color);
  text-shadow: var(--text-scene-halo-tight);
}

.btn-quiet:hover,
.btn-quiet:focus-visible {
  opacity: 1;
  color: var(--text-display);
}

/* ——— Section typography ——— */
.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 5vw, 3.5rem);
  margin: 0 0 0.75rem;
  letter-spacing: -0.03em;
}

.section-lede {
  margin: 0 0 3rem;
  max-width: 42ch;
  color: var(--muted);
  font-size: 1.05rem;
}

/* ——— Doctrine / pillar cards ——— */
.pillar-grid {
  display: grid;
  gap: 1.5rem;
}

@media (min-width: 820px) {
  .pillar-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

.pillar {
  position: relative;
  padding: 1.75rem 1.5rem 1.75rem 1.75rem;
  background: linear-gradient(145deg, var(--pillar-tint-1) 0%, var(--pillar-tint-2) 100%);
  border: 1px solid var(--pillar-border);
  border-radius: 4px;
  overflow: hidden;
}

.pillar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  background: linear-gradient(180deg, var(--magenta), var(--cyan));
  opacity: 0.85;
}

.pillar-index {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--cyan);
  margin-bottom: 0.75rem;
}

.pillar h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  margin: 0 0 0.65rem;
  letter-spacing: -0.02em;
}

.pillar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

/* ——— Hosting environment watermark (DEV / QA) ——— */
/* Data: /data/hosting-environment.json; production uses banner:null. Injected by public/js/hosting-env-banner.js */
/*
 * Visible content column (matches .panel padding + .panel-content max-width in main.css).
 * Stacking: above all in-page UI (loader, header, main). pointer-events: none — hits pass through.
 * html.pragcore-hosting-wm body { overflow-x: visible } avoids clipping wide rotated glyphs (see main.css).
 */
/* Wrappers must paint nothing — glass lives only on `.hosting-env-banner__text` (glyphs). */
.hosting-env-banner,
.hosting-env-banner__inner {
  background: none;
  background-color: transparent;
  border: 0;
  box-shadow: none;
  outline: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.hosting-env-banner {
  position: fixed;
  inset: 0;
  /* Above .skip-link (200), .loader (150), .site-header (50), #main (10) */
  z-index: 2147483647;
  isolation: isolate;
  box-sizing: border-box;
  padding: calc(var(--header-h) + 2rem) clamp(1.25rem, 5vw, 4rem) 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
  pointer-events: none;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  mix-blend-mode: normal;
}

.hosting-env-banner__inner {
  position: relative;
  width: 100%;
  max-width: min(720px, 100%);
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: inline-size;
  container-name: hosting-wm;
  mix-blend-mode: normal;
}

/* Non-prod only: allow fixed watermark to extend past body width without clipping (main.css sets overflow-x: hidden). */
html.pragcore-hosting-wm body {
  overflow-x: visible;
}

/*
 * Colorless liquid glass — only on letter shapes (background-clip: text).
 * Parents add zero fill; no frosted panel behind the wordmark.
 */
.hosting-env-banner__text {
  display: block;
  width: 165%;
  max-width: none;
  margin: 0 auto;
  text-align: center;
  white-space: nowrap;
  line-height: 1;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  /* Sized to hit inner box corners when rotated; cqw ties to content column width. */
  font-size: clamp(3.5rem, 40cqw, 13rem);
  transform: rotate(-28deg) scale(1.18);
  transform-origin: center center;
  color: transparent;
  -webkit-text-fill-color: transparent;
  /* Neutral glass only; alphas high enough to read on dark hero (soft-light was washing out in practice). */
  background-image:
    linear-gradient(
      118deg,
      rgba(255, 255, 255, 0.38) 0%,
      rgba(255, 255, 255, 0.06) 22%,
      rgba(255, 255, 255, 0.22) 45%,
      rgba(255, 255, 255, 0.05) 58%,
      rgba(255, 255, 255, 0.32) 78%,
      rgba(255, 255, 255, 0.1) 100%
    ),
    linear-gradient(
      42deg,
      rgba(255, 255, 255, 0) 38%,
      rgba(255, 255, 255, 0.28) 52%,
      rgba(255, 255, 255, 0) 66%
    );
  background-size: 200% 200%, 180% 180%;
  background-position: 38% 42%, 62% 55%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.45);
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, 0.2)) drop-shadow(0 3px 14px rgba(0, 0, 0, 0.2));
  text-rendering: geometricPrecision;
  mix-blend-mode: normal;
  animation: hosting-wm-glass-shift 22s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hosting-env-banner__text {
    animation: none;
  }
}

@keyframes hosting-wm-glass-shift {
  0%,
  100% {
    background-position: 32% 38%, 58% 48%;
  }
  50% {
    background-position: 68% 62%, 42% 52%;
  }
}