@charset "utf-8";
/* ==========================================================================
   Hostonym — the Network pages.
   /network /ddos /transit /status /looking-glass /sla only. Same ink, paper,
   hairlines and single brass accent as the rest; the only new idea here is the
   ninety-day bar, which is a record rather than a decoration and is drawn from
   the incident table.
   ========================================================================== */

/* Shared pieces (.dot--*, .net-sum*, .lg-cmd*) live in main.css: they now
   have callers on the policy pages too, and one component defined twice is
   one definition that will drift. */

/* ----------------------------------------------- 2. /network — regions */

.reg-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--rule)}
.reg{background:var(--paper);padding:clamp(20px,2.2vw,28px)}
.reg-h{display:flex;align-items:center;flex-wrap:wrap;gap:6px 11px;padding-bottom:14px;border-bottom:1px solid var(--rule)}
.reg-flag{display:flex;flex:none}
.reg-flag .flag{width:26px;height:19px}
.reg-name{flex:1 1 auto;min-width:0}
.reg-city{font:600 1.18rem/1.15 var(--f-serif);letter-spacing:-.018em;color:var(--ink)}
.reg-cty{margin-top:2px;font:400 var(--fs-sm)/1.3 var(--f-mono);letter-spacing:.03em;color:var(--mute)}
.reg-tier{
  padding:3px 8px;background:var(--paper-3);
  font:500 10px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);
}
.reg-state{font-size:.75rem;color:var(--mute)}
.reg-legal{margin-top:14px;font-size:.9063rem;line-height:1.62;color:var(--slate)}
.reg-spec{margin-top:16px}
.reg-spec>div{
  display:grid;grid-template-columns:110px minmax(0,1fr);gap:4px 16px;
  padding:8px 0;border-top:1px solid var(--rule);
}
.reg-spec>div:first-child{border-top:0}
.reg-spec dt{font:400 10px/1.6 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.reg-spec dd{margin:0;font-size:.8438rem;line-height:1.5;color:var(--ink)}
.reg-foot{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:16px;padding-top:14px;border-top:1px solid var(--rule);font-size:var(--fs-sm)}

/* -------------------------------------------------- 3. /ddos — filters */

.ddos-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:14px}
.ddos-l li{
  display:grid;grid-template-columns:46px minmax(0,1fr);gap:3px 13px;align-items:baseline;
  padding:12px 14px;background:var(--paper);box-shadow:0 0 0 1px var(--rule);
}
.ddos-l-l{
  grid-row:span 2;padding:3px 0;text-align:center;
  font:500 10px/1.4 var(--f-mono);letter-spacing:.08em;color:var(--brass);
  border-right:1px solid var(--rule);
}
.ddos-l-n{font-size:.9063rem;line-height:1.3;color:var(--ink)}
.ddos-l-d{font-size:.7813rem;line-height:1.45;color:var(--mute)}

/* ------------------------------------------------ 4. /transit — table */

.tr-l{border:1px solid var(--rule)}
.tr-h,.tr-r{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr) minmax(0,1.2fr) minmax(0,1.3fr);
  gap:6px 20px;padding:12px clamp(13px,1.4vw,18px);
}
.tr-h{
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  font:400 var(--fs-micro)/1.2 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
}
.tr-r{background:var(--paper);border-top:1px solid var(--rule)}
.tr-r:first-of-type{border-top:0}
.tr-c{min-width:0;font-size:.875rem;line-height:1.4;color:var(--ink)}
.tr-c i{display:block;margin-top:3px;font:400 10px/1.4 var(--f-mono);letter-spacing:.05em;color:var(--mute);font-style:normal}
.tr-c--n{display:flex;align-items:center;flex-wrap:wrap;gap:3px 9px}
.tr-c--n b{font:600 1rem/1.15 var(--f-serif);letter-spacing:-.014em;color:var(--ink)}
.tr-c--n i{flex:1 1 100%;margin-top:0}
.tr-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin-top:clamp(18px,2vw,26px)}
.tr-note{
  position:relative;padding:14px 16px 14px 30px;background:var(--paper);box-shadow:0 0 0 1px var(--rule);
  font-size:.875rem;line-height:1.55;color:var(--slate);
}
.tr-note::before{content:"";position:absolute;left:16px;top:1.5em;width:7px;height:1px;background:var(--brass)}

