/* ─────────────────────────────────────────────────────────────
   Memory SPA — local styles (#5716).
   Composes the canonical design system. Every value references a
   --ww-* token from /design-system/colors_and_type.css. No raw hex.
   ───────────────────────────────────────────────────────────── */

body.ww-memory-app {
  margin: 0;
  background: var(--ww-bg);
  background-image: var(--ww-bg-ambient);
  color: var(--ww-ink-900);
  font-family: var(--ww-font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  min-height: 100vh;
}

.ww-memory-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── Topbar ─────────────────────────────────────────────────── */
.ww-memory-topbar {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-5);
  padding: var(--ww-sp-3) var(--ww-sp-5);
  background: var(--ww-glass-frost);
  backdrop-filter: var(--ww-glass-blur);
  border-bottom: 1px solid var(--ww-line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.ww-memory-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-sp-2);
  text-decoration: none;
  color: var(--ww-ink-900);
  font-weight: 650;
}

/* Inline-SVG icon primitives (replaces the Font Awesome CDN load, #8303).
   Sizing mirrors FA semantics: 1em so glyphs scale with font-size and
   inherit color via currentColor (used in .ww-memory-brand-mark etc.). */
.fa-svg {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: -0.125em;
}
.fa-svg.fa-spin {
  animation: fa-spin 2s linear infinite;
}
@keyframes fa-spin {
  to { transform: rotate(360deg); }
}

.ww-memory-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ww-radius-sm);
  background: var(--ww-accent-soft);
  color: var(--ww-accent-ink);
}

.ww-memory-brand-mark--lg {
  width: 52px;
  height: 52px;
  font-size: 22px;
  margin-bottom: var(--ww-sp-3);
}

.ww-memory-brand-name {
  font-size: 15px;
  letter-spacing: -0.01em;
}

/* ── Nav ────────────────────────────────────────────────────── */
.ww-memory-nav {
  display: flex;
  flex: 1;
  gap: var(--ww-sp-1);
  overflow-x: auto;
  scrollbar-width: thin;
}

.ww-memory-nav-item {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border-radius: var(--ww-radius-sm);
  text-decoration: none;
  color: var(--ww-ink-500);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
  transition: background var(--ww-dur-fast) var(--ww-ease-out),
    color var(--ww-dur-fast) var(--ww-ease-out);
}

.ww-memory-nav-item:hover {
  background: var(--ww-ink-tint-04);
  color: var(--ww-ink-800);
}

.ww-memory-nav-item.is-active {
  background: var(--ww-accent-soft);
  color: var(--ww-accent-ink);
}

.ww-memory-nav-item.is-soon {
  opacity: 0.62;
}

.ww-memory-nav-item.is-soon::after {
  content: "soon";
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: var(--ww-radius-pill);
  background: var(--ww-ink-tint-06);
  color: var(--ww-ink-400);
}

/* ── Tenant switcher ───────────────────────────────────────── */
.ww-memory-topbar-right {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-3);
}

.ww-memory-tenant {
  position: relative;
}

.ww-memory-tenant-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-surface-raised);
  color: var(--ww-ink-800);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
}

.ww-memory-tenant-toggle:hover {
  background: var(--ww-bg-tint);
}

.ww-memory-tenant-caret {
  font-size: 10px;
  color: var(--ww-ink-400);
}

.ww-memory-tenant-menu {
  position: absolute;
  right: 0;
  top: calc(100% + var(--ww-sp-1));
  min-width: 200px;
  margin: 0;
  padding: var(--ww-sp-1);
  list-style: none;
  background: var(--ww-glass-frost);
  backdrop-filter: var(--ww-glass-blur);
  border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-radius-md);
  box-shadow: var(--ww-shadow-lg);
  z-index: 30;
}

.ww-memory-tenant-option {
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border-radius: var(--ww-radius-xs);
  font-size: 13px;
  color: var(--ww-ink-700);
  cursor: pointer;
}

.ww-memory-tenant-option:hover {
  background: var(--ww-ink-tint-04);
}

.ww-memory-tenant-option.is-selected {
  background: var(--ww-accent-soft);
  color: var(--ww-accent-ink);
  font-weight: 600;
}

/* ── Main ───────────────────────────────────────────────────── */
.ww-memory-main {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--ww-sp-6) var(--ww-sp-5) var(--ww-sp-8);
}

.ww-memory-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-8);
  color: var(--ww-ink-400);
  font-size: 14px;
}

/* ── Placeholder (not-yet-built tabs) ───────────────────────── */
.ww-memory-placeholder {
  text-align: center;
  padding: var(--ww-sp-8) var(--ww-sp-5);
  color: var(--ww-ink-500);
}

.ww-memory-placeholder h2 {
  font-size: 20px;
  color: var(--ww-ink-800);
  margin: 0 0 var(--ww-sp-2);
}

.ww-memory-placeholder p {
  max-width: 440px;
  margin: 0 auto;
  font-size: 14px;
}

/* ── Cards ──────────────────────────────────────────────────── */
.ww-card {
  background: var(--ww-surface-raised);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-lg);
  padding: var(--ww-sp-5);
  box-shadow: var(--ww-shadow-sm);
}

.ww-memory-card-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--ww-ink-800);
  margin: 0 0 var(--ww-sp-2);
}

