/*
 * deadkey.net — demo.html page-local styles
 * A purely illustrative, interactive walkthrough (no crypto, no API calls).
 * Reuses site.css tokens/components throughout (.card, .callout, .btn,
 * .step-indicator, .step-dots, utility classes) — only the demo-specific
 * pieces (intro block, step panels, flow diagram, icon badges, countdown
 * bar) live here.
 */

/* ── Intro ─────────────────────────────────────────────────────────── */

.demo-intro {
  padding: var(--space-10) 0 var(--space-6);
}

.demo-intro__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}

.demo-intro__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0 0 var(--space-4);
}

.demo-intro__subhead {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ── Step indicator wrapper ───────────────────────────────────────── */

.demo-progress {
  max-width: 32rem;
  margin: 0 auto var(--space-2);
}

.demo-progress .step-indicator {
  margin-bottom: var(--space-6);
  justify-content: center;
}

.demo-progress .step-indicator__divider {
  flex: 0 0 var(--space-8);
}

/* ── Stage (the card holding all step panels) ─────────────────────── */

.demo-stage {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-8);
}

.demo-step { display: none; }

.demo-step.is-active {
  display: block;
  animation: demo-step-in 320ms ease-out;
}

@keyframes demo-step-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.demo-step__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

.demo-step__title {
  margin-top: 0;
  margin-bottom: var(--space-4);
}

.demo-step__body {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

/* ── Flow diagram (icon badges connected by arrows) ───────────────── */

.demo-flow {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-2);
  margin: var(--space-2) 0 var(--space-6);
}

.demo-flow__node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  width: 8rem;
  text-align: center;
}

.demo-flow__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  line-height: var(--leading-snug);
  margin: 0;
}

.demo-flow__arrow {
  color: var(--color-border-strong);
  flex-shrink: 0;
  align-self: center;
  margin-top: 1.4rem;
}

.demo-flow__arrow .demo-icon-svg {
  width: 20px;
  height: 20px;
}

/* ── Icon badges ───────────────────────────────────────────────────── */

.demo-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-raised);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.demo-icon--lg {
  width: 72px;
  height: 72px;
}

.demo-icon--owner   { background: var(--color-info-bg);    color: var(--color-brand); }
.demo-icon--brand   { background: var(--color-info-bg);    color: var(--color-brand); }
.demo-icon--trusted { background: var(--color-accent-light); color: var(--color-accent); }
.demo-icon--warn    { background: var(--color-warning-bg); color: var(--color-warning-text); }
.demo-icon--danger  { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.demo-icon--success { background: var(--color-success-bg); color: var(--color-success-text); }

.demo-icon-svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.demo-icon--lg .demo-icon-svg {
  width: 32px;
  height: 32px;
}

/* ── Outcome panels ────────────────────────────────────────────────── */

.demo-outcome__icon {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

/* ── Step navigation (Back / Next / branch buttons) ───────────────── */

.demo-nav {
  margin-top: var(--space-6);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  justify-content: space-between;
  flex-wrap: wrap;
}

.demo-nav--center {
  justify-content: center;
}

.demo-nav__forward {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ── Mini sample codebook walkthrough ──────────────────────────────────
   Purely illustrative and independent of the four-step wizard above (its
   own tiny step state, driven by demo.js, not the showStep()/step-dots
   system used for .demo-step). Fixed sample secret ("9152") mapped to
   four fixed grid positions, chosen when this page was authored. Reuses
   .codebook-grid from site.css for the table itself so it matches every
   other grid rendering on the site (Recovery Sheets, codebook-template.html)
   rather than inventing new grid styling here. */

.codebook-demo {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--space-8);
  text-align: center;
}

.codebook-demo__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-2);
}

.codebook-demo__title {
  margin: 0 0 var(--space-3);
}

.codebook-demo__intro {
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
  margin: 0 auto var(--space-6);
  max-width: 48ch;
  text-align: left;
}

/* Sample secret digits */