/* -------------------------------------------------- 5. /status

   Rebuilt around the question a visitor actually arrives holding. The state
   band and four figures answer it above the fold; the estate bar answers "and
   has it been lately"; the per-region table is a table because eight tall
   cards repeating the same four fields is eight times the height for one
   card's worth of information. */

.st-top{padding-block:clamp(20px,2.6vw,32px);border-bottom:1px solid var(--rule);background:var(--paper-2)}
.st-top--warn{background:color-mix(in srgb,var(--brass-2) 7%,var(--paper-2))}
.st-top--bad{background:color-mix(in srgb,var(--alert) 6%,var(--paper-2))}
.st-top-in{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px}
.st-top-l{min-width:0}
.st-h{
  display:flex;align-items:center;margin-top:8px;
  font:600 clamp(1.5rem,1.2rem + 1.1vw,2.05rem)/1.12 var(--f-serif);
  letter-spacing:-.024em;color:var(--ink);
}
.st-h .dot{width:9px;height:9px;margin-right:12px;flex:none}
.st-lead{margin-top:9px;max-width:70ch;font-size:.9063rem;line-height:1.6;color:var(--slate)}

/* window switcher — links, not script: the one page that has to work when
   things are going wrong should not need JavaScript to show a number */
.st-top-r{display:flex;flex-direction:column;align-items:flex-end;gap:7px}
.st-win-k{font:400 10px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.st-win{display:flex;border:1px solid var(--rule-2);background:var(--paper)}
.st-win-b{
  padding:8px 15px;font:400 var(--fs-sm)/1.2 var(--f-mono);color:var(--slate);
  text-decoration:none;border-left:1px solid var(--rule);transition:background .16s var(--ease),color .16s var(--ease);
}
.st-win-b:first-child{border-left:0}
.st-win-b:hover{background:var(--paper-2);color:var(--ink)}
.st-win-b.is-on{background:var(--ink);color:var(--paper);border-left-color:var(--ink)}
.st-win-n{font:400 10px/1 var(--f-mono);letter-spacing:.06em;color:var(--mute)}


/* the four figures */
.st-kpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.st-kpi-i{background:var(--paper);padding:clamp(15px,1.7vw,20px) clamp(16px,1.8vw,22px)}
.st-kpi-i.is-bad{background:color-mix(in srgb,var(--alert) 5%,var(--paper))}
.st-kpi-v{
  font:600 clamp(1.5rem,1.2rem + 1vw,1.95rem)/1 var(--f-serif);letter-spacing:-.028em;color:var(--ink);
  font-feature-settings:"tnum" 1;
}
.st-kpi-of{font-size:.62em;color:var(--mute);letter-spacing:-.01em}
.st-kpi-k{margin-top:8px;font:400 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}

.st-open{display:grid;gap:1px;margin-top:14px}
.st-inc{background:var(--paper);box-shadow:0 0 0 1px var(--rule);padding:18px 20px}
.st-inc--bad{box-shadow:0 0 0 1px color-mix(in srgb,var(--alert) 40%,transparent)}
.st-inc-h{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.st-inc-w{font-size:.875rem;color:var(--ink)}
.st-inc-t{font:400 var(--fs-sm)/1.4 var(--f-mono);color:var(--mute)}
.st-inc-n{margin-top:11px;font:600 1.08rem/1.3 var(--f-serif);letter-spacing:-.016em;color:var(--ink)}
.st-inc-b{margin-top:8px;max-width:78ch;font-size:.9063rem;line-height:1.6;color:var(--slate)}

/* the ninety-day record — one column per day, drawn from the incidents */
.st-bar{display:flex;gap:2px;height:22px}
.st-bar--lg{height:44px;gap:2px}
.st-d{flex:1 1 0;min-width:1px;border-radius:1px;transition:opacity .12s var(--ease)}
.st-d:hover{opacity:.5}
.st-d--up{background:color-mix(in srgb,var(--ok) 74%,transparent)}
.st-d--down{background:var(--alert)}
.st-d--none{background:var(--rule)}

.st-net{padding:clamp(16px,1.8vw,22px);background:var(--paper);border:1px solid var(--rule)}
.st-axis{position:relative;height:15px;margin-top:7px}
.st-axis span{
  position:absolute;top:0;transform:translateX(-1px);padding-left:5px;
  border-left:1px solid var(--rule-2);
  font:400 10px/1.4 var(--f-mono);letter-spacing:.05em;color:var(--mute);
}
.st-note{margin-top:14px}

/* per region, as a table */
.st-l{border:1px solid var(--rule)}
.st-hd,.st-r{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.62fr) minmax(0,.6fr) minmax(0,1.9fr) minmax(0,.85fr);
  gap:6px 20px;align-items:center;
}
.st-hd{
  padding:9px clamp(13px,1.5vw,18px);background:var(--paper-2);border-bottom:1px solid var(--rule);
  font:400 10px/1.5 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute);
}
.st-r{padding:12px clamp(13px,1.5vw,18px);background:var(--paper);border-top:1px solid var(--rule)}
.st-r:first-of-type{border-top:0}
.st-r:hover{background:var(--paper-2)}
.st-c{min-width:0;font-size:.875rem;color:var(--slate)}
.st-c--n{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 9px}
.st-c--n .flag{width:20px;height:15px;flex:none;align-self:center}
.st-c--n b{font:600 1rem/1.15 var(--f-serif);letter-spacing:-.014em;color:var(--ink)}
.st-c--n i{font:400 var(--fs-micro)/1.4 var(--f-mono);color:var(--mute);font-style:normal}
.st-c--u{font:600 .9688rem/1.2 var(--f-mono);color:var(--ink);font-feature-settings:"tnum" 1}
.st-c--u.is-under{color:var(--alert)}
.st-c--d{font:400 var(--fs-sm)/1.4 var(--f-mono);color:var(--mute)}
.st-c--b{display:block}
.st-c--b .st-bar{height:20px;gap:1px}
.st-c--s{display:flex;align-items:center;font-size:.8125rem;color:var(--slate);justify-self:end}

