/* ==========================================================================
   IsItDown.now
   A monitoring site, so the palette is a signal palette: a deep instrument
   navy for chrome, a clean paper body for data, and one accent (signal cyan)
   that is never used for a status - green, amber and red are reserved so a
   colour on this site always means exactly one thing.
   ========================================================================== */

:root {
  --ink:        #0b1523;
  --ink-solid:  #122033;
  --ink-line:   #22344c;
  --ink-text:   #c7d4e4;
  --ink-muted:  #8296ae;

  --accent:     #17c3d9;
  --accent-dk:  #0a7f92;
  --accent-soft:#e3f8fb;

  --bg:         #f4f6f9;
  --card:       #ffffff;
  --card-2:     #fafbfd;
  --line:       #e3e8ef;
  --line-2:     #eef1f6;
  --text:       #16202c;
  --text-2:     #3c4b5c;
  --muted:      #64748b;

  --up:         #12a150;
  --up-bg:      #e7f7ee;
  --slow:       #d98510;
  --slow-bg:    #fdf3e0;
  --down:       #dc2626;
  --down-bg:    #fdeaea;
  --reports:    #ea580c;
  --reports-bg: #fff0e6;
  --unknown:    #8a97a6;
  --unknown-bg: #eff2f6;

  --radius:     10px;
  --radius-lg:  14px;
  --shadow:     0 1px 2px rgba(16,32,52,.06), 0 4px 14px rgba(16,32,52,.05);
  --shadow-lg:  0 2px 6px rgba(16,32,52,.07), 0 18px 40px rgba(16,32,52,.09);
  --font:       system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono:       ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --wrap:       1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.6 var(--font);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
a { color: var(--accent-dk); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.22; letter-spacing: -.017em; font-weight: 750; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.2em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
table { border-collapse: collapse; width: 100%; }

/* The page gutter. Anything sharing an element with .wrap must use
   padding-block for its vertical spacing - a `padding` shorthand resets
   padding-inline to zero and the content ends up flush to the viewport.
   test_wrap_gutter_is_never_clobbered guards this. */
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; z-index: 999; }
.skip:focus { left: 12px; top: 12px; padding: .6rem 1rem; background: var(--ink); color: #fff; border-radius: 8px; }
:focus-visible { outline: 2px solid var(--accent-dk); outline-offset: 2px; }

/* ---------------------------------------------------------------- header */

.nav {
  position: sticky; top: 0; z-index: 200;
  background: var(--ink);
  color: var(--ink-text);
  border-bottom: 1px solid var(--ink-line);
  padding-top: env(safe-area-inset-top, 0px);
}
.nav-inner { display: flex; align-items: center; gap: 1.1rem; height: 62px; }

.brand { display: inline-flex; align-items: center; gap: .55rem; color: #fff; flex: 0 0 auto; }
.brand:hover { text-decoration: none; }
.brand img { border-radius: 7px; display: block; }
.brand-word { font-size: 1.02rem; font-weight: 800; letter-spacing: -.028em; }
.brand-dot { color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav-trigger, .nav-flat {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .48rem .68rem; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink-text);
  font: 640 .83rem var(--font); cursor: pointer; white-space: nowrap;
}
.nav-flat:hover, .nav-trigger:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.nav-trigger, .nav-flat { position: relative; }
.nav-trigger.active, .nav-flat.active { color: #fff; }
.nav-trigger.active::after, .nav-flat.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--accent);
}
.nav-trigger .ico { transition: transform .16s ease; }
.nav-menu { position: relative; }
.nav-menu.open .nav-trigger { background: rgba(255,255,255,.09); color: #fff; }
.nav-menu.open .nav-trigger .ico { transform: rotate(180deg); }

.mega {
  position: absolute; top: calc(100% + 9px); left: -8px; z-index: 210;
  display: none; width: min(680px, calc(100vw - 40px));
  padding: 1rem; border: 1px solid var(--ink-line); border-radius: var(--radius-lg);
  background: var(--ink-solid); box-shadow: 0 24px 60px rgba(2,8,18,.5);
}
.mega-narrow { width: min(380px, calc(100vw - 40px)); }
.nav-menu.open .mega { display: block; }
.mega-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-bottom: .7rem; margin-bottom: .7rem; border-bottom: 1px solid var(--ink-line); }
.mega-head strong { color: #fff; font-size: .82rem; letter-spacing: .01em; }
.mega-head a { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent); font-size: .74rem; font-weight: 700; }
.mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .1rem .7rem; }
.mega-list { display: grid; gap: .1rem; }
.mega-item {
  display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: .6rem;
  padding: .52rem .55rem; border-radius: 8px; color: var(--ink-text);
}
.mega-item:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.mega-item.active { background: rgba(23,195,217,.12); color: #fff; }
.mega-symbol { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,.06); color: var(--accent); }
.mega-title, .mega-sub { display: block; }
.mega-title { font-size: .81rem; font-weight: 680; }
.mega-sub { color: var(--ink-muted); font-size: .69rem; line-height: 1.35; }
.mega-foot { display: flex; justify-content: space-between; gap: 1rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--ink-line); color: var(--ink-muted); font-size: .69rem; }
.mega-foot a { color: var(--accent); font-weight: 650; }

.nav-search { position: relative; display: flex; align-items: center; gap: .45rem; flex: 1 1 auto; min-width: 0; max-width: 300px; margin-left: auto; padding: 0 .7rem; height: 36px; border: 1px solid var(--ink-line); border-radius: 9px; background: rgba(255,255,255,.05); color: var(--ink-muted); }
.nav-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: 500 .82rem var(--font); }
.nav-search input::placeholder { color: #6d8199; }
.nav-search:focus-within { border-color: var(--accent); background: rgba(23,195,217,.07); }

.nav-actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; }
.nav-status-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .34rem .6rem; border: 1px solid var(--ink-line); border-radius: 6px; background: rgba(255,255,255,.04); color: var(--ink-text); font-size: .72rem; font-weight: 650; }
.nav-status-chip:hover { text-decoration: none; border-color: var(--accent); }
.nav-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; color: var(--ink-text); }
.nav-icon-btn:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-account { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .68rem; border: 1px solid var(--ink-line); border-radius: 8px; color: #fff; font-size: .78rem; font-weight: 650; }
.nav-account:hover { text-decoration: none; border-color: var(--accent); }
.nav-signin { padding: .44rem .82rem; border-radius: 8px; background: var(--accent); color: #062029; font-size: .78rem; font-weight: 760; }
.nav-signin:hover { text-decoration: none; background: #2fd4e8; }

.hamburger { display: none; align-items: center; gap: .5rem; height: 36px; padding: 0 .2rem 0 .6rem; border: 0; border-left: 1px solid var(--ink-line); background: transparent; color: var(--ink-text); cursor: pointer; font-family: inherit; }
.hamburger-label { font-size: .64rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.hamburger-mark { position: relative; display: block; width: 20px; height: 18px; }
.hamburger-mark i { position: absolute; right: 0; display: block; height: 1.6px; background: currentColor; transition: top .18s ease, width .18s ease, transform .18s ease; }
.hamburger-mark i:first-child { top: 6px; width: 20px; }
.hamburger-mark i:last-child { top: 12px; width: 13px; }
.hamburger.open { color: var(--accent); }
.hamburger.open .hamburger-mark i { top: 9px; width: 18px; }
.hamburger.open .hamburger-mark i:first-child { transform: rotate(45deg); }
.hamburger.open .hamburger-mark i:last-child { transform: rotate(-45deg); }

/* -------------------------------------------------------- mobile drawer */

.mobile-panel {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: var(--ink); color: var(--ink-text); overflow-y: auto;
  padding: calc(62px + env(safe-area-inset-top, 0px)) 0 4rem;
  -webkit-overflow-scrolling: touch;
}
.mobile-panel.open { display: block; }
.mobile-panel-inner { max-width: 860px; padding-top: 1.1rem; }
.mobile-menu-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ink-line); }
.mobile-menu-head strong { display: block; color: #fff; font-size: 1.1rem; }
.mobile-menu-head p { margin: .3rem 0 0; color: var(--ink-muted); font-size: .72rem; line-height: 1.45; max-width: 34ch; }
.mobile-menu-note { display: inline-flex; align-items: center; gap: .35rem; flex: 0 0 auto; color: var(--ink-muted); font-size: .68rem; font-weight: 650; white-space: nowrap; }

.mobile-search { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; margin-top: 1rem; padding: .35rem .35rem .35rem .8rem; border: 1px solid var(--ink-line); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--ink-muted); }
.mobile-search input { min-width: 0; padding: .4rem 0; border: 0; outline: 0; background: transparent; color: #fff; font: 500 .9rem var(--font); }
.mobile-search input::placeholder { color: #6d8199; }
.mobile-search button { min-height: 36px; padding: .45rem .9rem; border: 0; border-radius: 8px; background: var(--accent); color: #062029; font: 780 .74rem var(--font); cursor: pointer; }

.mobile-featured { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 1.2rem; margin-top: 1.1rem; border-block: 1px solid var(--ink-line); }
.mobile-featured a { display: grid; grid-template-columns: 32px 1fr; column-gap: .65rem; align-items: center; padding: .9rem .1rem; color: var(--ink-text); }
.mobile-featured a + a { border-left: 1px solid var(--ink-line); padding-left: 1.1rem; }
.mobile-featured a:hover { color: var(--accent); text-decoration: none; }
.mobile-featured a > span { grid-row: 1 / 3; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(23,195,217,.12); color: var(--accent); }
.mobile-featured strong, .mobile-featured small { display: block; }
.mobile-featured strong { font-size: .8rem; }
.mobile-featured small { color: var(--ink-muted); font-size: .65rem; }

.mobile-nav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 2rem; margin-top: 1.6rem; }
.mob-group { margin: 0; }
.mob-head { margin-bottom: .3rem; color: var(--accent); font-size: .63rem; font-weight: 820; letter-spacing: .1em; text-transform: uppercase; }
.mob-link { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .62rem .15rem; border-bottom: 1px solid var(--ink-line); color: var(--ink-text); font-size: .79rem; font-weight: 620; }
.mob-link .ico { color: #62778f; }
.mob-link:hover, .mob-link.active { color: var(--accent); text-decoration: none; }
.mobile-utility { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; margin-top: 1.6rem; padding: 1rem; border: 1px solid var(--ink-line); border-radius: 10px; background: rgba(0,0,0,.2); }
.mobile-utility a { color: var(--ink-text); font-size: .72rem; font-weight: 700; }
.mobile-utility a:hover { color: var(--accent); }

/* ------------------------------------------------------------ primitives */

.pill { display: inline-flex; align-items: center; gap: .38rem; padding: .24rem .56rem; border-radius: 5px; font-size: .7rem; font-weight: 740; letter-spacing: .005em; white-space: nowrap; }
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pill-lg { padding: .36rem .8rem; font-size: .8rem; border-radius: 6px; }
.pill-sm { padding: .16rem .44rem; font-size: .66rem; border-radius: 4px; }
.pill-up      { background: var(--up-bg); color: #0c7a3c; }
.pill-slow    { background: var(--slow-bg); color: #9a5d05; }
.pill-down    { background: var(--down-bg); color: #b31d1d; }
.pill-reports { background: var(--reports-bg); color: #b8440a; }
.pill-checking{ background: var(--slow-bg); color: #9a5d05; }
.pill-unknown { background: var(--unknown-bg); color: #5b6775; }

.dot-live { width: 7px; height: 7px; border-radius: 50%; background: var(--up); display: inline-block; flex: 0 0 auto; }
.dot-live.is-down { background: var(--down); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .dot-live.is-down { animation: none; } }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); }
.card-pad { padding: 1.15rem 1.25rem; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .6rem 1.05rem; border: 1px solid transparent; border-radius: 9px; font: 700 .84rem var(--font); cursor: pointer; text-align: center; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #17283d; }
.btn-accent { background: var(--accent-dk); color: #fff; }
.btn-accent:hover { background: #0c93a9; }
.btn-danger { background: var(--down); color: #fff; }
.btn-danger:hover { background: #c31f1f; }
.btn-ghost { background: var(--card); border-color: var(--line); color: var(--text-2); }
.btn-ghost:hover { border-color: #c9d3e0; background: var(--card-2); }
.btn-sm { padding: .38rem .7rem; font-size: .76rem; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-block { width: 100%; }

.tag { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--muted); font-size: .68rem; font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: .78rem; }
.mono { font-family: var(--mono); font-size: .82em; }
.nowrap { white-space: nowrap; }

.alert { display: flex; gap: .6rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--radius); font-size: .85rem; }
.alert-info { background: var(--accent-soft); color: #075c6b; }
.alert-warn { background: var(--slow-bg); color: #8a5305; }
.alert-error { background: var(--down-bg); color: #a81c1c; }
.alert-ok { background: var(--up-bg); color: #0a6b35; }

/* --------------------------------------------------------------- layout */

.section { padding: 2.4rem 0; }
.section-tight { padding: 1.6rem 0; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.section-head h2 { font-size: 1.28rem; }
.section-head p { margin: .25rem 0 0; color: var(--muted); font-size: .84rem; max-width: 62ch; }
.section-head a.more { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; white-space: nowrap; }

.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding-block: .9rem 0; font-size: .76rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--accent-dk); }
.crumbs .sep { display: inline-flex; align-items: center; color: #b9c3d0; }
.crumbs .sep .ico { stroke-width: 2.4; }
.crumbs [aria-current] { color: var(--text-2); font-weight: 650; }

.page-head { padding-block: 1.4rem 1.8rem; }
.page-head h1 { font-size: clamp(1.6rem, 4.2vw, 2.3rem); }
.page-head .standfirst { margin: .7rem 0 0; color: var(--text-2); font-size: 1.02rem; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.6rem; align-items: start; }
.rail { position: sticky; top: 78px; display: grid; gap: 1rem; }

/* ------------------------------------------------------------- home hero */

.hero { background: var(--ink); color: #fff; padding: 2.6rem 0 2.9rem; border-bottom: 1px solid var(--ink-line); }
.hero h1 { font-size: clamp(1.75rem, 4.6vw, 2.7rem); color: #fff; max-width: 20ch; }
.hero .lede { margin: .85rem 0 0; color: var(--ink-text); font-size: 1.04rem; max-width: 56ch; }
.hero-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 2.4rem; align-items: start; }

.hero-check { margin-top: 1.4rem; }
.hero-check form { display: flex; gap: .5rem; }
.hero-check input {
  flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 1rem;
  border: 1px solid var(--ink-line); border-radius: 10px;
  background: rgba(255,255,255,.07); color: #fff; font: 500 1rem var(--font);
}
.hero-check input::placeholder { color: #72879f; }
.hero-check input:focus { outline: 0; border-color: var(--accent); background: rgba(23,195,217,.09); }
.hero-check button { height: 50px; padding: 0 1.35rem; border: 0; border-radius: 10px; background: var(--accent); color: #062029; font: 800 .92rem var(--font); cursor: pointer; white-space: nowrap; }
.hero-check button:hover { background: #2fd4e8; }
.hero-hint { margin: .6rem 0 0; color: var(--ink-muted); font-size: .78rem; }
.hero-hint a { color: var(--accent); }

.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 1.7rem; border: 1px solid var(--ink-line); border-radius: var(--radius-lg); overflow: hidden; }
.hero-stats div { padding: .9rem 1rem; }
.hero-stats div + div { border-left: 1px solid var(--ink-line); }
.hero-stats strong { display: block; color: #fff; font-size: 1.45rem; font-weight: 800; letter-spacing: -.02em; }
.hero-stats span { color: var(--ink-muted); font-size: .7rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }

.hero-panel { background: rgba(255,255,255,.04); border: 1px solid var(--ink-line); border-radius: var(--radius-lg); padding: 1.1rem 1.2rem; }
.hero-panel h2 { color: #fff; font-size: .96rem; margin-bottom: .2rem; }
.hero-panel > p { color: var(--ink-muted); font-size: .76rem; margin-bottom: .9rem; }
.hero-list { display: grid; gap: 0; }
.hero-list a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .62rem 0; border-top: 1px solid var(--ink-line); color: var(--ink-text); font-size: .84rem; font-weight: 620; }
.hero-list a:first-child { border-top: 0; }
.hero-list a:hover { color: #fff; text-decoration: none; }
.hero-list .hero-when { color: var(--ink-muted); font-size: .72rem; font-weight: 500; }
.hero-empty { padding: 1.1rem 0; color: var(--ink-muted); font-size: .84rem; }

/* ------------------------------------------------------- service listing */

.svc-list { display: grid; gap: .5rem; }
.svc {
  display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: .85rem;
  padding: .8rem 1rem; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); color: inherit;
}
.svc:hover { text-decoration: none; border-color: #b9c8da; background: var(--card-2); }
.svc-mark {
  display: grid; place-items: center; flex: 0 0 auto;
  width: 38px; height: 38px; padding: 3px;
  border: 1px solid var(--line); border-radius: 9px;
  /* Logos arrive with transparent backgrounds and are designed for light
     surfaces, so they get a white tile rather than the page grey. */
  background: #fff; color: var(--accent-dk);
  font-weight: 800; font-size: .95rem; overflow: hidden;
}
.svc-mark img { width: 100%; height: 100%; object-fit: contain; }
.svc-mark-lg { width: 52px; height: 52px; padding: 5px; border-radius: 12px; font-size: 1.25rem; }
.svc-name { display: block; font-size: .92rem; font-weight: 700; color: var(--text); }
.svc-meta { display: block; color: var(--muted); font-size: .74rem; }
.svc-right { display: flex; align-items: center; gap: .7rem; }
.svc-ms { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .75rem; }
.cat-card { display: grid; grid-template-columns: 38px 1fr; gap: .75rem; align-items: start; padding: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; }
.cat-card:hover { text-decoration: none; border-color: #b9c8da; background: var(--card-2); }
.cat-card .mega-symbol { background: var(--accent-soft); color: var(--accent-dk); }
.cat-card strong { display: block; font-size: .9rem; }
.cat-card small { display: block; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.cat-card .count { color: var(--muted); font-size: .7rem; font-weight: 700; }

.az { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1.2rem; }
.az a { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--text-2); font-size: .78rem; font-weight: 700; }
.az a:hover, .az a.active { border-color: var(--accent-dk); background: var(--accent-soft); color: var(--accent-dk); text-decoration: none; }

/* ------------------------------------------------------------ status page */

.status-hero { background: var(--card); border-bottom: 1px solid var(--line); }
.status-top { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1.5rem; align-items: start; padding: 1.3rem 0 1.7rem; }
.status-top h1 { font-size: clamp(1.5rem, 4vw, 2.15rem); }
.status-identity { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.status-domain { color: var(--muted); font-size: .84rem; }
.status-domain a { color: var(--muted); }

.verdict { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 1rem; align-items: start; padding: 1.1rem 1.25rem; border-radius: var(--radius-lg); border: 1px solid; margin-top: 1rem; }
.verdict-up      { background: var(--up-bg);      border-color: #b8e6cb; }
.verdict-slow,
.verdict-checking{ background: var(--slow-bg);    border-color: #f2dcaf; }
.verdict-down    { background: var(--down-bg);    border-color: #f5c2c2; }
.verdict-reports { background: var(--reports-bg); border-color: #f8cfb0; }
.verdict-unknown { background: var(--unknown-bg); border-color: #d9e0e8; }
/* flex-shrink would turn a 46px circle into an oval the moment the text
   beside it needed the room. */
.verdict-mark { display: grid; place-items: center; flex: 0 0 auto; width: 46px; height: 46px; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.75); }
.verdict-up .verdict-mark      { color: var(--up); }
.verdict-slow .verdict-mark,
.verdict-checking .verdict-mark{ color: var(--slow); }
.verdict-down .verdict-mark    { color: var(--down); }
.verdict-reports .verdict-mark { color: var(--reports); }
.verdict-unknown .verdict-mark { color: var(--unknown); }
.verdict h2 { font-size: 1.12rem; margin-bottom: .3rem; }
.verdict p { margin: 0; font-size: .89rem; color: var(--text-2); }

.status-actions { display: flex; flex-direction: column; gap: .5rem; min-width: 216px; }
.status-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 1.2rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); overflow: hidden; }
.status-facts div { padding: .85rem 1rem; }
.status-facts div + div { border-left: 1px solid var(--line); }
.status-facts strong { display: block; font-size: 1.16rem; font-weight: 790; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.status-facts span { display: block; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.status-facts small { display: block; color: var(--muted); font-size: .72rem; margin-top: .15rem; }

.subnav { display: flex; gap: .2rem; margin-top: 1.2rem; overflow-x: auto; scrollbar-width: none; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { padding: .55rem .85rem; border-radius: 8px 8px 0 0; color: var(--muted); font-size: .84rem; font-weight: 680; white-space: nowrap; border-bottom: 2px solid transparent; }
.subnav a:hover { color: var(--text); text-decoration: none; }
.subnav a.active { color: var(--text); border-bottom-color: var(--accent-dk); }

/* --------------------------------------------------------------- charts */

.chart { position: relative; }
.chart-bars { display: flex; align-items: flex-end; gap: 2px; height: 170px; padding-top: .5rem; }
.chart-bars .bar { flex: 1; min-width: 2px; border-radius: 2px 2px 0 0; background: #dbe3ec; position: relative; }
.chart-bars .bar.has { background: var(--reports); }
.chart-bars .bar.spike { background: var(--down); }
.chart-bars .bar:hover { filter: brightness(.9); }
.chart-axis { display: flex; justify-content: space-between; margin-top: .45rem; padding-top: .45rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.chart-baseline { position: absolute; left: 0; right: 0; border-top: 1px dashed #b4c0ce; pointer-events: none; }
.chart-baseline span { position: absolute; right: 0; top: -.85rem; background: var(--card); padding-left: .4rem; color: var(--muted); font-size: .66rem; }
.chart-empty { display: grid; place-items: center; height: 170px; color: var(--muted); font-size: .85rem; text-align: center; }

.resp-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.resp-bars .rbar { flex: 1; min-width: 3px; border-radius: 2px 2px 0 0; background: var(--accent-dk); opacity: .82; }
.resp-bars .rbar.state-slow { background: var(--slow); }
.resp-bars .rbar.state-down { background: var(--down); }

/* A key under the chart. The swatches reuse the bar colours through the same
   state- classes, so the legend cannot drift from what is drawn. */
.chart-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; list-style: none; margin: .55rem 0 0; padding: 0; color: var(--muted); font-size: .72rem; }
.chart-legend li { display: flex; align-items: center; gap: .38rem; }
.chart-legend .swatch { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; background: var(--accent-dk); opacity: .82; }
.chart-legend .swatch.state-slow { background: var(--slow); opacity: 1; }
.chart-legend .swatch.state-down { background: var(--down); opacity: 1; }

.uptime-strip { display: flex; gap: 2px; align-items: stretch; height: 42px; }
.uptime-strip i { flex: 1; min-width: 3px; border-radius: 2px; background: var(--up); }
.uptime-strip i.d-partial { background: var(--slow); }
.uptime-strip i.d-down { background: var(--down); }
.uptime-strip i.d-none { background: #e6ebf1; }
.uptime-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin-top: .6rem; color: var(--muted); font-size: .71rem; }
.uptime-legend b { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: .3rem; vertical-align: -1px; }

.bars-h { display: grid; gap: .55rem; }
.bar-h { display: grid; grid-template-columns: minmax(96px, 150px) 1fr auto; align-items: center; gap: .7rem; font-size: .82rem; }
.bar-h .track { height: 9px; border-radius: 100px; background: var(--line-2); overflow: hidden; }
.bar-h .fill { display: block; height: 100%; border-radius: 100px; background: var(--accent-dk); }
.bar-h .pct { color: var(--muted); font-size: .76rem; font-variant-numeric: tabular-nums; min-width: 3.4em; text-align: right; }

/* --------------------------------------------------------------- report */

.report-box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.15rem 1.25rem; }
.report-box h2 { font-size: 1.05rem; }
.report-box > p { color: var(--muted); font-size: .82rem; margin: .3rem 0 .9rem; }
.problem-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .45rem; }
.problem-grid label { display: block; }
.problem-grid input { position: absolute; opacity: 0; width: 0; height: 0; }
.problem-grid span { display: block; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); font-size: .8rem; font-weight: 650; text-align: center; cursor: pointer; }
.problem-grid span:hover { border-color: #c5d1e0; }
.problem-grid input:checked + span { border-color: var(--accent-dk); background: var(--accent-soft); color: var(--accent-dk); }
.problem-grid input:focus-visible + span { outline: 2px solid var(--accent-dk); outline-offset: 2px; }
.report-where { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .7rem; }
.report-where select, .report-where input { width: 100%; height: 40px; padding: 0 .65rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font: 500 .84rem var(--font); color: var(--text); }
.report-note { margin-top: .75rem; color: var(--muted); font-size: .72rem; }

/* ------------------------------------------------------------- comments */

.comments h2 { font-size: 1.12rem; }
.comment-intro { color: var(--muted); font-size: .84rem; margin: .3rem 0 1rem; max-width: 70ch; }
.comment-form textarea { width: 100%; min-height: 96px; padding: .7rem .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font: 400 .9rem/1.55 var(--font); color: var(--text); resize: vertical; }
.comment-form textarea:focus { outline: 0; border-color: var(--accent-dk); }
.comment-form-foot { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .6rem; flex-wrap: wrap; }
.comment-count { color: var(--muted); font-size: .74rem; font-variant-numeric: tabular-nums; }

.comment-list { display: grid; gap: .9rem; margin-top: 1.4rem; }
.comment { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: .75rem; }
.comment-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--line-2); display: grid; place-items: center; color: var(--muted); font-weight: 750; font-size: .82rem; overflow: hidden; flex: 0 0 auto; }
.comment-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.comment-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.comment-author { font-size: .85rem; font-weight: 720; }
.comment-badge { padding: .08rem .38rem; border-radius: 4px; background: var(--accent-soft); color: var(--accent-dk); font-size: .63rem; font-weight: 780; text-transform: uppercase; letter-spacing: .05em; }
.comment-time { color: var(--muted); font-size: .73rem; }
.comment-body { font-size: .89rem; color: var(--text-2); }
.comment-body p { margin: .25rem 0 .4rem; }
.comment-body .c-url { color: var(--muted); word-break: break-all; }
.comment-tools { display: flex; align-items: center; gap: .15rem; margin-top: .2rem; }
.comment-tools button { display: inline-flex; align-items: center; gap: .25rem; padding: .22rem .45rem; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font: 650 .73rem var(--font); cursor: pointer; }
.comment-tools button:hover { background: var(--line-2); color: var(--text); }
.comment-tools button.on { color: var(--accent-dk); }
.comment-score { font-variant-numeric: tabular-nums; min-width: 1.2em; text-align: center; }
.comment-replies { margin-top: .8rem; padding-left: .9rem; border-left: 2px solid var(--line); display: grid; gap: .8rem; }
.comment-empty { padding: 1.6rem; text-align: center; color: var(--muted); font-size: .86rem; border: 1px dashed var(--line); border-radius: var(--radius); }
.reply-form { margin-top: .6rem; }

.signin-prompt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-2); }
.signin-prompt p { margin: 0; font-size: .86rem; color: var(--text-2); max-width: 58ch; }

/* ------------------------------------------------- small shared utilities */

.card-title { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; font-size: .95rem; }
.panel-title { font-size: 1.08rem; }
.panel-sub { margin: .25rem 0 .9rem; color: var(--muted); font-size: .82rem; }
.mt-1 { margin-top: 1rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 2.4rem; }

/* A vertical list of links separated by hairlines - used in every rail. */
.stack-links { display: grid; gap: 0; }
.stack-links a {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .5rem 0; border-top: 1px solid var(--line-2);
  font-size: .84rem; font-weight: 620; color: var(--text-2);
}
.stack-links a:first-child { border-top: 0; }
.stack-links a:hover { color: var(--accent-dk); text-decoration: none; }
.stack-links .meta { color: var(--muted); font-weight: 500; font-size: .78rem; white-space: nowrap; }

/* The on-demand checker's input sits on the light body rather than the
   dark hero, so it needs the paper treatment. */
.check-form { display: flex; gap: .5rem; max-width: 640px; }
.check-form input {
  flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 1rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--card); color: var(--text); font: 500 1rem var(--font);
}
.check-form input:focus { outline: 0; border-color: var(--accent-dk); }
.check-form button {
  height: 50px; padding: 0 1.35rem; border: 0; border-radius: 10px;
  background: var(--ink); color: #fff; font: 800 .92rem var(--font); cursor: pointer;
  white-space: nowrap;
}
.check-form button:hover { background: #17283d; }

/* Spacing and small type utilities, so templates carry structure rather
   than a hundred one-off inline declarations. */
.m-0 { margin: 0 !important; }
.mb-sm { margin-bottom: .6rem; }
.mb-md { margin-bottom: .9rem; }
.mt-sm { margin-top: .7rem; }
.mt-lg { margin-top: 1.6rem; }
.inline-more { display: inline-block; margin-top: .7rem; }
.flat-table th[scope="row"] { background: none; text-transform: none; letter-spacing: 0; font-size: .8rem; position: static; font-weight: 650; color: var(--text-2); }
.prose-tight { max-width: none; font-size: .95rem; }
.chip-row { display: flex; flex-wrap: wrap; gap: .35rem; }
/* A hostname on the recently-checked board is a link into our own
   checker. It has to look like one, or the row reads as decoration and
   nobody finds out it is clickable. */
a.tag-link { color: var(--text-2); transition: border-color .12s ease, color .12s ease; }
a.tag-link:hover, a.tag-link:focus-visible { border-color: var(--accent-dk); color: var(--accent-dk); text-decoration: none; }
a.tag-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.card-section { background: var(--card); border-top: 1px solid var(--line); }
.bare { border: 0; }

/* ---------------------------------------------------------------- tables */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
table.data { font-size: .85rem; }
table.data th, table.data td { padding: .68rem .9rem; text-align: left; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
/* Column headers only. This rule used to match every th, so a row header
   in tbody was uppercased, letter-spaced, sat on the header background and
   made sticky - which a row header cannot usefully be. The width that cost
   is what pushed this table into a horizontal scroll: "Server and transfer"
   is 19 characters, and nowrap plus uppercase plus tracking made it the
   widest column in the table. */
table.data thead th { background: var(--card-2); color: var(--muted); font-size: .7rem; font-weight: 780; letter-spacing: .05em; text-transform: uppercase; position: sticky; top: 0; }
table.data tbody th { font-weight: 680; color: var(--text); white-space: normal; }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover { background: var(--card-2); }
table.data td.wrap-cell { white-space: normal; min-width: 180px; }
.num { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- articles */

.mag { background: var(--card); }
/* The breadcrumb sits inside .mag so it stands on the hero's own background
   rather than the page ground behind it - a white strip above a white hero,
   not a grey one. With the crumbs above it the hero needs less top padding. */
.mag > .crumbs { padding-block: 1.1rem 0; }
.mag-hero { padding-block: 2rem 1.6rem; }
.crumbs + .mag-hero { padding-block-start: 1rem; }
.mag-hero h1 { font-size: clamp(1.8rem, 5vw, 2.85rem); max-width: 22ch; }
.mag-hero .standfirst { margin: .9rem 0 0; font-size: 1.14rem; line-height: 1.55; color: var(--text-2); }
.mag-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .78rem; }
.mag-figure { margin: 0 0 1.8rem; }
.mag-figure img { width: 100%; border-radius: var(--radius-lg); display: block; background: var(--line-2); }
.mag-figure figcaption { margin-top: .5rem; color: var(--muted); font-size: .76rem; }

.prose { font-size: 1.035rem; line-height: 1.72; color: var(--text-2); max-width: 70ch; }
.prose > h2 { margin: 2.2rem 0 .7rem; font-size: 1.5rem; color: var(--text); letter-spacing: -.02em; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin: 1.7rem 0 .5rem; font-size: 1.14rem; color: var(--text); }
.prose p { margin: 0 0 1.05em; }
.prose ul, .prose ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent-dk); }
.prose strong { color: var(--text); font-weight: 680; }
.prose a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.prose blockquote { margin: 1.6rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--accent); color: var(--text); font-size: 1.08rem; font-style: normal; }
.prose code { padding: .1em .35em; border-radius: 4px; background: var(--line-2); font-family: var(--mono); font-size: .86em; color: #0f3b46; }
.prose pre { overflow-x: auto; padding: .9rem 1rem; border-radius: var(--radius); background: var(--ink); color: #d7e3f2; font-size: .84rem; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose table { margin: 1.4rem 0; font-size: .92rem; }
.prose table th, .prose table td { padding: .55rem .7rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose table th { background: var(--card-2); font-weight: 750; color: var(--text); }
.prose figure { margin: 1.8rem 0; }
.prose .callout { margin: 1.7rem 0; padding: 1.1rem 1.25rem; border-radius: var(--radius); background: var(--accent-soft); border: 1px solid #bfeaf1; color: #0a4a56; font-size: .95rem; }
.prose .callout strong { color: #073b45; }
.prose .callout p:last-child { margin-bottom: 0; }
.prose .warn { background: var(--slow-bg); border-color: #f0dbb0; color: #7d4d04; }
.prose .warn strong { color: #6a4103; }

.takeaways { margin: 0 0 1.9rem; padding: 1.15rem 1.35rem; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card-2); }
.takeaways h2 { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dk); margin-bottom: .6rem; }
.takeaways ul { margin: 0; padding-left: 1.15em; }
.takeaways li { margin-bottom: .4em; font-size: .93rem; color: var(--text-2); }

.toc { padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.toc h2 { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: .55rem; }
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { margin-bottom: .3em; font-size: .82rem; }

.faq { margin-top: 2.4rem; }
.faq h2 { font-size: 1.35rem; margin-bottom: .9rem; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); margin-bottom: .55rem; }
.faq summary { padding: .85rem 1.05rem; font-size: .93rem; font-weight: 700; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 1.25rem; line-height: 1; }
.faq details[open] summary::after { content: '\2212'; }
.faq .faq-body { padding: 0 1.05rem 1rem; color: var(--text-2); font-size: .92rem; }
.faq .faq-body p:last-child { margin-bottom: 0; }

.article-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 1rem; }
.acard { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: inherit; }
.acard:hover { text-decoration: none; border-color: #b9c8da; }
.acard img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--line-2); display: block; }
/* A missing image keeps its box. `onerror` used to remove the element,
   which collapsed the 16/9 space and shifted every card below it - the
   one thing the aspect-ratio above exists to prevent. */
.acard img.img-missing { visibility: hidden; }
.acard-body { padding: .9rem 1rem 1.05rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.acard h3 { font-size: .98rem; line-height: 1.35; }
.acard p { margin: 0; color: var(--muted); font-size: .81rem; line-height: 1.5; }
.acard .acard-meta { margin-top: auto; padding-top: .55rem; color: var(--muted); font-size: .71rem; display: flex; gap: .6rem; }

.hub-card { display: grid; grid-template-columns: 42px 1fr; gap: .9rem; padding: 1.15rem 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.hub-card .mega-symbol { width: 42px; height: 42px; background: var(--accent-soft); color: var(--accent-dk); }
.hub-card h2 { font-size: 1.1rem; }
.hub-card h2 a { color: var(--text); }
.hub-card > div > p { margin: .35rem 0 .7rem; color: var(--muted); font-size: .85rem; }
.hub-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.hub-card li a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--line-2); font-size: .85rem; color: var(--text-2); font-weight: 620; }
.hub-card li a:hover { color: var(--accent-dk); text-decoration: none; }

/* ---------------------------------------------------------------- check */

.check-result { padding: 1.4rem 1.5rem; border-radius: var(--radius-lg); border: 1px solid; }
.check-up      { background: var(--up-bg);   border-color: #b8e6cb; }
.check-slow    { background: var(--slow-bg); border-color: #f2dcaf; }
.check-down    { background: var(--down-bg); border-color: #f5c2c2; }
.check-result p { margin: .5rem 0 0; color: var(--text-2); font-size: .95rem; max-width: 62ch; }

/* The verdict line: icon, answer, mark. The mark sits immediately after the
   text rather than at the far right, so the two read as one statement even
   when the hostname is long enough to wrap. */
.check-result .verdict { display: flex; align-items: center; gap: .7rem; }
.verdict-line { font-size: clamp(1.25rem, 4vw, 1.7rem); line-height: 1.2; margin: 0; min-width: 0; }
/* Sits on the text baseline-ish rather than on its own row. */
.verdict-line .vmark { display: inline-block; vertical-align: -.22em; margin-left: .45rem; }
.verdict-why { max-width: 62ch; }
.site-mark { width: 34px; height: 34px; border-radius: 7px; flex: 0 0 auto; background: #fff; object-fit: contain; padding: 3px; border: 1px solid rgba(0,0,0,.08); }
.site-mark-letter { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; color: var(--muted); padding: 0; }
.vmark { flex: 0 0 auto; }
.vmark-up   { color: var(--up) !important; }
.vmark-slow { color: var(--slow) !important; }
.vmark-down { color: var(--down) !important; }

/* Definition lists carry every "field: value" block on the check page. They
   are read as a spec sheet - scanned down the label column for one row -
   so the label column is fixed width and the rows are hairline separated. */
.kv { margin: 0; display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--card); }
.kv > div { display: grid; grid-template-columns: 12rem 1fr; gap: 1rem; align-items: baseline; padding: .62rem .9rem; }
.kv > div + div { border-top: 1px solid var(--line-2, var(--line)); }
.kv > div:nth-child(odd) { background: #fafbfd; }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .kv > div:nth-child(odd) { background: color-mix(in srgb, var(--bg) 45%, transparent); }
}
.kv dt { color: var(--muted); font-size: .73rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.kv dd { margin: 0; font-size: .89rem; font-weight: 550; color: var(--text); min-width: 0; }
.kv dd .mono { font-size: .86em; }
.kv dd > div + div { margin-top: .3rem; }
.kv dd .tag { vertical-align: 1px; margin-left: .3rem; }
.break { word-break: break-all; }

.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.chain li { display: flex; align-items: baseline; gap: .5rem; font-size: .82rem; }

.tag-sm { font-size: .64rem; padding: .1rem .35rem; }
.tag-ok   { border-color: #b8e6cb; background: var(--up-bg);   color: #147a41; }
.tag-warn { border-color: #f2dcaf; background: var(--slow-bg); color: #8a6100; }
.tag-bad  { border-color: #f5c2c2; background: var(--down-bg); color: #a32424; }
.tag-lock { border-style: dashed; }

/* The sign-in gate on the domain record. */
.domain-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.domain-intro { margin: .35rem 0 .9rem; max-width: 64ch; }
.domain-body[aria-busy="true"] .domain-loading { opacity: .7; }
.domain-gate { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; padding: .9rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--accent-soft); }
.domain-gate p { font-size: .84rem; color: var(--text-2); max-width: 54ch; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin-top: 1.3rem; border: 1px solid rgba(0,0,0,.08); border-radius: var(--radius); background: rgba(255,255,255,.6); overflow: hidden; }
.check-grid div { padding: .75rem .9rem; }
.check-grid div + div { border-left: 1px solid rgba(0,0,0,.07); }
.check-grid strong { display: block; font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.check-grid span { color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

/* ------------------------------------------ home page service directory */

.dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1.4rem 1.6rem; }
.dir-group { break-inside: avoid; }
.dir-head { display: flex; align-items: center; gap: .4rem; margin-bottom: .5rem; padding-bottom: .45rem; border-bottom: 1px solid var(--line); font-size: .86rem; }
.dir-title { font-size: inherit; font-weight: 700; margin: 0; }
/* Counts live beside a heading, never inside it. */
.head-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.count-badge { color: var(--muted); font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.count-note { margin: .15rem 0 .5rem; }
.dir-head .mega-symbol { width: 24px; height: 24px; border-radius: 6px; background: var(--accent-soft); color: var(--accent-dk); }
.dir-head a { color: var(--text); }
.dir-count { margin-left: auto; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.dir-list { list-style: none; margin: 0; padding: 0; }
.dir-list li { margin: 0; }
.dir-list a { display: flex; align-items: center; gap: .45rem; padding: .26rem 0; color: var(--text-2); font-size: .83rem; }
.dir-list a:hover { color: var(--accent-dk); text-decoration: none; }
.dir-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--unknown); }
.dir-up { background: var(--up); }
.dir-slow { background: var(--slow); }
.dir-down { background: var(--down); }
.dir-unknown { background: #cbd5e1; }
.dir-legend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: 1.2rem 0 0; color: var(--muted); font-size: .75rem; }
.dir-legend span { display: inline-flex; align-items: center; gap: .35rem; }

/* The three-column explanation of how a verdict is reached. */
.explain { position: relative; padding: 1.15rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card-2); }
.explain-n { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: .6rem; border-radius: 50%; background: var(--ink); color: #fff; font-size: .78rem; font-weight: 800; flex: 0 0 auto; }
.explain h3 { margin-bottom: .45rem; font-size: 1rem; }
.explain p { margin: 0 0 .7rem; color: var(--text-2); font-size: .87rem; line-height: 1.6; }
.explain p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- operator notices */

/* Deliberately distinct from .verdict: this is the operator speaking, not
   our measurement, and the two must never be mistaken for each other. */
.operator-notice {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .9rem;
  margin-top: 1rem; padding: .95rem 1.15rem;
  border: 1px solid var(--ink-line); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0; background: var(--ink); color: var(--ink-text);
}
.operator-down       { border-left-color: var(--down); }
.operator-degraded   { border-left-color: var(--slow); }
.operator-maintenance{ border-left-color: var(--accent); }
.operator-up         { border-left-color: var(--up); }
.operator-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255,255,255,.07); color: var(--accent); }
.operator-head { margin: 0; color: #fff; font-size: .9rem; }
.operator-head strong { color: #fff; }
.operator-body { margin: .35rem 0 0; color: var(--ink-text); font-size: .93rem; }
.operator-meta { margin: .45rem 0 0; color: var(--ink-muted); font-size: .73rem; line-height: 1.5; }

/* ------------------------------------------------- webmaster console */

.owner-row { padding: .95rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card-2); }
.owner-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; }
.owner-head > div:first-child { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.owner-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.verify-option { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; padding: .5rem 0; border-top: 1px solid var(--line); }
.verify-label { min-width: 118px; color: var(--muted); font-size: .72rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
.verify-option code { padding: .22rem .45rem; border-radius: 4px; background: var(--ink); color: #9fe9f5; font-family: var(--mono); font-size: .78rem; word-break: break-all; }
.owner-result { margin-top: .7rem; }
.key-reveal { padding: .8rem .95rem; border-radius: var(--radius); background: var(--ink); color: #9fe9f5; font-family: var(--mono); font-size: .8rem; word-break: break-all; }
.key-reveal b { display: block; margin-bottom: .35rem; color: #fff; font-family: var(--font); font-size: .78rem; }

/* ---------------------------------------------------------------- sitemap */

.sitemap-jump { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.8rem; }
.sitemap-jump a { padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text-2); font-size: .8rem; font-weight: 680; }
.sitemap-jump a:hover { border-color: var(--accent-dk); color: var(--accent-dk); text-decoration: none; }
.sitemap-block { padding: 1.4rem 0 .4rem; border-top: 1px solid var(--line); }
.sitemap-block:first-of-type { border-top: 0; padding-top: 0; }
.sitemap-block > h2 { display: flex; align-items: center; gap: .45rem; margin-bottom: .6rem; font-size: 1.22rem; }
.sitemap-cat { margin: 1.1rem 0; }
.sitemap-cat h3 { display: flex; align-items: center; gap: .4rem; margin-bottom: .45rem; font-size: .92rem; }
.sitemap-cat h3 .ico { color: var(--accent-dk); }
.sitemap-list { list-style: none; margin: 0 0 .6rem; padding: 0; }
.sitemap-list li { padding: .22rem 0; font-size: .87rem; }
.sitemap-cols { columns: 3; column-gap: 2rem; }
.sitemap-cols li { break-inside: avoid; }

/* -------------------------------------------------------------- misc/foot */

.api-block { background: var(--ink); color: #d7e3f2; border-radius: var(--radius-lg); padding: 1rem 1.15rem; overflow-x: auto; font-family: var(--mono); font-size: .8rem; line-height: 1.6; }
.api-block .k { color: #7ee3f2; }
.api-block .s { color: #a5e8b5; }
.api-endpoint { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-family: var(--mono); font-size: .84rem; }
.api-steps { margin: .8rem 0 0; padding-left: 1.2em; }
.api-steps li { margin-bottom: .45em; font-size: .92rem; color: var(--text-2); }
.api-steps li::marker { color: var(--accent-dk); font-weight: 800; }
.api-endpoint .verb { padding: .12rem .45rem; border-radius: 5px; background: var(--up-bg); color: #0c7a3c; font-weight: 800; font-size: .72rem; letter-spacing: .04em; }

.foot { background: var(--ink); color: var(--ink-text); margin-top: 3rem; padding: 2.4rem 0 1.6rem; }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 2.4fr); gap: 2.4rem; }
.foot-brand p { color: var(--ink-muted); font-size: .8rem; line-height: 1.65; max-width: 44ch; margin: .8rem 0 0; }
.foot-note { display: flex; align-items: center; gap: .4rem; font-size: .74rem !important; }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.foot-cols .foot-heading { margin: 0 0 .6rem; color: #fff; font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; margin-bottom: .6rem; }
.foot-cols a { display: block; padding: .22rem 0; color: var(--ink-muted); font-size: .8rem; }
.foot-cols a:hover { color: var(--accent); text-decoration: none; }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; flex-wrap: wrap; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid var(--ink-line); }
.foot-bottom p { margin: 0; color: var(--ink-muted); font-size: .73rem; max-width: 78ch; }
.foot-links { display: flex; gap: 1rem; }
.foot-links a { color: var(--ink-muted); font-size: .75rem; font-weight: 650; }
.foot-links a:hover { color: var(--accent); }

.error-page { padding-block: 4rem 5rem; text-align: center; }
.error-page .code { font-size: 4.5rem; font-weight: 820; color: var(--line); line-height: 1; letter-spacing: -.04em; }
.error-page h1 { margin-top: .4rem; font-size: 1.7rem; }
.error-page p { margin: .8rem auto 1.6rem; max-width: 52ch; color: var(--muted); }

.empty { padding: 2.4rem 1.2rem; text-align: center; border: 1px dashed var(--line); border-radius: var(--radius-lg); background: var(--card); }
.empty h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.empty p { margin: 0; color: var(--muted); font-size: .86rem; }

.toast { position: fixed; left: 50%; bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 400; max-width: min(460px, calc(100vw - 32px)); padding: .75rem 1.1rem; border-radius: 10px; background: var(--ink); color: #fff; font-size: .85rem; box-shadow: var(--shadow-lg); }
.toast.err { background: #8f1d1d; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .nav-links, .nav-search { display: none; }
  /* .nav-search carried the margin-left:auto that pushed everything right.
     With it hidden, the actions need to claim that space themselves. */
  .nav-actions { margin-left: auto; }
  .hamburger { display: flex; padding-right: 0; }
  .nav-status-chip { display: none; }
  .split { grid-template-columns: 1fr; }
  .rail { position: static; }
  .foot-top { grid-template-columns: 1fr; gap: 1.8rem; }
}

@media (max-width: 860px) {
  .sitemap-cols { columns: 2; }
  .hero-layout { grid-template-columns: 1fr; gap: 1.8rem; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-top { grid-template-columns: 1fr; }
  .status-actions { min-width: 0; flex-direction: row; flex-wrap: wrap; }
  .status-actions .btn { flex: 1 1 160px; }
  .status-facts { grid-template-columns: repeat(2, 1fr); }
  .status-facts div:nth-child(3), .status-facts div:nth-child(4) { border-top: 1px solid var(--line); }
  .status-facts div:nth-child(3) { border-left: 0; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 660px) {
  body { font-size: 14.5px; }
  .dir { grid-template-columns: 1fr 1fr; gap: 1.1rem; }
  .operator-notice { grid-template-columns: 1fr; }
  .owner-head { align-items: flex-start; flex-direction: column; }
  .verify-label { min-width: 0; }
  .sitemap-cols { columns: 1; }
  /* `flex: 1` on the input means flex-basis: 0 on the main axis, which
     these two rules have just made vertical. The inputs carry
     `flex: 1 1 auto` so the basis comes from their height instead; these
     widths are belt and braces for the same thing. */
  .check-form { flex-direction: column; }
  .check-form input, .check-form button { width: 100%; }
  .wrap { padding-inline: 16px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .mobile-featured, .mobile-nav-grid { grid-template-columns: 1fr; }
  .mobile-featured a + a { border-left: 0; border-top: 1px solid var(--ink-line); padding-left: .1rem; }
  .hero { padding: 2rem 0 2.2rem; }
  .hero-check form { flex-direction: column; }
  .hero-check input, .hero-check button { width: 100%; }
  .hero-stats { grid-template-columns: 1fr; }
  .hero-stats div + div { border-left: 0; border-top: 1px solid var(--ink-line); }
  .verdict { grid-template-columns: 1fr; }
  .report-where { grid-template-columns: 1fr; }
  .bar-h { grid-template-columns: 1fr; gap: .2rem; }
  .bar-h .pct { text-align: left; }
  .svc { grid-template-columns: 34px minmax(0,1fr); grid-template-rows: auto auto; }
  .svc-mark { width: 34px; height: 34px; padding: 2px; }
  .svc-mark-lg { width: 42px; height: 42px; padding: 4px; }
  .svc-right { grid-column: 2; justify-content: flex-start; }
  .kv > div { grid-template-columns: 1fr; gap: .2rem; padding: .6rem .8rem; }
  .check-grid { grid-template-columns: repeat(2, 1fr); }
  .check-grid div:nth-child(n+3) { border-top: 1px solid rgba(0,0,0,.07); }
  .check-grid div:nth-child(odd) { border-left: 0; }
  .foot-bottom { flex-direction: column; align-items: flex-start; }
  .prose { font-size: 1rem; }
  .mag-hero .standfirst { font-size: 1.05rem; }
}

@media print {
  .nav, .foot, .mobile-panel, .report-box, .comments { display: none !important; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------- tools */

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1rem; }
.tool-card { display: flex; flex-direction: column; gap: .5rem; padding: 1.2rem 1.25rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); color: var(--text); }
.tool-card:hover { border-color: var(--accent); text-decoration: none; }
.tool-card .mega-symbol { width: 34px; height: 34px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dk); }
.tool-card h2 { font-size: 1.02rem; margin: 0; }
.tool-card p { margin: 0; color: var(--text-2); font-size: .86rem; }
.tool-when { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .76rem; }
.tool-when strong { color: var(--text-2); }

/* Calculators. Both are forms whose output updates as you type. */
.calc-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }
.calc-row + .calc-row { margin-top: .9rem; }
.field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.field label { color: var(--muted); font-size: .75rem; font-weight: 650; }
.field input, .field select { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--text); font: inherit; font-size: .92rem; }
.field input:focus-visible, .field select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc-out { display: block; padding: .55rem 0; font-size: 1.25rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.calc-out-inline { font-weight: 750; font-variant-numeric: tabular-nums; color: var(--text); }
.calc .check-grid { background: var(--bg); }
.rule { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--line); }
.link-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; font-size: .85rem; }

/* Numbered practical steps. A list people act on, not a list they skim. */
.tips { margin: 0; padding-left: 1.15rem; display: grid; gap: .55rem; font-size: .89rem; color: var(--text-2); line-height: 1.55; }
.tips li::marker { color: var(--accent-dk); font-weight: 700; }
.tips strong { color: var(--text); }
.lede { margin: .8rem 0 0; font-size: .97rem; color: var(--text-2); max-width: 70ch; }
table.data caption { text-align: left; }

/* The computed record summary on a history page: the paragraph a featured
   snippet lifts, so it is the first prose after the heading. */
.record-summary { margin-top: 1.3rem; padding: .95rem 1.1rem; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--accent-soft); }
.record-headline { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text); }
.record-detail { margin: .35rem 0 0; font-size: .88rem; color: var(--text-2); max-width: 74ch; }

/* The measured record, directly under the identity block. It is the most
   service-specific prose on a status page and the passage a featured answer
   would lift, so it sits above the verdict card rather than below the fold. */
.status-record { margin: .85rem 0 0; font-size: .92rem; line-height: 1.55; color: var(--text-2); max-width: 78ch; }
.status-record strong { color: var(--text); }

/* Worked examples on the cost calculator. Each one is a scenario with its
   assumed inputs shown, so nothing is loaded into the form invisibly. */
.example-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.example { display: flex; flex-direction: column; gap: .55rem; padding: 1rem 1.05rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.example h3 { margin: 0; font-size: .95rem; }
.example p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--text-2); }
.example-inputs { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; font-size: .8rem; }
.example-inputs li { display: flex; justify-content: space-between; gap: .6rem; padding: .22rem 0; border-top: 1px solid var(--line-2); }
.example-inputs li:first-child { border-top: 0; }
.example-inputs span { color: var(--muted); }
.example-inputs strong { font-variant-numeric: tabular-nums; }
.example button { margin-top: auto; align-self: flex-start; }

/* One staged release awaiting review. */
.release { padding: 1rem 0; border-top: 1px solid var(--line); }
.release:first-of-type { border-top: 0; padding-top: 0; }
.release h3 { margin: 0; font-size: .95rem; }
.release-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .8rem; }
.inline-form { display: inline; }

/* ------------------------------------------------------------ outage map */
/* Tile-less on purpose: country polygons are served from our own origin, so
   looking at an outage map tells no third party what you were checking. */
/* Leaflet's own panes and controls run up to z-index 1000, which is well
   above the sticky nav at 200. Raising the nav would start an arms race
   with the toast and the suggest dropdown, so the map is given its own
   stacking context instead: everything Leaflet does is then relative to
   this box and can never paint over the chrome. position+z-index as well
   as isolation, so it holds in browsers without isolation support. */
.outage-map { position: relative; z-index: 0; isolation: isolate;
  height: 420px; border: 1px solid var(--line); border-radius: var(--radius);
  background: #f2f5f9; overflow: hidden; }
.outage-map .leaflet-container { background: #f2f5f9; font: inherit; }
.outage-map .leaflet-tooltip { border: 1px solid var(--line); border-radius: 5px; background: var(--card); color: var(--text); font-size: .78rem; font-weight: 600; box-shadow: none; padding: .25rem .45rem; }
.outage-map .leaflet-tooltip::before { display: none; }
.outage-map .leaflet-control-zoom a { border-radius: 5px; color: var(--text-2); }
.chart-legend .swatch-most { background: #dc2626; opacity: 1; }
.chart-legend .swatch-some { background: #f59e0b; opacity: 1; }
.chart-legend .swatch-few  { background: #fbbf24; opacity: 1; }
.chart-legend .swatch-none { background: #e2e8f0; opacity: 1; }

@media (max-width: 660px) { .outage-map { height: 300px; } }

/* ------------------------------------------------- status code reference */
.code-key { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .76rem; color: var(--muted); }
.code-key span { display: flex; align-items: center; gap: .4rem; }
.code-key .swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.fix-them  { background: #fee2e2; border-color: #f5c2c2; color: #a32424; }
.fix-you   { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dk); }
.fix-either{ background: var(--slow-bg); border-color: #f2dcaf; color: #8a6100; }
.code-key .fix-them { background: #dc2626; }
.code-key .fix-you { background: var(--accent); }
.code-key .fix-either { background: var(--slow); }

.family-badge { display: inline-flex; align-items: center; padding: .1rem .4rem; border-radius: 5px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; }
.family-2xx { background: var(--up-bg); color: #147a41; }
.family-3xx { background: var(--accent-soft); color: var(--accent-dk); }
.family-4xx { background: var(--slow-bg); color: #8a6100; }
.family-5xx { background: var(--down-bg); color: #a32424; }

.code-table .code-num { display: inline-block; min-width: 2.6rem; padding: .12rem .35rem; border-radius: 5px; font-family: var(--mono); font-size: .8rem; font-weight: 700; text-align: center; }
.code-num.code-2xx { background: var(--up-bg); color: #147a41; }
.code-num.code-3xx { background: var(--accent-soft); color: var(--accent-dk); }
.code-num.code-4xx { background: var(--slow-bg); color: #8a6100; }
.code-num.code-5xx { background: var(--down-bg); color: #a32424; }
.nowrap { white-space: nowrap; }

/* --------------------------------------------------- request timeline */
/* The proportion is the point: 900ms of server time and 900ms of DNS are
   different problems with different owners. */
.timeline { margin-top: 1.2rem; }
.timeline-bar { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.08); }
.timeline-bar .seg { display: block; height: 100%; }
.seg-dns    { background: #6366f1; }
.seg-tcp    { background: #0ea5e9; }
.seg-server { background: #14b8a6; }
.timeline-key { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; list-style: none; margin: .6rem 0 0; padding: 0; font-size: .76rem; color: var(--text-2); }
.timeline-key li { display: flex; align-items: center; gap: .4rem; }
.timeline-key .swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.timeline-key strong { font-variant-numeric: tabular-nums; }
.timeline-total { margin-left: auto; color: var(--text); }

.stage-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: .45rem; vertical-align: 1px; }
.mini-bar { display: inline-block; width: 52px; height: 7px; border-radius: 4px; background: var(--line-2); overflow: hidden; vertical-align: middle; margin-right: .4rem; }
.mini-bar i { display: block; height: 100%; }

/* The checker leads the tools hub: everything else answers a question that
   follows from it. */
.tool-primary { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.35rem; border: 1px solid var(--accent); border-radius: var(--radius-lg); background: var(--accent-soft); color: var(--text); }
.tool-primary:hover { text-decoration: none; border-color: var(--accent-dk); }
.tool-primary .mega-symbol { width: 44px; height: 44px; border-radius: 10px; background: var(--accent); color: #fff; flex: 0 0 auto; }
.tool-primary h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.tool-primary p { margin: .3rem 0 0; font-size: .88rem; color: var(--text-2); }
.tool-primary-tag { padding: .12rem .4rem; border-radius: 5px; background: var(--accent); color: #fff; font-size: .66rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tool-primary-go { margin-left: auto; color: var(--accent-dk); flex: 0 0 auto; }
@media (max-width: 660px) { .tool-primary-go { display: none; } }

/* ------------------------------------------------ the checker landing page */
/* The four stages as a flow, so the explanation is a diagram rather than
   four paragraphs somebody reads while their site is down. */
.pipeline { --pipe-gap: .85rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pipe-gap); list-style: none; margin: 0; padding: 0; counter-reset: pipe; }
.pipe { position: relative; display: flex; flex-direction: column; gap: .2rem; padding: .85rem .9rem; border-radius: 0 0 var(--radius) var(--radius); border: 1px solid var(--line); background: var(--card); }
/* An arrow, not a floating dash: these four stages happen in order, and
   the connector is the only thing on the card that says so. The shaft
   spans the gap exactly, so it meets both cards instead of hanging in
   the space between them. */
.pipe::after { content: ""; position: absolute; top: 50%; right: calc(var(--pipe-gap) * -1); width: var(--pipe-gap); height: 2px; margin-top: -1px; background: var(--line); z-index: 1; }
.pipe::before { content: ""; position: absolute; top: 50%; right: calc(var(--pipe-gap) * -1); width: 5px; height: 5px; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: translateY(-50%) rotate(45deg); z-index: 2; }
.pipe:last-child::after, .pipe:last-child::before { display: none; }
.pipe-step { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 6px; font-size: .7rem; font-weight: 800; color: #fff; }
.pipe strong { font-size: .92rem; }
.pipe-what { font-size: .78rem; color: var(--text-2); }
.pipe-fail { font-size: .72rem; color: var(--muted); margin-top: .2rem; }
.pipe-dns  { border-top: 3px solid #6366f1; } .pipe-dns .pipe-step  { background: #6366f1; }
.pipe-tcp  { border-top: 3px solid #0ea5e9; } .pipe-tcp .pipe-step  { background: #0ea5e9; }
.pipe-tls  { border-top: 3px solid #14b8a6; } .pipe-tls .pipe-step  { background: #14b8a6; }
.pipe-http { border-top: 3px solid #f59e0b; } .pipe-http .pipe-step { background: #f59e0b; }
.seg-tls  { background: #14b8a6; }
.seg-http { background: #f59e0b; }

/* One-click checks for well-known services, coloured by live state. */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: .5rem; }
.quick { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card); color: var(--text); }
.quick:hover { border-color: var(--accent); text-decoration: none; }
.quick .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--unknown); }
.quick-up .dot { background: var(--up); } .quick-slow .dot { background: var(--slow); } .quick-down .dot { background: var(--down); }
.quick-up { border-left: 3px solid var(--up); } .quick-slow { border-left: 3px solid var(--slow); } .quick-down { border-left: 3px solid var(--down); }
.quick-name { font-size: .86rem; font-weight: 650; }
.quick-domain { width: 100%; font-size: .72rem; color: var(--muted); }

/* The two outcomes, side by side, because it is a binary question. */
.split-note { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .8rem; }
.note { padding: .95rem 1.05rem; border-radius: var(--radius); border: 1px solid; }
.note h3 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .35rem; font-size: .92rem; }
.note p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--text-2); }
.note-them { background: var(--down-bg); border-color: #f5c2c2; }
.note-you  { background: var(--accent-soft); border-color: var(--accent); }

@media (max-width: 860px) {
  .pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pipe:nth-child(2)::after, .pipe:nth-child(2)::before { display: none; }
}
@media (max-width: 480px) { .pipeline { grid-template-columns: 1fr; } .pipe::after, .pipe::before { display: none; } }

/* ------------------------------------------------------- the checker hero */
/* The search box is the page, so it gets the hero. Everything explanatory
   sits below it rather than above. */
.check-hero { padding-block: 0 2rem; background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
.check-hero > .crumbs { padding-block: .9rem 0; }
.check-hero > .wrap { padding-block-start: 1.4rem; }
.check-hero h1 { font-size: clamp(1.7rem, 5vw, 2.6rem); max-width: 18ch; }
.check-hero .standfirst { margin: .8rem 0 0; max-width: 64ch; color: var(--text-2); font-size: 1.02rem; }

.check-box { display: flex; align-items: stretch; gap: 0; max-width: 680px; background: var(--card); border: 2px solid var(--accent); border-radius: 12px; overflow: hidden; }
.check-box:focus-within { border-color: var(--accent-dk); box-shadow: 0 0 0 4px var(--accent-soft); }
.check-box-icon { display: flex; align-items: center; padding-left: .9rem; color: var(--muted); flex: 0 0 auto; }
.check-box input { flex: 1; min-width: 0; padding: .95rem .8rem; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 1.02rem; }
.check-box input:focus { outline: 0; }
.check-box input::placeholder { color: #9aa6b5; }
.check-box button { display: flex; align-items: center; gap: .4rem; padding: .95rem 1.4rem; border: 0; background: var(--accent); color: #fff; font: inherit; font-size: .98rem; font-weight: 750; cursor: pointer; white-space: nowrap; }
.check-box button:hover { background: var(--accent-dk); }

.check-trust { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; list-style: none; margin: .9rem 0 0; padding: 0; font-size: .8rem; color: var(--muted); }
.check-trust li { display: flex; align-items: center; gap: .4rem; }
.check-trust .ico { color: var(--accent-dk); }

.check-answer { margin: 1.2rem 0 0; padding: .9rem 1.05rem; border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; background: var(--card); font-size: .9rem; line-height: 1.6; color: var(--text-2); max-width: 78ch; }
.check-answer strong { color: var(--text); }

@media (max-width: 660px) {
  .check-box { flex-wrap: wrap; border-radius: 10px; }
  .check-box input { width: 100%; }
  .check-box button { width: 100%; justify-content: center; }
}

/* ------------------------------------------------------- the sign-in gate */
/* Redacted rows are drawn, never blurred real text: a blurred string is
   still in the page source, and a gate view-source defeats is not a gate. */
.redacted { display: inline-block; width: clamp(80px, 42%, 190px); height: .72em; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line-2) 0 10px, var(--line) 10px 16px); vertical-align: -1px; }
.kv-locked { opacity: .72; }
.kv-locked dt { color: #9aa6b5; }

.lock-cta { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; margin-top: 1rem; padding: .9rem 1rem; border: 1px dashed var(--accent); border-radius: var(--radius); background: var(--accent-soft); }
.lock-mark { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--accent); color: #fff; flex: 0 0 auto; }
.lock-head { margin: 0; font-size: .9rem; font-weight: 700; color: var(--text); }
.lock-sub { margin: .15rem 0 0; font-size: .8rem; color: var(--text-2); max-width: 56ch; }
.lock-cta .btn { margin-left: auto; }
@media (max-width: 660px) { .lock-cta .btn { margin-left: 0; width: 100%; } }

/* The fully locked panel: an impression of the content behind a lock. */
/* The two layers share one grid cell, so the card is as tall as the taller
   of them. Absolute positioning sized the card from the decorative shade
   behind, and the sign-in button fell off the bottom. */
.gate-card { display: grid; overflow: hidden; padding: 0; }
.gate-card > .gate-shade, .gate-card > .gate-front { grid-area: 1 / 1; }
.gate-shade { padding: 1.15rem 1.25rem; filter: blur(3px); opacity: .45; user-select: none; pointer-events: none; overflow: hidden; }
.gate-rows { display: grid; gap: .72rem; }
.gate-row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; align-items: center; }
.gate-label { height: .62em; border-radius: 3px; background: var(--line); }
.gate-value { height: .62em; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--line-2) 0 12px, var(--line) 12px 18px); }

.gate-front { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.8rem 1.4rem; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.82) 0%, var(--card) 38%); }
.gate-lock { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 14px; background: var(--accent); color: #fff; }
.gate-title { margin: .3rem 0 0; font-size: 1.08rem; }
.gate-sub { margin: 0; font-size: .86rem; color: var(--text-2); max-width: 52ch; }
.gate-list { list-style: none; margin: .5rem 0 .3rem; padding: 0; display: grid; gap: .28rem; font-size: .82rem; color: var(--text-2); text-align: left; }
.gate-list li { display: flex; align-items: center; gap: .45rem; }
.gate-list .ico { color: var(--up); flex: 0 0 auto; }
.gate-front .btn { width: 100%; max-width: 330px; }
.gate-front > * { max-width: 100%; }
.gate-note { margin: .3rem 0 0; font-size: .76rem; color: var(--muted); }

@media (max-width: 660px) {
  .gate-front { background: var(--card); padding: 1.4rem 1.1rem; }
  .gate-shade { display: none; }
}

/* ------------------------------------------------------------ sign-in page */
.auth-hero { background: linear-gradient(180deg, var(--accent-soft) 0%, var(--bg) 340px); min-height: 70vh; padding-block: 0 3rem; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1.5rem; align-items: start; padding-block-start: 1.6rem; }
.auth-card { padding: 2rem 2.1rem 1.8rem; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--card); }
.auth-mark { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 15px; background: var(--accent); color: #fff; }
.auth-card h1 { margin: .9rem 0 0; font-size: clamp(1.45rem, 3.6vw, 1.95rem); max-width: 20ch; }
.auth-sub { margin: .6rem 0 1.3rem; font-size: .96rem; color: var(--text-2); max-width: 56ch; }
.auth-google { display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: 1rem; padding-block: .85rem; }
.g-mark { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 800; font-size: .85rem; flex: 0 0 auto; }
.auth-note { margin: .6rem 0 0; font-size: .78rem; color: var(--muted); text-align: center; }

.auth-split { display: flex; align-items: center; gap: .8rem; margin: 1.6rem 0 1.1rem; color: var(--muted); font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.auth-split::before, .auth-split::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.auth-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: .85rem; }
.auth-perks li { display: flex; gap: .7rem; align-items: flex-start; }
.perk-ico { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-dk); flex: 0 0 auto; }
.auth-perks strong { display: block; font-size: .89rem; }
.auth-perks div { font-size: .82rem; line-height: 1.55; color: var(--text-2); }

.auth-side { display: grid; gap: 1rem; }
.kv-tight > div { padding-block: .45rem; grid-template-columns: 8.5rem 1fr; }
.kv-tight dd { font-size: .82rem; font-weight: 450; }

@media (max-width: 960px) {
  .auth-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 1.5rem 1.35rem; }
}

/* "Measured N minutes ago" under a cached verdict. */
.verdict-age { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; margin: .6rem 0 0; font-size: .78rem; color: var(--muted); }
.verdict-age .ico { flex: 0 0 auto; }

/* ------------------------------------------------------------------ hints */
/* Focusable, so a keyboard reaches it, and the text lives in the DOM rather
   than a title attribute so assistive tech and touch users get it too. */
.hint { position: relative; display: inline-flex; align-items: center; margin-left: .3rem; color: #9aa6b5; cursor: help; vertical-align: -1px; }
.hint:hover, .hint:focus, .hint:focus-visible { color: var(--accent-dk); outline: none; }
.hint-bubble {
  position: absolute; left: 50%; bottom: calc(100% + 8px); z-index: 60;
  width: max-content; max-width: 260px; padding: .5rem .65rem;
  transform: translateX(-50%) translateY(2px);
  border-radius: 7px; background: var(--ink-solid, #0f1d2e); color: #e6edf5;
  font-size: .76rem; font-weight: 500; line-height: 1.45; text-align: left;
  text-transform: none; letter-spacing: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
  box-shadow: 0 10px 28px rgba(2,8,18,.28);
}
.hint-bubble::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: var(--ink-solid, #0f1d2e); }
/* `:focus` as well as `:focus-visible`. A tap gives the icon focus but
   deliberately does not match :focus-visible, and touch has no hover, so
   with only those two selectors every one of these was impossible to
   open on a phone. */
.hint:hover .hint-bubble, .hint:focus .hint-bubble, .hint:focus-visible .hint-bubble { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); transition-delay: 0s; }
/* Near the right edge a centred bubble would overflow the card. */
.kv > div:first-child .hint-bubble { bottom: auto; top: calc(100% + 8px); }
.kv > div:first-child .hint-bubble::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--ink-solid, #0f1d2e); }

/* ------------------------------------------------------- search suggest */
.nav-search { position: relative; }
.suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 220; max-height: 60vh; overflow-y: auto; padding: .35rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 20px 48px rgba(2,8,18,.16); }
.suggest-head { margin: .3rem .5rem .25rem; font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.suggest-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .55rem; border-radius: 7px; color: var(--text); font-size: .86rem; }
.suggest-item:hover, .suggest-item.is-active { background: var(--accent-soft); text-decoration: none; }
.suggest-name { font-weight: 650; }
.suggest-domain { margin-left: auto; color: var(--muted); font-size: .74rem; }
.suggest-check .suggest-name { color: var(--accent-dk); }
.suggest-empty { margin: .5rem; font-size: .8rem; color: var(--muted); }

.suggest-inline { display: flex; flex-wrap: wrap; gap: .5rem; }
.suggest-chip { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-size: .86rem; font-weight: 650; color: var(--text); }
.suggest-chip:hover { border-color: var(--accent); text-decoration: none; }
.suggest-chip .mono { color: var(--muted); font-weight: 400; }

/* ------------------------------------------------------------------ share */
.share-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.share-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.share-copy.is-copied { background: var(--up); }
.share-embed summary { cursor: pointer; }
.share-embed summary h3 { display: inline; font-size: .88rem; }
.embed-field { width: 100%; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text-2); font-family: var(--mono); font-size: .76rem; }
.embed-field:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* iOS Safari zooms the page when a focused input is smaller than 16px and
   never zooms back, which is the whole of "the field is not mobile
   optimised". These are the fields a phone can reach; the desktop nav
   search is not one of them. */
@media (max-width: 1080px) {
  .mobile-search input, .report-where select, .report-where input,
  .check-box input, .field input, .field select { font-size: 16px; }
}

/* ------------------------------------------------- floating quick access */
/* Sits below the mobile drawer (190) so an open menu covers it, and below
   the toast (400) so a message is never hidden behind it. */
.quick-access {
  position: fixed; z-index: 180;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end;
}
.quick-access-toggle {
  position: relative; display: grid; place-items: center;
  width: 52px; height: 52px; aspect-ratio: 1; padding: 0;
  border: 1px solid var(--accent-dk); border-radius: 50%;
  background: var(--accent); color: #062029; cursor: pointer;
  box-shadow: 0 10px 28px rgba(2, 8, 18, .22);
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.quick-access-toggle:hover, .quick-access-toggle:focus-visible {
  background: #2fd4e8; transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(2, 8, 18, .26);
}
.quick-access-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.quick-access.is-open .quick-access-toggle {
  background: var(--ink); color: #fff; border-color: var(--ink-line);
}
/* The count of what is down, on the closed button. Red because it only
   ever appears when something is actually wrong. */
.quick-access-badge {
  position: absolute; top: -3px; right: -3px;
  min-width: 21px; height: 21px; padding: 0 5px;
  display: grid; place-items: center;
  border-radius: 999px; border: 2px solid var(--bg);
  background: var(--down); color: #fff;
  font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums;
}
.quick-access-panel {
  position: absolute; right: 0; bottom: 66px;
  width: min(330px, calc(100vw - 36px));
  max-height: calc(100dvh - 120px); overflow-y: auto;
  border: 1px solid var(--ink-line); border-radius: 16px;
  background: var(--ink); color: var(--ink-text);
  box-shadow: 0 22px 58px rgba(2, 8, 18, .34);
  animation: quick-access-in .18s ease both;
}
.quick-access-panel[hidden] { display: none; }
@keyframes quick-access-in { from { opacity: 0; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) {
  .quick-access-panel { animation: none; }
  .quick-access-toggle { transition: none; }
}
.quick-access-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.05rem .8rem; border-bottom: 1px solid var(--ink-line);
}
.quick-access-head span {
  display: block; margin-bottom: .2rem; color: var(--accent);
  font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.quick-access-head strong { display: block; font-size: 1rem; letter-spacing: -.01em; }
.quick-access-head button {
  flex: 0 0 38px; width: 38px; height: 38px; aspect-ratio: 1;
  display: grid; place-items: center; padding: 0;
  border: 1px solid var(--ink-line); border-radius: 50%;
  background: rgba(255,255,255,.05); color: var(--ink-muted);
  font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.quick-access-head button:hover { background: rgba(255,255,255,.1); color: #fff; }

.quick-access-live {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .7rem;
  margin: .8rem; padding: .8rem .9rem;
  border: 1px solid var(--ink-line); border-radius: 12px;
  background: rgba(255,255,255,.04); color: #fff;
}
.quick-access-live:hover { border-color: var(--accent); text-decoration: none; color: #fff; }
.quick-access-live.active { border-color: var(--accent); }
.quick-access-live > span {
  display: flex; align-items: center; gap: .45rem;
  color: var(--ink-muted); font-size: .64rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
}
.quick-access-live > span i { display: inline-grid; place-items: center; color: var(--down); }
.quick-access-live > strong {
  align-self: center; color: var(--accent);
  font-size: 1.15rem; font-variant-numeric: tabular-nums;
}
.quick-access-live > small {
  grid-column: 1 / -1; display: flex; justify-content: space-between;
  color: var(--ink-muted); font-size: .68rem;
}
.quick-access-live > small b { color: var(--accent); }

.quick-access-links { padding: 0 .55rem .7rem; }
.quick-access-links a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center;
  gap: .6rem; min-height: 52px; padding: .45rem .55rem;
  border-radius: 10px; color: var(--ink-text);
}
.quick-access-links a:hover { background: rgba(255,255,255,.07); color: #fff; text-decoration: none; }
.quick-access-links a.active { background: rgba(23,195,217,.14); color: var(--accent); }
.quick-access-links svg { width: 20px; height: 20px; }
.quick-access-links b { display: block; font-size: .82rem; font-weight: 700; }
.quick-access-links small { display: block; margin-top: .1rem; color: var(--ink-muted); font-size: .68rem; line-height: 1.3; }

/* An open drawer owns the screen; two floating layers at once is noise. */
body.menu-open .quick-access { opacity: 0; pointer-events: none; }
@media print { .quick-access { display: none; } }


/* ======================================================================
   Phone layout. Rules that need to come last, because a media query in
   the middle of a stylesheet loses to any later rule of equal specificity.
   ====================================================================== */

@media (max-width: 720px) {

  /* --- wide tables become cards ---------------------------------------
     Five columns cannot fit 358px, and a horizontal scrollbar is not a
     layout. Each row becomes a card, each cell captioned with the column
     heading it no longer sits under. The roles in the markup keep it a
     table for a screen reader once display stops being table. */
  .stacks { display: block; }
  .stacks thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .stacks tbody, .stacks tr, .stacks th, .stacks td { display: block; }
  .stacks tbody tr { margin-bottom: .55rem; padding: .35rem 0 .6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
  .stacks tbody tr:last-child { margin-bottom: 0; }
  .stacks tbody tr:hover { background: var(--card); }
  .stacks th, .stacks td { padding: .3rem .85rem; border-bottom: 0; white-space: normal; }
  .stacks tbody th { padding-top: .5rem; font-size: 1rem; }
  .stacks td.num { text-align: left; }
  .stacks td.wrap-cell { min-width: 0; }
  .stacks td[data-label]::before {
    content: attr(data-label); display: block; margin-bottom: .05rem;
    color: var(--muted); font-size: .63rem; font-weight: 800;
    letter-spacing: .06em; text-transform: uppercase;
  }
  /* The wrapper's scroll, border and background belonged to a table that
     is no longer a table. */
  .table-wrap:has(.stacks) { overflow-x: visible; border: 0; background: transparent; border-radius: 0; }

  /* --- tooltips ---------------------------------------------------------
     A 260px bubble centred on an icon overflows the screen whenever the
     icon is near either edge, and on a phone most of them are. Anchored to
     the viewport instead, it always fits and is far easier to read. */
  .hint-bubble, .kv > div:first-child .hint-bubble {
    position: fixed; left: 16px; right: 16px; top: auto;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: auto; max-width: none; transform: none; z-index: 400;
    padding: .8rem .95rem; font-size: .85rem;
  }
  .hint-bubble::after, .kv > div:first-child .hint-bubble::after { display: none; }
  .hint:hover .hint-bubble, .hint:focus .hint-bubble, .hint:focus-visible .hint-bubble { transform: none; }

  /* --- label/value rows stack ------------------------------------------
     A 9rem label column is 40% of the screen. `.kv-tight` is here because
     it is defined after the 660px block and was quietly winning against
     it on source order. */
  .gate-row, .kv-tight > div { grid-template-columns: 1fr; gap: .2rem; }

  /* --- tap targets ------------------------------------------------------
     These chips are links now, and a 20px-tall one is below the 24px
     minimum target size. */
  .chip-row { gap: .45rem; }
  .chip-row .tag { padding: .5rem .7rem; font-size: .78rem; }
  .gate-label { font-size: .7rem; }
}

/* The live "n down" counter is rendered as "-" and replaced by a number
   once the summary fetch returns. Without a reserved box the nav reflows
   the moment it lands, which is a layout shift on every page load. Two
   tabular digits is the width it will almost always be. */
[data-live-down] { display: inline-block; min-width: 1.2ch; text-align: center; font-variant-numeric: tabular-nums; }