/* Lab: what a DNS query leaks.
   Scoped to this one page. Every class is prefixed .dns- so it cannot collide
   with the site stylesheet or with another lab. Design tokens (--accent,
   --bg-raised, --mono ...) come from /css/style.css.

   Colour meaning throughout, matched to the TLS inspection lab so the two
   read as a pair:
     red   = readable by anything on the path — the thing that leaks
     green = encrypted on the wire
     amber = plaintext here because this party is an endpoint, not an observer

   Amber is doing real work on this page. The resolver row is amber in every
   transport, and that is the point the lab is making. */

/* ---------- glossary ---------- */

.dns-glossary { margin: 10px 0 0 20px; font-size: 0.92rem; }
.dns-glossary li { margin: 7px 0; color: var(--text-muted); }
.dns-glossary strong { color: var(--text); font-family: var(--mono); font-size: 0.9em; }

/* ---------- controls ---------- */

.dns-controls { margin-top: 32px; }

.dns-control-row {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 14px;
  align-items: end;
}
@media (max-width: 560px) {
  .dns-control-row { grid-template-columns: 1fr; }
}

.dns-control-row input[type="text"],
.dns-control-row select {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 0.95rem;
  padding: 10px 12px;
}
.dns-control-row input[type="text"]:focus,
.dns-control-row select:focus { outline: none; border-color: var(--accent); }

.dns-presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.dns-preset {
  background: none;
  border: 1px dashed var(--border);
  border-radius: 999px;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 4px 12px;
  cursor: pointer;
}
.dns-preset:hover { border-color: var(--accent); border-style: solid; color: var(--accent); }

.dns-modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  border: none;
  margin-top: 22px;
  padding: 0;
}
@media (max-width: 720px) {
  .dns-modes { grid-template-columns: 1fr; }
}
.dns-modes legend { margin-bottom: 8px; }

.dns-mode {
  display: block;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-raised);
  padding: 12px 16px;
  cursor: pointer;
}
.dns-mode:hover { border-color: var(--text-muted); }
.dns-mode input { accent-color: var(--accent); margin-right: 8px; }
.dns-mode-name { font-family: var(--mono); font-size: 0.92rem; font-weight: 700; }
.dns-mode-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 4px;
  padding-left: 24px;
}
.dns-mode:has(input:checked) { border-color: var(--accent); }

.dns-status {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 14px;
  min-height: 1.2em;
}
.dns-status-error { color: var(--accent); }
.dns-status-ok { color: var(--text-muted); }

/* ---------- the path diagram ---------- */

.dns-diagram-wrap { margin: 34px 0 8px; }

.dns-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px 18px;
  font-family: var(--mono);
  font-size: 0.82rem;
}

.dns-node {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-raised);
  padding: 8px 12px;
  white-space: nowrap;
}
.dns-node-client { border-color: var(--text-muted); }
.dns-node-resolver { border-color: #b8860b; color: #d6a127; }
.dns-node-auth { border-color: var(--border); color: var(--text-muted); }

.dns-hop { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; }
.dns-hop-line { letter-spacing: -1px; }
.dns-hop-label { font-size: 0.7rem; }
.dns-hop-clear .dns-hop-line,
.dns-hop-clear .dns-hop-label { color: var(--accent); }
.dns-hop-opaque .dns-hop-line,
.dns-hop-opaque .dns-hop-label { color: var(--allow); }

.dns-diagram-caption {
  font-size: 0.83rem;
  color: var(--text-muted);
  margin-top: 10px;
}

/* ---------- stages ---------- */

.dns-stage {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 8px;
  background: var(--bg-raised);
  padding: 18px 20px;
  margin-top: 18px;
}
.dns-stage-clear { border-left-color: var(--accent); }
.dns-stage-opaque { border-left-color: var(--allow); }
.dns-stage-endpoint { border-left-color: #b8860b; }
.dns-stage-skipped { border-left-color: var(--text-muted); }

/* the reveal animation the engine drives one stage at a time */
.dns-pending { opacity: 0; transform: translateY(6px); }
.dns-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.28s ease, transform 0.28s ease;
}
@media (prefers-reduced-motion: reduce) {
  .dns-pending { opacity: 1; transform: none; }
  .dns-in { transition: none; }
}

.dns-stage-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dns-stage-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.dns-stage-title { margin: 0; font-size: 1.02rem; }
.dns-stage-leg {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  margin: 6px 0 0;
}
.dns-stage-transport {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--accent);
  margin: 4px 0 0;
}
.dns-stage-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
}

