/* Good Taste — interactive linked-list deletion playground.
   Embodies Linus Torvalds' "good taste": the special case that disappears.
   Single-column, fits the article body. Vanilla, no build. Dark theme via vars. */

#good-taste-demo {
  --gt-accent: #5ac8fa;   /* walk / cur / general */
  --gt-special: #ff6b6b;  /* special-case head branch */
  --gt-good: #30d158;     /* good-taste highlight */
  --gt-prev: #ffd166;     /* prev pointer */
  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);
}

.gt-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.gt-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.gt-sub { font-size: 0.8rem; color: var(--color-text-tertiary, rgba(255, 255, 255, 0.45)); }

/* mode toggle */
.gt-modes { display: flex; gap: 8px; margin: 16px 0 18px; flex-wrap: wrap; }
.gt-mode {
  appearance: none; flex: 1 1 200px;
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12));
  background: transparent; color: var(--color-text-secondary, rgba(255, 255, 255, 0.65));
  font: inherit; font-size: 0.84rem; padding: 10px 14px; border-radius: 9px; cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.gt-mode:hover { color: var(--color-text-primary, #fff); border-color: rgba(255,255,255,0.25); }
.gt-mode[aria-pressed="true"] { color: #0b0b0b; background: var(--gt-accent); border-color: var(--gt-accent); font-weight: 650; }
.gt-mode--good[aria-pressed="true"] { background: var(--gt-good); border-color: var(--gt-good); }

/* stage holds the list, centered, full width */
.gt-stage {
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.06));
  border-radius: 12px;
  padding: 34px 16px 24px;
  display: flex; justify-content: center;
  overflow-x: auto;
}
.gt-list { display: flex; align-items: center; gap: 0; min-height: 80px; }
@media (max-width: 520px) { .gt-stage { justify-content: flex-start; } }

/* head pointer cell (slot 0 = &head) */
.gt-headcell {
  flex: 0 0 auto; position: relative;
  font-family: var(--font-mono, monospace); font-size: 0.74rem; font-weight: 700;
  color: var(--color-text-secondary, rgba(255,255,255,0.62));
  padding: 6px 10px; margin-right: 2px;
  border: 1px dashed rgba(255,255,255,0.25); border-radius: 8px;
  transition: border-color 0.2s, color 0.2s;
}
.gt-headcell.is-indirect { border-color: var(--gt-good); color: var(--gt-good); border-style: solid; }

.gt-node {
  flex: 0 0 auto; position: relative;
  min-width: 54px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono, "SF Mono", Monaco, monospace); font-size: 1.12rem; font-weight: 650;
  color: var(--color-text-primary, #fff);
  background: var(--color-bg-elevated, #131313);
  border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 11px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s,
              opacity 0.35s, min-width 0.35s, width 0.35s, margin 0.35s, padding 0.35s, border-width 0.35s;
}
.gt-node:hover { border-color: rgba(255,255,255,0.55); transform: translateY(-2px); }
.gt-node.is-cur { border-color: var(--gt-accent); box-shadow: 0 0 0 3px rgba(90,200,250,0.2); }
.gt-node.is-match { border-color: var(--gt-good); box-shadow: 0 0 0 3px rgba(48,209,88,0.24); }
.gt-node.is-match--special { border-color: var(--gt-special); box-shadow: 0 0 0 3px rgba(255,107,107,0.24); }
.gt-node.is-removing { opacity: 0; min-width: 0; width: 0; padding: 0; margin: 0; border-width: 0; transform: translateY(-14px) scale(0.55); }

/* pointer badge above a node */
.gt-badge {
  position: absolute; top: -24px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono, monospace); font-size: 0.68rem; font-weight: 700;
  padding: 2px 7px; border-radius: 6px; white-space: nowrap; pointer-events: none;
}
.gt-badge--cur { color: #0b0b0b; background: var(--gt-accent); }
.gt-badge--prev { color: #0b0b0b; background: var(--gt-prev); }

/* links between nodes */
.gt-link {
  flex: 0 0 auto; position: relative; width: 40px; height: 2px;
  background: rgba(255,255,255,0.3);
  transition: background 0.2s, opacity 0.35s, width 0.35s;
}
.gt-link::after {
  content: ""; position: absolute; right: -1px; top: 50%;
  width: 8px; height: 8px;
  border-top: 2px solid rgba(255,255,255,0.3); border-right: 2px solid rgba(255,255,255,0.3);
  transform: translateY(-50%) rotate(45deg); transition: border-color 0.2s;
}
.gt-link.is-indirect { background: var(--gt-good); height: 3px; }
.gt-link.is-indirect::after { border-top-color: var(--gt-good); border-right-color: var(--gt-good); }
.gt-link.is-removing { width: 0; opacity: 0; }
.gt-link .gt-ibadge, .gt-headcell .gt-ibadge {
  position: absolute; top: 110%; left: 50%; transform: translateX(-50%); margin-top: 6px;
  font-family: var(--font-mono, monospace); font-size: 0.64rem; font-weight: 700;
  color: #0b0b0b; background: var(--gt-good); padding: 2px 6px; border-radius: 6px; white-space: nowrap;
}
.gt-headcell .gt-ibadge { top: auto; }

.gt-terminal {
  flex: 0 0 auto; padding-left: 8px;
  font-family: var(--font-mono, monospace); font-size: 0.8rem;
  color: var(--color-text-tertiary, rgba(255,255,255,0.4));
}

/* live "what just happened" line — the lesson */
.gt-status {
  margin: 16px 0 16px;
  background: var(--color-bg-surface, #1a1a1a);
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.09));
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 0.9rem; line-height: 1.55;
  color: var(--color-text-secondary, rgba(255,255,255,0.78));
  min-height: 1.4em;
  transition: border-color 0.2s;
}
.gt-status strong { color: #fff; }
.gt-status code { font-family: var(--font-mono, monospace); font-size: 0.86em; background: rgba(255,255,255,0.07); padding: 1px 5px; border-radius: 4px; }
.gt-status.is-special { border-color: var(--gt-special); }
.gt-status.is-good { border-color: var(--gt-good); }
.gt-status .tag-special { color: var(--gt-special); font-weight: 700; }
.gt-status .tag-good { color: var(--gt-good); font-weight: 700; }

/* code panel — full width */
.gt-code {
  background: #0c0c0f;
  border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.07));
  border-radius: 12px;
  padding: 16px 0; margin: 0; overflow-x: auto;
  font-family: var(--font-mono, "SF Mono", Monaco, monospace);
  font-size: 0.82rem; line-height: 1.65;
}
.gt-code .ln {
  display: block; padding: 1px 18px 1px 15px; white-space: pre;
  color: rgba(255,255,255,0.6); border-left: 3px solid transparent;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.gt-code .ln.active { background: rgba(90,200,250,0.14); color: #fff; border-left-color: var(--gt-accent); }
.gt-code .ln.active--special { background: rgba(255,107,107,0.16); color: #fff; border-left-color: var(--gt-special); }
.gt-code .ln.active--good { background: rgba(48,209,88,0.15); color: #fff; border-left-color: var(--gt-good); }
.gt-code .cmt { color: rgba(255,255,255,0.34); }
.gt-code .kw { color: #c792ea; }
.gt-code .fn { color: #82aaff; }

/* footer / reset */
.gt-foot { display: flex; justify-content: flex-end; margin-top: 14px; }
.gt-reset {
  appearance: none; border: 1px solid var(--color-border, rgba(255,255,255,0.15));
  background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.65));
  font: inherit; font-size: 0.8rem; padding: 7px 16px; border-radius: 8px; cursor: pointer;
  transition: border-color 0.18s, color 0.18s;
}
.gt-reset:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

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

@media (prefers-reduced-motion: reduce) {
  #good-taste-demo .gt-node, #good-taste-demo .gt-link { transition: opacity 0.01s, background 0.18s, border-color 0.18s, box-shadow 0.18s; }
}