/* Content surfaces: panels, dialogs, toasts, and trophies. */


.reach-link { min-height: var(--touch-min); padding: 0; color: var(--state-info); background: transparent; text-align: left; font-size: var(--fs-caption); }
.context-reach section { margin-top: var(--sp-4); }.context-reach h3 { color: var(--text-secondary); font-size: var(--fs-caption); letter-spacing: .06em; text-transform: uppercase; }
.reach-counts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.reach-count { display: grid; gap: 2px; padding: var(--sp-2); border: 1px solid var(--border-faint); border-radius: var(--radius-s); }
.reach-count span { color: var(--text-faint); font-size: var(--fs-caption); }.reach-count strong { font-variant-numeric: tabular-nums; }
.reach-gain strong { color: var(--life-core); }.reach-loss strong { color: var(--state-warn); }
.reach-factors { display: grid; gap: 2px; }.reach-factor { display: grid; grid-template-columns: minmax(8rem,1fr) minmax(4rem,.8fr) auto; align-items: center; gap: var(--sp-2); min-height: var(--touch-min); width: 100%; padding: var(--sp-1) 0; color: var(--text-secondary); background: transparent; text-align: left; font-size: var(--fs-caption); }
.reach-bar { height: 5px; overflow: hidden; border-radius: var(--radius-pill); background: var(--border-faint); }.reach-bar i { display: block; width: calc(var(--reach-factor) * 100%); height: 100%; background: currentColor; }
.reach-factor > span:last-child { font-variant-numeric: tabular-nums; }

.dialog-copy {
  margin: var(--sp-2) 0 var(--sp-4);
  color: var(--text-secondary);
  font-size: var(--fs-caption);
}

.eyebrow {
  margin-bottom: var(--sp-2);
  color: var(--life-core);
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.result-rank { margin-top: var(--sp-3); color: var(--accent-gold); font-weight: 700; }
.result-score { display: block; margin: var(--sp-2) 0; font-size: var(--fs-score); font-variant-numeric: tabular-nums; }
.result-copy, .result-echoes { color: var(--text-secondary); }
.result-echoes { margin-top: var(--sp-4); color: var(--memory-violet); }
.result-imprint { margin-bottom: var(--sp-4); color: var(--accent-gold); font-size: var(--fs-caption); }
.result-breakdown { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-4) 0; }
.breakdown-row { padding: var(--sp-2) 0; border-top: 1px solid var(--border-faint); color: var(--text-secondary); font-size: var(--fs-caption); font-variant-numeric: tabular-nums; }

.memory-nodes { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.memory-node {
  display: grid;
  gap: 2px;
  min-height: var(--touch-min);
  padding: var(--sp-3) var(--sp-2);
  color: var(--text-primary);
  background: transparent;
  border-top: 1px solid var(--border-strong);
  border-radius: 0;
  text-align: left;
}
.memory-node:disabled { opacity: 0.42; }
.memory-node-name { font-weight: 700; }
.memory-node-effect { color: var(--text-secondary); font-size: var(--fs-caption); }
.memory-node-cost { color: var(--accent-gold); font-size: var(--fs-caption); }

/* Rare transient feedback stays near bottom context, never over the globe center. */
#toast-root {
  position: absolute;
  bottom: calc(5rem + var(--safe-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: center;
  pointer-events: none;
}

.toast {
  padding: var(--sp-2) var(--sp-4);
  background: var(--bg-panel-solid);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-body);
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}