/* ============================================================================
   recall-drawer.css — the Cognia mock recall flow

   Two sources, no third:

   1. MOTION — src/entry-screen/entry-screen.css. The five steps are revealed
      by the same engine the entry screen reveals its stat cards with: a class
      on the container gates an opacity/transform transition, and a hardcoded
      `nth-child` `transition-delay` ladder staggers the children. The entry
      ladder is 0 / .15 / .3 / .45s over a `.55s` fade; here it is
      0 / .462 / .924 / 1.386 / 1.848s over the same `.55s` fade, which puts
      the end of the run at 4 x 462 + 550 = 2398ms (the brief's ~2.4s).
      The `.gone` dismiss (`.55s` opacity fade, node removed at 620ms) and the
      CTA card's `opacity .7s ease .1s` reveal are used verbatim.

   2. SURFACE — _reference/ycglobe-index.html. The drawer is the detail card
      (`.detail`, CSS L178-181): 18px radius, `--paper-66` ground,
      `blur(22px) saturate(1.25)`, a `--brand-20` hairline and
      `0 22px 55px -24px rgba(0,0,0,0.42)`. Section heads are `.fsec .fh`
      (10px/700/uppercase/.1em/--acc), rows are `.detail .kv`. The result card
      borrows the tour tip (`#tourTip`, L324-329): white, 14px radius,
      `0 20px 60px -18px rgba(0,0,0,0.55)`, Space Grotesk 16px title.

   Colour tokens come from src/shared/tokens.css; every var() below carries the
   token's own value as a fallback so the module also renders standalone.
   ========================================================================== */