.codebook-demo__secret {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.codebook-demo__digit {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  transition: border-color var(--transition-base), color var(--transition-base),
    background var(--transition-base);
}

.codebook-demo__digit.is-done {
  color: var(--color-text-muted);
  background: var(--color-surface-raised);
}

.codebook-demo__digit.is-current {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-accent-light);
  animation: codebook-demo-pop 420ms ease-out;
}

.codebook-demo__secret-caption {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-5);
}

/* Decorative "look this up" signal between the secret and the grid.
   Purely visual — the accompanying status text (aria-live) carries the
   actual information for assistive tech. */

.codebook-demo__signal {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-5);
  color: var(--color-border-strong);
}

.codebook-demo__signal .demo-icon-svg {
  width: 20px;
  height: 20px;
  transform: rotate(90deg);
}

.codebook-demo__signal.is-pulsing .demo-icon-svg {
  animation: codebook-demo-signal 560ms ease-out;
  color: var(--color-accent);
}

/* Two-panel stage: the grid on one side, the stored coordinates on the
   other — this pairing IS the split the section is explaining. */

.codebook-demo__stage {
  display: flex;
  gap: var(--space-6);
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  text-align: left;
}

.codebook-demo__grid-wrap,
.codebook-demo__coords-wrap {
  flex: 1 1 18rem;
  min-width: 0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  transition: border-color var(--transition-slow), background var(--transition-slow);
}

.codebook-demo__grid {
  font-size: 0.68rem;
  margin: 0 0 var(--space-2);
}

.codebook-demo__grid th,
.codebook-demo__grid td {
  padding: 0.2em 0.3em;
  width: 1.9em;
}

.codebook-demo__grid td {
  transition: background var(--transition-base), color var(--transition-base);
}

.codebook-demo__grid td.is-found-cell {
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-weight: var(--weight-semibold);
}

.codebook-demo__grid td.is-current-cell {
  position: relative;
  z-index: 1;
  background: var(--color-accent);
  color: var(--color-text-inverted);
  font-weight: var(--weight-bold);
  animation: codebook-demo-cell-pop 480ms ease-out;
}

.codebook-demo__grid-caption,
.codebook-demo__coords-label {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

.codebook-demo__coords {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  align-items: center;
  margin-bottom: var(--space-2);
}

.codebook-demo__coord-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-md);
  border: 2px dashed var(--color-border);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-border-strong);
}

.codebook-demo__coord-chip.is-revealed {
  border-style: solid;
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: var(--color-info-bg);
  animation: codebook-demo-pop 420ms ease-out;
}

/* Final "split" reveal: the two panels take on the same accent colors
   used elsewhere on this page for "trusted person" (sage) vs. "server /
   encrypted" (brand blue) — see .demo-icon--trusted / .demo-icon--owner
   above, so the color language stays consistent across the whole page. */