.ww-memory-card-hint {
  font-size: 13px;
  color: var(--ww-ink-400);
  margin: 0 0 var(--ww-sp-3);
}

.ww-memory-section-hero {
  margin-bottom: var(--ww-sp-5);
}

.ww-memory-section-hero h1 {
  margin: 0 0 var(--ww-sp-2);
  color: var(--ww-ink-900);
  font-size: 30px;
  letter-spacing: -0.03em;
}

.ww-memory-eyebrow {
  margin: 0 0 var(--ww-sp-2);
  color: var(--ww-accent-ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ww-memory-section-sub {
  max-width: 680px;
  margin: 0;
  color: var(--ww-ink-500);
  font-size: 15px;
  line-height: 1.6;
}

.ww-memory-items-card,
.ww-memory-trace-card {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-4);
}

.ww-memory-items-controls {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1fr);
  gap: var(--ww-sp-3);
}

.ww-memory-input,
.ww-memory-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg);
  color: var(--ww-ink-800);
  font: inherit;
  padding: var(--ww-sp-2) var(--ww-sp-3);
}

.ww-memory-textarea {
  grid-column: 1 / -1;
  min-height: 92px;
  resize: vertical;
}

.ww-memory-items-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ww-sp-2);
}

.ww-memory-action {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-sp-2);
}

.ww-memory-items-result {
  min-height: 140px;
  border: 1px dashed var(--ww-line);
  border-radius: var(--ww-radius-md);
  padding: var(--ww-sp-4);
  background: var(--ww-bg-tint);
  overflow: auto;
}

.ww-memory-items-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.ww-memory-items-table th,
.ww-memory-items-table td {
  padding: var(--ww-sp-2);
  border-bottom: 1px solid var(--ww-line);
  text-align: left;
}

.ww-memory-items-pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: var(--ww-font-mono);
  font-size: 12px;
}

.ww-memory-graph-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ww-sp-3);
  margin-bottom: var(--ww-sp-4);
}

.ww-memory-graph-metric {
  display: grid;
  gap: var(--ww-sp-2);
}

.ww-memory-graph-metric i {
  color: var(--ww-accent-ink);
}

.ww-memory-graph-metric strong {
  color: var(--ww-ink-900);
  font-size: 22px;
}

.ww-memory-graph-metric small,
.ww-memory-metric-label {
  color: var(--ww-ink-400);
  font-size: 12px;
}

.ww-memory-graph-canvas {
  display: block;
  min-height: 180px;
  margin-bottom: var(--ww-sp-4);
}

.ww-memory-graph-svg {
  width: 100%;
  height: auto;
  display: block;
  color: var(--ww-ink-400);
}

.ww-memory-graph-edge {
  vector-effect: non-scaling-stroke;
}

.ww-memory-graph-node-label {
  font-weight: 600;
}

.ww-memory-trace-list {
  display: grid;
  gap: var(--ww-sp-2);
}

.ww-memory-trace-row {
  display: flex;
  justify-content: space-between;
  gap: var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: var(--ww-sp-3);
  background: var(--ww-bg);
}

.ww-memory-trace-row span {
  color: var(--ww-ink-400);
  font-size: 12px;
}

/* ── Connect tab ────────────────────────────────────────────── */
.ww-memory-connect {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-5);
}

.ww-memory-connect-hero h1 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ww-sp-2);
  color: var(--ww-ink-900);
}

.ww-memory-connect-sub {
  font-size: 15px;
  color: var(--ww-ink-500);
  max-width: 620px;
  margin: 0;
}

.ww-memory-copy-row {
  display: flex;
  align-items: stretch;
  gap: var(--ww-sp-2);
}

.ww-memory-copy-value {
  flex: 1;
  padding: var(--ww-sp-2) var(--ww-sp-3);
  background: var(--ww-bg-tint);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  font-family: var(--ww-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 13px;
  color: var(--ww-ink-800);
  overflow-x: auto;
  white-space: nowrap;
}

.ww-memory-copy-btn,
.ww-memory-harness-grid .ww-harness-install-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ww-sp-2);
}

.ww-memory-harness-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--ww-sp-3);
}

.ww-memory-harness-grid .connect-card {
  background: var(--ww-bg-soft);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-md);
  padding: var(--ww-sp-4);
}

.ww-memory-harness-grid .connect-card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ww-ink-800);
  margin: 0 0 var(--ww-sp-1);
}

.ww-memory-harness-grid .connect-card-desc {
  font-size: 12px;
  color: var(--ww-ink-400);
  margin: 0 0 var(--ww-sp-3);
}

.ww-memory-harness-grid .ww-harness-install-key,
.ww-memory-harness-grid .connect-card-config {
  font-family: var(--ww-font-mono, ui-monospace, monospace);
  font-size: 11px;
  background: var(--ww-ink-tint-04);
  border-radius: var(--ww-radius-xs);
  padding: var(--ww-sp-2);
  margin: var(--ww-sp-2) 0;
  white-space: pre-wrap;
  word-break: break-all;
}

.ww-memory-cli-row {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-3);
  margin-bottom: var(--ww-sp-2);
}

.ww-memory-cli-label {
  width: 48px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ww-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Scope picker (#5717) */
.ww-memory-scope-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ww-sp-2);
}

.ww-memory-scope {
  display: flex;
  align-items: flex-start;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
}

.ww-memory-scope-text {
  display: flex;
  flex-direction: column;
}