.recall-drawer {
  --rd-brand:      var(--brand, #FB651E);
  --rd-paper:      var(--paper, #FFF7F0);
  --rd-border:     var(--border, #f0d9c6);
  --rd-ink:        var(--ink, #20140c);
  --rd-graphite:   var(--graphite, #6b5443);
  --rd-acc:        var(--acc, #FB651E);
  --rd-ok:         var(--ok, #16a34a);
  --rd-danger:     var(--danger, #e4141f);
  /* --white is the clone's legacy SOLID SURFACE token, not a foreground: it is
     #fff on light and #2B241F (the raised surface) on dark. Every surface this
     file used to write as a literal `#fff` resolves through it, which is what
     lets a token swap reach them. The one remaining `#fff` in this file is the
     standalone fallback on the line below — it is what the module paints with
     when tokens.css is not loaded at all, and tokens.css/tokens-dark.css both
     override it the moment they are. A foreground on a brand fill is a
     different job and takes --on-brand, which exists only on dark. */
  --rd-white:      var(--white, #fff);
  --rd-on-brand:   var(--on-brand, var(--rd-white));
  --rd-scrim-fill: var(--scrim-modal, rgba(20, 12, 6, 0.42));

  /* brand mixed into the surface. The clone already ships all three at exactly
     the values this file was mixing by hand, so light is unchanged and dark
     picks up the charcoal-based mixes instead of mixing into white. */
  --rd-brand-12:   var(--brand-12, color-mix(in srgb, var(--rd-brand) 12%, var(--rd-white)));
  --rd-brand-20:   var(--brand-20, color-mix(in srgb, var(--rd-brand) 20%, var(--rd-white)));
  --rd-brand-45:   var(--brand-45, color-mix(in srgb, var(--rd-brand) 45%, var(--rd-white)));
  --rd-brand-55:   var(--brand-55, color-mix(in srgb, var(--rd-brand) 55%, transparent));

  /* glass and elevation. Same story: the literals below are the light values of
     these tokens verbatim, so naming them costs light nothing and buys dark the
     un-amplified blur and the deeper shadows tokens-dark.css defines. */
  --rd-paper-66:   var(--paper-66, color-mix(in srgb, var(--rd-paper) 66%, transparent));
  --rd-foot-bg:    color-mix(in srgb, var(--rd-paper) 42%, transparent);
  --rd-blur-xs:    var(--blur-xs, blur(3px));
  --rd-blur-detail:var(--blur-detail, blur(22px) saturate(1.25));
  --rd-sh-detail:  var(--sh-4-detail, 0 22px 55px -24px rgba(0, 0, 0, 0.42));
  --rd-sh-btn:     var(--sh-3-btn, 0 10px 24px -12px rgba(0, 0, 0, 0.35));
  --rd-sh-tour:    var(--sh-5-tour, 0 20px 60px -18px rgba(0, 0, 0, 0.55));

  /* the rail, and the emphasis that dark cannot express as opacity */
  --rd-rail: linear-gradient(to bottom,
    color-mix(in srgb, var(--rd-brand) 55%, transparent),
    color-mix(in srgb, var(--rd-brand) 22%, transparent));
  --rd-rail-complete-opacity: .55;
  --rd-btn-disabled-opacity: .6;
  --rd-btn-disabled-bg: transparent;
  --rd-btn-disabled-fg: inherit;
  --rd-font-body:    var(--font-body, "Inter", system-ui, sans-serif);
  --rd-font-display: var(--font-display, "Space Grotesk", system-ui, sans-serif);
  --rd-font-mono:    var(--font-mono, ui-monospace, "IBM Plex Mono", monospace);

  /* motion — see the header block for provenance */
  --rd-fade:         550ms;   /* entry FADE_MS, verbatim                      */
  --rd-hide:         620ms;   /* entry HIDE_MS, verbatim                      */
  --rd-open:         300ms;   /* adapted: snappy drawer slide                 */
  --rd-ease-snap:    cubic-bezier(0.2, 0, 0, 1);
  --rd-step-fade:    550ms;   /* entry FADE_MS, verbatim                      */
  --rd-step-stagger: 462ms;   /* entry 150ms rung, rescaled to land on 2.4s   */
  --rd-rail-ms:      2398ms;  /* set per run from JS                          */

  --rd-z: var(--rd-z-index, 2400);

  position: fixed;
  inset: 0;
  z-index: var(--rd-z);
  font-family: var(--rd-font-body);
  color: var(--rd-ink);
  /* the entry screen's own root transition, verbatim */
  transition: opacity .55s ease;
}
.recall-drawer *,
.recall-drawer *::before,
.recall-drawer *::after { box-sizing: border-box; }

/* the module toggles views with the `hidden` attribute, and `.rd-btn` sets an
   explicit display — which would otherwise win over the UA's [hidden] rule */
.recall-drawer [hidden] { display: none !important; }

/* dismissed — the entry screen's `.gone`: fade over .55s, node hidden at 620ms */
.recall-drawer.is-gone { opacity: 0; pointer-events: none; }

/* ── scrim ───────────────────────────────────────────────────────────────── */
.recall-drawer .rd-scrim {
  position: absolute;
  inset: 0;
  background: var(--rd-scrim-fill);
  -webkit-backdrop-filter: var(--rd-blur-xs);
  backdrop-filter: var(--rd-blur-xs);
  opacity: 0;
  transition: opacity var(--rd-open) ease;
}
.recall-drawer.is-open .rd-scrim { opacity: 1; }

/* ── the drawer surface — the reference detail card, made full-height ────── */
.recall-drawer .rd-surface {
  position: absolute;
  top: 16px;
  right: 16px;
  bottom: 16px;
  width: 380px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 18px;
  background: var(--rd-paper-66);
  -webkit-backdrop-filter: var(--rd-blur-detail);
  backdrop-filter: var(--rd-blur-detail);
  border: 1px solid var(--rd-brand-20);
  box-shadow: var(--rd-sh-detail);
  opacity: 0;
  transform: translateX(16px);
  transition: transform var(--rd-open) var(--rd-ease-snap),
              opacity var(--rd-open) ease;
  will-change: transform;
}
.recall-drawer.is-open .rd-surface { opacity: 1; transform: none; }
/* exit rides the `.gone` fade duration rather than the faster open curve */
.recall-drawer.is-gone .rd-surface {
  opacity: 0;
  transform: translateX(16px);
  transition: transform var(--rd-fade) ease, opacity var(--rd-fade) ease;
}
.recall-drawer .rd-surface:focus { outline: none; }

/* close button — `.detail .x`, verbatim values */
.recall-drawer .rd-x {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 5;
  cursor: pointer;
  color: var(--rd-graphite);
  font-size: 18px;
  line-height: 1;
  padding: 6px 9px;
  border: 0;
  border-radius: 8px;
  background: none;
  transition: background .12s, color .12s;
}
.recall-drawer .rd-x:hover {
  background: var(--rd-brand-12);
  color: var(--rd-ink);
}
.recall-drawer .rd-x:focus-visible {
  outline: 2px solid var(--rd-brand);
  outline-offset: 2px;
}

/* ── header ──────────────────────────────────────────────────────────────── */
.recall-drawer .rd-head {
  padding: 15px 16px 13px;
  border-bottom: 1px solid var(--rd-border);
  flex: 0 0 auto;
}
.recall-drawer .rd-eyebrow {
  font: 700 10px/1 var(--rd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rd-acc);
}
.recall-drawer .rd-uri {
  margin-top: 9px;
  font: 500 11px var(--rd-font-mono);
  color: var(--rd-graphite);
  word-break: break-all;
}
.recall-drawer .rd-title {
  font-family: var(--rd-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin: 5px 0 0;
  color: var(--rd-ink);
}

/* ── body ────────────────────────────────────────────────────────────────── */
.recall-drawer .rd-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 14px 16px 16px;
}

/* section head — `.fsec .fh`, verbatim */
.recall-drawer .rd-fh {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rd-acc);
  margin-bottom: 9px;
}
.recall-drawer .rd-sec { margin-bottom: 18px; }
.recall-drawer .rd-sec:last-of-type { margin-bottom: 0; }

/* key/value row — `.detail .kv`, verbatim sizes */
.recall-drawer .rd-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  color: var(--rd-graphite);
  margin-bottom: 6px;
}
.recall-drawer .rd-kv .rd-v {
  color: var(--rd-ink);
  font: 700 12px var(--rd-font-mono);
  font-variant-numeric: tabular-nums;
}

/* compatible agent */
.recall-drawer .rd-agent {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 600 13px var(--rd-font-display);
  color: var(--rd-ink);
}
.recall-drawer .rd-agent-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--rd-ok);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--rd-ok) 18%, transparent);
}

/* recall fee — §31: payment is one quiet line, never a DeFi ladder */
.recall-drawer .rd-fee {
  font: 700 21px var(--rd-font-display);
  letter-spacing: -0.02em;
  color: var(--rd-ink);
  font-variant-numeric: tabular-nums;
}
/* ── footer: the fee and the one primary action, pinned ──────────────────── */
.recall-drawer .rd-foot {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;               /* hidden children collapse cleanly */
  padding: 13px 16px 16px;
  border-top: 1px solid var(--rd-border);
  background: var(--rd-foot-bg);
}
.recall-drawer .rd-foot .rd-fee-sec { margin: 0; }
.recall-drawer .rd-foot .rd-fh { margin-bottom: 5px; }
.recall-drawer .rd-foot .rd-btn { margin-top: 0; }

/* primary button — the entry screen's `.ec-btn.primary`, verbatim */
.recall-drawer .rd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 18px;
  padding: 11px 14px;
  border-radius: 12px;
  font: 600 13.5px var(--rd-font-display);
  cursor: pointer;
  border: 1px solid var(--rd-border);
  background: var(--rd-white);
  color: var(--rd-ink);
  transition: transform .12s, box-shadow .12s, background .12s;
}
.recall-drawer .rd-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--rd-sh-btn);
}
.recall-drawer .rd-btn:active { transform: translateY(0); }
.recall-drawer .rd-btn-primary {
  background: var(--rd-brand);
  color: var(--rd-on-brand);
  border-color: var(--rd-brand);
}
.recall-drawer .rd-btn:focus-visible {
  outline: 2px solid var(--rd-ink);
  outline-offset: 2px;
}
/* dark cannot dim a foreground to say "disabled" without dropping it under the
   contrast floor, so --rd-btn-disabled-* carry it as opaque colour there. */
