/* One control system for the campaign, collection, posters and disclosure. */
:root {
  --control-radius: 10px;
  --control-height: 52px;
  --control-compact: 44px;
  --control-color-time: 180ms;
  --control-move-time: 260ms;
  --control-ease: cubic-bezier(.22,.68,0,1);
}

body[data-page] {
  --control-ink: #181d20;
  --control-tone: #20242708;
  --control-tone-hover: #20242710;
  --control-stroke: #20242724;
  --control-focus: #bd2332;
}

body[data-page] :is(.kol-section, dialog, .poster-card) {
  --control-ink: #f5f6f6;
  --control-tone: #ffffff08;
  --control-tone-hover: #ffffff14;
  --control-stroke: #b9c7cf45;
  --control-focus: #ff9eaa;
}

body[data-nav-theme="dark"] .site-header {
  --control-ink: #f5f6f6;
  --control-tone: #ffffff08;
  --control-tone-hover: #ffffff18;
  --control-stroke: #b9c7cf45;
  --control-focus: #ff9eaa;
}

body[data-page] .closing-campaign { --control-focus: #fff; }

/* X is a local mask so every surface supplies its own ink. */
.x-icon {
  display: inline-block;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url('/assets/icons/x.svg') center / contain no-repeat;
  mask: url('/assets/icons/x.svg') center / contain no-repeat;
  transition: transform var(--control-move-time) var(--control-ease);
}
body[data-page] .x-link { display: inline-flex; align-items: center; gap: 8px; }
body[data-page] :is(.button,.nav-action) .x-label { font-size: inherit; line-height: inherit; }
body[data-page] .wanted-tweet .x-label > span { font-size: inherit; line-height: inherit; }
body[data-page] .x-label-short { display: none; }

body[data-page] :is(.button,.nav-action,.x-social),
body[data-page] .support-options button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--control-height);
  max-width: 100%;
  border: 1px solid transparent;
  border-radius: var(--control-radius);
  padding: 14px 20px;
  font-family: var(--body);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.01em;
  text-decoration: none;
  transform: translateY(0);
  transition:
    background-color var(--control-color-time),
    color var(--control-color-time),
    border-color var(--control-color-time),
    box-shadow var(--control-color-time),
    transform var(--control-move-time) var(--control-ease);
}

body[data-page] .button-red {
  color: #fff;
  background: #bd2332;
  border-color: #bd2332;
  box-shadow: inset 0 1px 0 #ffffff24, 0 3px 8px #851b2214;
}
body[data-page] .button-ink { color: #fff; background: #202427; border-color: #202427; }
body[data-page] .button-light { color: #181d20; background: #f5f6f6; border-color: #f5f6f6; }
body[data-page] .button-outline {
  color: var(--control-ink);
  background: transparent;
  border-color: var(--control-stroke);
}
body[data-page] .hero-cta { min-height: 58px; padding-inline: 24px; }
body[data-page] .target-tweet { justify-content: center; width: 100%; }

body[data-page] .site-header :is(.nav-action,.x-social) {
  min-height: var(--control-compact);
  padding: 10px 16px;
  font-size: 14px;
  white-space: nowrap;
}
body[data-page] .site-header .nav-action {
  color: #f5f6f6;
  background: #202427;
  border-color: #202427;
}
body[data-nav-theme="dark"] .site-header .nav-action {
  color: #181d20;
  background: #f5f6f6;
  border-color: #f5f6f6;
}
body[data-page] .x-social {
  justify-content: center;
  color: var(--control-ink);
  background: var(--control-tone);
  border-color: var(--control-stroke);
  gap: 10px;
  min-height: var(--control-compact);
  padding: 10px 14px;
  font-size: 14px;
}
body[data-page] .site-header > .social-links .x-social { width: 44px; padding: 10px; }
body[data-page] .button > [aria-hidden="true"]:not(.x-icon),
body[data-page] .nav-action .nav-arrow {
  display: inline-block;
  font-size: 20px;
  line-height: 1;
  transition: transform var(--control-move-time) var(--control-ease);
}

/* Compact actions are buttons; destinations remain quieter text links. */
body[data-page] :is(.text-button,.text-link) {
  min-height: var(--control-compact);
  border-radius: var(--control-radius);
  font-family: var(--body);
  font-size: 14px;
  line-height: 1.4;
  transition: color var(--control-color-time), background-color var(--control-color-time),
    border-color var(--control-color-time), box-shadow var(--control-color-time),
    transform var(--control-move-time) var(--control-ease);
}
body[data-page] :is(.target-console,.holders-topline,.footer-links,.mobile-menu,.site-header) button.text-button,
body[data-page] .contact-control > .text-button {
  color: var(--control-ink);
  background: var(--control-tone);
  border: 1px solid var(--control-stroke);
  padding: 10px 12px;
  gap: 8px;
  text-decoration: none;
}
body[data-page] .intake-file-link { text-decoration: none; }
body[data-page] .target-console-top .text-button { min-width: 76px; }
body[data-page] .invitation-controls { gap: 12px; }
body[data-page] .invitation-footer { gap: 12px; margin-top: 12px; }
body[data-page] .support-options { display: grid; gap: 10px; }
body[data-page] .support-options button {
  min-height: 48px;
  color: var(--control-ink);
  background: var(--control-tone);
  border-color: var(--control-stroke);
  padding: 12px 16px;
  font-size: 16px;
  text-align: left;
}
body[data-page] .close-button {
  width: 44px;
  height: 44px;
  min-height: 44px;
  border: 1px solid var(--control-stroke);
  border-radius: var(--control-radius);
  color: #f5f6f6;
  background: var(--control-tone);
  line-height: 1;
  transition: background-color var(--control-color-time), transform var(--control-move-time) var(--control-ease);
}

body[data-page] .kol-card > .kol-tweet,
body[data-page] .capture-card > .kol-tweet {
  justify-content: center;
  min-height: var(--control-compact);
  gap: 8px;
  padding: 10px 12px;
  border-radius: var(--control-radius);
  font-size: 14px;
  line-height: 1.35;
}
body[data-page] .kol-card > .kol-tweet {
  background: #ffffff08;
  color: #f5f6f6;
  border-color: #b9c7cf45;
  box-shadow: none;
}
body[data-page="collection"] .capture-card > .kol-tweet {
  color: #fff;
  background: #202427;
  border-color: #202427;
}
body[data-page] .wanted-tweet { min-height: var(--control-height); justify-content: center; font-size: 14px; }
body[data-page] :is(.kol-account,.capture-handle,.poster-handle,.target-identity > a) { gap: 7px; }
body[data-page] :is(.kol-account,.capture-handle) .x-icon { flex-basis: 13px; width: 13px; height: 13px; }

/* Fields share the same silhouette, with a larger frame only for panels. */
body[data-page] :is(.intake-choice select,.invitation-controls select,.intake-wallet-field input,.vault-search input) {
  min-height: 48px;
  height: auto;
  border-radius: var(--control-radius);
  font-size: 16px;
  padding: 12px;
  transition: border-color var(--control-color-time), box-shadow var(--control-color-time);
}
body[data-page] .target-console :is(select,input) { color-scheme: dark; }
body[data-page] .contract-field { border-radius: var(--control-radius); }
body[data-page] .contract-field .button {
  min-height: var(--control-compact);
  border-radius: var(--control-radius);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--control-ink);
  border-color: var(--control-stroke);
}

/* Quiet interactions preserve the editorial dividing lines. */
body[data-page] :is(.site-header nav a,.kol-poster,.intake-file-link,.footer-links > a,.chapter-label > a) {
  border-radius: var(--control-radius);
  transition: color var(--control-color-time), background-color var(--control-color-time),
    text-decoration-color var(--control-color-time);
  text-underline-offset: 5px;
}
body[data-page] :is(.site-header nav a,.footer-links > a) { padding-inline: 8px; }
body[data-page] .site-header nav { gap: 14px; }
body[data-page] .footer-links { gap: 10px 12px; align-items: center; }
body[data-page] .footer-links .contact-control { flex-wrap: wrap; }
body[data-page] .contact-status { flex-basis: 100%; max-width: 40ch; font-size: 14px; }
body[data-page] .kol-identity { border-radius: var(--control-radius); }
body[data-page] .kol-portrait,
body[data-page] .wanted-portrait,
body[data-page="collection"] .capture-avatar { border-radius: var(--control-radius); }
body[data-page] .kol-identity:focus-visible { border-radius: var(--control-radius); }
body[data-page] :is(.post-preview,.kol-evidence,.holder-ledger,.market-details,.market-chart,.wanted-dossier,.faq-grid details,.photo-credits,.archive-proof) > summary {
  min-height: 48px;
  border-radius: var(--control-radius);
  transition: color var(--control-color-time), box-shadow var(--control-color-time);
}
body[data-page] :is(.faq-grid details,.archive-proof) > summary { min-height: 62px; }
body[data-page] details > summary > span[aria-hidden="true"] {
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  transition: transform var(--control-move-time) var(--control-ease);
}
body[data-page] .mobile-menu > summary {
  min-width: 44px;
  border: 1px solid var(--control-stroke);
  border-radius: var(--control-radius);
  background: var(--control-tone);
}
body[data-page] :is(a,button,summary,input,select):focus-visible {
  outline: 2px solid var(--control-focus);
  outline-offset: 4px;
}
body[data-page] .contact-control > .text-button:focus-visible {
  outline-color: var(--control-focus);
  border-radius: var(--control-radius);
}

/* Pointer feedback is deliberate: a lift, a glint in the edge and moving icon. */
@media (hover: hover) and (pointer: fine) {
  body[data-page] :is(.button,.nav-action,.x-social,.support-options button):hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-2px);
    box-shadow: inset 0 1px 0 #ffffff38, 0 6px 16px #11192018;
  }
  body[data-page] :is(.button-red,.kol-card > .kol-tweet,.capture-card > .kol-tweet):hover:not(:disabled):not([aria-disabled="true"]) {
    background: #a61928;
    border-color: #a61928;
    color: #fff;
  }
  body[data-page] .site-header .nav-action:hover:not(:disabled):not([aria-disabled="true"]) { color: #fff; background: #bd2332; border-color: #bd2332; }
  body[data-page] .button-ink:hover:not([aria-disabled="true"]) { background: #343c42; border-color: #343c42; }
  body[data-page] .button-light:hover:not(:disabled):not([aria-disabled="true"]) { color: #181d20; background: #fff; border-color: #fff; }
  body[data-page] :is(.button-outline,.x-social,.support-options button,.close-button):hover:not(:disabled):not([aria-disabled="true"]) {
    background: var(--control-tone-hover);
    border-color: var(--control-focus);
    color: var(--control-ink);
  }
  body[data-page] :is(.target-console,.holders-topline,.footer-links,.mobile-menu,.site-header) button.text-button:hover:not(:disabled),
  body[data-page] .contact-control > .text-button:hover:not(:disabled) {
    background: var(--control-tone-hover);
    border-color: var(--control-focus);
    transform: translateY(-1px);
  }
  body[data-page] .x-link:hover:not(:disabled):not([aria-disabled="true"]) .x-icon { transform: translateY(-1px) rotate(-6deg); }
  body[data-page] .button:hover:not(:disabled):not([aria-disabled="true"]) > [aria-hidden="true"]:not(.x-icon),
  body[data-page] .nav-action:hover:not(:disabled):not([aria-disabled="true"]) .nav-arrow { transform: translate(2px,-2px); }
  body[data-page] :is(.site-header nav a,.footer-links > a):hover { color: var(--control-focus); background: var(--control-tone-hover); }
  body[data-page] :is(.kol-poster,.intake-file-link,.chapter-label > a):hover { color: var(--control-focus); text-decoration: underline; }
  body[data-page] :is(.post-preview,.kol-evidence,.holder-ledger,.market-details,.market-chart,.wanted-dossier,.faq-grid details,.photo-credits,.archive-proof) > summary:hover {
    color: var(--control-focus);
    box-shadow: inset 0 0 0 100px var(--control-tone);
  }
  body[data-page] :is(select,input:not([readonly])):hover { border-color: var(--control-focus); }
}

body[data-page] :is(.button,.nav-action,.x-social,.support-options button,.text-button,.close-button):active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
  box-shadow: inset 0 1px 3px #11192014;
}
body[data-page] :is(.button,.nav-action,.x-social,.text-button):is(:disabled,[aria-disabled="true"]) {
  opacity: .5;
  transform: none;
  box-shadow: none;
}
body[data-page] .button-red:is(:disabled,[aria-disabled="true"]):hover { background: #bd2332; border-color: #bd2332; }
body[data-page] .button-ink:is(:disabled,[aria-disabled="true"]):hover { background: #202427; border-color: #202427; }
body[data-page] .button-outline:is(:disabled,[aria-disabled="true"]):hover { background: transparent; border-color: var(--control-stroke); }

@media (max-width: 650px) {
  body[data-page] :is(.button,.support-options button) { gap: 10px; padding-inline: 16px; }
  body[data-page] .site-header .nav-action { padding-inline: 12px; }
  body[data-page] .kol-card > .kol-tweet { padding-inline: 10px; }
  body[data-page] .site-header nav { gap: 4px; }
  body[data-page] .footer-links { gap: 10px 8px; }
  body[data-page] .wanted-tweet .x-label-full { display: none; }
  body[data-page] .wanted-tweet .x-label-short { display: inline; }
  body[data-page] .wanted-tweet { white-space: nowrap; }
}
@media (max-width: 360px) {
  body[data-page] .site-header .nav-action { padding-inline: 10px; }
  body[data-page] .kol-card > .kol-tweet { padding-inline: 8px; }
}

/* Both the OS preference and the site's Pause control stop movement. */
body.motions-paused :is(.button,.nav-action,.x-social,.support-options button,.text-button,.close-button),
body.motions-paused .x-icon,
body.motions-paused .button > [aria-hidden="true"],
body.motions-paused .nav-arrow { transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  body[data-page] *, body[data-page] *::before, body[data-page] *::after { transition: none !important; }
  body[data-page] :is(.button,.nav-action,.x-social,.support-options button,.text-button,.close-button,.x-icon),
  body[data-page] .button > [aria-hidden="true"], body[data-page] .nav-arrow { transform: none !important; }
}

/* Readable context beside acquisition links, using the existing type scale. */
.buy-risk { margin: 6px 0; font-family: inherit; font-size: 14px; line-height: 1.4; color: inherit; opacity: .8; }