/* ══════════════════════════════════════════════════════════════════
   ll-scene.css — shared linked-list visualization component
   Persistent-DOM node rows + sliding pointer badges + animated
   connectors. Paired with ll-scene.js. See that file for the API.
   ══════════════════════════════════════════════════════════════════ */

.lls-row {
  position: relative;
  margin-bottom: 6px;
}
.lls-row:last-child { margin-bottom: 0; }

.lls-row-label {
  font-size: 0.62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); margin-bottom: 4px;
  font-family: var(--font-mono);
}

.lls-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 4px; }

.lls-strip {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 40px;
  padding-top: 64px;
  min-width: max-content;
}

/* ── Node column ──
   position:relative makes this an offsetParent, so a child box's
   offsetTop is scoped to the column (not the strip) — connectors and
   overlays that read `col.offsetTop + box.offsetTop` rely on this. */
.lls-node-col {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  flex-shrink: 0;
}

.lls-box {
  display: flex; align-items: stretch;
  height: 46px; min-width: 54px;
  border-radius: 8px; border: 2px solid var(--border);
  background: var(--bg3); color: var(--text);
  font-family: var(--font-mono); font-weight: 700;
  overflow: hidden;
  transition: opacity .3s, transform .3s cubic-bezier(.22,1,.36,1),
              border-color .3s, background .3s, color .3s, box-shadow .3s;
}
.lls-val {
  display: flex; align-items: center; justify-content: center;
  min-width: 38px; padding: 0 8px; font-size: 1.05rem;
}
.lls-sep { width: 1px; background: var(--border); flex-shrink: 0; transition: background .3s; }
.lls-ptr {
  display: flex; align-items: center; justify-content: center;
  padding: 0 7px; font-size: .78rem; color: var(--muted); flex-shrink: 0;
}

/* enter / leave states */
.lls-node-col.lls-entering .lls-box { opacity: 0; transform: scale(.72); }

.lls-ghost {
  border-radius: 8px; opacity: 1; transform: scale(1);
}

/* ── Null terminator ── */
.lls-null-col { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.lls-null {
  color: var(--muted); font-family: var(--font-mono); font-size: .82rem;
  height: 46px; display: flex; align-items: center; padding: 0 10px;
  border: 1px dashed var(--border); border-radius: 6px; background: var(--bg2);
}

/* ── Connector arrow ── */
.lls-conn {
  position: absolute; height: 24px; pointer-events: none;
  transform-origin: center;
  transition: left .42s cubic-bezier(.22,1,.36,1), top .3s, width .3s,
              opacity .3s, transform .38s cubic-bezier(.22,1,.36,1);
}
.lls-conn line, .lls-conn polyline { stroke: var(--muted); }
.lls-conn.rev { transform: scaleX(-1); }

/* ── Pointer badge (floats above the node strip, slides via transform) ── */
.lls-badge {
  position: absolute; top: 2px; left: 0;
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700;
  padding: 2px 7px; border-radius: 4px; line-height: 1.3; white-space: nowrap;
  opacity: 0; pointer-events: none;
  border: 1px solid var(--border); background: var(--bg3); color: var(--muted);
  transition: transform .42s cubic-bezier(.34,1.56,.64,1), opacity .25s,
              background .3s, border-color .3s, color .3s, top .25s;
}
.lls-badge-arrow { font-size: .7rem; line-height: 1; }

/* ── Tone system (shared by box / connector / badge) ── */
.tone-blue   { border-color: var(--blue);   background: var(--blue-bg); color: var(--cyan);   box-shadow: 0 0 16px #388bfd44; }
.tone-orange { border-color: var(--orange); background: #2a1e0a;        color: var(--orange); box-shadow: 0 0 14px #f0883e33; }
.tone-green  { border-color: var(--green);  background: var(--grn-bg); color: var(--green);  box-shadow: 0 0 14px #3fb95033; }
.tone-purple { border-color: var(--purple); background: var(--pur-bg); color: var(--purple); box-shadow: 0 0 14px #bc8cff33; }
.tone-red    { border-color: var(--red);    background: #3a1414;       color: var(--red);    box-shadow: 0 0 14px #f7816633; }
.tone-cyan   { border-color: var(--cyan);   background: #113247;       color: var(--cyan);   box-shadow: 0 0 14px #79c0ff33; }
.tone-yellow { border-color: var(--yellow); background: var(--yel-bg); color: var(--yellow); }
.tone-muted  { border-color: var(--border); background: var(--bg2);    color: var(--muted);  box-shadow: none; }

.lls-box.dim   { opacity: .55; }
.lls-box.future{ opacity: .7; }

/* svg strokes follow tone via currentColor */
.lls-conn.tone-blue line, .lls-conn.tone-blue polyline { stroke: var(--blue); }
.lls-conn.tone-orange line, .lls-conn.tone-orange polyline { stroke: var(--orange); }
.lls-conn.tone-green line, .lls-conn.tone-green polyline { stroke: var(--green); }
.lls-conn.tone-purple line, .lls-conn.tone-purple polyline { stroke: var(--purple); }
.lls-conn.tone-red line, .lls-conn.tone-red polyline { stroke: var(--red); }
.lls-conn.tone-cyan line, .lls-conn.tone-cyan polyline { stroke: var(--cyan); }
.lls-conn.tone-muted line, .lls-conn.tone-muted polyline { stroke: var(--muted); }