/* Network Forensics Learn pages: tools and diagrams. Builds on ../../css/style.css and ../css/learn.css. */
.calc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; margin: 16px 0 24px; max-width: 56rem; }
.calc h3 { margin: 0 0 8px; }
.calc h4 { margin: 12px 0 4px; font-size: .9rem; }
.calc label { display: block; font-weight: 600; font-size: .9rem; margin: 6px 0; }
.calc input[type="text"], .calc select, .calc textarea { display: block; width: 100%; font: 14px var(--mono); color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 7px 9px; margin-top: 4px; box-sizing: border-box; }
.calc select { font-family: var(--sans); }
.calc textarea { min-height: 11em; resize: vertical; white-space: pre; }
.calc .row { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.calc .row > label { flex: 1 1 13rem; }
.calc .radios { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .9rem; }
.calc .radios label { font-weight: 400; display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.calc form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.calc form input[type="text"] { flex: 1 1 22rem; margin: 0; }
.calc form select { flex: 0 1 15rem; margin: 0; }
.calcout { margin-top: 10px; overflow-wrap: anywhere; }
.calcout p { margin: 8px 0 0; }
table.cmp.mini { min-width: 0; font-size: .82rem; }
.tablewrap table.cmp.mini { min-width: 520px; }
table.cmp.mini.raw td:last-child { font-family: var(--mono); font-size: .75rem; }
table.cmp tr.ok td { background: var(--ok-soft); }
.warnline { color: var(--warn); font-weight: 600; }
.okword { color: var(--ok); font-weight: 600; }
.badword { color: var(--accent); font-weight: 600; }
.logline { font: .8rem/1.5 var(--mono); background: var(--term-bg); color: var(--term-fg); border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; margin: 8px 0 4px; }
.logline .f { color: var(--term-ok); }
.logline .t { color: var(--term-warn); }
.chain { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin: 16px 0; font-size: .82rem; }
.chain > div { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 7.5rem; flex: 1 1 7.5rem; }
.chain > span { align-self: center; padding: 0 6px; color: var(--muted); font-size: .75rem; text-align: center; flex: 0 0 auto; }
.chain b { display: block; font-size: .85rem; }
.chain .src { color: var(--muted); font-size: .75rem; }
@media (max-width: 700px) { .chain { flex-direction: column; } .chain > span { padding: 4px 0; } }