.ww-memory-scope-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ww-ink-800);
}

.ww-memory-scope-desc {
  font-size: 11px;
  color: var(--ww-ink-400);
}

/* Test recall (#5717) */
.ww-memory-testrecall-controls {
  display: flex;
  gap: var(--ww-sp-2);
}

.ww-memory-testrecall-input {
  flex: 1;
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-radius-sm);
  font-size: 13px;
  color: var(--ww-ink-800);
  background: var(--ww-bg);
}

.ww-memory-testrecall-result {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-3);
  margin-top: var(--ww-sp-3);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  background: var(--ww-success-soft);
  border-radius: var(--ww-radius-sm);
  font-size: 13px;
}

.ww-memory-testrecall-result.is-error {
  background: var(--ww-danger-soft);
  color: var(--ww-danger-ink);
}

.ww-memory-testrecall-latency {
  font-weight: 700;
  color: var(--ww-success-ink);
}

.ww-memory-testrecall-count {
  color: var(--ww-ink-500);
}

/* Existing keys (#5717) */
.ww-memory-keys-list {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-2);
}

.ww-memory-key-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ww-sp-3);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
}

.ww-memory-key-row.is-revoked {
  opacity: 0.55;
}

.ww-memory-key-meta {
  display: flex;
  align-items: baseline;
  gap: var(--ww-sp-3);
  flex-wrap: wrap;
}

.ww-memory-key-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ww-ink-800);
}

.ww-memory-key-prefix {
  font-family: var(--ww-font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--ww-ink-400);
}

.ww-memory-key-scopes {
  font-size: 11px;
  color: var(--ww-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.ww-memory-key-actions {
  display: flex;
  gap: var(--ww-sp-2);
  flex-shrink: 0;
}

.ww-memory-key-revoke {
  color: var(--ww-danger-ink);
}

.ww-memory-key-revoked-badge {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ww-danger-ink);
}

/* ── Overview tab ───────────────────────────────────────────── */
.ww-memory-overview {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-5);
}

.ww-memory-overview-hero h1 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ww-sp-1);
}

.ww-memory-overview-sub {
  font-size: 15px;
  color: var(--ww-ink-500);
  margin: 0;
}

.ww-memory-mode-banner {
  padding: var(--ww-sp-2) var(--ww-sp-3);
  background: var(--ww-warning-soft);
  color: var(--ww-warning-ink);
  border-radius: var(--ww-radius-sm);
  font-size: 13px;
}

/* Honest non-populated states (auth / error) — no demo fallback. */
.ww-memory-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-6) var(--ww-sp-4);
}

.ww-memory-state-icon {
  font-size: 32px;
  color: var(--ww-ink-300);
  margin-bottom: var(--ww-sp-1);
}

.ww-memory-state-action {
  margin-top: var(--ww-sp-3);
}

/* Mode · uptime · queue-depth status line. */
.ww-memory-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ww-sp-5);
  padding: var(--ww-sp-3) var(--ww-sp-4);
}

.ww-memory-status-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ww-memory-status-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ww-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ww-memory-status-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--ww-ink-800);
}

.ww-memory-deeplink {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-3);
  padding: var(--ww-sp-3);
  margin-bottom: var(--ww-sp-4);
  background: var(--ww-surface-raised);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
}

.ww-memory-deeplink > i {
  color: var(--ww-accent-ink);
}

.ww-memory-deeplink-copy {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  gap: var(--ww-sp-1);
}

.ww-memory-deeplink-copy strong {
  color: var(--ww-ink-900);
  font-size: 14px;
}

.ww-memory-deeplink-copy span {
  color: var(--ww-ink-500);
  font-family: var(--ww-font-mono, ui-monospace, monospace);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.ww-memory-deeplink-action {
  color: var(--ww-accent-ink);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.ww-memory-deeplink-action:hover {
  text-decoration: underline;
}

.ww-memory-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--ww-sp-3);
}

.ww-memory-kpi-head {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-2);
  margin-bottom: var(--ww-sp-2);
}

.ww-memory-kpi-icon {
  color: var(--ww-accent-ink);
}

.ww-memory-kpi-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ww-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ww-memory-kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--ww-ink-900);
  letter-spacing: -0.02em;
}

.ww-memory-kpi-hint {
  font-size: 12px;
  color: var(--ww-ink-400);
  margin-top: var(--ww-sp-1);
}

/* ── Export & privacy tab ───────────────────────────────────── */
.ww-memory-export {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-5);
}

.ww-memory-export-hero h1 {
  font-size: 28px;
  letter-spacing: -0.02em;
  margin: 0 0 var(--ww-sp-1);
}

.ww-memory-export-sub {
  font-size: 15px;
  color: var(--ww-ink-500);
  max-width: 680px;
  margin: 0;
}

.ww-memory-export-card {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-3);
}

.ww-memory-export-controls {
  display: flex;
  align-items: flex-end;
  gap: var(--ww-sp-3);
  flex-wrap: wrap;
}

.ww-memory-export-field {
  display: flex;
  flex: 1;
  min-width: 220px;
  flex-direction: column;
  gap: var(--ww-sp-1);
}

.ww-memory-export-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ww-accent-ink);
}