.codebook-demo__stage.is-split .codebook-demo__grid-wrap {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.codebook-demo__stage.is-split .codebook-demo__coords-wrap {
  border-color: var(--color-brand);
  background: var(--color-info-bg);
}

.codebook-demo__status {
  text-align: center;
  min-height: 2.6em;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  margin: var(--space-6) 0 0;
}

@keyframes codebook-demo-pop {
  0%   { transform: scale(0.85); }
  60%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes codebook-demo-cell-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

@keyframes codebook-demo-signal {
  0%   { transform: rotate(90deg) translateY(-4px); opacity: 0.3; }
  100% { transform: rotate(90deg) translateY(4px); opacity: 1; }
}

/* ── Responsive ────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .demo-stage {
    padding: var(--space-5);
  }

  .demo-intro__title {
    font-size: var(--text-2xl);
  }

  .codebook-demo {
    padding: var(--space-5);
  }
}

@media (max-width: 480px) {
  /* (A) Compact flow: a tight vertical list — small icon + inline label per
     step, connector arrows dropped (stacked, they wasted a lot of height). */
  .demo-flow {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
  }

  .demo-flow__node {
    flex-direction: row;
    align-items: center;
    width: auto;
    gap: var(--space-3);
    text-align: left;
  }

  .demo-flow__label {
    text-align: left;
    font-size: var(--text-sm);
  }

  .demo-flow__arrow { display: none; }

  .demo-flow .demo-icon { width: 40px; height: 40px; }
  .demo-flow .demo-icon-svg { width: 20px; height: 20px; }

  /* (B) Edge-peek: show a sliver of the codebook panel so the horizontal swipe
     is obvious, not just implied by the hint text. */
  .demo-carousel__slide { flex-basis: 88%; }
  .demo-carousel__track { gap: var(--space-3); }

  /* (E) Tighter card padding on the smallest screens. */
  .demo-stage { padding: var(--space-4); }

  .demo-nav {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .demo-nav__forward {
    flex-direction: column;
  }

  .demo-nav .btn {
    width: 100%;
    justify-content: center;
  }

  .codebook-demo__grid {
    font-size: 0.6rem;
  }

  .codebook-demo__grid th,
  .codebook-demo__grid td {
    padding: 0.15em 0.2em;
    width: 1.6em;
  }

  .codebook-demo__digit,
  .codebook-demo__coord-chip {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* ── Demo carousel — two swipeable panels (walkthrough + codebook demo) ──── */
.demo-carousel { position: relative; }

.demo-carousel__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-3);
}
.demo-carousel__hint .demo-icon-svg { width: 18px; height: 18px; }

/* The horizontal scroller: native touch-swipe + scroll-snap, scrollbar hidden. */
.demo-carousel__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.demo-carousel__viewport::-webkit-scrollbar { display: none; }
.demo-carousel__viewport:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}

.demo-carousel__track { display: flex; }

.demo-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  box-sizing: border-box;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.demo-carousel__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
/* Same controls row mirrored ABOVE the viewport (arrows flank the hint), so
   people can click or swipe from the top too. */
.demo-carousel__controls--top {
  margin-top: 0;
  margin-bottom: var(--space-3);
}
.demo-carousel__controls--top .demo-carousel__hint { margin: 0; }
.demo-carousel__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s;
}
.demo-carousel__arrow:hover:not(:disabled) { background: var(--color-surface-raised); }
.demo-carousel__arrow:disabled { opacity: 0.35; cursor: default; }
.demo-carousel__arrow .demo-icon-svg { width: 18px; height: 18px; }
.demo-carousel__arrow--prev .demo-icon-svg { transform: rotate(180deg); }

.demo-carousel__dots { display: flex; align-items: center; gap: var(--space-2); }
.demo-carousel__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-border-strong);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s, background 0.2s, transform 0.2s;
}
.demo-carousel__dot.is-active {
  opacity: 1;
  background: var(--color-brand);
  transform: scale(1.15);
}

/* ── Home "How it works" — animated 3-step explainer (slide 1) ──────────────
   Plays once on scroll-in (demo.js); reduced-motion drops the transitions but
   the steps still advance. */
.hiw { max-width: 42rem; margin: 0 auto; padding: var(--space-8); }

.hiw-stage {
  position: relative; height: 206px; margin: var(--space-2) 0 var(--space-3);
  display: flex; align-items: flex-start; justify-content: space-between;
}
/* Faint path the codebook travels along, below the two people. */
.hiw-stage::before {
  content: ""; position: absolute; left: 60px; right: 60px; top: 124px;
  border-top: 2px dashed var(--color-border); z-index: 0;
}

.hiw-actor {
  display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2); width: 108px; z-index: 2;
}
.hiw-avatar { width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center; position: relative; }
.hiw-avatar svg { width: 30px; height: 30px; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hiw-avatar--you { background: var(--color-info-bg); color: var(--color-brand); }
.hiw-avatar--you svg { stroke: var(--color-brand); }
.hiw-avatar--trusted { background: var(--color-accent-light); color: var(--color-accent); transition: transform 0.45s cubic-bezier(.5,.05,.2,1); }
.hiw-avatar--trusted svg { stroke: var(--color-accent); }
.hiw-actor__label { font-size: var(--text-sm); font-weight: 650; color: var(--color-text-primary); }

/* The codebook — the piece that travels between the two people. */
.hiw-codebook {
  position: absolute; top: 98px; left: 54px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--color-text-secondary); transform: translateX(-50%); opacity: 0;
  transition: left 0.85s cubic-bezier(.5,.05,.2,1), transform 0.5s cubic-bezier(.5,.05,.2,1), opacity 0.45s;
  z-index: 3;
}
.hiw-codebook__tile {
  width: 46px; height: 54px; border-radius: 9px;
  background: var(--color-surface-raised); border: 1.5px solid var(--color-border-strong);
  display: grid; place-items: center;
}
.hiw-codebook__tile svg { width: 30px; height: 34px; }
.hiw-codebook__name { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; font-weight: 600; }