.recall-drawer .rd-btn:disabled {
  opacity: var(--rd-btn-disabled-opacity);
  color: var(--rd-btn-disabled-fg);
  background: var(--rd-btn-disabled-bg);
  cursor: default; transform: none;
}

/* ── the run: five steps on the entry screen's stagger ladder ────────────── */
.recall-drawer .rd-steps {
  position: relative;
  list-style: none;
  margin: 4px 0 0;
  padding: 0 0 0 2px;
}

/* the connector rail — "connection lines activating" (SPEC §38).
   A pseudo-element, so the <li> keep the nth-child indices the ladder uses. */
.recall-drawer .rd-steps::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 20px;
  bottom: 20px;
  width: 1px;
  background: var(--rd-rail);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--rd-rail-ms) linear;
}
.recall-drawer .rd-steps.is-running::before { transform: scaleY(1); }

.recall-drawer .rd-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 0;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--rd-step-fade) ease var(--sdel, 0s),
              transform var(--rd-step-fade) ease var(--sdel, 0s);
}
.recall-drawer .rd-steps.is-running .rd-step { opacity: 1; transform: none; }

/* THE LADDER. The entry screen writes its four rungs as hardcoded nth-child
   transition-delays (`.15s / .3s / .45s`); these are the same rungs rescaled
   for five steps and a 2.4s run. `--sdel` is the entry screen's own per-card
   delay variable, here carried down to the node so both animate on one rung. */