.ww-memory-export-select,
.ww-memory-export-input {
  width: 100%;
  box-sizing: border-box;
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border: 1px solid var(--ww-line-strong);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg);
  color: var(--ww-ink-800);
  font: inherit;
  font-size: 13px;
}

.ww-memory-export-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ww-sp-2);
  min-height: 38px;
}

/* #5731: graph-aware markdown export tunables. */
.ww-memory-export-facets {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-2);
  margin-top: var(--ww-sp-3);
  padding: var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg-subtle, var(--ww-bg));
}

.ww-memory-export-facets[hidden] {
  display: none;
}

.ww-memory-export-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: var(--ww-sp-2);
  row-gap: 2px;
  font-size: 13px;
  color: var(--ww-ink-800);
}

.ww-memory-export-toggle-label {
  font-weight: 600;
}

.ww-memory-export-toggle-hint {
  grid-column: 2;
  font-size: 12px;
  color: var(--ww-ink-500, var(--ww-ink-800));
}

.ww-memory-export-status {
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border-radius: var(--ww-radius-sm);
  font-size: 13px;
  background: var(--ww-info-soft);
  color: var(--ww-info);
}

.ww-memory-export-status.is-success {
  background: var(--ww-success-soft);
  color: var(--ww-success-ink);
}

.ww-memory-export-status.is-error {
  background: var(--ww-danger-soft);
  color: var(--ww-danger-ink);
}

.ww-memory-forget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--ww-sp-3);
}

.ww-memory-forget-action {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-md);
  background: var(--ww-bg-soft);
}

/* ── Sign-in gate ───────────────────────────────────────────── */
.ww-memory-signin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: var(--ww-sp-6);
}

.ww-memory-signin h1 {
  font-size: 24px;
  margin: 0 0 var(--ww-sp-2);
  color: var(--ww-ink-900);
}

.ww-memory-signin p {
  font-size: 15px;
  color: var(--ww-ink-500);
  max-width: 360px;
  margin: 0 0 var(--ww-sp-5);
}

.ww-memory-signin-cta {
  text-decoration: none;
}

@media (max-width: 720px) {
  .ww-memory-topbar {
    flex-wrap: wrap;
    gap: var(--ww-sp-2);
  }
  .ww-memory-nav {
    order: 3;
    width: 100%;
    /* #8311: explicit horizontal scroll affordance so the tab strip does not
       clip at 390/360px. Scroll-snap keeps the active tab in view, -webkit-
       scrollbar styling surfaces a drag handle, and the fade mask signals
       there is more content to either side. */
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .ww-memory-nav-item {
    scroll-snap-align: start;
  }
}

/* #8167 — Own & Export surface (buyer-facing no-lock-in card). */
.ww-memory-own-export-card {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-3);
}

.ww-memory-own-export-badge {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border-radius: var(--ww-radius-pill);
  font-size: 13px;
  border: 1px solid var(--ww-line-strong);
  background: var(--ww-bg-soft);
  color: var(--ww-ink-700);
}
.ww-memory-own-export-badge.is-pending {
  background: var(--ww-bg-soft);
  color: var(--ww-ink-500);
}
.ww-memory-own-export-badge.is-verified {
  background: var(--ww-success-soft, var(--ww-bg-soft));
  color: var(--ww-success-ink, var(--ww-ink-800));
  border-color: var(--ww-success-ink, var(--ww-line-strong));
}
.ww-memory-own-export-badge.is-unverified {
  background: var(--ww-warning-soft, var(--ww-bg-soft));
  color: var(--ww-warning-ink, var(--ww-ink-800));
  border-color: var(--ww-warning-ink, var(--ww-line-strong));
}
.ww-memory-own-export-badge-icon {
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
}

