:root{
  --bg:#1b1b1d; --panel:#202023; --band:#26262a;
  --line:#2e2e33; --line2:#4a4a52;
  --fg:#e6e6e8; --fg2:#9a9aa3;
  --acc:#4cc2ff; --on-acc:#06080c;
  --ok:#22c55e; --warn:#f59e0b; --bad:#ef4444;
  --scrim:rgba(6,9,16,.8);
  --mono:ui-monospace,Menlo,Consolas,monospace;
  --fs1:11px; --fs2:12px; --fs3:14px; --fs4:16px; --fs5:24px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --r:8px; --top:52px;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);
  font:var(--fs3)/1.5 -apple-system,system-ui,"Segoe UI",Roboto,sans-serif}
a{color:inherit;text-decoration:none}
/* A display rule from this sheet outranks the browser hiding the element, so
   the attribute has to win explicitly. */
[hidden]{display:none!important}
svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}

.page{padding:var(--s5) var(--s5) 60px;width:100%;min-width:0}
h1{font-size:var(--fs5);font-weight:600}
h2{font-size:var(--fs3);font-weight:600;margin:var(--s5) 0 var(--s3)}
.desc{color:var(--fg2);max-width:70ch;margin:2px 0 18px}
.desc a{color:var(--acc)}
.tools{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;margin-bottom:var(--s4)}
.tools input{flex:1 1 220px;width:auto;max-width:400px}
.right{margin-left:auto}

.btn{display:inline-flex;align-items:center;gap:var(--s2);font:inherit;
  padding:var(--s2) var(--s3);border-radius:var(--r);border:1px solid var(--line);
  background:var(--panel);color:var(--fg);cursor:pointer;white-space:nowrap}
.btn:hover{border-color:var(--line2)}
.btn.p{background:var(--acc);border-color:var(--acc);color:var(--on-acc);font-weight:600}
.btn.p:hover{filter:brightness(1.15)}
.btn.d{color:var(--bad)}
.btn.icon{padding:var(--s2)}
.btn[disabled]{opacity:.4;cursor:default}

.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;background:var(--panel)}
.seg span{padding:var(--s2) var(--s3);cursor:pointer;color:var(--fg2);
  border-right:1px solid var(--line)}
.seg span:last-child{border-right:0}
.seg span.on{color:var(--fg);background:var(--band)}

input,select,textarea{font:inherit;color:var(--fg);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:var(--s2) var(--s3);
  width:100%;outline:none}
input:focus,select:focus,textarea:focus{outline:2px solid var(--line2);outline-offset:1px}

.field{display:flex;flex-direction:column;gap:var(--s1)}
.field>label{font-size:var(--fs1);letter-spacing:.5px;text-transform:uppercase;
  color:var(--fg2);font-weight:600}
.hint{color:var(--fg2);font-size:var(--fs2)}

.dot{width:8px;height:8px;border-radius:50%;background:var(--fg2);
  display:inline-block;flex:none}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}

.b{display:inline-flex;align-items:center;gap:var(--s1);font-size:var(--fs2);
  padding:2px var(--s2);border-radius:var(--r);background:var(--band);
  color:var(--fg2);border:1px solid var(--line);white-space:nowrap}
.b.ok{color:var(--ok)} .b.warn{color:var(--warn)} .b.bad{color:var(--bad)}

.tw{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:auto}
table{width:100%;border-collapse:collapse}
th{background:var(--band);text-align:left;font-size:var(--fs1);letter-spacing:.5px;
  text-transform:uppercase;color:var(--fg2);font-weight:600;
  padding:var(--s3) var(--s4);white-space:nowrap}
td{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);
  vertical-align:middle;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tr.link{cursor:pointer} tr.link:hover td{background:var(--band)}
td.wide{white-space:normal;min-width:220px}
td.end{text-align:right}
th.sort{cursor:pointer;user-select:none}
th.sort:hover,th.sort.on{color:var(--fg)}
th.sort::after{content:"";display:inline-block;width:0;height:0;
  margin-left:var(--s1);vertical-align:middle;
  border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:4px solid currentColor;opacity:0}
th.sort:hover::after{opacity:.4}
th.sort.on::after{opacity:1}
th.sort.on.asc::after{border-top:0;border-bottom:4px solid currentColor}

