/* ==========================================================================
   Zyntel prototype — COMPONENTS
   Buttons · links · eyebrow · header/nav · concept marker · media placeholder
   · metric · selector tabs · chips · graphic classes · prototype controls.
   ========================================================================== */

.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* ------------------------------------------------------------ Buttons (§13) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--zy-space-2);
  height: 2.75rem; padding-inline: var(--zy-space-5);
  border-radius: var(--zy-radius-full);
  border: var(--zy-border-hairline) solid transparent;
  font-size: var(--zy-type-body-md-size); line-height: var(--zy-type-body-md-lh); font-weight: var(--zy-font-weight-medium);
  white-space: nowrap;
  transition: background-color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard), border-color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard), color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard);
}
.btn .icon { transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.btn:hover .icon { transform: translateX(3px); }
.btn:focus-visible { border-radius: var(--zy-radius-full); }
.btn--sm { height: 2.25rem; padding-inline: var(--zy-space-4); font-size: var(--zy-type-body-sm-size); }
.btn--sm .icon { width: 1rem; height: 1rem; }
.btn--lg { height: 3.25rem; padding-inline: var(--zy-space-6); }
.btn--primary { background: var(--zy-color-action-primary-bg); color: var(--zy-color-action-primary-fg); }
.btn--primary:hover { background: var(--zy-color-action-primary-bg-hover); }
.btn--primary:active { background: var(--zy-color-action-primary-bg-active); }
.btn--secondary { border-color: var(--zy-color-action-secondary-border); color: var(--zy-color-action-secondary-fg); }
.btn--secondary:hover { background: var(--zy-color-action-secondary-bg-hover); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--zy-space-2); min-height: 2.75rem;
  color: var(--zy-color-action-tertiary-fg); font-weight: var(--zy-font-weight-medium);
  transition: color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard);
}
.link-arrow .icon { transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.link-arrow:hover { color: var(--zy-color-action-tertiary-fg-hover); text-decoration: underline; text-underline-offset: 4px; }
.link-arrow:hover .icon { transform: translateX(4px); }
.link-arrow--inverse { color: var(--zy-color-brand-300); }
.link-arrow--inverse:hover { color: var(--zy-color-neutral-0); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zy-space-3) var(--zy-space-6); }

.eyebrow { display: inline-flex; align-items: center; gap: var(--zy-space-3); color: var(--zy-color-text-secondary); }
.eyebrow::before { content: ""; width: var(--zy-space-6); height: 1px; background: var(--zy-color-signal-node); }

.tag-conditional {
  font-size: var(--zy-type-caption-size); line-height: var(--zy-type-caption-lh); font-weight: var(--zy-font-weight-regular);
  color: var(--zy-color-text-tertiary);
  border: var(--zy-border-hairline) solid var(--zy-color-border-default);
  border-radius: var(--zy-radius-full); padding: 0 var(--zy-space-2);
}

.concept-marker {
  display: inline-flex; align-items: center; gap: var(--zy-space-2);
  padding: var(--zy-space-1) var(--zy-space-3);
  border: var(--zy-border-hairline) dashed var(--zy-color-signal-line);
  border-radius: var(--zy-radius-full);
  color: var(--zy-color-text-signal-on-tint);
  background: var(--zy-color-surface-signal);
}
.concept-marker .icon { width: 1rem; height: 1rem; }

.chip {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding-inline: var(--zy-space-3);
  border: var(--zy-border-hairline) solid var(--zy-color-border-default);
  border-radius: var(--zy-radius-full); color: var(--zy-color-text-tertiary);
}

