/* Offline UI: blue slate, restrained result colors, no external fonts. */
:root {
  --canvas:#edf2f8;
  --paper:#fff;
  --ink:#18334e;
  --muted:#52687c;
  --line:#d4dfea;
  --blue:#235b9d;
  --green:#176448;
  --red:#a42c35;
  --amber:#805516;
  --radius:12px;
  font-family:"Segoe UI",Tahoma,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
body {
  margin:0
}
button,input,select {
  font:inherit
}
button,summary,label {
  -webkit-tap-highlight-color:transparent
}
button,select {
  border:1px solid var(--line);
  border-radius:7px;
  background:var(--paper);
  color:var(--ink);
  padding:9px 13px
}
button,summary,select {
  cursor:pointer
}
button:disabled {
  opacity:.6;
  cursor:wait
}
button:focus-visible,summary:focus-visible,select:focus-visible,label:has(input:focus-visible) {
  outline:3px solid #3977be;
  outline-offset:3px
}
button:hover:not(:disabled) {
  border-color:var(--blue)
}
[hidden] {
  display:none!important
}
.workspace {
  max-width:1440px;
  margin:auto;
  padding:22px 32px
}
.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px
}
.identity {
  display:flex;
  align-items:center;
  gap:13px
}
.brand-mark {
  position:relative;
  border:2px solid var(--ink);
  border-radius:10px 10px 16px 16px;
  font-size:27px;
  font-weight:750;
  width:43px;
  height:45px;
  text-align:center;
  line-height:39px
}
.brand-mark span {
  position:absolute;
  font-size:15px;
  background:var(--canvas);
  right:-7px;
  bottom:-8px;
  line-height:22px
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:25px;
  letter-spacing:-.7px;
  line-height:1.15
}
h1 span {
  font-weight:400;
  color:var(--muted);
  padding-left:5px
}
.identity p {
  font-size:14px;
  color:var(--muted);
  margin-top:5px
}
.source-badge {
  font-size:13px;
  font-weight:600;
  padding:8px 11px;
  border:1px dashed #8299b2;
  border-radius:6px;
  background:#e4ecf6;
  color:#244d7a
}
.controls {
  display:flex;
  align-items:center;
  gap:18px;
  background:var(--paper);
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.scenario {
  border:0;
  padding:0;
  margin:0;
  display:flex;
  gap:3px
}
.scenario legend {
  font-size:12px;
  color:var(--muted);
  margin-bottom:5px
}
.scenario label {
  position:relative;
  cursor:pointer
}
.scenario input {
  position:absolute;
  opacity:0;
  width:100%;
  height:100%;
  margin:0;
  cursor:pointer
}
.scenario span {
  display:block;
  border:1px solid transparent;
  padding:8px 13px;
  border-radius:6px;
  font-size:14px;
  font-weight:600
}
.scenario input:checked+span {
  color:var(--blue);
  background:#e8f0fa;
  border-color:#b6cee9
}
.scenario input:disabled+span {
  opacity:.6
}
.target {
  border-left:1px solid var(--line);
  padding-left:20px;
  display:grid;
  gap:4px
}
.target span {
  font-size:12px;
  color:var(--muted)
}
.target strong {
  font-family:Consolas,monospace;
  font-size:16px
}
.primary {
  margin-left:auto;
  background:var(--blue);
  border-color:var(--blue);
  color:white;
  font-weight:600;
  padding:12px 19px
}
.topology {
  margin-top:17px;
  background:#e6edf6;
  border:1px solid #cdd9e8;
  border-radius:var(--radius);
  padding:12px 18px 0
}
.section-line,.result-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}
.section-line h2 {
  font-size:14px;
  font-weight:650
}
.section-line span {
  color:var(--muted);
  font-size:12px
}
.topology svg {
  display:block;
  width:100%;
  height:145px
}
.node rect {
  fill:#f9fbff;
  stroke:#b3c5d9
}
.node text {
  text-anchor:middle;
  font-size:16px;
  font-weight:650;
  fill:var(--ink)
}
.node .node-sub {
  font-size:13px;
  font-weight:400;
  fill:var(--muted)
}
.secure-node rect {
  stroke:#759f93;
  fill:#f3faf7
}
.node.tampered rect {
  fill:#fff2ef;
  stroke:#bd6760
}
.node.tampered .node-sub {
  fill:var(--red)
}
.path-note {
  font-size:12px;
  fill:var(--muted);
  text-anchor:middle
}
.route-summary {
  border-top:1px solid #cdd9e8;
  padding:9px 0;
  font-size:13px;
  min-height:37px;
  color:#385770
}
.result-heading {
  margin-top:18px;
  margin-bottom:8px
}
.result-heading h2 {
  font-size:18px;
  letter-spacing:-.3px
}
.result-heading span {
  color:var(--muted);
  font-size:12px
}
.notice {
  font-size:13px;
  color:var(--muted);
  padding-bottom:10px;
  min-height:28px
}
.notice.error {
  color:var(--red);
  font-weight:600
}
.comparison {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.result-panel {
  min-width:0;
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:var(--radius);
  overflow:hidden;
  border-top:3px solid #92a8bf
}
.result-panel header {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:13px 16px;
  gap:10px;
  border-bottom:1px solid #e2e8f0
}
.result-panel h3 {
  font-size:17px;
  line-height:1.3
}
.result-panel header p {
  color:var(--muted);
  font-size:12px;
  margin-top:4px
}
.outcome {
  border-radius:5px;
  padding:6px 9px;
  font-size:12px;
  font-weight:650;
  white-space:nowrap
}
.neutral {
  background:#eef2f7;
  color:var(--muted)
}
.success {
  background:#e6f4ed;
  color:var(--green)
}
.danger {
  background:#fcebed;
  color:var(--red)
}
.warning {
  background:#fff3dd;
  color:var(--amber)
}
.result-panel[data-tone="success"] {
  border-top-color:var(--green)
}
.result-panel[data-tone="danger"] {
  border-top-color:var(--red)
}
.result-panel[data-tone="warning"] {
  border-top-color:var(--amber)
}
.panel-body {
  padding:12px 16px
}
.metrics {
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr 1.35fr;
  gap:10px;
  border-bottom:1px solid #e2e8f0;
  padding-bottom:10px
}
.metrics dt {
  font-size:12px;
  color:var(--muted);
  margin-bottom:4px
}
.metrics dd {
  font-family:Consolas,monospace;
  font-size:15px;
  margin:0
}
.delivery {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:13px;
  margin:10px 0;
  color:var(--muted);
  flex-wrap:wrap
}
.delivery strong {
  color:var(--ink)
}
.preview {
  border:1px solid var(--line);
  border-radius:7px;
  overflow:hidden
}
.preview-label {
  background:#f3f6fa;
  padding:6px 10px;
  font-size:11px;
  color:var(--muted)
}
iframe {
  display:block;
  width:100%;
  height:98px;
  border:0;
  background:#f8fafc
}
.empty {
  display:grid;
  place-content:center;
  text-align:center;
  min-height:183px;
  gap:8px;
  color:var(--muted);
  font-size:14px
}
.empty strong {
  font-size:17px;
  color:var(--ink)
}
.stopped {
  padding:15px;
  background:#faf1f1;
  border:1px solid #ebc8cc;
  border-radius:7px;
  min-height:123px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  color:var(--red);
  font-size:13px
}
.stopped strong {
  font-size:18px
}
.stopped button {
  align-self:flex-start;
  margin-top:3px;
  padding:5px 9px;
  font-size:12px
}
.stopped.warning-box {
  background:#fff8eb;
  color:var(--amber);
  border-color:#ead5ae
}
.evidence {
  margin-top:13px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#f7f9fc
}
.evidence summary {
  padding:11px 14px;
  font-size:14px;
  font-weight:600
}
.evidence summary span {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  margin-left:8px
}
.evidence-body {
  padding:2px 14px 14px
}
.evidence-body p {
  font-size:14px;
  line-height:1.6;
  max-width:85ch
}
.evidence-actions {
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0;
  font-size:12px
}
pre {
  font-family:Consolas,monospace;
  font-size:12px;
  max-height:360px;
  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  background:#eaf0f7;
  padding:14px;
  border-radius:6px
}
footer {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:25px;
  margin:12px 0;
  font-size:11px;
  color:var(--muted);
  line-height:1.5
}
footer>p {
  max-width:85ch
}
.review {
  max-width:330px
}
.review summary {
  text-align:right
}
.review label {
  display:block;
  margin:9px 0 5px
}
.review select {
  font-size:12px;
  width:100%
}
.comparison.stale {
  opacity:.6
}
.comparison.stale iframe {
  display:none
}
.loading .dns-path {
  stroke-dasharray:7 7;
  animation:travel .7s linear infinite
}
.loading .empty strong::after {
  content:"…"
}
@keyframes travel {
  to {
    stroke-dashoffset:-28
  }
}
@media(prefers-reduced-motion:reduce) {
  .loading .dns-path {
    animation:none
  }
}
@media(min-width:1200px) and (max-height:800px) {
  .workspace {
    padding-top:15px
  }
  .masthead {
    margin-bottom:14px
  }
  .topology {
    margin-top:12px
  }
  .topology svg {
    height:126px
  }
  .result-heading {
    margin-top:12px
  }
  .panel-body {
    padding:10px 14px
  }
  .result-panel header {
    padding:11px 14px
  }
}
@media(max-width:900px) {
  .workspace {
    padding:18px
  }
  .masthead {
    align-items:flex-start
  }
  .source-badge {
    max-width:200px
  }
  .controls {
    flex-wrap:wrap;
    gap:12px
  }
  .target {
    margin-left:auto
  }
  .primary {
    margin-left:0
  }
  .comparison {
    gap:12px
  }
  .result-panel header {
    align-items:flex-start;
    flex-direction:column
  }
  .topology svg {
    height:auto;
    min-height:105px
  }
  .section-line span {
    max-width:240px;
    text-align:right
  }
  .metrics {
    grid-template-columns:1fr 1fr
  }
  .metrics div:last-child {
    grid-column:1/-1
  }
}
@media(max-width:600px) {
  .workspace {
    padding:14px 12px
  }
  .masthead {
    flex-direction:column;
    gap:12px
  }
  .source-badge {
    max-width:none
  }
  h1 {
    font-size:23px
  }
  .controls {
    padding:12px
  }
  .scenario {
    width:100%;
    justify-content:space-between
  }
  .scenario span {
    padding:8px 9px;
    font-size:13px
  }
  .target {
    margin:0;
    border:0;
    padding:0
  }
  .primary {
    margin-left:auto;
    padding:11px
  }
  .comparison {
    grid-template-columns:1fr
  }
  .section-line {
    align-items:flex-start;
    flex-direction:column;
    gap:4px
  }
  .section-line span {
    text-align:left;
    max-width:none
  }
  .topology {
    padding:12px 10px 0;
    overflow-x:auto
  }
  .topology svg {
    min-width:650px
  }
  .route-summary {
    min-width:0;
    line-height:1.5
  }
  .result-heading {
    align-items:flex-start;
    flex-direction:column;
    gap:5px
  }
  .metrics {
    grid-template-columns:1fr 1fr 1.35fr
  }
  .metrics div:last-child {
    grid-column:auto
  }
  .result-panel header {
    flex-direction:row
  }
  .result-panel h3 {
    font-size:16px
  }
  .evidence summary span {
    display:block;
    margin:4px 0 0 15px
  }
  .evidence-actions {
    flex-wrap:wrap
  }
  footer {
    flex-direction:column;
    gap:10px
  }
  .review summary {
    text-align:left
  }
}

/* Live measurements share the existing visual layout. */
.timing {font-size:11px;color:var(--muted);margin:-4px 0 8px}
.preview-loading {font-size:13px;padding:12px;color:var(--muted)}
iframe {height:112px}
.evidence-actions {flex-wrap:wrap}
#proof-result h3 {font-size:15px;margin-top:14px}
.source-badge {text-align:right}
@media(min-width:1200px) and (max-height:800px) {.topology svg {height:96px}}
@media(max-width:600px) {.result-heading span {overflow-wrap:anywhere}.source-badge {text-align:left}.timing {line-height:1.5}}