/* guide.css - the look of the figures of the guide to the Domain Name
 * System, on top of ../../engine.css: the field of names, the colours of
 * the types of record, the messages of a query, a zone file, the bytes of
 * a message and who sees the questions.
 */

/* ==========================================================================
   DNS
   ========================================================================== */
.figure > .hero-in { max-width: 26rem; margin-top: 0.5rem; }
.figure > .field-msg { max-width: 26rem; min-height: 1.5em; margin-top: 0; margin-bottom: 0; padding: 0.25rem 0 0; text-align: center; font-size: 0.88rem; line-height: 1.4; }
.figure > .chips { max-width: 40rem; justify-content: center; margin-top: 0.5rem; }
.anycast-you .chip { font-family: var(--sans); font-size: 0.92rem; }
/* cores dos tipos de registro */
.t-SOA { --tc: var(--c-slate); }
 .t-NS { --tc: var(--c-blue); }
 .t-A, .t-AAAA { --tc: var(--c-teal); }
.t-CNAME { --tc: var(--c-purple); }
 .t-MX { --tc: var(--c-orange); }
 .t-TXT { --tc: var(--c-amber); }
.t-CAA { --tc: var(--c-red); }
 .t-HTTPS { --tc: var(--c-cyan); }
 .t-PTR { --tc: var(--c-pink); }
.t-ORIGIN, .t-TTL { --tc: var(--muted); }
.zt { color: var(--tc, var(--head)); font-weight: 600; }
/* a escada: o conteúdo da mensagem escolhida */
.ladder-msg { min-height: 13rem; }
.lm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.3rem 0.8rem; }
.lm-head b { color: var(--head); font-size: 1.02rem; font-weight: 600; }
.lm-kind { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.05rem 0.55rem; border-radius: 999px; border: 1px solid currentColor; }
.lm-kind.k-q { color: var(--c-orange); }
 .lm-kind.k-ref { color: var(--c-blue); }
 .lm-kind.k-a { color: var(--c-teal); }