/* ------------------------------------------------------ Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 70; pointer-events: none; }
.scroll-progress span { display: block; height: 100%; background: var(--zy-color-signal-node); transform-origin: left; transform: scaleX(0); }

/* ------------------------------------------------------ Header (§14) */
/* Frosted-glass header: content stays softly visible as it scrolls beneath.
   Restrained — one surface, light frost, hairline edge; solid fallback below. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--zy-nav-height);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: var(--zy-border-hairline) solid rgba(255, 255, 255, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
  transition: background var(--zy-motion-duration-component) var(--zy-motion-easing-standard), border-color var(--zy-motion-duration-component) var(--zy-motion-easing-standard), box-shadow var(--zy-motion-duration-component) var(--zy-motion-easing-standard);
}
.site-header[data-scrolled="true"] {
  background: rgba(255, 255, 255, 0.72);
  border-bottom-color: rgba(20, 13, 20, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 10px 30px -18px rgba(38, 8, 34, 0.28);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .site-header[data-scrolled="true"] { background: rgba(255, 255, 255, 0.97); }
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--zy-space-6); }
/* Logo — always black, never recoloured */
.logo { display: block; width: auto; color: var(--zy-color-logo); }
.logo--header { height: 2rem; }
.logo--footer { height: 2.5rem; }
@media (min-width: 64em) { .logo--header { height: 2.25rem; } }
.brand { display: inline-flex; align-items: center; min-height: 2.75rem; }
.wordmark { display: inline-block; font-family: var(--zy-font-display); padding-block: var(--zy-space-2); font-size: 1.25rem; line-height: 1; font-weight: var(--zy-font-weight-semibold); letter-spacing: 0.24em; }

.primary-nav { display: none; }
.primary-nav__list { display: flex; align-items: center; gap: var(--zy-space-1); }
.nav-link {
  position: relative; display: inline-flex; align-items: center; gap: var(--zy-space-1);
  height: 2.75rem; padding-inline: var(--zy-space-3);
  font-size: var(--zy-type-body-sm-size); line-height: var(--zy-type-body-sm-lh); font-weight: var(--zy-font-weight-medium);
  border-radius: var(--zy-radius-sm);
}
.nav-link .icon { width: 1rem; height: 1rem; transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.nav-link[aria-expanded="true"] .icon { transform: rotate(180deg); }
.nav-link::after {
  content: ""; position: absolute; left: var(--zy-space-3); right: var(--zy-space-3); bottom: var(--zy-space-2);
  height: var(--zy-border-emphasis); background: var(--zy-color-border-signal);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard);
}
.nav-link:hover::after, .nav-link[aria-expanded="true"]::after { transform: scaleX(1); }

.site-header__actions { display: flex; align-items: center; gap: var(--zy-space-2); }
.menu-button { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: var(--zy-radius-full); }
.menu-button:hover { background: var(--zy-color-surface-subtle); }
.menu-button .icon { width: 1.5rem; height: 1.5rem; }

@media (min-width: 64em) {
  .primary-nav { display: block; }
  .menu-button { display: none; }
}
/* Compact header below 480 (validation finding F3) */
@media (max-width: 29.99em) {
  .site-header__inner { gap: var(--zy-space-3); }
  .site-header__actions { gap: 0; }
  .site-header .wordmark { letter-spacing: 0.16em; font-size: 1.125rem; }
  .site-header .btn--sm { padding-inline: var(--zy-space-3); }
  .site-header .btn--sm .icon { display: none; }
}

/* Mega menu (§14.4) */
.mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255, 255, 255, 0.985);   /* a nested panel can't re-blur the page, so the menu stays near-solid for legible text */
  border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle);
  border-radius: 0 0 var(--zy-radius-lg) var(--zy-radius-lg);
  box-shadow: var(--zy-elevation-2);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity var(--zy-motion-duration-component) var(--zy-motion-easing-standard), transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard), visibility 0s linear var(--zy-motion-duration-component);
}
.mega[data-open="true"] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Desktop-only: visibility:hidden still occupies layout, so remove it from the
   box tree below lg where its trigger (.primary-nav) does not exist. */
@media (max-width: 63.99em) { .mega { display: none; } }
.mega__inner { padding-block: var(--zy-space-10); row-gap: var(--zy-space-6); }
.mega__intro > * + * { margin-top: var(--zy-space-3); }
.mega__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--zy-space-2) var(--zy-grid-gutter); }
.mega__link { display: block; padding: var(--zy-space-4); border-radius: var(--zy-radius-md); transition: background-color var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.mega__link:hover { background: var(--zy-color-surface-subtle); }
.mega__link strong { display: flex; align-items: center; gap: var(--zy-space-2); font-weight: var(--zy-font-weight-medium); }
.mega__link span { display: block; margin-top: var(--zy-space-1); color: var(--zy-color-text-secondary); }

/* Mobile navigation (§14.5) */
.mobile-nav { position: fixed; inset: 0; z-index: 80; visibility: hidden; }
.mobile-nav[data-open="true"] { visibility: visible; }
.mobile-nav__scrim { position: absolute; inset: 0; background: var(--zy-color-surface-overlay-scrim); opacity: 0; transition: opacity var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.mobile-nav__panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(100%, 26rem);
  display: flex; flex-direction: column;
  background: var(--zy-color-surface-page); box-shadow: var(--zy-elevation-3);
  transform: translateX(100%); transition: transform var(--zy-motion-duration-section) var(--zy-motion-easing-standard);
}
.mobile-nav[data-open="true"] .mobile-nav__scrim { opacity: 1; }
.mobile-nav[data-open="true"] .mobile-nav__panel { transform: none; }
.mobile-nav__head { height: var(--zy-nav-height); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--zy-grid-margin); border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.mobile-nav__body { flex: 1; overflow-y: auto; padding: var(--zy-space-2) var(--zy-grid-margin); }
.mobile-nav__row {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 3.5rem;
  border-bottom: var(--zy-border-hairline) solid var(--zy-color-border-subtle);
  font-size: var(--zy-type-heading-5-size); line-height: var(--zy-type-heading-5-lh); font-weight: var(--zy-font-weight-medium);
}
.mobile-nav__row .icon { transition: transform var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }
.mobile-nav__row[aria-expanded="true"] .icon { transform: rotate(180deg); }
.mobile-nav__sub { display: none; padding-block: var(--zy-space-2) var(--zy-space-4); }
.mobile-nav__sub[data-open="true"] { display: block; }
.mobile-nav__sub a { display: flex; align-items: center; gap: var(--zy-space-2); min-height: 3rem; padding-left: var(--zy-space-4); color: var(--zy-color-text-secondary); border-left: var(--zy-border-hairline) solid var(--zy-color-border-default); }
.mobile-nav__foot { padding: var(--zy-space-4) var(--zy-grid-margin) var(--zy-space-6); border-top: var(--zy-border-hairline) solid var(--zy-color-border-subtle); }
.mobile-nav__foot .btn { width: 100%; }

/* ------------------------------------------ Media placeholder (§18.4, §20.6) */
.media-ph {
  position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 0;
  border-radius: var(--zy-radius-md); overflow: hidden;
  background-color: var(--zy-color-surface-subtle);
  background-image:
    linear-gradient(var(--zy-color-border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--zy-color-border-subtle) 1px, transparent 1px);
  background-size: 48px 48px;
  background-position: -1px -1px;
  border: var(--zy-border-hairline) solid var(--zy-color-border-subtle);
  display: grid; place-items: center;
  transition: background-position var(--zy-motion-duration-story) var(--zy-motion-easing-standard);
}
.media-ph--portrait { aspect-ratio: 4 / 5; }
.media-ph--photo { aspect-ratio: 3 / 2; }
.media-ph--wide { aspect-ratio: 16 / 9; }
.media-ph--fill { aspect-ratio: auto; height: 100%; min-height: 18rem; border-radius: 0; border: 0; }
.media-ph__crop { position: absolute; width: 14px; height: 14px; border-color: var(--zy-color-neutral-400); border-style: solid; border-width: 0; }
.media-ph__crop--tl { top: 12px; left: 12px; border-top-width: 1px; border-left-width: 1px; }
.media-ph__crop--tr { top: 12px; right: 12px; border-top-width: 1px; border-right-width: 1px; }
.media-ph__crop--bl { bottom: 12px; left: 12px; border-bottom-width: 1px; border-left-width: 1px; }
.media-ph__crop--br { bottom: 12px; right: 12px; border-bottom-width: 1px; border-right-width: 1px; }
.media-ph__label {
  display: inline-flex; align-items: center; gap: var(--zy-space-2);
  max-width: calc(100% - 4rem);
  padding: var(--zy-space-1) var(--zy-space-3);
  border-radius: var(--zy-radius-full);
  background: var(--zy-color-surface-page); color: var(--zy-color-text-placeholder-content);
  border: var(--zy-border-hairline) dashed var(--zy-color-border-signal);
}
.media-ph__label .icon { width: 1rem; height: 1rem; }
.media-ph--inverse {
  background-color: var(--zy-color-neutral-900);
  background-image:
    linear-gradient(var(--zy-color-neutral-800) 1px, transparent 1px),
    linear-gradient(90deg, var(--zy-color-neutral-800) 1px, transparent 1px);
}
.media-ph--inverse .media-ph__crop { border-color: var(--zy-color-neutral-600); }
.media-ph--inverse .media-ph__label { background: var(--zy-color-neutral-950); color: var(--zy-color-brand-300); border-color: var(--zy-color-brand-300); }

/* ---------------------------------------------------------- Metric (§17) */
.metric { display: flex; flex-direction: column; gap: var(--zy-space-1); }
.metric__label { order: 2; color: var(--zy-color-text-primary); }
.metric__value { order: 1; font-size: var(--zy-type-heading-1-size); line-height: var(--zy-type-heading-1-lh); letter-spacing: var(--zy-tracking-heading-1); font-weight: var(--zy-font-weight-medium); }
.metric__source { order: 3; color: var(--zy-color-text-secondary); }
.metric[data-status="placeholder"] .metric__value { color: var(--zy-color-text-placeholder-content); font-weight: var(--zy-font-weight-regular); }

/* ---------------------------------------------------- Graphic classes (§19) */
.gfx { width: 100%; height: auto; overflow: visible; }
.g-structure { stroke: var(--zy-color-structure-line); stroke-width: 1; fill: none; }
.g-tickline { stroke: var(--zy-color-neutral-400); stroke-width: 1; }
.g-grid { stroke: var(--zy-color-signal-line-decorative); stroke-width: 1; }
.g-edge { stroke: var(--zy-color-signal-line-decorative); stroke-width: 1; fill: none; }
.g-plane { stroke: var(--zy-color-signal-line); stroke-width: 1; }
.g-plane--base { fill: var(--zy-color-brand-50); }
.g-plane--mid { fill: var(--zy-color-surface-page); fill-opacity: 0.74; }
.g-plane--top { fill: var(--zy-color-surface-page); fill-opacity: 0.88; }
.g-flow { stroke: var(--zy-color-signal-node); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.g-flow--thin { stroke-width: 1.25; }
.g-node { fill: var(--zy-color-signal-node); }
.g-node-ring { fill: var(--zy-color-surface-page); stroke: var(--zy-color-signal-line); stroke-width: 1; }
.g-node-inactive { fill: var(--zy-color-surface-page); stroke: var(--zy-color-signal-node-inactive); stroke-width: 1; }
.g-halo { fill: var(--zy-color-signal-halo); }
.g-geo { fill: var(--zy-color-surface-page); stroke: var(--zy-color-neutral-400); stroke-width: 1; }
.g-geo-frame { fill: none; stroke: var(--zy-color-signal-line); stroke-width: 1; }
.g-tick { fill: var(--zy-color-text-secondary); font-family: var(--zy-font-display); font-size: 12px; letter-spacing: 0.16em; }
.g-label { fill: var(--zy-color-text-primary); font-family: var(--zy-font-display); font-size: 15px; font-weight: var(--zy-font-weight-medium); }
.g-rib { stroke: var(--zy-color-border-default); stroke-width: 1; fill: none; }
.g-dot { fill: var(--zy-color-neutral-300); }
.g-surface { stroke: var(--zy-color-border-default); stroke-width: 1; }
.g-surface--light { fill: var(--zy-color-surface-page); }
.g-surface--mid { fill: var(--zy-color-neutral-50); }
.g-surface--deep { fill: var(--zy-color-neutral-100); }
.g-sky-top { stop-color: var(--zy-color-brand-50); }
.g-sky-bottom { stop-color: var(--zy-color-surface-page); }
.g-horizon { stroke: var(--zy-color-signal-line-decorative); stroke-width: 1; }
.g-floor { stroke: var(--zy-color-border-subtle); stroke-width: 1; }
.g-ring { fill: none; stroke: var(--zy-color-border-default); stroke-width: 1; stroke-dasharray: 2 6; }
.g-ring--inner { stroke: var(--zy-color-signal-line-decorative); stroke-dasharray: none; }
.g-line-conceptual { stroke: var(--zy-color-signal-line); stroke-width: 1; stroke-dasharray: 4 4; transition: stroke var(--zy-motion-duration-micro) var(--zy-motion-easing-standard), stroke-width var(--zy-motion-duration-micro) var(--zy-motion-easing-standard); }
.g-hub { fill: var(--zy-color-surface-page); stroke: var(--zy-color-signal-node); stroke-width: 1.5; }
.g-hub-inner { fill: var(--zy-color-surface-signal); stroke: var(--zy-color-signal-line-decorative); stroke-width: 1; }
.g-hub-label { fill: var(--zy-color-text-primary); font-family: var(--zy-font-display); font-size: 14px; font-weight: var(--zy-font-weight-medium); letter-spacing: 0.2em; }
.g-leader { stroke: var(--zy-color-neutral-400); stroke-width: 1; }
.g-layer { fill: var(--zy-color-surface-page); transition: fill var(--zy-motion-duration-component) var(--zy-motion-easing-standard); }

/* ---------------------------------------------------- Prototype controls */
.proto-bar {
  position: fixed; right: var(--zy-space-4); bottom: var(--zy-space-4); z-index: 60;
  display: flex; align-items: center; gap: var(--zy-space-3);
  max-width: calc(100vw - 2 * var(--zy-space-4));
  padding: var(--zy-space-2) var(--zy-space-2) var(--zy-space-2) var(--zy-space-4);
  background: var(--zy-color-surface-raised); color: var(--zy-color-text-secondary);
  border: var(--zy-border-hairline) solid var(--zy-color-border-default);
  border-radius: var(--zy-radius-full); box-shadow: var(--zy-elevation-2);
}
.proto-bar__label strong { color: var(--zy-color-text-primary); font-weight: var(--zy-font-weight-medium); }
.proto-toggle {
  display: inline-flex; align-items: center; gap: var(--zy-space-2); min-height: 2.25rem; padding: 0 var(--zy-space-3);
  border-radius: var(--zy-radius-full); border: var(--zy-border-hairline) solid var(--zy-color-border-default);
  color: var(--zy-color-text-primary); font-weight: var(--zy-font-weight-medium);
}
.proto-toggle__dot { width: 0.5rem; height: 0.5rem; border-radius: var(--zy-radius-full); background: var(--zy-color-neutral-400); }
.proto-toggle[aria-pressed="true"] { border-color: var(--zy-color-border-signal); color: var(--zy-color-text-signal-on-tint); background: var(--zy-color-surface-signal); }
.proto-toggle[aria-pressed="true"] .proto-toggle__dot { background: var(--zy-color-signal-node); }
@media (max-width: 29.99em) { .proto-bar__label span { display: none; } }
.proto-bar[hidden] { display: none; }
/* Smallest phones (< 360): brand + menu only; the primary CTA lives in the
   hero and the mobile menu footer, so nothing is lost. */
@media (max-width: 22.49em) { .site-header__actions > .btn { display: none; } }
/* 1024–1279: tighter primary nav so six labels + actions fit */
@media (min-width: 64em) and (max-width: 79.99em) {
  .site-header__inner { gap: var(--zy-space-4); }
  .nav-link { padding-inline: var(--zy-space-2); }
}