/* ScriptIt console (2026-11-12, Matt: "make the website match the landing page style and colour, especially the dark one"): the same
   terminal look as www.scriptit.dev (site/static/site.css): monospace throughout, a green prompt accent, near-black with a green tint in dark
   mode, macOS Terminal's Basic-profile white in light mode. The variables below carry the site's palette under the console's own names, so
   every page and scriptit.css follow. No scan lines or blinking cursor here: this is the working console, not the brochure. */
:root{--ink:#1d1d1f;--mute:#515156;--faint:#86868b;--bg:#ffffff;--bg2:#f6f6f7;--card:#ffffff;--line:#d2d2d7;--line-soft:#e5e5e7;--hover:rgba(0,0,0,.04);
  --accent:#1a7f37;--accent-ink:#1a7f37;--accent-hover:#116329;--accent-soft:rgba(26,127,55,.07);--tint-line:rgba(26,127,55,.25);--on-accent:#ffffff;
  --good:#1a7f37;--warn:#9a6700;--bad:#cf222e;--teal:#0a58ca;--orange:#9a6700;--violet:#8250df;
  --bar:linear-gradient(#ececec,#e2e2e2);--red-dot:#ff5f57;--amber-dot:#febc2e;--green-dot:#28c840;--shadow:rgba(0,0,0,.10);
  --term-shadow:0 22px 60px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.22);
  --mono:ui-monospace,"JetBrains Mono","Cascadia Code","SF Mono",Menlo,Consolas,"Liberation Mono",monospace;--font:var(--mono);
  --scan:transparent;--glow:rgba(26,127,55,.06);--r:10px;--r-sm:6px;color-scheme:light}
@media(prefers-color-scheme:dark){:root{--ink:#d7e2da;--mute:#8a9a8f;--faint:#5d6b62;--bg:#0b0f0c;--bg2:#101612;--card:#131a15;--line:#2b3a2f;--line-soft:#1f2a22;--hover:rgba(255,255,255,.04);
  --accent:#34d399;--accent-ink:#34d399;--accent-hover:#10b981;--accent-soft:rgba(52,211,153,.08);--tint-line:rgba(52,211,153,.22);--on-accent:#04130b;
  --good:#34d399;--warn:#fbbf24;--bad:#f87171;--teal:#7dd3fc;--orange:#fbbf24;--violet:#c4b5fd;
  --bar:#18211b;--red-dot:#f87171;--amber-dot:#fbbf24;--green-dot:#34d399;--shadow:rgba(0,0,0,.35);
  --term-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 1px rgba(52,211,153,.04);--scan:rgba(255,255,255,.018);--glow:rgba(52,211,153,.10);color-scheme:dark}}
/* the landing page's texture (2026-11-12, Matt: "the same texture as the landing page, I really like that wrinkle look"): hairline scan lines over
   the whole console in dark mode (transparent in light, as on the site) that never catch a click, and the site's soft green glow behind each
   page's top. Both are the site's own values (site/static/site.css body::before and .hero::after). */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
main{position:relative}
main::before{content:"";position:absolute;left:50%;top:-40px;width:720px;max-width:100%;height:420px;transform:translateX(-50%);background:radial-gradient(closest-side,var(--glow),transparent);pointer-events:none;z-index:-1}

*{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);color:var(--on-accent)}
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.15rem;letter-spacing:-.01em}
header .brand:hover{text-decoration:none}
header .brand svg{width:30px;height:30px;flex:none}
header .brand b{font-weight:700}header .brand span{color:var(--accent)}
header .nav{display:contents}
header .nav>a{color:var(--mute);font-size:.9rem;font-weight:500;padding:.5rem .85rem;border-radius:var(--r-sm)}
header .nav>a:hover{background:var(--hover);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.75rem;line-height:1.2;font-weight:700;letter-spacing:-.02em}
h2{margin:0 0 .8rem;font-size:1.05rem;font-weight:600}
h3{font-size:.95rem;font-weight:600;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(--hover)}

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:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--tint-line)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent);width:1rem;height:1rem;padding:0}
/* buttons, as the site's .btn: filled green, a ghost (green text on nothing) and a red ghost; hover is the site's green ring, not a lift */
button{font:600 .88rem var(--font);padding:.5rem 1.1rem;border:1px solid var(--accent);border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);cursor:pointer;
  transition:box-shadow .15s,background .15s,border-color .15s}
button:hover{background:var(--accent-hover);border-color:var(--accent-hover);box-shadow:0 0 0 3px var(--tint-line)}
button:focus-visible{outline:none;box-shadow:0 0 0 3px var(--tint-line)}
button.plain{background:transparent;color:var(--accent-ink)}
button.plain:hover{background:var(--accent-soft);border-color:var(--accent)}
button.danger,button.plain.bad{background:transparent;color:var(--bad);border-color:var(--bad)}
button.danger:hover,button.plain.bad:hover{background:color-mix(in srgb,var(--bad) 10%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 25%,transparent)}

