/* Eventual consistency — Werner Vogels' Dynamo trade, made visible. A value lives on
   five replicas. Write to one and the others are briefly behind, yet every replica
   still answers reads instantly, so the system stays available. Each round the
   replicas gossip and a stale one adopts the newer version, until all five agree.
   For a short window different replicas return different answers (inconsistent) but
   none ever refuses (available) -- the availability-over-immediate-consistency trade
   Vogels championed. setInterval drives the gossip (rAF pauses when backgrounded).
   Vanilla JS, no deps, no build.
   Palette shared with siblings: green = holds the latest version, cyan = stale but
   still answering. No red. */

#eventual-consistency {
  --ec-fresh: #30d158;
  --ec-stale: #5ac8fa;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.ec-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.ec-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.ec-replicas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.ec-rep { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.10)); border-radius: 11px; padding: 12px 6px; text-align: center; transition: border-color 0.25s, background 0.25s; }
.ec-rep.fresh { border-color: var(--ec-fresh); background: rgba(48,209,88,0.08); }
.ec-rep.stale { border-color: var(--ec-stale); background: rgba(90,200,250,0.06); }
.ec-rep-name { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 6px; }
.ec-rep-val { font-family: var(--font-mono, monospace); font-size: 1.15rem; font-weight: 700; transition: color 0.2s; }
.ec-rep.fresh .ec-rep-val { color: var(--ec-fresh); }
.ec-rep.stale .ec-rep-val { color: var(--ec-stale); }
.ec-rep-ver { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-tertiary, rgba(255,255,255,0.4)); margin-top: 4px; }

.ec-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 16px 0 0; }
.ec-write { appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem; font-weight: 650; border: 0; border-radius: 8px; background: var(--color-accent, #fff); color: #0b0b0b; padding: 8px 15px; }
.ec-write:hover { opacity: 0.92; }
.ec-hint { font-size: 0.78rem; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); }

.ec-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.ec-stat { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; padding: 10px 12px; }
.ec-stat .ec-k { display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 4px; }
.ec-stat .ec-v { font-family: var(--font-mono, monospace); font-size: 1.05rem; font-weight: 650; }
.ec-stat .ec-v.ok { color: var(--ec-fresh); }
.ec-stat .ec-v.wait { color: var(--ec-stale); }
.ec-stat .ec-v.always { color: var(--ec-fresh); }

.ec-caption { margin-top: 14px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.ec-caption b { color: #fff; }
.ec-caption .ec-hl { color: var(--ec-fresh); font-weight: 650; }
.ec-caption .ec-lo { color: var(--ec-stale); font-weight: 650; }
.ec-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }