/* Alan Kay's real OOP: independent objects that hold their own private state and
   talk only by sending messages. Send the same message to a circle, a rectangle,
   and a line — each answers in its own way, and the sender never asks what type it
   is. That is messaging, encapsulation, and late binding. Vanilla JS, no deps, no
   build. Dark theme. Palette shared with sibling widgets: cyan = a message in
   flight, green = an answered object. No red. */

#message-passing {
  --mp-msg: #5ac8fa;                 /* a message in flight */
  --mp-ans: #30d158;                 /* an object that answered */
  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);
}

.mp-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.mp-explain {
  font-size: 0.9rem; line-height: 1.55; margin: 8px 0 18px;
  color: var(--color-text-secondary, rgba(255, 255, 255, 0.7));
}

/* message picker */
.mp-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--color-text-tertiary, rgba(255,255,255,0.42)); margin: 0 0 8px; }
.mp-msgs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.mp-msg-btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.84rem;
  font-family: var(--font-mono, "SF Mono", Monaco, monospace);
  color: var(--color-text-secondary, rgba(255,255,255,0.6));
  background: transparent; border: 1px solid var(--color-border, rgba(255,255,255,0.14));
  border-radius: 8px; padding: 7px 13px; transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.mp-msg-btn:hover { color: var(--color-text-primary, #fff); border-color: rgba(255,255,255,0.4); }
.mp-msg-btn.is-on { color: #0b0b0b; font-weight: 650; background: var(--color-accent, #fff); border-color: var(--color-accent, #fff); }

.mp-send {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.88rem; font-weight: 650;
  background: var(--color-accent, #fff); border: 1px solid var(--color-accent, #fff); color: #0b0b0b;
  border-radius: 9px; padding: 9px 18px; margin: 8px 0 18px; transition: opacity 0.15s;
}
.mp-send:hover { opacity: 0.9; }

/* the objects */
.mp-objects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 520px) { .mp-objects { grid-template-columns: 1fr; } }
.mp-obj {
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 14px; text-align: center;
  transition: border-color 0.25s, box-shadow 0.25s;
}
.mp-obj.is-receiving { border-color: var(--mp-msg); box-shadow: 0 0 0 3px rgba(90,200,250,0.18); }
.mp-obj.is-answered { border-color: var(--mp-ans); }
.mp-obj-name { font-family: var(--font-mono, monospace); font-size: 0.82rem; color: #fff; font-weight: 600; }
.mp-obj-state { font-family: var(--font-mono, monospace); font-size: 0.7rem; color: var(--color-text-tertiary, rgba(255,255,255,0.4)); margin-top: 2px; }
.mp-shape-wrap { height: 64px; display: flex; align-items: center; justify-content: center; margin: 10px 0; }
.mp-shape { stroke: var(--color-text-secondary, rgba(255,255,255,0.6)); fill: none; stroke-width: 2; transition: stroke 0.25s; }
.mp-obj.is-answered .mp-shape { stroke: var(--mp-ans); }
.mp-response {
  font-size: 0.86rem; color: var(--color-text-secondary, rgba(255,255,255,0.55)); min-height: 2.6em;
  display: flex; align-items: center; justify-content: center; line-height: 1.4;
  border-top: 1px solid var(--color-border-subtle, rgba(255,255,255,0.06)); padding-top: 10px;
}
.mp-obj.is-answered .mp-response { color: #fff; }
.mp-response b { color: var(--mp-ans); }

.mp-caption {
  margin-top: 16px; font-size: 0.88rem; line-height: 1.55; min-height: 1.4em;
  color: var(--color-text-secondary, rgba(255,255,255,0.72));
}
.mp-caption b { color: #fff; }

.mp-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }