/* ═══════════════════════════════════════════════════════════════════════
   LUVEEDU CLOUD NETWORK TOOLS — app styles
   Built on the Luveedu UI library (library.css v1). Only widgets the library
   does not provide live here; everything else uses lv-* classes.
   Typography is entirely the library's: no font faces and no font-family
   overrides are declared in this file.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Header search ────────────────────────────────────────────────────── */

.pmt-search-wrap {
    position: relative;
    flex: 0 1 auto;
    min-width: 0;
}

/* The library gives .lv-header-search its 360px minimum; leave it alone so the
   field matches the postman header instead of collapsing to its content. */
.pmt-header-search {
    width: 100%;
}

.pmt-search-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 60;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--lv-border-muted);
    border-radius: var(--lv-radius-sm);
    background: var(--lv-bg-surface-1);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18);
}

.pmt-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--lv-radius-sm);
    color: var(--lv-text-primary);
    text-decoration: none;
    cursor: pointer;
}

.pmt-search-item:hover,
.pmt-search-item.is-active {
    background: var(--lv-bg-surface-2);
}

.pmt-search-item-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--lv-radius-sm);
    background: var(--lv-bg-surface-2);
    color: var(--lv-accent-500);
}

.pmt-search-item-body {
    flex: 1;
    min-width: 0;
}

.pmt-search-item-label {
    display: block;
    margin: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lv-text-primary);
}

.pmt-search-item-group {
    display: block;
    margin: 1px 0 0;
    font-size: 11px;
    color: var(--lv-text-tertiary);
}

.pmt-search-empty {
    padding: 10px;
    font-size: 13px;
    color: var(--lv-text-tertiary);
}

/* ── Page header ──────────────────────────────────────────────────────── */

.page-header {
    margin-bottom: 24px;
}

.page-header-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.page-header-sub {
    margin: 4px 0 0;
}

/* ── Loading bar ──────────────────────────────────────────────────────── */

.pmt-loading-bar {
    position: relative;
    height: 3px;
    overflow: hidden;
    background: transparent;
    display: none;
    margin: 12px -20px -20px;
}

.pmt-loading-bar.loading { display: block; }

.pmt-loading-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    border-radius: 2px;
    background: var(--lv-accent-500);
    animation: pmt-loading-slide 1.1s ease-in-out infinite;
}

@keyframes pmt-loading-slide {
    0%   { left: -40%; }
    100% { left: 100%; }
}

/* ── Verdict strip ────────────────────────────────────────────────────── */

#dnsResults, #curlResults, #updownResults, #srResults, #nmapResults {
    scroll-margin-top: 84px;
}

.pmt-verdict {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    border: 1px solid var(--lv-border-muted);
    border-left: 3px solid var(--lv-accent-500);
    border-radius: var(--lv-radius-md);
    background: var(--lv-bg-surface-1);
}

.pmt-verdict-label {
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lv-text-tertiary);
}

.pmt-verdict-domain {
    margin: 4px 0 0;
    font-family: var(--lv-font-heading);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--lv-text-primary);
    word-break: break-all;
}

.pmt-verdict-meta {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--lv-text-tertiary);
}

.pmt-verdict-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ── Pills ────────────────────────────────────────────────────────────── */

.pmt-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--lv-radius-pill);
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

.pmt-badge .lv-icon { font-size: 12px; }

.pmt-badge-up      { background: #ecfdf5; color: #059669; }
.pmt-badge-down    { background: #fef2f2; color: #dc2626; }
.pmt-badge-warn    { background: #fffbeb; color: #b45309; }
.pmt-badge-luveedu { background: var(--lv-accent-100); color: var(--lv-accent-600); }
.pmt-badge-external{ background: #f4f4f5; color: #52525b; }
.pmt-badge-neutral { background: var(--lv-bg-surface-3); color: var(--lv-text-secondary); }

body[data-theme='dark'] .pmt-badge-up       { background: rgba(16, 185, 129, 0.15);  color: #6ee7b7; }
body[data-theme='dark'] .pmt-badge-down     { background: rgba(239, 68, 68, 0.15);   color: #fca5a5; }
body[data-theme='dark'] .pmt-badge-warn     { background: rgba(245, 158, 11, 0.15);  color: #fcd34d; }
body[data-theme='dark'] .pmt-badge-luveedu  { background: rgba(8, 171, 245, 0.16);   color: #65ccff; }
body[data-theme='dark'] .pmt-badge-external { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }
body[data-theme='dark'] .pmt-badge-neutral  { background: rgba(148, 163, 184, 0.15); color: #cbd5e1; }

/* ── Count pill in a card head ────────────────────────────────────────── */

.pmt-count {
    margin-left: auto;
    padding: 3px 9px;
    border-radius: var(--lv-radius-pill);
    background: var(--lv-bg-surface-2);
    border: 1px solid var(--lv-border-muted);
    font-size: 11px;
    font-weight: 600;
    color: var(--lv-text-tertiary);
    white-space: nowrap;
}

/* ── Key / value grid ─────────────────────────────────────────────────── */

.pmt-kv {
    display: grid;
    grid-template-columns: minmax(132px, 168px) minmax(0, 1fr);
    margin: 0;
}

.pmt-kv > dt {
    padding: 9px 16px 9px 0;
    border-bottom: 1px solid var(--lv-border-muted);
    font-size: 12px;
    color: var(--lv-text-tertiary);
}

.pmt-kv > dd {
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid var(--lv-border-muted);
    font-size: 13px;
    color: var(--lv-text-primary);
    word-break: break-word;
}

/* The final pair closes the list, so it does not need a rule. */
.pmt-kv > *:nth-last-child(-n + 2) { border-bottom: 0; }

.pmt-kv .pmt-none {
    color: var(--lv-text-disabled);
}

.pmt-kv a { color: var(--lv-link-default); }

/* ── Section label inside a card ──────────────────────────────────────── */

.pmt-section-label {
    margin: 18px 0 8px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--lv-text-tertiary);
}

/* ── Record list (DNS cards) ──────────────────────────────────────────── */

.pmt-record-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pmt-record {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--lv-border-muted);
    font-size: 12.5px;
}

.pmt-record:last-child { border-bottom: 0; }

.pmt-record-value {
    color: var(--lv-text-primary);
    word-break: break-all;
    min-width: 0;
}

.pmt-record-meta {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--lv-text-tertiary);
    white-space: nowrap;
}

.pmt-record-empty {
    margin: 0;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--lv-text-disabled);
}

/* ── Header list (cURL analysis) ──────────────────────────────────────── */

.pmt-header-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pmt-header-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--lv-border-muted);
}

.pmt-header-row:last-child { border-bottom: 0; }

.pmt-header-state {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    margin-top: 1px;
}

.pmt-header-state.ok   { background: rgba(16, 185, 129, 0.15); color: #059669; }
.pmt-header-state.miss { background: rgba(148, 163, 184, 0.2); color: var(--lv-text-tertiary); }

body[data-theme='dark'] .pmt-header-state.ok { color: #6ee7b7; }

.pmt-header-body { min-width: 0; flex: 1; }

.pmt-header-name {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lv-text-primary);
}

.pmt-header-value {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--lv-text-tertiary);
    word-break: break-all;
}

/* ── Latency breakdown (up/down) ──────────────────────────────────────── */

/* One bar split by stage: the segments share the full width in proportion to
   the time each stage took, so the slowest stage is visibly the widest. */
.pmt-lat-bar {
    display: flex;
    width: 100%;
    height: 14px;
    border-radius: var(--lv-radius-pill);
    background: var(--lv-bg-surface-3);
    overflow: hidden;
}

.pmt-lat-seg {
    display: block;
    height: 100%;
    flex: 0 0 auto;
    min-width: 2px;
    transition: width var(--lv-duration-slow) var(--lv-easing-emphasized);
}

.pmt-lat-dns  { background: var(--lv-accent-500); }
.pmt-lat-tcp  { background: var(--lv-accent-300); }
.pmt-lat-tls  { background: var(--lv-success-500); }
.pmt-lat-wait { background: var(--lv-warning-500); }

.pmt-lat-legend {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 24px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
}

.pmt-lat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--lv-text-tertiary);
}

.pmt-lat-dot {
    width: 9px;
    height: 9px;
    flex-shrink: 0;
    border-radius: 50%;
}

.pmt-lat-name { flex: 1; min-width: 0; }

.pmt-lat-ms {
    font-weight: 600;
    color: var(--lv-text-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pmt-lat-total {
    margin: 13px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--lv-border-muted);
    font-size: 12px;
    color: var(--lv-text-tertiary);
}

.pmt-lat-total strong {
    color: var(--lv-text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Redirect chain ───────────────────────────────────────────────────── */

.pmt-hop-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.pmt-hop {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--lv-border-muted);
}

.pmt-hop:first-child { padding-top: 0; }
.pmt-hop:last-child { border-bottom: 0; padding-bottom: 0; }

/* Vertical rail connecting the hops, so the order is obvious. */
.pmt-hop-rail {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 26px;
}

.pmt-hop-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    color: var(--lv-text-inverse);
    background: var(--lv-accent-500);
}

.pmt-hop-dot.is-ok { background: var(--lv-success-500); }
.pmt-hop-dot.is-warn { background: var(--lv-warning-500); }
.pmt-hop-dot.is-down { background: var(--lv-danger-500); }

.pmt-hop-body { flex: 1; min-width: 0; }

.pmt-hop-url {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--lv-text-primary);
    overflow-wrap: anywhere;
}

.pmt-hop-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 5px 0 0;
    font-size: 11.5px;
    color: var(--lv-text-tertiary);
}

.pmt-hop-status {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--lv-radius-pill);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--lv-bg-surface-2);
    color: var(--lv-text-secondary);
}

.pmt-hop-status.is-ok { color: var(--lv-success-500); }
.pmt-hop-status.is-warn { color: var(--lv-warning-500); }
.pmt-hop-status.is-down { color: var(--lv-danger-500); }

.pmt-hop-target {
    margin: 7px 0 0;
    font-size: 12px;
    color: var(--lv-text-secondary);
    overflow-wrap: anywhere;
}

.pmt-hop-target span {
    color: var(--lv-text-tertiary);
}

.pmt-note-plain {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lv-text-secondary);
}

/* ── Blocklist zone rows ──────────────────────────────────────────────── */

.pmt-zone-list {
    display: flex;
    flex-direction: column;
}

.pmt-zone {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--lv-border-muted);
    font-size: 12.5px;
}

.pmt-zone:first-child { padding-top: 0; }
.pmt-zone:last-child { border-bottom: 0; padding-bottom: 0; }

.pmt-zone-dot {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
}

.pmt-zone-dot.is-listed      { background: var(--lv-danger-500); }
.pmt-zone-dot.is-flagged     { background: var(--lv-warning-500); }
.pmt-zone-dot.is-clean       { background: var(--lv-success-500); }
.pmt-zone-dot.is-unavailable { background: var(--lv-text-disabled); }

.pmt-zone-body { flex: 1; min-width: 0; }

.pmt-zone-name {
    margin: 0;
    font-weight: 600;
    color: var(--lv-text-primary);
    overflow-wrap: anywhere;
}

.pmt-zone-detail {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--lv-text-tertiary);
    overflow-wrap: anywhere;
}

.pmt-zone-state {
    flex-shrink: 0;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.pmt-zone-state.is-listed      { color: var(--lv-danger-500); }
.pmt-zone-state.is-flagged     { color: var(--lv-warning-500); }
.pmt-zone-state.is-clean       { color: var(--lv-success-500); }
.pmt-zone-state.is-unavailable { color: var(--lv-text-tertiary); }

.pmt-zone-group + .pmt-zone-group {
    margin-top: 4px;
    padding-top: 14px;
    border-top: 1px solid var(--lv-border-muted);
}

.pmt-zone-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--lv-text-secondary);
    font-variant-numeric: tabular-nums;
}

.pmt-zone-group-head .pmt-zone-state { margin-left: auto; }

/* ── Pass / warn / fail check rows ────────────────────────────────────── */

.pmt-checks {
    display: flex;
    flex-direction: column;
    margin-top: 14px;
}

.pmt-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--lv-border-muted);
}

.pmt-check:first-child { padding-top: 0; }
.pmt-check:last-child { border-bottom: 0; padding-bottom: 0; }

.pmt-check-icon {
    flex-shrink: 0;
    margin-top: 1px;
}