.recall-drawer .rd-steps.is-running .rd-step:nth-child(1) { --sdel: 0s; }
.recall-drawer .rd-steps.is-running .rd-step:nth-child(2) { --sdel: .462s; }
.recall-drawer .rd-steps.is-running .rd-step:nth-child(3) { --sdel: .924s; }
.recall-drawer .rd-steps.is-running .rd-step:nth-child(4) { --sdel: 1.386s; }
.recall-drawer .rd-steps.is-running .rd-step:nth-child(5) { --sdel: 1.848s; }

/* the node — a data block, not a spinner (SPEC §38) */
.recall-drawer .rd-node {
  position: relative;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  border-radius: 4px;
  background: var(--rd-white);
  border: 1px solid var(--rd-brand-45);
  transform: scale(.82);
  transition: transform var(--rd-step-fade) var(--rd-ease-snap) var(--sdel, 0s),
              background var(--rd-step-fade) ease var(--sdel, 0s),
              border-color var(--rd-step-fade) ease var(--sdel, 0s),
              box-shadow var(--rd-step-fade) ease var(--sdel, 0s);
}
.recall-drawer .rd-steps.is-running .rd-step .rd-node {
  transform: scale(1);
  background: var(--rd-brand);
  border-color: var(--rd-brand);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--rd-brand) 80%, transparent);
}
/* the step that failed the check. It is marked at the end of its own rung, so
   it drops the ladder delay and recolours on its own short curve. */
.recall-drawer .rd-steps.is-running .rd-step.is-failed { --sdel: 0s; }
.recall-drawer .rd-steps.is-running .rd-step.is-failed .rd-node,
.recall-drawer .rd-steps.is-running .rd-step.is-failed .rd-step-l {
  transition-duration: 220ms;
}
.recall-drawer .rd-steps.is-running .rd-step.is-failed .rd-node {
  background: var(--rd-danger);
  border-color: var(--rd-danger);
  box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--rd-danger) 80%, transparent);
}
.recall-drawer .rd-step.is-failed .rd-node::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 44%, var(--rd-on-brand) 44%,
      var(--rd-on-brand) 56%, transparent 56%),
    linear-gradient(-45deg, transparent 44%, var(--rd-on-brand) 44%,
      var(--rd-on-brand) 56%, transparent 56%);
}

.recall-drawer .rd-step-l {
  font: 600 10.5px var(--rd-font-display);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--rd-graphite);
  transition: color var(--rd-step-fade) ease var(--sdel, 0s);
}
.recall-drawer .rd-steps.is-running .rd-step .rd-step-l { color: var(--rd-ink); }
.recall-drawer .rd-steps.is-running .rd-step.is-failed .rd-step-l { color: var(--rd-danger); }

/* the capsule forms out of the completed steps (SPEC §38) */
.recall-drawer .rd-steps.is-complete::before {
  background: var(--rd-brand);
  opacity: var(--rd-rail-complete-opacity);
}

/* ── result card — the tour tip's surface ────────────────────────────────── */
.recall-drawer .rd-result {
  margin-top: 20px;
  padding: 15px 16px 14px;
  border-radius: 14px;
  background: var(--rd-white);
  box-shadow: var(--rd-sh-tour);
  opacity: 0;
  /* the entry screen's CTA-card reveal, verbatim: opacity .7s ease .1s */
  transition: opacity .7s ease .1s;
}
.recall-drawer .rd-result.is-in { opacity: 1; }

