/* pgCellar: warm, light by default, one wine-red accent, dark by preference.
   No webfont, no external resource. Palette notes are in docs/DECISIONS.md. */
:root{
  --bg:#FBF8F3;--card:#FFFFFF;--soft:#F3EDE4;--tx:#1F1B18;--mut:#6B625A;--line:#E6DED3;
  --acc:#8E1F3F;--acc-ink:#FFFFFF;--acc-soft:#F6E6EA;
  --ok:#1D7A4B;--ok-soft:#E3F3EA;--warn:#8F5600;--warn-soft:#FBEFD5;--bad:#B3261E;--bad-soft:#FBE7E5;
  --code:#F3EDE4;--shadow:0 1px 2px rgba(60,40,20,.06),0 4px 14px rgba(60,40,20,.06);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:14px;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#1C1917;--card:#26211E;--soft:#2E2824;--tx:#F3ECE4;--mut:#B3A89D;--line:#3B3430;
  --acc:#F0839F;--acc-ink:#2A0E16;--acc-soft:#3A2229;
  --ok:#5CCB92;--ok-soft:#1F3027;--warn:#EBB657;--warn-soft:#37290F;--bad:#FF8A80;--bad-soft:#3C201E;
  --code:#171412;--shadow:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--tx);font:17px/1.5 var(--sans)}
a{color:var(--acc);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
.wrap{max-width:52rem;margin:0 auto;padding-inline:1.25rem}
h1,h2,h3{line-height:1.15;margin:0 0 .5em;letter-spacing:-.02em}
h1{font-size:clamp(2rem,6vw,2.7rem);font-weight:800}
h2{font-size:1.4rem;font-weight:750}
h3{font-size:1.1rem}
p{margin:0 0 1em;max-width:42rem}
code,pre{font-family:var(--mono);font-size:.88em}
code{background:var(--code);padding:.1em .35em;border-radius:6px}
small,.muted{color:var(--mut)}
main{padding-block:2rem 4rem;min-height:70vh}
section{margin-bottom:2.2rem}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:6px}

/* header */
.top{border-bottom:1px solid var(--line)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.5rem;padding-block:.9rem}
.logo{color:var(--tx);font-weight:800;text-decoration:none;font-size:1.3rem;letter-spacing:-.03em}
.logo{display:inline-flex;align-items:center;gap:.45rem}
.logo span{color:var(--acc)}
.logo svg{width:28px;height:28px;color:var(--acc);transform-origin:50% 100%}
@media (prefers-reduced-motion:no-preference){.logo:hover svg{animation:sway .9s ease-in-out 1}}
@keyframes sway{30%{transform:rotate(-6deg)}70%{transform:rotate(4deg)}}
.bar nav{display:flex;flex-wrap:wrap;gap:.3rem;flex:1}
.bar nav a{color:var(--mut);text-decoration:none;padding:.45rem .9rem;border-radius:999px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.bar nav a:hover{color:var(--tx);background:var(--soft)}
.bar nav a.on{color:var(--acc);background:var(--acc-soft)}
.who{display:flex;align-items:center;gap:.7rem;color:var(--mut);font-size:.92rem}
.who em{font-style:normal}
button.link{background:none;border:0;color:var(--acc);cursor:pointer;font:inherit;font-weight:600;padding:.6rem .3rem;min-height:44px;text-decoration:underline}
.devbar{background:var(--warn-soft);color:var(--warn);text-align:center;font-size:.85rem;padding:.4rem 1rem}
.foot{border-top:1px solid var(--line);padding-block:1.4rem 2.5rem;color:var(--mut);font-size:.9rem}

/* page heads and buttons */
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.8rem 1rem;margin-bottom:1rem}
.head h1{margin:0}
.btns{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--acc);color:var(--acc-ink);font:inherit;font-weight:700;padding:.65rem 1.4rem;min-height:44px;border:2px solid var(--acc);border-radius:999px;text-decoration:none;cursor:pointer;line-height:1.2}
.btn:hover{filter:brightness(1.1);text-decoration:none}
.btn.alt{background:transparent;color:var(--acc)}
.btn.alt:hover{background:var(--acc-soft);filter:none}
.btn[disabled]{opacity:.55;cursor:progress}
.busy{display:none;color:var(--mut);font-weight:600}
.busy.htmx-request{display:inline}
.htmx-target{margin-top:.8rem}

