/* White Orca: the one stylesheet.
 *
 * The colours are the animal's: a pearl-white body with a pink flush, a ruby
 * eye, and the cold water it swims in. Ruby is the one loud colour (design
 * principle 6: a gap is quiet, a difference is loud). It marks what needs
 * the owner: a question, a failed delivery, a load past the core count, a
 * disk under 10% free. Kelp marks work in progress. Everything idle is dim.
 *
 * The scales and the control heights follow IDNA Pro's app.css (spec 4b):
 * 32px controls on a laptop, 44px wherever a finger may touch, every :hover
 * inside `hover: hover`.
 */
:root{
  color-scheme: light;
  --water:#0f3a47; --water-2:#165a6b; --water-ink:#eaf3f5;
  --bg:#eef3f4; --panel:#fbfdfd; --panel-2:#e6edef; --panel-3:#d9e3e6;
  --ink:#10303b; --ink-2:#4f6772; --ink-3:#8a9da5;
  --rule:#d5e0e3; --rule-2:#bccbd0;
  --flush:#f6dfe3; --flush-ink:#7a2335;
  --ruby:#c8324f; --ruby-ink:#ffffff;
  --kelp:#2d7c7a; --kelp-soft:#cfe5e3;
  --amber:#a86a12;
  --bar-bg:#dfe7ea;
  --primary:#0f3a47; --primary-ink:#eaf3f5;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --t0:12px; --t1:13px; --t2:14.5px; --t3:16px; --t4:20px; --t5:26px;
  --r1:6px; --r2:12px;
  --ctl:32px; --ctl-sm:26px;
  --font:"Avenir Next","Avenir",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --water:#0a2a34; --water-2:#103f4c; --water-ink:#e3eef1;
    --bg:#08161c; --panel:#0f222a; --panel-2:#152d37; --panel-3:#1c3843;
    --ink:#e8f1f2; --ink-2:#a3b7bf; --ink-3:#6c838c;
    --rule:#1d3741; --rule-2:#2b4a56;
    --flush:#3a1f27; --flush-ink:#ffc2ce;
    --ruby:#ff6b86; --ruby-ink:#26070e;
    --kelp:#4fb3ad; --kelp-soft:#173f40;
    --amber:#e0a24a;
    --bar-bg:#1a333d;
    --primary:#4fb3ad; --primary-ink:#06201f;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --water:#0a2a34; --water-2:#103f4c; --water-ink:#e3eef1;
  --bg:#08161c; --panel:#0f222a; --panel-2:#152d37; --panel-3:#1c3843;
  --ink:#e8f1f2; --ink-2:#a3b7bf; --ink-3:#6c838c;
  --rule:#1d3741; --rule-2:#2b4a56;
  --flush:#3a1f27; --flush-ink:#ffc2ce;
  --ruby:#ff6b86; --ruby-ink:#26070e;
  --kelp:#4fb3ad; --kelp-soft:#173f40;
  --amber:#e0a24a;
  --bar-bg:#1a333d;
  --primary:#4fb3ad; --primary-ink:#06201f;
}
@media (any-pointer: coarse){ :root{ --ctl:44px; --ctl-sm:36px; } }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html{background:var(--bg)}
body{margin:0;background:transparent;color:var(--ink);font-family:var(--font);font-size:var(--t2);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.mono,code{font-family:var(--mono);font-size:.92em}
.num{font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{font-size:var(--t3)}
@media (hover: hover) and (pointer: fine){ input,select,textarea{font-size:var(--t1)} }
:focus-visible{outline:2px solid var(--kelp);outline-offset:2px}

/* ---- the water band at the top: the one bold element ------------------ */
.top{position:sticky;top:0;z-index:10;color:var(--water-ink)}
.top .row{background:var(--water);display:flex;align-items:center;gap:var(--s4);padding:10px max(20px,calc(50% - 620px)) 6px;
  flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:var(--t4);
  letter-spacing:.01em}
.brand img{width:40px;height:40px}
.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{text-decoration:none;padding:6px 12px;border-radius:999px;color:var(--water-ink);opacity:.78;
  min-height:var(--ctl);display:inline-flex;align-items:center}
.nav a.on{background:rgba(255,255,255,.14);opacity:1}
@media (hover: hover){ .nav a:hover{opacity:1;background:rgba(255,255,255,.08)} }
.top .read{font-size:var(--t0);opacity:.75;text-align:right}
.top .read.bad{color:#ffb3c1;opacity:1}
.wave{display:block;width:100%;height:14px;color:var(--water)}

/* the report button and its form */
.top .btn.newbtn{margin-left:auto;background:var(--flush);color:var(--flush-ink);border-color:var(--flush);text-decoration:none;font-weight:600}
.top .btn.reportbtn{background:transparent;color:var(--water-ink);border-color:rgba(255,255,255,.35)}
.addjob{display:inline-block;margin-top:6px;font-size:var(--t1);color:var(--kelp);text-decoration:none;font-weight:600}
.scard object{display:block}
.scard .cardacts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.scard select.switch{font-size:var(--t1);min-height:var(--ctl-sm);padding:2px 6px;max-width:100%}
#newf .choices{display:flex;gap:18px;margin:4px 0 12px}
#newf .choices label{display:flex;gap:6px;align-items:center;min-height:var(--ctl)}
.top .reportbtn + .read{margin-left:12px}
dialog#reportdlg{border:1px solid var(--rule-2);border-radius:var(--r2);background:var(--panel);color:var(--ink);
  width:min(560px,calc(100vw - 32px));padding:18px 20px}
dialog#reportdlg::backdrop{background:rgba(8,22,28,.55)}
dialog#reportdlg h2{margin-top:0}
dialog#reportdlg .choices{display:flex;gap:18px;margin:6px 0 12px}
dialog#reportdlg .choices label{display:flex;gap:6px;align-items:center;min-height:var(--ctl)}

/* ---- the page ---------------------------------------------------------- */
main{max-width:1280px;margin:0 auto;padding:6px 20px 60px}
h1{font-size:var(--t5);font-weight:600;margin:10px 0 4px;letter-spacing:-.01em}
h2{font-size:var(--t4);font-weight:600;margin:28px 0 10px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
h2 .count{font-size:var(--t2);font-weight:500;color:var(--ink-2)}
h3{font-size:var(--t3);font-weight:600;margin:0 0 6px}
.sub{color:var(--ink-2);font-size:var(--t1)}
.dim{color:var(--ink-3)}
.loud{color:var(--ruby);font-weight:600}
.err{color:var(--ruby);overflow-wrap:anywhere}
#downline{background:var(--amber);color:#1c1204;padding:8px 20px;font-size:var(--t1);text-align:center}
.empty{color:var(--ink-3);font-style:italic;padding:6px 0}
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r2);padding:var(--s4)}

/* chips: an account, a state */
.chip{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:0 9px;font-size:var(--t0);
  line-height:20px;background:var(--panel-2);color:var(--ink-2);white-space:nowrap;font-weight:500}
.chip.busy,.chip.running{background:var(--kelp-soft);color:var(--kelp)}
.chip.waiting,.chip.waiting-on-you,.chip.failed{background:var(--ruby);color:var(--ruby-ink)}
.chip.waiting-on-others,.chip.assigned{background:var(--panel-3);color:var(--ink)}
.chip.done{background:var(--panel-2);color:var(--ink-3)}
.chip.ended,.chip.stopped{background:transparent;color:var(--ink-3);border:1px dashed var(--rule-2)}

/* ---- controls ---------------------------------------------------------- */
.btn{min-height:var(--ctl);padding:0 14px;border-radius:var(--r1);border:1px solid var(--rule-2);
  background:var(--panel);cursor:pointer;display:inline-flex;align-items:center;gap:6px;touch-action:manipulation}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);font-weight:500}
.btn.danger{border-color:var(--ruby);color:var(--ruby)}
.btn.small{min-height:var(--ctl-sm);padding:0 10px;font-size:var(--t1)}
.btn[disabled]{opacity:.5;cursor:default}
@media (hover: hover){ .btn:not([disabled]):hover{border-color:var(--ink-2)} }
input[type=text],input[type=email],input[type=password],input[type=number],textarea,select{
  border:1px solid var(--rule-2);border-radius:var(--r1);background:var(--panel);padding:6px 10px;
  min-height:var(--ctl);width:100%}
textarea{min-height:76px;resize:vertical}
label.f{display:block;margin:0 0 12px}
label.f > span{display:block;font-size:var(--t1);color:var(--ink-2);margin-bottom:3px}
.row-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.note{font-size:var(--t1);color:var(--ink-2)}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--bg);
  padding:8px 16px;border-radius:999px;font-size:var(--t1);z-index:50;max-width:90vw}

/* ---- bars: one drawing for load, memory, disk, context and progress ---- */
.bar{position:relative;height:8px;border-radius:4px;background:var(--bar-bg);overflow:hidden;margin:3px 0 2px}
.bar > i{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:var(--kelp)}
.bar > i.over{background:var(--ruby)}
.bar > i.quiet{background:var(--ink-3)}
.bar > b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink)}
.bar.unknown{background:repeating-linear-gradient(135deg,var(--bar-bg) 0 5px,transparent 5px 10px)}
.metric{font-size:var(--t1);display:flex;justify-content:space-between;gap:8px;color:var(--ink-2)}
.metric b{color:var(--ink);font-weight:600}

/* ---- the sign-in warning: across the top of every page, a press ------- */
.signwarn{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;justify-content:center;text-decoration:none;
  background:var(--ruby);color:var(--ruby-ink);padding:14px 20px;font-size:var(--t4);line-height:1.3;
  border-bottom:2px solid rgba(0,0,0,.15)}
.signwarn b{font-weight:600}
.signwarn span{font-size:var(--t2);opacity:.95}
@media (hover: hover){ .signwarn:hover{filter:brightness(1.07)} }
.logins{margin-top:4px}
.loginrow{display:flex;flex-wrap:wrap;gap:10px}
.login{display:flex;flex-direction:column;align-items:flex-start;text-decoration:none;background:var(--panel);
  border:1px solid var(--rule);border-radius:var(--r2);padding:8px 14px;min-width:140px}
.login .days{font-size:var(--t5);font-weight:600;line-height:1.1}
.login .who{font-size:var(--t1);color:var(--ink-2)}
.login.warn{border-color:var(--ruby);background:var(--flush)}
.login.warn .days{color:var(--ruby)}
.login .usage{display:flex;flex-direction:column;gap:2px;width:100%;min-width:150px;margin-top:6px;font-size:var(--t1);color:var(--ink)}
.login .usage .bar{margin:2px 0}
.signflow ol.steps{padding-left:20px}
.signflow ol.steps li{margin:10px 0}
.signflow .free{display:flex;gap:6px;max-width:560px}
.signflow .free input{flex:1}

/* ---- needs you --------------------------------------------------------- */
.needs{background:var(--flush);border-radius:var(--r2);padding:var(--s4) var(--s4) var(--s2);margin-top:12px}
.needs h2{margin:0 0 8px;color:var(--flush-ink)}
.needs h2 .count{color:var(--flush-ink)}
.ask{background:var(--panel);border-radius:var(--r1);padding:12px 14px;margin-bottom:10px;border-left:4px solid var(--ruby)}
.ask.close{border-left-color:var(--kelp)}
.ask .who{font-size:var(--t1);color:var(--ink-2)}
.ask .q{margin:4px 0 8px;white-space:pre-wrap}
/* a long link or path with no space breaks inside itself rather than widening
   the page (job 51: a question holding a claude.ai link widened an iPhone's
   layout from 402 to 428 pixels) */
