/* ==========================================================================
   GreyWeave chrome profile — GW-CHROME-v1
   Team consensus (5/5 Structure A): theme tokens + thin component layer.
   Import AFTER greyweave-theme.css:
     <link rel="stylesheet" href="/static/greyweave-theme.css" />
     <link rel="stylesheet" href="/static/greyweave-chrome.css" />
   Next page MUST match locked front door via these hooks — do not re-invent
   amber/glass/banner/z-index/soft-fade inline.
   ========================================================================== */

/* --- Page shell --- */
.gw-page,
body.gw-chrome-page {
  margin: 0;
  font-family: var(--gw-font);
  font-size: var(--gw-fs-md);
  line-height: var(--gw-lh);
  color: var(--gw-text-body);
  background: var(--gw-bg);
}

.gw-title,
.gw-copy h2 {
  margin: 0 0 var(--gw-space-3);
  max-width: var(--gw-copy-max-width);
  color: var(--gw-text-heading);
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  letter-spacing: var(--gw-tracking-tight);
  line-height: 1.25;
  font-weight: 700;
}

.gw-copy p {
  margin: 0 0 var(--gw-space-4);
  max-width: var(--gw-copy-max-width);
  color: var(--gw-text-body);
  font-size: 1.02rem;
}

.gw-container-960,
.gw-entry {
  width: min(var(--gw-entry-width), calc(100% - 2rem));
  margin-inline: auto;
}

/* --- Banner / header shell (sunburst art + chrome above) --- */
.gw-header-shell,
.gw-site-header.gw-chrome-header {
  position: relative;
  z-index: var(--gw-z-header-shell);
  isolation: isolate;
  overflow: visible;
  height: var(--gw-banner-height);
  min-height: var(--gw-banner-min);
  max-height: var(--gw-banner-max);
  background-color: #061018;
  background-image: var(--gw-banner-img);
  background-size: cover;
  background-position: left center;
  background-repeat: no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.gw-banner-art,
.gw-landing-header__banner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  z-index: var(--gw-z-banner);
  pointer-events: none;
}

.gw-banner-brand {
  position: absolute;
  left: 1%;
  top: 12%;
  width: 38%;
  height: 72%;
  z-index: var(--gw-z-brand);
}

/* --- visionOS glass controls --- */
.gw-glass-control {
  border: 1px solid var(--gw-chrome-glass-border);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.10) 100%),
    rgba(8, 16, 30, 0.38);
  -webkit-backdrop-filter: var(--gw-chrome-glass-blur);
  backdrop-filter: var(--gw-chrome-glass-blur);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 22px rgba(0, 0, 0, 0.25),
    0 0 18px rgba(0, 214, 240, 0.14);
}

.gw-btn-enter,
.gw-btn-enter-amber {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--gw-enter-amber-text);
  font: inherit;
  font-weight: 750;
  letter-spacing: 0.02em;
  padding: 0.72rem 1.35rem;
  border-radius: var(--gw-radius-pill);
  border: 1px solid var(--gw-enter-amber-border);
  background: var(--gw-enter-amber-bg);
  background-color: rgba(255, 190, 32, 0.72);
  -webkit-backdrop-filter: var(--gw-enter-amber-blur);
  backdrop-filter: var(--gw-enter-amber-blur);
  box-shadow:
    0 0 0 1px rgba(255, 255, 235, 0.62) inset,
    0 1px 0 rgba(255, 255, 255, 0.75) inset,
    0 10px 28px rgba(0, 0, 0, 0.24),
    var(--gw-enter-amber-glow);
  text-shadow: 0 1px 0 rgba(255, 245, 200, 0.40);
  cursor: pointer;
  text-decoration: none;
  z-index: var(--gw-z-enter);
}
.gw-btn-enter:hover,
.gw-btn-enter-amber:hover {
  border-color: rgba(255, 230, 110, 1);
  box-shadow:
    0 0 0 1px rgba(255, 255, 235, 0.70) inset,
    0 1px 0 rgba(255, 255, 255, 0.82) inset,
    0 12px 32px rgba(0, 0, 0, 0.28),
    0 0 42px rgba(255, 200, 48, 0.65);
}

.gw-btn-gear {
  width: var(--gw-chrome-gear-size);
  height: var(--gw-chrome-gear-size);
  padding: 0;
  border-radius: var(--gw-radius-pill);
  z-index: var(--gw-z-gear);
  cursor: pointer;
  color: #9aefff;
}

.gw-settings-popover,
.gw-glass-popover {
  z-index: var(--gw-z-popover);
  border: 1px solid var(--gw-chrome-glass-border);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.02) 36%, rgba(0, 0, 0, 0.16) 100%),
    rgba(8, 14, 26, 0.55);
  -webkit-backdrop-filter: var(--gw-chrome-popover-blur);
  backdrop-filter: var(--gw-chrome-popover-blur);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.10) inset,
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 22px 48px rgba(0, 0, 0, 0.45),
    0 0 36px rgba(0, 214, 240, 0.16);
  color: #e3f3ff;
}

/* --- Soft-fade pipeline diagram (strengthen T/B+corners; keep L/R labels) --- */
.gw-pipeline,
.gw-pipeline-soft-fade,
.gw-diagram-soft-fade {
  width: min(var(--gw-pipeline-max-width), calc(100vw - 2rem));
  max-width: none;
  margin: var(--gw-space-5) 0 0;
  margin-left: 50%;
  transform: translateX(-50%);
  position: relative;
  isolation: isolate;
  /*
    L/R: opaque by --gw-pipeline-fade-lr (3.5%) so edge labels stay readable.
    T/B: deeper soft multi-stop (--gw-pipeline-fade-tb 20%); corners dissolve
    via mask-composite intersect — no glue-lens blobs, no stamped aluminum.
  */
  -webkit-mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 1.25%,
      #000 var(--gw-pipeline-fade-lr, 3.5%),
      #000 calc(100% - var(--gw-pipeline-fade-lr, 3.5%)),
      rgba(0, 0, 0, 0.4) 98.75%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 5%,
      #000 var(--gw-pipeline-fade-tb, 20%),
      #000 calc(100% - var(--gw-pipeline-fade-tb, 20%)),
      rgba(0, 0, 0, 0.3) 95%,
      transparent 100%);
  mask-image:
    linear-gradient(to right,
      transparent 0%,
      rgba(0, 0, 0, 0.4) 1.25%,
      #000 var(--gw-pipeline-fade-lr, 3.5%),
      #000 calc(100% - var(--gw-pipeline-fade-lr, 3.5%)),
      rgba(0, 0, 0, 0.4) 98.75%,
      transparent 100%),
    linear-gradient(to bottom,
      transparent 0%,
      rgba(0, 0, 0, 0.3) 5%,
      #000 var(--gw-pipeline-fade-tb, 20%),
      #000 calc(100% - var(--gw-pipeline-fade-tb, 20%)),
      rgba(0, 0, 0, 0.3) 95%,
      transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}
.gw-pipeline::after,
.gw-pipeline-soft-fade::after,
.gw-diagram-soft-fade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* Stronger T/B wash + tiny outer L/R seam (under --gw-pipeline-fade-lr labels) */
  background:
    linear-gradient(
      to right,
      var(--gw-pipeline-wash) 0%,
      transparent var(--gw-pipeline-wash-lr, 2.25%),
      transparent calc(100% - var(--gw-pipeline-wash-lr, 2.25%)),
      var(--gw-pipeline-wash) 100%
    ),
    linear-gradient(
      to bottom,
      var(--gw-pipeline-wash) 0%,
      transparent var(--gw-pipeline-wash-depth, 24%),
      transparent calc(100% - var(--gw-pipeline-wash-depth, 24%)),
      var(--gw-pipeline-wash) 100%
    );
}
.gw-pipeline img,
.gw-pipeline-soft-fade img,
.gw-diagram-soft-fade img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  position: relative;
  z-index: 1;
}

