/* EBSsystems.co inner pages (status, about, legal). Uses the tokens from home.css. */

/* page hero: a slim slice of the datacenter */
.phero{position:relative;min-height:340px;display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--line)}
.phero canvas{position:absolute;inset:0;width:100%;height:100%}
.phero::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(4,7,10,.97),rgba(4,7,10,.75) 40%,rgba(4,7,10,.2) 75%),linear-gradient(180deg,transparent 50%,var(--obsidian))}
.phero-c{position:relative;z-index:2;width:min(1240px,100% - 32px);margin-inline:auto;padding:70px 0 44px}
.phero h1{font:600 clamp(40px,5.4vw,72px)/.95 var(--display);margin:0 0 16px;letter-spacing:-.015em}
.phero .sub{color:#b9c5ce;font-size:19px;max-width:34em;margin:0}
.phero .state{display:flex;align-items:center;gap:12px;margin:0 0 6px;font:600 22px/1.2 var(--display)}
.phero .state.warn{color:var(--fiber)} .phero .state.down{color:var(--down)}
.phero .clock{margin:0;font:500 13px var(--mono);color:var(--steel)}
.pulse{width:10px;height:10px;border-radius:50%;background:var(--up);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:ping 2s infinite;flex:none}
.state.warn .pulse{background:var(--fiber)}.state.down .pulse{background:var(--down)}

/* status body */
.nerd{padding:20px 0 80px}
.nerd>.sec:nth-of-type(1){margin-top:24px;border-top:0}
.sec{display:flex;align-items:baseline;gap:14px;font:600 24px/1.2 var(--display);margin:56px 0 18px;padding-top:18px;border-top:1px solid var(--line)}
.sec .dim{font:500 13px var(--mono);color:var(--steel)}
.dim{color:var(--steel)}
.meta{font:500 12.5px var(--mono);color:#66737e;margin-top:18px}
.okbox{display:none}
.issue{padding:16px 20px;margin-top:26px;border:1px solid rgba(242,179,61,.4);border-left:3px solid var(--fiber);border-radius:var(--r-s);background:rgba(242,179,61,.06)}
.issue b{display:block;color:#fff}
.issue .meta{margin:2px 0 8px;display:block}

.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--up);box-shadow:0 0 10px rgba(61,220,151,.7);margin-right:8px;flex:none}
.dot.warn{background:var(--fiber);box-shadow:0 0 10px rgba(242,179,61,.7)}.dot.down{background:var(--down);box-shadow:0 0 10px rgba(255,100,112,.7)}.dot.nodata{background:#5b6772;box-shadow:none}
.tag{font:600 11px var(--mono);padding:3px 8px;border-radius:4px;color:var(--up);background:rgba(61,220,151,.1);letter-spacing:.03em}
.tag.warn{color:var(--fiber);background:rgba(242,179,61,.1)}.tag.down{color:var(--down);background:rgba(255,100,112,.1)}.tag.nodata{color:var(--steel);background:rgba(255,255,255,.05)}

.spark{width:100%;height:34px;display:block;margin:12px 0}
.spark path{fill:none;stroke:var(--aqua);stroke-width:1.6;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 3px rgba(63,208,212,.5))}
.spark .gap{fill:rgba(255,100,112,.35)}

.portals{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.portal{display:block;padding:20px 22px;background:var(--graphite);text-decoration:none;transition:background .25s}
.portal:hover{background:#101820}
.p-top{display:flex;align-items:center;gap:2px}
.p-top b{font:600 19px var(--display);color:#fff;margin-right:auto}
.p-meta{display:flex;gap:16px;font:500 12.5px var(--mono);color:var(--steel)}
.p-meta .go{margin-left:auto;color:var(--aqua)}
.portal:hover .go{color:#fff}

.gauges{display:grid;grid-template-columns:repeat(3,1fr) 2fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;margin-bottom:18px}
.gauge{display:flex;align-items:center;gap:16px;padding:18px 20px;background:var(--graphite)}
.gauge.wide{display:block}
.g-l{font:600 18px var(--display);color:#fff}
.g-ring{--c:var(--up);width:66px;height:66px;border-radius:50%;flex:none;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),rgba(160,190,210,.1) 0);filter:drop-shadow(0 0 8px color-mix(in srgb,var(--c) 35%,transparent))}
.g-ring.warn{--c:var(--fiber)}.g-ring.down{--c:var(--down)}
.g-ring b{width:54px;height:54px;border-radius:50%;background:var(--graphite);display:grid;place-items:center;font:600 13px var(--mono);color:#fff}

.console{border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;background:#05080b}
.console-bar{display:flex;align-items:center;gap:7px;padding:11px 14px;border-bottom:1px solid var(--line);background:#0a0f14;font:500 12.5px var(--mono);color:var(--steel);white-space:nowrap;overflow:hidden}
.console-bar i{width:10px;height:10px;border-radius:50%;background:#26313b;flex:none}
.console-bar span{margin-left:8px}
.console-scroll{overflow-x:auto}
.svc{width:100%;border-collapse:collapse;font:500 14px var(--mono);color:#c9d4dc}
.svc th{text-align:left;font-weight:500;color:var(--steel);padding:12px 16px;border-bottom:1px solid var(--line)}
.svc td{padding:11px 16px;border-bottom:1px solid rgba(160,190,210,.06);white-space:nowrap}
.svc tr:hover td{background:rgba(63,208,212,.03)}
.svc td b{color:#fff}
.svc .g{color:var(--up)}.svc .y{color:var(--fiber)}.svc .r{color:var(--down)}
.svc .spark{margin:0;height:24px;width:160px}

.mtile{display:grid;grid-template-columns:280px 1fr;gap:30px;padding:24px;border:1px solid var(--line);border-radius:var(--r-m);background:radial-gradient(500px 200px at 100% 0%,rgba(61,220,151,.08),transparent),var(--graphite)}
.t-top{display:flex;align-items:center;font:600 16px var(--display);color:#fff}
.t-big{font:600 56px/1.05 var(--display);letter-spacing:-.02em;color:#fff;margin:8px 0 10px;font-variant-numeric:tabular-nums}
.t-big span{font-size:.5em;color:var(--steel)}
.m-left .dim{margin-top:10px;font-size:15px}
.m-right .dim{font:500 12.5px var(--mono);margin-top:6px}
.mchart{width:100%;height:140px;color:var(--up)}
.mline{fill:none;stroke:var(--up);stroke-width:2;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(61,220,151,.6))}
.mnow{fill:var(--up)}
.mgrid{stroke:rgba(160,190,210,.08)}
.mtick{fill:var(--steel);font:500 10px var(--mono)}
.mcollect{padding:40px 0;font:500 13px var(--mono)}

.infra{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden}
.tile{padding:18px 20px;background:var(--graphite)}
.tile .t-big{font-size:38px}
.tile .dim{font-size:14px;margin-top:8px}
.infra .tile.nodata:only-child{grid-column:1/-1}

/* documents: about, privacy, terms, SLA */
.doc{padding:20px 0 90px}
.doc .wrap{display:grid;grid-template-columns:220px minmax(0,720px);gap:60px}
.doc nav{position:sticky;top:96px;align-self:start;font:500 13px var(--mono)}
.doc nav a{display:block;padding:6px 0;color:var(--steel);text-decoration:none;border-left:1px solid var(--line);padding-left:14px}
.doc nav a:hover{color:#fff;border-left-color:var(--fiber)}
.doc article{font-size:17.5px;line-height:1.7;color:#c9d4dc}
.doc article h2{font:600 30px/1.15 var(--display);color:#fff;margin:48px 0 14px;scroll-margin-top:100px}
.doc article h2:first-child{margin-top:20px}
.doc article h3{font:600 21px/1.3 var(--display);color:#fff;margin:30px 0 8px}
.doc article a{color:var(--aqua)}
.doc article ul{padding-left:1.2em}
.doc article li{margin:6px 0}
.doc article li::marker{color:var(--aqua)}
.doc article table{width:100%;border-collapse:collapse;font-size:15.5px;margin:18px 0}
.doc article th,.doc article td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.doc article th{color:var(--steel);font:500 13px var(--mono)}
.doc .lede{font-size:20px;color:#dbe4ea}

@media (max-width:1000px){
  .gauges{grid-template-columns:repeat(3,1fr)}.gauge.wide{grid-column:1/-1}
  .infra{grid-template-columns:repeat(2,1fr)}
  .mtile{grid-template-columns:1fr}
  .doc .wrap{grid-template-columns:1fr;gap:20px}.doc nav{position:static;display:flex;flex-wrap:wrap;gap:4px 16px}.doc nav a{border:0;padding:4px 0}
}
@media (max-width:700px){
  .portals,.gauges{grid-template-columns:1fr}
  .infra{grid-template-columns:1fr}
  .spark-h,.spark-c{display:none}
  .phero{min-height:280px}
  .sec{flex-direction:column;gap:2px}
}

/* status page hero: the full animated datacenter (HUD + hover inspector), given room to breathe */
.phero.hall{min-height:min(620px,82vh);align-items:center}
.phero.hall::after{background:
  radial-gradient(120% 90% at 78% 55%,transparent 40%,rgba(4,7,10,.55) 100%),
  linear-gradient(90deg,rgba(4,7,10,.94) 0%,rgba(4,7,10,.7) 30%,rgba(4,7,10,.12) 56%,transparent 72%),
  linear-gradient(180deg,rgba(4,7,10,.4),transparent 18%,transparent 78%,var(--obsidian))}
.phero.hall .phero-c{padding:96px 0 72px}
.phero.hall h1{font-size:clamp(46px,6vw,84px);text-shadow:0 0 40px rgba(63,208,212,.18)}
.phero.hall .state{font-size:24px;margin:6px 0 8px}
.phero .hint{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;padding:8px 14px;border:1px solid rgba(242,179,61,.35);border-radius:999px;
  background:rgba(6,9,12,.55);backdrop-filter:blur(8px);font:500 12px var(--mono);letter-spacing:.06em;color:#d8c08a}
.phero .hint i{width:8px;height:8px;border-radius:50%;background:var(--fiber);box-shadow:0 0 10px var(--fiber);animation:hintPulse 2s ease-in-out infinite}
@keyframes hintPulse{50%{opacity:.35}}
@media (max-width:760px){.phero.hall{min-height:420px}.phero .hint{display:none}}
@media (prefers-reduced-motion:reduce){.phero .hint i{animation:none}}