/* ============================================================
   MEMORY CARDS · styling for the Discovery memory-card +
   bubble-timeline components (memory-cards.js), extracted
   verbatim from pages/05-discovery.html (RESOLVE-UX-2).
   ONE owner: Discovery and Resolve both link this file.
   Tokens come from tokens.css; --viz-h is a layout variable the
   consuming page defines (component-local by design).
   ============================================================ */

/* legend */
.dc-legend{display:flex;gap:1rem;flex-wrap:wrap;align-items:center;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary);margin-bottom:var(--space-sm)}
.dc-legend-axis{color:var(--text-secondary)}
.dc-legend-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.3rem;box-shadow:0 0 4px currentColor;vertical-align:middle}

/* bubble timeline */
.tl-wrap{background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:.75rem .9rem;margin-bottom:var(--space-lg)}
.tl-wrap svg{display:block;width:100%;height:auto}
.dc-tl-bubble{cursor:pointer;transition:filter var(--duration-fast) var(--ease)}
.dc-tl-bubble:hover{filter:brightness(1.3) drop-shadow(0 0 7px currentColor)}
.dc-tl-bubble.lit{filter:brightness(1.4) drop-shadow(0 0 9px currentColor)}

/* cards: grid + horizontal carousel */
.dc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:.85rem}
@media(max-width:600px){.dc-grid{grid-template-columns:1fr}}
.dc-rail{display:flex;gap:.85rem;overflow-x:auto;scroll-snap-type:x proximity;scroll-behavior:smooth;padding:2px 2px .6rem;margin-bottom:var(--space-md)}
.dc-rail::-webkit-scrollbar{height:8px}
.dc-rail::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:var(--radius-pill)}
.dc-rail .dc-card{flex:0 0 auto;min-width:300px;max-width:330px;scroll-snap-align:center}
.dc-viewall{flex:0 0 auto;min-width:148px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;background:var(--surface);border:1px dashed var(--border-default);border-radius:var(--radius-lg);color:var(--text-secondary);cursor:pointer;font-family:var(--font-body);font-size:var(--text-sm);line-height:1.3;scroll-snap-align:center}
.dc-viewall:hover{border-color:var(--accent);color:var(--accent)}
.dc-card.lit{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),var(--shadow-md)}

/* the memory card */
.dc-card{position:relative;background:var(--surface);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:1rem 1.15rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;transition:border-color var(--duration-fast) var(--ease),box-shadow var(--duration-medium) var(--ease),transform var(--duration-fast) var(--ease)}
.dc-card:hover{border-color:color-mix(in srgb,var(--accent) 25%,transparent);box-shadow:var(--shadow-md);transform:translateY(-1px)}
.dc-card.dc-dismissed{opacity:.55}
.dc-card-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.dc-scope{font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)}
/* seeded/test memory — identical treatment to the accounts TEST badge (badge-warm) */
.dc-test{display:inline-flex;align-items:center;padding:1px 7px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:var(--text-2xs);font-weight:600;letter-spacing:.04em;text-transform:uppercase;background:var(--warn-bg);color:var(--warn);margin-left:6px}
.dc-life{font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.25rem .6rem;border-radius:var(--radius-pill);border:1px solid transparent;white-space:nowrap}
.dc-title{font-family:var(--font-body);font-size:.95rem;font-weight:600;color:var(--text);line-height:1.35;margin:0}
.dc-desc{font-size:var(--text-sm);color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.dc-divider{height:1px;background:var(--border-subtle);margin:.1rem 0}
.dc-conf{display:flex;align-items:center;gap:.55rem}
.dc-dots{display:flex;gap:5px}
.dc-dot{width:6px;height:6px;border-radius:50%;background:var(--glass-bg)}
.dc-dot.on{background:currentColor;box-shadow:0 0 6px currentColor}
.dc-conf-num{font-family:var(--font-mono);font-size:.8rem;font-weight:500;color:var(--text)}
.dc-decay{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:color-mix(in srgb,var(--color-status-muted) 18%,transparent);color:var(--color-status-muted);font-size:.6rem;margin-left:auto;cursor:default}
.dc-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-tertiary)}
.dc-foot-left{display:inline-flex;align-items:center;gap:.35rem;color:var(--accent)}
.dc-actions{display:flex;gap:.4rem;margin-top:.35rem;padding-top:.65rem;border-top:1px solid var(--border-subtle);flex-wrap:wrap}

/* calm empty state */
.mem-empty{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2.75rem 1.25rem;text-align:center;gap:.55rem;background:radial-gradient(120% 90% at 50% 0%, var(--accent-bg), transparent 70%), var(--glass-bg);border:1px dashed var(--border);border-radius:var(--radius-lg);overflow:hidden}
.mem-empty-orb{position:relative;width:52px;height:52px;display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:1.4rem}
.mem-empty-orb::before{content:'';position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 50% 50%, var(--accent-glow), transparent 70%);animation:memEmptyPulse 3s var(--ease) infinite}
@keyframes memEmptyPulse{0%,100%{transform:scale(.82);opacity:.45}50%{transform:scale(1.18);opacity:.9}}
.mem-empty-title{font-size:.95rem;font-weight:600;color:var(--text-secondary);font-family:var(--font-heading)}
.mem-empty-sub{font-size:var(--text-sm);color:var(--text-tertiary);max-width:344px;line-height:1.55}
@media (prefers-reduced-motion:reduce){.mem-empty-orb::before{animation:none}}