/* ============================================================
   Uptimia — "Is It Down?" free tool
   Ported from docs/is-it-down-mockup.html <style> block.

   EVERYTHING is scoped under the root wrapper `.iid` so it can
   never collide with homepage-v30.css / tools.css (both also
   loaded on the page). The mockup's :root custom properties live
   on `.iid` instead of :root; generic @keyframes (pulse/rot) are
   renamed iid-pulse / iid-rot. The mockup's own site chrome
   (.topbar / .nav / .dock / .foot / footer) is intentionally
   dropped — the real page provides top_menu + footer.
   Fonts are NOT imported here; the site already loads them and we
   rely on the mockup's font-family stacks.
   ============================================================ */

/* scoped reset */
.iid,
.iid *,
.iid *::before,
.iid *::after{box-sizing:border-box}
.iid *,
.iid *::before,
.iid *::after{margin:0;padding:0}

/* ---- theme tokens (scoped, not on :root) + base typography ---- */
.iid{
  /* verbatim from www.uptimia.com :root */

  font-family:var(--sans);
  background:var(--bg-2);
  color:var(--ink);
  font-size:15px;line-height:1.55;font-weight:450;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-feature-settings:'cv11','ss01','ss03','tnum';
  --permalink-w:300px;                 /* Step 7c: fleet default is 360px */
}
.iid a{color:inherit;text-decoration:none}
.iid button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
.iid input{font:inherit;color:inherit}
.iid svg{display:block}
.iid .wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.iid .mono{font-family:var(--mono)}
.iid .micro{font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--soft)}

/* shared CTA button (used in hero, checking banner, verdict + capture) */

/* view toggling (#iid-landing / #iid-checking / #iid-result) */
.iid .view{display:none}
.iid .view.on{display:block}

/* ============================================================
   HERO (dark)
   ============================================================ */
.iid .hero-sub{max-width:620px}

.iid .testbar{
  max-width:680px;margin:34px auto 0;
  display:flex;align-items:stretch;gap:0;
  background:#fff;border-radius:12px;padding:6px;
  box-shadow:0 1px 0 rgba(255,255,255,.06), 0 24px 60px -24px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.iid .testbar .field{flex:1;display:flex;align-items:center;gap:11px;padding:0 8px 0 14px;min-width:0}
.iid .testbar .field svg{color:var(--soft);flex:none}
.iid .testbar input{flex:1;border:0;outline:0;background:none;min-width:0;font-size:16.5px;font-weight:450;color:var(--ink);height:48px}
.iid .testbar input::placeholder{color:var(--soft)}
.iid .testbar .btn-run{
  display:inline-flex;align-items:center;gap:8px;padding:0 22px;border-radius:8px;
  background:var(--cta);color:var(--cta-ink);font-size:15px;font-weight:650;letter-spacing:-.01em;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), 0 6px 18px -6px rgba(78,201,126,.55);
  transition:filter .15s,transform .1s;
}
.iid .testbar .btn-run:hover{filter:brightness(1.05)}
.iid .testbar .btn-run:active{transform:scale(.99)}

/* ============================================================
   Light sections
   ============================================================ */
.iid .sec{padding:72px 0 0}
.iid .sec:last-child{padding-bottom:72px}
.iid .sec-head{max-width:640px;margin:0 0 34px}
.iid .sec-head.center{margin:0 auto 38px;text-align:center}
.iid .sec-head .micro{display:block;margin-bottom:12px;color:var(--accent)}
.iid .sec-head h2{font-size:31px;line-height:1.15;font-weight:700;letter-spacing:-.022em;color:var(--ink)}
.iid .sec-head p{margin-top:12px;font-size:15.5px;color:var(--muted)}

/* most-checked board */
.iid .board-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;align-items:start}
.iid .board{padding:0;overflow:hidden}
.iid .board-head{padding:15px 20px 12px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.iid .board-head .live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)}
.iid .board-head .live i{width:6px;height:6px;border-radius:50%;background:var(--accent-bright);animation:tool-pulse 2.2s infinite}
.iid .brow{display:flex;align-items:center;gap:12px;padding:11px 20px;border-bottom:1px solid var(--bg-3);font-size:13.5px}
.iid .brow:last-child{border-bottom:0}
.iid .brow .rank{font-family:var(--mono);font-size:11px;color:var(--soft);width:18px}
.iid .brow .site{flex:1;font-weight:550;color:var(--ink-2);font-family:var(--mono);font-size:13px}
.iid .brow .checks{font-family:var(--mono);font-size:11.5px;color:var(--soft);white-space:nowrap}

/* explainer duo */

/* troubleshooting ladder */
.iid .ladder{max-width:820px;margin:0 auto;display:grid;gap:10px;counter-reset:lstep}
.iid .lstep{
  display:flex;gap:15px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 18px;
}
.iid .lstep::before{
  counter-increment:lstep;content:counter(lstep);
  flex:none;width:26px;height:26px;border-radius:50%;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);
  font-family:var(--mono);font-size:12.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;margin-top:1px;
}
.iid .lstep b{display:block;font-size:14.5px;font-weight:650;letter-spacing:-.01em;color:var(--ink-2)}
.iid .lstep p{margin-top:3px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.iid .cmd{
  display:inline-flex;align-items:center;gap:8px;margin:7px 8px 0 0;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-3);
  background:var(--bg-3);border:1px solid var(--line-2);border-radius:7px;padding:5px 10px;
}
.iid .cmd .os{color:var(--soft);font-size:10px;text-transform:uppercase;letter-spacing:.06em}
.iid .cmd button{color:var(--accent);font-weight:600;font-size:11px}

/* reddit quote */
.iid .quote-card{
  max-width:820px;margin:0 auto;padding:26px 30px;
  border:1px dashed var(--line-2);border-radius:var(--radius);background:var(--bg);
  display:flex;gap:18px;align-items:flex-start;
}
.iid .quote-card .qmark{font-family:var(--serif);font-size:46px;line-height:1;color:var(--accent);flex:none;margin-top:-4px}
.iid .quote-card blockquote{font-family:var(--serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink-2)}
.iid .quote-card .attr{margin-top:8px;font-family:var(--mono);font-size:11.5px;color:var(--soft)}
.iid .quote-card .note{margin-top:10px;font-size:13.5px;color:var(--muted)}

/* FAQ */
.iid .faq{max-width:760px;margin:0 auto}
.iid .faq-item{border-bottom:1px solid var(--line)}
.iid .faq-item:first-child{border-top:1px solid var(--line)}
.iid .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;text-align:left;font-size:15.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2)}
.iid .faq-q .pm{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line-2);display:flex;align-items:center;justify-content:center;color:var(--soft);font-size:14px;transition:transform .18s var(--ease)}
.iid .faq-item.open .pm{transform:rotate(45deg);color:var(--accent);border-color:var(--accent-line);background:var(--accent-soft)}
/* The open state animates grid-template-rows, NOT a fixed max-height. The 240px
   cap this used to carry silently swallowed the tail of any answer that wrapped
   past ~9 lines: measured 2026-08-01 in headless Chrome against the served page,
   three answers were cut at 320px (65px / 17px / 17px lost) and one at 360px,
   with overflow:hidden and no scrollbar, so the text was simply gone. 0fr -> 1fr
   resolves to the real content height, so no copy length can ever clip. Browsers
   too old to interpolate to 1fr just snap open instead of easing — the content
   still shows. Do NOT reintroduce a pixel cap here. */
.iid .faq-a{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .25s var(--ease)}
/* The closing gap is a pseudo-element, NOT padding-bottom. A border-box element
   can never shrink below its own padding, so an 18px padding-bottom kept an 18px
   ghost row visible under every CLOSED question once the collapse moved from
   max-height to grid rows. Inside the p it is content, so overflow:hidden eats it. */
.iid .faq-a p{min-height:0;overflow:hidden;padding:0 40px 0 2px;font-size:14.5px;line-height:1.65;color:var(--muted)}
.iid .faq-a p::after{content:'';display:block;height:18px}
.iid .faq-item.open .faq-a{grid-template-rows:1fr}

