/* Charts and the History / Overview pages. Foundation language: hairline rules, mono for values, status as words plus shapes, no gradients.
   Series colours are the validated categorical slots (blue, aqua, violet) stepped for each surface; status colours are the app's own tokens. */
:root{
  --uac-s1:#3987e5; --uac-s2:#199e70; --uac-s3:#9085e9; --uac-s4:#d55181;
  --uac-quiet:#8792a0;
}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]){
  --uac-s1:#2a78d6; --uac-s2:#0f8f65; --uac-s3:#4a3aa7; --uac-s4:#b83a6b;
  --uac-quiet:#5e6772;
}}
:root[data-theme="light"]{ --uac-s1:#2a78d6; --uac-s2:#0f8f65; --uac-s3:#4a3aa7; --uac-s4:#b83a6b; --uac-quiet:#5e6772 }

.uac{margin:0;position:relative;min-width:0}
.uac-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;min-height:20px;margin-bottom:2px}
.uac-t{font:600 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.uac-sub{font:12px var(--mono);color:var(--ink3)}
.uac-sp{flex:1}
.uac-read{font:12px var(--mono);color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.uac-demo{font:600 10px var(--mono);letter-spacing:.08em;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);border-radius:var(--r);padding:0 5px}
.uac-legend{display:flex;gap:4px 14px;flex-wrap:wrap;font-size:12px;color:var(--ink2);margin:2px 0 4px}
.uac-legend span{display:inline-flex;align-items:center;gap:6px}
.uac-sw{display:inline-block;width:10px;height:10px;border-radius:2px;flex:none}
.uac-key{display:inline-block;width:12px;height:10px;border-radius:2px;flex:none;border:1px solid transparent}
.uac-k-ok{background:var(--ok)} .uac-k-warn{background:var(--warn)}
.uac-k-crit{background:repeating-linear-gradient(135deg,var(--crit) 0 2px,transparent 2px 4px);border-color:var(--crit)}
.uac-k-quiet{background:radial-gradient(circle,var(--uac-quiet) 0 1px,transparent 1.2px) 0 0/4px 4px;border-color:var(--uac-quiet)}
.uac-k-none{border:1px dashed var(--ink3)}
.uac-tri{display:inline-block;width:0;height:0;border-left:8px solid var(--crit);border-top:5px solid transparent;border-bottom:5px solid transparent}

.uac-plot{position:relative;width:100%;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.uac-svg{display:block;max-width:100%;overflow:visible}
.uac-plot svg:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:var(--r)}
.uac-tk{font:11px var(--mono);fill:var(--ink3)}
.uac-tkm{fill:var(--ink2)}
.uac-rl{font:12px var(--mono);fill:var(--ink2)}
.uac-gl{stroke:var(--bd);stroke-width:1;shape-rendering:crispEdges}
.uac-axis{stroke:var(--bd2);stroke-width:1;shape-rendering:crispEdges}
.uac-th{stroke:var(--ink3);stroke-width:1;stroke-dasharray:4 3}
.uac-thl{font:11px var(--mono);fill:var(--ink2)}
.uac-line{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.uac-area{fill-opacity:.12;stroke:none}
.uac-band{fill-opacity:.2;stroke:none}
.uac-cross{stroke:var(--ink2);stroke-width:1;shape-rendering:crispEdges}
.uac-ring{stroke:var(--bg);stroke-width:2}
.uac-sel{fill:none;stroke:var(--ink);stroke-width:1.5;pointer-events:none}
.uac-empty{font:13px var(--font);fill:var(--ink3)}
.uac-bar{shape-rendering:geometricPrecision}
.uac-b-ok{fill:var(--ok)} .uac-b-warn{fill:var(--warn)} .uac-b-crit{fill:var(--crit)}
.uac-b-quiet{fill:var(--uac-quiet);fill-opacity:.55}
.uac-b-none{fill:none;stroke:var(--ink3);stroke-width:1;stroke-dasharray:2 2}
.uac-bar-pat{pointer-events:none}
.uac-hatch-bg{fill:transparent}
.uac-hatch-ln{stroke:var(--uac-surface,var(--bg));stroke-width:1.6}
.uac-dot-ln{fill:var(--ink3)}

.uac-live,.uac-tbl th[scope]{}
.uac-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.uac-data{margin-top:2px}
.uac-data summary{display:inline-block;cursor:pointer;font-size:12px;color:var(--ink3);padding:2px 0;list-style:none}
.uac-data summary::-webkit-details-marker{display:none}
.uac-data summary:hover{color:var(--acc)}
.uac-data[open] summary{color:var(--ink2)}
.uac-tbl{max-height:260px;overflow:auto;border-top:1px solid var(--bd);margin-top:2px}
.uac-tbl table{font-size:12px}
.uac-tbl th,.uac-tbl td{height:auto;padding:3px 8px;text-transform:none;letter-spacing:0;font-weight:500;background:none}
.uac-tbl thead th{position:sticky;top:0;background:var(--bg);font-weight:600}

.uac-tip{position:fixed;left:0;top:0;z-index:90;pointer-events:none;min-width:150px;max-width:300px;padding:7px 10px;background:var(--sf2);color:var(--ink);border:1px solid var(--bd2);border-radius:var(--r);font:12px/1.45 var(--font);box-shadow:0 2px 10px rgba(0,0,0,.28)}
.uac-tip b{display:block;font:600 12px var(--mono);margin-bottom:3px}
.uac-tip div{display:flex;align-items:center;gap:7px}
.uac-tl{color:var(--ink2);flex:1}
.uac-tv{font:12px var(--mono);white-space:nowrap}

/* sparkline, tiles, bullets, uptime tiles */
.uac-spark{display:inline-block;vertical-align:middle}
.uac-spark-ln{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.uac-spark-empty{background:repeating-linear-gradient(90deg,var(--bd) 0 3px,transparent 3px 6px);height:1px!important;align-self:center;opacity:.8}
.uac-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--uac-tile,150px),1fr));gap:0;border-top:1px solid var(--bd);border-left:1px solid var(--bd)}
.uac-tile{display:grid;gap:2px;padding:9px 11px;border-right:1px solid var(--bd);border-bottom:1px solid var(--bd);min-width:0;align-content:start}
.uac-tv2{font:600 17px var(--mono)}
.uac-tn{font-size:12px}
.uac-bullet{display:grid;grid-template-columns:62px minmax(60px,1fr) 56px auto;align-items:center;gap:4px 10px;padding:5px 0;min-height:30px}
.uac-bl{font:600 11px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.uac-bt{position:relative;height:8px;background:var(--sf3);border-radius:2px;display:block}
.uac-bf{position:absolute;left:0;top:0;bottom:0;border-radius:2px;display:block;min-width:2px}
.uac-f-ok{background:var(--acc)} .uac-f-warn{background:var(--warn)} .uac-f-crit{background:var(--crit)} .uac-f-none{background:transparent}
.uac-th-tick{position:absolute;top:-2px;bottom:-2px;width:1px;background:var(--ink3)}
.uac-th-crit{background:var(--ink2)}
.uac-mk{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);border-radius:1px;transform:translateX(-1px)}
.uac-bv{font:600 13px var(--mono);text-align:right}
.uac-bw{font:600 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;min-width:62px}
.uac-w-ok{color:var(--ink3)} .uac-w-warn{color:var(--warn)} .uac-w-crit{color:var(--crit)} .uac-w-none{color:var(--ink3)}
.uac-bn{grid-column:2/-1;font-size:12px;margin-top:-2px}

.uac-ut{display:grid;gap:3px;padding:12px 14px;border-right:1px solid var(--bd);align-content:start;min-width:0}
.uac-utv{font:600 28px/1.1 var(--mono);letter-spacing:-.01em}
.uac-uts{display:inline-flex;align-items:center;gap:6px;font:600 11px var(--mono);letter-spacing:.06em;text-transform:uppercase}
.uac-uts svg{fill:currentColor;flex:none}
.uac-t-ok .uac-uts{color:var(--ok)} .uac-t-warn .uac-uts{color:var(--warn)} .uac-t-crit .uac-uts{color:var(--crit)} .uac-t-none .uac-uts,.uac-t-none .uac-utv{color:var(--ink3)}
.uac-utd{font-size:12px}

/* skeleton: no spinner, no layout shift */
.uac-skel{background:var(--sf2);border-radius:var(--r)}
.uac-skel{animation:uac-pulse 1.6s ease-in-out infinite}
@keyframes uac-pulse{50%{opacity:.55}}
@media (prefers-reduced-motion: reduce){.uac-skel{animation:none}}

/* History panel (device page, customer page) and Overview */
.hist{margin-top:18px;--uac-surface:var(--bg)}
.hist .sh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hist-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--bd);border-right:0;border-radius:var(--r);background:var(--sf);margin:8px 0 14px}
.hist-block{padding:12px 0 6px;border-top:1px solid var(--bd)}
.hist-block:first-of-type{border-top:0}
.hist-charts{display:grid;gap:14px}
.hist-note{font-size:12px;color:var(--ink3);margin:6px 0 0}
.hist-empty{border:1px dashed var(--bd2);border-radius:var(--r);padding:16px 18px;background:var(--sf);max-width:70ch}
.hist-empty h3{margin:0 0 4px;font:600 14px var(--font)}
.hist-empty p{margin:0;color:var(--ink2)}
.hist-incs{width:100%}
.hist-incs td,.hist-incs th{height:34px}
.hist-demo{display:inline-block;font:600 11px var(--mono);letter-spacing:.08em;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 55%,transparent);border-radius:var(--r);padding:1px 6px}
.hist-trio{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding-top:6px}
.hist-trio > span{display:inline-flex;align-items:center;gap:8px;font:12px var(--mono);color:var(--ink2)}
.ov-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;align-items:start}
.ov-grid > section{min-width:0}
.ov-list{display:grid}
.ov-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid var(--bd);min-height:38px}
.ov-row .m{font-size:12.5px}
.ov-row button.lnk{border:0;background:none;padding:0;color:var(--acc);text-align:left;cursor:pointer;font:inherit}
.ov-chg{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;padding:6px 0;border-bottom:1px solid var(--bd);align-items:baseline}
.ov-chg time{font:12px var(--mono);color:var(--ink3)}
.up-cell{font:12px var(--mono);white-space:nowrap}

@media (max-width: 719px){
  .hist-tiles{grid-template-columns:repeat(2,minmax(0,1fr));border-right:0}
  .hist-tiles .uac-ut{border-bottom:1px solid var(--bd)}
  .ov-grid{grid-template-columns:minmax(0,1fr)}
  .uac-bullet{grid-template-columns:54px minmax(40px,1fr) 52px}
  .uac-bw{display:none}
  .uac-tip{max-width:240px}
  .ov-chg{grid-template-columns:72px minmax(0,1fr)}
  .ov-chg > :last-child{grid-column:2}
}

.cols[hidden]{display:none}
.dtabs{margin:10px 0 4px}
.hist-incs th{white-space:nowrap}
.hist-more{margin-top:10px;border-top:1px solid var(--bd)}
.hist-more > summary{cursor:pointer;padding:8px 0;font:600 12px var(--font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);list-style:none}
.hist-more > summary::-webkit-details-marker{display:none}
.hist-more > summary::before{content:"+ ";font-family:var(--mono)}
.hist-more[open] > summary::before{content:"- "}
/* inside the Network table the expanded cell is as wide as the whole table: keep the charts to the visible width and in view while the table scrolls sideways */
[data-hist-site]{max-width:min(980px,calc(100vw - 260px));position:sticky;left:0;white-space:normal}
@media (max-width: 719px){[data-hist-site]{max-width:calc(100vw - 40px)}}

/* Last 24 h status strip (strips.js, charts.js strip24): 12 px tall, shape as well as colour, the 7-day uptime beside it */
.s24{display:inline-flex;align-items:center;gap:8px;min-height:16px;white-space:nowrap}
.uac-strip24{display:block;flex:none;overflow:visible;cursor:default;border-radius:2px}
.uac-strip24:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.uac-s24-ok{fill:var(--ok)} .uac-s24-warn{fill:var(--warn)} .uac-s24-crit{fill:var(--crit)}
.uac-s24-cap{fill:var(--ink)}
.uac-s24-none{fill:none;stroke:var(--ink3);stroke-width:1;stroke-dasharray:1.5 1.5}
.s24-pct{font-size:12px}
.s24-none{color:var(--ink3);cursor:help}
.s24-wait{display:inline-block;width:96px;height:12px;border-radius:2px;background:var(--bd);opacity:.5}
td.c-strip,th.c-strip{white-space:nowrap}
@media (max-width:899px) and (min-width:720px){table.devs th.c-strip,table.devs td.c-strip{display:none}}
@media (max-width:719px){
  table.devs td.c-strip{grid-column:1/-1;display:block;min-height:18px}
  table.devs tr.dv td.c-strip{display:block}
  table.devs td.c-strip .s24{gap:8px}
}
@media (prefers-reduced-motion:no-preference){.s24 svg{animation:s24in .25s ease-out}}
@keyframes s24in{from{opacity:0}to{opacity:1}}

/* Internet, 7 d column of the Network sites table, the Overview's internet health and the backfill line (history.js) */
.inet{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;min-height:20px}
.inet-wait{display:inline-block;width:84px;height:20px;border-radius:2px;background:var(--bd);opacity:.5}
.inet-p{font-size:12px;min-width:44px;text-align:right}
td.c-inet{white-space:nowrap}
.hist-sec{margin-top:30px;padding-top:6px;border-top:1px solid var(--bd)}
.ov-league td.c-strip{white-space:nowrap}
.ov-league tbody tr{cursor:pointer}
.ov-league button.lnk{border:0;background:none;padding:0;color:var(--acc);text-align:left;cursor:pointer;font:inherit}
.bf{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;font-size:12.5px;color:var(--ink2);margin:6px 0 14px;max-width:96ch}
.bf-full{margin:0}
@media (max-width: 719px){ .inet-wait{width:64px} }
.inet-wait{width:112px}
.inet-now{font-size:10.5px;letter-spacing:.04em}
.inet-was{font-size:10px;white-space:nowrap}
.inet .uac-h28{cursor:default}
/* the Internet, 7 d cell never spills into the next column: the strip scales down, and the tag wraps under the number when the column is narrow */
td.c-inet{overflow:hidden}
.inet{flex-wrap:wrap;max-width:100%;row-gap:2px;white-space:normal}
.inet .uac-h28{flex:0 1 112px;min-width:84px;max-width:100%;height:auto}
.inet-p,.inet-now{flex:none}
.inet-was{flex:0 0 auto;margin-left:0}