/* Countdown badge — appears near You in the final step. */
.hiw-countdown {
  position: absolute; left: 54px; top: 106px; transform: translate(-50%, 6px);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--color-warning-bg); color: var(--color-warning-text);
  border: 1px solid color-mix(in srgb, var(--color-warning-text) 40%, transparent);
  border-radius: 999px; padding: 6px 12px 6px 10px;
  opacity: 0; pointer-events: none; z-index: 4;
  transition: opacity 0.45s, transform 0.45s;
}
.hiw-countdown svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.hiw-countdown b { font-variant-numeric: tabular-nums; font-weight: 750; }
.hiw-countdown span { font-size: 12.5px; font-weight: 600; }

.hiw-avatar--trusted::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid var(--color-warning-text); opacity: 0; transform: scale(.8);
}

/* Per-step states (driven by data-step on the stage). */
.hiw-stage[data-step="1"] .hiw-codebook { left: 54px; transform: translateX(-50%) scale(1); opacity: 1; }
.hiw-stage[data-step="2"] .hiw-codebook { left: calc(100% - 54px); transform: translateX(-50%) scale(1); opacity: 1; }
.hiw-stage[data-step="3"] .hiw-codebook { left: calc(100% - 54px); transform: translateX(-50%) scale(.92); opacity: 1; }
.hiw-stage[data-step="3"] .hiw-countdown { opacity: 1; transform: translate(-50%, 0); }
.hiw-stage[data-step="3"] .hiw-avatar--trusted { transform: translateY(-2px); }

@media (prefers-reduced-motion: no-preference) {
  .hiw-stage[data-step="3"] .hiw-avatar--trusted::after { animation: hiw-ping 1.6s cubic-bezier(.5,.05,.2,1) infinite; }
}
@keyframes hiw-ping { 0% { opacity: .7; transform: scale(.8); } 70%, 100% { opacity: 0; transform: scale(1.5); } }

.hiw-caption {
  text-align: center; font-size: var(--text-base); color: var(--color-text-primary);
  margin: var(--space-2) auto var(--space-4); max-width: 46ch; min-height: 3em; text-wrap: balance;
}
.hiw-caption b { color: var(--color-brand); font-weight: 700; }

.hiw-dots { display: flex; gap: var(--space-6); justify-content: center; }
.hiw-dot {
  appearance: none; border: none; background: none; cursor: pointer; padding: 4px 0;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--color-text-muted); font-size: 11px; font-weight: 600; letter-spacing: .02em;
}
.hiw-dot i { width: 9px; height: 9px; border-radius: 50%; background: var(--color-border); transition: background 0.3s, transform 0.3s; }
.hiw-dot[aria-current="true"] { color: var(--color-text-primary); }
.hiw-dot[aria-current="true"] i { background: var(--color-brand); transform: scale(1.3); }
.hiw-dot:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .hiw-codebook, .hiw-countdown, .hiw-avatar--trusted, .hiw-dot i { transition: none; }
}

@media (max-width: 480px) {
  .hiw { padding: var(--space-4); }
  .hiw-actor { width: 84px; }
  .hiw-dots { gap: var(--space-4); }
  /* "Trusted person" wraps to two lines on narrow screens — drop the codebook
     lane (plus the dashed path + countdown) below the labels so nothing overlaps. */
  .hiw-stage { height: 232px; }
  .hiw-stage::before { top: 152px; }
  .hiw-codebook { top: 124px; }
  .hiw-countdown { top: 132px; }
}