/* Dark-theme readable text for chrome pages that flip theme */
html[data-theme="dark"] {
  --gw-text-heading: #e8f2f8;
  --gw-text-body: #b3c2d1;
}

/* ==========================================================================
   Taxon — Entity Protect — Apple provision / visionOS glass
   Sits under gw-entry pipeline. Does not touch banner / Enter / pipeline art.
   ========================================================================== */
.gw-taxon {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--gw-space-5);
  align-items: center;
  width: min(var(--gw-copy-max-width), 100%);
  margin: var(--gw-space-6) 0 0;
  padding: var(--gw-space-5) var(--gw-space-5) var(--gw-space-5) var(--gw-space-4);
  border-radius: 22px;
  border: 1px solid var(--gw-taxon-glass-border);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.04) 38%, rgba(0, 36, 64, 0.22) 100%),
    rgba(6, 12, 22, 0.48);
  -webkit-backdrop-filter: var(--gw-chrome-glass-blur);
  backdrop-filter: var(--gw-chrome-glass-blur);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.1) inset,
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 20px 44px rgba(0, 0, 0, 0.32),
    0 0 36px var(--gw-taxon-glow-soft);
}

.gw-taxon__icon-wrap {
  position: relative;
  flex-shrink: 0;
  padding: 4px;
  border-radius: calc(var(--gw-taxon-icon-radius) + 4%);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.22), rgba(0, 200, 255, 0.08) 45%, rgba(0, 0, 0, 0.2));
  box-shadow:
    0 0 0 1px rgba(127, 233, 255, 0.28),
    0 12px 32px rgba(0, 0, 0, 0.35),
    0 0 28px var(--gw-taxon-glow-soft);
}

.gw-taxon__icon {
  width: var(--gw-taxon-tile-size);
  height: var(--gw-taxon-tile-size);
  border-radius: var(--gw-taxon-icon-radius);
  object-fit: cover;
  display: block;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.28) inset,
    0 0 22px var(--gw-taxon-glow);
}

.gw-taxon__meta {
  min-width: 0;
}

.gw-taxon__eyebrow {
  margin: 0 0 var(--gw-space-1);
  font-size: var(--gw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gw-brand-cyan);
}

.gw-taxon__name {
  margin: 0;
  color: var(--gw-text-heading);
  font-size: clamp(1.55rem, 2.6vw, 1.85rem);
  letter-spacing: var(--gw-tracking-tight);
  font-weight: 750;
  line-height: 1.1;
}

.gw-taxon__product {
  margin: 0.15rem 0 var(--gw-space-3);
  color: rgba(227, 243, 255, 0.88);
  font-size: var(--gw-fs-md);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}

.gw-taxon__lede {
  margin: 0 0 var(--gw-space-3);
  color: var(--gw-text-body);
  font-size: var(--gw-fs-sm);
  line-height: 1.45;
  max-width: 36rem;
}

.gw-taxon__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gw-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.gw-taxon__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.75rem;
  border-radius: var(--gw-radius-pill);
  border: 1px solid var(--gw-taxon-glass-border);
  background: rgba(8, 20, 36, 0.45);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  color: #e3f3ff;
  font-size: var(--gw-fs-xs);
  font-weight: 650;
  letter-spacing: 0.04em;
}

html[data-theme="light"] .gw-taxon {
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.78) 0%, rgba(232, 248, 255, 0.58) 50%, rgba(210, 236, 248, 0.42) 100%),
    rgba(255, 255, 255, 0.58);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.7) inset,
    0 14px 32px rgba(16, 72, 102, 0.12),
    0 0 26px var(--gw-taxon-glow-soft);
}

html[data-theme="light"] .gw-taxon__product {
  color: var(--gw-brand-navy);
  opacity: 0.82;
}

html[data-theme="light"] .gw-taxon__pill {
  background: rgba(255, 255, 255, 0.65);
  color: var(--gw-brand-navy);
}

@media (max-width: 560px) {
  .gw-taxon {
    grid-template-columns: 1fr;
    justify-items: start;
  }
}