/* MAC address lookup. Extends styles.css and tools/subnet/tool.css — the
   brand tokens, the .calc card, .result rows and .examples chips all come from
   there, and this file only adds what is specific to reading an address. */

/* ── the verdict ─────────────────────────────────────────────────────────── */

.mac-verdict {
    margin-top: 1.4rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border-solid, #182234);
    border-left-width: 3px;
    border-radius: var(--radius, 14px);
    background: var(--bg-card, #0b1220);
}

.mac-verdict-global { border-left-color: var(--ok, #2fd08a); }
.mac-verdict-local { border-left-color: var(--pending, #f0a83c); }
.mac-verdict-group { border-left-color: var(--brand-bright, #3d92ff); }

.mac-verdict .who {
    margin: 0;
    font-size: clamp(1.25rem, 3.4vw, 1.7rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    /* Some registry names are one unbroken 40-character string. */
    overflow-wrap: anywhere;
}

.mac-verdict .what {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text-dim, #8e9bb0);
    font-family: var(--mono, monospace);
    overflow-wrap: anywhere;
}

/* ── the first octet, bit by bit ─────────────────────────────────────────── */

.mac-bits {
    margin-top: 1.4rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--border-solid, #182234);
    border-radius: var(--radius, 14px);
    background: var(--bg-raised, #080d16);
}

.mac-bits h3 {
    margin: 0 0 0.8rem;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim, #8e9bb0);
}

.bit-row {
    display: flex;
    gap: 0.3rem;
    /* Eight boxes plus two labels are wider than a phone; let them scroll
       inside the card rather than widen the document. */
    overflow-x: auto;
    padding-bottom: 0.3rem;
}

.bit {
    flex: none;
    width: 2.1rem;
    text-align: center;
    font-family: var(--mono, monospace);
    border: 1px solid var(--border-solid, #182234);
    border-radius: 8px;
    padding: 0.45rem 0;
    font-size: 1rem;
    color: var(--text-faint, #5b6779);
    background: #02050b;
}

.bit.lit { color: var(--text, #e8edf5); }

.bit.flag-local { border-color: var(--pending, #f0a83c); color: var(--pending, #f0a83c); }
.bit.flag-cast { border-color: var(--brand-bright, #3d92ff); color: var(--brand-bright, #3d92ff); }
.bit.flag-local.off { border-color: var(--ok, #2fd08a); color: var(--ok, #2fd08a); }
.bit.flag-cast.off { border-color: var(--ok, #2fd08a); color: var(--ok, #2fd08a); }

.bit-legend {
    display: grid;
    gap: 0.45rem;
    margin: 0.9rem 0 0;
    font-size: 0.88rem;
    color: var(--text-dim, #8e9bb0);
}

.bit-legend div {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
}

.bit-legend b {
    flex: none;
    width: 3.4rem;
    font-weight: 600;
    font-family: var(--mono, monospace);
    font-size: 0.8rem;
    color: var(--text-faint, #5b6779);
}

.bit-legend .on { color: var(--pending, #f0a83c); }
.bit-legend .off { color: var(--ok, #2fd08a); }

/* ── findings ────────────────────────────────────────────────────────────── */

.mac-note {
    padding: 0.75rem 0.95rem;
    border: 1px solid var(--border-solid, #182234);
    border-left-width: 3px;
    border-radius: var(--radius);
    background: var(--bg-card, #0b1220);
    margin-bottom: 0.55rem;
}

.mac-note h3 {
    margin: 0 0 0.3rem;
    font-size: 0.97rem;
    overflow-wrap: anywhere;
}

.mac-note p {
    margin: 0 0 0.55rem;
    color: var(--text-dim, #8e9bb0);
    font-size: 0.9rem;
    line-height: 1.55;
}

.mac-note p:last-child { margin-bottom: 0; }

.mac-note-pass { border-left-color: var(--ok, #2fd08a); }
.mac-note-warning { border-left-color: var(--pending, #f0a83c); }
.mac-note-problem { border-left-color: #e2574c; }
.mac-note-info { border-left-color: var(--brand-bright, #3d92ff); }

/* styles.css gives every <section> several rem of padding-block for the home
   page's bands. Inside a tool result that reads as the page having broken. */
.mac-section {
    padding-block: 0;
    margin-top: 1.6rem;
}

/* The values here are long — a 17-character EUI-64, a registry name — so the
   columns need more room than the subnet calculator's, or every label wraps
   onto its own line. */
.mac-section .result-grid {
    grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
}

.mac-section > h2 {
    font-size: 0.8rem;
    margin: 0 0 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-dim, #8e9bb0);
}

/* Long values (the registry name, the EUI-64) must wrap inside the card. */
#results { min-width: 0; }
.tool > #results { max-width: 100%; }
.result dd .copy { overflow-wrap: anywhere; }

.mac-source {
    margin: 1.2rem 0 0;
    font-size: 0.82rem;
    color: var(--text-faint, #5b6779);
}