/* The Liskov Substitution Principle, made tangible. A caller expects a Rectangle:
   it sets width and height independently and expects area = w x h. A Rectangle
   honors that; a Square — which keeps width and height equal — passes the type
   check but breaks the behavior, because setting the height silently changes the
   width. Inheriting a type's shape is not the same as honoring its promises.
   Vanilla JS, no deps, no build. Dark theme. Palette shared with sibling widgets:
   green = the contract held (the win), neutral = it broke. No red. */

#liskov-substitution {
  --lk-ok: #30d158;                  /* the contract held — the win */
  --lk-cur: #5ac8fa;                 /* currently executing line / live value */
  --lk-muted: rgba(255,255,255,0.5); /* a broken contract — neutral, never red */
  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);
}

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

/* type chooser */
.lk-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px;
  background: var(--color-bg-surface, #1a1a1a); margin-bottom: 18px; }
.lk-mode {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.86rem; font-weight: 600;
  border: 0; background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.55));
  padding: 7px 16px; border-radius: 7px; transition: color 0.18s, background 0.18s;
}
.lk-mode:hover { color: var(--color-text-primary, #fff); }
.lk-mode.is-on { color: #0b0b0b; background: var(--color-accent, #fff); }

.lk-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .lk-grid { grid-template-columns: 1.3fr 1fr; align-items: start; } }

/* the caller code */
.lk-code {
  font-family: var(--font-mono, "SF Mono", Monaco, monospace); font-size: 0.82rem; line-height: 1.7;
  background: #0c0c0f; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 9px; padding: 14px 16px; white-space: pre; overflow-x: auto; color: #c8c8cc;
}
.lk-line { display: block; border-radius: 4px; padding: 0 6px; margin: 0 -6px; transition: background 0.2s; }
.lk-line.is-cur { background: rgba(90,200,250,0.16); }
.lk-cmt { color: rgba(255,255,255,0.38); }

/* the live object state + shape */
.lk-state {
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08));
  border-radius: 12px; padding: 16px; transition: border-color 0.25s;
}
.lk-state.is-ok { border-color: var(--lk-ok); }
.lk-vars { display: flex; gap: 18px; font-family: var(--font-mono, monospace); font-size: 0.82rem; margin-bottom: 12px; }
.lk-var { color: var(--color-text-secondary, rgba(255,255,255,0.55)); }
.lk-var b { display: block; color: #fff; font-size: 1.3rem; font-variant-numeric: tabular-nums; margin-top: 2px; transition: color 0.2s; }
.lk-var.is-changed b { color: var(--lk-cur); }
.lk-shape-wrap { height: 92px; display: flex; align-items: center; justify-content: center; }
.lk-shape {
  background: rgba(90,200,250,0.14); border: 1.5px solid var(--lk-cur);
  border-radius: 3px; transition: width 0.4s ease, height 0.4s ease, border-color 0.3s, background 0.3s;
}
.lk-state.is-ok .lk-shape { border-color: var(--lk-ok); background: rgba(48,209,88,0.14); }

/* verdict + controls */
.lk-verdict {
  margin-top: 16px; font-size: 0.92rem; line-height: 1.55; min-height: 1.4em;
  color: var(--color-text-secondary, rgba(255,255,255,0.78));
}
.lk-verdict b { color: #fff; }
.lk-verdict .lk-pass { color: var(--lk-ok); font-weight: 650; }
.lk-verdict .lk-break { color: #fff; font-weight: 650; }

.lk-controls { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.lk-btn {
  appearance: none; cursor: pointer; font: inherit; font-size: 0.88rem;
  border: 1px solid var(--color-border, rgba(255,255,255,0.15)); background: transparent;
  color: var(--color-text-primary, #fff); border-radius: 9px; padding: 9px 16px;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.lk-btn:hover:not(:disabled) { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.05); }
.lk-btn:disabled { opacity: 0.45; cursor: default; }
.lk-btn--primary { background: var(--color-accent, #fff); border-color: var(--color-accent, #fff); color: #0b0b0b; font-weight: 650; }
.lk-btn--primary:hover:not(:disabled) { opacity: 0.9; background: var(--color-accent, #fff); }

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