/* The analyzer's own masthead and footer rules are removed at every nesting
   level, media queries included: this app renders the Yali Security header
   and footer instead, and the two stylesheets both defined .brand, .icon and
   .nav-toggle. Everything below styles the body of the analyzer only. */
/* Packet Ledger — a network engineer's worksheet.
   Type: monospace carries the data (it is the vernacular of the subject),
   a plain grotesque carries the prose. No CDN, no webfont: this runs on an
   air-gapped box if it has to. */

/* Colour tokens only. Every selector below this block is the SiteAlertAI
   PCAP Analyzer stylesheet unchanged: the layout is the thing being ported, so
   re-deriving it would only introduce differences. What changes is the palette,
   which is YaliSecurity's - brand blue and red on white, replacing the teal on
   tinted paper. */
:root {
  --brand:     #23355b;
  --brand-dk:  #172444;
  --brand-ink: #23355b;
  --bg:        #ffffff;
  --paper:     #ffffff;
  --panel:     #ffffff;
  --panel-2:   #f6f7fa;
  --pill:      #23355b;
  --ink:       #000000;
  --ink-2:     #444444;
  --dim:       #6b7280;
  --rule:      #dde1ea;
  --rule-2:    #eceff5;
  --signal:    #23355b;
  --signal-2:  #b00c13;
  --on-signal: #ffffff;
  --good:      #1a7f4b;
  --good-bg:   rgba(26, 127, 75, .11);
  --warn:      #a86400;
  --warn-bg:   rgba(168, 100, 0, .11);
  --bad:       #b00c13;
  --bad-bg:    rgba(176, 12, 19, .09);
  --violet:    #5b3fbf;
  --shadow:    0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .05);
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* The site's diagonal split: red takes the left plus 65% of the top edge and
     35% of the bottom, blue the rest. Colours are inlined because a data URI
     cannot read a custom property, so they must be kept in step with the two
     above. */
  --split: linear-gradient(to right, #b00c13 0 50%, #23355b 50% 100%);
  --split-diag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'%3E%3Cpath d='M0 0H65L35 100H0Z' fill='%23b00c13'/%3E%3Cpath d='M65 0H100V100H35Z' fill='%2323355b'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.55;
  /**
   * The linear wash, with ruled lines drawn over it: a fine grid every 46px and
   * a heavier rule every fifth one, so the page reads as engineering paper
   * rather than a gradient. The lines are drawn in the brand blue at low alpha,
   * so they deepen with the wash at the top and fade out into the paper below —
   * one background, two things happening.
   */
  background-color: var(--bg);
  background-image:
    /* heavier rule every 230px */
    linear-gradient(rgba(11, 94, 140, .20) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 94, 140, .20) 1px, transparent 1px),
    /* fine grid every 46px */
    linear-gradient(rgba(11, 94, 140, .11) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 94, 140, .11) 1px, transparent 1px),
    /* the wash underneath everything */
    linear-gradient(180deg, #c4dff1 0%, #d6e9f6 26%, #e6f2fa 58%, #f4f9fd 100%);
  background-size:
    230px 230px, 230px 230px,
    46px 46px, 46px 46px,
    100% 100%;
  background-attachment: fixed;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
  min-height: 100vh;
}

::selection { background: rgba(0, 151, 178, .22); }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }
.mono { font-family: var(--mono); font-size: 0.87em; }
.dim { color: var(--ink-2); }
.bad  { color: var(--bad); }
.warnt { color: var(--warn); }
a { color: var(--signal); }

/* ---------- masthead: a floating box in the brand teal ---------- */

/* The parent brand keeps its own capitalisation — it is a name, not a label. */

/* ---------- the burger: a checkbox, so it works without JavaScript ---------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.job-strip {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .6rem .2rem 0; flex-wrap: wrap;
}
.job-strip-right { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }
.back { color: var(--brand-ink); text-decoration: none; font-family: var(--mono); font-size: .78rem; }
.back:hover { color: var(--signal); text-decoration: underline; }
.btn-sm { padding: .32rem .7rem; font-size: .78rem; font-family: var(--mono); }
.job-strip form { margin: 0; display: inline-flex; }
.job-id { font-family: var(--mono); font-size: .72rem; color: var(--dim); }
.tagline { margin: .15rem 0 0; color: var(--ink-2); font-size: .9rem; }

main.wrap { padding-top: .35rem; padding-bottom: 3rem; }

/* Below this width the three links stop fitting beside the lockup, so they fold
   into the box itself. Widen the window and the media query simply stops
   applying — the menu is inline again without anything being clicked. */
@media (max-width: 860px) {
  
  
  

  
  
  
  
  
  
  

  /* the bars become an X while the menu is open */
  
  
  
}

/* ---------- panels ---------- */
.panel {
  background: var(--panel); border: 1px solid var(--rule); border-radius: 3px;
  padding: 1.25rem 1.35rem; margin-bottom: 1.1rem;
}
.panel-title {
  margin: 0 0 .35rem; font-family: var(--mono); font-size: .82rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2);
  border-bottom: 1px solid var(--rule-2); padding-bottom: .5rem;
  display: flex; align-items: center; gap: .5rem;
}
.count {
  background: var(--rule-2); color: var(--ink-2); border-radius: 2px;
  padding: 0 .35rem; font-size: .78rem;
}
/* Body text runs the full width of its panel — the panel is the measure. */
.lede { margin: .6rem 0 .9rem; color: var(--ink-2); font-size: .9rem; max-width: none; }
.hint { color: var(--ink-2); font-size: .8rem; margin: .6rem 0 0; }
.info-dot {
  display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem;
  border-radius: 50%; border: 1px solid var(--rule-2); color: var(--ink-2); font-size: .68rem;
  font-weight: 700; margin-left: .3rem; cursor: help; vertical-align: middle; line-height: 1;
}
.info-dot:hover, .info-dot:focus { border-color: var(--signal); color: var(--signal); }