.ask .q,.ask .who,.log .text,.pane,.facts dd,.scard .line{overflow-wrap:anywhere}
.ask .choices{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.ask .free{display:flex;gap:6px}
.ask .free input{flex:1}
.ask.done{border-left-color:var(--kelp);opacity:.75}
.needs-nothing{color:var(--ink-2);padding:10px 2px}
.ask[data-ignore]{position:relative;touch-action:pan-y;transition:transform .2s ease,opacity .2s ease}
.ask[data-ignore].swiping{transition:none}
.ask[data-ignore].gone{opacity:0}
.readable[data-ignore]{position:relative;touch-action:pan-y;transition:transform .2s ease,opacity .2s ease}
.readable[data-ignore].swiping{transition:none}
.readable[data-ignore].gone{opacity:0}
.readable .ignore{float:right;margin:-2px -2px 4px 8px}
.markall{margin:0 0 10px}
.jcard .ignore{float:right;margin:-4px -4px 2px 4px;min-height:24px;padding:0 6px;font-size:var(--t0)}
.ask .ignore{float:right;margin:-4px -4px 4px 8px}
.ignored-list{margin-top:4px;color:var(--ink-2)}
h3.lgroup{margin:14px 0 6px;font-size:var(--t2)}
/* results and attachments (design entry 18) */
.result{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r1);padding:10px 14px;margin-bottom:10px}
.result .who{font-size:var(--t1);color:var(--ink-2);margin-bottom:4px}
.rtext{white-space:pre-wrap;overflow-wrap:anywhere}
.rtext.clip{max-height:16em;overflow:hidden;-webkit-mask-image:linear-gradient(#000 70%,transparent)}
.kinds{display:flex;flex-wrap:wrap;gap:6px 18px;margin:6px 0 12px}
.kinds label{display:flex;align-items:center;gap:6px;min-height:var(--ctl-sm)}
figure.attach{margin:10px 0 4px}
figure.attach figcaption{font-size:var(--t1);margin-bottom:4px}
figure.attach iframe{width:100%;height:520px;border:1px solid var(--rule);border-radius:var(--r1);background:#fff}
figure.attach img{max-width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r1);background:#fff}
.ignored-list summary{cursor:pointer;padding:6px 2px}
.ignored-list .ask{border-left-color:var(--line-2,var(--ink-2));opacity:.85}

/* ---- sessions ---------------------------------------------------------- */
.sessions{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.scard{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r2);padding:12px 14px;
  text-decoration:none;display:block;min-width:0}
.scard.waiting{border-color:var(--ruby);box-shadow:inset 3px 0 0 var(--ruby)}
.scard .head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.scard .name{font-weight:600;font-size:var(--t3)}
.scard .line{font-size:var(--t1);color:var(--ink-2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.scard .line.loud{color:var(--ruby)}
.idlelist{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.idlerow{display:flex;gap:10px;align-items:baseline;padding:6px 10px;border-radius:var(--r1);text-decoration:none;
  color:var(--ink-3);flex-wrap:wrap}
.idlerow .name{color:var(--ink-2);font-weight:500}
/* job 85: the row's text on one line, the controls compact at its right end */
.idletext{flex:1 1 auto;min-width:0;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.idleacts{flex:none;display:flex;gap:6px;align-items:center;margin-left:auto}
@media (min-width:700px){
  .idlerow{flex-wrap:nowrap;align-items:center}
  .idletext{flex-wrap:nowrap;white-space:nowrap;overflow:hidden}
  .idletext>span{flex:none}
  .idletext>.job{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
}
select.switch{width:auto;max-width:100%;font-size:var(--t1);min-height:var(--ctl-sm);padding:2px 6px}
@media (any-pointer: coarse){ select.switch{font-size:16px} }
@media (hover: hover){ .idlerow:hover,.scard:hover{background:var(--panel-2)} }

/* ---- machines ---------------------------------------------------------- */
.machines{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.mcard{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r2);padding:12px 14px;
  text-decoration:none;display:block}
.mcard.unreachable{border-style:dashed}
.mcard .top5{font-size:var(--t0);color:var(--ink-3);margin-top:6px}
.tagright{float:right;margin-left:6px}
.itemtag{display:inline-flex;align-items:center;gap:2px;margin-left:6px;vertical-align:middle}
.uid{font:var(--t0)/1.4 var(--mono,ui-monospace,monospace);color:var(--ink-3);border:1px solid var(--rule);border-radius:4px;padding:0 4px}
button.bug{border:0;background:transparent;color:var(--ink-3);cursor:pointer;padding:2px 4px;min-height:24px;display:inline-flex;align-items:center}
@media (hover: hover){ button.bug:hover{color:var(--ruby)} }
@media (any-pointer: coarse){ button.bug{min-width:32px;min-height:32px;justify-content:center} }
.imgpick{margin:6px 0 12px}
.imgpick .thumbs{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.imgpick .thumbs img{height:64px;border:1px solid var(--rule);border-radius:4px}
.qnote{margin:4px 0 4px 10px;padding-left:8px;border-left:2px solid var(--rule);white-space:pre-wrap}
.qnote.answer{border-left-color:var(--kelp)}
.held{margin:6px 0;color:var(--ink-2)}
details.clarify{margin-top:6px}
details.clarify summary{cursor:pointer;color:var(--ink-2);font-size:var(--t1);padding:4px 0}
.qgroup{border:2px dashed var(--ruby);border-radius:var(--r1);padding:8px 10px}
.qghead{font-weight:600;margin-bottom:6px}
.qmember{border-top:1px solid var(--rule);padding-top:8px;margin-top:8px}
.queue{margin-bottom:22px}
.qmode{display:flex;gap:18px;margin:4px 0 8px}
.qmode label{display:flex;align-items:center;gap:6px;min-height:var(--ctl-sm)}
.qitems{list-style:none;padding:0;margin:0}
.qitems li{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r1);padding:8px 12px;margin-bottom:8px}
.qitems li.hold{opacity:.7;border-style:dashed}
.qrow{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.qpos{font-weight:600;color:var(--ink-3);min-width:1.5em}
.nextpush{display:flex;align-items:center;gap:6px;min-height:var(--ctl-sm);margin-right:6px}
.said{font-size:var(--t0);padding:1px 8px;border-radius:999px;background:var(--panel-2);color:var(--ink-2)}
.said.busy{background:var(--flush);color:var(--flush-ink)}
.mjobs{display:block;margin-top:10px;border-top:1px solid var(--rule);padding-top:8px;font-size:var(--t1)}
.mjhead{font-weight:600;color:var(--ink-2);margin-bottom:4px}
.mjob{margin:6px 0 8px}
.mjob a{color:var(--ink)}
.mjob .bar{margin:3px 0}

/* ---- the board --------------------------------------------------------- */
.board{overflow:auto;max-height:min(70vh,760px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch;border-radius:var(--r2);border:1px solid var(--rule);
  background:var(--panel)}
.board table{border-collapse:collapse;width:100%;min-width:760px;table-layout:fixed}
.board th,.board td{border-bottom:1px solid var(--rule);padding:8px;vertical-align:top;text-align:left}
.board th{font-size:var(--t1);font-weight:600;color:var(--ink-2);background:var(--panel-2);position:sticky;top:0;z-index:2}
.board td.acct{position:sticky;left:0;z-index:1;background:var(--panel)}
.board th:first-child{left:0;z-index:3}
.boardrows{margin:0 0 10px}
.boardrows summary{cursor:pointer;padding:4px 0;color:var(--ink-2)}
.boardrows form{display:flex;flex-wrap:wrap;gap:4px 16px;padding:6px 0;align-items:center}
.boardrows label{display:flex;align-items:center;gap:6px;min-height:var(--ctl-sm)}
.board th .n{font-weight:500;color:var(--ink-3)}
.board th:first-child,.board td.acct{width:132px}
.board td.acct{font-weight:600}
.board td.acct .sub{font-weight:400}
.jcard{display:block;text-decoration:none;background:var(--panel-2);border-radius:var(--r1);padding:5px 8px;
  margin-bottom:5px;font-size:var(--t1);line-height:1.35}
.jcard.waiting-on-you{background:var(--flush);color:var(--flush-ink)}
.jcard .p{height:3px;background:var(--bar-bg);border-radius:2px;margin-top:4px;overflow:hidden}
.jcard .p i{display:block;height:100%;background:var(--kelp)}
.jcard.runstep{border-left:3px solid var(--ink-3)}

/* ---- a page of one thing ----------------------------------------------- */
.facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;font-size:var(--t2)}
.facts dt{color:var(--ink-2)}
.facts dd{margin:0;min-width:0;overflow-wrap:anywhere}
.cols{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
@media (max-width: 900px){ .cols{grid-template-columns:minmax(0,1fr)} }
.log{list-style:none;margin:0;padding:0}
.log li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:var(--t1)}
.log li .when{color:var(--ink-3);font-size:var(--t0)}
.log li .text{white-space:pre-wrap;overflow-wrap:anywhere}
.pane{font-family:var(--mono);font-size:var(--t0);background:var(--water);color:var(--water-ink);border-radius:var(--r1);
  padding:8px 10px;overflow-wrap:anywhere}
.menu-items{display:flex;flex-direction:column;gap:6px;margin:8px 0}
table.list{border-collapse:collapse;width:100%;font-size:var(--t1)}
table.list th,table.list td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--rule);vertical-align:top}
table.list th{color:var(--ink-2);font-weight:600}
table.list td.r,table.list th.r{text-align:right}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

table.list td.nw{white-space:nowrap}
table.list td.mono{min-width:220px}
details.small{margin-top:8px}
details.small summary{cursor:pointer;color:var(--ink-2);padding:6px 0;min-height:var(--ctl)}
details.act summary{list-style:none}
details.act summary::-webkit-details-marker{display:none}
details.act[open]{background:var(--panel-2);border-radius:var(--r1);padding:8px;min-width:240px}
details.act form{margin-top:8px}

/* ---- charts (machines, timeline) --------------------------------------- */
svg.chart{width:100%;height:auto;display:block}
svg.chart .axis{stroke:var(--rule-2);stroke-width:1}
svg.chart .grid{stroke:var(--rule);stroke-width:1}
svg.chart .lbl{fill:var(--ink-2);font-size:11px;font-family:var(--font)}
svg.chart .line{fill:none;stroke:var(--kelp);stroke-width:1.6}
svg.chart .limit{stroke:var(--ruby);stroke-width:1;stroke-dasharray:4 3}
svg.chart .gap{fill:var(--panel-3)}
svg.chart .jobbar{fill:var(--kelp);opacity:.85}
svg.chart .jobbar.done{fill:var(--ink-3);opacity:.6}
svg.chart .jobbar.waiting-on-you{fill:var(--ruby)}
svg.chart .life{stroke:var(--rule-2);stroke-width:6;stroke-linecap:round}
svg.chart .qmark{fill:var(--ruby)}
svg.chart .tick{stroke:var(--ink-3);stroke-width:1}
svg.chart .fail{stroke:var(--ruby);stroke-width:2}
svg.chart .rowname{fill:var(--ink);font-size:12px;font-family:var(--font);font-weight:600}
svg.chart .rowsub{fill:var(--ink-3);font-size:10px;font-family:var(--font)}
svg.chart a{cursor:pointer}

/* ---- sign-in ----------------------------------------------------------- */
body.login{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--water);padding:16px}
.loginbox{background:var(--panel);border-radius:var(--r2);padding:28px 26px;width:100%;max-width:340px;text-align:center}
.loginbox img{width:96px;height:96px}
.loginbox h1{margin:8px 0 18px}
.loginbox label{display:block;text-align:left;font-size:var(--t1);color:var(--ink-2)}
.loginbox input{margin:4px 0 14px}
.loginbox .note{text-align:left}
.loginbox [hidden]{display:none}
form.loginbox[hidden],div.loginbox[hidden]{display:none}
.loginbox button{width:100%;justify-content:center}

.top .short{display:none}
.board-list{display:none}
@media (max-width: 640px){
  .top .row{padding:8px 16px 4px;gap:8px}
  main{padding:4px 16px 48px}
  .top .read{margin-left:0;text-align:left;width:100%}
  /* the board as a list per session: eight columns do not fit a phone */
  .board{display:none}
  .board-list{display:block}
  .brow{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r2);padding:10px 12px;margin-bottom:10px}
  .brow .bhead{margin-bottom:4px}
  .brow .sub{color:var(--ink-3);font-size:var(--t1)}
  .brow .bstate{font-size:var(--t1);font-weight:600;color:var(--ink-2);margin:8px 0 4px}
  .brow .bstate .n{font-weight:500;color:var(--ink-3)}
  /* a table marked "stack" draws each row as a block: the first cell on its
     own line, the others beneath it on one wrapping line */
  table.stack,table.stack tbody,table.stack tr{display:block;width:100%}
  table.stack tr:has(th){display:none}
  table.stack tr{border-bottom:1px solid var(--rule);padding:8px 0}
  table.stack td{display:inline-block;border:0;padding:2px 10px 2px 0;vertical-align:middle}
  table.stack td:first-child{display:block;padding-right:0}
  table.stack td.r{text-align:left}
}
/* A phone (narrow, or turned on its side and short): the band scrolls away
   with the page, its menu is one line that slides sideways, and the two
   buttons take short names (job 51, iPhone 16 Pro: 402 by 874). */
@media (max-width: 640px), (max-height: 500px){
  .top{position:static}
  .top .row{flex-wrap:wrap}
  .brand{font-size:var(--t3)}
  .brand img{width:32px;height:32px}
  .nav{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;order:5;width:100%;
    margin:0 -16px;padding:0 12px;width:calc(100% + 32px)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;flex:none}
  .top .long{display:none}
  .top .short{display:inline}
  .top .btn.newbtn{margin-left:auto}
  .top .read{order:6}
}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;animation:none !important} }
table.pubcheck{margin-bottom:16px}
/* job 99: the words of a queued item, edited in a fold */
details.qedit{margin-top:6px}
details.qedit>summary{display:inline-flex;align-items:center;list-style:none;cursor:pointer}
details.qedit>summary::-webkit-details-marker{display:none}
details.qedit[open]>summary{margin-bottom:8px}
details.qedit form{max-width:760px}
/* a long address in a queued item breaks anywhere instead of widening the page */
.qitems .text,.qitems .qrow{overflow-wrap:anywhere;min-width:0}
/* job 97: a long word or web address breaks at the edge of its box on every
   page, instead of running past it and widening the page. break-word only
   breaks where a line would otherwise overflow, so ordinary text is unchanged. */
main{overflow-wrap:break-word}
.facts dd{min-width:0}
/* job 110: a discussion with the session about the open item */
.askabout .turns{list-style:none;padding:0;margin:0 0 10px}
.askabout .turn{margin:0 0 10px}
.askabout .you,.askabout .them{border:1px solid var(--rule);border-radius:var(--r2);padding:6px 10px;max-width:85%}
.askabout .you{margin-left:auto;background:var(--panel)}
.askabout .them{margin-top:6px}
.askabout .them.wait{border-style:dashed}
.askabout p{margin:2px 0 0;white-space:pre-wrap}
.askabout textarea{width:100%;box-sizing:border-box}
/* job 116: dragging a queued job on the board */
.board [data-drag]{cursor:grab;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.board [data-drag].dragfrom{opacity:.35}
.dragghost{box-shadow:0 6px 20px rgba(0,0,0,.35);cursor:grabbing}
.board td.dropok{outline:2px solid var(--kelp);outline-offset:-2px}
.board td.dropno{outline:2px dashed var(--ruby);outline-offset:-2px}
/* job 91: Home fits one screen. A line of tiles, then "Needs you" beside the
   board; each pane scrolls inside itself. The box's height is set by
   O.fitHome to end at the screen's bottom edge. */
main:has(.home1){padding-bottom:0}
.home1{display:flex;flex-direction:column;gap:10px;min-height:0;padding-top:6px}
.overview{display:flex;gap:10px;flex:none;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.overview::-webkit-scrollbar{display:none}
.otile{flex:1 1 0;min-width:200px;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;cursor:pointer;
  background:var(--panel);border:1px solid var(--rule);border-radius:var(--r2);padding:6px 12px;color:var(--ink);min-height:var(--ctl)}
@media (hover: hover){ .otile:hover{background:var(--panel-2)} }
.olabel{font-size:var(--t1);font-weight:600;color:var(--ink-2)}
.olabel b{color:var(--ink);margin-left:4px}
.ofig{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.odot{width:12px;height:12px;border-radius:50%;background:var(--ink-3);opacity:.5;display:inline-block}
.odot.busy{background:var(--kelp);opacity:1}
.odot.waiting{background:var(--ruby);opacity:1}
.onum{font-size:var(--t0);color:var(--ink-2)}
.omachs{display:flex;flex-direction:column;gap:0;width:100%;font-size:var(--t0);line-height:1.3}
.ologins{display:flex;flex-wrap:wrap;gap:0 12px;font-size:var(--t1)}
.omach{display:grid;grid-template-columns:minmax(40px,max-content) 1fr;gap:8px;align-items:center}
.omach .bar{margin:0;height:6px}
.ologin{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.ologin b{color:var(--ink)}
.ologin.loud b{color:var(--ruby)}
.homemain{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(280px,1fr) minmax(0,2.4fr);gap:12px}
.homemain.calm{grid-template-columns:minmax(0,1fr);grid-template-rows:max-content minmax(0,1fr)}
.homemain .needs{margin:0;overflow:auto;overscroll-behavior:contain;min-height:0;padding-top:10px}
.homemain.calm .needs{display:flex;align-items:baseline;gap:12px;padding:6px var(--s4)}
.homemain.calm .needs h2{margin:0}
.homemain.calm .needs .needs-nothing{padding:0}
.homemain h2{margin:0 0 6px}
.boardpane{display:flex;flex-direction:column;min-height:0;min-width:0}
.panehead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.panehead .boardrows,.panehead .markall{margin:0 0 6px}
.panehead .boardrows summary{min-height:0}
/* a column narrow enough to break words scrolls sideways instead */
.boardpane .board table{min-width:960px}
.boardpane [data-readlist]{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.boardpane .board{flex:1 1 auto;min-height:0;max-height:none}
/* the pop-ups: a press outside one closes it */
dialog.pop{border:1px solid var(--rule-2);border-radius:var(--r2);background:var(--bg);color:var(--ink);padding:0;
  width:min(1100px,calc(100vw - 32px));max-height:calc(100dvh - 48px)}
dialog.pop::backdrop{background:rgba(8,22,28,.55)}
.popin{padding:6px 18px 18px;position:relative}
.popin h2:first-of-type{margin-top:10px;padding-right:44px}
.popx{position:absolute;top:8px;right:10px;border:0;background:transparent;color:var(--ink-2);font-size:20px;cursor:pointer;
  min-width:var(--ctl);min-height:var(--ctl)}
@media (max-width: 1000px) and (min-width: 641px){
  .homemain{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,max-content) minmax(0,1fr)}
  .homemain .needs{max-height:40vh}
}
@media (max-width: 640px), (max-height: 500px){
  main:has(.home1){padding-bottom:48px}
  .homemain,.homemain.calm{display:flex;flex-direction:column}
  .homemain .needs{overflow:visible}
  .otile{min-width:150px}
}
/* the filters of "Needs you" on one line in its narrow pane */
/* jobs 88, 89, 92: the band holds the logo, the reading time and three icon
   buttons; the menu bar is gone */
.icon{width:20px;height:20px;flex:none;display:block}
.btn.ibtn{padding:0;width:var(--ctl-sm);justify-content:center;display:inline-flex;align-items:center}
.btn.ibtn .icon{width:16px;height:16px}
.top .read{margin-left:auto;order:2}
.topacts{order:3;display:flex;gap:6px}
.iconbtn{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:var(--water-ink);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.iconbtn.plusbtn{background:var(--flush);color:var(--flush-ink);border-color:var(--flush)}
.iconbtn .icon{width:22px;height:22px}
@media (hover: hover){ .iconbtn:hover{background:rgba(255,255,255,.12)} .iconbtn.plusbtn:hover{filter:brightness(1.06);background:var(--flush)} }
dialog.menupop{margin:0;position:fixed;padding:8px;border:1px solid var(--rule-2);border-radius:var(--r2);background:var(--panel);color:var(--ink);
  box-shadow:0 10px 30px rgba(0,0,0,.3)}
dialog.menupop::backdrop{background:transparent}
.menugrid{display:grid;grid-template-columns:repeat(3,88px);gap:4px}
dialog.menupop[data-menu="plus"] .menugrid{grid-template-columns:repeat(4,96px)}
/* four columns of 96px and the frame need 414px; a phone of 402px cut the
   fourth column off (seen with jobs 316 and 317), so a narrow screen has three */
@media (max-width: 440px){ dialog.menupop[data-menu="plus"] .menugrid{grid-template-columns:repeat(3,96px)} }
/* T206: the chooser of task kinds on the New screen */
.kindgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;max-width:720px}
.kindgrid .mi{border:1px solid var(--rule-2);background:var(--panel);padding:18px 8px}
.newhead{display:flex;align-items:center;gap:12px}
.newhead .icon{width:32px;height:32px;color:var(--kelp)}
.mi{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px;border-radius:var(--r1);text-decoration:none;font-size:var(--t1);color:var(--ink)}
.mi .icon{width:26px;height:26px;color:var(--kelp)}
@media (hover: hover){ .mi:hover{background:var(--panel-2)} }
/* every view but Home in a pop-up over Home */
dialog.viewpop{overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;width:min(1180px,calc(100vw - 32px));height:calc(100dvh - 48px)}
dialog.viewpop .popx{position:sticky;top:6px;float:right;margin:6px 6px 0 0;z-index:5;background:var(--panel);border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center}
dialog.viewpop .popin{padding:4px 20px 24px}
dialog.viewpop h1:first-child{margin-top:12px}
@media (max-width: 640px){
  dialog.viewpop{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;border:0}
  dialog.viewpop .popin{padding:4px 14px 24px}
  .top .read{display:none}
}
#popbody{overflow-wrap:break-word}
/* step 2 of design entry 34: icon buttons and the ⓘ that holds a sentence */
.btn.ibtn,.btn.ibtn-n{padding:0 8px;min-width:var(--ctl-sm);justify-content:center;display:inline-flex;align-items:center;gap:4px}
.btn .icon{width:16px;height:16px}
summary.ibtn{display:inline-flex;align-items:center;list-style:none;color:var(--ink-2);cursor:pointer;min-height:var(--ctl-sm)}
summary.ibtn::-webkit-details-marker{display:none}
summary.ibtn .icon{width:18px;height:18px}
.info{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink-3);
  color:var(--ink-3);font:600 11px/1 var(--font);font-style:italic;margin-left:8px;cursor:help;vertical-align:middle;flex:none}
@media (any-pointer: coarse){ .info{width:24px;height:24px} }
/* job 121: an answered question of a group folds to one line */
details.qheld>summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;color:var(--ink-2);padding:6px 0;min-height:var(--ctl-sm)}
details.qheld>summary::-webkit-details-marker{display:none}
details.qheld>summary .icon{color:var(--kelp);width:18px;height:18px}
details.qheld>summary span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.qwrap.held{border-top:1px solid var(--rule);margin-top:6px}
.qwrap.qnext>.qmember{animation:qnext 1.2s ease}
@keyframes qnext{from{background:var(--kelp-soft)}to{background:transparent}}
/* job 123: the tiles sit in the band as small control-centre tiles */
.topstats{display:flex;gap:8px;align-items:center;order:1;margin-left:12px;min-width:0;overflow-x:auto;scrollbar-width:none}
.topstats::-webkit-scrollbar{display:none}
.ctile{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:14px;border:0;cursor:pointer;
  background:rgba(255,255,255,.10);color:var(--water-ink);flex:none}
@media (hover: hover){ .ctile:hover{background:rgba(255,255,255,.18)} }
.ctile>.icon{width:20px;height:20px;opacity:.85}
.cfig{display:flex;align-items:center;gap:4px}
.ctile .odot{width:9px;height:9px;opacity:.45;background:var(--water-ink)}
.ctile .odot.busy{background:#5fd3c9;opacity:1}
.ctile .odot.waiting{background:#ff7d95;opacity:1}
.cbars{gap:4px;height:26px;align-items:stretch}
.cbar{position:relative;width:7px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;display:block}
.cbar i{position:absolute;left:0;right:0;bottom:0;background:#5fd3c9;display:block;font-style:normal}
.cbar.over i{background:#ff7d95}
.cbar b{position:absolute;left:0;right:0;height:1px;background:rgba(255,255,255,.7)}
.cbar.down{background:transparent;width:auto;overflow:visible;color:#ff7d95;font-size:12px;display:flex;align-items:center}
.cbar.down i{position:static;background:none}
.cdays{gap:6px;font-size:var(--t1);font-weight:600}
.cdays .loud{color:#ff9db0}
.cdays .full{color:#ffc2ce}
.top .loud{color:#ff9db0}
/* job 123: Needs you shows one item at a time, across the screen above the board */
.homemain,.homemain.calm{display:flex;flex-direction:column;gap:10px;grid-template-columns:none}
.homemain .needs{flex:0 1 auto;max-height:50%;min-height:0;display:flex;flex-direction:column;overflow:hidden;padding:8px 14px 10px}
.homemain.calm .needs{flex-direction:row;align-items:center}
.needshead{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;margin-bottom:6px}
.needshead h2{margin:0}
.needsnav{display:inline-flex;align-items:center;gap:6px}
.needspos{font-size:var(--t1);color:var(--flush-ink);min-width:3.5em;text-align:center}
.needstrip{flex:1 1 auto;min-height:0;display:flex;gap:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.needstrip::-webkit-scrollbar{display:none}
.needstrip>.ask{flex:0 0 100%;scroll-snap-align:start;margin:0;overflow-y:auto;max-height:100%}
.needstrip>h3.lgroup{display:none}
.homemain .boardpane{flex:1 1 0;min-height:220px}
@media (max-width: 1000px) and (min-width: 641px){ .homemain .needs{max-height:50%} }
@media (max-width: 640px), (max-height: 500px){
  .topstats{order:4;width:100%;margin:6px 0 0}
  .bname{display:none}
  .homemain .needs{max-height:none}
  .needstrip>.ask{max-height:none}
}
.needstrip{align-items:flex-start;transition:height .15s ease}
.needstrip>.ask{max-height:none}
.homemain .needs{max-height:55%}
.needstrip{max-height:100%}
@media (max-width: 1000px){ .top .read:not(.bad){display:none} }
.needstrip>.ask{max-height:100%;overflow-y:auto}
.homemain .needs{max-height:none}
@media (max-width: 640px), (max-height: 500px){ .needstrip>.ask{max-height:none} }
/* job 130: a long question in Needs you scrolls in its own box, so its
   choices and the answer field stay on screen; a group of one has no frame */
.needstrip .q{max-height:7.4em;overflow-y:auto;overscroll-behavior:contain;padding-right:6px}
.needstrip .qgroup.one{border:0;padding:0;margin:0}
@media (max-width: 640px), (max-height: 500px){ .needstrip .q{max-height:none} }
.qgroup.one>.qwrap>.qmember{border-top:0;padding-top:0;margin-top:0}
.qgroup.one>.qwrap>.qmember>.itemtag:first-child{display:none}
.homemain .boardpane{min-height:160px}
/* job 132: the wall of pinned jobs, one row of square notes above the board */
.pinwall{flex:0 0 auto;display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;scrollbar-width:thin}
.pnote{flex:0 0 128px;height:118px;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:3px;
  text-decoration:none;color:var(--ink);background:var(--panel);border:1px solid var(--rule);font-size:var(--t0);line-height:1.3;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.pnote b{font-family:var(--mono);font-size:var(--t0);padding-right:24px}
.pnote .t{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pnote .who{margin-top:auto;color:var(--ink-3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pnote .p{display:block;height:3px;background:var(--bar-bg);border-radius:2px;overflow:hidden}
.pnote .p i{display:block;height:100%;background:var(--kelp)}
.pnote.waiting-on-you{background:var(--ruby);border-color:var(--ruby);color:var(--ruby-ink)}
.pnote.waiting-on-you .who{color:var(--ruby-ink);opacity:.8}
.pnote.running{background:var(--kelp-soft);border-color:var(--kelp-soft)}
.pnote.waiting-on-others{border-top:4px solid var(--amber)}
.pnote.queued,.pnote.new{border-style:dashed;color:var(--ink-2)}
.pnote.done,.pnote.stopped,.pnote.failed,.pnote.unread{opacity:.6}
.pnote .pinbtn{position:absolute;top:3px;right:3px;min-height:22px;width:24px;padding:0;border:0;background:transparent;color:inherit}
.pinbtn .icon{width:14px;height:14px}
.jcard .pinbtn{float:right;margin:-4px 0 2px 2px;min-height:24px;padding:0 4px;opacity:.45}
.jcard .pinbtn.on{opacity:1;color:var(--kelp)}
@media (hover: hover){ .jcard .pinbtn:hover{opacity:1} }
@media (max-width: 640px){
  .pinwall{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
  .pnote{height:auto;aspect-ratio:1/1}
}
/* job 132: the board as the owner chose it from the sketches (design entry 41) */
.si{display:inline-block;width:11px;height:11px;border-radius:50%;flex:none;border:2px solid var(--ink-3);box-sizing:border-box;vertical-align:-1px}
.si.queued{border-style:dotted}
.si.new{border-color:var(--ink-2)}
.si.assigned{border-color:var(--kelp);background:linear-gradient(90deg,var(--kelp) 25%,transparent 25%)}
.si.running{border-color:var(--kelp);background:conic-gradient(var(--kelp) 0 50%,transparent 50%)}
.si.waiting-on-you{border-color:var(--ruby);background:var(--ruby)}
.si.waiting-on-others{border-color:var(--amber);background:conic-gradient(var(--amber) 0 75%,transparent 75%)}
.si.done,.si.stopped,.si.failed{border-color:var(--ink-3);background:var(--ink-3)}
.qn{font-size:11px;font-weight:700;color:var(--ruby-ink);background:var(--ruby);border-radius:9px;padding:0 6px;line-height:16px;white-space:nowrap;flex:none}
/* Home: counts beside the chosen cell's list */
.bcompact{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);gap:0;flex:1 1 auto;min-height:0;border:1px solid var(--rule);border-radius:var(--r2);background:var(--panel);overflow:hidden}
.bcount{overflow:auto;min-height:0;border-right:1px solid var(--rule)}
.bcount table{border-collapse:collapse;font-variant-numeric:tabular-nums}
.bcount th{position:sticky;top:0;z-index:1;background:var(--panel-2);font-size:11.5px;font-weight:500;color:var(--ink-3);padding:6px 3px;text-align:center;white-space:nowrap}
.bcount th span{display:block;margin-top:2px}
.bcount th:first-child{text-align:left;padding-left:6px;white-space:nowrap}
.bcount th:first-child .btn{margin-right:4px}
.bcount td{border-top:1px solid var(--rule);padding:0;text-align:center}
.bcount td.acct{text-align:left;padding:0 8px;font-weight:600;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.bcount td.acct a{color:var(--ink)}
.addjob{margin-left:6px;font-weight:700;text-decoration:none}
.cnt{display:block;width:44px;height:32px;margin:3px;border:0;border-radius:6px;background:var(--panel-2);color:var(--ink);font:inherit;font-weight:600;font-size:var(--t1);cursor:pointer}
.cnt.z{background:transparent;color:var(--ink-3);font-weight:400;cursor:default}
.cnt.waiting-on-you{background:var(--ruby);color:var(--ruby-ink)}
.cnt.running{background:var(--kelp-soft)}
.cnt.sel{outline:2px solid var(--kelp);outline-offset:-2px}
.bside{overflow:auto;min-height:0;padding:6px 10px;display:flex;flex-direction:column}
.bside .hd{font-weight:600;font-size:var(--t1);color:var(--ink-2);padding:2px 0 6px}
/* one line per job */
.jline{display:grid;grid-template-columns:12px 44px minmax(0,1fr) auto 56px 26px;gap:8px;align-items:center;min-height:34px;padding:0 4px;border-bottom:1px solid var(--rule);
  text-decoration:none;color:var(--ink);font-size:var(--t1)}
.jline .id{font-family:var(--mono);font-size:var(--t0);color:var(--ink-3)}
.jline .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jline.waiting-on-you{background:var(--flush);color:var(--flush-ink)}
.jline.done{color:var(--ink-2)}
.jline .p,.jsq .p{display:block;height:3px;background:var(--bar-bg);border-radius:2px;overflow:hidden}
.jline .p.none,.jsq .p.none{background:transparent}
.jline .p i,.jsq .p i{display:block;height:100%;background:var(--kelp)}
.jline .pinbtn,.jsq .pinbtn{min-height:24px;width:26px;padding:0;border:0;background:transparent;color:var(--ink-3);opacity:.6}
.jline .pinbtn.on,.jsq .pinbtn.on{color:var(--kelp);opacity:1}
/* a phone: one state at a time */
.bphone{display:none}
.pseg{display:flex;gap:4px;overflow-x:auto;padding:6px;border-bottom:1px solid var(--rule);align-items:center}
.pseg button[data-pstate]{flex:none;display:flex;gap:5px;align-items:center;padding:4px 10px;border-radius:14px;border:0;background:var(--panel-2);color:var(--ink-2);font:inherit;font-size:var(--t0);min-height:32px}
.pseg button.on{background:var(--kelp-soft);color:var(--ink);font-weight:600}
.pseg button:disabled{opacity:.4}
.plist .grp{padding:6px 8px;background:var(--panel-2);font-weight:600;font-size:var(--t1);display:flex;justify-content:space-between}
.plist .grp span{color:var(--ink-3);font-weight:400}
@media (max-width: 640px){
  .bcompact{display:block}
  .bcount,.bside{display:none}
  .bphone{display:block}
  .jline{grid-template-columns:12px 40px minmax(0,1fr) auto 26px}
  .jline .p{display:none}
}
/* the full board, in its pop-up */
dialog.pop[data-popid="boardmax"]{width:min(1400px,96vw);max-width:96vw;height:92vh;max-height:92vh}
dialog.pop[data-popid="boardmax"] .popin{height:100%;box-sizing:border-box;display:flex;flex-direction:column;min-height:0}
dialog.pop[data-popid="boardmax"] [data-readlist]{flex:1 1 auto;min-height:0;overflow:auto}
.bmaxhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bmaxhead h2{margin:10px 0}
.bviews{display:inline-flex;border:1px solid var(--rule-2);border-radius:16px;overflow:hidden}
.bviews button{border:0;background:transparent;color:var(--ink-2);font:inherit;font-size:var(--t1);padding:4px 14px;min-height:30px}
.bviews button.on{background:var(--kelp-soft);color:var(--ink);font-weight:600}
.bgrid{max-height:none;overflow:auto}
.bgrid table{min-width:0;table-layout:auto}
.bgrid th{white-space:nowrap}
.bgrid th .si{margin-right:5px}
.sqs{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;max-width:340px}
.jsq{width:100px;height:96px;box-sizing:border-box;position:relative;display:flex;flex-direction:column;gap:2px;padding:6px;border-radius:8px;background:var(--panel-2);
  color:var(--ink);text-decoration:none;font-size:11.5px;line-height:1.25;overflow:hidden}
.jsq b{font-family:var(--mono);font-size:var(--t0)}
.jsq .qn{position:absolute;left:6px;bottom:8px}
.jsq .t{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink-2)}
.jsq .p{margin-top:auto}
.jsq .pinbtn{position:absolute;top:1px;right:1px}
.jsq.waiting-on-you{background:var(--flush)}.jsq.waiting-on-you .t{color:var(--flush-ink)}
.jsq.running{box-shadow:inset 0 -3px 0 var(--kelp)}
.jsq.waiting-on-others{box-shadow:inset 0 -3px 0 var(--amber)}
.jsq.queued,.jsq.new{background:transparent;border:1px dashed var(--rule-2)}
.jsq.done{opacity:.6}
.jsq.runstep{border-left:3px solid var(--ink-3)}
.more{width:100%}
.more>summary{display:inline-flex;align-items:center;justify-content:center;width:100px;height:30px;border-radius:8px;border:1px dashed var(--rule-2);color:var(--kelp);font-weight:700;cursor:pointer;list-style:none}
.more>summary::-webkit-details-marker{display:none}
.morelist{margin-top:6px;max-height:210px;overflow:auto;border:1px solid var(--rule);border-radius:8px;padding:0 6px;background:var(--panel)}
.bempty{margin:8px 0 0}
.blist .lgrp{border:1px solid var(--rule);border-radius:var(--r1);margin:0 0 10px;overflow:hidden}
.blist .lhd{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:6px 10px;background:var(--panel-2);font-weight:600}
.blist .lhd .sub{font-weight:400;color:var(--ink-3);font-size:var(--t0)}
.blist .lcnt{margin-left:auto;display:flex;gap:10px;font-weight:400;font-size:var(--t0);color:var(--ink-3)}
.blist .lcnt span{display:flex;gap:4px;align-items:center}
.ldone>summary{padding:6px 10px;color:var(--ink-3);font-size:var(--t0);cursor:pointer}
.boardpane .bcompact{display:grid}
@media (max-width: 640px){ .boardpane .bcompact{display:block} .board.bgrid{display:block} }
.sqs{width:198px;max-width:none}
.jsq{width:96px;height:92px}
.jsq .sh{display:flex;align-items:center;gap:5px;padding-right:22px}
.jsq .qn{position:static}
.more>summary{width:198px}
@media (max-width: 640px), (max-height: 500px){
  .homemain .boardpane{flex:none;min-height:0}
  .boardpane .bcompact{overflow:visible;flex:none}
}
.bgrid td.acct{min-width:110px}

/* A list's settings, always folded behind one button; opened, an iOS-style
   list: grouped rows, a check mark on the chosen one, switches for on and
   off (the owner's job 143) */
details.lset{position:relative;display:inline-block;margin:0 0 10px}
.needshead details.lset{margin:0 0 0 auto}
details.lset>summary{list-style:none;cursor:pointer}
details.lset>summary::-webkit-details-marker{display:none}
details.lset>summary.on{background:var(--kelp);color:#fff;border-color:var(--kelp)}
details.lset[open]>summary{outline:2px solid var(--kelp)}
/* placed with position:fixed when it opens, so a box that clips its
   overflow (Needs you) does not cut it off */
.lsetin{position:fixed;z-index:60;top:0;left:0;width:min(320px,calc(100vw - 32px));max-height:min(70vh,520px);overflow:auto;
  background:var(--panel-2);border:1px solid var(--rule);border-radius:14px;padding:8px;box-shadow:0 10px 30px rgba(0,0,0,.35);text-align:left}
.iset{margin:0}
.igroup{background:var(--panel);border-radius:10px;overflow:hidden;margin:0 0 10px}
.igroup:last-child{margin-bottom:0}
.ihead{font-size:var(--t0);color:var(--ink-2);text-transform:uppercase;letter-spacing:.04em;padding:8px 12px 4px;background:var(--panel-2)}
.irow{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:0;border-top:1px solid var(--rule);width:100%;box-sizing:border-box;
  background:transparent;color:var(--ink);font:inherit;font-size:var(--t2);text-align:left;cursor:pointer}
.ihead+.irow,.igroup>.irow:first-child{border-top:0}
.irow .il{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.irow .in{color:var(--ink-2);font-size:var(--t1)}
.irow input[type=radio]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.irow .ick{width:18px;flex:none}
.irow input[type=radio]:checked~.ick::before{content:"";display:block;width:6px;height:12px;margin:0 0 3px 5px;border:solid var(--kelp);border-width:0 3px 3px 0;transform:rotate(45deg)}
.irow input[type=radio]:checked+.il{font-weight:600}
.irow input[type=radio]:focus-visible~.ick{outline:2px solid var(--kelp);border-radius:4px}
.irow:active{background:var(--panel-3)}
.irow.ishown{cursor:default;color:var(--ink-2)}
.irow .ichev{width:8px;height:8px;flex:none;border:solid var(--ink-3);border-width:2px 2px 0 0;transform:rotate(45deg);margin-right:4px}
input.iswitch{appearance:none;-webkit-appearance:none;flex:none;width:46px;height:28px;margin:0;border-radius:14px;background:var(--rule-2);position:relative;cursor:pointer;transition:background .2s}
input.iswitch::after{content:"";position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s}
input.iswitch:checked{background:var(--kelp)}
input.iswitch:checked::after{transform:translateX(18px)}
input.iswitch:focus-visible{outline:2px solid var(--kelp);outline-offset:2px}
#boardrows .igroup{margin-bottom:12px}
.lsetin .kinds{display:block;margin:0 0 10px}
.lsetin .kinds label.irow{gap:10px;min-height:44px}
details.lset:not([open]) .lsetin{display:none}

/* the red count on a job, as on an iOS app's icon (job 136, design entry 43);
   red when a question waits, the water colour for reports and answers */
.ubadge{display:inline-flex;align-items:center;justify-content:center;flex:none;min-width:20px;height:20px;padding:0 6px;box-sizing:border-box;
  border-radius:10px;background:var(--water-2);color:#fff;font-size:12px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap}
.ubadge.q{background:#e5484d}
/* T210: a task proposed done, waiting only for "Close it": calm, never red */
.ubadge.close{background:var(--kelp);color:var(--panel)}
.chip.to-close,.cnt.to-close{background:var(--kelp-soft);color:var(--kelp)}
.jline.to-close,.jcard.to-close,.pnote.to-close{background:transparent;color:inherit}
.jsq.to-close{background:var(--panel-2)}
.si.to-close{border-color:var(--kelp);background:transparent;box-shadow:inset 0 0 0 2px var(--kelp)}
.cnt{position:relative}
.cnt .ubadge{position:absolute;top:-6px;right:-3px;min-width:18px;height:18px;font-size:11px;padding:0 5px;box-shadow:0 0 0 2px var(--panel)}
.pnote .ph{display:flex;align-items:center;gap:6px;padding-right:24px}
.pnote .ph b{padding-right:0}
.jsq .ubadge{min-width:18px;height:18px;font-size:11px;padding:0 5px}

/* a pop-up takes the focus itself and draws no ring for it (job 133) */
dialog:focus,dialog:focus-visible{outline:none}
.idlehead{margin:14px 0 4px;font-size:var(--t2);font-weight:600;color:var(--ink-2)}
.idlehead .dim{font-weight:400;font-size:var(--t1);margin-left:6px}

/* a job's stages as parts in a row (job 127, design entry 46) */
.parts{display:grid;gap:4px;margin:6px 0}
.parts div{height:30px;border-radius:6px;background:var(--panel-2);font-size:12px;display:flex;align-items:center;justify-content:center;color:var(--ink-3);position:relative;overflow:hidden;padding:0 4px}
.parts div span{position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.parts .done{background:var(--kelp);color:var(--panel)}
.parts .now{color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--kelp)}
.parts .now i{position:absolute;left:0;top:0;bottom:0;background:var(--kelp-soft)}

/* the shorter job page (job 127, design entry 47) */
.jpage{display:flex;flex-direction:column;gap:14px;max-width:760px}
.jpage h1{margin-bottom:0}
.jmeta{color:var(--ink-2);font-size:13.5px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.jmeta a{color:var(--ink)}
.jreason{font-size:13.5px;color:var(--ink-2);border-left:3px solid var(--rule-2);padding-left:10px}
.flow{display:flex;align-items:center;font-size:11.5px;color:var(--ink-3);overflow-x:auto;padding:2px 0}
.flow .st{display:flex;flex-direction:column;align-items:center;gap:4px;flex:none;width:84px;text-align:center;line-height:1.25}
.flow .st.more{width:40px}
.flow .dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--rule-2);box-sizing:border-box;background:var(--panel)}
.flow .st.past .dot{background:var(--kelp);border-color:var(--kelp)}
.flow .st.now .dot{background:var(--kelp);border-color:var(--kelp);box-shadow:0 0 0 4px var(--kelp-soft)}
.flow .st.now{color:var(--ink);font-weight:600}
.flow .ln{flex:1;height:2px;background:var(--rule-2);margin-bottom:30px;min-width:12px}
.flow .ln.past{background:var(--kelp)}
.pline{font-size:13.5px;display:flex;gap:12px;justify-content:space-between;align-items:baseline}
.pline b{font-variant-numeric:tabular-nums}
.pline .dim{flex:none}
.jwhat{font-size:13.5px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;cursor:pointer}
.jwhat.open{display:block;-webkit-line-clamp:unset;white-space:pre-wrap}
.latest{background:var(--panel-2);border-radius:10px;padding:10px 12px;font-size:13.5px;display:flex;flex-direction:column;gap:4px;white-space:pre-wrap}
.latest .when{font-size:12px;color:var(--ink-3);white-space:normal}
.latest.done{box-shadow:inset 3px 0 0 var(--kelp)}
.dots{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.dots .d{width:22px;height:22px;border:0;padding:0;background:transparent;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%}
.dots .d::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.dots .d.q::before{background:var(--ruby)}
.dots .d.p::before{background:var(--kelp)}
.dots .d.on{background:var(--panel-3)}
.dots .dmore{border:0;background:none;color:var(--ink-2);font:inherit;text-decoration:underline;cursor:pointer;padding:2px 4px}
.dotview .log{margin:0}
.acts{display:flex;gap:8px;flex-wrap:wrap}
.acts .btn.on{box-shadow:inset 0 0 0 2px var(--kelp)}
.jflow{border:1px solid var(--rule-2);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px}
.jflow .askabout h2{font-size:15px;margin-top:0}
.fstep{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fstep input[type=text]{flex:1 1 200px;min-width:0}
.fstep .n,.step .n{font-size:12px;color:var(--ink-3)}
.steps{display:flex;gap:12px;flex-wrap:wrap}
.step{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:8px}
.step h3{margin:0;font-size:15px}
.step p{margin:0;font-size:13.5px}
.choice{border:1px solid var(--rule-2);border-radius:10px;padding:8px 10px;font:inherit;font-size:13.5px;display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--panel);color:var(--ink);cursor:pointer}
.choice small{color:var(--ink-3);font-size:12px}
.choice.on{border-color:var(--kelp);box-shadow:inset 0 0 0 1px var(--kelp)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chipbtn{padding:6px 12px;border-radius:16px;background:var(--panel-2);font:inherit;font-size:13px;border:0;color:var(--ink);cursor:pointer}
.chipbtn.on{background:var(--kelp);color:var(--panel);font-weight:600}
.jmore{display:flex;flex-direction:column;gap:6px}
.jmore summary{cursor:pointer;color:var(--ink-2);font-size:13.5px}
.lasttalk{border:0;background:none;padding:0;text-align:left;font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.step > .btn{align-self:flex-start}
.jflow[hidden],.dotview[hidden],.jwhat[hidden],#jeditbox[hidden]{display:none}
.jedit{display:flex;flex-direction:column;gap:8px}
.jedit input,.jedit textarea{width:100%;box-sizing:border-box;font:inherit;font-size:14px}
.jedit input{font-weight:600}
.jpage h1 .ibtn{vertical-align:middle;margin-left:4px}
.jpage h1 .jpin.on{color:var(--ruby)}
@media (max-width:600px){.flow .st{width:70px}}

/* a queued job on hold, and a queued job's buttons (job 152, design entry 48) */
.si.held{border:0;background:none;width:12px;height:12px;color:var(--ink-3);display:inline-flex}
.si.held svg{width:12px;height:12px}
.jline.held .t,.jline.held .id{color:var(--ink-3)}
.jline.held .t{font-style:italic}
.jline .qacts{display:flex;gap:2px;justify-content:flex-end}
.jline .qacts .ibtn{min-height:24px;width:26px;padding:0;border:0;background:transparent;color:var(--ink-2)}
.jline .qacts .ibtn.on{color:var(--amber)}
.jline .qacts svg{width:15px;height:15px}
.jsq.held{opacity:.65;border-style:dashed}
.heldmark{display:inline-flex;align-items:center;gap:2px;font-size:11px;color:var(--amber)}
.heldmark svg{width:11px;height:11px}
.cnt .nheld{font-size:10px;color:var(--amber);margin-left:2px;vertical-align:super}
.bcompact td.dropok .cnt{box-shadow:0 0 0 2px var(--kelp)}
.bcompact td.dropno .cnt{box-shadow:0 0 0 2px var(--ruby)}

/* "Clear all" on the done jobs (job 176, design entry 50) */
.clearall{margin-left:10px;display:inline-flex;align-items:center;gap:4px;font-weight:400}
.clearall svg{width:14px;height:14px}
.ldone .clearall{margin:6px 0}
.jline[data-ignore],.jsq[data-ignore]{-webkit-user-select:none;user-select:none}


/* what fills a disk (job 103, design entry 52) */
.dmap{margin:4px 0 12px}
.dmap summary{cursor:pointer;font-size:13.5px;color:var(--ink-2)}
.dmapin{display:flex;flex-direction:column;gap:6px;padding:8px 0 0}
.crumbs{display:flex;flex-wrap:wrap;gap:4px;align-items:baseline;font-size:13.5px}
.crumb{border:0;background:none;padding:2px 2px;color:var(--kelp);font:inherit;text-decoration:underline;cursor:pointer}
.mrows{display:flex;flex-direction:column}
.mrow{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(60px,2fr) 72px 38px;gap:10px;align-items:center;min-height:32px;padding:0 6px;border:0;border-bottom:1px solid var(--rule);
  background:none;color:var(--ink);font:inherit;font-size:13.5px;text-align:left;width:100%}
button.mrow{cursor:pointer}
button.mrow:hover{background:var(--panel-2)}
.mrow .mn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--mono);font-size:12.5px}
.mrow.go .mn{color:var(--kelp)}
.mrow .mb{height:10px;background:var(--bar-bg);border-radius:3px;overflow:hidden}
.mrow .mb i{display:block;height:100%;background:var(--kelp)}
.mrow.rest .mb i{background:var(--ink-3)}
.mrow.rest .mn{font-family:inherit;color:var(--ink-2);font-style:italic}
.mrow .num{text-align:right;font-variant-numeric:tabular-nums}
.mrow .pc{text-align:right;font-size:12px}
.mnote{font-size:12.5px;color:var(--ink-2);margin:4px 0}
.dmapin > .btn{align-self:flex-start}

/* a session's tasks, each with its jobs (job 184, design entry 53) */
.stasks .stask{padding:8px 0}
.sruns{list-style:none;margin:6px 0 0 14px;padding:0 0 0 10px;border-left:2px solid var(--rule-2);display:flex;flex-direction:column;gap:4px}
.srun{font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.srun .p{display:inline-block;width:80px;height:4px;background:var(--bar-bg);border-radius:2px;overflow:hidden}
.srun .p i{display:block;height:100%;background:var(--kelp)}
.srun .text{flex-basis:100%}

/* a task's page: its parent, criteria, results, jobs and sub-tasks (job 180) */
.jparent,.jcrit{font-size:13.5px}
.jparent a{color:var(--ink)}
.klist{display:flex;flex-direction:column}
.kline{display:grid;grid-template-columns:56px minmax(0,1fr) auto minmax(60px,200px);gap:10px;align-items:center;min-height:34px;border-bottom:1px solid var(--rule);color:var(--ink);text-decoration:none;font-size:13.5px}
.kline .id{font-family:var(--mono);font-size:12px;color:var(--ink-3)}
.kline .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kline .p{display:block;height:4px;background:var(--bar-bg);border-radius:2px;overflow:hidden}
.kline .p i{display:block;height:100%;background:var(--kelp)}
.kline .r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px}
.tresults{display:flex;flex-direction:column;gap:8px}
.tresults h2{margin:0}
@media (max-width:600px){.kline{grid-template-columns:48px minmax(0,1fr) auto}.kline .p,.kline .r{grid-column:2 / -1}}
#newf .choices,#givejob .choices{flex-wrap:wrap}

/* an idle session's card, dimmed (job 133, design entry 54) */
.scard.idle{opacity:.62}
.scard.idle:hover,.scard.idle:focus-within{opacity:1}

/* a bug button on every pop-up (job 185) */
.popbug{position:absolute;top:8px;right:60px;border:0;background:transparent;color:var(--ink-3);cursor:pointer;min-width:var(--ctl);min-height:var(--ctl);display:inline-flex;align-items:center;justify-content:center}
.popbug svg{width:18px;height:18px}
.popbug:hover{color:var(--ink)}
dialog.viewpop .popbug{position:sticky;top:6px;float:right;margin:6px 4px 0 0;z-index:5;background:var(--panel);border-radius:50%}

/* when it ends (job 189) */
.eta{color:var(--kelp);font-variant-numeric:tabular-nums;white-space:nowrap}
.pline .eta{flex:none}

/* the problem and feature windows (job 183, design entry 58) */
dialog.rpop{width:min(560px,calc(100vw - 32px))}
dialog.rpop .popin{display:flex;flex-direction:column;gap:10px;padding:14px 18px 18px}
dialog.rpop .rhead{display:flex;align-items:center;gap:8px;margin:2px 56px 0 0;font-size:19px}
dialog.rpop .rhead svg{width:20px;height:20px}
dialog.rpop.prob .rhead svg{color:var(--ruby)}
dialog.rpop.feat .rhead svg{color:var(--kelp)}
dialog.rpop .rabout{margin:0;font-size:13px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
dialog.rpop textarea{min-height:120px;width:100%;box-sizing:border-box}
dialog.rpop .ricons{display:flex;gap:8px;align-items:center}
dialog.rpop .ricons .btn.primary{display:inline-flex;gap:6px;align-items:center}
dialog.rpop .ricons svg{width:16px;height:16px}
dialog#reportdlg.rpop{padding:0}

/* the session banner in place of "Needs you" (job 181, design entry 59) */
.sbanner{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:4px 0}
.sbchip{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--rule-2);border-radius:20px;background:var(--panel);color:var(--ink);
  font:inherit;font-size:14px;padding:6px 12px;min-height:var(--ctl);cursor:pointer}
.sbchip[disabled]{cursor:default;color:var(--ink-2)}
.sbchip.has{border-color:var(--ruby);box-shadow:inset 0 0 0 1px var(--ruby)}
.sbchip .dot{width:9px;height:9px;border-radius:50%;background:var(--ink-3)}
.sbchip.busy .dot{background:var(--kelp)}
.sbchip.waiting .dot{background:var(--ruby)}
.sbchip.idle{opacity:.7}
.sbchip .ubadge{position:static}
.sbchip.ign{color:var(--ink-2)}
.needpile{display:flex;flex-direction:column;gap:12px}
.jline .ubadge,.jsq .ubadge,.pnote .ubadge{cursor:pointer}
.chip.planned{background:transparent;border:1px dashed var(--rule-2);color:var(--ink-2)}

/* away: the sleeping orca fills the screen (task 251) */
dialog.away{border:0;margin:0;padding:24px;width:100vw;height:100vh;max-width:none;max-height:none;background:#0a2630;color:#eaf3f4;
  display:none;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px}
dialog.away[open]{display:flex}
dialog.away::backdrop{background:#0a2630}
dialog.away img{width:min(60vw,300px);height:auto}
dialog.away h1{color:#fbfdfd;margin:14px 0 4px}
dialog.away p{max-width:420px;color:#b9d0d5;margin:0 0 18px}
dialog.away .btn{font-size:var(--t3);padding:14px 34px;background:#fbfdfd;color:#0a2630;border-color:#fbfdfd}
.qlimit{margin:0 0 8px}
.decided h3{margin:0 0 8px}
.ask.done2{border-left-color:var(--ink-3,#8aa)}
.decided .row-actions{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}

/* Home, task 255: machines with jobs, sessions with tasks, pins, backlog, queue */
.hsec{margin:0 0 18px}
.hsec>h3{margin:0 0 8px;display:flex;align-items:baseline;gap:10px}
.linkbtn{background:none;border:0;padding:0;font:inherit;font-size:var(--t1);font-weight:400;color:var(--ink-2);text-decoration:underline;cursor:pointer}
.mcards,.scards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px}
.mcard,.scard2{background:var(--panel);border-radius:var(--r1);padding:10px 12px;min-width:0}
.mcard>summary{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;margin-bottom:6px}
.mcard>summary::-webkit-details-marker{display:none}
.mcard:not([open])>summary{margin-bottom:0}
.mcard .n{margin-left:auto;font-size:var(--t1);color:var(--ink-2);background:rgba(127,127,127,.18);border-radius:10px;padding:1px 8px}
.mtrs{display:flex;gap:8px;align-items:center;min-width:0;font-size:var(--t0)}
.mtr{display:inline-flex;flex-direction:column;gap:2px;width:34px}
.mtr b{font-weight:400;font-size:10px;color:var(--ink-3);line-height:1}
.mtr i{display:block;height:5px;border-radius:3px;background:rgba(127,127,127,.22);overflow:hidden}
.mtr u{display:block;height:100%;background:var(--kelp);border-radius:3px}
.mtr.warn u{background:var(--ruby)}
.mtr.none i{background:repeating-linear-gradient(135deg,rgba(127,127,127,.25) 0 3px,transparent 3px 6px)}
.jline{position:relative;display:flex;justify-content:space-between;gap:10px;align-items:center;padding:6px 9px;margin-top:4px;border-radius:6px;background:rgba(127,127,127,.12);overflow:hidden;text-decoration:none;color:var(--ink);font-size:var(--t1)}
.jline .fill{position:absolute;left:0;top:0;bottom:0;background:var(--kelp);opacity:.28}
.jline .t,.jline .m{position:relative}
.jline .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jline .m{white-space:nowrap;color:var(--ink-2);font-variant-numeric:tabular-nums}
.jline.pinned,.tline.pinned{box-shadow:inset 3px 0 0 var(--ruby)}
details.more>summary{cursor:pointer;color:var(--ink-2);font-size:var(--t1);padding:6px 2px;list-style:none}
details.more>summary::-webkit-details-marker{display:none}
details.more[open]>summary{display:none}
.scard2 .sh{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.scard2 .sh .badges{margin-left:auto;display:flex;gap:6px;align-items:center}
.ibadge{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;padding:0 6px;border-radius:11px;border:0;font:inherit;font-size:12px;font-weight:700;line-height:1;color:#fff}
.ibadge.need{background:#e5383b;cursor:pointer}
.ibadge.msg{background:var(--ink-3);min-width:18px;height:18px;font-size:11px}
.ibadge.close{background:var(--kelp)}
.tline{display:flex;align-items:center;gap:6px;margin-top:4px;padding:5px 4px 5px 9px;border-radius:6px;background:rgba(127,127,127,.12);font-size:var(--t1)}
.tline>a{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(60px,34%);column-gap:10px;align-items:center;text-decoration:none;color:var(--ink)}
.tline .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tline .s{grid-column:1/-1;color:var(--ink-2);font-size:var(--t0);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tparts{display:grid;gap:2px;height:6px}
.tparts i{border-radius:2px;background:rgba(127,127,127,.28)}
.tparts i.done{background:var(--kelp)}
.tparts i.now{background:var(--kelp);opacity:.55;outline:1.5px solid var(--kelp)}
.pinbtn2{background:none;border:0;padding:4px;color:var(--ink-3);cursor:pointer;display:inline-flex}
.pinbtn2 .icon{width:15px;height:15px}
.pinbtn2.on{color:var(--ruby)}
.pinsec .pinwall{margin-bottom:10px}
.cfitems{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:10px}
.cfitem{position:relative;background:rgba(127,127,127,.12);border-radius:10px;padding:10px 12px 10px 12px;font-size:var(--t1);transition:opacity .2s,transform .2s}
.cfitem.going{opacity:.3;transform:scale(.96)}
.cfitem>a{display:block;margin-right:26px;color:var(--ink);text-decoration:none}
.cfitem .r{color:var(--ink-2);margin:4px 0 8px;overflow-wrap:anywhere}
.cfitem .free{display:flex;gap:6px}
.cfitem .free input{flex:1;min-width:0}
.cfx{position:absolute;right:6px;top:6px;width:24px;height:24px;border-radius:12px;border:0;background:var(--ink-3);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.cfx .icon{width:13px;height:13px}
.halves{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.bline,.qline{display:flex;align-items:center;gap:8px;padding:6px 9px;margin-top:4px;border-radius:6px;background:var(--panel);font-size:var(--t1)}
.bline>a,.qline>a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);text-decoration:none}
.bline .dim,.qline .dim{white-space:nowrap;font-size:var(--t0)}
.qbox{margin-bottom:10px}
.qbox .qh{font-size:var(--t1)}
.qline{cursor:grab}
.qline .grip{color:var(--ink-3);letter-spacing:-2px}
.qline .qpos{color:var(--ink-2);min-width:1.2em;text-align:right}
.qline.hold{opacity:.6}
.qline.over{box-shadow:0 -2px 0 var(--kelp)}
.qline.dragfrom{opacity:.4}
.foot{margin:6px 0 0}
@media (max-width:599px){.mtr{width:26px}.mcards,.scards2{grid-template-columns:1fr}}

/* notifications (task 259) */
.bellbtn,#pagesbtn{position:relative}
#pagesbtn .ibadge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;font-size:11px;padding:0 5px;border:2px solid var(--water)}
.menupop .mi{position:relative}
.menupop .mi .ibadge{position:absolute;top:2px;right:6px;min-width:18px;height:18px;font-size:11px;padding:0 5px}
.bellbtn .ibadge{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;font-size:11px;padding:0 5px;border:2px solid var(--water)}
dialog.notifs{border:0;border-radius:var(--r2);padding:0;margin:64px 12px 0 auto;width:min(440px,calc(100vw - 24px));max-height:calc(100vh - 90px);background:var(--panel);color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.35);overflow:auto;overflow-x:hidden}
dialog.notifs::backdrop{background:rgba(0,0,0,.25)}
.notifs .nhead{display:flex;align-items:center;gap:10px;padding:12px 14px;position:sticky;top:0;background:var(--panel);z-index:1}
.notifs .nhead b{flex:1;font-size:var(--t3)}
.notifs .popx2{background:none;border:0;color:var(--ink-2);padding:4px;cursor:pointer;display:inline-flex}
.notifs>p{padding:0 14px 14px}
.nrow{position:relative;padding:10px 40px 10px 14px;border-top:1px solid rgba(127,127,127,.2);cursor:pointer;touch-action:pan-y;transition:opacity .2s,transform .2s;font-size:var(--t1)}
.nrow.going{opacity:0;transform:translateX(60%)!important}
.nrow .nk{display:flex;gap:8px;align-items:center;margin-bottom:3px}
.nrow .nt{font-weight:600;overflow-wrap:anywhere}
.nrow .nx2{color:var(--ink-2);overflow-wrap:anywhere}
.nrow .nx{position:absolute;right:8px;top:8px;width:24px;height:24px;border-radius:12px;border:0;background:rgba(127,127,127,.25);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.nrow .nx .icon{width:12px;height:12px}
.nchip{font-size:11px;font-weight:700;border-radius:9px;padding:1px 8px;color:#fff}
.nchip.need{background:#e5383b}.nchip.msg{background:var(--ink-3)}.nchip.close{background:var(--kelp)}.nchip.dec{background:#b7791f}

/* Home fits the screen; each part scrolls inside itself (tasks 263, 266) */
.hbtn{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.hbtn .icon{width:15px;height:15px;color:var(--ink-3)}
.lines{min-height:0}
/* job 417: the jobs of a machine that does not answer are drawn faded */
.lines.unsure{opacity:.6}
p.unsure{margin:4px 0;font-size:.85em}
[data-card]{cursor:grab}
[data-card].dragfrom{opacity:.4}
.swhead .popx2,.popx2{background:none;border:0;color:var(--ink-2);padding:4px;cursor:pointer;display:inline-flex}
@media (min-width:641px) and (min-height:501px){
  .homemain.fit{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,3fr) minmax(0,4fr) minmax(0,3fr);gap:10px;min-height:0;flex:1 1 auto;overflow:hidden}
  .homemain.fit .hsec{margin:0;min-height:0;display:flex;flex-direction:column}
  .homemain.fit .hsec>h3{flex:none;margin-bottom:6px}
  .homemain.fit .mcards,.homemain.fit .scards2{flex:1;min-height:0;display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:minmax(250px,1fr);grid-template-rows:minmax(0,1fr);gap:10px;overflow-x:auto;overflow-y:hidden}
  .homemain.fit .mcard,.homemain.fit .scard2{min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .homemain.fit .mcard>summary,.homemain.fit .scard2 .sh{flex:none}
  .homemain.fit .lines,.homemain.fit .scrolly{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
  .homemain.fit .hbottom{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:14px;min-height:0}
}
@media (max-width:640px),(max-height:500px){.hbottom{display:block}.hbottom .hsec{margin-bottom:18px}}
/* the swipeable screen behind a session's count (task 267) */
dialog.swipe{border:0;border-radius:var(--r2);padding:0;width:min(620px,calc(100vw - 20px));max-height:calc(100vh - 60px);background:var(--bg,var(--panel));color:var(--ink);box-shadow:0 12px 40px rgba(0,0,0,.4);overflow:hidden}
dialog.swipe::backdrop{background:rgba(0,0,0,.4)}
.swhead{display:flex;align-items:center;gap:10px;padding:12px 16px}
.swhead b{flex:1}
dialog.swipe>p{padding:0 16px 16px}
.swtrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.swtrack::-webkit-scrollbar{display:none}
.swcard{flex:0 0 100%;scroll-snap-align:center;box-sizing:border-box;padding:4px 16px 18px;max-height:calc(100vh - 130px);overflow-y:auto;margin:0;border-left:0;background:none}
.swcard .from{display:block;font-weight:700;color:var(--ink);text-decoration:none;margin-bottom:6px}
.dmsg{border-radius:12px;padding:8px 12px;margin:6px 0;max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--t2)}
.dmsg.you{margin-left:auto;background:var(--kelp);color:#fff}
.dmsg.it{background:var(--panel)}
.dmsg.it .dim{display:block;font-size:var(--t0);margin-top:4px}
.dmsg.new{outline:2px solid #e5383b;outline-offset:1px;animation:dnew 1.2s ease-out 1}
@keyframes dnew{from{background:rgba(229,56,59,.28)}to{background:var(--panel)}}
.homemain.fit{grid-template-columns:minmax(0,1fr)}
@media (max-width:640px),(max-height:500px){.homemain.fit{display:block}}
.qbox .qh{display:flex;gap:6px;align-items:center}

/* an answered question leaves, or folds with a check (task 268) */
.answered-out{opacity:0;transform:scale(.97);transition:opacity .25s,transform .25s}
.qdone{display:flex;align-items:center;gap:8px;color:var(--kelp);padding:6px 0;font-weight:600}
.qdone .icon{width:18px;height:18px}
.qwrap.held>.qdone{opacity:.85}
/* the page behind an open window does not scroll (task 269) */
html:has(dialog[open]),html:has(dialog[open]) body{overflow:hidden;overscroll-behavior:none}
dialog{overscroll-behavior:contain}
dialog *{overscroll-behavior:contain}
dialog.folderpop{border:0;border-radius:28px;padding:20px 22px 24px;width:min(720px,calc(100vw - 28px));max-height:calc(100vh - 80px);background:var(--panel);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.45);overflow-y:auto}
dialog.folderpop::backdrop{background:rgba(0,0,0,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
dialog.folderpop h2{margin:0 0 14px;text-align:center;font-size:var(--t4)}
dialog.folderpop .cfitems{margin-top:0}
dialog.folderpop .cfitem{border-radius:16px;padding:14px}
dialog.folderpop .cfx{left:-7px;top:-7px;right:auto;background:#6b7a80;box-shadow:0 1px 4px rgba(0,0,0,.4)}
dialog.folderpop .cfitem>a{margin-right:0}

/* a colour per machine: its card, its jobs' fill, and a dot on each task that runs a job there (task 274) */
.mdot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:var(--mc)}
.mcard{border-top:3px solid var(--mc,transparent)}
.mcard .jline .fill{background:var(--mc,var(--kelp));opacity:.38}
@media (min-width:641px) and (min-height:501px){
  .pinsec .scrolly{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
  .pinsec .pinwall{margin-bottom:0;min-width:0}
}

/* the folder on a phone: it leaves room around it, has its own close, and a tile is a name until pressed (task 276) */
dialog.folderpop{padding:0;max-height:min(78vh,calc(100dvh - 120px));display:none;flex-direction:column;overflow:hidden}
dialog.folderpop[open]{display:flex}
.cfhead{flex:none;display:flex;align-items:center;gap:10px;padding:16px 18px 10px}
.cfhead h2{flex:1;margin:0!important;text-align:left!important;font-size:var(--t3)!important}
dialog.folderpop .cfitems{flex:1;min-height:0;overflow-y:auto;padding:10px 18px 20px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));align-items:start}
dialog.folderpop .cfitem{padding:0}
.cfname2{display:block;width:100%;text-align:left;background:none;border:0;font:inherit;color:var(--ink);padding:12px 14px;cursor:pointer;overflow-wrap:anywhere}
.cfitem.open{grid-column:1/-1}
.cfmore{padding:0 14px 14px}
.cfmore .r{white-space:pre-wrap}
.cfmore a .icon{width:16px;height:16px;margin-top:8px}
@media (max-width:640px){dialog.folderpop{width:calc(100vw - 36px);border-radius:24px}}

/* a reply on a discussion's card, and the window's bug button (task 277) */
.swreply{display:flex;gap:8px;align-items:flex-end;margin-top:12px;position:sticky;bottom:0;background:var(--bg,var(--panel));padding:8px 0 2px}
.swreply textarea{flex:1;min-width:0;min-height:44px;font-size:16px}
.swreply .btn{flex:none;height:44px}

/* a task's reports, swiped sideways; a central one is marked (task 283) */
.reps{margin:10px 0}
.rephead{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.rephead b{flex:1}
.rephead .ibtn{display:inline-flex;align-items:center;gap:4px}
.reptrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:10px;overscroll-behavior-x:contain}
.reptrack::-webkit-scrollbar{display:none}
.repcard{flex:0 0 100%;box-sizing:border-box;scroll-snap-align:center;background:var(--panel);border-radius:var(--r1);padding:12px 14px;border-left:4px solid rgba(127,127,127,.35);max-height:55vh;overflow-y:auto}
.repcard.central{border-left-color:var(--ruby)}
.repcard .when{display:flex;align-items:center;gap:6px;font-size:var(--t1);color:var(--ink-2);margin-bottom:4px}
.repcard .when .icon{width:14px;height:14px;color:var(--ruby)}
.reptext{white-space:pre-wrap;overflow-wrap:anywhere}
.rephead .ibtn{width:auto;min-width:0;padding:0 10px;height:32px}

/* one tile per account in the band: usage bars with their percent, and the sign-in's days (task 285) */
.atile{gap:12px;height:auto;min-height:44px;padding:6px 14px;flex-wrap:wrap;max-width:100%;box-sizing:border-box}
.atile b{font-size:var(--t2);overflow-wrap:anywhere;min-width:0}
.ause{display:inline-flex;flex-direction:column;gap:3px;font-size:11px;line-height:1;min-width:58px;text-align:left;font-variant-numeric:tabular-nums}
.ause i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
.ause u{display:block;height:100%;border-radius:3px;background:#5fd3c9}
.ause.high u{background:#f0c05a}
.ause.full u{background:#ff7d95}
.ause.full>span{color:#ff9fb1}
.ause.none i{background:repeating-linear-gradient(135deg,rgba(255,255,255,.3) 0 3px,transparent 3px 6px)}
.akey{display:inline-flex;align-items:center;gap:4px;font-size:var(--t1);font-weight:600}
.akey .icon{width:15px;height:15px;opacity:.8}
.akey.loud{color:#ff9fb1}
#topstats{flex-wrap:wrap}

/* a machine's own window (task 286) */
.mname{background:none;border:0;padding:0;font:inherit;font-weight:700;color:inherit;cursor:pointer}
dialog.mpop{border:0;border-radius:var(--r2);padding:0;width:min(900px,calc(100vw - 24px));max-height:min(88vh,calc(100dvh - 60px));background:var(--bg,var(--panel));color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.45);display:none;flex-direction:column;overflow:hidden}
dialog.mpop[open]{display:flex}
dialog.mpop::backdrop{background:rgba(0,0,0,.4)}
dialog.mpop .cfhead h2{display:flex;align-items:center;gap:10px}
dialog.mpop .mbody{flex:1;min-height:0;overflow-y:auto;padding:4px 18px 20px}
dialog.mpop .machines{display:block;margin-bottom:10px}
/* the stages as a timeline, each ended stage with its report (task 294) */
.stl{list-style:none;margin:0;padding:0}
.stl li{position:relative;padding:0 0 14px 26px}
.stl li::before{content:"";position:absolute;left:6px;top:16px;bottom:0;width:2px;background:var(--rule-2)}
.stl li:last-child::before{display:none}
.stl li.done::before{background:var(--kelp)}
.stl .dot{position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;border:2px solid var(--rule-2);box-sizing:border-box;background:var(--panel)}
.stl li.done .dot{background:var(--kelp);border-color:var(--kelp)}
.stl li.now .dot{background:var(--kelp);border-color:var(--kelp);box-shadow:0 0 0 4px var(--kelp-soft)}
.stl .stlhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:14px}
.stl li.next .stlhead{color:var(--ink-3)}
.stl .stlhead .dim{font-size:var(--t1)}
.stl .pct{font-weight:600;color:var(--kelp)}
.stl .stlrep{margin-top:6px;background:var(--panel);border-radius:var(--r1);padding:10px 12px;border-left:4px solid var(--kelp)}
.stl li .dim{font-size:13px}
/* the completion report, chapter by chapter (tasks 301, 303) */
.comp{background:var(--panel);border-radius:var(--r1);padding:12px 14px;border-left:4px solid var(--ruby)}
.comp h2{font-size:16px;margin:0 0 8px;display:flex;gap:10px;align-items:baseline}
.comp h2 .dim{font-size:var(--t1);font-weight:400}
.comp h3{font-size:14px;margin:12px 0 4px}
.jadv>summary{cursor:pointer;color:var(--ink-3);font-size:13px;padding:6px 0}
.jadv[open]{display:flex;flex-direction:column;gap:12px}

/* a task of the backlog dragged onto the queue (job 379) */
.bline[draggable]{cursor:grab}
.qdropok{outline:2px dashed var(--teal, #5fd3c9);outline-offset:2px;border-radius:10px}
.jreopen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:6px 0}
.jreopen input{flex:1;min-width:160px}

/* the search bar (job 388): a box on a wide screen, a button on a phone */
.searchbox{height:40px;width:240px;border-radius:20px;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.08);color:var(--water-ink);padding:0 14px;font:inherit}
.searchbox::placeholder{color:var(--water-ink);opacity:.7}
.searchbtn{display:none}
@media (max-width: 1400px){ .searchbox{display:none} .searchbtn{display:inline-flex} }
dialog.searchpop{width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 80px);padding:0;border:0;border-radius:16px;background:var(--panel);color:var(--ink)}
.searchpop .shead{display:flex;gap:8px;padding:12px;border-bottom:1px solid var(--rule-2);position:sticky;top:0;background:var(--panel)}
.searchpop .shead input{flex:1;height:42px;font-size:16px;padding:0 12px;border-radius:10px;border:1px solid var(--rule-2);background:var(--panel);color:var(--ink)}
.searchpop .sres{padding:4px 12px 14px;overflow:auto;max-height:calc(100vh - 160px)}
.searchpop h3{margin:14px 0 6px;font-size:var(--t2)}
.searchpop .srow{display:block;padding:8px 10px;border-radius:10px;color:inherit;text-decoration:none}
.searchpop .srow:hover,.searchpop .srow:focus{background:var(--rule-2)}
.searchpop .snip{font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog.searchpop::backdrop{background:rgba(8,22,28,.55)}
dialog.searchpop{box-shadow:0 20px 60px rgba(0,0,0,.45);margin-top:60px}

/* The owner's photo of Península Valdés behind every page (job 395). It is
   fixed, and a layer of the page's own colour fades it so text reads; the
   cards keep their solid colour. Until the first view has drawn, the layer
   is thin and the photo is seen clearly. */
body::before,body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}
body::before{background:url(valdes.jpg) center 58%/cover no-repeat;transition:opacity .6s ease}
/* the page's script hides it until the whole file has arrived, so it is
   never drawn strip by strip (job 399) */
html.bgwait body::before{opacity:0}
@media (max-width: 900px){ body::before{background-image:url(valdes-960.jpg)} }
body::after{background:var(--bg);opacity:.8;transition:opacity .9s ease}
html.loading body::after{opacity:.12}

/* The band is one line on a screen wider than 640 pixels (the owner, job
   397: "The control bar is HUGE. It really shouldnt be. It should be a single
   line."). Each account tile is compact: its email above its small bars and
   its days; the tiles scroll sideways if they do not fit. */
@media (min-width: 641px) and (min-height: 501px){
  .top .row{flex-wrap:nowrap;padding-top:8px;padding-bottom:4px;gap:12px}
  .brand img{width:34px;height:34px}
  #topstats{flex-wrap:nowrap;flex:1 1 auto;margin-left:4px}
  .top .read{flex:0 1 auto;min-width:0;max-width:160px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .searchbox{width:200px}
}
@media (min-width: 641px) and (max-width: 1400px){ .brand .bname{display:none} }
.atile{display:inline-grid;grid-auto-flow:column;grid-auto-columns:max-content;align-items:center;justify-items:start;
  min-height:0;height:auto;padding:5px 10px;gap:2px 8px;border-radius:12px;flex:none}
.atile>*{grid-row:2}
.atile b{grid-row:1;grid-column:1 / span 5;font-size:12.5px;line-height:1.25;white-space:nowrap;overflow-wrap:normal}
.ause{min-width:40px;font-size:10px;gap:2px}
.ause i{height:4px}
.akey{font-size:12px}
.akey .icon{width:13px;height:13px}
/* on a phone: the buttons on one line, the account tiles on one row that scrolls sideways (job 397) */
@media (max-width: 640px), (max-height: 500px){ #topstats{flex-wrap:nowrap;overflow-x:auto} }

/* job 439, the owner: "dont make 2d scrolls anywhere, I dont like that, you
   should scroll either up down or left right thats it". Every box that
   scrolls names one direction; no box that scrolls one way holds a box that
   scrolls the other. tools/check-layout fails a view that breaks this. */
.pinwall{flex-wrap:wrap;overflow:visible}
.scrolly,.lines{overflow-x:hidden}
.wrapcells td,.wrapcells th{overflow-wrap:anywhere}
@media (min-width:641px) and (min-height:501px){
  .pinsec .scrolly{display:block}
  /* the cards of machines and sessions wrap into rows that scroll up and
     down; a card shows all its lines and does not scroll by itself */
  .homemain.fit .mcards,.homemain.fit .scards2{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-auto-columns:auto;
    grid-template-rows:none;grid-auto-rows:auto;align-content:start;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
  .homemain.fit .mcard,.homemain.fit .scard2{overflow:visible}
  .homemain.fit .mcard .lines,.homemain.fit .scard2 .lines{flex:none;overflow:visible}
}
/* the board fits the width and scrolls only up and down (job 439) */
.board,.bgrid{overflow-x:hidden;overflow-y:auto}
.board table{min-width:0}
.board td,.board th{overflow-wrap:anywhere}
/* a report card shows all its text: the strip of cards is swiped sideways,
   and nothing inside a card scrolls (job 439) */
.repcard{max-height:none;overflow:visible}
.reptrack{align-items:flex-start;overflow-y:hidden}
/* the stages of a job wrap onto more lines instead of sliding sideways (job 439) */
.flow{flex-wrap:wrap;overflow-x:visible;row-gap:4px}