/* =============================================================
   ZARAS — Access-close shared primitives · access-close.v1.css
   Extracted from index.html's inline <style> (btn + ticket-rail)
   and home-atmosphere (.closing-modules) so BOTH the home close
   (.zc, home-close.v5.css) AND the platform close share ONE
   source of truth — no inline-vs-sheet drift.

   Contains:
     .btn-primary / .btn-ghost            — the dual close CTAs
     .ticket-rail / .ticket* / wire / packet + keyframes
                                          — the 3-step access strip
     .closing-modules / .cm-item          — final capability rail

   Consumes host-page :root tokens (--ink, --signal, --mono,
   --maxw, --gutter, …). Both index.html and platform.html define
   the full token set inline. Section composition (.zc-*) lives in
   home-close.v5.css; per-page CTA wiring lives in the markup.
   ============================================================= */

/* =============================================================
   BUTTONS — primary (filled) + ghost (text). Order preserved from
   the original inline cascade: base → mobile padding → touch
   :active → weightier motion override.
   ============================================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 13px 18px 13px 22px;
  border-radius: 6px;
  background: var(--ink);
  color: #0a0a0a;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 180ms ease;
  border: 1px solid var(--ink);
}
.btn-primary .arr {
  border-left: 1px solid rgba(0,0,0,0.18);
  padding-left: 12px;
  font-family: var(--mono);
}
.btn-primary:hover { background: #fff; }
.btn-primary .arr { transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.btn-primary:hover .arr { transform: translateX(3px); }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  color: var(--ink-sub);
  transition: color 180ms ease;
}
.btn-ghost:hover { color: var(--ink); }
.btn-ghost .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--signal);
}

/* Mobile tap targets — 48px min hit area (WCAG AA). */
@media (max-width: 720px) {
  .btn-primary { padding: 15px 22px 15px 24px; min-height: 48px; }
  .btn-ghost { padding: 14px 8px; min-height: 48px; }
}

/* Touch devices: replace hover states with :active tactile feedback. */
@media (hover: none) {
  .btn-primary:hover,
  .btn-ghost:hover { transform: none; box-shadow: none; }
  .btn-primary:active,
  .btn-ghost:active {
    transform: scale(0.97);
    transition: transform 120ms cubic-bezier(.2,.6,.1,1), background 120ms ease, border-color 120ms ease;
  }
  .btn-primary:active { background: #000; }
}

/* Button hover — make the primary button feel weightier */
.btn-primary {
  transition:
    background 300ms cubic-bezier(.2,.6,.1,1),
    transform 300ms cubic-bezier(.2,.6,.1,1),
    box-shadow 300ms cubic-bezier(.2,.6,.1,1);
  box-shadow: 0 0 0 0 rgba(255,255,255,0);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 24px -12px rgba(255,255,255,0.22),
    0 2px 4px -2px rgba(0,0,0,0.5);
}
.btn-ghost {
  transition: color 300ms ease, border-color 300ms ease, background 300ms ease;
}

/* =========================================================
   PRIVATE-BETA — ticket-rail strip (reused by the close section).
   ========================================================= */

/* --- Ticket rail ---------------------------------------- */
.ticket-rail {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  align-items: stretch;
  gap: 0;
}

.ticket {
  position: relative;
  background: var(--bg-sub);
  border: 1px solid var(--rule);
  padding: 18px 22px 16px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  transition: border-color 200ms ease, background 200ms ease;
}
.ticket:hover { border-color: var(--rule-hi); }

/* Perforated (tear-off) left edge */
.ticket::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 14px;
  border-left: 1px dashed var(--rule-hi);
  opacity: 0.9;
}

/* Ticket header: mono ID + status badge */
.ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.ticket-id { letter-spacing: 0.1em; color: var(--ink-sub); }

.ticket-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 9px;
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
  color: var(--ink-sub);
  background: color-mix(in oklab, var(--bg) 40%, transparent);
}
.ticket-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ink-mute);
  flex-shrink: 0;
}

/* Live state: middle card breathes */
.ticket-status-live {
  color: var(--signal-ink);
  border-color: var(--signal-rule);
  background: var(--signal-weak);
}
.ticket-status-live .dot {
  background: var(--signal);
  box-shadow: 0 0 0 0 var(--signal);
  animation: ticket-pulse 2.4s ease-in-out infinite;
}
@keyframes ticket-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(118,199,178,0.55); }
  50%      { box-shadow: 0 0 0 7px rgba(118,199,178,0); }
}

