/* wasiq — shared components. Consumes tokens.css + base.css only. */

/* ---- layout shell: the blueprint frame ---- */
.frame {
  max-width: var(--size-container);
  margin: 0 auto;
  border-left: var(--border-hairline) solid var(--color-border);
  border-right: var(--border-hairline) solid var(--color-border);
  min-height: 100vh;
}
.section {
  padding: var(--space-rhythm);
  border-bottom: var(--border-hairline) solid var(--color-border);
}
.section--flush { padding: 0; }

/* ---- nav ---- */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-rhythm);
  background: transparent;
  transition: background-color var(--duration-fast) var(--ease-out-quint), border-color var(--duration-fast) var(--ease-out-quint);
  border-bottom: var(--border-hairline) solid transparent;
}
.nav.is-scrolled {
  background: var(--color-surface);
  border-bottom-color: var(--color-border);
}
.nav__logo { height: var(--space-6); width: auto; }
.nav > a { display: inline-flex; align-items: center; min-height: var(--size-target-min); }
.nav__logo--light-only, :root[data-theme="dark"] .nav__logo--dark-only { display: block; }
.nav__actions { display: flex; gap: var(--space-3); align-items: center; }
/* theme-aware logo swap: dark shows negative (white) logo, light shows dark logo */
.logo-dark { display: none; }
.logo-negative { display: block; }
:root[data-theme="light"] .logo-dark { display: block; }
:root[data-theme="light"] .logo-negative { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-dark { display: block; }
  :root:not([data-theme="dark"]) .logo-negative { display: none; }
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-none);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-out-quint), color var(--duration-fast) var(--ease-out-quint), border-color var(--duration-fast) var(--ease-out-quint);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-button-primary-bg); color: var(--color-button-primary-text); }
.btn--primary:hover { background: transparent; color: var(--color-text-emphasis); border-color: var(--color-border-strong); }
.btn--secondary { background: transparent; color: var(--color-text-emphasis); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-button-primary-bg); color: var(--color-button-primary-text); }
.btn--chip { background: var(--color-chip-bg); color: var(--color-chip-text); }
.btn--chip:hover { background: var(--color-accent-hover); }
.btn[disabled] { background: var(--color-surface-raised); color: var(--color-text-muted); border-color: transparent; cursor: not-allowed; transform: none; }
.btn--inverse { background: var(--color-text-inverse-primary); color: var(--color-surface-card); }
.btn--inverse:hover { background: transparent; color: inherit; border-color: currentColor; }

/* ---- links ---- */
.link {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 0.2em;
  transition: color var(--duration-fast) var(--ease-out-quint), text-decoration-color var(--duration-fast) var(--ease-out-quint);
}
.link:hover { color: var(--color-text-emphasis); text-decoration-color: var(--color-border-strong); }

/* ---- inverse card ---- */
.card {
  background: var(--color-surface-card);
  color: var(--color-text-inverse-primary);
  padding: var(--space-7);
  max-width: 33.75rem;
}
.card .t-caption { color: var(--color-text-inverse-muted); }
.card > * + * { margin-top: var(--space-4); }

/* ---- media well ---- */
.media-well {
  position: relative;
  background: var(--palette-gray-1000);
  border: var(--border-hairline) solid var(--color-border);
  overflow: hidden;
}
.media-well img, .media-well video, .media-well canvas { width: 100%; height: 100%; object-fit: cover; }
.media-well__caption {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-top: var(--border-hairline) solid var(--color-border);
  background: var(--palette-gray-1000);
  color: var(--palette-gray-500);
}

/* ---- quote ---- */
.quote { max-width: var(--size-container-text); }
.quote__glyph { font-family: var(--font-display); font-size: var(--text-h1-size); color: var(--color-text-muted); line-height: 1; }
.quote__body { margin-top: var(--space-4); color: var(--color-text-primary); }
.quote__attr { margin-top: var(--space-5); }
.quote__source { color: var(--color-text-emphasis); font-weight: var(--text-body-weight); }

/* ---- logo rail ---- */
.logo-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }
.logo-rail a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--space-9);
  padding: var(--space-4);
  border: var(--border-hairline) solid var(--color-border);
  margin: 0 0 calc(-1 * var(--border-hairline)) calc(-1 * var(--border-hairline));
  opacity: 1;
  transition: opacity var(--duration-fast) var(--ease-out-quint);
}
.logo-rail a:hover, .logo-rail a:focus-visible { opacity: 1; }
.logo-rail img { max-height: 34px; width: auto; max-width: 75%; }
/* press logos are white SVGs — invert for light surface */
.logo-rail--press img { filter: none; }
:root[data-theme="light"] .logo-rail--press img { filter: invert(1) hue-rotate(180deg); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-rail--press img { filter: invert(1) hue-rotate(180deg); }
}
/* investor logos are dark SVGs — invert for dark surface */
.logo-rail--darklogos img { filter: invert(1) hue-rotate(180deg); }
:root[data-theme="light"] .logo-rail--darklogos img { filter: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .logo-rail--darklogos img { filter: none; }
}

/* ---- footer ---- */
.footer { padding: var(--space-rhythm); border-top: var(--border-hairline) solid var(--color-border); }
.footer__grid { display: flex; flex-wrap: wrap; gap: var(--space-rhythm); justify-content: space-between; align-items: flex-start; }
.footer__links { display: flex; flex-direction: column; gap: var(--space-2); }
.footer__links a { text-decoration: none; color: var(--color-text-muted); transition: color var(--duration-fast) var(--ease-out-quint); display: inline-flex; align-items: center; min-height: var(--size-target-min); }
.footer__links a:hover { color: var(--color-text-emphasis); }
.footer__legal { margin-top: var(--space-rhythm); color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: var(--space-4); }

/* ---- long-form shell ---- */
.longform { max-width: var(--size-container-text); margin: 0 auto; padding: var(--space-rhythm) var(--space-4); }
.longform h1 { margin-bottom: var(--space-5); }
.longform h2 { margin: var(--space-6) 0 var(--space-3); }
.longform p, .longform li { font-size: var(--text-body-lg-size); line-height: var(--text-body-lg-line); margin-bottom: var(--space-3); }

/* ---- inputs ---- */
.input {
  min-height: var(--size-target-min);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-sm);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus { border-color: var(--color-border-strong); }
.input--error { border-color: var(--color-danger); }
.input-msg { margin-top: var(--space-1); color: var(--color-danger); }

@media (max-width: 768px) {
  .section, .nav, .footer { padding-left: var(--space-4); padding-right: var(--space-4); }
  .card { padding: var(--space-5); max-width: none; }
}

/* ---- ASCII engine mounts (.ascii-placeholder → .canvas-container) ---- */
/* engine sets inline position:relative on its container — absolute-fill must win */
[data-ascii] .canvas-container { position: absolute !important; inset: 0; }
[data-ascii] .video-container { position: absolute; top: 0; left: 0; width: 16rem; opacity: 0; pointer-events: none; }
[data-ascii] .video-container video { width: 100%; height: auto; }
[data-ascii] .ascii-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }