/* middle.network additions on top of the Cartzilla theme. Kept small: colours and spacing come from the theme. */

/* Plain English / Technical: one switch for the whole site. */
html[data-mn-style="tech"] .mn-plain { display: none !important; }
html:not([data-mn-style="tech"]) .mn-tech { display: none !important; }

.min-w-0 { min-width: 0; }
.mn-card { border-radius: var(--cz-border-radius-xl, 1rem); }
.mn-bar { height: .5rem; flex: 1 1 auto; }
.mn-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.mn-ring-center { font-size: 1.5rem; }
.mn-ring svg circle { transition: stroke-dasharray .6s ease; }

/* Verdict banner */
.mn-verdict-icon { width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }

/* Hop timelines (traceroute, MTR, email journey) */
.mn-hops { position: relative; }
.mn-hop { display: flex; align-items: center; gap: .875rem; padding: .5rem 0; position: relative; }
.mn-hop:not(:last-child)::before { content: ""; position: absolute; left: .9375rem; top: 2.25rem; bottom: -.5rem; width: 2px; background: var(--cz-border-color); }
.mn-hop-n { flex: 0 0 2rem; width: 2rem; height: 2rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; background: var(--cz-secondary-bg); position: relative; z-index: 1; }
.mn-hop-target .mn-hop-n { background: var(--cz-success); color: #fff; }
.mn-hop-hidden .mn-hop-n { background: transparent; border: 2px dashed var(--cz-border-color); }

/* MX priority bubble */
.mn-prio { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }

/* Lifeline (registration → expiry) */
.mn-now { position: absolute; top: -.25rem; width: 2px; height: 1rem; background: var(--cz-emphasis-color); transform: translateX(-1px); }

/* Code, JSON: theme-aware (the theme's own <pre> is white text for dark boxes). */
.mn-code pre, .mn-json { white-space: pre-wrap; word-break: break-word; background: transparent; color: var(--cz-emphasis-color); padding: 0; border-radius: 0; }
.mn-json { max-height: 420px; overflow: auto; background: var(--cz-tertiary-bg); border: 1px solid var(--cz-border-color); border-radius: .75rem; padding: .875rem 1rem; }
.mn-code pre code, .mn-json code { color: inherit; }

/* SERP preview */
.mn-serp-title { font-size: 1.125rem; }
.mn-clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mn-og { max-height: 180px; object-fit: cover; }

/* Health check cards */
.mn-hc-card { transition: border-color .2s, transform .2s; }
.mn-hc-card:hover { border-color: var(--cz-primary) !important; transform: translateY(-2px); }

/* Header search results */
/* Results live inside the same panel as the input, so they line up with it on both edges and never need a scrollbar
   (at most 8 short rows). The panel hangs from the right edge of the search button. */
.mn-search-panel { width: min(26rem, calc(100vw - 1.5rem)); }
.mn-search-results { display: none; margin-top: .5rem; }
.mn-search-results.show { display: block; }
.mn-search-results .dropdown-item { border-radius: .75rem; white-space: normal; }
.mn-brand-word { font-size: 1.375rem; line-height: 1; }
@media (max-width: 575.98px) { .mn-brand-word { font-size: 1.125rem; } }

/* Glass (iOS style): translucent, blurred, with a hairline edge. Needs something colourful behind it, hence the blobs. */
.mn-glass { background: rgba(255, 255, 255, .58) !important; -webkit-backdrop-filter: blur(20px) saturate(170%); backdrop-filter: blur(20px) saturate(170%); border: 1px solid rgba(255, 255, 255, .75); box-shadow: 0 10px 40px -12px rgba(24, 29, 37, .18), inset 0 1px 0 rgba(255, 255, 255, .6); }
[data-bs-theme="dark"] .mn-glass { background: rgba(28, 33, 42, .55) !important; border-color: rgba(255, 255, 255, .1); box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .06); }
.rounded-6 { border-radius: 2rem !important; }
.mn-blob { position: absolute; width: 34rem; height: 34rem; border-radius: 50%; background: var(--mn-c); filter: blur(90px); opacity: .22; pointer-events: none; animation: mn-drift 22s ease-in-out infinite alternate; }
[data-bs-theme="dark"] .mn-blob { opacity: .16; }
.mn-blob-1 { top: -8rem; left: -8rem; }
.mn-blob-2 { top: 4rem; right: -10rem; animation-delay: -6s; }
.mn-blob-3 { bottom: -14rem; left: 30%; animation-delay: -12s; }
.mn-blob-4 { top: 30%; left: 12%; width: 18rem; height: 18rem; animation-delay: -3s; }
@keyframes mn-drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3rem, 2rem) scale(1.12); } 100% { transform: translate(-2rem, 3rem) scale(.95); } }

/* Header pill: the glass sits on its own layer. backdrop-filter on the navbar itself would trap the
   fixed-position mobile menu (offcanvas) inside the pill, which is why the mobile menu didn't open. */
header .navbar { position: relative; isolation: isolate; }
.mn-glass-layer { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* Hero: two columns, headline on one side, a real turning Earth on the other. */
.mn-hero { background: var(--cz-tertiary-bg); }
@media (min-width: 992px) { .mn-hero-row { min-height: 520px; } }
.mn-hero-title { letter-spacing: -.035em; line-height: 1.02; }
.mn-hero-input { min-height: 3.75rem; padding-right: 13rem; }
@media (max-width: 575.98px) { .mn-hero-input { padding-right: 1rem; } .mn-hero-btn { position: static !important; width: 100%; margin: .5rem 0 0 !important; } }
@media (prefers-reduced-motion: reduce) { .mn-blob { animation: none; } }

/* Globe. The same land dots as every flat map, on a plain sphere: probe regions are the only colour. A static SVG
   (built by build-site.mjs) paints at once and is the whole show on phones, reduced motion or no WebGL. On big
   screens a turning WebGL copy fades in over it, starting from the same view. */
.mn-globe { position: relative; width: min(100%, 420px); aspect-ratio: 1; --mn-globe-land: color-mix(in srgb, var(--cz-body-color) 42%, transparent); }
.mn-globe-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: opacity .8s; }
.mn-globe-ball { fill: var(--cz-body-bg); stroke: var(--cz-border-color); stroke-width: .25; filter: drop-shadow(0 1.5px 4px rgba(24, 29, 37, .1)); }
.mn-globe-land { color: var(--mn-globe-land); }
.mn-globe-pin { fill: var(--cz-primary); stroke: var(--cz-body-bg); stroke-width: .35; }
[data-bs-theme="dark"] .mn-globe-ball { fill: color-mix(in srgb, var(--cz-body-bg) 70%, #000); filter: none; }
.mn-globe-gl { position: absolute; inset: 0; opacity: 0; transition: opacity .8s; }
.mn-globe-gl canvas { display: block; }
.mn-globe-ready .mn-globe-gl { opacity: 1; }
.mn-globe-ready .mn-globe-svg { opacity: 0; }
@media (max-width: 991.98px) { .mn-globe { width: min(56vw, 240px); } }
@media (max-width: 575.98px) { .mn-hero .container.py-5 { padding-top: 1.25rem !important; } }
.mn-globe-2d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .6s; }
.mn-globe-spin .mn-globe-2d { opacity: 1; }
.mn-globe-spin .mn-globe-svg { opacity: 0; }

/* Wordmark: middle | .network */
.mn-word { letter-spacing: -.02em; }
.mn-word-a { font-weight: 800; }
.mn-word-b { font-weight: 400; color: var(--cz-secondary-color); }
.footer .mn-word-b { color: rgba(255, 255, 255, .55); }

/* Score simulator */
.mn-sim-wrap { background: var(--cz-tertiary-bg); }
.mn-sim-ring .mn-sim-arc { transition: stroke-dasharray .7s cubic-bezier(.2, .8, .2, 1), stroke .4s; }
.mn-sim-bar { transition: width .6s ease, background-color .4s; }
.mn-sim-item { cursor: pointer; background: rgba(255, 255, 255, .45); border: 1px solid transparent; transition: background-color .2s, border-color .2s, opacity .3s; }
[data-bs-theme="dark"] .mn-sim-item { background: rgba(255, 255, 255, .04); }
.mn-sim-item:hover { border-color: var(--cz-border-color); }
.mn-sim-item.mn-done { opacity: .6; }
.mn-sim-item.mn-done .fw-medium { text-decoration: line-through; text-decoration-color: var(--cz-success); }
.mn-sim-item .form-switch .form-check-input { width: 2.5rem; height: 1.4rem; cursor: pointer; }
.mn-sim-delta.mn-up { background: var(--cz-success-bg-subtle) !important; color: var(--cz-success-text-emphasis) !important; }

/* Category tiles on the home page: the circle lifts and the icon grows on hover. */
.mn-cat .mn-cat-circle i { transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.mn-cat .mn-cat-circle { transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, background-color .25s; }
.mn-cat:hover .mn-cat-circle { transform: translateY(-4px); box-shadow: 0 14px 30px -14px var(--mn-c); }
.mn-cat:hover .mn-cat-circle i { transform: scale(1.15); }
.mn-kpi { font-variant-numeric: tabular-nums; }
.mn-feature-icon { font-size: 2.75rem; line-height: 1; }

/* Category accents: .mn-c-<group> (generated in mn-cats.css) sets --mn-c. */
.mn-ico { --mn-c: var(--cz-secondary-color); width: 3rem; height: 3rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.3rem; color: var(--mn-c); background: color-mix(in srgb, var(--mn-c) 13%, transparent); }
.mn-ico-sm { width: 2rem; height: 2rem; font-size: .95rem; }
.mn-ico-lg { width: 3.75rem; height: 3.75rem; font-size: 1.65rem; }
.mn-dot[class*="mn-c-"] { background: var(--mn-c); }
.mn-cat-circle { max-width: 132px; color: var(--mn-c); background: color-mix(in srgb, var(--mn-c) 12%, var(--cz-body-bg)); font-size: 2.75rem; transition: background-color .25s; }
.mn-tool-card { transition: transform .2s, box-shadow .2s, background-color .2s; }
.mn-tool-card:hover { transform: translateY(-3px); background-color: var(--cz-body-bg) !important; box-shadow: var(--cz-box-shadow); }
.mn-tool-card.mn-soon { opacity: .7; }
.mn-cat-card { transition: transform .2s, box-shadow .2s; }
.mn-cat-card:hover { transform: translateY(-3px); box-shadow: var(--cz-box-shadow); }
.mn-icon-box { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.375rem; }
/* The mega menu hangs from the whole navbar pill, centred, never wider than the screen. */
@media (min-width: 992px) { .mn-mega { --mn-w: min(1080px, calc(100vw - 3rem)); width: var(--mn-w); left: 50% !important; margin-left: calc(var(--mn-w) / -2) !important; } }

/* Something is still running: an endless slide, so a long check never looks frozen. */
.mn-indeterminate { height: .375rem; overflow: hidden; background: var(--cz-secondary-bg); }
.mn-indeterminate .progress-bar { width: 35% !important; background: var(--cz-emphasis-color); border-radius: 1rem; animation: mn-slide 1.4s ease-in-out infinite; }
@keyframes mn-slide { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
.mn-pulse { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cz-info); margin-right: .5rem; animation: mn-pulse 1.2s ease-in-out infinite; vertical-align: middle; }
@keyframes mn-pulse { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .mn-indeterminate .progress-bar, .mn-pulse { animation-duration: 4s; } }

/* Map tiles follow dark mode */
/* Street map (Leaflet + OSM), used only when zoomed in on one place. Tiles go greyscale so the map sits in the same
   quiet palette as the dot maps and only the pin carries colour. */
.mn-map .leaflet-tile { filter: grayscale(1) contrast(.92) brightness(1.03); }
html[data-bs-theme="dark"] .mn-map .leaflet-tile { filter: grayscale(1) invert(1) brightness(.8) contrast(.9); }
.mn-map { background: var(--cz-tertiary-bg); }

/* Sample result on the home page */
.mn-demo .mn-result .mn-raw { display: none; }

/* Badges and long text inside stat tiles stay inside the tile. */
.mn-stat .h4 .badge { font-size: .8125rem; white-space: normal; text-align: left; line-height: 1.3; }
.mn-stat .h4 .fs-6 { font-size: .9375rem !important; line-height: 1.35; display: inline-block; }
.mn-stat { min-width: 0; overflow-wrap: anywhere; }
.mn-visual .badge.font-monospace { font-size: .8125em; }
/* Header status pill: a green dot with a soft radar ring. Amber when the API is asleep. */
.mn-pulse { position: relative; display: inline-block; width: .5rem; height: .5rem; margin-right: .5rem; border-radius: 50%; background: var(--cz-success, #33b36b); }
.mn-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: mn-ping 2s cubic-bezier(0, 0, .2, 1) infinite; }
.mn-live-warn .mn-pulse { background: var(--cz-warning, #fc9231); }
@keyframes mn-ping { 0% { transform: scale(1); opacity: .7; } 80%, 100% { transform: scale(2.8); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mn-pulse::after { animation: none; } }

/* Sitemap inspector: collapsible tree of index → child sitemaps */
.mn-tree { padding-left: 0; }
.mn-tree .mn-tree { margin-left: .85rem; padding-left: .9rem; border-left: 2px solid var(--cz-border-color); }
.mn-tree-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; min-width: 0; padding: .35rem .25rem; border-radius: .5rem; }
.mn-tree-node > summary { list-style: none; cursor: pointer; position: relative; padding-left: 1.1rem; }
.mn-tree-node > summary::-webkit-details-marker { display: none; }
.mn-tree-node > summary::before { content: ""; position: absolute; left: .15rem; top: 50%; width: .45rem; height: .45rem; border-right: 2px solid var(--cz-secondary-color); border-bottom: 2px solid var(--cz-secondary-color); transform: translateY(-65%) rotate(-45deg); transition: transform .15s; }
.mn-tree-node[open] > summary::before { transform: translateY(-75%) rotate(45deg); }
.mn-tree-node > summary:hover .mn-tree-row, .mn-tree-leaf:hover > .mn-tree-row { background: var(--cz-tertiary-bg); }
.mn-tree-leaf { padding-left: 1.1rem; }
.mn-rules td:first-child { width: 2rem; }
@media (prefers-reduced-motion: reduce) { .mn-tree-node > summary::before { transition: none; } }

/* ---------------------------------------------------------------- calculators (mn-calc.js) */
.mn-live-dot { position: relative; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cz-success); display: inline-block; }
.mn-live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: mn-pulse 1.8s ease-out infinite; }
@keyframes mn-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(3.2); opacity: 0; } }
.mn-opts { display: flex; flex-wrap: wrap; gap: .875rem 1.5rem; align-items: flex-end; }
.mn-opt { display: flex; flex-direction: column; gap: .375rem; min-width: 0; }
.mn-opt-wide { flex-basis: 100%; }
/* mn-results.css gives .mn-opt-label a 9rem flex-basis for its row layout; in these column stacks that became 9rem of height. */
.mn-opt > .mn-opt-label { flex: none; padding-top: 0; align-self: auto; }
.mn-opt-label { font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--cz-secondary-color); }
.mn-calc-hint { border: 2px dashed var(--cz-border-color); }
.mn-fmt { min-height: 1.25rem; }
.mn-fmt kbd { font-size: .6875rem; padding: .1rem .35rem; }
.mn-kv th { width: 1%; }
.mn-kv-ico { opacity: .7; }
.mn-kv td, .mn-kv th { padding-top: .625rem; padding-bottom: .625rem; }
.mn-copy-icon { --cz-btn-padding-x: 0; width: 2rem; height: 2rem; }
.mn-ctile-ico { width: 1.75rem; height: 1.75rem; display: inline-flex; align-items: center; justify-content: center; font-size: .875rem; flex-shrink: 0; }
.mn-swatch { width: .75rem; height: .75rem; border-radius: .25rem; display: inline-block; }
/* bit cells: subnet, IP converter, MAC */
.mn-bits { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .375rem .25rem; }
.mn-oct { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.mn-oct-bits { display: flex; gap: 2px; }
.mn-oct-val { font-size: .75rem; color: var(--cz-secondary-color); }
.mn-oct-dot { font-weight: 700; color: var(--cz-secondary-color); align-self: flex-start; line-height: 1.75rem; }
.mn-bit { width: 1.25rem; height: 1.75rem; padding: 0; border: 0; border-radius: .375rem; display: inline-flex; align-items: center; justify-content: center; font: 600 .75rem/1 var(--cz-font-monospace); cursor: pointer; transition: background-color .25s ease, color .25s ease, transform .12s ease; }
.mn-bit:not(:disabled):hover { transform: translateY(-2px); }
.mn-bit:focus-visible { outline: 2px solid var(--cz-info); outline-offset: 2px; }
.mn-nib { width: 1.25rem; }
.mn-bit.is-net, .mn-swatch.is-net { background: var(--cz-info); color: #fff; }
.mn-bit.is-host, .mn-swatch.is-host { background: var(--cz-success-bg-subtle); color: var(--cz-success-text-emphasis); }
.mn-swatch.is-host { background: var(--cz-success); }
.mn-swatch.is-reserved { background: var(--cz-secondary-bg); border: 1px solid var(--cz-border-color); }
.mn-bit.is-split { background: linear-gradient(90deg, var(--cz-info) var(--split), var(--cz-success-bg-subtle) var(--split)); color: var(--cz-emphasis-color); }
.mn-bit.is-edge { box-shadow: 3px 0 0 -1px var(--cz-warning); }
.mn-bit.is-one, .mn-swatch.is-one { background: var(--cz-info); color: #fff; }
.mn-bit.is-zero, .mn-swatch.is-zero { background: var(--cz-secondary-bg); color: var(--cz-secondary-color); }
.mn-swatch.is-zero { border: 1px solid var(--cz-border-color); }
.mn-bit.is-dim { opacity: .45; cursor: default; }
.mn-bit.is-flag { box-shadow: 0 0 0 2px var(--cz-warning); }
.mn-mac-byte { height: 1.75rem; padding: 0 .375rem; display: inline-flex; align-items: center; border-radius: .375rem; background: var(--cz-secondary-bg); font-size: .8125rem; font-weight: 600; }
/* range bar (subnet position, JWT lifetime) and TTL meter */
.mn-range-track, .mn-ttl-track { position: relative; height: .75rem; border-radius: 1rem; background: var(--cz-secondary-bg); }
.mn-range-use { position: absolute; top: 0; bottom: 0; background: var(--cz-success); border-radius: 1rem; transition: left .3s ease, right .3s ease; }
.mn-range-pin { position: absolute; top: 50%; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: var(--cz-body-bg); border: 3px solid var(--cz-info); transform: translate(-50%, -50%); transition: left .3s ease; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.mn-ttl-track { overflow: visible; }
.mn-ttl-band { position: absolute; top: 0; bottom: 0; opacity: .55; }
.mn-ttl-band:first-child { border-radius: 1rem 0 0 1rem; }
.mn-ttl-band:last-of-type { border-radius: 0 1rem 1rem 0; }
/* Unix timeline */
.mn-tl { padding-top: 1.5rem; }
.mn-tl-track { position: relative; height: .5rem; border-radius: 1rem; background: var(--cz-secondary-bg); }
.mn-tl-past { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 1rem; background: var(--cz-info-bg-subtle); }
.mn-tl-limit { position: absolute; top: -.375rem; bottom: -.375rem; width: 2px; background: var(--cz-danger); }
.mn-tl-mark { position: absolute; top: 50%; width: .875rem; height: .875rem; border-radius: 50%; transform: translate(-50%, -50%); transition: left .3s ease; }
.mn-tl-mark span { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); font-size: .6875rem; font-weight: 600; white-space: nowrap; }
.mn-tl-mark.is-now { background: var(--cz-secondary-color); }
.mn-tl-mark.is-now span { top: 1rem; bottom: auto; color: var(--cz-secondary-color); }
.mn-tl-mark.is-date { background: var(--cz-info); box-shadow: 0 0 0 4px var(--cz-info-bg-subtle); }
.mn-tl-mark.is-date span { color: var(--cz-info); }
@media (prefers-reduced-motion: reduce) {
  .mn-live-dot::after { animation: none; }
  .mn-bit, .mn-range-use, .mn-range-pin, .mn-tl-mark { transition: none; }
}
/* Detail tables stack on phones: label above value, copy button on the right. */
@media (max-width: 575.98px) {
  .mn-kv tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; border-bottom: var(--cz-border-width, 1px) solid var(--cz-border-color); }
  .mn-kv th, .mn-kv td { border: 0; }
  .mn-kv th { width: auto; white-space: normal; padding-bottom: 0; }
  .mn-kv td:nth-child(2) { grid-column: 1; width: auto !important; }
  .mn-kv td:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
@media (max-width: 575.98px) { .mn-ctile .h5 { font-size: 1rem; } }

/* Health check: the four buckets (problems, needs a look, info, good) and who runs the domain */
.mn-hc-bucket { transition: transform .2s, box-shadow .2s; }
.mn-hc-bucket:hover { transform: translateY(-2px); box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .08); }
.mn-hc-bucket.is-empty { opacity: .55; }
.mn-hc-blist > summary { cursor: pointer; list-style: none; }
.mn-hc-blist > summary::-webkit-details-marker { display: none; }
.mn-hc-blist .mn-hc-chev { transition: transform .2s; }
.mn-hc-blist[open] .mn-hc-chev { transform: rotate(180deg); }
.mn-hc-blist li a:hover .fw-medium { text-decoration: underline; }
.mn-hc-bsec { min-width: 6.5rem; padding-top: .15rem; }
.mn-hc-flagbig .mn-flag2 { margin-right: 0; border-radius: 4px; }
.mn-hc-who .mn-logo { flex-shrink: 0; }
@media (max-width: 575.98px) { .mn-hc-bsec { min-width: 0; } .mn-hc-blist li a { flex-direction: column; gap: .25rem !important; } }

/* Brand colour. The theme's own primary is a pinkish red, which reads as "something is wrong" next to real
   problems; ours is an indigo, so red only ever means bad (blue = info, green = good, amber = warning). */
:root, [data-bs-theme=light] {
  --cz-primary: #4f5bd5; --cz-primary-rgb: 79, 91, 213; --cz-primary-text-emphasis: #3a44a8;
  --cz-primary-bg-subtle: #eceefc; --cz-primary-border-subtle: #d6daf7;
}
[data-bs-theme=dark] {
  --cz-primary: #7f89ea; --cz-primary-rgb: 127, 137, 234; --cz-primary-text-emphasis: #a5adf2;
  --cz-primary-bg-subtle: #1f2240; --cz-primary-border-subtle: #2d3160;
  /* Dark-mode links were the theme's pink; info blue like light mode. */
  --cz-link-color: #6f9cf0; --cz-link-hover-color: #8fb3f4; --cz-link-color-rgb: 111, 156, 240; --cz-link-hover-color-rgb: 143, 179, 244;
}
.btn-primary { --cz-btn-bg: var(--cz-primary); --cz-btn-border-color: var(--cz-primary); --cz-btn-hover-bg: #434dbb; --cz-btn-hover-border-color: #434dbb; --cz-btn-active-bg: #3a44a8; --cz-btn-active-border-color: #3a44a8; --cz-btn-disabled-bg: var(--cz-primary); --cz-btn-disabled-border-color: var(--cz-primary); --cz-btn-focus-shadow-rgb: 79, 91, 213; }
.btn-outline-primary { --cz-btn-color: var(--cz-primary); --cz-btn-border-color: var(--cz-primary); --cz-btn-hover-bg: var(--cz-primary); --cz-btn-hover-border-color: var(--cz-primary); --cz-btn-active-bg: var(--cz-primary); --cz-btn-active-border-color: var(--cz-primary); --cz-btn-focus-shadow-rgb: 79, 91, 213; }

/* Letter grades: A+ … F. The band sits a little smaller beside the letter. */
.mn-grade { display: inline-flex; align-items: flex-start; line-height: 1; }
.mn-grade-band { font-size: .55em; margin-left: .04em; margin-top: .05em; }

/* ---- Tool lists: category pages and All tools ---- */
.mn-ico-xl { width: 4.5rem; height: 4.5rem; font-size: 2rem; border-radius: 1.25rem; }
.mn-cat-hero { background: linear-gradient(180deg, color-mix(in srgb, var(--mn-c) 9%, var(--cz-body-bg)) 0%, var(--cz-body-bg) 100%); }
.mn-filter { background: var(--cz-tertiary-bg); position: sticky; top: 5.5rem; z-index: 5; }
.mn-chips { scrollbar-width: none; }
.mn-chips::-webkit-scrollbar { display: none; }
.mn-chip { display: inline-flex; align-items: center; gap: .1rem; white-space: nowrap; padding: .375rem .75rem; border-radius: 50rem; border: 1px solid var(--cz-border-color); background: var(--cz-body-bg); color: var(--cz-body-color); font-size: .8125rem; font-weight: 500; text-decoration: none; transition: border-color .15s, background-color .15s, color .15s; }
.mn-chip:hover { border-color: var(--cz-emphasis-color); color: var(--cz-emphasis-color); }
.mn-chip.active { background: var(--cz-emphasis-color); border-color: var(--cz-emphasis-color); color: var(--cz-body-bg); }
.mn-chip-n { margin-left: .4rem; font-size: .75rem; opacity: .6; font-variant-numeric: tabular-nums; }
.mn-tool-card { background: var(--cz-body-bg); position: relative; transition: transform .2s, box-shadow .2s, border-color .2s; }
.mn-tool-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--mn-c, var(--cz-border-color)) 45%, var(--cz-border-color)) !important; box-shadow: 0 12px 28px -18px rgba(24, 29, 37, .35); background-color: var(--cz-body-bg) !important; }
.mn-tool-go { opacity: 0; transform: translate(-4px, 4px); transition: opacity .2s, transform .2s; }
.mn-tool-card:hover .mn-tool-go { opacity: 1; transform: none; }
[data-tool-item][hidden], [data-group-section][hidden] { display: none !important; }