.sub{display:block;color:var(--fg2);font-size:var(--fs2)}
.stack{display:flex;flex-direction:column;gap:var(--s1)}
.row{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
.m{color:var(--fg2)}
.mono{font-family:var(--mono);font-size:var(--fs2)}

.card{background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:var(--s4);margin-bottom:var(--s3)}
.grid>.card,.mbody .card,.pub .card{margin-bottom:0}
.card h2{margin:0}
.card>*+*{margin-top:var(--s3)}
.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

.code{position:relative;display:block;font-family:var(--mono);font-size:var(--fs2);
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s3);padding-right:calc(var(--s4) + var(--s5));
  white-space:pre-wrap;overflow-wrap:anywhere}
.code.big{font-size:var(--fs5);letter-spacing:.12em;text-align:center;
  padding:var(--s4);padding-right:calc(var(--s4) + var(--s5))}
.code .copy{position:absolute;top:var(--s1);right:var(--s1);opacity:0;transition:opacity .12s}
.code:hover .copy,.code:focus-within .copy{opacity:1}
.code .copy.done{color:var(--ok)}
@media(hover:none){.code .copy{opacity:1}}

.empty{border:1px dashed var(--line2);border-radius:var(--r);
  padding:40px var(--s5);text-align:center;color:var(--fg2)}
.empty b{display:block;color:var(--fg);margin-bottom:var(--s1)}

.pager{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3);
  color:var(--fg2);font-size:var(--fs2)}
.pager .right{display:flex;gap:var(--s2);align-items:center}

.check{display:grid;grid-template-columns:auto 1fr;gap:var(--s1) var(--s2);
  align-items:center;cursor:pointer;font-weight:600}
.check input{width:16px;height:16px;padding:0;accent-color:var(--acc)}
.check .hint{grid-column:2;font-weight:400}

.rows{border:1px solid var(--line);border-radius:var(--r);
  background:var(--band);overflow:hidden}
.rows>*{padding:var(--s3)}
.rows>*+*{border-top:1px solid var(--line)}
.rows>.check:hover,.rows>.pick:hover{background:var(--panel)}

/* The same list option, choosing between several answers rather than two.
   The control sits at the end of the row and keeps its own width, so a row of
   them lines up whatever the labels say. */
.pick{display:grid;grid-template-columns:1fr auto;gap:var(--s1) var(--s3);
  align-items:center;cursor:pointer}
.pick>span{grid-column:1;font-weight:600}
.pick .hint{grid-column:1;font-weight:400}
.pick select{grid-column:2;grid-row:1/-1;width:auto;min-width:11rem}
.rows>.r{display:flex;gap:var(--s2);align-items:center}

.app{display:flex;flex-direction:column;min-height:100vh}
.topbar{position:sticky;top:0;z-index:30;height:var(--top);flex:none;
  display:flex;align-items:center;gap:var(--s3);padding:0 var(--s4);
  border-bottom:1px solid var(--line);background:var(--bg)}
.brand{display:flex;align-items:center;gap:var(--s2);font-size:var(--fs4);
  font-weight:600;margin-right:auto;color:var(--acc)}
.brand span{color:var(--fg)}
.brand svg{width:24px;height:24px}
.burger .close{display:none}
.shownav .burger .close{display:block}
.shownav .burger .open{display:none}
.av{margin-left:auto;width:32px;height:32px;border-radius:50%;
  background:var(--acc);color:var(--on-acc);display:flex;align-items:center;
  justify-content:center;font-size:var(--fs2);font-weight:600;flex:none;cursor:pointer}

.shell{display:flex;flex:1 1 auto;min-height:0}
aside{width:224px;flex:none;background:var(--bg);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:var(--top);
  height:calc(100vh - var(--top))}
nav{padding:var(--s2);display:flex;flex-direction:column;gap:2px}
nav a{display:flex;align-items:center;gap:var(--s2);
  padding:var(--s2) var(--s3);border-radius:var(--r);color:var(--fg2)}
nav a:hover{background:var(--panel);color:var(--fg)}
nav a.on{background:var(--band);color:var(--fg)}
nav a .n{margin-left:auto;background:var(--acc);color:var(--on-acc);
  border-radius:var(--r);padding:0 var(--s2);font-size:var(--fs1);font-weight:600}
nav hr{margin:var(--s2) var(--s1);border:0;border-top:1px solid var(--line)}
.spacebar{margin-top:auto;padding:var(--s3);border-top:1px solid var(--line)}
.main{flex:1 1 auto;min-width:0}
.drawer{display:none}