/* cards, rows */
.card,.runbox,fieldset{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.card{padding:1.2rem 1.4rem}
.rows{display:grid;gap:.7rem;margin:0;padding:0;list-style:none}
.row{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:.9rem 1.2rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem 1.2rem;box-shadow:var(--shadow)}
.row .grow{flex:1 1 14rem;min-width:0}
.row .meta{color:var(--mut);font-size:.92rem}
.row.bad{border-color:var(--bad);background:var(--bad-soft)}
.row .msg{flex-basis:100%;overflow-wrap:anywhere}
.num{white-space:nowrap}

/* status headline and server lines */
.headline{display:flex;flex-direction:column;gap:.2rem;padding:1.4rem 1.6rem;border-radius:var(--r);margin-bottom:1.4rem;border:1px solid var(--line);background:var(--card)}
.headline h1{margin:0;font-size:clamp(1.7rem,5.5vw,2.4rem)}
.headline p{margin:0;color:var(--mut)}
.headline.ok{background:var(--ok-soft);border-color:var(--ok)}
.headline.warn{background:var(--warn-soft);border-color:var(--warn)}
.headline.fail{background:var(--bad-soft);border-color:var(--bad)}
.srv{background:var(--card);border:1px solid var(--line);border-left:6px solid var(--mut);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.srv.lv-ok{border-left-color:var(--ok)}.srv.lv-warn{border-left-color:var(--warn)}.srv.lv-fail{border-left-color:var(--bad)}
.srv>a{display:block;padding:1rem 1.3rem;color:inherit;text-decoration:none}
.srv>a:hover{background:var(--soft)}
.srv .top1{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .8rem}
.srv .name{font-size:1.25rem;font-weight:750;letter-spacing:-.01em}
.srv .lines{margin-top:.25rem;color:var(--mut);font-size:.95rem}
.srv .lines div{margin-top:.1rem}
.srv>a:has(+.lines.tail){padding-bottom:.1rem}
.srv .lines.tail{margin:0;padding:0 1.3rem 1rem}
.srv .lines.tail>div{margin:0}
a.pill{text-decoration:none}
a.pill:hover{text-decoration:underline}
.srv .probs{margin:0;padding:.7rem 1.3rem .9rem 2.6rem;border-top:1px dashed var(--line);font-size:.95rem}
.srv .probs li{margin:.15rem 0}
.srv.lv-fail .probs{background:var(--bad-soft)}
.srv.lv-warn .probs{background:var(--warn-soft)}
.dot{display:inline-block;width:.75rem;height:.75rem;border-radius:50%;background:var(--mut)}
.dot.ok{background:var(--ok)}.dot.warn{background:var(--warn)}.dot.fail{background:var(--bad)}
.lvl{font-weight:700;display:inline-flex;align-items:center;gap:.4rem}
.lvl.ok{color:var(--ok)}.lvl.warn{color:var(--warn)}.lvl.fail{color:var(--bad)}
.pill{display:inline-block;font-size:.8rem;font-weight:700;padding:.1rem .65rem;border-radius:999px;border:1px solid var(--line);background:var(--soft);color:var(--tx);white-space:nowrap}
.pill.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-soft)}
.pill.warn{color:var(--warn);border-color:var(--warn);background:var(--warn-soft)}
.pill.bad{color:var(--bad);border-color:var(--bad);background:var(--bad-soft)}
.warnt{color:var(--warn)}
.problems{margin:0;padding-left:1.2rem}

/* messages, notes, empty states */
.flash{padding:.8rem 1.1rem;border-radius:var(--r);margin-bottom:1rem;border:1px solid var(--line);background:var(--card)}
.flash.ok{border-color:var(--ok);background:var(--ok-soft)}
.flash.warn{border-color:var(--warn);background:var(--warn-soft)}
.flash.bad{border-color:var(--bad);background:var(--bad-soft)}
.flash ul{margin:.3rem 0 0;padding-left:1.1rem}
.softnote{background:var(--soft);border-radius:var(--r);padding:.8rem 1.1rem;margin:0 0 1rem;color:var(--tx)}
.softnote ul{margin:0;padding-left:1.1rem}
.empty{text-align:center;color:var(--mut);padding:2.2rem 1rem;border:2px dashed var(--line);border-radius:var(--r)}
.empty::before{content:"";display:block;width:80px;height:80px;margin:0 auto .9rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23C9BEB2'%3E%3Cpath d='M48 6c9 0 16 8 16 20 0 11-6 19-15 21L38 38 34 18c3-8 8-12 14-12z'/%3E%3Cpath d='M14 63c0-12 9-19 22-19h17c7 0 11 7 11 19z'/%3E%3Ccircle cx='35' cy='33' r='16' stroke='%23FBF8F3' stroke-width='2.5'/%3E%3Cpath d='M27 42C14 49 6 45 7 31' fill='none' stroke='%23C9BEB2' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M1 3h12c0 8-3 12-6 12S1 11 1 3z'/%3E%3Cpath d='M7 14v12' stroke='%23C9BEB2' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M3 6h8' stroke='%23FBF8F3' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='29' r='2.4' fill='%23FBF8F3'/%3E%3Cpath d='M50 18c5 3 7 9 5 15' fill='none' stroke='%23FBF8F3' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-color-scheme:dark){.empty::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23463D37'%3E%3Cpath d='M48 6c9 0 16 8 16 20 0 11-6 19-15 21L38 38 34 18c3-8 8-12 14-12z'/%3E%3Cpath d='M14 63c0-12 9-19 22-19h17c7 0 11 7 11 19z'/%3E%3Ccircle cx='35' cy='33' r='16' stroke='%231C1917' stroke-width='2.5'/%3E%3Cpath d='M27 42C14 49 6 45 7 31' fill='none' stroke='%23463D37' stroke-width='8' stroke-linecap='round'/%3E%3Cpath d='M1 3h12c0 8-3 12-6 12S1 11 1 3z'/%3E%3Cpath d='M7 14v12' stroke='%23463D37' stroke-width='2.6' stroke-linecap='round'/%3E%3Cpath d='M3 6h8' stroke='%231C1917' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='29' r='2.4' fill='%231C1917'/%3E%3Cpath d='M50 18c5 3 7 9 5 15' fill='none' stroke='%231C1917' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}}
.empty strong{display:block;color:var(--tx);font-size:1.25rem;margin-bottom:.3rem}
.empty p{margin-inline:auto}
.fix{margin-top:.3rem;font-size:.95rem}
.cheer{font-size:1.25rem;font-weight:750;margin:0 0 .4rem}

