/* GPOSugar console (design 10.2 and 10.4): clean, roomy, Google-style. Light app bar, white surfaces with a thin line, one blue accent,
   system fonts, no offset shadows. gpo.css adds the policy pages' own pieces (search box, tree, segmented states). */
:root{--ink:#202124;--mute:#5f6368;--bg:#f8f9fa;--card:#fff;--line:#dadce0;--line-soft:#e8eaed;--accent:#1a73e8;--accent-ink:#1a73e8;
  --accent-soft:#e8f0fe;--on-accent:#fff;--good:#188038;--warn:#b06000;--bad:#c5221f;--teal:#12b5cb;--orange:#e8710a;
  --font:"Segoe UI Variable","Segoe UI",Roboto,"Helvetica Neue",Arial,system-ui,sans-serif;--mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --r:16px;--r-sm:10px;--lift:0 1px 2px rgba(60,64,67,.15),0 1px 3px 1px rgba(60,64,67,.08)}
@media(prefers-color-scheme:dark){:root{--ink:#e8eaed;--mute:#9aa0a6;--bg:#1f1f1f;--card:#2b2b2b;--line:#3c4043;--line-soft:#333537;--accent:#8ab4f8;
  --accent-ink:#8ab4f8;--accent-soft:#273349;--on-accent:#062e6f;--good:#81c995;--warn:#fdd663;--bad:#f28b82;--teal:#78d9ec;--orange:#fcad70;
  --lift:0 1px 2px rgba(0,0,0,.4),0 1px 3px 1px rgba(0,0,0,.25)}}

*{box-sizing:border-box}
html{font-size:15px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--font);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-soft)}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}

/* app bar */
header{position:sticky;top:0;z-index:100;background:var(--card);border-bottom:1px solid var(--line);padding:.45rem 1.5rem;display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}
header .brand{display:flex;align-items:center;gap:.55rem;margin-right:1.2rem;color:var(--ink);font-size:1.3rem;letter-spacing:-.01em}
header .brand:hover{text-decoration:none}
header .brand svg{width:30px;height:30px;flex:none}
header .brand b{font-weight:500}header .brand span{color:var(--mute)}
header .nav{display:contents}
header .nav>a{color:var(--mute);font-size:.9rem;font-weight:500;padding:.5rem .85rem;border-radius:999px}
header .nav>a:hover{background:var(--bg);color:var(--ink);text-decoration:none}
header .nav>a.on{background:var(--accent-soft);color:var(--accent-ink)}
header form{margin-left:auto;display:flex;align-items:center;gap:.6rem}
header .mute{color:var(--mute);font-size:.85rem}

main{max-width:1240px;margin:0 auto;padding:1.8rem 1.2rem 3rem}
h1{margin:.2rem 0 1.2rem;font-size:1.9rem;line-height:1.2;font-weight:400}
h2{margin:0 0 .8rem;font-size:1.05rem;font-weight:500}
h3{font-size:.95rem;font-weight:500;color:var(--ink);margin:.8rem 0 .4rem}
p{margin:.5rem 0}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.2rem 1.4rem;margin:0 0 1.2rem;overflow-x:auto}

table{border-collapse:collapse;width:100%}
th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{color:var(--mute);font-weight:500;font-size:.8rem;border-bottom:1px solid var(--line)}
tr:hover td{background:var(--bg)}

input,select,textarea{font:inherit;font-size:.9rem;padding:.5rem .75rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--card);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:1rem;height:1rem;padding:0}
button{font:500 .88rem var(--font);padding:.55rem 1.2rem;border:1px solid var(--accent);border-radius:999px;background:var(--accent);color:var(--on-accent);cursor:pointer;
  transition:box-shadow .15s,filter .15s,background .15s}
button:hover{box-shadow:var(--lift);filter:brightness(1.05)}
button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
button.plain{background:transparent;color:var(--accent-ink);border:1px solid var(--line)}
button.plain:hover{background:var(--accent-soft);box-shadow:none}
button.danger{background:var(--bad);border-color:var(--bad);color:#fff}

.row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:end;margin-bottom:.6rem}
.row label{display:flex;flex-direction:column;font-size:.8rem;color:var(--mute);gap:.3rem}