@media(min-width:768px){
  aside{overflow:hidden;transition:width .2s}
  :root:not(.shownav) aside{width:0;border-right:0}
  nav,.spacebar{width:224px}
}
@media(max-width:767px){
  aside{position:fixed;top:var(--top);left:0;z-index:40;width:min(284px,82vw);
    height:calc(100dvh - var(--top));transform:translateX(-100%);transition:transform .2s}
  .shownav aside{transform:none}
  .shownav .drawer{display:block;position:fixed;inset:var(--top) 0 0 0;
    background:var(--scrim);z-index:39}
  .brand span{display:none}
  .page{padding:var(--s4) var(--s4) 40px}
}

dialog{width:min(720px,100%);margin:min(10vh,64px) auto auto;padding:0;
  /* the offset above it, plus one spacing step below, or the box hangs off the bottom */
  max-height:calc(100dvh - min(10vh,64px) - var(--s5));
  overflow:hidden;background:var(--panel);color:var(--fg);
  border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 20px 60px rgba(0,0,0,.55)}
dialog[open]{display:flex;flex-direction:column}
dialog::backdrop{background:var(--scrim)}
/* Asking one question is not the same shape as editing a record: narrower,
   and sitting nearer the middle of the window than the top of it. */
.ask{width:min(440px,100%);margin:min(22vh,180px) auto auto}
.ask .mbody{gap:var(--s2)}
dialog>form{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}

.mhead{flex:none;display:flex;align-items:center;gap:var(--s3);
  padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.mhead h2{font-size:var(--fs4);font-weight:600;display:flex;
  align-items:center;gap:var(--s2);min-width:0}
.mhead .btn{margin-left:auto}
.mbody{flex:1 1 auto;min-height:0;overflow:auto;padding:var(--s4);
  display:flex;flex-direction:column;gap:var(--s3)}
.mfoot{flex:none;display:flex;align-items:center;gap:var(--s2);
  padding:var(--s3) var(--s4);border-top:1px solid var(--line)}
.mfoot .right{display:flex;gap:var(--s2)}
/* A table in a dialog has 720px, not a window. Tighter cells fit more of it
   before the row has to scroll sideways. */
.mbody th,.mbody td{padding:var(--s2) var(--s3)}

.tabs{flex:none;display:flex;gap:2px;padding:0 var(--s4);
  border-bottom:1px solid var(--line)}
.tab{padding:var(--s2) var(--s3);border:0;border-bottom:2px solid transparent;
  background:none;color:var(--fg2);font:inherit;font-weight:600;cursor:pointer}
.tab:hover{color:var(--fg)}
.tab.on{color:var(--acc);border-bottom-color:var(--acc)}

.btn.p.d{background:var(--bad);border-color:var(--bad);color:var(--on-acc)}

@media(max-width:767px){
  dialog{width:100%;max-width:none;height:100dvh;max-height:none;
    margin:0;border:0;border-radius:0}
  .mhead,.mbody,.mfoot,.tabs{padding-left:var(--s3);padding-right:var(--s3)}
}

@keyframes sp{to{transform:rotate(360deg)}}
@keyframes sh{to{background-position:-200% 0}}
@keyframes sl{to{transform:translateX(400%)}}

.spin{width:1em;height:1em;border:2px solid currentColor;
  border-right-color:transparent;border-radius:50%;
  display:inline-block;flex:none;animation:sp .6s linear infinite}
.btn[aria-busy]{pointer-events:none;opacity:.8}

.skel{display:block;height:1em;border-radius:var(--r);
  background:linear-gradient(90deg,var(--band) 25%,var(--line) 37%,var(--band) 63%);
  background-size:200% 100%;animation:sh 1.4s ease-in-out infinite}
.skel.n{width:38%}

.bar{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;
  overflow:hidden;opacity:0;transition:opacity .25s}
.bar.on{opacity:1}
.bar i{display:block;height:100%;width:25%;background:var(--acc);
  animation:sl 1.1s ease-in-out infinite}

@media(prefers-reduced-motion:reduce){
  .skel{animation:none;background:var(--band)}
  .bar i{animation:none;width:100%}
}

.pub{max-width:420px;margin:56px auto;padding:0 var(--s4)}
.pub .brand{justify-content:center;margin-bottom:var(--s3)}


a.link{color:var(--acc)}
.warn{color:var(--warn)}
.card.warn{border-color:var(--warn)}
.card.on{border-color:var(--acc)}
.av.sm{width:28px;height:28px;margin:0;font-size:var(--fs1);
  background:var(--band);color:var(--fg)}
.btn.wide{justify-content:center;width:100%}
.centre{text-align:center}
.code.out{min-height:120px}
input.narrow,select.narrow{max-width:10rem}
.stack.loose{gap:var(--s3)}
.page>.grid{margin-top:var(--s5)}