.ww-memory-own-export-manifest {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-2);
}
.ww-memory-own-export-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.ww-memory-own-export-table th {
  text-align: left;
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border-bottom: 1px solid var(--ww-line);
  color: var(--ww-ink-500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ww-memory-own-export-table td {
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border-bottom: 1px solid var(--ww-line);
  color: var(--ww-ink-800);
}
.ww-memory-own-export-count {
  font-variant-numeric: tabular-nums;
  font-family: var(--ww-font-mono);
  text-align: right;
}
.ww-memory-own-export-count.is-zero {
  color: var(--ww-ink-400);
}

.ww-memory-own-export-run-locally {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-1);
}
.ww-memory-own-export-link {
  color: var(--ww-accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ww-memory-own-export-link:hover {
  color: var(--ww-accent-hover, var(--ww-accent-ink));
}

/* ── Graph SVG edges + nodes (#7683) ────────────────────────── */
.ww-memory-graph-svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  aspect-ratio: 1;
}
.ww-memory-graph-edge {
  stroke: var(--ww-ink-300, #cbd5e1);
  stroke-width: 1.5;
}
.ww-memory-graph-node-svg {
  fill: var(--ww-accent-ink, #6366f1);
  opacity: 0.7;
}
.ww-graph-node-scope {
  fill: var(--ww-ink-400, #94a3b8);
  opacity: 0.9;
}
.ww-memory-graph-node-label {
  font-size: 9px;
  fill: var(--ww-ink-700, #334155);
  user-select: none;
}

/* ── Trace row expandable (#7683) ────────────────────────────── */
.ww-memory-trace-row {
  cursor: pointer;
  transition: border-color 0.15s;
}
.ww-memory-trace-row:focus-visible {
  outline: 2px solid var(--ww-accent-ink, #6366f1);
  outline-offset: 2px;
}
.ww-memory-trace-row.ww-expanded {
  border-color: var(--ww-accent-ink, #6366f1);
}
.ww-memory-trace-detail {
  grid-column: 1 / -1;
  margin-top: var(--ww-sp-2);
  padding-top: var(--ww-sp-2);
  border-top: 1px solid var(--ww-line);
  display: grid;
  gap: var(--ww-sp-1);
}
.ww-memory-trace-field {
  display: flex;
  gap: var(--ww-sp-2);
  font-size: 13px;
}
.ww-memory-trace-field-label {
  min-width: 100px;
  color: var(--ww-ink-400);
  font-weight: 600;
}
.ww-memory-trace-field-value {
  color: var(--ww-ink-800);
}

/* ── Review queue (#7683) ────────────────────────────────────── */
.ww-memory-review-card {
  margin-top: var(--ww-sp-4);
}
.ww-memory-review-list {
  display: grid;
  gap: var(--ww-sp-2);
}
.ww-memory-review-row {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: var(--ww-sp-3);
  background: var(--ww-bg);
}
.ww-memory-review-row strong {
  flex: 1;
  font-size: 13px;
}
.ww-memory-review-confidence {
  font-variant-numeric: tabular-nums;
  font-family: var(--ww-font-mono);
  font-size: 12px;
  color: var(--ww-ink-400);
}
.ww-memory-review-actions {
  display: flex;
  gap: var(--ww-sp-1);
}
.ww-btn-sm {
  padding: 2px 10px;
  font-size: 12px;
  border-radius: var(--ww-radius-sm);
  border: 1px solid var(--ww-line);
  cursor: pointer;
  background: var(--ww-bg);
  color: var(--ww-ink-800);
}
.ww-btn-sm:hover {
  border-color: var(--ww-accent-ink, #6366f1);
}
.ww-btn-sm:disabled {
  opacity: 0.4;
  cursor: default;
}
.ww-btn-confirm {
  border-color: var(--ww-accent-ink, #6366f1);
  color: var(--ww-accent-ink, #6366f1);
}
.ww-memory-review-row.ww-resolved {
  opacity: 0.5;
}
.ww-memory-review-row.ww-resolve-error {
  border-color: #ef4444;
}

/* ── Channel badges (#7683) ──────────────────────────────────── */
.ww-memory-ch {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.ww-ch-capture { background: #dbeafe; color: #1e40af; }
.ww-ch-recall  { background: #d1fae5; color: #065f46; }
.ww-ch-forget  { background: #fee2e2; color: #991b1b; }
.ww-ch-challenge { background: #fef3c7; color: #92400e; }
.ww-ch-promote { background: #ede9fe; color: #5b21b6; }
.ww-ch-event   { background: var(--ww-line, #e2e8f0); color: var(--ww-ink-600, #475569); }

/* ── Capture timeline (#7683) ────────────────────────────────── */
.ww-memory-timeline-list {
  display: grid;
  gap: var(--ww-sp-1);
}
.ww-memory-timeline-row {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-2);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  background: var(--ww-bg);
}
.ww-memory-timeline-row strong {
  flex: 1;
  font-size: 13px;
}
.ww-memory-timeline-agent {
  font-size: 12px;
  color: var(--ww-ink-400);
}
.ww-memory-timeline-time {
  font-size: 11px;
  color: var(--ww-ink-300, #94a3b8);
  font-family: var(--ww-font-mono);
}

/* ─── First-principles Memory stage (#10711) ─── */

.ww-memory-stage {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-4);
}
.ww-memory-stage-hero h1 {
  font-size: 24px;
  font-weight: 700;
  color: var(--ww-ink-900);
}
.ww-memory-stage-sub {
  font-size: 14px;
  color: var(--ww-ink-500);
  margin-top: var(--ww-sp-1);
}

/* plane strip */
.ww-memory-plane-strip {
  display: flex;
  gap: var(--ww-sp-2);
  flex-wrap: wrap;
}
.ww-memory-plane-chip {
  padding: var(--ww-sp-1) var(--ww-sp-3);
  border-radius: var(--ww-radius-pill);
  border: 1px solid var(--ww-line);
  background: var(--ww-bg);
  color: var(--ww-ink-500);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--ww-dur-fast) var(--ww-ease-out),
    color var(--ww-dur-fast) var(--ww-ease-out);
}
.ww-memory-plane-chip:hover {
  background: var(--ww-ink-tint-04);
}
.ww-memory-plane-chip--active {
  background: var(--ww-accent-soft);
  color: var(--ww-accent-ink);
  border-color: transparent;
}

/* KPI strip */
.ww-memory-kpi-strip {
  display: flex;
  gap: var(--ww-sp-3);
  flex-wrap: wrap;
}
.ww-memory-kpi-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg-tint);
  border: 1px solid var(--ww-line);
}
.ww-memory-kpi-chip-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--ww-ink-900);
  font-variant-numeric: tabular-nums;
}
.ww-memory-kpi-chip-label {
  font-size: 11px;
  color: var(--ww-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ww-memory-dream-report {
  margin: 0;
}

.ww-memory-dream-summary {
  margin: 0;
  font-size: 14px;
  color: var(--ww-ink-800);
}

.ww-memory-dream-time {
  display: block;
  margin-top: var(--ww-sp-2);
  font-size: 12px;
  color: var(--ww-ink-400);
}

/* search bar */
.ww-memory-search-bar {
  display: flex;
  gap: var(--ww-sp-2);
}
.ww-memory-search-input {
  flex: 1;
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg);
  color: var(--ww-ink-900);
  font-size: 14px;
  font-family: var(--ww-font-sans, inherit);
}
.ww-memory-search-input:focus {
  outline: none;
  border-color: var(--ww-accent-ink);
}

/* three-column layout */
.ww-memory-columns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--ww-sp-3);
  min-height: 420px;
}
.ww-memory-col-list,
.ww-memory-col-workbench,
.ww-memory-col-inspector {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-md);
  background: var(--ww-bg);
  overflow: hidden;
}
.ww-memory-col-header {
  padding: var(--ww-sp-2) var(--ww-sp-3);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ww-ink-500);
  border-bottom: 1px solid var(--ww-line);
  background: var(--ww-bg-tint);
}

/* list body + rows */
.ww-memory-list-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ww-sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-1);
}
.ww-memory-list-row {
  display: flex;
  align-items: flex-start;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border-radius: var(--ww-radius-xs);
  cursor: pointer;
  transition: background var(--ww-dur-fast) var(--ww-ease-out);
}
.ww-memory-list-row:hover {
  background: var(--ww-ink-tint-04);
}
.ww-memory-list-row--active {
  background: var(--ww-accent-soft);
}
.ww-memory-list-fact {
  flex: 1;
  font-size: 13px;
  color: var(--ww-ink-800);
  line-height: 1.4;
}

/* plane tag */
.ww-memory-plane-tag {
  display: inline-block;
  padding: 1px var(--ww-sp-2);
  border-radius: var(--ww-radius-pill);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.ww-memory-plane-tag--me {
  background: var(--ww-info-soft);
  color: var(--ww-info);
}
.ww-memory-plane-tag--circle {
  background: var(--ww-success-soft);
  color: var(--ww-success-ink);
}
.ww-memory-plane-tag--company {
  background: var(--ww-warning-soft);
  color: var(--ww-warning-ink);
}
.ww-memory-plane-tag--vault {
  background: var(--ww-danger-soft);
  color: var(--ww-danger-ink);
}

/* workbench */
.ww-memory-workbench-body {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.ww-memory-workbench-svg {
  width: 100%;
  height: 100%;
}
.ww-memory-wb-node {
  fill: var(--ww-bg-tint);
  stroke: var(--ww-line-strong);
  stroke-width: 1.5;
  cursor: pointer;
}
.ww-memory-wb-node--focus {
  fill: var(--ww-accent-soft);
  stroke: var(--ww-accent-ink);
  stroke-width: 2;
}
.ww-memory-wb-edge {
  stroke: var(--ww-line);
  stroke-width: 1;
  fill: none;
}
.ww-memory-wb-label {
  font-size: 10px;
  fill: var(--ww-ink-700);
  text-anchor: middle;
  pointer-events: none;
  user-select: none;
}

/* inspector */
.ww-memory-inspector-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--ww-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-2);
}
.ww-memory-inspector-fact {
  font-size: 14px;
  color: var(--ww-ink-900);
  line-height: 1.5;
}
.ww-memory-inspector-meta {
  font-size: 12px;
  color: var(--ww-ink-400);
  font-family: var(--ww-font-mono);
}
.ww-memory-inspector-actions {
  display: flex;
  gap: var(--ww-sp-2);
  flex-wrap: wrap;
  margin-top: var(--ww-sp-2);
}
.ww-memory-action-btn {
  padding: var(--ww-sp-1) var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg);
  color: var(--ww-ink-700);
  font-size: 12px;
  cursor: pointer;
  transition: background var(--ww-dur-fast) var(--ww-ease-out);
}
.ww-memory-action-btn:hover {
  background: var(--ww-ink-tint-04);
}

/* connect strip */
.ww-memory-connect-strip {
  display: flex;
  align-items: center;
  gap: var(--ww-sp-3);
  padding: var(--ww-sp-3) var(--ww-sp-4);
  border-radius: var(--ww-radius-md);
  background: var(--ww-surface-raised);
  border: 1px solid var(--ww-line);
}
.ww-memory-connect-label {
  flex: 1;
  font-size: 13px;
  color: var(--ww-ink-500);
}

/* card hint (empty/error states) */
.ww-memory-card-hint {
  font-size: 13px;
  color: var(--ww-ink-400);
  padding: var(--ww-sp-3);
  line-height: 1.5;
}

/* responsive collapse */
@media (max-width: 900px) {
  .ww-memory-columns {
    grid-template-columns: 1fr;
  }
}

/* vault panel (#10709) */
.ww-memory-vault-host {
  margin: var(--ww-sp-3) 0;
}
.ww-memory-vault-card {
  padding: var(--ww-sp-4);
}
.ww-memory-vault-toolbar {
  display: flex;
  gap: var(--ww-sp-2);
  margin: var(--ww-sp-3) 0;
}
.ww-memory-vault-list {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-2);
}
.ww-memory-vault-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: var(--ww-sp-2) var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-xs);
  background: var(--ww-bg);
  cursor: pointer;
}
.ww-memory-vault-sheet {
  margin-top: var(--ww-sp-3);
  padding: var(--ww-sp-3);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg-tint);
}
.ww-memory-vault-guests {
  list-style: none;
  padding: 0;
  margin: var(--ww-sp-2) 0;
}
.ww-memory-vault-guest {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--ww-sp-1) 0;
}
.ww-memory-vault-add-guest {
  display: flex;
  gap: var(--ww-sp-2);
  margin-top: var(--ww-sp-2);
}
.ww-memory-plane-chip--vault-room {
  border-color: var(--ww-danger-ink);
}

/* ── WorkMemory room (#13351) ───────────────────────────────── */
.ww-memory-room {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-4);
  padding: var(--ww-sp-4) var(--ww-sp-5);
}

.ww-memory-room-hero h1 {
  margin: 0 0 var(--ww-sp-2);
  font-size: var(--ww-fs-h2);
  letter-spacing: var(--ww-tracking-tight);
  color: var(--ww-ink-900);
}

.ww-memory-room-sub {
  margin: 0;
  max-width: 52rem;
  color: var(--ww-ink-500);
  font-size: var(--ww-fs-body);
  line-height: var(--ww-lh-relaxed);
}

.ww-memory-room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ww-sp-2);
  margin-top: var(--ww-sp-3);
}