.dns-badge {
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 2px 7px;
  border: 1px solid;
}
.dns-badge-clear { color: var(--accent); border-color: var(--accent); }
.dns-badge-opaque { color: var(--allow); border-color: var(--allow); }
.dns-badge-endpoint { color: #d6a127; border-color: #b8860b; }
.dns-badge-skipped { color: var(--text-muted); border-color: var(--border); }

/* ---------- panels ---------- */

.dns-panel {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-inset);
  padding: 14px 16px;
  margin-top: 14px;
}
/* The wire panel is what an observer gets; the endpoint panel is what the
   resolver gets. The endpoint one is bordered amber so that, scrolling
   through all three transports, the eye lands on the panel that never
   changes. */
.dns-panel-wire { border-color: var(--border); }
.dns-panel-endpoint { border-color: #6b5107; }

.dns-mini-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.dns-panel-summary { font-size: 0.9rem; margin: 0 0 12px; }

/* ---------- field rows ---------- */

.dns-field {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 4px 12px;
  padding: 5px 0;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
}
.dns-field:first-of-type { border-top: none; }
@media (max-width: 560px) {
  .dns-field { grid-template-columns: 1fr; }
}
.dns-field-label {
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--text-muted);
  text-transform: lowercase;
}
.dns-field-value { font-family: var(--mono); font-size: 0.82rem; word-break: break-all; }
.dns-field-hidden { color: var(--allow); font-style: italic; }
.dns-field-note {
  grid-column: 2;
  font-size: 0.78rem;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .dns-field-note { grid-column: 1; }
}

/* ---------- the hex dump ----------
   The whole visual argument of this lab lives in the ASCII gutter. When the
   packet is plaintext that gutter is red and the hostname is legible in it.
   When it is ciphertext the gutter is green and it is noise. */

.dns-hex {
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  padding: 12px 14px;
  overflow-x: auto;
}
.dns-hex-clear { border-color: var(--accent-dim); }
.dns-hex-opaque { border-color: var(--allow); }

.dns-hex-line {
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.65;
  white-space: pre;
}
.dns-hex-offset { color: var(--text-muted); flex: 0 0 auto; }
.dns-hex-bytes { color: var(--text); flex: 0 0 auto; }
.dns-hex-ascii { flex: 0 0 auto; }
.dns-hex-ascii::before { content: "|"; color: var(--text-muted); }
.dns-hex-ascii::after { content: "|"; color: var(--text-muted); }
.dns-hex-clear .dns-hex-ascii { color: var(--accent); font-weight: 700; }
.dns-hex-opaque .dns-hex-ascii { color: var(--text-muted); }

/* ---------- the strings scan ---------- */

.dns-strings {
  margin-top: 12px;
  border-left: 3px solid var(--border);
  padding: 10px 0 4px 14px;
}
.dns-strings-hit { border-left-color: var(--accent); }
.dns-strings-miss { border-left-color: var(--allow); }

.dns-strings-list { display: flex; flex-wrap: wrap; gap: 6px; }
.dns-string {
  font-family: var(--mono);
  font-size: 0.78rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 2px 8px;
  color: var(--text-muted);
  white-space: pre;
}
.dns-string-name {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 700;
}
.dns-strings-none, .dns-strings-caption {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin: 10px 0 0;
}

/* ---------- the QNAME strip ---------- */

.dns-qname { margin-top: 16px; }

