/* Lua metatables — Roberto Ierusalimschy's "mechanisms, not policy," made visible.
   Lua gives you one data structure (the table) and one hook for customizing lookup
   (the __index metamethod). When a key is missing, Lua follows __index to another
   table. Chain those and you get inheritance, defaults, and full OOP -- none of it
   built into the language, all of it built from a single mechanism. Click a key and
   watch the lookup walk the __index chain. Vanilla JS, no deps, no build.
   Palette shared with siblings: cyan = table being checked, green = where the value
   was found (the win), dim = not reached. No red. */

#lua-metatable {
  --lm-check: #5ac8fa;
  --lm-hit: #30d158;
  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);
}
.lm-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.lm-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.lm-keys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.lm-key { appearance: none; cursor: pointer; font: inherit; font-family: var(--font-mono, monospace); font-size: 0.82rem; font-weight: 600; border: 1px solid var(--color-border, rgba(255,255,255,0.16)); background: var(--color-bg-surface, #1a1a1a); color: var(--color-text-secondary, rgba(255,255,255,0.8)); padding: 6px 11px; border-radius: 8px; transition: border-color 0.16s, color 0.16s, background 0.16s; }
.lm-key:hover { color: #fff; border-color: var(--lm-check); }
.lm-key.is-on { color: #0b0b0b; background: var(--color-accent, #fff); border-color: transparent; }

.lm-chain { display: flex; flex-direction: column; gap: 0; }
.lm-tbl { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.10)); border-radius: 12px; padding: 12px 14px; transition: border-color 0.25s, background 0.25s; }
.lm-tbl.checked { border-color: var(--lm-check); background: rgba(90,200,250,0.07); }
.lm-tbl.hit { border-color: var(--lm-hit); background: rgba(48,209,88,0.09); }
.lm-tbl.dim { opacity: 0.5; }
.lm-tbl-name { font-family: var(--font-mono, monospace); font-size: 0.84rem; font-weight: 650; color: #fff; margin-bottom: 7px; }
.lm-tbl-name .lm-role { font-family: var(--font-family, sans-serif); font-size: 0.68rem; font-weight: 500; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-left: 8px; }
.lm-fields { display: flex; flex-wrap: wrap; gap: 6px 14px; font-family: var(--font-mono, monospace); font-size: 0.8rem; }
.lm-field { color: var(--color-text-secondary, rgba(255,255,255,0.62)); }
.lm-field.found { color: var(--lm-hit); font-weight: 650; }
.lm-field .lm-fk { color: var(--color-text-primary, rgba(255,255,255,0.85)); }

.lm-link { display: flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-mono, monospace); font-size: 0.72rem; color: var(--color-text-tertiary, rgba(255,255,255,0.42)); padding: 5px 0; }
.lm-link .lm-arrow { font-size: 0.95rem; }

.lm-result { margin-top: 16px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.lm-result b { color: #fff; }
.lm-result .lm-val { font-family: var(--font-mono, monospace); }
.lm-result .lm-hl { color: var(--lm-hit); font-weight: 650; }
.lm-result .lm-nil { color: var(--lm-check); font-weight: 650; }
.lm-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }