/* HTTP status checker — chain of hops, and a verdict on whose problem it is. */

.blame {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding: 16px 18px; border-radius: var(--radius); margin-bottom: 18px;
    border: 1px solid var(--border); background: var(--bg-raise);
}
.blame .code {
    font-family: var(--mono); font-size: 2.1rem; font-weight: 700;
    line-height: 1; letter-spacing: -0.02em;
}
.blame .who {
    font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase;
    padding: 4px 10px; border-radius: 999px; font-weight: 600; white-space: nowrap;
}
.blame .headline { font-weight: 600; min-width: 0; }

/* Who is at fault, coloured so the answer is readable before the words are. */
.blame-nobody  { border-color: #1f7a4d; }
.blame-nobody  .who { background: #0f3d2a; color: #6ee7a8; }
.blame-nobody  .code { color: #6ee7a8; }
.blame-them    { border-color: #8a4b1c; }
.blame-them    .who { background: #3d2510; color: #f0a868; }
.blame-them    .code { color: #f0a868; }
.blame-you     { border-color: #2a5c8a; }
.blame-you     .who { background: #10273d; color: #7ab8f0; }
.blame-you     .code { color: #7ab8f0; }
.blame-either  { border-color: #5c5c6a; }
.blame-either  .who { background: #26262e; color: #b9b9c6; }
.blame-either  .code { color: #b9b9c6; }
.blame-network { border-color: #8a1c3d; }
.blame-network .who { background: #3d1024; color: #f07a9e; }
.blame-network .code { color: #f07a9e; }

.verdict-body p { margin: 0 0 10px; max-width: 68ch; }
.verdict-body p:last-child { margin-bottom: 0; }
.verdict-body .next { color: var(--text-dim); }
.verdict-body .next strong { color: var(--text); }

/* The line the tool exists to say. */
.network-note {
    margin: 0 0 20px; padding: 12px 14px; border-radius: var(--radius);
    border-left: 3px solid var(--brand-bright); background: var(--bg-raise);
    color: var(--text-dim); max-width: 72ch;
}

/* Redirect chain. */
.hops { display: grid; gap: 8px; margin: 0 0 20px; }
.hop {
    display: grid; grid-template-columns: auto auto 1fr auto; gap: 12px;
    align-items: baseline; padding: 10px 12px; border-radius: var(--radius);
    border: 1px solid var(--border); background: var(--bg-raise); min-width: 0;
}
.hop .n { color: var(--text-faint); font-family: var(--mono); font-size: 0.85rem; }
.hop .st { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.hop .url {
    font-family: var(--mono); font-size: 0.85rem; min-width: 0;
    overflow-wrap: anywhere; word-break: break-all;
}
.hop .ms { color: var(--text-faint); font-family: var(--mono); font-size: 0.8rem; white-space: nowrap; }
.hop.bad { border-color: #8a1c1c; }
.hop.bad .st { color: #f07a7a; }

.st-2 { color: #6ee7a8; }
.st-3 { color: #d8c46a; }
.st-4 { color: #7ab8f0; }
.st-5 { color: #f0a868; }

/* Headers worth reading. */
.headers { margin-bottom: 18px; }
.headers summary { cursor: pointer; color: var(--text-dim); }
.headers table { width: 100%; border-collapse: collapse; margin-top: 10px; }
.headers td {
    padding: 5px 10px 5px 0; vertical-align: top; border-top: 1px solid var(--border);
    font-family: var(--mono); font-size: 0.82rem;
}
.headers td:first-child { color: var(--text-dim); white-space: nowrap; }
.headers td:last-child { overflow-wrap: anywhere; word-break: break-all; min-width: 0; }
.headers tr.notable td:first-child { color: var(--brand-bright); }

/* A header whose value changes the diagnosis gets a line of explanation. */
.header-why {
    margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
    background: var(--bg-raise); color: var(--text-dim); font-size: 0.9rem;
    max-width: 68ch;
}

@media (max-width: 560px) {
    .hop { grid-template-columns: auto auto 1fr; }
    .hop .ms { grid-column: 3; justify-self: end; }
    .blame .code { font-size: 1.7rem; }
}