/* Body: numeral, title, description */
.ticket-body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 20px;
  row-gap: 4px;
  align-items: baseline;
}
.ticket-num {
  grid-row: span 2;
  font-family: var(--mono);
  font-size: clamp(36px, 3.8vw, 46px);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: var(--ink);
  line-height: 0.95;
  align-self: start;
}
.ticket-title {
  font-family: var(--sans);
  font-size: clamp(18px, 1.4vw, 21px);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.ticket-desc {
  grid-column: 2;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-sub);
  margin: 2px 0 0;
  max-width: 34ch;
}

/* Timestamp footer */
.ticket-foot {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 14px;
  margin-top: auto;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tfoot-key {
  color: var(--ink);
  padding: 2px 7px;
  border: 1px solid var(--rule-hi);
  border-radius: 2px;
  background: var(--bg-raise);
}
.tfoot-val { color: var(--ink-mute); }

/* APPROVED rubber-stamp on card 3 */
.ticket-stamp {
  position: absolute;
  top: 52px;
  right: -10px;
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--signal);
  opacity: 0.18;
  transform: rotate(8deg);
  pointer-events: none;
  white-space: nowrap;
  border: 2px solid var(--signal);
  padding: 5px 12px;
  border-radius: 2px;
  line-height: 1;
  text-transform: uppercase;
}

/* --- Connecting wire + traveling packet ----------------- */
.ticket-wire {
  position: relative;
  align-self: center;
  justify-self: stretch;
  height: 1px;
  background: var(--rule-hi);
  overflow: visible;
}
.ticket-wire::before,
.ticket-wire::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--rule-hi);
}
.ticket-wire::before { left: -2.5px; }
.ticket-wire::after { right: -2.5px; }

.ticket-wire .packet {
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px;
  height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 10px rgba(118,199,178,0.7);
  animation: ticket-packet 5.4s linear infinite;
  opacity: 0;
}
.ticket-wire.ticket-wire-b .packet { animation-delay: 2.7s; }
@keyframes ticket-packet {
  0%   { left: -4px;  opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { left: calc(100% + 4px); opacity: 0; }
}

/* --- Responsive: stack on narrow viewports --------------- */
@media (max-width: 960px) {
  .ticket-rail {
    grid-template-columns: 1fr;
  }
  .ticket-wire {
    height: 20px;
    width: 1px;
    justify-self: center;
    background: var(--rule-hi);
  }
  .ticket-wire::before,
  .ticket-wire::after { display: none; }
  .ticket-wire .packet {
    left: 50%;
    top: 0;
    margin-left: -2.5px;
    margin-top: 0;
    animation: ticket-packet-vert 5.4s linear infinite;
  }
  @keyframes ticket-packet-vert {
    0%   { top: -4px;  opacity: 0; }
    8%   { opacity: 1; }
    92%  { opacity: 1; }
    100% { top: calc(100% + 4px); opacity: 0; }
  }
  .ticket-stamp {
    font-size: 17px;
    top: 46px;
    padding: 4px 10px;
  }
}

/* --- Reduced motion: kill pulse + packet motion --------- */
@media (prefers-reduced-motion: reduce) {
  .ticket-status-live .dot,
  .ticket-wire .packet { animation: none; }
  .ticket-wire .packet { opacity: 0.9; left: 50%; margin-left: -2.5px; }
}

/* =============================================================
   CLOSING MODULES — quiet enumeration of what the operating
   layer covers, beneath the CTA. Mono labels, uppercase,
   hairline separators. aria-hidden in markup so the labels don't
   compete with the CTA's accessible name. (Folded in from
   home-atmosphere; .zc .closing-modules overrides live in
   home-close.v5.css.)
   ============================================================= */
.closing-modules {
  margin-top: 72px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.closing-modules .cm-item {
  position: relative;
  padding: 8px 22px 8px 0;
  margin-right: 22px;
  transition: color 240ms ease;
}
.closing-modules .cm-item:last-child {
  padding-right: 0;
  margin-right: 0;
}
.closing-modules .cm-item::after {
  content: "";
  position: absolute;
  right: 0;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: var(--rule-hi);
}
.closing-modules .cm-item:last-child::after { display: none; }
.closing-modules .cm-item:first-child {
  /* First module gets a tiny live-dot prefix so it visually
     hooks onto the completion wire above. */
  padding-left: 14px;
}
.closing-modules .cm-item:first-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--signal);
  opacity: 0.65;
}

@media (max-width: 720px) {
  .closing-modules {
    margin-top: 56px;
    gap: 4px 14px;
    font-size: 10.5px;
    letter-spacing: 0.14em;
  }
  .closing-modules .cm-item {
    padding: 4px 14px 4px 0;
    margin-right: 14px;
  }
}