.recall-drawer .rd-result-t {
  font: 700 10px var(--rd-font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rd-acc);
  margin-bottom: 8px;
}
.recall-drawer .rd-result.is-failed .rd-result-t { color: var(--rd-danger); }

.recall-drawer .rd-result-p {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  color: var(--rd-ink);
}
.recall-drawer .rd-result-rows {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--rd-border);
}
.recall-drawer .rd-result-rows .rd-kv:last-child { margin-bottom: 0; }
.recall-drawer .rd-result-note {
  margin-top: 12px;
  font-size: 11px;
  color: var(--rd-graphite);
}

/* ── dark ────────────────────────────────────────────────────────────────────
   Everything above resolves through a token, so tokens-dark.css re-points the
   drawer's ground, glass, hairlines, shadows and every surface that used to be
   a literal `#fff`. What is left here is the short list of places where this
   file said something OTHER than a colour, and where dark needs a different
   sentence rather than a different value:

     --rd-foot-bg   the footer is 42% paper over transparent, which on light
                    reads as a slightly denser band under the body. Over
                    charcoal a 42% wash is indistinguishable from the surface,
                    so the pinned footer stops being a footer; dark takes the
                    opaque --paper-97 and gets the band back.
     --rd-rail      the connector is a 55% -> 22% fade of brand into TRANSPARENT.
                    On dark the tail end is effectively the panel, so the rail
                    reads as half a rail; dark takes a flat --brand-55 and lets
                    the scaleY reveal carry the motion on its own.
     --rd-rail-complete-opacity / --rd-btn-disabled-*
                    opacity used as emphasis. Dimming on dark drops a foreground
                    under the contrast floor, so "complete" and "disabled" are
                    re-expressed as opaque colour (the page does the same for
                    its own off-states — see marketplace.css §3).
     .rd-result     the tour tip separates from the body by shadow alone. Dark
                    shadows do not separate two dark surfaces, so the card takes
                    the hairline it needs. box-sizing is border-box on every
                    descendant, so the border costs no layout.

   All of it is scoped to [data-theme="dark"], which is why light cannot be
   touched: none of it matches while the attribute is absent. */

[data-theme="dark"] .recall-drawer {
  --rd-foot-bg: var(--paper-97);
  --rd-rail: var(--brand-55);
  --rd-rail-complete-opacity: 1;
  --rd-btn-disabled-opacity: 1;
  --rd-btn-disabled-fg: var(--graphite);
  --rd-btn-disabled-bg: var(--surface);
}
[data-theme="dark"] .recall-drawer .rd-result { border: 1px solid var(--rd-border); }

/* the drawer is glass; without it, dark must still read as a raised surface */
@media (prefers-reduced-transparency: reduce) {
  [data-theme="dark"] .recall-drawer .rd-surface {
    background: var(--surface);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}

/* ── mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .recall-drawer .rd-surface {
    top: 10px;
    right: 8px;
    left: 8px;
    bottom: 10px;
    width: auto;
    max-width: none;
    border-radius: 16px;
  }
  .recall-drawer .rd-title { font-size: 15px; }
  .recall-drawer .rd-fee { font-size: 19px; }
  .recall-drawer .rd-head { padding: 14px 14px 12px; }
  .recall-drawer .rd-body { padding: 13px 14px 15px; }
}

/* ── reduced motion — the run collapses to an instant result ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .recall-drawer,
  .recall-drawer .rd-scrim,
  .recall-drawer .rd-surface,
  .recall-drawer .rd-result,
  .recall-drawer .rd-step,
  .recall-drawer .rd-node,
  .recall-drawer .rd-step-l,
  .recall-drawer .rd-steps::before {
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .recall-drawer .rd-btn:hover { transform: none; }
}

/* the same collapse, driven by the module rather than the media query, so a
   host can force the instant path (the demo's Reduced motion switch) */
.recall-drawer.is-instant,
.recall-drawer.is-instant .rd-scrim,
.recall-drawer.is-instant .rd-surface,
.recall-drawer.is-instant .rd-result,
.recall-drawer .rd-steps.is-instant,
.recall-drawer .rd-steps.is-instant .rd-step,
.recall-drawer .rd-steps.is-instant .rd-node,
.recall-drawer .rd-steps.is-instant .rd-step-l,
.recall-drawer .rd-steps.is-instant::before {
  transition-duration: .01ms !important;
  transition-delay: 0s !important;
}