.pill{display:inline-block;padding:.05rem .65rem;border-radius:999px;font-size:.75rem;font-weight:500;background:var(--bg);border:1px solid currentColor}
.good{color:var(--good)}.warn{color:var(--warn)}.bad{color:var(--bad)}.mute{color:var(--mute)}
.secret{background:var(--accent-soft);color:var(--ink);border-radius:12px;padding:.8rem 1.1rem;margin:0 0 1.2rem;word-break:break-all}
.secret.warn{background:#fef7e0;color:#3c2a00}@media(prefers-color-scheme:dark){.secret.warn{background:#42381a;color:#fdd663}}
code{font-family:var(--mono);font-size:.85em;background:var(--bg);color:var(--ink);padding:.05rem .4rem;border:1px solid var(--line-soft);border-radius:6px}
pre{font-family:var(--mono);font-size:.85rem;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem 1rem;overflow-x:auto}

h2.fold{cursor:pointer;user-select:none;margin-bottom:0}h2.fold .arrow{display:inline-block;width:1.1em;color:var(--mute)}.card [hidden]{display:none}
h2.fold+div{margin-top:.9rem}
details.fold{margin:6px 0;border-top:1px solid var(--line-soft);padding-top:6px}details.fold>summary{cursor:pointer;padding:4px 0}

footer{max-width:1240px;margin:0 auto;padding:1.4rem 1.2rem 1.6rem;display:flex;justify-content:flex-end;align-items:center;gap:.6rem;color:var(--mute);font-size:.8rem}
footer img{height:36px;width:auto;display:block;background:#fff;padding:4px 8px;border-radius:8px}

.login-box{max-width:420px;margin:8vh auto 0;background:var(--card);border:1px solid var(--line);border-radius:24px;padding:2.2rem 2.2rem 1.8rem}
.login-box .brand{display:flex;align-items:center;gap:.6rem;font-size:1.6rem;margin-bottom:1.2rem}.login-box .brand svg{width:40px;height:40px}
.login-box .brand span{color:var(--mute)}.login-box label{display:flex;flex-direction:column;gap:.3rem;margin:.8rem 0;font-size:.85rem;color:var(--mute)}
.sr{position:absolute;left:-9999px}
form.inline{display:inline-block;margin:2px 4px 2px 0}

/* dashboards */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;margin:0 0 1.4rem}
.tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;display:flex;flex-direction:column;gap:.25rem}
.tile .n{font-size:2rem;font-weight:400;line-height:1.1}.tile .n .mute{font-size:1rem}
.tile .k{font-size:.82rem;color:var(--mute)}
.tile[class*=c-]{border-color:transparent;background:var(--tcs)}.tile[class*=c-] .n{color:var(--tc)}
.c-blue{--tc:#1a73e8;--tcs:#e8f0fe}.c-red{--tc:#c5221f;--tcs:#fce8e6}.c-amber{--tc:#b06000;--tcs:#fef7e0}.c-green{--tc:#188038;--tcs:#e6f4ea}
.c-orange{--tc:#c26401;--tcs:#feefe3}.c-teal{--tc:#007b83;--tcs:#e4f7fb}.c-purple{--tc:#8430ce;--tcs:#f3e8fd}
@media(prefers-color-scheme:dark){.c-blue{--tc:#8ab4f8;--tcs:#273349}.c-red{--tc:#f28b82;--tcs:#3d2624}.c-amber{--tc:#fdd663;--tcs:#3b3420}
  .c-green{--tc:#81c995;--tcs:#22352a}.c-orange{--tc:#fcad70;--tcs:#3d2e22}.c-teal{--tc:#78d9ec;--tcs:#1f3539}.c-purple{--tc:#d7aefb;--tcs:#352a40}}
.dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:currentColor;vertical-align:middle}
#live.stale .tiles,#live.stale .card{opacity:.55}
.pcgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.7rem}
.pcgrid .pc{display:flex;flex-direction:column;gap:.2rem;padding:.65rem .85rem;border:1px solid var(--line);border-left:4px solid currentColor;border-radius:12px;font-size:.85rem;min-width:0;background:var(--card)}
.pcgrid .pc:hover{box-shadow:var(--lift);text-decoration:none}
.pcgrid .pc b{color:var(--ink);font-weight:500;overflow-wrap:anywhere}.pcgrid .pc .mute{font-size:.78rem}.pcgrid .pc .err{font-size:.75rem;overflow-wrap:anywhere}
.pcgrid .pc.mute{border-style:dashed}.pcgrid .pc .pill{align-self:flex-start}
p.k{font-size:.82rem;color:var(--mute);margin:.4rem 0 .2rem}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}.titlebar h1{margin:0}
a.btnlink{display:inline-block;font:500 .88rem var(--font);padding:.55rem 1.2rem;border:1px solid var(--line);border-radius:999px;color:var(--accent-ink);background:var(--card)}
a.btnlink:hover{background:var(--accent-soft);text-decoration:none}

/* charts (drawn on the server: charts.py) */
.panels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1.2rem}.panels.three{grid-template-columns:repeat(3,minmax(0,1fr))}.panels.three .wide{grid-column:1/-1}
.panel{margin-bottom:1.2rem}
p.range{display:flex;gap:.4rem;flex-wrap:wrap;margin:.2rem 0 1.2rem}
p.range a,p.range b{font-size:.82rem;font-weight:500;padding:.3rem .9rem;border:1px solid var(--line);border-radius:999px}
p.range b{background:var(--accent-soft);color:var(--accent-ink);border-color:transparent}
svg.chart{width:100%;height:auto;display:block;margin:.2rem 0 1rem}svg.chart .axis{font-size:10px;fill:var(--mute)}
svg.lc{width:100%;height:auto;display:block}
svg.lc .gl{stroke:var(--line-soft);stroke-width:1}
svg.lc .yl{font:10px var(--font);fill:var(--mute);text-anchor:end}svg.lc .xl{font:10px var(--font);fill:var(--mute)}
svg.lc .ln{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
svg.lc .area{stroke:none;opacity:.12}svg.lc .pt{stroke:var(--card);stroke-width:1.5}
.lg{display:flex;gap:1.1rem;flex-wrap:wrap;font-size:.8rem;color:var(--mute);margin:.4rem 0 0}
.lg i,.dl i{display:inline-block;width:.65rem;height:.65rem;border-radius:50%;margin-right:.4rem;vertical-align:middle}.lg b{color:var(--ink);margin-left:.2rem}
.donut{display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap}.donut svg{width:170px;height:170px;flex:none}
.donut .ring{fill:none;stroke:var(--line-soft)}.donut .arc{fill:none}
.donut .mid{font:400 30px var(--font);fill:var(--ink);text-anchor:middle}.donut .midk{font:11px var(--font);fill:var(--mute);text-anchor:middle}
.dl{list-style:none;margin:0;padding:0;font-size:.85rem;min-width:0;flex:1}
.dl li{display:flex;align-items:center;gap:.2rem;padding:.25rem 0;border-bottom:1px solid var(--line-soft)}
.dl li span{flex:1;overflow-wrap:anywhere}.dl li b{margin-left:.6rem;font-weight:500}.dl li.zero{opacity:.45}
/* series colours: one class per key, used by lines, areas, dots, arcs and legend chips */
.s-checkins{--c:var(--accent)}.s-installs,.s-online,.s-applied{--c:var(--good)}.s-failures,.s-silent,.s-failed{--c:var(--bad)}
.s-quiet{--c:var(--mute)}.s-offline,.s-waiting{--c:var(--warn)}.s-dry_run{--c:var(--orange)}
.s-v0{--c:var(--accent)}.s-v1{--c:var(--teal)}.s-v2{--c:var(--orange)}.s-v3{--c:#a142f4}.s-v4{--c:#f9ab00}.s-v5{--c:#e52592}
.s-red{--c:var(--bad)}.s-amber{--c:var(--warn)}.s-info{--c:var(--mute)}
svg .ln[class*=s-],svg .arc[class*=s-]{stroke:var(--c)}svg .area[class*=s-],svg .pt[class*=s-]{fill:var(--c)}i[class*=s-]{background:var(--c)}

/* narrow screens: the bar folds into a menu button */
.burger{display:none;margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:999px;padding:.55rem .6rem;flex-direction:column;gap:4px}
.burger span{display:block;width:18px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s,opacity .2s}
.burger:hover{background:var(--bg);box-shadow:none}
header.open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}header.open .burger span:nth-child(2){opacity:0}header.open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:1100px){
  header{padding:.45rem 1rem}
  .burger{display:flex}
  header .nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:.1rem;padding:.4rem 0 .6rem}
  header.open .nav{display:flex}
  header .nav form{margin:.4rem 0 0;padding:.7rem .2rem 0;border-top:1px solid var(--line-soft);justify-content:space-between}
}
@media(max-width:900px){
  .panels,.panels.three{grid-template-columns:minmax(0,1fr)}
  .donut{flex-direction:column;align-items:stretch}.donut svg{width:150px;height:150px;align-self:center}
  th,td{padding:.4rem;font-size:.85rem}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}.tile .n{font-size:1.6rem}
  .titlebar{flex-direction:column;align-items:flex-start;gap:.6rem}
  h1{font-size:1.5rem;overflow-wrap:anywhere}
}
@media(max-width:700px){main{padding:1.2rem .9rem 2rem}.card{padding:.9rem}svg.lc .yl,svg.lc .xl{font-size:20px}svg.lc .pt{r:5px}svg.chart .axis{font-size:22px}}