.ww-memory-scope-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--ww-sp-2);
}

.ww-memory-scope-card {
  position: relative;
  text-align: left;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-md);
  padding: var(--ww-sp-3);
  background: var(--ww-bg);
  cursor: pointer;
  color: inherit;
  font: inherit;
}

.ww-memory-scope-card.is-on {
  border-color: var(--ww-accent);
  background: var(--ww-accent-soft);
}

.ww-memory-scope-card--new {
  border-style: dashed;
}

.ww-memory-facts-standing {
  padding: var(--ww-sp-3) 0;
  color: var(--ww-ink-500);
}

.ww-memory-scope-k {
  display: block;
  font-size: var(--ww-fs-caption);
  font-weight: var(--ww-fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ww-ink-400);
}

.ww-memory-scope-title {
  display: block;
  margin: var(--ww-sp-1) 0;
  font-size: var(--ww-fs-body);
  font-weight: var(--ww-fw-bold);
}

.ww-memory-scope-n {
  display: block;
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-500);
}

.ww-memory-scope-secure {
  position: absolute;
  right: var(--ww-sp-3);
  top: var(--ww-sp-3);
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-400);
}

.ww-memory-search-band {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ww-sp-2);
  position: sticky;
  top: 0;
  z-index: 2;
  padding: var(--ww-sp-2) 0;
  background: var(--ww-bg);
}