/* ---- Hero: recent searches (favicons only, no links) ---- */
.mn-recent { --gap: 1.75rem; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); overflow: hidden; }
.mn-recent-track { display: flex; gap: var(--gap); width: max-content; animation: mn-marquee var(--mn-dur, 60s) linear infinite; }
.mn-recent:hover .mn-recent-track { animation-play-state: paused; }
.mn-recent-item { display: inline-flex; align-items: center; gap: .5rem; font-size: .875rem; color: var(--cz-secondary-color); white-space: nowrap; user-select: none; }
.mn-recent-item img { width: 18px; height: 18px; border-radius: 4px; background: var(--cz-tertiary-bg); }
@keyframes mn-marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
@media (prefers-reduced-motion: reduce) { .mn-recent-track { animation-duration: calc(var(--mn-dur, 60s) * 2); } }

/* ---- Home: stats that link ---- */
a.mn-stat { color: inherit; text-decoration: none; }
a.mn-stat:hover .mn-stat-label { color: var(--cz-emphasis-color); text-decoration: underline; }


/* ---- Category colour with pop: gradient tiles, structured group headers, sub-groups ---- */
.mn-tile { --mn-c2: var(--mn-c); width: 3rem; height: 3rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 1rem; font-size: 1.35rem; color: #fff; background: linear-gradient(135deg, var(--mn-c) 0%, var(--mn-c2) 100%); box-shadow: 0 10px 24px -12px var(--mn-c), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mn-tile-lg { width: 3.75rem; height: 3.75rem; font-size: 1.7rem; border-radius: 1.15rem; }
.mn-tile-xl { width: 4.75rem; height: 4.75rem; font-size: 2.2rem; border-radius: 1.4rem; }
.mn-cat-hero { background: radial-gradient(60rem 18rem at 0% 0%, color-mix(in srgb, var(--mn-c) 18%, transparent), transparent 70%), radial-gradient(40rem 16rem at 100% 0%, color-mix(in srgb, var(--mn-c2, var(--mn-c)) 14%, transparent), transparent 70%), var(--cz-body-bg); }
.mn-cat-hero-all { --mn-c: #4f46e5; --mn-c2: #db2777; }
.mn-group-head { position: relative; overflow: hidden; background: linear-gradient(120deg, color-mix(in srgb, var(--mn-c) 12%, var(--cz-body-bg)) 0%, color-mix(in srgb, var(--mn-c2, var(--mn-c)) 6%, var(--cz-body-bg)) 100%); border: 1px solid color-mix(in srgb, var(--mn-c) 22%, transparent); scroll-margin-top: 7rem; }
.mn-group-head h2 a:hover { color: var(--mn-c) !important; }
.mn-group-stat { font-size: .8125rem; color: var(--cz-secondary-color); white-space: nowrap; }
.mn-group-stat .mn-kpi { color: var(--cz-emphasis-color); font-size: 1rem; }
.mn-group-btn { color: #fff; background: var(--mn-c); border: 0; }
.mn-group-btn:hover, .mn-group-btn:focus-visible { color: #fff; background: color-mix(in srgb, var(--mn-c) 85%, #000); }
.mn-sub-head h3 { letter-spacing: .06em; color: var(--mn-c); }
[data-bs-theme="dark"] .mn-sub-head h3 { color: color-mix(in srgb, var(--mn-c) 55%, #fff); }
.mn-sub-bar { width: 1.25rem; height: .25rem; border-radius: 1rem; background: linear-gradient(90deg, var(--mn-c), var(--mn-c2, var(--mn-c))); }
.mn-chip-i { color: var(--mn-c, inherit); margin-right: .35rem; font-size: .95em; }
.mn-chip-all .mn-chip-i { color: inherit; }
.mn-chip[class*="mn-c-"].active { background: linear-gradient(135deg, var(--mn-c), var(--mn-c2, var(--mn-c))); border-color: transparent; color: #fff; }
.mn-chip[class*="mn-c-"].active .mn-chip-i { color: #fff; }
.mn-chip[class*="mn-c-"]:not(.active):hover { border-color: var(--mn-c); color: var(--mn-c); }
/* Tool cards: a stronger tint on the icon and a coloured edge on hover. */
.mn-tool-card .mn-ico { background: color-mix(in srgb, var(--mn-c) 16%, transparent); border-radius: .75rem; }
.mn-tool-card:hover { border-color: var(--mn-c, var(--cz-border-color)) !important; box-shadow: 0 14px 30px -20px var(--mn-c, rgba(24, 29, 37, .35)); }
.mn-tool-card:hover .mn-tool-go { color: var(--mn-c) !important; }
/* Home: the category circles in full colour. */
.mn-cat-pop { --mn-c2: var(--mn-c); color: #fff; background: linear-gradient(135deg, var(--mn-c) 0%, var(--mn-c2) 100%); box-shadow: 0 16px 34px -18px var(--mn-c), inset 0 1px 0 rgba(255, 255, 255, .25); }
.mn-cat:hover .mn-cat-pop { box-shadow: 0 22px 40px -16px var(--mn-c); }

/* ---- Heroes that start at the very top of the page, behind the header pill (home, categories, all tools) ---- */
.mn-hero-under { margin-top: -110px; padding-top: 110px; }

/* ---- Header search: full width under the pill on phones ---- */
.mn-search-dd .dropdown-menu { top: 100%; right: 0; left: auto; margin-top: var(--cz-dropdown-spacer, 1rem); }
@media (max-width: 575.98px) {
  .mn-search-dd, .mn-nav-actions { position: static !important; }
  .mn-search-dd .mn-search-panel { left: .25rem !important; right: .25rem !important; width: auto; --cz-dropdown-min-width: 0 !important; min-width: 0 !important; }
}

/* ---- Tools menu filter ---- */
.mn-mega:not(.is-filtering) [data-mega-more] { display: none; }
.mn-mega.is-filtering .mn-mega-all, .mn-mega [data-mega-group][hidden], .mn-mega li[hidden] { display: none !important; }
.mn-mega mark { padding: 0; background: color-mix(in srgb, var(--cz-primary) 18%, transparent); color: inherit; border-radius: .2rem; }
@media (max-width: 991.98px) { .mn-mega { max-height: 70vh; overflow-y: auto; } }

/* ---- Group rail: one line of colour chips, scrolls sideways with arrows and faded edges ---- */
.mn-rail { position: relative; }
.mn-rail-track { display: flex; gap: .3rem; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; padding: .125rem; }
.mn-rail-track::-webkit-scrollbar { display: none; }
.mn-rail::before, .mn-rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: 3.5rem; pointer-events: none; z-index: 1; transition: opacity .2s; }
.mn-rail::before { left: 0; background: linear-gradient(90deg, var(--mn-rail-bg, var(--cz-tertiary-bg)) 35%, transparent); }
.mn-rail::after { right: 0; background: linear-gradient(270deg, var(--mn-rail-bg, var(--cz-tertiary-bg)) 35%, transparent); }
.mn-rail.is-start::before, .mn-rail.is-end::after { opacity: 0; }
.mn-rail-btn { position: absolute; top: 50%; z-index: 2; width: 2rem; height: 2rem; margin-top: -1rem; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 1px solid var(--cz-border-color); border-radius: 50%; background: var(--cz-body-bg); color: var(--cz-emphasis-color); box-shadow: 0 4px 12px -4px rgba(24, 29, 37, .25); transition: opacity .2s, transform .2s; }
.mn-rail-btn:hover { transform: scale(1.08); }
.mn-rail-prev { left: 0; }
.mn-rail-next { right: 0; }
.mn-rail.is-start .mn-rail-prev, .mn-rail.is-end .mn-rail-next { opacity: 0; pointer-events: none; }
.mn-rchip { --mn-c: var(--cz-emphasis-color); --mn-c2: var(--mn-c); flex: 0 0 auto; scroll-snap-align: start; display: inline-flex; align-items: center; gap: .35rem; height: 2.125rem; padding: 0 .6rem 0 .25rem; border: 1px solid var(--cz-border-color); border-radius: 50rem; background: var(--cz-body-bg); color: var(--cz-body-color); font-size: .8125rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: border-color .15s, background-color .15s, color .15s, box-shadow .15s; }
.mn-rchip-dot { width: 1.5rem; height: 1.5rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: .8rem; background: linear-gradient(135deg, var(--mn-c), var(--mn-c2)); }
.mn-rchip-all .mn-rchip-dot { background: var(--cz-secondary-bg); color: var(--cz-emphasis-color); }
.mn-rchip-n { font-size: .75rem; opacity: .55; font-variant-numeric: tabular-nums; }
.mn-rchip:hover { border-color: var(--mn-c); color: var(--cz-emphasis-color); }
.mn-rchip.active { background: linear-gradient(135deg, var(--mn-c), var(--mn-c2)); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -10px var(--mn-c); }
.mn-rchip.active .mn-rchip-dot { background: rgba(255, 255, 255, .22); }
.mn-rchip.active .mn-rchip-n { opacity: .8; }
.mn-rchip-all.active { background: var(--cz-emphasis-color); color: var(--cz-body-bg); box-shadow: none; }
.mn-rchip-all.active .mn-rchip-dot { background: rgba(127, 127, 127, .25); color: inherit; }
.mn-rchip:focus-visible { outline: 2px solid var(--cz-primary); outline-offset: 2px; }
@media (hover: none) { .mn-rail-btn { width: 1.75rem; height: 1.75rem; margin-top: -.875rem; } }
@media (prefers-reduced-motion: reduce) { .mn-rail-track { scroll-behavior: auto; } }
.mn-filter { padding: .5rem !important; }
.mn-filter .form-control { min-height: 2.5rem; }
@media (max-width: 575.98px) { .mn-hero-title { font-size: 2.35rem; } .mn-hero-lede { font-size: 1rem !important; margin-bottom: 1rem !important; } }
@media (max-width: 1399.98px) { .mn-rchip-n { display: none; } }
/* Health check header: where it ran from and the style toggle on a top line; then the score ring, the name and the
   verdict badge stacked and centred; the status line and progress bar below stay left-aligned. */
.mn-hc-bar { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.mn-hc-from { line-height: 1.6; }
.mn-hc-from .mn-flag2 { margin-right: 0; }
.mn-hc-style { margin-left: auto; }
.mn-hc-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; }
.mn-hc-verdict:empty { display: none; }
.mn-o.mn-opt { gap: 0; }

/* ---- Ambient pastel light: three blurred pools of colour drifting on a slow wave behind a section ----
   Very low contrast on purpose; it should read as the light shifting, not as moving shapes. Reduced motion
   keeps it, at half speed. */
.mn-ambient { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.mn-ambient span { position: absolute; width: 46vmax; height: 46vmax; max-width: 52rem; max-height: 52rem; border-radius: 50%; filter: blur(80px); opacity: .5; will-change: transform; animation: mn-wave 34s ease-in-out infinite; }
.mn-ambient span:nth-child(1) { top: -30%; left: -12%; background: var(--mn-p1); }
.mn-ambient span:nth-child(2) { top: -10%; right: -18%; background: var(--mn-p2); animation-duration: 41s; animation-delay: -12s; }
.mn-ambient span:nth-child(3) { bottom: -45%; left: 28%; background: var(--mn-p3); animation-duration: 47s; animation-delay: -24s; }
.mn-ambient-a { --mn-p1: #c7d2fe; --mn-p2: #fbcfe8; --mn-p3: #bae6fd; }
.mn-ambient-b { --mn-p1: #bbf7d0; --mn-p2: #ddd6fe; --mn-p3: #fed7aa; }
.mn-ambient-c { --mn-p1: #ddd6fe; --mn-p2: #bae6fd; --mn-p3: #fbcfe8; }
.mn-ambient-cat { --mn-p1: color-mix(in srgb, var(--mn-c) 30%, #fff); --mn-p2: color-mix(in srgb, var(--mn-c2, var(--mn-c)) 26%, #fff); --mn-p3: #e0e7ff; }
.mn-ambient-cat span:nth-child(3) { opacity: .35; }
[data-bs-theme="dark"] .mn-ambient span { opacity: .14; }
@keyframes mn-wave {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(6%, 8%, 0) scale(1.08); }
  50% { transform: translate3d(-4%, 12%, 0) scale(.94); }
  75% { transform: translate3d(-8%, -4%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) { .mn-ambient span { animation-duration: 80s; } }
.mn-cat-hero.overflow-hidden { background: var(--cz-body-bg); }
.mn-sim-wrap .container, .mn-hero .container { z-index: 1; }
.mn-cat-hero .mn-ambient { -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }

/* Health check: rows that need a look stand out in their section (amber or red edge and tint), and the heading counts them. */
.mn-hc-list .mn-hc-flag { box-shadow: inset 4px 0 0 var(--mn-flag); background: color-mix(in srgb, var(--mn-flag) 7%, var(--cz-body-bg)); }
.mn-hc-list .mn-hc-flag .accordion-button { background: transparent; }
.mn-hc-flag-warning { --mn-flag: var(--cz-warning); }
.mn-hc-flag-danger { --mn-flag: var(--cz-danger); }
.mn-hc-list .mn-hc-flag .accordion-button, .mn-hc-list .mn-hc-flag.mn-locked > div { padding-left: .85rem; padding-right: .85rem; }
/* The open body sits inside the coloured edge too, so its icons and cards never touch or clip it. */
.mn-hc-list .mn-hc-flag .accordion-body { padding-left: .85rem; padding-right: .85rem; }
.mn-hc-tgt { font-size: .7rem; }

/* Breathing room above the floating menu, where the old top link strip sat. */
.mn-head-gap { height: 1.5rem; }
/* "What is my IP?" in the menu: a soft tinted pill so it stands out from the plain links. */
.navbar .nav-link.mn-ip-link { background: rgba(var(--cz-primary-rgb, 34, 34, 34), .1); color: var(--cz-primary, var(--cz-emphasis-color)); border-radius: 50rem; padding: .375rem .875rem !important; font-weight: 600; display: inline-flex; align-items: center; }
.navbar .nav-link.mn-ip-link:hover, .navbar .nav-link.mn-ip-link.active { background: rgba(var(--cz-primary-rgb, 34, 34, 34), .18); }
@media (max-width: 991.98px) { .navbar .nav-link.mn-ip-link { margin: .25rem 0; } }
/* Keep menu labels on one line. Between 992 and 1199px the menu is tight, so the duplicate
   "Health check" button on the right steps aside (the menu still has Health check). */
.navbar .navbar-nav > .nav-item > .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1199.98px) { .mn-nav-actions > .btn-dark { display: none !important; } }


/* Expanded health check results: a neutral panel. Colour sits on the row's edge and status marks only. */
.mn-hc-list .mn-hc-flag { background: var(--cz-body-bg); box-shadow: none; }
/* The red or amber edge marks the row itself, not the details under it, so green and grey rows inside never sit next to it. */
.mn-hc-list .mn-hc-flag > .accordion-header, .mn-hc-list .mn-hc-flag.mn-locked > div { box-shadow: inset 4px 0 0 var(--mn-flag); }
.mn-hc-list .mn-hc-flag > .accordion-header { background: color-mix(in srgb, var(--mn-flag) 7%, var(--cz-body-bg)); }
.mn-result-compact .mn-fixes li + li, .mn-hlist .mn-hrow + .mn-hrow { border-top: 1px solid var(--cz-border-color); }
.mn-res-foot .mn-next { margin: 0; }
.mn-grade-chip { display: inline-flex; align-items: center; justify-content: center; min-width: 3rem; height: 3rem; padding: 0 .5rem; border-radius: .9rem; font-weight: 700; font-size: 1.35rem; flex-shrink: 0; }
.mn-hfix code { background: var(--cz-tertiary-bg); padding: .3rem .5rem; border-radius: .5rem; color: var(--cz-emphasis-color); }
.mn-raw2 > summary { cursor: pointer; }
.mn-result-compact { padding-top: 1rem; }

/* SPF lookup budget: one bar, a segment per include sized by its lookups, the overflow past 10 shaded red. */
.mn-spf-bar2 { position: relative; display: flex; gap: 2px; height: 2.25rem; margin-bottom: 1.4rem; }
.mn-spf-seg, .mn-spf-free { display: flex; align-items: center; justify-content: space-between; gap: .25rem; padding: 0 .5rem; min-width: 0; font-size: .75rem; border-radius: .4rem; }
.mn-spf-seg { background: color-mix(in srgb, var(--cz-primary) 16%, var(--cz-body-bg)); color: var(--cz-emphasis-color); }
.mn-spf-seg b { flex-shrink: 0; }
.mn-spf-free { background: var(--cz-tertiary-bg); color: var(--cz-secondary-color); justify-content: center; box-shadow: inset 0 0 0 1px var(--cz-border-color); }
.mn-spf-over { position: absolute; top: 0; bottom: 0; pointer-events: none; border-radius: 0 .4rem .4rem 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--cz-danger) 45%, transparent) 0 6px, color-mix(in srgb, var(--cz-danger) 20%, transparent) 6px 12px); }
.mn-spf-line { position: absolute; top: -.2rem; bottom: -.2rem; width: 2px; margin-left: -1px; background: var(--cz-danger); }
.mn-spf-line span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: .7rem; color: var(--cz-danger-text-emphasis); padding-top: .15rem; }
.mn-spf-no { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: .7rem; font-weight: 700; background: var(--cz-tertiary-bg); color: var(--cz-emphasis-color); flex-shrink: 0; }
.mn-spf-no.is-over { background: var(--cz-danger); color: #fff; }
/* The SPF tree keeps number, name and note on one line on phones; long names wrap inside their own column. */
.mn-spf-tree .mn-tree-row { flex-wrap: nowrap; align-items: flex-start; }
.mn-spf-tree .mn-tree-label { flex: 1 1 0; overflow-wrap: anywhere; }
@media (max-width: 575.98px) {
  .mn-spf-tree .mn-tree-label .font-monospace { font-size: .75rem !important; }
  .mn-spf-tree .mn-tree-row { flex-wrap: wrap; }
  .mn-spf-tree .mn-tree-label { flex-basis: calc(100% - 2.6rem); }
  .mn-spf-tree .mn-tree-meta { width: 100%; padding-left: 2.1rem; justify-content: flex-start; }
  .mn-spf-tree .mn-tree-meta:empty, .mn-spf-tree summary .mn-tree-row::after { display: none; }
  .mn-spf-tree .mn-tree ul, .mn-spf-tree .mn-tree .mn-tree { padding-left: .6rem; }
  .mn-spf-seg { padding: 0 .3rem; }
  .mn-spf-seg .text-truncate { display: none; }
  .mn-spf-seg { justify-content: center; }
}