/* ==========================================================================
   isitdownrightnow.app · "Geist" skin
   Loaded AFTER /assets/road/site.css (see parts/road/head.php). It only
   overrides tokens and the road-specific layer, so every page keeps its PHP
   and markup. Remove the <link> to go back to the road look.
   ========================================================================== */

@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/geist-latin-ext-66a33f6a.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/geist-latin-9d846db8.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/geist-mono-latin-ext-fbd56f5f.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/geist-mono-latin-0e04bb6e.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens: dark (default) ---------- */
:root {
  --bg: oklch(0.165 0.004 70);
  --surface: oklch(0.2 0.005 70);
  --surface-2: oklch(0.245 0.005 70);
  --line: oklch(0.285 0.005 70);
  --line-2: oklch(0.36 0.006 70);
  --line-3: oklch(0.45 0.006 70);
  --text: oklch(0.955 0.004 85);
  --text-2: oklch(0.8 0.006 80);
  --text-3: oklch(0.67 0.008 75);
  --accent: oklch(0.76 0.11 250);
  --bar: oklch(0.45 0.006 70);
  --ok: oklch(0.76 0.15 150);   --ok-tint: oklch(0.76 0.15 150 / .14);
  --warn: oklch(0.8 0.14 75);   --warn-tint: oklch(0.8 0.14 75 / .14);
  --bad: oklch(0.7 0.18 27);    --bad-tint: oklch(0.7 0.18 27 / .16);
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sign-font: var(--font);
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --code: var(--mono);
  --fs-answer: clamp(2.5rem, 1.2rem + 4.6vw, 4.75rem);
  --r-lg: 16px; --r-md: 12px; --r-sm: 10px;
  --maxw: 1240px;
  --header-h: 60px;
  /* the road vocabulary, mapped onto the status colours */
  --sign: var(--surface); --sign-2: var(--surface-2);
  --asphalt: var(--bg);
  --led: var(--warn);
  --flow: var(--bar); --slow: var(--warn); --jam: var(--bad);
  --st-led: var(--ok);
  --slow-mark: var(--warn);
  --theme-color: #24221f;
}
[data-theme="light"] {
  --bg: oklch(0.975 0.004 85);
  --surface: oklch(0.995 0.002 85);
  --surface-2: oklch(0.945 0.005 85);
  --line: oklch(0.89 0.006 80);
  --line-2: oklch(0.82 0.008 80);
  --line-3: oklch(0.72 0.008 80);
  --text: oklch(0.2 0.006 70);
  --text-2: oklch(0.38 0.008 70);
  --text-3: oklch(0.5 0.01 70);
  --accent: oklch(0.5 0.15 250);
  --bar: oklch(0.8 0.008 80);
  --ok: oklch(0.5 0.13 150);   --ok-tint: oklch(0.5 0.13 150 / .12);
  --warn: oklch(0.55 0.12 65); --warn-tint: oklch(0.7 0.14 75 / .2);
  --bad: oklch(0.53 0.19 27);  --bad-tint: oklch(0.53 0.19 27 / .1);
  --slow-mark: var(--warn);
}
[data-status="warning"] { --st-led: var(--warn); }
[data-status="danger"]  { --st-led: var(--bad); }

body { font-family: var(--font); -webkit-font-smoothing: antialiased; }

/* ---------- header and footer: neutral, no sign-blue rule ---------- */
.site-header { background: var(--bg); border-bottom: 1px solid var(--line); }
.brand { color: var(--text); font-family: var(--font); font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.brand b { color: var(--text-3); font-weight: 500; }
.brand-mark { width: 24px; height: 24px; border-radius: 6px; background: var(--text); color: var(--bg); box-shadow: none; }
.site-header .icon-btn { border-color: var(--line-2); color: var(--text-2); }
.site-header .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--line-3); }
.site-header .brand, .hdr-nav, .site-header .icon-btn, .site-footer, .sign, .skip { --accent: oklch(0.76 0.11 250); }
[data-theme="light"] .site-header .brand, [data-theme="light"] .hdr-nav, [data-theme="light"] .site-footer, [data-theme="light"] .sign { --accent: oklch(0.5 0.15 250); }
.hdr-nav a { font-family: var(--font); font-size: 14.5px; font-weight: 500; color: var(--text-2); }
.hdr-nav a:hover { color: var(--text); background: var(--surface-2); }
.site-footer { margin-top: 120px; background: var(--bg); border-top: 1px solid var(--line); color: var(--text-3); }
.site-footer .brand { color: var(--text); }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--text); }

/* ---------- type ---------- */
.sec-title, .panel-title, .doc-title, .home-title, .card-title, .answer { font-family: var(--font); }
.sec-title { font-size: clamp(1.625rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; }
.doc-title, .home-title { font-weight: 700; letter-spacing: -.05em; line-height: .96; }
.eyebrow {
  padding: 16px 0 0; margin-bottom: 18px; width: 100%;
  border-top: 1px solid var(--line-2); border-radius: 0; background: none; box-shadow: none;
  font: 500 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3);
}
.eyebrow .ico { color: var(--text); }