.ww-memory-search-band .ww-memory-search-input {
  flex: 1 1 16rem;
  min-width: 12rem;
}

.ww-memory-mode-seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--ww-sp-1);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: var(--ww-sp-1);
  background: var(--ww-bg-tint);
}

.ww-memory-mode-btn {
  border: 0;
  background: transparent;
  color: var(--ww-ink-600);
  font: inherit;
  font-size: var(--ww-fs-caption);
  font-weight: var(--ww-fw-semi);
  padding: var(--ww-sp-1) var(--ww-sp-2);
  border-radius: var(--ww-radius-sm);
  cursor: pointer;
}

.ww-memory-mode-btn.is-on {
  background: var(--ww-bg);
  color: var(--ww-ink-900);
  box-shadow: var(--ww-shadow-sm);
}

.ww-memory-contradiction {
  border: 1px solid var(--ww-danger-soft);
  border-radius: var(--ww-radius-md);
  background: var(--ww-bg);
  padding: 0;
}

.ww-memory-contradiction > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-3);
  cursor: pointer;
  font-weight: var(--ww-fw-semi);
}

.ww-memory-contradiction > summary::-webkit-details-marker { display: none; }

.ww-memory-contradiction-body {
  padding: 0 var(--ww-sp-3) var(--ww-sp-3);
}

.ww-memory-contradiction-acts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ww-sp-2);
  margin-top: var(--ww-sp-2);
}

.ww-memory-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--ww-ink-400);
}

.ww-memory-dot--bad {
  background: var(--ww-danger-ink);
}

.ww-memory-facts-empty {
  padding: var(--ww-sp-4);
  border: 1px dashed var(--ww-line);
  border-radius: var(--ww-radius-md);
  text-align: left;
}

.ww-memory-fact-domain > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-2) 0;
  cursor: pointer;
  font-weight: var(--ww-fw-bold);
  color: var(--ww-ink-700);
}

.ww-memory-fact-domain > summary::-webkit-details-marker { display: none; }

.ww-memory-fact-row {
  display: grid;
  grid-template-columns: 1fr 6.5rem 7.5rem 8rem;
  gap: var(--ww-sp-3);
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg);
  padding: var(--ww-sp-2) var(--ww-sp-3);
  margin-bottom: var(--ww-sp-1);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.ww-memory-fact-txt {
  min-width: 0;
}

.ww-memory-fact-txt small {
  display: block;
  color: var(--ww-ink-500);
  font-size: var(--ww-fs-caption);
}

.ww-memory-fact-layer {
  font-size: var(--ww-fs-caption);
  font-weight: var(--ww-fw-bold);
  color: var(--ww-ink-500);
  display: inline-flex;
  align-items: center;
  gap: var(--ww-sp-1);
}