/* overview facts */
dl.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.9rem 1.5rem;margin:0}
dl.facts dt{color:var(--mut);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
dl.facts dd{margin:.1rem 0 0}

/* run output */
.runbox{padding:.9rem 1.2rem;margin:.8rem 0}
pre.out{background:var(--code);border:1px solid var(--line);color:var(--tx);padding:.8rem 1rem;border-radius:10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;max-height:28rem;overflow-y:auto;font-size:.82rem;line-height:1.45}
pre.out.err{border-color:var(--bad)}
pre.diff{white-space:pre}

/* forms */
form{margin:0}
form.grid{display:grid;gap:1rem}
fieldset{padding:1.2rem 1.4rem;margin:0;min-width:0}
legend{font-weight:750;font-size:1.05rem;padding:0 .5rem}
fieldset[disabled]{opacity:.8}
label{display:block;font-weight:600;margin-bottom:1rem}
label small{display:block;font-weight:400;margin-top:.25rem}
input[type=text],input[type=password],input[type=number],input[type=datetime-local],input[type=date],input[type=time],select{display:block;width:100%;margin-top:.3rem;padding:.7rem .9rem;min-height:46px;background:var(--bg);color:var(--tx);border:1px solid var(--mut);border-radius:12px;font:inherit}
input[type=datetime-local],input[type=date],input[type=time]{color-scheme:inherit;font-family:inherit}
input:focus,select:focus{outline:3px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
label.chk{display:flex;gap:.6rem;align-items:center;min-height:44px}
input[type=checkbox]{width:1.25rem;height:1.25rem;accent-color:var(--acc)}
.actions{padding-top:.3rem}

/* login and errors */
.login{max-width:24rem;margin:3rem auto 2rem;text-align:center}
.login .art{margin:0 auto 1rem;color:var(--acc)}
.login .art svg{display:block;width:150px;height:150px;margin:0 auto}
.login .ascii{display:none;margin:0 auto 1rem;overflow:hidden;max-width:100%;font:12px/1.15 var(--mono);color:var(--acc);text-align:left;white-space:pre;width:max-content}
@media (prefers-color-scheme:dark){.login .art svg{display:none}.login .ascii{display:block}}
.login .brand{font-size:2.6rem;font-weight:800;letter-spacing:-.04em;margin-bottom:.2rem}
.login .brand span{color:var(--acc)}
.login h1{font-size:1.1rem;font-weight:600;color:var(--mut);margin-bottom:1.6rem}
.login form{text-align:left}
.login .btn{width:100%;margin-top:.3rem}
.login .motto{text-align:center;margin:0 auto 1.6rem;color:var(--mut)}
.errorpage{text-align:center;padding:3rem 0}
.errorpage svg{display:block;width:120px;height:120px;margin:0 auto 1rem;color:var(--mut)}
.errorpage h1{font-size:3.5rem;color:var(--acc)}
.errorpage p{margin-inline:auto}

@media (max-width:560px){body{font-size:16px}main{padding-block:1.2rem 3rem}.bar nav{order:3;flex-basis:100%}.who{margin-left:auto}.srv>a{padding:.9rem 1rem}.card{padding:1rem}fieldset{padding:1rem}.btns .btn{flex:1 1 auto}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.actionbar{margin:0 0 2.2rem}
.help{color:var(--mut);font-size:.88rem;margin-top:.2rem;max-width:34rem}
.wrapany,.row code,.row .grow{overflow-wrap:anywhere;word-break:break-word}
dl.facts>div{min-width:0}
details.oks{margin-top:.2rem}
details.oks summary{cursor:pointer;font-weight:700;padding:.6rem .2rem;min-height:44px;display:flex;align-items:center;gap:.4rem}
details.oks[open] summary{margin-bottom:.4rem}
.srv .lines div,.srv .probs li,.row .msg,.flash,dl.facts dd{overflow-wrap:anywhere}

/* stable action rows: id | details | button, button underneath below 500px */
.row.cols{display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto;align-items:center;gap:.3rem 1.2rem}
.row.cols .id{min-width:0}
.row.cols .metas{display:flex;flex-wrap:wrap;align-items:baseline;gap:.1rem 1rem;min-width:0}
.row.cols .act{display:flex;gap:.5rem;justify-content:flex-end;min-width:0}
.row.cols .msg{grid-column:1/-1}
dl.paths{margin:0 0 1rem}
dl.paths dt{color:var(--mut);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
dl.paths dd{margin:.1rem 0 .9rem;min-width:0;overflow-wrap:anywhere}
@media (max-width:500px){.row.cols{grid-template-columns:minmax(0,1fr)}.row.cols .act{justify-content:flex-start}.row.cols .act:empty{display:none}}

/* server setup */
.row.warnrow{border-color:var(--warn);background:var(--warn-soft)}
.row.inforow{box-shadow:none}
.row.inforow .grow strong,.row.inforow .msg{color:var(--mut)}
.setuppill{display:inline-block;margin:0 1.3rem .8rem;text-decoration:none}
.setuppill:hover{text-decoration:underline}
pre.fixbox{margin:.5rem 0 .2rem;background:var(--code);border:1px solid var(--line);color:var(--tx);padding:.6rem .85rem;border-radius:10px;overflow-x:auto;white-space:pre-wrap;word-break:break-word;font-size:.85rem;line-height:1.45;user-select:all}
.fixnote{color:var(--mut);font-size:.88rem}

/* Timeline picture (SVG made by the server) */
.tl-wrap{overflow-x:auto;margin:0 -.2rem}
svg.tl{display:block;width:100%;min-width:28rem;height:auto;font-family:var(--sans);font-size:12px}
.tl text{fill:var(--tx)}
.tl .tl-axis{fill:var(--mut);font-size:11px}
.tl .tl-axis.major{fill:var(--tx);font-weight:700}
.tl .tl-sub{fill:var(--mut);font-size:11px}
.tl .tl-grid{stroke:var(--line);stroke-width:1}
.tl .tl-band{fill:var(--line);opacity:.45}
.tl .tl-bk{fill:var(--tx);stroke:var(--card);stroke-width:1}
.tl .tl-bk.bad{fill:var(--bad)}
.tl .tl-bk.warn{fill:var(--warn)}
.tl .tl-wal{fill:var(--ok)}
.tl .tl-hole{stroke:var(--bad);stroke-width:1}
.tl .tl-hatch-bg{fill:var(--bad-soft)}
.tl .tl-hatch-ln{stroke:var(--bad);stroke-width:2}
.tl .tl-live{stroke:var(--ok);stroke-width:3}
.tl .tl-now{stroke:var(--mut);stroke-width:1.5}
.tl .tl-next{stroke:var(--mut);stroke-width:1.5}
.tl .tl-back{stroke:var(--acc);stroke-width:2}
.tl .tl-back-bar{fill:var(--acc)}
.tl text.tl-back-t{fill:var(--acc);font-weight:700;font-size:13px}
.tl .tl-tli{fill:var(--mut)}
.tl .tl-tli.cur{fill:var(--ok)}
.tl .tl-link{stroke:var(--mut);stroke-width:1.5;fill:none}
.tl .tl-dot{fill:var(--mut)}
.tl-summary{margin:.8rem 0 .2rem;font-weight:600;overflow-wrap:anywhere}
.tl-legend{list-style:none;margin:.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.2rem 1rem;color:var(--mut);font-size:.82rem}
.tl-legend .sw{display:inline-block;width:.9rem;height:.5rem;margin-right:.35rem;border-radius:2px;vertical-align:middle}
.tl-legend .sw.bk{background:var(--tx)}
.tl-legend .sw.wal{background:var(--ok)}
.tl-legend .sw.hole{background:repeating-linear-gradient(45deg,var(--bad-soft) 0 3px,var(--bad) 3px 5px)}
.tl-legend .sw.live{background:repeating-linear-gradient(90deg,var(--ok) 0 2px,transparent 2px 5px)}
.tl-legend .sw.band{background:var(--line)}
.tl-hint{font-size:.8rem;margin:.2rem 0 0}
@media (min-width:700px){.tl-hint{display:none}}

/* header on one line from 900px; nav on its own line below */
.bar{gap:.4rem 1rem}
.logo,.who{flex-shrink:0}
.bar nav{gap:.1rem}
.bar nav a{padding:.45rem .7rem}
@media (max-width:899px){.bar nav{order:3;flex-basis:100%}.who{margin-left:auto}}
@media (min-width:900px){.bar{flex-wrap:nowrap}}
.top .wrap.bar{max-width:68rem}
.drillhero.ok{border-left:4px solid var(--ok,#1a8a4d)}
.drillhero.bad{border-left:4px solid var(--bad,#c62828)}
.drillhero p{margin:0 0 .4rem}
.stbar{display:flex;height:.5rem;margin:.6rem 0;background:var(--soft);border:1px solid var(--line);border-radius:999px;overflow:hidden}
.stbar i{background:var(--mut);opacity:.5}
.stbar b{background:var(--acc)}
.stline{margin:.5rem 0 0;font-weight:600}
.stline.warn{color:var(--warn)}
.stline.fail{color:var(--bad)}

/* Public demo: permanent banner, locked buttons */
.demobar{background:var(--acc);color:var(--acc-ink);text-align:center;font-size:.9rem;font-weight:600;padding:.45rem 1rem}
.demobar a{color:inherit;text-decoration:underline}
.demo-locked,.demo-locked[disabled]{opacity:.5;cursor:not-allowed}
.demo-try{margin-top:1rem;text-align:center}
.demo-try .hint{margin:.4rem 0 0;font-size:.85rem;color:var(--muted,inherit);opacity:.8}
.foot a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:.15em}
.foot a:hover{color:var(--tx);text-decoration-color:currentColor}