.pmt-check-icon.is-pass { color: var(--lv-success-500); }
.pmt-check-icon.is-warn { color: var(--lv-warning-500); }
.pmt-check-icon.is-fail { color: var(--lv-danger-500); }

.pmt-check-body { flex: 1; min-width: 0; }

.pmt-check-label {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lv-text-primary);
}

.pmt-check-detail {
    margin: 2px 0 0;
    font-size: 11.5px;
    color: var(--lv-text-tertiary);
    overflow-wrap: anywhere;
}

/* ── Stat grid (resources) ────────────────────────────────────────────── */

.pmt-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.pmt-stat {
    padding: 12px;
    border: 1px solid var(--lv-border-muted);
    border-radius: var(--lv-radius-sm);
    background: var(--lv-bg-surface-2);
}

.pmt-stat-label {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lv-text-tertiary);
}

.pmt-stat-value {
    margin: 4px 0 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--lv-text-primary);
    line-height: 1.2;
}

/* ── Steps (troubleshoot progress) ────────────────────────────────────── */

/* Segmented progress bar: one horizontal track per step, filling as the
   check runs. The bar carries the state, so the text below it is secondary. */
.pmt-steps {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 8px;
}

.pmt-step {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.pmt-step-bar {
    display: block;
    height: 5px;
    border-radius: 99px;
    background: var(--lv-bg-surface-3);
    overflow: hidden;
}

.pmt-step-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: var(--lv-accent-500);
    transition: width .35s ease, background-color .25s ease;
}

/* Running: the fill sweeps while the check is in flight. */
.pmt-step.is-running .pmt-step-bar-fill {
    width: 100%;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, .45) 50%,
        transparent 100%
    );
    background-size: 45% 100%;
    background-repeat: no-repeat;
    animation: pmt-step-sweep 1.15s linear infinite;
}

.pmt-step.is-done .pmt-step-bar-fill {
    width: 100%;
    background-color: #10b981;
    background-image: none;
    animation: none;
}

@keyframes pmt-step-sweep {
    from { background-position: -50% 0; }
    to   { background-position: 150% 0; }
}

.pmt-step-label {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    font-size: 12px;
    font-weight: 550;
    color: var(--lv-text-secondary);
    transition: color .2s ease;
}

.pmt-step-label .lv-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: var(--lv-text-tertiary);
    transition: color .2s ease;
}

.pmt-step-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pmt-step-state {
    font-size: 11px;
    line-height: 1.3;
    color: var(--lv-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-height: 14px;
}

.pmt-step.is-running .pmt-step-label,
.pmt-step.is-running .pmt-step-label .lv-icon { color: var(--lv-accent-500); }
.pmt-step.is-running .pmt-step-state { color: var(--lv-accent-500); }

.pmt-step.is-done .pmt-step-label { color: var(--lv-text-primary); }
.pmt-step.is-done .pmt-step-label .lv-icon { color: #059669; }
.pmt-step.is-done .pmt-step-state { color: #059669; }

@media (max-width: 640px) {
    .pmt-steps { gap: 5px; }
    .pmt-step { gap: 5px; }
    .pmt-step-label { font-size: 10.5px; gap: 3px; }
    .pmt-step-label .lv-icon { display: none; }
    .pmt-step-state { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .pmt-step.is-running .pmt-step-bar-fill { animation: none; background-image: none; }
}

/* ── Speed readout ────────────────────────────────────────────────────── */

.pmt-speed {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.pmt-speed-item {
    padding: 14px;
    border: 1px solid var(--lv-border-muted);
    border-radius: var(--lv-radius-sm);
    background: var(--lv-bg-surface-2);
}

.pmt-speed-label {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lv-text-tertiary);
}

.pmt-speed-value {
    margin: 6px 0 0;
    font-family: var(--lv-font-heading);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lv-text-primary);
}

.pmt-speed-unit {
    font-size: 12px;
    font-weight: 600;
    color: var(--lv-text-tertiary);
    margin-left: 4px;
}

.pmt-speed-alt {
    margin: 3px 0 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lv-accent-500);
    font-variant-numeric: tabular-nums;
}

.pmt-speed-note {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--lv-text-tertiary);
}

/* ── Notes ────────────────────────────────────────────────────────────── */

.pmt-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    padding: 11px 14px;
    border: 1px solid var(--lv-border-muted);
    border-left: 3px solid var(--lv-warning-500);
    border-radius: var(--lv-radius-sm);
    background: var(--lv-bg-surface-2);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--lv-text-secondary);
}