.lm-to { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
.lm-body {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.55; color: var(--head);
  background: var(--card2); border-radius: 9px; padding: 0.6rem 0.8rem; margin: 0.65rem 0 0.35rem; overflow-x: auto; white-space: pre;
}
.lm-sec { color: var(--muted); }
.ladder-msg .note { font-size: 1rem; line-height: 1.5; padding: 0.2rem 0 0; }
@media (max-width: 480px) { .lm-body { font-size: 0.7rem; padding: 0.5rem 0.55rem; } }
/* um arquivo de zona */
.zone { font-family: var(--mono); font-size: 0.84rem; line-height: 1.45; }
.zl {
  display: grid; grid-template-columns: 7ch 2ch 5ch minmax(0, 1fr); gap: 0 1.3ch; width: 100%; text-align: left;
  font: inherit; color: var(--ink); background: none; border: 0; border-radius: 6px; padding: 0.2rem 0.5rem; cursor: pointer;
}
.zl.dir { grid-template-columns: 7ch minmax(0, 1fr); }
.zl:hover { background: var(--card2); }
.zl.on { background: color-mix(in srgb, var(--link) 12%, var(--card)); box-shadow: inset 3px 0 0 var(--link); }
.zn { color: var(--head); overflow-wrap: anywhere; }
.zc, .zk { color: var(--muted); }
.zv { color: var(--ink); overflow-wrap: anywhere; }
.zone-cap { font-size: 0.86rem; color: var(--muted); margin: 0 0 0.5rem 0.5rem; }
.zone-ptr { margin-top: 0.9rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.zone-ptr .zl { display: flex; flex-wrap: wrap; gap: 0 1.3ch; }
.zcap { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0 0 0.25rem 0.5rem; }
.zone-info {
  margin: 0.25rem 0 0.6rem 0.5rem; padding: 0.55rem 0.8rem; border-left: 3px solid var(--tcx, var(--link)); background: var(--card2);
  border-radius: 0 8px 8px 0; font-family: var(--sans); font-size: 0.98rem; line-height: 1.5; color: var(--ink);
}
.zone-info .zt { font-family: var(--mono); margin-right: 0.2rem; }
@media (max-width: 480px) {
  .zone { font-size: 0.74rem; }
  .zl { gap: 0 1ch; padding-inline: 0.3rem; }
  .zone-info { font-size: 0.93rem; margin-left: 0.2rem; padding: 0.5rem 0.65rem; }
}
/* os bytes de uma mensagem */
#packet .row-wrap { justify-content: space-between; }
#packet .field input { width: 14rem; font-family: var(--mono); font-size: 1rem; }
.f-id, .f-flags, .f-cnt, .f-hdr { --fc: var(--s-slate); }
.f-len, .f-rdl { --fc: var(--s-amber); }
.f-lab { --fc: var(--s-green); }
.f-ptr { --fc: var(--s-pink); }
.f-qt { --fc: var(--s-purple); }
.f-ttl { --fc: var(--s-orange); }
.f-rd { --fc: var(--s-blue); }
.hex-legend { display: flex; flex-wrap: wrap; gap: 0.2rem 0.9rem; margin-top: 0.8rem; font-size: 0.84rem; color: var(--ink); }
.hl-i { display: inline-flex; align-items: center; gap: 0.35rem; }
.hl-i i { width: 0.8rem; height: 0.8rem; border-radius: 3px; background: color-mix(in srgb, var(--fc) 30%, var(--card)); border: 1px solid var(--fc); }
.hexg { display: flex; flex-wrap: wrap; gap: 0.3rem 0.22rem; margin-top: 0.6rem; font-family: var(--mono); }
.hf {
  display: inline-flex; flex-wrap: wrap; gap: 1px; padding: 2px; border-radius: 6px; cursor: pointer;
  background: color-mix(in srgb, var(--fc) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--fc) 45%, var(--line));
}
.hf:hover { border-color: var(--fc); }
.hf.on { background: color-mix(in srgb, var(--fc) 34%, var(--card)); border-color: var(--fc); box-shadow: 0 0 0 1px var(--fc); }
.hb { display: inline-flex; flex-direction: column; align-items: center; width: 1.6rem; }
.hh { font-size: 0.8rem; line-height: 1.3; color: var(--head); }
.hc { font-size: 0.68rem; line-height: 1.15; color: var(--muted); min-height: 1.15em; }
.hex-info { margin-top: 0.8rem; padding-top: 0.7rem; border-top: 1px solid var(--line); min-height: 4.8rem; font-size: 0.98rem; line-height: 1.5; }
.hex-info b { color: var(--head); font-weight: 600; }
#packet > .note { margin-top: 0.5rem; color: var(--muted); font-size: 0.92rem; }
@media (max-width: 480px) {
  .hb { width: 1.38rem; }
  .hh { font-size: 0.7rem; }
  .hex-info { min-height: 7.5rem; font-size: 0.95rem; }
}
/* quem vê as perguntas */
.priv-toggles { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.7rem; margin-bottom: 0.9rem; }
.priv-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 0.35rem 1.2rem; align-items: center; padding: 0.65rem 0.3rem; border-top: 1px solid var(--line); border-radius: 6px; }
.priv-row.changed { animation: pv-flash 1s ease-out; }
@keyframes pv-flash { from { background: color-mix(in srgb, var(--link) 16%, transparent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .priv-row.changed { animation: none; } }
.priv-who b { display: block; color: var(--head); font-weight: 600; font-size: 1rem; }
.priv-who span { display: block; font-size: 0.84rem; color: var(--muted); line-height: 1.35; }
.priv-sees { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; }
.pv-from { font-size: 0.82rem; color: var(--ink); background: var(--card2); border: 1px solid var(--line); border-radius: 999px; padding: 0.1rem 0.55rem; }
.pv-lock { font-size: 0.82rem; font-weight: 600; color: var(--c-green); border: 1px solid currentColor; border-radius: 999px; padding: 0.1rem 0.55rem; }
.pv-name { font-family: var(--mono); font-size: 1rem; font-weight: 600; color: var(--head); }
.pv-name .rd { color: var(--muted); opacity: 0.6; font-weight: 400; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.priv-sum { margin-top: 0.8rem; color: var(--muted); font-size: 0.95rem; }
.priv-toggles .toggle[aria-pressed="true"] .tg-box { background: var(--s-green); }
@media (max-width: 560px) { .priv-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .figure > #dnssec { min-height: 25rem; } .figure > #cache { min-height: 21rem; } }