/* history, grouped by month */
.st-hist{border:1px solid var(--rule);background:var(--paper)}
.st-hist-m{
  padding:8px clamp(13px,1.5vw,18px);background:var(--paper-2);border-block:1px solid var(--rule);
  font:400 10px/1.5 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute);
}
.st-hist-m:first-child{border-top:0}
.st-hist-r{
  display:grid;grid-template-columns:minmax(0,72px) minmax(0,1fr) auto;gap:6px 20px;align-items:center;
  padding:12px clamp(13px,1.5vw,18px);border-top:1px solid var(--rule);
}
.st-hist-m + .st-hist-r{border-top:0}
.st-hist-r:hover{background:var(--paper-2)}
.st-hist-d{font:400 var(--fs-sm)/1.4 var(--f-mono);color:var(--mute);font-feature-settings:"tnum" 1}
.st-hist-b{min-width:0}
.st-hist-b b{display:block;font:600 .9688rem/1.34 var(--f-sans);color:var(--ink)}
.st-hist-b i{display:block;margin-top:3px;font-size:.8125rem;line-height:1.45;color:var(--slate);font-style:normal}
.st-hist-s{justify-self:end}

/* ------------------------------------------------------ 6. /sla */

.sla-you{background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,2.4vw,30px)}
.sla-you--owed{border-color:color-mix(in srgb,var(--ok) 40%,transparent);background:color-mix(in srgb,var(--ok) 4%,var(--paper))}
.sla-you-h{margin-top:9px;font:600 clamp(1.3rem,1.1rem + .9vw,1.7rem)/1.2 var(--f-serif);letter-spacing:-.024em;color:var(--ink)}
.sla-you-b{margin-top:11px;max-width:74ch;font-size:.9063rem;line-height:1.62;color:var(--slate)}
.sla-you .dash-list{margin-top:16px}

