/* guide.css - the look of the figures of the guide to HTTP and HTTPS,
 * on top of ../../engine.css: messages and their lines, addresses, the
 * versions, forms, status codes, the waterfall, cookies, the cache, the
 * cipher, the handshake and HPACK.
 */

/* ==========================================================================
   Componentes vindos do artigo sobre o DNS: painel de mensagem e bytes em hexadecimal
   ========================================================================== */
.figure > .field-msg { max-width: 26rem; min-height: 1.5em; 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; }
/* 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; }
.ladder-msg .note { font-size: 1rem; line-height: 1.5; padding: 0.2rem 0 0; }
.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; }
@media (max-width: 480px) {
  .hb { width: 1.38rem; }
  .hh { font-size: 0.7rem; }
  .hex-info { min-height: 7.5rem; font-size: 0.95rem; }
}
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* no celular, o painel do cache não muda de altura ao trocar de cenário */
@media (max-width: 640px) { .figure > #cache_fig { min-height: 21rem; } }
/* ==========================================================================
   HTTP
   ========================================================================== */
.figure > .hero-paths { max-width: 40rem; justify-content: center; margin-top: 0.6rem; }
.field input { font-family: var(--mono); font-size: 1rem; }
.panel-cap { font-size: 0.86rem; color: var(--muted); margin: 0 0 0.45rem; }
main .note.uf-note, main .note.form-note, main .note.ver-note { font-size: 0.95rem; line-height: 1.5; padding: 0.4rem 0 0; }
/* mensagens HTTP */
.hmsg { font-family: var(--mono); font-size: 0.86rem; line-height: 1.5; background: var(--card2); border-radius: 10px; padding: 0.55rem 0.4rem; min-width: 0; }
.hmsg.small { font-size: 0.8rem; }
.hl { display: block; width: 100%; text-align: left; font: inherit; color: var(--ink); background: none; border: 0; border-radius: 5px; padding: 0.05rem 0.45rem; white-space: pre-wrap; overflow-wrap: anywhere; min-height: 1.5em; }
button.hl { cursor: pointer; }
button.hl:hover { background: color-mix(in srgb, var(--card) 70%, transparent); }
.hl.on { background: color-mix(in srgb, var(--link) 13%, var(--card)); box-shadow: inset 3px 0 0 var(--link); }
.h-m { color: var(--c-orange); font-weight: 700; }
.h-t { color: var(--c-blue); }
.h-v { color: var(--muted); }
.h-hn { color: var(--c-purple); }
.h-hv { color: var(--head); }
.h-sc { font-weight: 700; }
.h-sc.s1 { color: var(--c-slate); }
 .h-sc.s2 { color: var(--c-green); }
 .h-sc.s3 { color: var(--c-blue); }
 .h-sc.s4 { color: var(--c-orange); }
 .h-sc.s5 { color: var(--c-red); }
.h-sr { color: var(--head); }
.h-b { color: var(--muted); }
.crlf { color: var(--muted); opacity: 0.55; margin-left: 0.15em; font-size: 0.85em; }
.msg-info { margin: 0.25rem 0 0.5rem 0.45rem; padding: 0.55rem 0.8rem; border-left: 3px solid var(--link); background: var(--card); border-radius: 0 8px 8px 0; font-family: var(--sans); font-size: 0.98rem; line-height: 1.5; color: var(--ink); white-space: normal; }
/* endereços */
.url-chips { margin-top: 0.6rem; }
.url-chips .chip { font-size: 0.8rem; }
.url-view { margin-top: 0.9rem; font-family: var(--mono); font-size: 1.15rem; line-height: 1.5; overflow-wrap: anywhere; padding: 0.55rem 0.75rem; background: var(--card2); border-radius: 10px; }
.u-scheme { color: var(--c-slate); }
 .u-user { color: var(--c-pink); }
 .u-host { color: var(--c-green); font-weight: 600; }
.u-port { color: var(--c-amber); font-weight: 600; }
 .u-path { color: var(--c-blue); }
 .u-query { color: var(--c-purple); }
 .u-frag { color: var(--c-red); }
.url-parts { display: grid; gap: 0; margin-top: 0.6rem; }
.up-row { display: grid; grid-template-columns: 7.5rem minmax(0, 11rem) minmax(0, 1fr); gap: 0.2rem 0.9rem; padding: 0.42rem 0.2rem; border-top: 1px solid var(--line); align-items: baseline; }
.up-k { font-size: 0.86rem; font-weight: 600; }
.up-v { font-family: var(--mono); font-size: 0.88rem; color: var(--head); overflow-wrap: anywhere; }
.up-w { font-size: 0.9rem; color: var(--ink); line-height: 1.4; }
.url-flow { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.uf-title { font-size: 0.92rem; font-weight: 600; color: var(--head); }
.uf-steps { margin: 0.35rem 0 0.6rem; padding-left: 1.4em; font-size: 0.95rem; line-height: 1.5; }
main .uf-steps li { padding-block: 0.1em; font-size: 0.95rem; line-height: 1.5; }
.url-flow mark, .form-out mark { background: color-mix(in srgb, var(--s-amber) 30%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
@media (max-width: 600px) {
  .up-row { grid-template-columns: 6.2rem minmax(0, 1fr); }
  .up-w { grid-column: 1 / -1; }
  .url-view { font-size: 1rem; }
}
/* versões */
.ver-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.ver-col { min-width: 0; }
.ver-end { font-size: 0.85rem; color: var(--muted); margin-top: 0.35rem; font-style: italic; }
@media (max-width: 640px) { .ver-grid { grid-template-columns: minmax(0, 1fr); } }
/* formulário */
.form-grid { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.toy-form { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.9rem; display: grid; gap: 0.55rem; }
.tf-title { font-weight: 600; color: var(--head); font-size: 1rem; }
.tf-row { display: grid; gap: 0.2rem; font-size: 0.85rem; color: var(--muted); }
.tf-row input, .tf-row select { font: inherit; font-size: 1rem; color: var(--head); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 0.35rem 0.5rem; width: 100%; min-width: 0; }
.tf-send { justify-self: start; }
.form-right { min-width: 0; }
.form-sent { font-size: 0.9rem; color: var(--ok); margin-top: 0.4rem; min-height: 1.3em; }
@media (max-width: 640px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
/* códigos de status */
.st-grid { display: grid; gap: 0.7rem; }
.st-head { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.3rem; }
.st-head b { font-family: var(--mono); color: var(--head); }
.st-codes { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.st-code { display: inline-flex; align-items: baseline; gap: 0.4rem; font: inherit; font-size: 0.84rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 0.25rem 0.55rem; cursor: pointer; }
.st-code b { font-family: var(--mono); font-weight: 700; }
.st-code.s1 b { color: var(--c-slate); }
 .st-code.s2 b { color: var(--c-green); }
 .st-code.s3 b { color: var(--c-blue); }
 .st-code.s4 b { color: var(--c-orange); }
 .st-code.s5 b { color: var(--c-red); }
.st-code:hover { border-color: var(--muted); }
.st-code.on { border-color: var(--link); background: color-mix(in srgb, var(--link) 12%, var(--card)); }
.st-info { margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px solid var(--line); min-height: 6rem; }
.st-line { font-family: var(--mono); font-size: 1.05rem; color: var(--head); }
.st-line code { font-size: inherit; }
.st-info p { margin: 0.35rem 0 0; font-size: 0.98rem; line-height: 1.5; padding: 0; }
@media (max-width: 480px) { .st-code span { display: none; } .st-info { min-height: 8rem; } }
/* cascata */
.figure > .controls.wf-ctl { max-width: 40rem; }
.wf-ctl .slider { flex: 1 1 16rem; max-width: 22rem; margin: 0; }
/* cookies */
.ck-grid { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.toy-browser { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--bg); }
.tb-addr { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.7rem; background: var(--card2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.78rem; color: var(--ink); overflow-wrap: anywhere; }
.tb-lock { flex: none; width: 0.62rem; height: 0.5rem; margin-top: 0.3rem; border-radius: 2px; background: var(--c-green); position: relative; }
.tb-lock::before { content: ""; position: absolute; left: 0.12rem; top: -0.34rem; width: 0.38rem; height: 0.38rem; border: 0.1rem solid var(--c-green); border-bottom: 0; border-radius: 0.3rem 0.3rem 0 0; box-sizing: border-box; }
.tb-page { display: grid; gap: 0.2rem; padding: 0.8rem 0.9rem 0.6rem; min-height: 4.6rem; }
.tb-page b { font-size: 1.05rem; color: var(--head); }
.tb-page span { font-size: 0.95rem; color: var(--ink); }
.tb-acts { display: grid; gap: 0.35rem; padding: 0.3rem 0.9rem 0.9rem; }
.tb-acts .btn { font-size: 0.88rem; padding: 0.38rem 0.7rem; text-align: left; }
.ck-right { display: grid; gap: 0.5rem; min-width: 0; }
.ck-state { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; padding-top: 0.8rem; border-top: 1px solid var(--line); }
.ck-item { display: grid; gap: 0.1rem; padding: 0.35rem 0.55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); margin-bottom: 0.3rem; }
.ck-item code { font-family: var(--mono); font-size: 0.86rem; color: var(--head); background: none; padding: 0; }
.ck-item span { font-size: 0.8rem; color: var(--muted); }
.ck-empty { font-size: 0.86rem; color: var(--muted); font-style: italic; }
main .note.ck-note, main .note.cc-note { font-size: 0.97rem; line-height: 1.5; padding: 0.7rem 0 0; min-height: 3em; }
@media (max-width: 640px) { .ck-grid, .ck-state { grid-template-columns: minmax(0, 1fr); } }
/* cache */
.cc-when { font-weight: 600; color: var(--head); margin-bottom: 0.6rem; }
.cc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem; }
.cc-col { min-width: 0; }
.cc-none { grid-column: 1 / -1; padding: 1rem; border: 1px dashed var(--line); border-radius: 10px; color: var(--ink); text-align: center; }
.cc-cost { display: grid; gap: 0.35rem; margin-top: 0.9rem; }
.cc-bar { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 6.5rem; gap: 0.7rem; align-items: center; font-size: 0.88rem; }
.cc-l { color: var(--muted); }
.cc-track { height: 0.7rem; border-radius: 4px; background: var(--card2); overflow: hidden; }
.cc-track i { display: block; height: 100%; background: var(--c-blue); border-radius: 4px; }
.cc-v { font-weight: 600; color: var(--head); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .cc-grid { grid-template-columns: minmax(0, 1fr); } .cc-bar { grid-template-columns: 6.3rem minmax(0, 1fr) 5.5rem; } }
/* cifra de brinquedo */
.cx-fields { display: flex; flex-wrap: wrap; gap: 0.6rem 1.4rem; }
.cx-fields .field input { width: 12rem; }
.cx-grid { display: grid; grid-template-columns: 6.2rem repeat(var(--n, 12), 2.1rem); gap: 3px; margin-top: 0.9rem; font-family: var(--mono); width: max-content; }
.cx-lab { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); align-self: center; }
.cx-c { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 0.15rem 0; cursor: pointer; background: var(--bg); color: var(--head); min-height: 2.3rem; }
.cx-c .cx-h { font-size: 0.78rem; }
.cx-c .cx-ch { font-family: var(--sans); font-size: 0.72rem; color: var(--muted); min-height: 1em; }
.cx-m { background: color-mix(in srgb, var(--s-blue) 12%, var(--card)); }
.cx-k { background: color-mix(in srgb, var(--s-amber) 16%, var(--card)); }
.cx-x { background: color-mix(in srgb, var(--s-purple) 16%, var(--card)); }
.cx-c.on { border-color: var(--link); box-shadow: 0 0 0 1px var(--link); }
.cx-bits { display: grid; gap: 0.15rem; margin: 0.8rem 0 0.9rem; font-size: 0.86rem; }
.cx-bl { display: grid; grid-template-columns: 6.2rem auto; align-items: center; }
.cx-bl span { color: var(--muted); font-size: 0.8rem; }
.cx-bl code { font-family: var(--mono); letter-spacing: 0.18em; color: var(--head); background: none; padding: 0; }
.cx-sum code { border-top: 1px solid var(--muted); padding-top: 0.1rem; }
.cx-recv { padding-top: 0.8rem; border-top: 1px solid var(--line); }
.cx-out { margin-top: 0.6rem; font-size: 0.95rem; }
.cx-ol { color: var(--muted); }
.cx-out code { font-family: var(--mono); font-size: 1.05rem; background: none; padding: 0; overflow-wrap: anywhere; }
.cx-ok { color: var(--ok); font-weight: 600; }
.cx-bad { color: var(--bad); }
/* troca de chaves */
.figure > .controls.dh-ctl { max-width: 44rem; }
.dh-ctl .ctl .slider { width: 100%; }
/* aperto de mãos */
.lm-kind.k-tcp { color: var(--c-slate); }
 .lm-kind.k-hs { color: var(--c-purple); }
 .lm-kind.k-req { color: var(--c-orange); }
 .lm-kind.k-res { color: var(--c-teal); }
.figure > .hs-msg { min-height: 7.5rem; }
.hs-msg .note { font-size: 1rem; line-height: 1.55; padding: 0.4rem 0 0; }
/* HPACK */
.hp-frame { --fc: var(--s-slate); }
 .hp-idx { --fc: var(--s-green); }
 .hp-dyn { --fc: var(--s-cyan); }
.hp-lit { --fc: var(--s-purple); }
 .hp-len { --fc: var(--s-amber); }
 .hp-val { --fc: var(--s-blue); }
.hp-sum { display: grid; gap: 0.35rem; margin-top: 0.9rem; }
.hp-sum .cc-bar { grid-template-columns: 10rem minmax(0, 1fr) 6rem; }
.hp-table { margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--line); display: grid; gap: 0.2rem; }
.hp-row { display: flex; gap: 0.8rem; font-size: 0.85rem; }
.hp-row code { font-family: var(--mono); background: none; padding: 0; color: var(--head); overflow-wrap: anywhere; }
.hp-row .hp-i { color: var(--c-cyan); min-width: 2rem; }
@media (max-width: 560px) { .hp-sum .cc-bar { grid-template-columns: 7.2rem minmax(0, 1fr) 5rem; } }