/* other tools */
.iid .tools-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.iid .tool-link{display:flex;flex-direction:column;gap:5px;padding:17px 18px 15px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);transition:border-color .15s, box-shadow .15s}
.iid .tool-link:hover{border-color:var(--accent-line);box-shadow:0 8px 24px -14px rgba(15,23,42,.18)}
.iid .tool-link b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);display:flex;align-items:center;gap:7px}
.iid .tool-link b svg{color:var(--accent)}
.iid .tool-link span{font-size:12.5px;color:var(--soft)}
.iid .tool-link.featured{border-color:var(--accent-line);background:linear-gradient(180deg,#fff,var(--accent-soft))}


/* ============================================================
   CHECKING view
   ============================================================ */
.iid .runhead{background:var(--dark);color:var(--dark-ink);position:relative;overflow:hidden}
.iid .runhead::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 700px 300px at 50% 130%, rgba(78,201,126,.10), transparent 60%);pointer-events:none}
.iid .runhead-in{max-width:1120px;margin:0 auto;padding:30px 24px 26px;position:relative}
.iid .runrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.iid .urlchip{display:inline-flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);border:1px solid var(--dark-line-2);border-radius:10px;padding:9px 14px;font-family:var(--mono);font-size:14px;color:#fff}
.iid .urlchip .fav{width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#8f7ee8,#5a4fb8);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;font-family:var(--sans)}
/* Real favicon of the tested site (loaded into a .fav box; falls back to the initial). */
.iid .urlchip .fav img{width:16px;height:16px;object-fit:contain;border-radius:3px;display:block}
.iid .crumb .fav img{width:14px;height:14px;object-fit:contain;border-radius:3px;display:block}
.iid .urlchip .fav[data-favicon],.iid .crumb .fav[data-favicon]{background:#fff}
.iid .crumb .fav{width:16px;height:16px;border-radius:4px;background:linear-gradient(135deg,#8f7ee8,#5a4fb8);display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:#fff;font-family:var(--sans);flex:none}
.iid .runrow .spacer{flex:1}
.iid .run-status{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;color:var(--dark-muted)}
.iid .pbar i{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-bright))}
.iid .check-banner{
  margin-top:16px;display:none;align-items:center;gap:10px;
  border:1px solid rgba(255,122,104,.38);background:rgba(255,122,104,.10);
  border-radius:var(--radius-sm);padding:11px 16px;font-size:14px;color:#ffd9d3;
}
.iid .check-banner svg{color:var(--bad-bright);flex:none}

/* region grid (shared: checking + results). 4 columns — the fleet has 4 regions;
   the mockup's repeat(5,1fr) left a permanently empty fifth track. */
.iid .region-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.iid .rg{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:13px 14px 12px;position:relative;transition:border-color .2s;
}
.iid .rg .rname{font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.iid .rg .rctry{font-size:11px;color:var(--soft);margin-top:1px}
.iid .rg .rstat{display:flex;align-items:center;gap:7px;margin-top:9px;font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.iid .rg .rstat i{width:8px;height:8px;border-radius:50%;flex:none}
.iid .rg.wait .rstat i{background:var(--line-3);animation:tool-pulse 1.4s infinite}
.iid .rg.wait .rstat span{color:var(--soft)}
.iid .rg.up .rstat i{background:var(--cta)}
.iid .rg.down{border-color:var(--bad-line);background:linear-gradient(180deg,#fff,var(--bad-soft))}
.iid .rg.down .rstat i{background:var(--bad)}
.iid .rg.down .rstat span{color:var(--bad);font-weight:550}
.iid .rg .rping{position:absolute;top:12px;right:13px;font-family:var(--mono);font-size:11px;color:var(--soft)}

/* checking zone */
.iid .live-zone{padding:34px 0 0}
.iid .pad-card .card-title{gap:normal}
.iid .note-mono{font-family:var(--mono);font-size:12px;color:var(--soft)}

/* ============================================================
   VERDICT views
   ============================================================ */
.iid .verdict-zone.bad-mode::before{background:radial-gradient(ellipse 760px 360px at 18% 145%, rgba(192,56,43,.18), transparent 62%)}
.iid .verdict-line{max-width:62ch}

/* results body */

/* 24h history strip */
.iid .hist-strip{display:flex;gap:3px;align-items:flex-end;height:44px}
.iid .hist-strip i{flex:1;border-radius:2px;background:var(--cta);opacity:.85;min-width:3px}
.iid .hist-strip i.warn{background:var(--amber)}
.iid .hist-strip i.down{background:var(--bad)}
.iid .hist-meta{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--soft);margin-top:8px}

/* capture cards */
.iid .capture.danger{border-color:var(--bad-line);background:linear-gradient(180deg,#fff,var(--bad-soft));box-shadow:0 1px 2px rgba(15,23,42,.04), 0 16px 40px -22px rgba(192,56,43,.28)}
.iid .capture h3 em{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--bad)}
.iid .cap-form .btn-bad{
  display:inline-flex;align-items:center;gap:7px;padding:0 16px;border-radius:8px;
  background:var(--bad);color:#fff;font-size:13.5px;font-weight:650;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.15);transition:filter .15s;
}
.iid .cap-form .btn-bad:hover{filter:brightness(1.08)}
.iid .owner-line{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--bad-line);
  font-size:13px;color:var(--muted);
}
.iid .owner-line b{color:var(--ink-2)}
.iid .owner-line a{color:var(--accent);font-weight:600}

/* interactive ladder (justyou view) */
.iid .mini-ladder{display:grid;gap:8px}
.iid .ml-item{display:flex;gap:11px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 13px;background:var(--bg);cursor:pointer;transition:border-color .15s}
.iid .ml-item:hover{border-color:var(--accent-line)}
.iid .ml-item .box{flex:none;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--line-3);margin-top:1px;display:flex;align-items:center;justify-content:center;color:#fff;transition:background .15s,border-color .15s}
.iid .ml-item.done .box{background:var(--accent);border-color:var(--accent)}
.iid .ml-item b{display:block;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.iid .ml-item.done b{text-decoration:line-through;color:var(--soft)}
.iid .ml-item p{font-size:12.5px;color:var(--muted);margin-top:1px}
.iid .ml-item .k{font-family:var(--mono);font-size:11px;background:var(--bg-3);border:1px solid var(--line-2);border-radius:5px;padding:1px 6px;color:var(--ink-3)}

/* share / badge */
.iid .badge-demo .badge-code{flex:1 1 180px}
/* is-it-down alone never had white-space:nowrap here; the hoisted .tool .upt-badge does. */
.iid .upt-badge{white-space:normal}
.iid .badge-code{flex:1}

/* deep-test cross-sell */
.iid .deep-link{
  display:flex;align-items:center;gap:14px;padding:16px 18px;
  border:1px solid var(--accent-line);border-radius:var(--radius-sm);
  background:linear-gradient(180deg,#fff,var(--accent-soft));transition:box-shadow .15s;
}
.iid .deep-link:hover{box-shadow:0 10px 26px -16px rgba(0,126,66,.35)}
.iid .deep-link .glyph{flex:none;width:36px;height:36px;border-radius:9px;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);display:flex;align-items:center;justify-content:center}
.iid .deep-link b{display:block;font-size:13.5px;font-weight:650;color:var(--ink-2)}
.iid .deep-link span{font-size:12px;color:var(--muted)}
.iid .deep-link svg.arr{margin-left:auto;color:var(--accent);flex:none}

/* bottom spacing used inside the views */
.iid .foot-pad{height:74px}

/* ============================================================
   responsive
   ============================================================ */
@media (max-width:960px){
    .iid .board-grid,.iid .res-grid{grid-template-columns:1fr}
  .iid .region-grid{grid-template-columns:repeat(3,1fr)}
  .iid .tools-row{grid-template-columns:1fr 1fr}
        }
@media (max-width:620px){
    .iid .testbar{flex-direction:column;gap:6px}
  .iid .testbar .btn-run{height:46px;justify-content:center}
  .iid .region-grid{grid-template-columns:1fr 1fr}
  .iid .tools-row{grid-template-columns:1fr}
}

/* notify-capture inline error (rendered by is-it-down.js on a rejected POST) */
.iid .cap-form .cap-err{flex:1 1 100%;margin-top:8px;font-size:12.5px;line-height:1.5;color:var(--bad)}

/* ============================================================
   Containment + state additions (2026-07-29) — keep through refactors.
   The notify-capture chips are nowrap, so their flex row must be allowed
   to wrap or it blows past a 360px viewport. (The dark .band rules that
   used to live here went with the band itself — see the template.)
   ============================================================ */
.iid .cap-form{flex-wrap:wrap}
.iid .cap-trust{flex-wrap:wrap;row-gap:6px}