/* DECIDE Level 2 add-on styles. Loaded AFTER harness.css on Level 2 pages only.
   Everything here is the "connection between levels" chrome: the callback that ties each
   Level 1 everyday object to its real biology, and the small "real name" reveal. Level 1 never
   loads this file, so nothing here changes Level 1. */

/* ---------- the realistic hero illustration (the Level 1 = Level 2 bridge) ---------- */
.l2hero{margin:22px 0 0;padding:0;border:1px solid var(--line);border-radius:2px;overflow:hidden;
  background:var(--surface)}
.l2hero img{width:100%;height:auto;display:block}

/* ---------- the level-bridge callback (top of every L2 puzzle) ---------- */
.levelcue{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
  margin:22px 0 0;padding:18px 22px;border:1px solid var(--line);border-radius:2px;
  background:var(--surface);overflow:hidden}
.lc-side{text-align:center;min-width:0}
.lc-side svg{width:100%;max-width:140px;height:auto;display:block;margin:0 auto 6px}
.lc-tag{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:8px}
.lc-l2 .lc-tag{color:var(--gold-ink)}
.lc-side p{margin:4px 0 0;font-family:var(--font-display);font-size:1.02rem;color:var(--fg);max-width:none}
.lc-side .sub{font-family:var(--font-body);font-size:.82rem;color:var(--muted);font-style:normal}
.lc-arrow{font-size:1.7rem;color:var(--gold-ink);font-family:var(--font-display);line-height:1}
.lc-caption{font-family:var(--font-display);font-style:italic;font-size:1.02rem;color:var(--fg);
  margin:14px 0 0;max-width:64ch}
.lc-caption b{font-style:normal;color:var(--gold-ink);font-weight:400}
@media(max-width:560px){
  .levelcue{grid-template-columns:1fr;gap:10px;text-align:center}
  .lc-arrow{transform:rotate(90deg);margin:0 auto}
}

/* ---------- a small "the real name" chip, for naming a molecule inline ---------- */
.realname{display:inline-flex;align-items:baseline;gap:6px;padding:2px 9px;border-radius:2px;
  background:var(--surface-2);border:1px solid var(--gold);font-family:var(--font-mono);
  font-size:.82rem;color:var(--gold-ink);white-space:nowrap}
.realname b{font-family:var(--font-body);color:var(--fg);font-weight:700}

/* ---------- the Level 3 hand-off banner on the card screen ---------- */
.tolevel3{margin:20px 0 0;padding:18px 22px;border:1px solid var(--gold);border-left-width:3px;
  border-radius:2px;background:var(--surface-2)}
.tolevel3 .tag{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-ink);display:block;margin-bottom:8px}
.tolevel3 p{font-family:var(--font-display);font-size:1.1rem;line-height:1.4;margin:0;max-width:58ch}
.tolevel3 a{color:var(--ink-text);font-weight:700}