/* Canonical Host Checker.
   ---------------------------------------------------------------------------
   Extends the .nettool-page family rather than introducing a design system of
   its own, so this tool reads as part of the site. Palette, radii, shadows and
   type all come from network-tools-shared.css; only the pieces with no existing
   equivalent are defined here.

   Two ideas are borrowed from design/theme-sample-v2.html without borrowing its
   palette:
     - hairline rules do the dividing, so panels can be dense without a box
       around every row;
     - anything a machine produced is set in mono, with an uppercase micro-label
       above it. Measurement and prose never look alike.
   =========================================================================== */

/* ============================================================ lane tones == */
/* Five tones, mirrored exactly in TONES{} in canonical-host-checker.js so the
   drawn lane, the card border and the status pill cannot drift apart.

     live  the address that serves - a destination, not a warning
     good  a clean single permanent hop; nothing to do
     warn  reaches the right place awkwardly, or answered without a page
     bad   actively wrong: a duplicate, or a loop
     dead  no answer at all                                                    */

.nettool-page .tone-live { --vt: #3d47c9; --vt-soft: #eef0fd; --vt-line: #c6cbf4; --vt-ink: #2a339e }
.nettool-page .tone-good { --vt: #0f7a4d; --vt-soft: #eef8f2; --vt-line: #b3ddc7; --vt-ink: #0d5f3d }
.nettool-page .tone-warn { --vt: #a06a12; --vt-soft: #fdf6ea; --vt-line: #e8d0a4; --vt-ink: #7d5210 }
.nettool-page .tone-bad  { --vt: #c0392b; --vt-soft: #fdf1f0; --vt-line: #f0c3bd; --vt-ink: #96271c }
.nettool-page .tone-dead { --vt: #94a3b8; --vt-soft: #f4f6f8; --vt-line: #d8dfe6; --vt-ink: #63748a }

/* ================================================================== hero == */

/* The shared hero draws a large decorative ring at top-right. With a second
   column occupying that space it turns into visual noise, so it is stood down
   here and the illustration carries the corner instead. */
.nettool-page .chc-hero::after { display: none }

.nettool-page .chc-hero { padding: 38px }

.nettool-page .chc-hero-grid {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 34px; align-items: center;
}
.nettool-page .chc-hero-main { min-width: 0 }

.nettool-page .chc-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 14px;
    font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase;
    color: var(--net-primary);
}
.nettool-page .chc-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--net-accent);
    box-shadow: 0 0 0 4px rgba(8, 145, 178, .14);
}

.nettool-page .chc-hero h1 { font-size: clamp(2.05rem, 3.4vw, 3.1rem) }

.nettool-page .chc-lede {
    max-width: 60ch; margin: 14px 0 0;
    color: #47586a; font-size: 1.06rem; line-height: 1.62;
}
.nettool-page .chc-lede code {
    padding: 1px 6px; border-radius: 6px;
    background: rgba(3, 105, 161, .09); color: var(--net-primary-dark);
    font-size: .92em; font-weight: 600;
}

.nettool-page .chc-hero .search-row { margin-top: 26px }

.nettool-page .chc-examples {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 14px;
}
.nettool-page .chc-examples-label {
    font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    color: var(--net-muted);
}
.nettool-page .chc-example {
    padding: 6px 12px; border: 1px solid #cfe0ec; border-radius: 999px;
    background: rgba(255, 255, 255, .8); color: var(--net-primary-dark);
    font-family: "SFMono-Regular", Consolas, monospace; font-size: .78rem; font-weight: 600;
    transition: border-color .18s, background .18s, transform .18s;
}
.nettool-page .chc-example:hover {
    border-color: var(--net-primary); background: #fff; transform: translateY(-1px);
}

.nettool-page .chc-assurances {
    position: relative; z-index: 2;
    display: flex; flex-wrap: wrap; gap: 6px 22px;
    margin: 20px 0 0; padding: 16px 0 0; list-style: none;
    border-top: 1px solid rgba(3, 105, 161, .13);
}
/* baseline, not centre: when a line wraps on a phone the marker should stay level
   with the first line rather than drifting into the gap between the two. */
.nettool-page .chc-assurances li {
    display: flex; align-items: baseline; gap: 8px;
    color: var(--net-muted); font-size: .84rem; line-height: 1.5;
}
.nettool-page .chc-assurances span { color: var(--net-accent); font-size: .6rem }

/* ------------------------------------------------------- hero illustration */
.nettool-page .chc-hero-visual { min-width: 0 }

.nettool-page .chc-visual-card {
    padding: 20px; border: 1px solid #d6e6f0; border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 18px 40px -26px rgba(3, 105, 161, .5);
    backdrop-filter: blur(3px);
}
.nettool-page .chc-visual-title {
    display: block; margin-bottom: 15px;
    font-size: .7rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase;
    color: var(--net-muted);
}
.nettool-page .chc-visual-body { position: relative; padding-left: 22px }

.nettool-page .chc-visual-sources { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px }
.nettool-page .chc-visual-sources li {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 11px; border: 1px solid var(--net-border); border-radius: 9px;
    background: #fff;
}
.nettool-page .chc-visual-sources code { font-size: .73rem; color: #56646f; overflow-wrap: anywhere }
.nettool-page .chc-visual-sources b {
    flex: 0 0 auto;
    padding: 2px 7px; border-radius: 999px;
    background: var(--info-soft); color: var(--info);
    font-size: .65rem; font-weight: 900;
}

/* The bracket that gathers the three sources into the one target below. Drawn
   with borders rather than an SVG so it inherits the rule colour. */
.nettool-page .chc-visual-join {
    position: absolute; left: 0; top: 14px; bottom: 26px; width: 14px;
    border-left: 2px solid #bcd7e6;
    border-top: 2px solid #bcd7e6;
    border-bottom: 2px solid #bcd7e6;
    border-radius: 8px 0 0 8px;
}
.nettool-page .chc-visual-join::after {
    content: ""; position: absolute; left: 12px; bottom: -2px;
    width: 12px; height: 2px; background: #bcd7e6;
}

.nettool-page .chc-visual-target {
    display: grid; gap: 5px; margin-top: 14px;
    padding: 12px 13px; border: 1px solid var(--success); border-radius: 11px;
    background: var(--success-soft);
}
.nettool-page .chc-visual-target code {
    font-size: .82rem; font-weight: 800; color: #0d3b23; overflow-wrap: anywhere;
}
.nettool-page .chc-visual-flag {
    font-size: .65rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    color: var(--success);
}
.nettool-page .chc-visual-note {
    margin: 14px 0 0; color: var(--net-muted); font-size: .78rem; line-height: 1.5;
}

/* Stacked, the illustration follows the input rather than leading. It explains
   the result; putting it above the heading would push the actual tool below the
   fold to make room for a picture of what the tool is about. */
@media (max-width: 1020px) {
    .nettool-page .chc-hero-grid { grid-template-columns: 1fr; gap: 24px }
    .nettool-page .chc-visual-card { max-width: 520px }
}
@media (max-width: 620px) {
    .nettool-page .chc-hero { padding: 24px 20px }
    .nettool-page .chc-assurances { gap: 8px; flex-direction: column }
}

/* ======================================================== panel chrome === */
/* Title left, what-you-are-looking-at right, hairline under. Applied to every
   result panel so four different panels read as one instrument. */

.nettool-page .chc-panel { padding: 0; overflow: hidden }

.nettool-page .chc-panel-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 4px 20px; padding: 16px 20px;
    border-bottom: 1px solid var(--net-border);
}
.nettool-page .chc-panel-head h2 {
    margin: 0; font-size: 1.08rem; font-weight: 800;
    letter-spacing: -.015em; color: var(--net-text);
}
.nettool-page .chc-panel-head p { margin: 0; color: var(--net-muted); font-size: .84rem }

.nettool-page .chc-panel-body { padding: 18px 20px 20px }
.nettool-page .chc-panel > .finding-list { padding: 18px 20px 20px }

/* =============================================================== verdict == */

.nettool-page .verdict-panel { padding: 20px }

.nettool-page .chc-result-head {
    display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
    gap: 8px 16px; margin: -4px 0 18px; padding-bottom: 14px;
    border-bottom: 1px solid var(--net-border);
}
.nettool-page .chc-result-domain { display: flex; align-items: baseline; gap: 10px; min-width: 0 }
.nettool-page .chc-result-domain .chc-eyebrow { margin: 0 }
.nettool-page .chc-result-domain code {
    font-size: .98rem; font-weight: 800; color: var(--net-text); overflow-wrap: anywhere;
}
.nettool-page .chc-result-time { color: var(--net-muted); font-size: .76rem }

.nettool-page .verdict-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px; align-items: center }

/* conic-gradient driven from --score, so the ring is one element rather than an
   SVG that would need redrawing on theme change. */
.nettool-page .verdict-score {
    --score: 0;
    --ring: var(--success);
    width: 92px; height: 92px; display: grid; place-items: center; border-radius: 50%;
    background: radial-gradient(circle at center, var(--net-surface, #fff) 63%, transparent 64%),
                conic-gradient(var(--ring) calc(var(--score) * 1%), #e4eef5 0);
    box-shadow: inset 0 0 0 1px #d7e6ef;
}
.nettool-page .verdict-num { font-size: 1.65rem; font-weight: 900; letter-spacing: -.02em }
.nettool-page .verdict-meter { height: 8px; border-radius: 999px; background: #e9f1f6; overflow: hidden; margin-top: 12px }
.nettool-page .verdict-meter > i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--success); transition: width .5s ease }

/* Confidence caveat. Sits between the score and the numbers it qualifies, because
   a caveat placed after the conclusion is one nobody applies. */
.nettool-page .chc-caveat {
    display: flex; gap: 11px; align-items: flex-start;
    margin-top: 16px; padding: 12px 14px;
    border-left: 3px solid var(--info); border-radius: 0 10px 10px 0;
    background: var(--info-soft); color: #1c3c6e;
    font-size: .85rem; line-height: 1.55;
}
.nettool-page .chc-caveat strong { color: #16305a }
.nettool-page .chc-caveat code {
    padding: 1px 5px; border-radius: 5px; background: rgba(37, 99, 235, .1);
    font-size: .92em;
}
/* display:flex above outranks the user-agent [hidden] rule, so the empty box
   would otherwise render as a stray coloured strip on every clean result. */
.nettool-page .chc-caveat[hidden] { display: none }

@media (max-width: 620px) {
    .nettool-page .verdict-row { grid-template-columns: 1fr; justify-items: start }
}

/* ========================================================== redirect map == */
/* A drawn diagram, because the finding is a shape: four lanes either converge on
   one address or they do not, and that is visible before a single status code
   has been read. The engineering-paper dot grid is the one thing taken wholesale
   from the design sample - it reads as a schematic rather than a dashboard. */

.nettool-page .chc-mapwrap {
    padding: 20px;
    background-color: #fcfdfe;
    background-image: radial-gradient(circle, #dde6ee 1.1px, transparent 1.1px);
    background-size: 19px 19px;
    overflow-x: auto;
}

/* Below the min-width the diagram would compress into illegibility, so the
   container scrolls instead. The variant cards underneath carry the same facts
   in a form that reflows, which is what a phone actually reads. */
.nettool-page .chc-svg { display: block; width: 100%; height: auto; min-width: 780px }

.nettool-page .chc-svg text { font-family: Inter, ui-sans-serif, system-ui, sans-serif }
.nettool-page .chc-svg-host {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-weight: 600; fill: #1a2330;
}
.nettool-page .chc-svg-sub { font-size: 12px; font-weight: 500 }
.nettool-page .chc-svg-kicker {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.nettool-page .chc-svg-dest {
    font-family: "SFMono-Regular", Consolas, monospace; font-weight: 700;
}
.nettool-page .chc-svg-note { font-size: 11.5px; fill: #8b95a6 }
.nettool-page .chc-svg-badge {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12.5px; font-weight: 700;
}

/* A short segment travelling the length of each lane. pathLength="100" normalises
   every curve to the same dash space, so four lanes of different lengths animate
   at the same apparent speed instead of the outer ones lagging. */
.nettool-page .chc-lane-flow {
    stroke-dasharray: 9 91;
    stroke-dashoffset: 100;
    opacity: .55;
    animation: chc-flow 3.1s linear infinite;
}
@keyframes chc-flow { from { stroke-dashoffset: 100 } to { stroke-dashoffset: 0 } }

@media (prefers-reduced-motion: reduce) {
    .nettool-page .chc-lane-flow { animation: none; opacity: 0 }
}

/* ======================================================== variant status == */

/* align-items:start, not the grid default: without it, expanding one card
   stretches every card in its row to match and leaves three of them holding a
   column of empty white. */
.nettool-page .chc-vgrid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 14px; padding: 18px 20px 20px;
}

.nettool-page .chc-vcard {
    border: 1px solid var(--net-border);
    border-left: 4px solid var(--vt, #cbd5e1);
    border-radius: 12px;
    background: #f9fafb;
    transition: background .18s, box-shadow .18s, transform .18s, border-color .18s;
}
.nettool-page .chc-vcard:hover {
    background: #fff; border-color: var(--vt-line);
    box-shadow: 0 10px 26px -14px rgba(16, 24, 40, .3);
    transform: translateY(-1px);
}
.nettool-page .chc-vcard.is-open { background: #fff; border-color: var(--vt-line) }

/* The whole head is the button. A card that expands but only responds on a small
   chevron is a card people give up on. */
.nettool-page .chc-vhead {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px; width: 100%; padding: 15px 16px 16px;
    border: 0; background: none; text-align: left; cursor: pointer;
}
.nettool-page .chc-vhead > * { grid-column: 1 / -1; min-width: 0 }
.nettool-page .chc-vhead:focus-visible {
    outline: 2px solid var(--net-primary); outline-offset: -3px; border-radius: 9px;
}

.nettool-page .chc-vtag {
    grid-column: 1; grid-row: 1; align-self: center;
    font-size: .65rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase;
    color: var(--net-muted);
}

/* Always visible rather than hover-only: the affordance has to be there before
   the pointer is. Hover then confirms it by filling in with the lane's tone. */
.nettool-page .chc-vtoggle {
    grid-column: 2; grid-row: 1; justify-self: end;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 8px 4px 10px; border: 1px solid var(--net-border); border-radius: 999px;
    background: #fff; color: var(--net-muted);
    font-size: .63rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    transition: color .18s, background .18s, border-color .18s;
}
.nettool-page .chc-vtoggle em { font-style: normal }
.nettool-page .chc-vtoggle svg { width: 13px; height: 13px; transition: transform .22s ease }
.nettool-page .chc-vcard:hover .chc-vtoggle,
.nettool-page .chc-vhead:focus-visible .chc-vtoggle {
    color: var(--vt-ink); background: var(--vt-soft); border-color: var(--vt-line);
}
.nettool-page .chc-vcard.is-open .chc-vtoggle {
    color: var(--vt-ink); background: var(--vt-soft); border-color: var(--vt-line);
}
.nettool-page .chc-vcard.is-open .chc-vtoggle svg { transform: rotate(180deg) }

.nettool-page .chc-vhost {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .92rem; font-weight: 700; color: var(--net-text);
    overflow-wrap: anywhere; line-height: 1.35;
}

.nettool-page .chc-vpill {
    justify-self: start;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 5px 11px; border-radius: 999px;
    background: var(--vt-soft); color: var(--vt-ink);
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.nettool-page .chc-vpill i { width: 6px; height: 6px; border-radius: 50%; background: var(--vt) }

.nettool-page .chc-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.nettool-page .chc-code {
    padding: 3px 9px; border: 1px solid; border-radius: 7px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .78rem; font-weight: 700; white-space: nowrap;
}
/* Coloured by HTTP status, on the ordinary convention, and mirrored in STATUS_COLOURS
   in the JS for the SVG map. 2xx green and 4xx/5xx red are the obvious pair; the 3xx
   split is the one this tool adds. A 301/308 is the permanent redirect three of four
   addresses are supposed to answer with, so it is blue - information, not a fault -
   while a temporary 302/303/307 standing where a permanent one belongs earns amber. */
.nettool-page .chc-code.ok    { color: #0f7a4d; border-color: #b3ddc7; background: #f3fbf7 }
.nettool-page .chc-code.perm  { color: #22459b; border-color: #c2d2f2; background: #f4f7fe }
.nettool-page .chc-code.temp  { color: #7d5210; border-color: #e8d0a4; background: #fdf8f0 }
.nettool-page .chc-code.bad   { color: #96271c; border-color: #f0c3bd; background: #fdf4f3 }
.nettool-page .chc-code.dead  { color: #63748a; border-color: #d8dfe6; background: #f6f8fa }
.nettool-page .chc-arrow { color: #b6c1cc; font-size: .85rem; font-weight: 700 }

.nettool-page .chc-vnote { color: #5b6b7c; font-size: .84rem; line-height: 1.55 }

/* ---------------------------------------------------------- expanded detail */
.nettool-page .chc-vdetail {
    padding: 15px 16px 17px;
    border-top: 1px dashed var(--net-border);
    background: #fff;
}
.nettool-page .chc-vfacts {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 16px; margin: 0 0 15px;
}
.nettool-page .chc-vfacts > div { display: grid; gap: 2px; min-width: 0 }
/* A full URL will not fit a half-width column at any sensible size, and breaking
   a hostname mid-word to make it fit is worse than giving it the whole row. */
.nettool-page .chc-vfacts > div.is-wide { grid-column: 1 / -1 }
.nettool-page .chc-vfacts dt {
    font-size: .61rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    color: var(--net-muted);
}
.nettool-page .chc-vfacts dd {
    margin: 0;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .79rem; font-weight: 600; color: var(--net-text); overflow-wrap: anywhere;
}

.nettool-page .chc-vsubhead {
    margin: 0 0 9px;
    font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
    color: var(--net-muted);
}
.nettool-page .chc-hoplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px }
.nettool-page .chc-hoprow {
    display: grid; grid-template-columns: 18px auto minmax(0, 1fr);
    gap: 9px; align-items: baseline;
}
.nettool-page .chc-hoprow > * { min-width: 0 }
.nettool-page .chc-hopnum { color: #a8b6c2; font-size: .69rem; font-weight: 900 }
.nettool-page .chc-hopurl code { font-size: .76rem; color: #475467; overflow-wrap: anywhere }
.nettool-page .chc-hopnext {
    display: block; margin-top: 3px; color: var(--net-muted);
    font-size: .73rem; overflow-wrap: anywhere;
}
.nettool-page .chc-hoprow.is-empty {
    grid-template-columns: 1fr; color: var(--net-muted); font-size: .8rem;
}

@media (max-width: 1180px) {
    .nettool-page .chc-vgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 700px) {
    .nettool-page .chc-vgrid { grid-template-columns: 1fr; padding: 14px }
    .nettool-page .chc-vfacts { grid-template-columns: 1fr }
    .nettool-page .chc-mapwrap { padding: 12px }
}

/* ================================================================== code == */

/* No tint, no left bar, no icon. Every other coloured block on this page means
   something - green is right, amber is worth fixing - and this paragraph's entire
   message is that neither choice above is better than the other. Giving it a colour
   would contradict the words inside it. A hairline and a mono label are enough to
   separate it from the controls without implying a verdict. */
.nettool-page .chc-prefer-note {
    margin: -4px 0 18px; padding: 14px 0 0;
    border-top: 1px solid var(--net-border);
    color: #4f5f70; font-size: .85rem; line-height: 1.68;
    max-width: 88ch;
}
.nettool-page .chc-prefer-note strong { color: var(--net-text); font-weight: 700 }
.nettool-page .chc-prefer-note code {
    padding: 1px 5px; border-radius: 5px;
    background: #eef3f7; color: var(--net-primary-dark);
    font-size: .88em;
}
.nettool-page .chc-prefer-note-label {
    display: inline-block; margin-right: 9px;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: .64rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
    color: var(--net-muted);
}

.nettool-page .code-head { display: flex; align-items: center; gap: 12px; margin: 14px 0 8px }
.nettool-page .code-head .cell-note { flex: 1 1 auto }