.sla-allow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px}
.sla-allow-i{background:var(--paper);box-shadow:0 0 0 1px var(--rule);padding:18px 20px}
.sla-allow-k{font:400 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.sla-allow-v{
  margin-top:9px;font:600 1.9rem/1 var(--f-serif);letter-spacing:-.028em;color:var(--ink);
  font-feature-settings:"tnum" 1;
}
.sla-allow-v span{font:400 var(--fs-sm)/1 var(--f-mono);letter-spacing:.02em;color:var(--mute);margin-left:4px}

.sla-h,.sla-r{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) minmax(0,1fr) 190px;
  gap:0 clamp(12px,1.4vw,26px);align-items:center;padding-inline:clamp(14px,1.4vw,20px);
}
.sla-h{
  padding-block:10px;background:var(--paper-2);border-bottom:1px solid var(--rule);
  font:400 var(--fs-micro)/1.2 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
}
.sla-r{padding-block:13px;background:var(--paper);border-top:1px solid var(--rule)}
.builds-l>.sla-r:first-child{border-top:0}
.sla-r:hover{background:var(--paper-2)}

/* --------------------------------------------- 7. /looking-glass */

.lg-sec{margin-top:clamp(24px,3vw,40px)}

/* one row per region — a table, because eight cards each repeating the same
   sentence is eight times the space for one sentence's worth of information */
.lg-l{border:1px solid var(--rule)}
.lg-h,.lg-r{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1.4fr) minmax(0,1.4fr) minmax(0,.9fr);gap:6px 20px;align-items:center}
.lg-h{
  padding:9px clamp(13px,1.5vw,18px);background:var(--paper-2);border-bottom:1px solid var(--rule);
  font:400 10px/1.5 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute);
}
.lg-r{padding:13px clamp(13px,1.5vw,18px);background:var(--paper);border-top:1px solid var(--rule)}
.lg-r:first-of-type{border-top:0}
.lg-r:hover{background:var(--paper-2)}
.lg-c{min-width:0;font-size:.8438rem;color:var(--ink)}
.lg-c--n{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 9px}
.lg-c--n .flag{width:20px;height:15px;flex:none;align-self:center}
.lg-c--n b{font:600 1.02rem/1.15 var(--f-serif);letter-spacing:-.014em;color:var(--ink)}
.lg-c--n i{font:400 var(--fs-micro)/1.4 var(--f-mono);color:var(--mute);font-style:normal}
.lg-c--s{display:flex;align-items:center;font-size:.8125rem;color:var(--slate);justify-self:end}
.lg-soon{font:400 var(--fs-micro)/1.5 var(--f-mono);color:var(--mute)}


.lg-ping{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:16px}
.lg-ping-o{flex:1 1 34ch;font:400 var(--fs-sm)/1.6 var(--f-mono);letter-spacing:.01em;color:var(--slate)}

/* ------------------------------------------------------ 8. responsive */

@media (max-width:1080px){
  .net-sum,.sla-allow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .reg-l,.ddos-l,.tr-notes{grid-template-columns:1fr}
  .lg-h{display:none}
  .lg-r{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px}
  .lg-c--n{grid-column:1/-1}
  .lg-c--s{justify-self:start}
  .st-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-hd{display:none}
  .st-r{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 20px;padding-block:15px}
  .st-c--n,.st-c--b{grid-column:1/-1}
  .st-c--s{justify-self:start}
  .st-top-r{align-items:flex-start}
  .tr-h{display:none}
  .tr-r{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px}
  .tr-c--n{grid-column:1/-1}
  .sla-h{display:none}
  .sla-r{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;padding-block:15px}
  .sla-r .build-id,.sla-r .build-buy{grid-column:1/-1}
  .sla-r .build-buy{text-align:left}
  .sla-r .build-p .pr{justify-content:flex-start}
}

@media (max-width:680px){
  .net-sum,.sla-allow{grid-template-columns:1fr}
  .reg-spec>div{grid-template-columns:1fr;gap:2px}
  .tr-r,.lg-r{grid-template-columns:1fr}
  .lg-cmd{grid-template-columns:1fr;gap:6px}
  .lg-copy{justify-self:start}
  .st-kpi{grid-template-columns:1fr}
  .st-bar--lg{height:32px;gap:1px}
  .st-win{flex-wrap:wrap}
  .st-hist-r{grid-template-columns:minmax(0,1fr) auto}
  .st-hist-d{grid-column:1/-1}
}