.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 .55rem;border-radius:4px;font-size:.75rem;font-weight:500;background:transparent;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:1px solid var(--tint-line);border-radius:var(--r-sm);padding:.8rem 1.1rem;margin:0 0 1.2rem;word-break:break-all}
.copy-line{display:flex;gap:.6rem;align-items:center;margin-top:.6rem}.copy-line code{flex:1;min-width:0;user-select:all;word-break:break-all}.copy-link{flex:none;padding:.3rem .8rem;font-size:.85rem}
.secret.warn{background:color-mix(in srgb,var(--warn) 10%,var(--card));border-color:color-mix(in srgb,var(--warn) 35%,transparent);color:var(--ink)}
code{font-family:var(--mono);font-size:.9em;background:var(--bg2);color:var(--ink);padding:.05rem .4rem;border:1px solid var(--line-soft);border-radius:4px}
pre{font-family:var(--mono);font-size:.85rem;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r-sm);padding:.8rem 1rem;overflow-x:auto}
pre code{background:none;border:0;padding:0;color:inherit}

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}   /* AppOpen, the umbrella brand (2026-11-01) */

/* sign-in pages: the landing page's terminal window (title bar with the three dots, then the prompt) around the unchanged forms */
.login-box{max-width:440px;margin:8vh auto 0;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--term-shadow);overflow:hidden}
.login-box .bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--bar);border-bottom:1px solid var(--line-soft)}
.login-box .bar i{width:11px;height:11px;border-radius:50%;flex:none}
.login-box .bar i:nth-child(1){background:var(--red-dot)}.login-box .bar i:nth-child(2){background:var(--amber-dot)}.login-box .bar i:nth-child(3){background:var(--green-dot)}
.login-box .bar span{margin-left:10px;color:var(--faint);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.login-box .body{padding:1.6rem 1.8rem 1.5rem}
.login-box .brand{display:flex;align-items:center;gap:.6rem;font-size:1.35rem;font-weight:700;margin-bottom:1rem}.login-box .brand svg{width:36px;height:36px}
.login-box .brand span{color:var(--accent)}
.login-box .prompt{margin:0 0 .9rem;color:var(--mute);font-size:.9rem}.login-box .prompt b{color:var(--accent);font-weight:400;margin-right:.4rem}
.login-box label{display:flex;flex-direction:column;gap:.3rem;margin:.8rem 0;font-size:.85rem;color:var(--mute)}
.login-box .or{display:flex;align-items:center;gap:.7rem;margin:1.1rem 0 .9rem;color:var(--mute);font-size:.8rem}.login-box .or::before,.login-box .or::after{content:"";flex:1;border-top:1px solid var(--line-soft)}
.login-box button.wide{width:100%}
.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:600;line-height:1.1;letter-spacing:-.02em}.tile .n .mute{font-size:1rem;font-weight:400}
.tile .k{font-size:.82rem;color:var(--mute)}
/* a coloured tile: the site's icon-box treatment, a tint of its colour with a tinted line, the number in the colour itself */
.tile[class*=c-]{border-color:color-mix(in srgb,var(--tc) 25%,transparent);background:color-mix(in srgb,var(--tc) 8%,var(--card))}.tile[class*=c-] .n{color:var(--tc)}
.c-blue{--tc:var(--teal)}.c-red{--tc:var(--bad)}.c-amber{--tc:var(--warn)}.c-green{--tc:var(--good)}
.c-orange{--tc:var(--orange)}.c-teal{--tc:var(--teal)}.c-purple{--tc:var(--violet)}
.dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%;background:currentColor;vertical-align:middle}
#live.stale .tiles,#live.stale .card{opacity:.55}
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:600 .88rem var(--font);padding:.5rem 1.1rem;border:1px solid var(--accent);border-radius:var(--r-sm);color:var(--accent-ink);background:transparent;transition:box-shadow .15s,background .15s}
a.btnlink:hover{background:var(--accent-soft);box-shadow:0 0 0 3px var(--tint-line);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:var(--r-sm)}
p.range b{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--tint-line)}
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:600 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; the site's five (green, amber, red, blue, violet) */
.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:var(--violet)}.s-v4{--c:var(--bad)}.s-v5{--c:var(--mute)}
.s-red{--c:var(--bad)}.s-amber{--c:var(--warn)}.s-info{--c:var(--teal)}
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:var(--r-sm);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(--hover);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}}
svg.ic{width:15px;height:15px;flex:none;opacity:.85}
svg.ms-logo{width:18px;height:18px;vertical-align:-3px;margin-right:.55rem;flex:none}
/* a slightly see-through header once the page scrolls (nav.js adds "scrolled"; the open phone menu stays solid) */
header{transition:background-color .2s}
header.scrolled{background:color-mix(in srgb,var(--card) 85%,transparent);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
header.scrolled.open{background:var(--card)}
/* icons in the top menu too (2026-11-07) */
header .nav>a{display:inline-flex;align-items:center;gap:.45rem}
/* light mode, as macOS Terminal: the window title centred in the grey title bar */
@media(prefers-color-scheme:light){.login-box .bar span{flex:1;text-align:center;margin:0 47px 0 0;color:#4d4d52}}