/* ============================================================
   Shared styles for interactive DNS demos.
   Uses site tokens defined in Base.astro:
     --panel, --demo-muted, --demo-title-color, --code-bg, --rule, --fg, --accent
   Semantic status colors (teal=info, amber=warn, green=ok,
   purple=authority) are hardcoded — they read on both light
   and dark card surfaces.
   ============================================================ */

.demo {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 18px;
  margin: 22px 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04);
  font-size: 14px;
  color: var(--fg);
}
.demo h4 {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--demo-title-color);
}
.demo .demo-sub { margin: 0 0 14px; font-size: 13px; color: var(--demo-muted); }
.demo .demo-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 10px 0; }
.demo label { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--demo-muted); }
.demo input[type="text"],
.demo select {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--panel);
  color: var(--fg);
  min-width: 220px;
}
.demo input[type="range"] { width: 180px; }
.demo .preset-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 10px 0;
}
.demo .preset-list button { text-align: left; }
.demo button {
  font-family: inherit;
  font-size: 13px;
  padding: 6px 14px;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--fg);
  border-radius: 3px;
  cursor: pointer;
}
.demo button.primary { background: #0f5b6e; color: #fff; border-color: #0f5b6e; }
.demo button:hover:not(:disabled) { background: var(--code-bg); }
.demo button.primary:hover:not(:disabled) { filter: brightness(1.1); }
.demo button:disabled { opacity: 0.5; cursor: not-allowed; }
.demo .readout {
  font-family: "SF Mono", ui-monospace, monospace;
  background: var(--code-bg);
  padding: 6px 10px;
  border-radius: 3px;
  font-size: 13px;
}
.demo .out, .demo .output {
  font-family: "SF Mono", ui-monospace, monospace;
  background: var(--code-bg);
  padding: 12px 14px;
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-x: auto;
  margin: 10px 0;
  border: 1px solid var(--rule);
  transition: opacity .15s;
}
.demo .out.is-loading, .demo .output.is-loading { opacity: 0.4; }
.demo .status { font-size: 12px; color: var(--demo-muted); font-style: italic; }
.demo .err { color: #a25a14; }
.demo .ok  { color: #3a6a3a; }
.demo .pill {
  display: inline-block;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--code-bg);
  color: var(--demo-muted);
}
.demo .pill.ok   { background: #dde8d6; color: #3a6a3a; }
.demo .pill.warn { background: #f6e6cd; color: #a25a14; }
.demo .pill.info { background: #cfe3e8; color: #0f5b6e; }

/* hex dump (packet inspector) */
.hexdump {
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  background: var(--code-bg);
  padding: 12px 14px;
  border-radius: 4px;
  border: 1px solid var(--rule);
  overflow-x: auto;
  white-space: pre;
  color: var(--fg);
}
.hexdump .hex-byte { display: inline-block; padding: 1px 1px; border-radius: 2px; cursor: help; transition: background .15s; }
.hexdump .hex-byte:hover     { background: rgba(15,91,110,.25); }
.hexdump .sec-header         { background: rgba(15,91,110,.12); }
.hexdump .sec-question       { background: rgba(58,106,58,.14); }
.hexdump .sec-answer         { background: rgba(162,90,20,.14); }
.hexdump .sec-authority      { background: rgba(93,63,138,.14); }
.hexdump .sec-additional     { background: rgba(15,91,110,.07); }
.hex-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; margin: 8px 0; color: var(--fg); }
.hex-legend span { padding: 2px 8px; border-radius: 3px; }
.hex-legend .lg-header     { background: rgba(15,91,110,.22); }
.hex-legend .lg-question   { background: rgba(58,106,58,.26); }
.hex-legend .lg-answer     { background: rgba(162,90,20,.26); }
.hex-legend .lg-authority  { background: rgba(93,63,138,.26); }
.hex-legend .lg-additional { background: rgba(15,91,110,.14); }
.hex-tooltip {
  position: absolute;
  background: #1a1d22;
  color: #fff;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 3px;
  pointer-events: none;
  z-index: 1000;
  max-width: 280px;
  line-height: 1.4;
}

/* table for record-list demos */
.demo-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.demo-table th, .demo-table td { padding: 6px 10px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.demo-table th { background: var(--code-bg); font-weight: 600; }
.demo-table td.num { font-family: "SF Mono", ui-monospace, monospace; text-align: right; }
.demo-table tr.highlight td { background: #cfe3e8; color: #0f5b6e; }

/* bar chart (RTT etc) */
.bars { display: grid; gap: 6px; margin: 8px 0; }
.bar { display: grid; grid-template-columns: 110px 1fr 90px; align-items: center; gap: 8px; font-size: 12px; }
.bar .bar-label { color: var(--fg); font-weight: 500; }
.bar .bar-track { height: 14px; background: var(--code-bg); border-radius: 3px; overflow: hidden; position: relative; }
.bar .bar-fill  { height: 100%; background: #0f5b6e; transition: width .3s ease; }
.bar .bar-value { font-family: "SF Mono", ui-monospace, monospace; color: var(--demo-muted); text-align: right; }

/* cascade visualization (TTL countdown) */
.cascade { display: grid; gap: 6px; margin: 12px 0; }
.cascade-row {
  display: grid;
  grid-template-columns: 160px 140px 1fr 60px;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
  font-size: 13px;
  transition: background .3s;
}
.cascade-row.truth { background: #cfe3e8; border-color: #0f5b6e; color: #0f5b6e; }
.cascade-row.stale { background: #f6e6cd; border-color: #e0c397; color: #a25a14; }
.cascade-row .layer { font-weight: 600; color: #0f5b6e; }
.cascade-row .ip { font-family: "SF Mono", ui-monospace, monospace; }
.cascade-row .ttl-bar { height: 8px; background: var(--code-bg); border-radius: 2px; overflow: hidden; }
.cascade-row .ttl-bar > div { height: 100%; background: #0f5b6e; transition: width .2s linear; }
.cascade-row .ttl-val { font-family: "SF Mono", ui-monospace, monospace; font-size: 11px; color: var(--demo-muted); text-align: right; }

/* step-by-step demo (cold lookup, etc) */
.step-list { list-style: none; padding: 0; margin: 12px 0; counter-reset: step; }
.step-list li {
  position: relative;
  padding: 10px 12px 10px 44px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: 6px 0;
  background: var(--panel);
  font-size: 13.5px;
  transition: background .25s, border-color .25s;
}
.step-list li:before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--code-bg);
  color: var(--demo-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 600;
}
.step-list li.active        { background: #cfe3e8; border-color: #0f5b6e; color: #0f5b6e; }
.step-list li.active:before { background: #0f5b6e; color: #fff; }
.step-list li.done:before   { background: #3a6a3a; color: #fff; }
.step-list li .step-cache {
  display: inline-block;
  font-size: 11px;
  padding: 1px 7px;
  border-radius: 8px;
  margin-left: 8px;
  background: var(--code-bg);
  color: var(--demo-muted);
}
.step-list li.hit  .step-cache { background: #dde8d6; color: #3a6a3a; }
.step-list li.miss .step-cache { background: #f6e6cd; color: #a25a14; }

/* two-user comparison */
.two-user { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 12px 0; }
.two-user .panel { padding: 12px; border: 1px solid var(--rule); border-radius: 4px; background: var(--panel); }
.two-user .panel h5 { margin: 0 0 8px; font-size: 14px; color: #0f5b6e; }
@media (max-width: 720px) { .two-user { grid-template-columns: 1fr; } }

/* root letter table for ch3 demos */
.root-letter-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0; }
.root-letter-table th, .root-letter-table td { padding: 5px 8px; border-bottom: 1px solid var(--rule); text-align: left; }
.root-letter-table .num { font-family: "SF Mono", ui-monospace, monospace; text-align: right; }

/* Kaminsky race sim */
.race-canvas {
  background: var(--code-bg);
  border-radius: 4px;
  padding: 12px;
  margin: 10px 0;
  font-family: "SF Mono", ui-monospace, monospace;
  font-size: 12px;
  color: var(--fg);
}
.race-stat {
  display: inline-block;
  margin: 0 14px 6px 0;
  padding: 4px 10px;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

/* anycast SVG container */
.anycast-svg { display: block; width: 100%; max-width: 100%; }
.anycast-svg .node          { fill: #0f5b6e; }
.anycast-svg .node.failed   { fill: #a25a14; }
.anycast-svg .route         { stroke: #0f5b6e; stroke-width: 1.5; fill: none; opacity: .7; }
.anycast-svg .route.alt     { stroke: #a25a14; stroke-dasharray: 4 3; }
.anycast-svg .user          { fill: #a25a14; }
.anycast-svg text           { font-family: inherit; font-size: 11px; fill: var(--fg); }

/* lan probe results */
.lan-probe .row { display: grid; grid-template-columns: 180px 200px 1fr; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); align-items: center; }
.lan-probe .row:last-child { border-bottom: none; }
.lan-probe .ip { font-family: "SF Mono", ui-monospace, monospace; font-size: 13px; }