/* ---------- service hero: status-coloured field, plain sign, mono status line ---------- */
.hero {
  border-radius: 20px; border-color: transparent;
  background: radial-gradient(1100px 460px at 0% 0%, var(--st-tint), transparent 64%), var(--surface);
}
.hero::before { display: none; }
.sign { background: none; border-radius: 0; padding: 0; box-shadow: none; }
.sign .svc-name { color: var(--text); font-family: var(--font); font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem); font-weight: 600; letter-spacing: -.02em; }
.sign .svc-logo { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.sign .svc-domain { color: var(--text-3); font-family: var(--mono); font-size: 12.5px; }
.sign .svc-domain:hover { color: var(--text); }
.sign .hero-q { margin-top: 18px; color: var(--text-2); font-weight: 500; }
.sign .hero-q span { color: var(--text-3); }
.vms {
  display: inline-flex; width: auto; margin-top: 18px; padding: 0 14px 0 12px; height: 30px;
  border-radius: 999px; background: var(--st-tint); box-shadow: none;
  color: var(--st); font: 500 11.5px/1 var(--mono); letter-spacing: .07em;
}
.vms::after { display: none; }
.vms i { width: 8px; height: 8px; background: var(--st); box-shadow: 0 0 0 0 var(--st); animation: geist-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes geist-ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--st) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
.answer { margin-top: 22px; font-weight: 700; letter-spacing: -.05em; line-height: .98; }
.answer::before { display: none; }
.answer { padding-left: 0; }
.answer-dot { display: none; }   /* the tinted card and the pill carry the status; the dot overlapped the first letter */
@media (max-width: 480px) { .vms { height: auto; padding: 7px 12px; line-height: 1.4; letter-spacing: .04em; } }

/* ---------- the 24-hour strip ---------- */
.road .seg.s2 { stroke: none; }
.road .lane { stroke: var(--bg); stroke-opacity: .5; }
.road figcaption .k2::before { box-shadow: none; }

/* ---------- controls ---------- */
.btn { font-family: var(--font); font-size: 15.5px; font-weight: 600; border-radius: 999px; }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
/* road paints these with --sign and white text, and this skin turns --sign into the surface colour */
[data-theme="light"] .btn-primary { background: var(--text); color: var(--bg); }
[data-theme="light"] .btn-primary:hover { background: color-mix(in srgb, var(--text) 86%, var(--bg)); }
.bo-rank { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.ck-hero .svc-logo { color: var(--text); }
.pill { font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; border-radius: 6px; }
.panel { border-radius: var(--r-lg); }
.card, .tile { border-radius: var(--r-md); }
input[type="search"] { font-family: var(--font); }
code, kbd, .mono { font-family: var(--mono); }

@media (prefers-reduced-motion: reduce) { .vms i { animation: none; } }

/* ==========================================================================
   Layout layer: brings the road pages closer to the Geist mock-ups using
   only existing class names (no template edits).
   ========================================================================== */

/* numbered sections: "01 · Troubleshooting" */
main { counter-reset: gsec; }
.sec { counter-increment: gsec; }
.sec > .eyebrow::before { content: counter(gsec, decimal-leading-zero); margin-right: 6px; color: var(--text); font-weight: 600; }
.sec + .sec, .layout .sec ~ .sec { margin-top: clamp(64px, 8vw, 96px); }
.sec-lead { font-size: 1.0625rem; line-height: 1.65; max-width: 62ch; }

/* service hero: bigger verdict, roomier card */
.hero { padding: clamp(24px, 4.5vw, 56px); gap: clamp(24px, 4vw, 48px); }
.answer { font-size: var(--fs-answer); }
.answer.is-long { font-size: calc(var(--fs-answer) * .82); }
.answer.is-xlong { font-size: max(calc(var(--fs-answer) * .7), 1.875rem); }
.live { font: 500 11.5px/1 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.crumbs { font: 400 12px/1.4 var(--mono); }

/* 24 h chart and metrics */
.chart-panel { border-radius: 20px; }
.metric-label { font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.metric-value { font: 500 1.875rem/1.1 var(--mono); letter-spacing: -.04em; }
.metric-name { font-family: var(--font); letter-spacing: -.02em; }
.chart-keys { font-size: 13px; }

/* sidebar */
.side .panel { border-radius: var(--r-lg); }

/* fixes, errors, FAQ */
.step { grid-template-columns: 52px minmax(0, 1fr); }
.step::before, .step > .step-n { font: 500 20px/1.25 var(--mono); color: var(--text-3); }
.err { border-radius: var(--r-md); }
.err-msg { font: 600 17px/1.4 var(--font); letter-spacing: -.01em; }
.kv dt { font: 500 11px/1.4 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.faq summary, .faq .q { font-family: var(--font); font-weight: 600; letter-spacing: -.01em; }

/* home, directory, reports, 404 */
.home-hero { max-width: 980px; }
.home-title { font-size: clamp(2.75rem, 1.4rem + 5.6vw, 6.5rem); }
.home-hero input[type="search"], .dir-hero input[type="search"] { border-radius: 16px; }
.dir-hero .doc-title { font-size: clamp(2.5rem, 1.4rem + 4vw, 4.5rem); }
.nf-code { font-family: var(--mono); }
.tile .metric-value, .tile b { font-family: var(--font); }

@media (max-width: 760px) {
  .sec + .sec, .layout .sec ~ .sec { margin-top: 64px; }
  .metric-value { font-size: 1.5rem; }
}