.dns-qname-strip { display: flex; flex-wrap: wrap; gap: 6px; align-items: stretch; }

.dns-qname-part {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--accent-dim);
  border-radius: 4px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 0.8rem;
}
.dns-qname-len {
  background: var(--bg);
  color: var(--text-muted);
  padding: 4px 7px;
  border-right: 1px solid var(--accent-dim);
}
.dns-qname-text { padding: 4px 10px; color: var(--accent); font-weight: 700; }
.dns-qname-root { border-color: var(--border); }
.dns-qname-root .dns-qname-len { border-right-color: var(--border); }
.dns-qname-root .dns-qname-text { color: var(--text-muted); font-weight: 400; }

.dns-qname-caption { font-size: 0.82rem; color: var(--text-muted); margin: 10px 0 0; }

/* ---------- the decoded message ---------- */

.dns-message { margin-top: 4px; }
.dns-message-group { margin-bottom: 12px; }
.dns-message .dns-mini-label { margin-top: 10px; }

/* ---------- section headings inside the output ---------- */

.dns-section-heading { margin-top: 42px; }
.dns-section-lede { color: var(--text-muted); font-size: 0.92rem; margin-top: -6px; }

/* ---------- the visibility matrix ---------- */

.dns-matrix-wrap { margin-top: 16px; overflow-x: auto; }

.dns-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  min-width: 640px;
}
.dns-matrix th, .dns-matrix td {
  border: 1px solid var(--border);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}
.dns-matrix thead th {
  font-family: var(--mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: var(--bg-inset);
}
.dns-matrix tbody th { background: var(--bg-inset); width: 210px; }

.dns-observer-label { display: block; font-weight: 700; font-size: 0.86rem; }
.dns-observer-where {
  display: block;
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 3px;
}

.dns-cell-level {
  display: block;
  font-family: var(--mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.dns-cell-clear .dns-cell-level { color: var(--accent); }
.dns-cell-opaque .dns-cell-level { color: var(--allow); }
.dns-cell-endpoint .dns-cell-level { color: #d6a127; }
.dns-cell-sees {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-muted);
  word-break: break-word;
}

/* A row that does not change across transports gets a flat left edge; a row
   that does gets the accent. Reading down the flat ones is the lesson. */
.dns-row-same th { border-left: 3px solid #b8860b; }
.dns-row-diff th { border-left: 3px solid var(--allow); }

.dns-matrix-caption { font-size: 0.85rem; color: var(--text-muted); margin-top: 12px; }

/* ---------- the observer cards ---------- */

.dns-observers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 16px;
}

.dns-observer {
  border: 1px solid var(--border);
  border-top-width: 3px;
  border-radius: 8px;
  background: var(--bg-raised);
  padding: 16px 18px;
}
.dns-observer-clear { border-top-color: var(--accent); }
.dns-observer-opaque { border-top-color: var(--allow); }
.dns-observer-endpoint { border-top-color: #b8860b; }

.dns-observer-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dns-observer h4 { margin: 0; font-size: 0.95rem; }
.dns-observer p { font-size: 0.86rem; color: var(--text-muted); margin: 10px 0 0; }
.dns-observer-sees {
  font-family: var(--mono);
  font-size: 0.78rem;
  word-break: break-word;
}
.dns-pin {
  font-family: var(--mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #d6a127;
  border: 1px dashed #b8860b;
  border-radius: 3px;
  padding: 2px 7px;
}

/* ---------- caveats and sources ---------- */

.dns-caveat-list { margin-top: 8px; }

.dns-caveat {
  border-left: 3px solid var(--border);
  padding: 4px 0 4px 16px;
  margin: 20px 0;
}
.dns-caveat h3 { margin: 0 0 8px; font-size: 0.98rem; }
.dns-caveat p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

.dns-sources { margin: 10px 0 0 20px; font-size: 0.88rem; }
.dns-sources li { margin: 10px 0; }
.dns-source-note { color: var(--text-muted); }