/* ── Lists ────────────────────────────────────────────────────────────── */

.pmt-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.pmt-list li {
    padding: 5px 10px;
    border: 1px solid var(--lv-border-muted);
    border-radius: var(--lv-radius-sm);
    background: var(--lv-bg-surface-2);
    font-size: 12px;
    color: var(--lv-text-secondary);
    word-break: break-all;
}

.pmt-list:empty::before {
    content: 'No candidates exposed.';
    font-size: 12.5px;
    color: var(--lv-text-disabled);
}

/* ── Code / raw output ────────────────────────────────────────────────── */

.pmt-code {
    border: 1px solid var(--lv-border-muted);
    border-radius: var(--lv-radius-sm);
    background: var(--lv-bg-surface-2);
    overflow: hidden;
}

.pmt-raw-pre {
    margin: 0;
    padding: 14px;
    font-size: 12px;
    line-height: 1.7;
    color: var(--lv-text-secondary);
    white-space: pre;
    overflow: auto;
    max-height: 420px;
}

/* ── Tables ───────────────────────────────────────────────────────────── */

.pmt-kv-table { table-layout: fixed; }

.pmt-kv-table col.pmt-col-name  { width: 34%; }
.pmt-kv-table col.pmt-col-port  { width: 80px; }
.pmt-kv-table col.pmt-col-group { width: 130px; }
.pmt-kv-table col.pmt-col-proto { width: 76px; }

/* Empty-state row: scoped to `.lv-table td` because the library's own rule is
   a class + element selector and would otherwise win. */
.lv-table td.pmt-table-empty {
    padding: 32px 16px;
    text-align: center;
    font-size: 13px;
    color: var(--lv-text-tertiary);
}

/* ── Input wrappers ───────────────────────────────────────────────────── */

.pmt-resolver-wrap { width: 180px; flex-shrink: 0; }
.pmt-ports-wrap    { width: 190px; flex-shrink: 0; }

/* ── Empty state ──────────────────────────────────────────────────────── */

.pmt-empty {
    padding: 56px 24px;
    border: 1px dashed var(--lv-border-strong);
    border-radius: var(--lv-radius-md);
    text-align: center;
}

.pmt-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
    border-radius: var(--lv-radius-pill);
    background: var(--lv-bg-surface-3);
    color: var(--lv-accent-500);
    font-size: 20px;
}

.pmt-empty-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--lv-text-primary);
}

.pmt-empty-text {
    margin: 6px auto 0;
    max-width: 400px;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--lv-text-tertiary);
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width: 1023px) {
    .pmt-search-wrap { flex: 1 1 auto; }
}

@media (max-width: 639px) {
    .pmt-btn-label { display: none; }
    .pmt-header-link { width: 44px; padding: 0; justify-content: center; }

    .pmt-search-wrap { flex: 1 1 auto; }
    .pmt-search-panel { max-height: 260px; }

    .pmt-lat-legend { grid-template-columns: 1fr; gap: 7px; }


    /* Key/value pairs stack so long values keep a readable measure. */
    .pmt-kv { grid-template-columns: 1fr; }
    .pmt-kv > dt { padding: 12px 0 0; border-bottom: 0; }
    .pmt-kv > dd { padding: 1px 0 12px; border-bottom: 1px solid var(--lv-border-muted); }
    .pmt-kv > *:nth-last-child(-n + 2) { border-bottom: 0; }

    .pmt-verdict { padding: 16px; }
    .pmt-verdict-domain { font-size: 19px; }

    .pmt-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pmt-speed { grid-template-columns: 1fr; }


    .pmt-kv-table col.pmt-col-name  { width: 40%; }
    .pmt-kv-table col.pmt-col-port  { width: 64px; }
    .pmt-kv-table col.pmt-col-group { width: 96px; }
    .pmt-kv-table col.pmt-col-proto { width: 60px; }

    .pmt-resolver-wrap,
    .pmt-ports-wrap { width: 100%; }

    .pmt-raw-pre { max-height: 320px; font-size: 11.5px; }
    .pmt-empty { padding: 40px 18px; }

    /* Touch targets: 44px minimum for anything a thumb has to hit. */
    .lv-main .lv-btn,
    .lv-main .lv-input,
    .lv-main .lv-select,
    .lv-header .lv-btn {
        height: 44px;
        min-height: 44px;
    }

    .lv-main .lv-btn-icon,
    .lv-header .lv-btn-icon,
    .lv-sidebar .lv-btn-icon {
        min-width: 44px;
        min-height: 44px;
    }

    .lv-sidebar .lv-btn,
    .lv-main .lv-chip {
        height: 44px;
        min-height: 44px;
    }
}

/* ── External tool links ──────────────────────────────────────────────── */

/* A tool that lives on another host: the trailing arrow sits at the far end of
   the row so it never competes with the label for the eye. */
.lv-nav-link .pmt-nav-external {
    margin-left: auto;
    font-size: 13px;
    opacity: 0.5;
    flex-shrink: 0;
}

.lv-nav-link:hover .pmt-nav-external {
    opacity: 0.9;
}

/* ── Print: produce a clean report ────────────────────────────────────── */

@media print {
    .lv-sidebar,
    .lv-header,
    .lv-sidebar-overlay,
    form,
    .pmt-loading-bar,
    .pmt-header-link,
    .pmt-empty,
    .lv-btn,
    .lv-chip {
        display: none !important;
    }

    .lv-app { display: block; }
    .lv-main { padding: 0 !important; background: #fff !important; }

    .lv-card,
    .pmt-verdict {
        border: 1px solid #cbd5e1 !important;
        box-shadow: none !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }


    .pmt-raw-pre { max-height: none !important; overflow: visible !important; }

    body { background: #fff !important; color: #000 !important; }
}

/* ── SEO content block ────────────────────────────────────────────────
   Reference material under each tool. Typographic, not decorative: it is
   the part of the page a search engine reads and a person skims. */
.pmt-seo {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--lv-border-muted);
    max-width: 78ch;
}
.pmt-seo-block + .pmt-seo-block { margin-top: 26px; }
.pmt-seo-h2 {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -0.01em;
    color: var(--lv-text-primary);
    margin: 0 0 10px;
}
.pmt-seo p {
    margin: 0 0 12px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--lv-text-secondary);
}
.pmt-seo ul { margin: 0 0 12px; padding-left: 20px; }
.pmt-seo li {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--lv-text-secondary);
    margin-bottom: 7px;
}
.pmt-seo strong { color: var(--lv-text-primary); font-weight: 600; }
.pmt-seo code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: var(--lv-bg-surface-3, rgba(127,127,127,0.1));
    padding: 1px 5px;
    border-radius: 4px;
}

.pmt-seo-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4px 0 14px;
    font-size: 13.5px;
}
.pmt-seo-table th,
.pmt-seo-table td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--lv-border-muted);
    vertical-align: top;
    color: var(--lv-text-secondary);
}
.pmt-seo-table th {
    font-weight: 600;
    color: var(--lv-text-primary);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pmt-seo-table td:first-child { white-space: nowrap; }

.pmt-seo-faq { display: flex; flex-direction: column; gap: 2px; }
.pmt-faq-item {
    border-bottom: 1px solid var(--lv-border-muted);
}
.pmt-faq-q {
    cursor: pointer;
    padding: 11px 0;
    font-size: 14.5px;
    font-weight: 550;
    color: var(--lv-text-primary);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pmt-faq-q::-webkit-details-marker { display: none; }
.pmt-faq-q::before {
    content: '+';
    font-weight: 400;
    color: var(--lv-text-tertiary);
    width: 12px;
    flex-shrink: 0;
}
.pmt-faq-item[open] .pmt-faq-q::before { content: '\2212'; }
.pmt-faq-a { padding: 0 0 12px 20px; }
.pmt-faq-a p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--lv-text-secondary);
}

/* Related tools: cards rather than a bare list, because this is the block a
   visitor actually clicks when the tool they landed on is not the one they
   needed. The icon comes from the sidebar registry, so a tool looks the same
   in both places. */
.pmt-seo .pmt-seo-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: 10px;
}
.pmt-seo .pmt-seo-links li { padding: 0; margin: 0; border: 0; }

.pmt-seo-links a {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    height: 100%;
    padding: 13px 14px;
    border: 1px solid var(--lv-border-muted);
    border-radius: 10px;
    background: var(--lv-bg-surface-2, transparent);
    text-decoration: none;
    transition: border-color .16s ease, background-color .16s ease,
                transform .16s ease, box-shadow .16s ease;
}
.pmt-seo-links a:hover {
    border-color: var(--lv-accent-500);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .45);
}
.pmt-seo-links a:focus-visible {
    outline: 2px solid var(--lv-accent-500);
    outline-offset: 2px;
}

.pmt-seo-link-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.12);
    background: color-mix(in srgb, var(--lv-accent-500) 13%, transparent);
    color: var(--lv-accent-500);
    transition: background-color .16s ease;
}
.pmt-seo-links a:hover .pmt-seo-link-icon {
    background: rgba(37, 99, 235, 0.2);
    background: color-mix(in srgb, var(--lv-accent-500) 22%, transparent);
}
.pmt-seo-link-icon .lv-icon { width: 15px; height: 15px; }

.pmt-seo-link-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.pmt-seo-link-label {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--lv-text-primary);
}
.pmt-seo-link-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--lv-text-tertiary);
}

.pmt-seo-link-go {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    color: var(--lv-text-tertiary);
    opacity: 0;
    transform: translate(-3px, 3px);
    transition: opacity .16s ease, transform .16s ease, color .16s ease;
}
.pmt-seo-links a:hover .pmt-seo-link-go {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--lv-accent-500);
}
.pmt-seo-link-go .lv-icon { width: 14px; height: 14px; }

/* Keyboard and touch users get the arrow without a hover state. */
@media (hover: none) {
    .pmt-seo-link-go { opacity: .5; transform: none; }
}

@media (max-width: 640px) {
    .pmt-seo-table { font-size: 12.5px; }
    .pmt-seo-table th, .pmt-seo-table td { padding: 7px 8px; }
    .pmt-seo-table td:first-child { white-space: normal; }
}

/* ── Troubleshoot: cards build up as checks finish ─────────────────────
   The grid used to be revealed empty at the start of a 30 second transfer.
   Each card now stays out of the layout until its data exists, then fades
   in, so the page grows instead of filling placeholders. */
[data-ts-card].is-pending { display: none; }

[data-ts-card].is-entering {
    animation: pmt-ts-enter .34s cubic-bezier(.22, .8, .3, 1) both;
}

@keyframes pmt-ts-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    [data-ts-card].is-entering { animation: none; }
}

/* ── New tool components ──────────────────────────────────────────────── */

/* Contact blocks on the domain owner page. */
.pmt-contact {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--lv-border-muted);
    font-size: 13px;
}
.pmt-contact:last-child { border-bottom: 0; }
.pmt-contact-role {
    margin: 0;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--lv-text-tertiary);
}
.pmt-contact-body {
    margin: 0;
    line-height: 1.6;
    color: var(--lv-text-secondary);
    word-break: break-word;
}
.pmt-contact-body a { color: var(--lv-accent-500); text-decoration: none; }
.pmt-contact-body a:hover { text-decoration: underline; }

/* Delivery hops on the email header page. */
.pmt-mailhop {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 10px 0;
    border-bottom: 1px solid var(--lv-border-muted);
}
.pmt-mailhop:last-child { border-bottom: 0; }
.pmt-mailhop-index {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lv-bg-surface-3);
    color: var(--lv-text-tertiary);
    font-size: 11px;
    font-weight: 600;
}
.pmt-mailhop-body { min-width: 0; flex: 1; }
.pmt-mailhop-main {
    margin: 0;
    font-size: 13px;
    font-weight: 550;
    color: var(--lv-text-primary);
    word-break: break-word;
}
.pmt-mailhop-sub {
    margin: 2px 0 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--lv-text-tertiary);
    word-break: break-word;
}