.ww-memory-layer-dot {
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  display: inline-block;
  background: var(--ww-ink-300);
}

.ww-memory-layer-dot--raw { background: var(--ww-ink-300); }
.ww-memory-layer-dot--calibrated { background: var(--ww-info-ink); }
.ww-memory-layer-dot--precedent { background: var(--ww-accent); }
.ww-memory-layer-dot--principle { background: var(--ww-success-ink); }

.ww-memory-fact-confidence {
  font-variant-numeric: tabular-nums;
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-500);
  display: inline-flex;
  align-items: center;
  gap: var(--ww-sp-1);
}

.ww-memory-fact-conf-bar {
  width: 3.5rem;
  height: 0.35rem;
  border-radius: var(--ww-radius-pill);
  background: var(--ww-bg-tint);
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.ww-memory-fact-conf-bar > i {
  display: block;
  height: 100%;
  background: var(--ww-accent);
}

.ww-memory-fact-source {
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-500);
  text-align: right;
}

.ww-memory-disclosure {
  border-top: 1px solid var(--ww-line);
  padding-top: var(--ww-sp-2);
}

.ww-memory-disclosure > summary {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ww-sp-2);
  cursor: pointer;
  font-weight: var(--ww-fw-bold);
  color: var(--ww-ink-700);
  padding: var(--ww-sp-2) 0;
}

.ww-memory-disclosure > summary::-webkit-details-marker { display: none; }

.ww-memory-disclosure-cnt {
  font-size: var(--ww-fs-caption);
  font-weight: var(--ww-fw-regular);
  color: var(--ww-ink-500);
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-pill);
  padding: 0 var(--ww-sp-2);
  background: var(--ww-bg);
}

.ww-memory-disclosure-muted {
  font-size: var(--ww-fs-caption);
  font-weight: var(--ww-fw-regular);
  color: var(--ww-ink-400);
}

.ww-memory-onto {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: var(--ww-sp-3);
  min-height: 10rem;
}

.ww-memory-onto-layers {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-1);
}

.ww-memory-onto-layer {
  text-align: left;
  padding: var(--ww-sp-2);
  border-radius: var(--ww-radius-sm);
  font: inherit;
  font-size: var(--ww-fs-body);
  font-weight: var(--ww-fw-semi);
  color: var(--ww-ink-600);
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
}

.ww-memory-onto-layer.is-on {
  border-color: var(--ww-line);
  background: var(--ww-bg);
  color: var(--ww-ink-900);
}

.ww-memory-onto-layer small {
  display: block;
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-400);
  font-weight: var(--ww-fw-regular);
}

.ww-memory-onto-pane {
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: var(--ww-sp-3);
  background: var(--ww-bg-tint);
  font-size: var(--ww-fs-body);
}

.ww-memory-usage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--ww-sp-2);
  margin-top: var(--ww-sp-2);
}

.ww-memory-usage-chip {
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  padding: var(--ww-sp-2);
  background: var(--ww-bg);
}

.ww-memory-usage-k {
  font-size: var(--ww-fs-caption);
  color: var(--ww-ink-400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.ww-memory-usage-v {
  font-size: var(--ww-fs-h4);
  font-weight: var(--ww-fw-bold);
  color: var(--ww-ink-900);
}

.ww-memory-custody-body {
  display: flex;
  flex-direction: column;
  gap: var(--ww-sp-2);
  padding: var(--ww-sp-2) 0;
}

.ww-memory-kv {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--ww-sp-2);
  align-items: center;
  padding: var(--ww-sp-2) 0;
  border-bottom: 1px solid var(--ww-line);
}

.ww-memory-honest {
  display: inline-block;
  font-size: var(--ww-fs-caption);
  padding: 0 var(--ww-sp-2);
  border-radius: var(--ww-radius-sm);
  border: 1px dashed var(--ww-line);
  color: var(--ww-ink-500);
}

.ww-memory-honest--planned,
.ww-memory-honest--partial {
  background: var(--ww-bg-tint);
}

.ww-memory-spine {
  min-height: 1.25rem;
  margin: var(--ww-sp-3) 0;
  color: var(--ww-ink-700);
  font-size: var(--ww-fs-body);
}

.ww-memory-drawer-host {
  margin-top: var(--ww-sp-3);
}

.ww-memory-fact-drawer {
  border: 1px solid var(--ww-line);
  border-radius: var(--ww-radius-sm);
  background: var(--ww-bg);
  padding: var(--ww-sp-3);
}

.ww-memory-fact-drawer .dis {
  margin-bottom: var(--ww-sp-2);
}

.ww-memory-fact-drawer .dis > summary {
  cursor: pointer;
  font-weight: var(--ww-fw-bold);
}

.ww-memory-fact-drawer .kv {
  display: flex;
  justify-content: space-between;
  gap: var(--ww-sp-3);
  padding: var(--ww-sp-1) 0;
}

.ww-memory-drawer-close {
  margin-bottom: var(--ww-sp-2);
}

@media (max-width: 900px) {
  .ww-memory-room {
    padding: var(--ww-sp-3);
  }

  .ww-memory-fact-row {
    grid-template-columns: 1fr 5.5rem;
  }

  .ww-memory-fact-confidence,
  .ww-memory-fact-source {
    display: none;
  }

  .ww-memory-onto {
    grid-template-columns: 1fr;
  }
}