/* ---------- verdict strip: the first thing you read ---------- */
.verdict-strip {
  display: flex; align-items: stretch; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); border-radius: 3px; margin-bottom: 1.1rem; overflow: hidden;
}
.v-item { background: var(--panel); padding: .9rem 1.2rem; min-width: 8.5rem; }
.v-num { display: block; font-family: var(--mono); font-size: 2rem; font-weight: 600; line-height: 1; }
.v-lbl { font-size: .78rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.v-bad  .v-num { color: var(--bad); }
.v-warn .v-num { color: var(--warn); }
.v-good .v-num { color: var(--good); }
.v-meta {
  background: var(--panel); padding: .9rem 1.2rem; flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  font-family: var(--mono); font-size: .8rem;
}

/* ---------- tables ---------- */
.grid { width: 100%; border-collapse: collapse; font-size: .87rem; }
.grid th {
  text-align: left; font-weight: 600; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-2); border-bottom: 1px solid var(--rule);
  padding: .45rem .5rem;
}
.grid td { padding: .45rem .5rem; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
.grid tr:last-child td { border-bottom: 0; }
.grid .num, th.num { text-align: right; font-family: var(--mono); }
.barcell { width: 60%; }
.bar { display: block; height: .55rem; background: var(--signal); opacity: .8; border-radius: 1px; }
.tag { font-size: .68rem; background: var(--warn-bg); color: var(--warn); padding: 0 .3rem; border-radius: 2px; }

/* ---------- badges ---------- */
.badge {
  display: inline-block; font-family: var(--mono); font-size: .7rem; font-weight: 600;
  padding: .1rem .45rem; border-radius: 2px; white-space: nowrap;
  text-transform: uppercase; letter-spacing: .05em;
}
.badge.good { background: var(--good-bg); color: var(--good); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad  { background: var(--bad-bg);  color: var(--bad); }

/* ---------- forms ---------- */
.file-row { display: flex; gap: .6rem; align-items: center; margin-bottom: .5rem; }
.file-pick {
  flex: 1; position: relative; display: flex; align-items: center; gap: .7rem;
  border: 2px dashed var(--signal); border-radius: 6px; padding: .85rem 1rem; cursor: pointer;
  background: linear-gradient(180deg, #e8f7fa 0%, #f4fbfc 100%);
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.file-pick:hover, .file-pick:focus-within {
  border-color: var(--brand-dk); background: #dff3f7;
  box-shadow: 0 0 0 4px rgba(0, 151, 178, .14);
}
.file-icon {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--signal); color: #fff; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.file-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.file-name {
  font-family: var(--sans); font-weight: 700; font-size: .92rem; color: var(--brand-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.file-row.has-file .file-pick {
  border-style: solid; border-color: var(--good); background: #eefaf4;
}
.file-row.has-file .file-icon { background: var(--good); }
.file-row.has-file .file-icon::before { content: '\2713'; }
.file-row.has-file .file-name { color: var(--ink); }
.file-row.has-file .file-icon { font-size: 0; }
.file-row.has-file .file-icon::before { font-size: 1rem; }
.stage, .text-input {
  font-family: var(--sans); font-size: .85rem; padding: .5rem .6rem;
  border: 1px solid var(--rule); border-radius: 3px; background: var(--panel-2); color: var(--ink);
}
.text-input { width: 100%; }
.share-link-row { display: flex; align-items: stretch; gap: .5rem; margin: 1rem 0; }
.share-link-row .text-input { flex: 1 1 auto; min-width: 0; }
.copy-icon-btn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; border: 1px solid var(--rule); border-radius: 3px; background: var(--panel-2);
  color: var(--ink-2); cursor: pointer;
}
.copy-icon-btn:hover { border-color: var(--signal); color: var(--signal); }
.copy-icon-btn.copied { border-color: var(--good); color: var(--good); }
.share-form { margin-top: 1rem; }
.share-options { border: 0; padding: 0; margin: 0 0 1rem; display: flex; gap: .9rem; flex-wrap: wrap; }
.share-opt { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; }
.banner-ok {
  background: var(--good-bg); border: 1px solid var(--good); color: var(--good);
  border-radius: 3px; padding: .7rem 1rem; margin-bottom: 1.1rem; font-size: .88rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.banner-ok a { color: inherit; text-decoration: underline; }
.row-actions { display: flex; align-items: center; gap: .8rem; margin: .6rem 0 1rem; flex-wrap: wrap; }
.submit-bar { display: flex; align-items: center; gap: .9rem; border-top: 1px solid var(--rule-2);
  padding-top: 1rem; flex-wrap: wrap; }

.btn {
  font: 600 .85rem/1 var(--sans); padding: .6rem .95rem; border-radius: 3px;
  border: 1px solid var(--rule); background: var(--panel-2); color: var(--ink); cursor: pointer;
}
.btn:hover { border-color: var(--signal); color: var(--signal); }
.btn.primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.btn.primary:hover { background: var(--signal-2); color: var(--on-signal); box-shadow: 0 0 0 3px rgba(0, 151, 178, .22); }
.btn.primary:disabled { opacity: .6; cursor: default; }

.btn.ghost { background: transparent; }
.btn.danger { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn.danger:hover { background: #8f1e17; border-color: #8f1e17; color: #fff; box-shadow: 0 0 0 3px rgba(179, 38, 30, .22); }

.checklist { margin: .4rem 0 0; padding-left: 1.1rem; font-size: .9rem; color: var(--ink-2); }
.checklist li { margin-bottom: .35rem; }
.checklist b { color: var(--ink); }

.alert { border-radius: 3px; padding: .8rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.alert-error { background: var(--bad-bg); border: 1px solid #f0c2bd; color: #8c1d18; }
.alert ul { margin: .4rem 0 0; padding-left: 1.1rem; }

/* ---------- filters ---------- */
.filters { display: flex; gap: .4rem; align-items: center; margin-bottom: .8rem; flex-wrap: wrap; }
.chip {
  font: 600 .75rem/1 var(--mono); padding: .4rem .7rem; border: 1px solid var(--rule);
  background: var(--panel-2); border-radius: 2px; cursor: pointer; color: var(--ink-2);
}
.chip.active { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.search { flex: 1; min-width: 12rem; max-width: 22rem; }

/* ---------- streams ---------- */
.stream {
  border: 1px solid var(--rule); border-left: 3px solid var(--rule);
  border-radius: 2px; margin-bottom: .4rem; background: var(--panel);
}
.stream.v-error { border-left-color: var(--bad); }
.stream.v-warn  { border-left-color: var(--warn); }
.stream.v-ok    { border-left-color: var(--good); }
.stream > summary {
  cursor: pointer; padding: .55rem .7rem; display: flex; align-items: center;
  gap: .7rem; list-style: none; flex-wrap: wrap;
}
.stream > summary::-webkit-details-marker { display: none; }
.stream > summary:hover { background: var(--panel-2); }
.stream[open] > summary { border-bottom: 1px solid var(--rule-2); background: var(--panel-2); }
.s-id { font-family: var(--mono); font-size: .72rem; color: var(--ink-2); min-width: 2.5rem; }
.s-tuple { flex: 1 1 22rem; }
.s-tuple .port { color: var(--signal); }
.s-tuple .arrow { color: var(--ink-2); margin: 0 .3rem; }
.s-svc { font-size: .8rem; color: var(--ink-2); flex: 0 1 14rem; }
.s-num { font-family: var(--mono); font-size: .75rem; color: var(--ink-2); min-width: 5.5rem; text-align: right; }
.s-body { padding: 1rem .9rem; }
.s-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem; }

/* ---------- the ladder: signature element ---------- */
.ladder { width: 100%; height: auto; background: var(--panel-2); border: 1px solid var(--rule-2); border-radius: 2px; }
.lad-head { font: 600 10px var(--mono); fill: var(--ink); text-transform: uppercase; letter-spacing: .08em; }
.lad-sub  { font: 9px var(--mono); fill: var(--ink-2); }
.lad-life { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 3; }
.lad-arrow { stroke-width: 1.4; }
.lad-label { font: 9px var(--mono); fill: var(--ink); }
.lad-time  { font: 8px var(--mono); fill: var(--ink-2); }
.lad-handshake, .lad-seq { stroke: var(--signal); }
.lad-data  { stroke: var(--good); }
.lad-tls   { stroke: var(--violet); }
.lad-close { stroke: var(--ink-2); }
.lad-reset, .lad-alert { stroke: var(--bad); stroke-width: 1.8; }
.lad-head-fill { stroke: none; }
path.lad-handshake, path.lad-seq { fill: var(--signal); }
path.lad-data  { fill: var(--good); }
path.lad-tls   { fill: var(--violet); }
path.lad-close { fill: var(--ink-2); }
path.lad-reset, path.lad-alert { fill: var(--bad); }

/* ---------- key/value tables ---------- */
.kv { width: 100%; border-collapse: collapse; font-size: .8rem; }
.kv th { text-align: right; font: 600 .7rem var(--mono); color: var(--ink-2); padding: .2rem .5rem;
  text-transform: uppercase; letter-spacing: .05em; }
.kv th:first-child { text-align: left; }
.kv td { padding: .2rem .5rem; border-bottom: 1px solid var(--rule-2); }
.kv td:first-child { color: var(--ink-2); width: 11rem; }
.kv td:not(:first-child) { font-family: var(--mono); text-align: right; }
.kv.wide td:first-child { width: 12rem; }
.kv.wide td:not(:first-child) { text-align: left; font-family: var(--sans); }

/* ---------- tls ---------- */
.tls-block { margin-top: 1.2rem; border-top: 1px solid var(--rule-2); padding-top: .9rem; }
.tls-block h3, .findings h3 {
  margin: 0 0 .5rem; font: 600 .75rem var(--mono); text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-2);
}
.tls-block h4 { margin: 1rem 0 .4rem; font: 600 .75rem var(--mono); color: var(--ink-2); }
.hs-flow { color: var(--violet); }
.chain { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.cert { border: 1px solid var(--rule-2); border-radius: 2px; padding: .5rem .6rem; background: var(--panel-2); }
.cert-bad { border-color: #f0c2bd; background: var(--bad-bg); }
.cert-role { font: 600 .65rem var(--mono); text-transform: uppercase; letter-spacing: .08em;
  color: var(--violet); margin-bottom: .3rem; }
.cert .kv td:first-child { width: 6.5rem; }
.cert .kv td:not(:first-child) { text-align: left; word-break: break-word; }

/* ---------- findings ---------- */
.findings { margin-top: 1.2rem; border-top: 1px solid var(--rule-2); padding-top: .9rem; }
.finding { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--rule-2); }
.finding:last-child { border-bottom: 0; }
.finding p { margin: .15rem 0 0; font-size: .85rem; color: var(--ink-2); max-width: none; }
.finding b { font-size: .88rem; }
.sev {
  flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%; margin-top: .15rem;
  font: 700 .7rem/1.15rem var(--mono); text-align: center; color: var(--on-signal);
}
.sev-error { background: var(--bad); }
.sev-warn  { background: var(--warn); }
.sev-info  { background: #7a949d; }
.f-error b { color: var(--bad); }
.evidence { display: inline-block; margin-top: .3rem; background: var(--rule-2);
  padding: .05rem .35rem; border-radius: 2px; color: var(--ink-2); }

/* ---------- follow stream ---------- */
.follow { margin-top: 1rem; }
.follow > summary { cursor: pointer; font: 600 .75rem var(--mono); color: var(--signal); }
.dump-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: .6rem; }
.dump-pair h5 { margin: 0 0 .3rem; font: 600 .68rem var(--mono); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .06em; }
.dump {
  margin: 0; padding: .55rem; background: #0e2a33; color: #d6e7ec;
  font-family: var(--mono); font-size: .68rem; line-height: 1.45;
  border-radius: 2px; overflow-x: auto; white-space: pre;
}

/* ---------- foot ---------- */
.foot { padding: 1.5rem 1.25rem 3rem; font-size: .8rem; color: var(--ink-2); }
.foot b.bad { color: var(--bad); }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .s-grid, .dump-pair { grid-template-columns: 1fr; }
  .verdict-strip { flex-wrap: wrap; }
  .v-meta { flex-basis: 100%; }
  .s-num { text-align: left; }
  .file-row { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

/* ============ correlation views ============ */

/* A name is evidence, not decoration: it always sits next to the address it
   was learned for, and its title says where it came from. */
.nm {
  display: inline-block; font-family: var(--mono); font-size: .72rem;
  background: #e4f4f8; color: var(--brand-ink); border: 1px solid #b8e0e9;
  padding: 0 .3rem; border-radius: 2px; margin-left: .3rem; white-space: nowrap;
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; vertical-align: baseline;
}
.badge.role { background: var(--rule-2); color: var(--ink-2); }
.explore-link { margin-right: auto; margin-left: 1.2rem; }
.alert-scope {
  background: #e4f4f8; border: 1px solid #b8e0e9; color: var(--brand-ink);
  border-left: 3px solid var(--signal);
}
.row-bad { background: #fdf3f2; }
.row-bad td { border-bottom-color: #f4d7d4; }

/* ---------- filter panel ---------- */
/* compact, sticky filter bar — never taller than one row unless opened */
.filter-bar {
  position: sticky; top: 72px; z-index: 6; background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px; padding: .55rem .7rem;
  margin-bottom: 1rem; box-shadow: var(--shadow);
}
.filter-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.filter-search { flex: 1; min-width: 12rem; position: relative; display: flex; align-items: center; }
.filter-ico { position: absolute; left: .55rem; font-size: .85rem; opacity: .5; pointer-events: none; }
.filter-search .text-input { width: 100%; padding-left: 2rem; margin: 0; }
.more-toggle { position: absolute; opacity: 0; width: 0; height: 0; }
.more-btn { cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem; }
.more-badge {
  background: var(--signal); color: #fff; border-radius: 10px; font-size: .68rem;
  padding: .05rem .4rem; font-family: var(--mono);
}
.more-toggle:checked + .more-btn { background: var(--brand); color: #fff; border-color: var(--brand); }
.filter-more { display: none; margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--rule-2); }
.more-toggle:checked ~ .filter-more { display: block; }
.filter-bar .submit-bar { display: none; }
.filter-grid {
  display: grid; gap: .6rem; margin: .8rem 0;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}
.filter-grid label {
  display: flex; flex-direction: column; gap: .25rem;
  font: 600 .68rem var(--mono); text-transform: uppercase;
  letter-spacing: .07em; color: var(--ink-2);
}
.filter-grid label.wide { grid-column: 1 / -1; }
.filter-more .submit-bar { display: flex; margin-top: .6rem; }

/* ---------- quick start ---------- */
.quick { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-top: .5rem; }
.quick-card {
  display: block; border: 1px solid var(--rule); border-radius: 2px; padding: .6rem .7rem;
  text-decoration: none; color: var(--ink); background: var(--panel-2);
}
.quick-card:hover { border-color: var(--signal); background: #e9f6f9; }
.qc-ip { display: block; font-size: .85rem; font-weight: 600; }
.qc-meta { display: block; font-size: .72rem; color: var(--ink-2); margin-top: .2rem; }

/* ---------- host cards ---------- */
.hostcards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.hostcard { border: 1px solid var(--rule); border-radius: 2px; padding: .7rem .8rem; background: var(--panel-2); }
.hostcard.hc-bad { border-color: #f0c2bd; background: var(--bad-bg); }
.hc-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .3rem; }
.hc-ip { font-size: .95rem; font-weight: 600; }
.hc-names { margin-bottom: .4rem; }
.hc-names .nm { margin: 0 .25rem .25rem 0; }
.hostcard .kv td:first-child { width: 8.5rem; }
.hostcard .kv td:not(:first-child) { text-align: left; }
.hc-links { margin-top: .5rem; display: flex; gap: .8rem; font-size: .75rem; font-family: var(--mono); }

/* ---------- timeline ---------- */
.tl { list-style: none; margin: 0; padding: 0; }
.tl li {
  display: grid; gap: .55rem; align-items: baseline;
  grid-template-columns: 8.5rem 5rem 5.5rem 1fr auto;
  padding: .35rem .4rem; border-bottom: 1px solid var(--rule-2);
  border-left: 3px solid transparent; font-size: .82rem;
}
.tl li:last-child { border-bottom: 0; }
.tl-error { border-left-color: var(--bad); background: #fdf3f2; }
.tl-ts { font-size: .72rem; color: var(--ink-2); }
.tl-off { font-size: .7rem; color: var(--dim); text-align: right; }
.tl-kind {
  font: 600 .65rem var(--mono); text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); background: var(--rule-2); border-radius: 2px;
  padding: 0 .3rem; text-align: center;
}
.tl-error .tl-kind { background: var(--bad-bg); color: var(--bad); }
.tl-text { min-width: 0; overflow-wrap: anywhere; }
.tl-sid { font-size: .72rem; }

/* ---------- packet rows ---------- */
.packets td { padding: .3rem .45rem; font-size: .78rem; }
.packets .info { color: var(--ink-2); overflow-wrap: anywhere; }
.packets .nm { display: none; }              /* names would double the row height */
.packets tr:hover .nm { display: inline-block; }

@media (max-width: 860px) {
  .tl li { grid-template-columns: 1fr; gap: .15rem; }
  .tl-off, .tl-kind { text-align: left; justify-self: start; }
  .filter-bar { position: static; }
}

/* ---------- hero: thesis, proof strip, assurances ---------- */
.hero { text-align: center; padding: .2rem 0 1.2rem; }
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--signal);
  background: #e4f4f8; border: 1px solid #b8e0e9; border-radius: 999px;
  padding: .35rem .9rem;
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 6px var(--good); }
.hero h1 {
  font-family: var(--sans); font-weight: 800; letter-spacing: -.03em; line-height: 1.02;
  font-size: 3.6rem; font-size: clamp(2.4rem, 6vw, 4.4rem); margin: 0; color: var(--ink);
}
.hero h1 .hl { color: var(--signal); }
.hero-lede {
  font-family: var(--mono); font-size: .92rem; line-height: 1.7; color: var(--ink-2);
  max-width: none; margin: .8rem auto 0;
}
.hero-cta { display: flex; justify-content: center; gap: 1rem; margin: 1.8rem 0 1.2rem; flex-wrap: wrap; }
.hero-cta .btn { padding: .8rem 1.4rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em;
  font-family: var(--mono); text-decoration: none; }
.assurances {
  display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: .74rem; color: var(--brand-ink); margin: 0 0 .4rem;
}
.assurances span { white-space: nowrap; }
.stat-num.green { color: var(--good); }
@media (max-width: 780px) {
  .stat { border-bottom: 1px solid var(--rule); }
}

/* ---------- features page ---------- */
.feat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); margin-top: .6rem; }
.feat { border: 1px solid var(--rule); border-radius: 4px; padding: .9rem 1rem; background: var(--panel-2); }
.feat-h { margin: 0; font-size: .95rem; color: var(--ink); font-weight: 700; }
.feat-sub {
  margin: .15rem 0 .6rem; font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--signal);
}
.checklist { margin: 0; padding: 0; list-style: none; }
.checklist li {
  position: relative; padding-left: 1.15rem; margin-bottom: .35rem;
  font-size: .84rem; color: var(--ink-2); line-height: 1.5;
}
.checklist li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--good); font-size: .8rem;
}
.checklist.wide-list li { font-size: .88rem; margin-bottom: .5rem; }

.corr { display: grid; gap: 0; }
.corr-row {
  display: grid; grid-template-columns: 15rem 1fr; gap: 1.2rem;
  padding: .9rem 0; border-bottom: 1px solid var(--rule-2);
}
.corr-row:last-child { border-bottom: 0; }
.corr-h { margin: 0; font-size: .9rem; color: var(--signal); font-weight: 700; }
.corr-b { margin: 0; font-size: .87rem; color: var(--ink-2); }

.howto { margin: .5rem 0 1.2rem; padding: 0; list-style: none; counter-reset: step; }
.howto > li {
  position: relative; padding: 0 0 1.1rem 3rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--rule-2); counter-increment: step;
}
.howto > li:last-child { border-bottom: 0; margin-bottom: 0; }
.howto > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: .1rem;
  font-family: var(--mono); font-size: .78rem; font-weight: 700; color: var(--signal);
  border: 1px solid var(--rule); border-radius: 4px; background: var(--panel-2);
  width: 2rem; height: 2rem; display: grid; place-items: center;
}
.howto h3 { margin: .2rem 0 .35rem; font-size: 1rem; color: var(--ink); }
.howto p { margin: 0 0 .5rem; font-size: .87rem; color: var(--ink-2); }
.howto pre.dump { margin: .5rem 0; padding: .7rem .8rem; font-size: .8rem; }
.foot { padding: 1.5rem 1.25rem 2.5rem; font-family: var(--mono); font-size: .75rem; color: var(--dim); }

@media (max-width: 780px) {
  .corr-row { grid-template-columns: 1fr; gap: .2rem; }
}

/* ---------- small utilities (these exist so no inline style= is needed,
              which keeps the Content-Security-Policy free of unsafe-inline) ---------- */
.narrow { max-width: 34rem; }
.mt-1 { margin-top: 1rem; }
.signin { max-width: 26rem; margin: 4rem auto; }

/* ---------- site footer: no background, it sits on the page wash ---------- */

.lede-link { margin-top: -.4rem; }
.lede-link a { font-family: var(--mono); font-size: .78rem; }

/* ---------- vendor capture recipes (features page) ---------- */
.sub-h {
  margin: 1.8rem 0 .4rem; font-size: 1.05rem; color: var(--ink);
  padding-top: 1.2rem; border-top: 1px solid var(--rule-2);
}
.vendor-grid {
  display: grid; gap: .8rem; margin: .9rem 0 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
}
.vendor { border: 1px solid var(--rule); border-radius: 5px; padding: .8rem .9rem; background: var(--panel-2); }
.vendor-h {
  margin: 0 0 .45rem; font-size: .8rem; font-family: var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--brand-ink);
}
.vendor .dump { margin: 0 0 .5rem; white-space: pre-wrap; }
.vendor-note { margin: 0; font-size: .82rem; color: var(--ink-2); line-height: 1.6; }

/* ---------- social page ---------- */
.social-grid {
  display: grid; gap: .7rem; margin-top: .9rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.social-card {
  display: flex; flex-direction: column; gap: .25rem;
  border: 1px solid var(--rule); border-radius: 5px; padding: .75rem .85rem;
  background: var(--panel-2); text-decoration: none; color: var(--ink);
}
.social-card:hover { border-color: var(--signal); background: #e9f6f9; }
.social-name { font-weight: 700; font-size: .92rem; color: var(--brand-ink); }

.social-note { font-size: .8rem; color: var(--ink-2); }

/* ---------- page heading on the report and explorer ---------- */
.page-h1 {
  margin: .2rem 0 0; font-size: 1.15rem; font-weight: 700; color: var(--ink);
  display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
}
.page-h1-sub { font-family: var(--mono); font-size: .72rem; color: var(--dim); font-weight: 400; }

/* ---------- upload rows: server-rendered, JS only enhances ---------- */
.file-row-extra { display: none; }
.file-row-extra.on { display: flex; }
.file-row { align-items: stretch; }
.file-pick { min-height: 3.1rem; }
.file-hint { color: var(--ink-2); font-family: var(--mono); font-size: .7rem; }
.file-row.has-file .file-hint { display: none; }
.stage-wrap { display: flex; align-items: center; gap: .5rem; flex: none; }
.stage-lbl {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ink-2); white-space: nowrap;
}
.stage { min-width: 17rem; }
@media (max-width: 720px) {
  .stage-wrap { width: 100%; }
  .stage { flex: 1; min-width: 0; }
}
.hide { display: none; }

/* ---------- remove a row ---------- */
.row-del {
  flex: none; width: 2rem; height: 2rem; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--panel); color: var(--ink-2);
  font: 400 1.2rem/1 var(--sans);
}
.row-del:hover { border-color: var(--bad); background: var(--bad-bg); color: var(--bad); }
.file-row { align-items: center; }

/* ---------- the plain-language story ---------- */
.story {
  border: 1px solid var(--rule); border-left: 3px solid var(--signal);
  border-radius: 5px; padding: .9rem 1rem; margin-bottom: 1.2rem; background: var(--panel-2);
}
.story-error { border-left-color: var(--bad); background: #fdf6f5; }
.story-warn  { border-left-color: var(--warn); background: #fffaf2; }
.story-ok    { border-left-color: var(--good); background: #f2fbf7; }
.story-head { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.story-plain { margin: .35rem 0 0; font-size: .92rem; line-height: 1.65; color: var(--ink-2); }
.story-sub {
  margin: 1rem 0 .4rem; font: 700 .68rem var(--mono); text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-2);
}

.story-steps { list-style: none; margin: 0; padding: 0; counter-reset: story; }
.story-steps li {
  display: grid; grid-template-columns: 5.5rem 5rem 1fr; gap: .7rem; align-items: baseline;
  padding: .45rem .5rem; border-left: 3px solid var(--rule-2); border-radius: 0 3px 3px 0;
  margin-bottom: .2rem; background: var(--panel);
}
.story-steps li.sv-bad  { border-left-color: var(--bad); background: var(--bad-bg); }
.story-steps li.sv-warn { border-left-color: var(--warn); background: var(--warn-bg); }
.story-steps li.sv-info { border-left-color: var(--rule); }
.sp-time { font-size: .72rem; color: var(--dim); text-align: right; }
.sp-who {
  font: 700 .62rem var(--mono); text-transform: uppercase; letter-spacing: .06em;
  text-align: center; border-radius: 2px; padding: .1rem .3rem; color: #fff; background: var(--dim);
}
.sp-client  { background: var(--signal); }
.sp-server  { background: var(--violet); }
.sp-network { background: var(--warn); }
.sp-name    { background: var(--good); }
.sp-info    { background: var(--dim); }
.sp-text { font-size: .88rem; line-height: 1.6; color: var(--ink); }
.sp-detail { display: block; font-size: .78rem; color: var(--ink-2); margin-top: .15rem; }

.story-why { margin-top: .9rem; border-top: 1px solid var(--rule); padding-top: .5rem; }
.why-cause { margin: 0; font-weight: 700; color: var(--bad); font-size: .9rem; }
.story-ok .why-cause { color: var(--good); }
.why-next { margin: .3rem 0 0; padding-left: 1.1rem; font-size: .86rem; color: var(--ink-2); line-height: 1.7; }

/* ---------- the one-line summary of every broken conversation ---------- */
.plain-list { list-style: none; margin: .6rem 0 0; padding: 0; }
.plain-list li {
  padding: .6rem .7rem; border: 1px solid var(--rule); border-left: 3px solid var(--bad);
  border-radius: 0 4px 4px 0; margin-bottom: .45rem; background: var(--panel);
}
.plain-list li.pl-warn { border-left-color: var(--warn); }
.pl-link { display: flex; justify-content: space-between; gap: 1rem; text-decoration: none; flex-wrap: wrap; }
.pl-head { font-weight: 700; color: var(--ink); font-size: .95rem; }
.pl-link:hover .pl-head { color: var(--signal); }
.pl-who { font-size: .75rem; color: var(--ink-2); }
.pl-cause { display: block; font-size: .82rem; color: var(--ink-2); margin-top: .2rem; }

@media (max-width: 720px) {
  .story-steps li { grid-template-columns: 1fr; gap: .2rem; }
  .sp-time, .sp-who { text-align: left; justify-self: start; }
}

/* ---------- guides ---------- */
.hero-left { text-align: left; }
.hero-left .hero-lede { margin-left: 0; }
.crumbs {
  font-family: var(--mono); font-size: .72rem; color: var(--dim);
  padding: .2rem 0 .4rem; display: flex; gap: .4rem; flex-wrap: wrap;
}
.crumbs a { color: var(--brand-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.guide-grid {
  display: grid; gap: .7rem; margin-top: .5rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.guide-card {
  display: flex; flex-direction: column; gap: .3rem; text-decoration: none;
  border: 1px solid var(--rule); border-left: 3px solid var(--signal); border-radius: 0 5px 5px 0;
  padding: .8rem .9rem; background: var(--panel-2);
}
.guide-card:hover { background: #e9f6f9; border-left-color: var(--brand-dk); }
.guide-h { font-weight: 700; color: var(--ink); font-size: .95rem; }
.guide-card:hover .guide-h { color: var(--brand-ink); }
.guide-d { font-size: .8rem; color: var(--ink-2); line-height: 1.55; }
.faq { padding: .6rem 0; border-bottom: 1px solid var(--rule-2); }
.faq:last-child { border-bottom: 0; }
.faq-q { margin: 0 0 .25rem; font-size: .95rem; color: var(--ink); }
.faq-a { margin: 0; font-size: .88rem; color: var(--ink-2); line-height: 1.7; }

/* ---------- handshake: three lights ---------- */
.hs-strip {
  border: 1px solid var(--rule); border-radius: 6px; padding: .9rem 1rem; margin-bottom: 1rem;
  background: var(--panel-2);
}
.hs-complete { border-left: 3px solid var(--good); }
.hs-refused, .hs-nosynack, .hs-half { border-left: 3px solid var(--bad); }
.hs-midstream, .hs-unknown { border-left: 3px solid var(--dim); }
.hs-lights { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.hs-light {
  display: inline-flex; flex-direction: column; align-items: center; gap: .2rem;
  font-size: .74rem; font-weight: 700; color: var(--ink); min-width: 4.5rem;
}
.hs-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--rule);
  background: var(--panel); position: relative;
}
.hs-light.on .hs-dot { background: var(--good); border-color: var(--good); }
.hs-light.on .hs-dot::after { content: '\2713'; color: #fff; font-size: .7rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hs-light.bad .hs-dot { background: var(--bad); border-color: var(--bad); }
.hs-light.bad .hs-dot::after { content: '\2717'; color: #fff; font-size: .7rem; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.hs-light.off { color: var(--dim); }
.hs-tech { font-family: var(--mono); font-size: .6rem; font-weight: 400; color: var(--dim); letter-spacing: .05em; }
.hs-arm { flex: 1; height: 2px; min-width: 1.5rem; background: var(--rule); margin-top: -1rem; }
.hs-arm.on { background: var(--good); }
.hs-plain { margin: .7rem 0 0; font-size: .88rem; color: var(--ink-2); line-height: 1.6; }

/* ---------- negotiation panels ---------- */
.negos { display: grid; gap: .6rem; margin-bottom: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.nego { border: 1px solid var(--rule); border-radius: 6px; padding: .7rem .85rem; background: var(--panel); }
.nego-title { margin: 0 0 .5rem; font-size: .82rem; color: var(--brand-ink); font-weight: 700; }
.nego-row { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.nego-lbl { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--dim); min-width: 4rem; }
.nego-chips { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip {
  font-family: var(--mono); font-size: .7rem; padding: .15rem .45rem; border-radius: 3px;
  background: var(--panel-2); border: 1px solid var(--rule); color: var(--ink-2);
}
.chip-chosen { background: var(--good-bg); border-color: var(--good); color: var(--good); font-weight: 700; }
.chip-none { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

/* ---------- the SVG flow ladder ---------- */
.s-diag-h { margin: 0 0 .5rem; font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .09em; color: var(--ink-2); }
.ladder-svg { display: block; width: 100%; min-width: 520px; height: auto; }
.tab-pane, .s-body { overflow-x: auto; }
.ladder-svg .ll { stroke: var(--rule); stroke-width: 2; }
.ladder-svg .arrow { stroke-width: 2; }
.ladder-svg .arrow.sev-ok { stroke: var(--good); }
.ladder-svg .arrow.sev-bad { stroke: var(--bad); }
.ladder-svg .arrow.sev-warn { stroke: var(--warn); }
.ladder-svg .arrow.sev-info { stroke: var(--brand); }
.ladder-svg .arrow-lbl { font: 700 12px var(--sans); fill: var(--ink); }
.ladder-svg .arrow-lbl.sev-bad { fill: var(--bad); }
.ladder-svg .arrow-lbl.sev-warn { fill: var(--warn); }
.ladder-svg .arrow-sub { font: 400 10px var(--mono); fill: var(--dim); }
.ladder-svg .arrow-t { font: 400 10px var(--mono); fill: var(--dim); }
.ladder-svg .party-dot { fill: var(--panel-2); stroke: var(--rule); stroke-width: 1.5; }
.ladder-svg .party.server .party-dot { fill: #ece7fb; }
.ladder-svg .party-ico { font-size: 15px; }
.ladder-svg .party-role { font: 700 12px var(--sans); fill: var(--ink); }
.ladder-svg .party-name { font: 400 10px var(--mono); fill: var(--ink-2); }
.ladder-svg .note-box { fill: var(--panel-2); stroke: var(--rule); }
.ladder-svg .note-box.sev-bad { fill: var(--bad-bg); stroke: var(--bad); }
.ladder-svg .note-box.sev-warn { fill: var(--warn-bg); stroke: var(--warn); }
.ladder-svg .note-box.sev-ok { fill: var(--good-bg); stroke: var(--good); }
.ladder-svg .note-txt { font: 400 11px var(--sans); fill: var(--ink); }

/* ---------- analysis overlay: "relax, I've got this" ---------- */
.scan-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(14, 42, 51, .55); backdrop-filter: blur(3px); padding: 1.5rem;
}
.scan-overlay[hidden] { display: none; }
.scan-card {
  background: var(--paper); border-radius: 14px; padding: 2rem 2.2rem; max-width: 26rem; width: 100%;
  text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); border: 1px solid var(--rule);
}
.scan-anim { position: relative; height: 92px; margin-bottom: .6rem; }

/* the coffee cup */
.scan-cup { position: relative; display: inline-block; width: 54px; height: 46px; margin-top: 12px; }
.scan-cup-body {
  position: absolute; bottom: 0; left: 4px; width: 40px; height: 34px;
  background: var(--brand); border-radius: 4px 4px 18px 18px;
}
.scan-cup-body::after {
  content: ''; position: absolute; top: 5px; left: 5px; right: 5px; height: 6px;
  background: #6b4a34; border-radius: 3px;
}
.scan-cup-handle {
  position: absolute; bottom: 8px; right: -8px; width: 16px; height: 20px;
  border: 4px solid var(--brand); border-left: 0; border-radius: 0 12px 12px 0;
}
.scan-steam { position: absolute; top: -14px; left: 10px; display: flex; gap: 6px; }
.scan-steam i {
  display: block; width: 4px; height: 14px; background: var(--brand); border-radius: 2px; opacity: 0;
  animation: steam 2.2s ease-in-out infinite;
}
.scan-steam i:nth-child(2) { animation-delay: .4s; }
.scan-steam i:nth-child(3) { animation-delay: .8s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(4px) scaleY(.6); }
  40% { opacity: .6; }
  100% { opacity: 0; transform: translateY(-12px) scaleY(1.2); }
}

/* packets streaming past, being read */
.scan-track {
  position: absolute; bottom: 6px; left: 0; right: 0; height: 3px; background: var(--rule-2);
  border-radius: 2px; overflow: hidden;
}
.scan-packet {
  position: absolute; top: -2px; width: 14px; height: 7px; border-radius: 2px; background: var(--signal);
  animation: fly 1.5s linear infinite;
}
.scan-packet:nth-child(2) { animation-delay: .5s; background: var(--violet); }
.scan-packet:nth-child(3) { animation-delay: 1s; background: var(--good); }
@keyframes fly { from { left: -14px; } to { left: 100%; } }

.scan-head { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--ink); }
.scan-msg { margin: .4rem 0 1rem; font-size: .9rem; color: var(--ink-2); min-height: 2.4em; }
.scan-bar { height: 5px; background: var(--rule-2); border-radius: 3px; overflow: hidden; }
.scan-bar-fill {
  display: block; height: 100%; width: 40%; border-radius: 3px;
  background: linear-gradient(90deg, var(--brand), var(--signal));
  animation: indet 1.4s ease-in-out infinite;
}
@keyframes indet {
  0% { margin-left: -40%; } 100% { margin-left: 100%; }
}
.scan-foot { margin: .8rem 0 0; font-size: .72rem; color: var(--dim); }

@media (prefers-reduced-motion: reduce) {
  .scan-steam i, .scan-packet, .scan-bar-fill { animation: none; }
  .scan-bar-fill { width: 100%; opacity: .6; }
  .scan-steam i { opacity: .5; }
}

/* ---------- vendor coverage note ---------- */
.cov-note { border-left: 3px solid var(--warn); background: var(--warn-bg); }
.cov-note .panel-title { color: var(--warn); }
.cov-ok { border-left: 3px solid var(--good); background: var(--good-bg); }
.cov-ok .panel-title { color: var(--good); }

/* ---------- General / Technical tabs (radio-driven, no JS) ---------- */
.tabs { position: relative; }
.tab-radio { position: absolute; opacity: 0; width: 0; height: 0; }
.tab-label {
  display: inline-block; padding: .5rem 1rem; cursor: pointer; font-size: .82rem; font-weight: 700;
  color: var(--ink-2); border: 1px solid var(--rule); border-bottom: 0; border-radius: 6px 6px 0 0;
  background: var(--panel-2); margin-right: .25rem; position: relative; top: 1px;
}
.tab-label:hover { color: var(--brand-ink); }
/* the checked radio colours its label and reveals its pane */
.tab-radio:checked + .tab-label {
  background: var(--paper); color: var(--brand-ink); border-color: var(--rule);
  border-bottom: 1px solid var(--paper);
}
.tab-pane { display: none; border: 1px solid var(--rule); border-radius: 0 6px 6px 6px; padding: 1.1rem; background: var(--paper); }
/* first radio -> first pane, third radio (tech) -> second pane */
.tab-radio:nth-of-type(1):checked ~ .tab-gen { display: block; }
.tab-radio:nth-of-type(2):checked ~ .tab-tech { display: block; }
.tab-radio:nth-of-type(3):checked ~ .tab-map { display: block; }
@media (max-width: 560px) {
  .tab-label { display: block; border-radius: 6px; border-bottom: 1px solid var(--rule); margin-bottom: .2rem; top: 0; }
  .tab-pane { border-radius: 6px; }
}

/* ---------- vendor heads-up on the upload row ---------- */
.vend-hint {
  flex-basis: 100%; margin: .3rem 0 0; font-size: .78rem; color: var(--warn);
  background: var(--warn-bg); border-radius: 4px; padding: .35rem .6rem;
}

/* ---------- follow a TCP stream ---------- */
.flow-list { list-style: none; margin: .6rem 0 0; padding: 0; counter-reset: flow; }
.flow-item { margin-bottom: .5rem; }
.flow-link {
  display: flex; align-items: center; gap: .9rem; text-decoration: none; padding: .7rem .85rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--dim); border-radius: 0 6px 6px 0;
  background: var(--panel); color: var(--ink);
}
.flow-link:hover { background: var(--panel-2); border-left-color: var(--brand); }
.flow-error > .flow-link { border-left-color: var(--bad); }
.flow-warn  > .flow-link { border-left-color: var(--warn); }
.flow-ok    > .flow-link { border-left-color: var(--good); }
.flow-n {
  flex: none; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--panel-2);
  border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: .8rem; color: var(--ink-2);
}
.flow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.flow-tuple { font-size: .88rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.flow-svc { font-size: .76rem; color: var(--dim); }
.flow-head { font-size: .82rem; color: var(--ink-2); font-weight: 600; }
.flow-meta { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; }
.flow-time { font-size: .7rem; color: var(--dim); }

.flow-nav { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap; }
.flow-nav-label { font-size: .82rem; color: var(--ink-2); }
.flow-pager { display: flex; justify-content: space-between; margin-top: 1rem; gap: 1rem; }
.stream-focus .s-body { display: block; }
.focus-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .5rem; }
.focus-tuple { font-size: 1rem; font-weight: 700; color: var(--ink); }
.focus-svc { font-weight: 400; color: var(--dim); font-size: .85rem; margin-left: .4rem; }
.focus-outcome { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; }
.focus-error { color: var(--bad); }
.focus-warn { color: var(--warn); }
.focus-ok { color: var(--good); }

/* ---------- technical connection-outcome banner ---------- */
.tech-outcome {
  border-radius: 6px; padding: .7rem .9rem; margin-bottom: 1rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--dim);
}
.tech-outcome.to-ok { border-left-color: var(--good); background: var(--good-bg); }
.tech-outcome.to-bad { border-left-color: var(--bad); background: var(--bad-bg); }
.tech-outcome.to-info { border-left-color: var(--brand); background: var(--panel-2); }
.to-label { display: block; font-family: var(--mono); font-weight: 700; font-size: .9rem; color: var(--ink); }
.to-bad .to-label { color: var(--bad); }
.to-ok .to-label { color: var(--good); }
.to-why { display: block; margin-top: .3rem; font-size: .84rem; color: var(--ink-2); line-height: 1.6; }

/* ---------- report pagination ---------- */
.page-note { margin: 0 0 .8rem; }
.pager { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.2rem; }
.pager-mid { font-family: var(--mono); font-size: .8rem; color: var(--ink-2); }

/* ---------- protocol inventory ---------- */
.proto-layer { margin-bottom: 1.4rem; }
.proto-layer:last-child { margin-bottom: 0; }
.proto-layer-h {
  margin: 0 0 .45rem; font: 700 .68rem var(--mono); text-transform: uppercase;
  letter-spacing: .09em; color: var(--ink-2);
}
.proto-bar {
  display: flex; height: 12px; border-radius: 6px; overflow: hidden;
  background: var(--rule-2); margin-bottom: .7rem;
}
.proto-seg { height: 100%; }
.seg-1 { background: var(--brand); }
.seg-2 { background: var(--signal); }
.seg-3 { background: var(--violet); }
.seg-4 { background: var(--good); }
.seg-5 { background: var(--warn); }
.seg-6 { background: var(--dim); }
.proto-list { list-style: none; margin: 0; padding: 0; }
.proto-item { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem 0; border-bottom: 1px solid var(--rule-2); }
.proto-item:last-child { border-bottom: 0; }
.proto-key { flex: none; width: 10px; height: 10px; border-radius: 3px; margin-top: .35rem; }
.proto-body { display: flex; flex-direction: column; gap: .15rem; }
.proto-name { font-weight: 700; font-size: .9rem; color: var(--ink); }
.proto-count { font-weight: 400; font-size: .72rem; color: var(--dim); margin-left: .4rem; }
.proto-plain { font-size: .85rem; color: var(--ink-2); }
.proto-why { font-size: .78rem; color: var(--dim); line-height: 1.6; }
.w-0 { width: 0%; }
.w-4 { width: 4%; }
.w-8 { width: 8%; }
.w-12 { width: 12%; }
.w-16 { width: 16%; }
.w-20 { width: 20%; }
.w-24 { width: 24%; }
.w-28 { width: 28%; }
.w-32 { width: 32%; }
.w-36 { width: 36%; }
.w-40 { width: 40%; }
.w-44 { width: 44%; }
.w-48 { width: 48%; }
.w-52 { width: 52%; }
.w-56 { width: 56%; }
.w-60 { width: 60%; }
.w-64 { width: 64%; }
.w-68 { width: 68%; }
.w-72 { width: 72%; }
.w-76 { width: 76%; }
.w-80 { width: 80%; }
.w-84 { width: 84%; }
.w-88 { width: 88%; }
.w-92 { width: 92%; }
.w-96 { width: 96%; }
.w-100 { width: 100%; }
.w-2 { width: 2%; }

/* ---------- blog ---------- */
.post-grid { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.post-card {
  display: flex; flex-direction: column; gap: .35rem; text-decoration: none;
  border: 1px solid var(--rule); border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0;
  padding: .9rem 1rem; background: var(--panel-2);
}
.post-card:hover { background: #e9f6f9; border-left-color: var(--brand-dk); }
.post-meta { font-size: .7rem; color: var(--dim); letter-spacing: .03em; }
.post-h { font-weight: 700; font-size: 1rem; color: var(--ink); line-height: 1.35; }
.post-card:hover .post-h { color: var(--brand-ink); }
.post-d { font-size: .84rem; color: var(--ink-2); line-height: 1.6; }
.post-more { font-size: .78rem; color: var(--brand-ink); font-weight: 700; margin-top: .2rem; }

.post-body .lede { margin: 0 0 .9rem; font-size: .95rem; line-height: 1.75; }
.post-h2 {
  margin: 1.6rem 0 .6rem; font-size: 1.1rem; color: var(--ink); font-weight: 700;
  padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
}
.post-body .post-h2:first-child { margin-top: 0; }
.post-note {
  margin: .9rem 0; padding: .7rem .9rem; font-size: .87rem; line-height: 1.7; color: var(--ink-2);
  background: var(--warn-bg); border-left: 3px solid var(--warn); border-radius: 0 5px 5px 0;
}
.post-steps { list-style: none; counter-reset: ps; margin: .6rem 0 1rem; padding: 0; }
.post-steps li {
  counter-increment: ps; position: relative; padding: .55rem 0 .55rem 2.4rem;
  border-bottom: 1px solid var(--rule-2);
}
.post-steps li:last-child { border-bottom: 0; }
.post-steps li::before {
  content: counter(ps); position: absolute; left: 0; top: .55rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--brand); color: #fff;
  display: flex; align-items: center; justify-content: center; font: 700 .75rem var(--mono);
}
.ps-h { display: block; font-weight: 700; font-size: .92rem; color: var(--ink); }
.ps-b { display: block; font-size: .86rem; color: var(--ink-2); line-height: 1.7; margin-top: .15rem; }

/* ---------- device / MAC vendor ---------- */
.dev-cell { line-height: 1.45; }
.dev-mac { display: block; font-size: .74rem; color: var(--ink-2); }
.dev-vendor { display: block; font-size: .76rem; font-weight: 700; color: var(--brand-ink); }
.dev-vendor.dim { font-weight: 400; color: var(--dim); }
.dev-via {
  display: inline-block; margin-top: .15rem; font-size: .64rem; font-family: var(--mono);
  background: var(--panel-2); color: var(--dim); border: 1px solid var(--rule);
  border-radius: 3px; padding: 0 .3rem;
}
.router-flag { color: var(--signal); }

/* ---------- capture advice ---------- */
.advice-panel { border-left: 3px solid var(--signal); }
.adv { padding: .8rem 0; border-bottom: 1px solid var(--rule-2); }
.adv:last-child { border-bottom: 0; padding-bottom: 0; }
.adv-h { margin: 0 0 .35rem; font-size: .95rem; font-weight: 700; color: var(--ink); }
.adv-warn .adv-h { color: var(--warn); }
.adv-info .adv-h { color: var(--brand-ink); }
.adv-why { margin: 0 0 .4rem; font-size: .87rem; color: var(--ink-2); line-height: 1.7; }
.adv-proves {
  margin: 0 0 .4rem; font-size: .84rem; color: var(--good); line-height: 1.7;
  background: var(--good-bg); border-radius: 4px; padding: .4rem .6rem;
}
.adv-todo { margin: 0 0 .4rem; font-size: .87rem; color: var(--ink); line-height: 1.7; }
.adv-cmd { margin: .3rem 0 0; }
.mac-caveat { font-size: .74rem; color: var(--dim); line-height: 1.6; font-style: italic; }

/* ---------- network map ---------- */
.netmap-wrap { overflow-x: auto; margin: .6rem 0 1rem; }
.nm-tier { font: 700 10px var(--mono); fill: var(--dim); letter-spacing: .08em; text-transform: uppercase; }
.nm-edge { stroke: var(--rule); stroke-width: 2; }
.nm-edge-bad { stroke: var(--bad); stroke-width: 2.5; stroke-dasharray: 5 3; }
.nm-box { fill: var(--panel-2); stroke: var(--rule); stroke-width: 1.5; }
.nm-node:hover .nm-box { stroke: var(--brand); fill: #e9f6f9; }
.nm-router .nm-box { stroke: var(--signal); stroke-width: 2; fill: #fff6ec; }
.nm-bad .nm-box { stroke: var(--bad); }
.nm-name { font: 700 13px var(--sans); fill: var(--ink); }
.nm-sub { font: 11px var(--mono); fill: var(--dim); }
.nm-tag { font: 700 9px var(--mono); fill: var(--signal); text-transform: uppercase; }
.nm-tag-bad { fill: var(--bad); }

/* device detail cards (the map's click targets) */
.dev-cards { display: grid; gap: .7rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.dev-card {
  border: 1px solid var(--rule); border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0;
  padding: .7rem .85rem; background: var(--panel);
}
.dev-card:target { border-left-color: var(--signal); background: var(--panel-2); }
.dev-card-router { border-left-color: var(--signal); }
.dev-card-h { margin: 0 0 .4rem; font-size: .92rem; color: var(--ink); display: flex; align-items: center; gap: .4rem; }
.dev-tag {
  font: 700 .6rem var(--mono); text-transform: uppercase; color: var(--signal);
  border: 1px solid var(--signal); border-radius: 3px; padding: 0 .3rem;
}
.dev-dl { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: 0; font-size: .8rem; }
.dev-dl dt { color: var(--dim); }
.dev-dl dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }

/* ---- YaliSecurity brand treatment, appended ----
   The site's boxes carry a diagonal red/blue edge and the page carries a faint
   dotted ground. Applied to the elements this stylesheet already defines so the
   layout is untouched. */
body {
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(35, 53, 91, .07) 1px, transparent 1px),
    radial-gradient(rgba(176, 12, 19, .06) 1px, transparent 1px);
  background-size: 22px 22px, 22px 22px;
  background-position: 0 0, 11px 11px;
}

.panel, .advice-panel {
  position: relative;
  overflow: hidden;
}

.panel::before, .advice-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5px;
  height: 100%;
  background-image: var(--split-diag);
  background-size: 100% 100%;
}

.site-foot, footer { border-top: 3px solid transparent; border-image: var(--split) 1; }

/* ---- deferred report sections ----
   The first screen of a report paints on its own; the long tables below are
   revealed as the reader reaches them. content-visibility lets the browser skip
   layout for a block it has not shown yet, which is what makes a long report
   feel immediate rather than merely look it. With no JavaScript the pending
   class is never applied and everything is simply open. */
.lazy-block { margin: 0; }
.lazy-head {
  cursor: pointer;
  padding: 14px 2px;
  font-weight: 650;
  font-size: 15px;
  color: var(--ink-2);
  list-style: none;
}
.lazy-head::-webkit-details-marker { display: none; }
.lazy-head::before { content: "▾ "; color: var(--dim); }
.lazy-block:not([open]) .lazy-head::before { content: "▸ "; }

.lazy-block.lazy-pending .lazy-body {
  content-visibility: hidden;
  min-height: 240px;
}


/* ---- matching the rest of the site ----
   The analyzer was laid out as its own application, so it set its own page
   width and drew its own boxes. Both now follow the site: one shell width, and
   the same diagonal red/blue edge every other module's tiles carry. */

.wrap {
  /* Not a page container. The site's header opens <main>, which already carries
     the shell width and the page padding; this only exists for the few inner
     blocks in the ported markup that still reference the class. */
  width: 100%;
  margin: 0;
  padding: 0;
}


/* Stat boxes get the tile treatment: a transparent border filled with the
   diagonal split, red claiming the left plus 65% of the top edge and blue the
   rest - the same ratio as the header, the submenu and the module tiles. */
/* One rectangle, divided - not five boxes. The diagonal red/blue edge belongs
   to the whole strip, the way it does on a panel, and the facts inside are
   separated by rules rather than by gaps. */
.stats-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  margin: 0 0 24px;
  border: 2px solid transparent;
  border-radius: var(--radius, 10px);
  background-image: linear-gradient(var(--panel), var(--panel)), var(--split-diag);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: auto, 100% 100%;
  overflow: hidden;
}

.stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 20px 12px;
  border-right: 1px solid var(--rule);
  text-align: center;
}
.stat:last-child { border-right: 0; }

.stat-num { font-size: 22px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.stat-num.green { color: var(--good); }
.stat-lbl { font-size: 12px; color: var(--ink-2); letter-spacing: .01em; }

@media (max-width: 860px) {
  .stats-strip { grid-template-columns: repeat(3, 1fr); }
  /* Rules that would otherwise hang off the end of a wrapped row. */
  .stat:nth-child(3n) { border-right: 0; }
  .stat:nth-child(n+4) { border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .stats-strip { grid-template-columns: 1fr; }
  .stat { border-right: 0; }
  .stat:not(:first-child) { border-top: 1px solid var(--rule); }
}

.assurances {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--ink-2);
}

/* ---- network map ---- */
/* A figure is a block with a graphic above its caption, and it is written out
   rather than assumed: a caption that ends up beside the graphic instead of
   under it is the failure this prevents. The SVGs carry width, height and
   preserveAspectRatio attributes, so the box is known before any CSS loads. */
.netmap { display: block; width: 100%; margin: 0 0 18px; overflow-x: auto; }
/* These graphics are 900 units wide. Scaling that into a phone would render
   their 10px labels at about 4px, so below a readable width the figure scrolls
   instead of shrinking - which is what the figure's overflow-x is for. */
.netmap-svg { display: block; width: 100%; min-width: 560px; height: auto; float: none; }
.nm-node { fill: var(--signal); }
.nm-label { font-family: var(--mono); font-size: 11px; fill: var(--ink); }
.nm-name { font-family: var(--sans); font-size: 10px; fill: var(--dim); }
.nm-elabel { font-family: var(--sans); font-size: 10px; fill: var(--ink-2); }
.netmap-cap {
  display: block; width: 100%; clear: both; float: none;
  color: var(--ink-2); font-size: 13px; line-height: 1.6; margin: 8px 0 0;
}

/* ---- observations ----
   Each one collapses to a line and opens to the evidence behind it, because a
   conclusion nobody can check is only an assertion. */
.obs {
  border: 1px solid var(--rule);
  border-left: 4px solid var(--rule);
  border-radius: var(--radius, 10px);
  margin: 0 0 10px;
  background: var(--panel);
}
.obs-bad  { border-left-color: var(--bad); }
.obs-warn { border-left-color: var(--warn); }
.obs-info { border-left-color: var(--signal); }

.obs-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  list-style: none;
}
.obs-head::-webkit-details-marker { display: none; }
.obs-head::before { content: "▸"; color: var(--dim); }
.obs[open] .obs-head::before { content: "▾"; }

.obs-level {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.obs-bad  .obs-level { color: var(--bad);  background: var(--bad-bg); }
.obs-warn .obs-level { color: var(--warn); background: var(--warn-bg); }
.obs-info .obs-level { color: var(--signal); background: var(--panel-2); }

.obs-title { font-weight: 650; }
.obs-body { padding: 0 16px 16px 16px; }
.obs-seen { color: var(--ink-2); margin: 0 0 14px; }
.obs-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--dim); margin: 14px 0 6px; }
.obs-advice { color: var(--ink-2); margin: 0; }

/* ---------- stream focus: the three tabs ---------- */
.stream-focus .tabs { margin-top: 1rem; }
.tab-pane > .adv-h:first-child { margin-top: 0; }

/* the arrowheads on the ladder, which take fill rather than stroke */
.ladder-svg .arrow-head { stroke: none; fill: var(--brand); }
.ladder-svg .arrow-head.sev-ok   { fill: var(--good); }
.ladder-svg .arrow-head.sev-bad  { fill: var(--bad); }
.ladder-svg .arrow-head.sev-warn { fill: var(--warn); }
.ladder-svg .arrow-head.sev-info { fill: var(--brand); }
.ladder-svg .arrow.sev-bad { stroke-dasharray: 6 4; }

/* tab one: what happened, in order */
.steps { list-style: none; counter-reset: step; margin: .6rem 0 0; padding: 0; }
.steps li {
  counter-increment: step; position: relative; padding: .55rem .7rem .55rem 2.4rem;
  border-left: 3px solid var(--rule); background: var(--panel); margin-bottom: .35rem;
  border-radius: 0 4px 4px 0;
}
.steps li::before {
  content: counter(step); position: absolute; left: .7rem; top: .55rem;
  width: 1.15rem; height: 1.15rem; border-radius: 50%; font: 700 .68rem var(--mono);
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); border: 1px solid var(--rule); color: var(--ink-2);
}
.steps .step-ok   { border-left-color: var(--good); }
.steps .step-ok::before   { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.steps .step-bad  { border-left-color: var(--bad); background: var(--bad-bg); }
.steps .step-bad::before  { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }
.steps .step-skip { border-left-color: var(--dim); }
.step-what { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); }
.step-why  { display: block; font-size: .82rem; color: var(--ink-2); margin-top: .15rem; }

/* tab two: the field-by-field record */
.grid-table { width: 100%; border-collapse: collapse; font-size: .84rem; margin: .5rem 0 1rem; }
.grid-table th {
  text-align: left; font: 600 .72rem var(--mono); color: var(--ink-2); text-transform: uppercase;
  letter-spacing: .04em; padding: .35rem .6rem .35rem 0; width: 12rem;
  border-bottom: 1px solid var(--rule-2); vertical-align: top;
}
.grid-table td { padding: .35rem 0; border-bottom: 1px solid var(--rule-2); color: var(--ink); }
.grid-table td.bad { color: var(--bad); }
@media (max-width: 560px) {
  .grid-table th { width: auto; display: block; border: 0; padding-bottom: 0; }
  .grid-table td { display: block; padding-top: .1rem; }
}

/* ---------- the network path chain ---------- */
.netmap-svg .nm-node-hop { fill: var(--warn-bg); stroke: var(--warn); }
.netmap-svg .nm-role {
  font: 700 .62rem var(--mono); fill: var(--ink-2); text-transform: uppercase; letter-spacing: .08em;
}
.netmap-svg .nm-note { font: 400 10px var(--sans); fill: var(--warn); }
.netmap-svg .nm-head { stroke: none; }

/* ---------- the verdict, stated on the stream itself ---------- */
.stream-focus { border-left: 3px solid var(--rule); }
.stream-focus.flow-bad  { border-left-color: var(--bad); }
.stream-focus.flow-warn { border-left-color: var(--warn); }
.stream-focus.flow-good { border-left-color: var(--good); }
.stream-focus.flow-info { border-left-color: var(--dim); }
.flow-nav .badge { margin-left: auto; }

/* ---------- Wireshark-style display filters ---------- */
.dfl-bar { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; margin-top: .6rem; }
.dfl-input {
  flex: 1 1 22rem; min-width: 0; padding: .55rem .7rem; font-size: .86rem;
  border: 1px solid var(--rule); border-radius: 4px; background: var(--panel-2); color: var(--ink);
}
.dfl-input:focus { outline: 2px solid var(--brand); outline-offset: -1px; background: var(--paper); }
.dfl-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem 1.6rem; margin-top: .8rem;
}
.dfl-h {
  margin: 0 0 .4rem; font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .09em;
  color: var(--ink-2); border-bottom: 1px solid var(--rule-2); padding-bottom: .25rem;
}
.dfl-list { list-style: none; margin: 0; padding: 0; }
.dfl-list li { margin-bottom: .3rem; }
.dfl {
  display: block; text-decoration: none; padding: .35rem .5rem; border-radius: 4px;
  border: 1px solid transparent;
}
.dfl:hover { background: var(--panel-2); border-color: var(--rule); }
.dfl-f { display: block; font-family: var(--mono); font-size: .8rem; color: var(--brand-ink); }
.dfl-w { display: block; font-size: .76rem; color: var(--ink-2); margin-top: .1rem; }
.table-scroll { overflow-x: auto; }
.wrap-any { overflow-wrap: anywhere; word-break: break-all; }

/* ---------- the timeline ---------- */
.timeline { margin-top: .6rem; }
.netmap-svg .tl-axis { stroke: var(--rule); stroke-width: 1; }
.netmap-svg .tl-bar { fill: var(--brand); opacity: .55; }
.netmap-svg .tl-bad { fill: var(--bad); opacity: .95; }
.netmap-svg .tl-lbl { font: 400 10px var(--mono); fill: var(--ink-2); }

/* ---------- the protocol hierarchy bars ---------- */
.grid-table td.num, .grid-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bar-cell { width: 30%; min-width: 6rem; }
.bar {
  display: block; height: .55rem; border-radius: 2px; background: var(--brand); opacity: .55;
  min-width: 1px;
}
/* a linkable finding */
.obs-link {
  margin-left: auto; padding: 0 .35rem; color: var(--dim); text-decoration: none;
  font-family: var(--mono); font-size: .8rem; opacity: 0; transition: opacity .12s;
}
.obs-head:hover .obs-link, .obs-link:focus { opacity: 1; }
.obs:target { outline: 2px solid var(--brand); outline-offset: 2px; }
a.guide-card { text-decoration: none; color: inherit; display: block; }
a.guide-card:hover { border-color: var(--brand); background: var(--panel-2); }
.guide-more { display: block; margin-top: .45rem; font-size: .78rem; color: var(--brand-ink); font-weight: 600; }