/* Findings, coloured by severity. */
.pmt-finding {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 10px 0;
    border-bottom: 1px solid var(--lv-border-muted);
}
.pmt-finding:last-child { border-bottom: 0; }
.pmt-finding p {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--lv-text-secondary);
}
.pmt-finding-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-top: 7px;
    border-radius: 50%;
    background: var(--lv-text-tertiary);
}
.pmt-finding.is-high .pmt-finding-dot { background: var(--lv-danger-500); }
.pmt-finding.is-medium .pmt-finding-dot { background: var(--lv-warning-500); }
.pmt-finding.is-low .pmt-finding-dot { background: var(--lv-text-tertiary); }

/* Simple record rows, used for certificate names. */
.pmt-record-row {
    padding: 7px 0;
    border-bottom: 1px solid var(--lv-border-muted);
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--lv-text-secondary);
    word-break: break-all;
}
.pmt-record-row:last-child { border-bottom: 0; }

@media (max-width: 560px) {
    .pmt-contact { grid-template-columns: 1fr; gap: 3px; }
}

/* Inline text button, used for "try your own IP". */
.pmt-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12.5px;
    font-weight: 550;
    color: var(--lv-accent-500);
    cursor: pointer;
}
.pmt-link-btn:hover { text-decoration: underline; }
.pmt-link-btn:disabled { opacity: .6; cursor: default; }
.pmt-link-btn .lv-icon { width: 13px; height: 13px; }
.pmt-link-hint { color: var(--lv-text-tertiary); font-weight: 400; }

/* ── Speedometer dials ────────────────────────────────────────────────── */

.pmt-gauge {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.pmt-gauge .pmt-speed-label { text-align: center; margin-bottom: 2px; }

.pmt-gauge-dial { position: relative; }

.pmt-gauge-svg { display: block; width: 100%; height: auto; }

.pmt-gauge-track {
    fill: none;
    stroke: var(--lv-bg-surface-3);
    stroke-width: 11;
    stroke-linecap: round;
}

.pmt-gauge-fill {
    fill: none;
    /* The stroke colour is url(#tsDownGrad) / url(#tsUpGrad) from the markup. */
    stroke-width: 11;
    stroke-linecap: round;
    transition: stroke-dashoffset .4s cubic-bezier(.22, .8, .3, 1);
}

.pmt-gauge-tick {
    stroke: var(--lv-border-strong);
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* Centred in the dial: with no needle there is nothing to collide with. */
.pmt-gauge-readout {
    position: absolute;
    left: 0;
    right: 0;
    top: 58%;
    transform: translateY(-50%);
    text-align: center;
}

.pmt-gauge .pmt-speed-value {
    margin: 0;
    font-size: 24px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}
.pmt-gauge .pmt-speed-alt { margin: 2px 0 0; }
.pmt-gauge .pmt-speed-note {
    text-align: center;
    margin-top: 4px;
    min-height: 15px;
}

@media (max-width: 560px) {
    .pmt-speed { grid-template-columns: 1fr; }
    .pmt-gauge .pmt-speed-value { font-size: 23px; }
}

/* ── Latency row under the dials ──────────────────────────────────────── */

.pmt-latency {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
    /* Full-bleed divider. The card body pads 20px, so pull the row out by that
       much to reach both edges, then put the padding back inside so the columns
       still line up with the dials above. */
    margin-left: -20px;
    margin-right: -20px;
    padding: 14px 20px 0;
    border-top: 1px solid var(--lv-border-muted);
}

.pmt-latency-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    min-width: 0;
}

.pmt-latency-icon {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--lv-bg-surface-3);
    color: var(--lv-text-tertiary);
}
.pmt-latency-icon .lv-icon { width: 13px; height: 13px; }

.pmt-latency-label {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lv-text-tertiary);
}

.pmt-latency-value {
    margin: 2px 0 0;
    font-family: var(--lv-font-heading);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--lv-text-primary);
    font-variant-numeric: tabular-nums;
}

.pmt-latency-unit {
    font-size: 11px;
    font-weight: 600;
    color: var(--lv-text-tertiary);
    margin-left: 3px;
}

.pmt-latency-hint {
    margin: 2px 0 0;
    font-size: 11px;
    line-height: 1.35;
    color: var(--lv-text-tertiary);
}

@media (max-width: 560px) {
    .pmt-latency { grid-template-columns: 1fr; gap: 12px; }
    .pmt-latency-item { align-items: center; }
}