/* T-2735: the way home (js/recall.js). The prompt is a small briefing panel in the
   machine's own tokens, so each of the four machines dresses it as it dresses the arrival
   card; the reverse ring is the Observatory's outbound transfer run backwards. Loaded
   before skins.css, which owns the per-machine tokens these read. */

/* ---- the prompt ---- */
.recall-confirm {
  position: fixed; inset: 0; z-index: 2100; display: grid; place-items: center; padding: 16px;
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--page, #05070d) 62%, transparent);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: recall-fade .18s ease both;
}
.recall-card {
  width: min(360px, 100%); padding: 18px 18px 14px; text-align: left;
  border: 1px solid var(--edge-strong, #3e5a86); border-radius: var(--skin-radius, 6px);
  background: var(--panel-solid, #12233f); color: var(--ink, #ece6d8);
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 46px rgba(0,0,0,.45);
  animation: recall-rise .22s var(--ease-detent, ease) both;
}
.recall-head {
  display: flex; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--edge, #2a3f63);
  font: var(--label-weight, 400) 10px/1.2 var(--font-label, ui-monospace, monospace);
  letter-spacing: var(--label-tracking, .14em); text-transform: uppercase; color: var(--ink-dim, #a7b4c8);
}
.recall-eyebrow { color: var(--accent, #8cf5a8); }
.recall-eyebrow::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%;
  vertical-align: 1px; background: var(--lamp, #f3a43b); box-shadow: 0 0 8px var(--lamp, #f3a43b); animation: recall-blink 1.1s steps(1, end) infinite; }
.recall-title { margin: 0 0 8px; font: var(--display-weight, 400) 22px/1.15 var(--font-display, ui-sans-serif, system-ui);
  letter-spacing: var(--display-tracking, -.01em); color: var(--ink, #ece6d8); }
.recall-body { margin: 0 0 16px; font: 400 14px/1.5 var(--font-body, ui-sans-serif, system-ui); color: var(--ink-dim, #a7b4c8); }
.recall-actions { display: flex; gap: 10px; }
.recall-actions button {
  flex: 1; min-height: 44px; padding: 0 14px; border-radius: var(--r-control, 4px); cursor: pointer;
  font: 500 12px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .14em; text-transform: uppercase;
  touch-action: manipulation; transition: transform .12s var(--ease-machine, ease), box-shadow .12s, background .12s;
}
.recall-cancel { border: 1px solid var(--edge-strong, #3e5a86); background: transparent; color: var(--ink, #ece6d8); }
.recall-cancel:hover { background: var(--wash, rgba(140,245,168,.12)); }
.recall-go { border: 1px solid var(--signal-deep, #8e1f18); background: var(--signal, #d6352b); color: var(--signal-ink, #fff1ec);
  box-shadow: var(--shadow-button, none); }
.recall-go:hover { transform: translateY(-1px); }
.recall-go:active { transform: translateY(2px); box-shadow: none; }
.recall-actions button:focus-visible { outline: 2px solid var(--accent, #8cf5a8); outline-offset: 2px; }

/* Each machine wears the prompt as it wears the arrival card (skins.css). */
html[data-skin="brass"] .recall-card { box-shadow: inset 0 0 0 4px var(--panel-solid), inset 0 0 0 5px var(--edge), 0 18px 46px rgba(0,0,0,.45); }
html[data-skin="brass"] .recall-go { font-family: var(--font-label); font-weight: 600; font-size: 13px;
  background: linear-gradient(180deg, #F0D18E 0%, #B88A43 50%, #E2BD72 100%); color: #2A1E15; border-color: #6E4F22;
  text-shadow: 0 1px 0 rgba(255,240,200,.5); }
html[data-skin="brass"] .recall-cancel { font-family: var(--font-label); font-weight: 600; font-size: 13px; }
html[data-skin="worlds-fair"] .recall-card { border-top: 5px solid var(--signal); }
html[data-skin="worlds-fair"] .recall-actions button { border-radius: 999px; font-family: var(--font-label); font-weight: 600; }
html[data-skin="deep-space"] .recall-card { clip-path: polygon(var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer)); }
html[data-skin="deep-space"] .recall-go { background: color-mix(in srgb, var(--signal) 10%, transparent); color: var(--signal); border-color: var(--signal);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--signal) 25%, transparent); letter-spacing: .24em; }
html[data-skin="deep-space"] .recall-go:hover { background: var(--signal); color: var(--signal-ink); }

/* ---- the reverse ring ---- */
.recall-ring {
  position: fixed; inset: 0; z-index: 2100; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center; overflow: hidden;
  background: color-mix(in srgb, var(--page, #05070d) 94%, transparent); color: var(--ink, #ece6d8);
  animation: recall-fade .25s ease both;
}
/* The outbound rings grow from .6 to 2.8 (portal.css, crossing); home, they close from 2.8 to .6. */
.recall-ring i { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; margin: -35vmin 0 0 -35vmin;
  border: 1px solid var(--accent, #8cf5a8); border-radius: 50%; pointer-events: none;
  box-shadow: 0 0 0 30px var(--skin-glow, transparent), 0 0 0 100px var(--skin-glow, transparent);
  animation: recall-closing 1.1s var(--ease-machine, ease) both; }
.recall-ring .recall-ring-b { border-style: dashed; animation-delay: .25s; animation-duration: .85s; }
.recall-ring > :not(i) { position: relative; }
.recall-ring-eyebrow { margin: 0 0 14px; font: var(--label-weight, 400) 11px/1 var(--font-label, ui-monospace, monospace);
  letter-spacing: var(--label-tracking, .14em); text-transform: uppercase; color: var(--accent, #8cf5a8); }
.recall-ring-year { font: var(--display-weight, 300) clamp(72px, 18vw, 180px)/1 var(--font-display, ui-sans-serif, system-ui);
  letter-spacing: -.05em; font-variant-numeric: tabular-nums; color: var(--ink, #ece6d8); }
.recall-ring-seq { display: flex; align-items: center; gap: 12px; margin: 18px 0 12px;
  font: 400 10px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint, #6c7c96); }
.recall-ring-seq span { display: inline-flex; align-items: center; gap: 7px; animation: recall-seq-on .01s linear both; }
.recall-ring-seq span:nth-of-type(2) { animation-delay: .35s; }
.recall-ring-seq span:nth-of-type(3) { animation-delay: .7s; }
.recall-ring-seq i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent, #8cf5a8); box-shadow: 0 0 10px var(--accent, #8cf5a8);
  opacity: .2; animation: recall-seq-lamp .01s linear both; animation-delay: inherit; }
.recall-ring-seq b { font-weight: 400; }
.recall-ring-label { margin: 0; font: 400 11px/1.6 var(--font-mono, ui-monospace, monospace); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-dim, #a7b4c8); }
.recall-ring-abort { margin-top: 22px; min-height: 44px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--r-control, 4px);
  background: none; color: var(--accent, #8cf5a8); font: 400 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; }
.recall-ring-abort:hover { background: var(--wash, transparent); color: var(--ink, #ece6d8); }
.recall-ring-abort:focus-visible { outline: 2px solid var(--accent, #8cf5a8); outline-offset: 2px; }

@keyframes recall-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes recall-rise { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes recall-blink { 50% { opacity: .25; } }
@keyframes recall-closing { from { transform: scale(2.8); opacity: 0; } 45% { opacity: .5; } to { transform: scale(.6); opacity: 0; } }
@keyframes recall-seq-on { to { color: var(--ink, #ece6d8); } }
@keyframes recall-seq-lamp { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .recall-confirm, .recall-card, .recall-eyebrow::before { animation: none; }
  .recall-actions button { transition: none; }
}