/* The manager page, on top of ../assets/site.css. Class names are the ones app.js renders.
 * 1-bit, as the flasher: two tones only, ink and a cool grey; the dark theme swaps them. States are borders, dashes and
 * inversion, never colour; greys are a dither. No rounded corners, one typeface (Space Mono).
 * The tokens, the header, the buttons and the footer are the flasher's (../flasher/style.css): keep them alike.
 * site.css also styles .wrap, .top, .brand, .btn and .foot: the rules here override all it sets on them.
 * Plain CSS (no nesting, color-mix or :has). */

:root{
  color-scheme:light;
  --ink:#0b0c0e;
  --paper:#d7dbe0;
  --card:#e6ebf1;          /* the tiles and dialogs, a shade lighter than the page; the dark theme keeps them on the page's tone */
  --casing:var(--paper);
  --well:var(--paper);
  --line:var(--ink);
  --line-2:var(--ink);
  --ink-2:var(--ink);
  --muted:var(--ink);
  --ctl:var(--ink);
  --ctl-ink:var(--paper);
  --ctl-edge:var(--ink);
  --red:var(--ink);
  --red-ink:var(--ink);
  --accent-ink:var(--paper);
  --accent-glow:transparent;
  --accent-2:var(--ink);
  --accent-2-bg:var(--paper);
  --ok:var(--ink);
  --warn:var(--ink);
  --bad:var(--ink);
  --f:"Space Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --f-code:var(--f);
  --r:0;
  --wrap:1120px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){color-scheme:dark;--ink:#d7dbe0;--paper:#0b0c0e;--card:var(--paper)}
}
:root[data-theme="dark"]{color-scheme:dark;--ink:#d7dbe0;--paper:#0b0c0e;--card:var(--paper)}

body{font:400 15px/1.5 var(--f);-webkit-font-smoothing:auto}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:3px solid currentColor;outline-offset:3px}
a{text-decoration-thickness:2px;text-decoration-color:currentColor;text-underline-offset:.22em}
a:hover{text-decoration-thickness:4px;text-decoration-color:currentColor}
h1,h2,h3{font-family:var(--f);font-weight:700;letter-spacing:0;text-transform:uppercase;line-height:1}
button,input,select{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[hidden]{display:none !important}

/* header */
.top{align-items:center;gap:10px 20px;padding-top:24px}
.brand{font:700 20px/1 var(--f);text-transform:uppercase;letter-spacing:0}
.top nav{gap:6px 16px;align-items:center;font:700 14px/1 var(--f);text-transform:uppercase}
.top nav a{text-decoration:none}
.top nav a:hover,.top nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:3px;text-underline-offset:.3em}
.theme-btn{width:36px;height:36px;margin:0;border:3px solid var(--ink);border-radius:0;color:var(--ink)}
.theme-btn:hover{background:var(--ink);color:var(--paper)}

/* buttons: a block of ink; disabled, an empty dashed frame; .inv, a block of paper on the Cycles' card */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 20px;border:3px solid var(--ink);border-radius:0;
  background:var(--ink);color:var(--paper);box-shadow:none;font:700 14px/1 var(--f);text-transform:uppercase;text-decoration:none;cursor:pointer;
  transition:transform .08s steps(2)}
.btn:hover{background:var(--ink);color:var(--paper);transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:none}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--paper);transform:none;box-shadow:none}
.btn.inv{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn.inv:hover{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--paper)}
.btn.sm{min-height:44px;padding:0 14px;font-size:13px}
.btn.big{min-height:56px;padding:0 24px;font-size:15px}
.btn:disabled,.btn:disabled:hover{background:transparent;color:var(--ink);border-style:dashed;cursor:not-allowed;transform:none;box-shadow:none}
.btn.inv:disabled,.btn.inv:disabled:hover{color:var(--paper);border-color:var(--paper)}
.lnk{padding:0;background:none;border:0;font:700 13px/1.4 var(--f);text-transform:uppercase;cursor:pointer;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.22em}
.lnk:hover{text-decoration-thickness:4px}
.lnk:disabled{cursor:not-allowed;text-decoration-style:dashed}
.small{font-size:13px}

/* the page */
.mg{display:flex;flex-direction:column;gap:28px;padding-top:32px;padding-bottom:16px}
.mg-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 24px}
.mg-head h1{font-size:28px;line-height:1.15}
.mg-head p{margin:8px 0 0;max-width:62ch}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border:3px solid var(--ink);
  background:transparent;font:700 13px/1 var(--f);text-transform:uppercase;cursor:pointer}
.chip:hover{background:var(--ink);color:var(--paper)}
.chip:disabled{cursor:not-allowed}
.dot{display:inline-block;width:10px;height:10px;background:currentColor}
.chip.off .dot{background:transparent;border:2px dashed currentColor}
.ports{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:12px 14px;border:3px dashed var(--ink);font-size:13px}
.ports select{min-height:40px;padding:0 8px;background:var(--paper);border:3px solid var(--ink)}

.status{margin:0;padding:10px 14px;border:3px solid var(--ink);font-weight:700}
.status.bad{background:var(--ink);color:var(--paper)}
.status.warn{border-style:dashed}

/* the Cycles' card */
.device{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;padding:28px;
  background:var(--ink);color:var(--paper);border:3px solid var(--ink)}
.device .col{display:flex;flex-direction:column;gap:10px;min-width:0}
.device .label{font:700 13px/1.4 var(--f);text-transform:uppercase}
.device .dname{font:700 40px/1.05 var(--f);text-transform:uppercase;overflow-wrap:anywhere}
.device .meta{display:flex;flex-wrap:wrap;gap:6px 28px}
.device .acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.device select{min-height:48px;padding:0 10px;background:var(--paper);color:var(--ink);border:3px solid var(--paper);font-weight:700}

/* the firmwares */
.sechead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.sechead h2{font-size:20px;line-height:1}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.tile{position:relative;display:flex;flex-direction:column;gap:16px;min-height:240px;padding:20px;background:var(--card);border:3px solid var(--ink)}
.tile.here{background:var(--paper)}
.tile .head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.tile h3{font-size:18px;line-height:1.25;overflow-wrap:anywhere}
.tile .rename{flex:1;min-width:0;height:44px;padding:0 10px;background:var(--paper);border:3px solid var(--ink);font:700 16px var(--f);text-transform:uppercase}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 16px;font-size:14px}
.facts dd{margin:0;font-weight:700}
.tile .go{margin-top:auto;display:flex;flex-direction:column;gap:6px}
.tile .go .btn{width:100%}
.tag{flex:none;padding:6px 8px;background:var(--ink);color:var(--paper);font:700 12px/1 var(--f);text-transform:uppercase}
.more{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:3px solid var(--ink);cursor:pointer}
.more:hover,.more[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
.more:disabled{border-style:dashed;cursor:not-allowed}
.more:disabled:hover{background:transparent;color:var(--ink)}
.menu{position:absolute;top:72px;right:20px;z-index:3;display:flex;flex-direction:column;min-width:240px;
  background:var(--paper);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink)}
.menu button{padding:12px 16px;text-align:left;background:transparent;border:0;font:700 14px/1.3 var(--f);text-transform:uppercase;cursor:pointer}
.menu button:hover{background:var(--ink);color:var(--paper)}
.menu .sep{border-top:3px dashed var(--ink)}
.addtile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:240px;padding:20px;text-align:center;border:3px dashed var(--ink)}
.addtile.drag,.drop.drag{background:var(--ink);color:var(--paper)}

/* the library: export, import, the protocol */
.libbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px;padding-top:16px;border-top:3px solid var(--ink);font-size:13px}
.libbar .acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.logbox{display:flex;flex-direction:column;gap:8px}
.log{max-height:220px;overflow:auto;margin:0;padding:10px;background:var(--card);border:3px solid var(--ink);font:12px/1.5 var(--f);white-space:pre-wrap}

/* over the page: the switch, the history, the first start; behind them a dither of the ink */
.overlay{position:fixed;inset:0;z-index:10;overflow:auto;padding:40px 20px;background-color:var(--paper);
  background-image:repeating-conic-gradient(var(--ink) 0% 25%,transparent 0% 100%);background-size:4px 4px}
.overlay.side{padding:0;display:flex;justify-content:flex-end}
.dialog{max-width:980px;margin:0 auto;background:var(--card);border:3px solid var(--ink);box-shadow:8px 8px 0 var(--ink)}
.dhead{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 20px;padding:20px 24px;border-bottom:3px solid var(--ink)}
.dhead h1{font-size:18px;line-height:1.25}
.dbody{display:flex;flex-wrap:wrap}
.steps{flex:1 1 260px;margin:0;padding:20px 0;list-style:none;border-right:3px solid var(--ink)}
.steps li{display:flex;align-items:center;gap:12px;padding:10px 20px;font:700 14px/1.3 var(--f);text-transform:uppercase}
.steps li.doing{background:var(--ink);color:var(--paper)}
.steps .mark{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center}
.steps li.todo .mark{border:3px dashed var(--ink)}
.steps li.doing .mark{border:3px solid var(--paper)}
.steps li.done .mark{background:var(--ink);color:var(--paper)}
.steps li.failed .mark{border:3px solid var(--ink)}
.panel{flex:999 1 420px;min-width:0;min-height:360px;padding:28px;display:flex;flex-direction:column;gap:18px}
.panel h2{font-size:28px;line-height:1.15}
.panel h2.huge{font-size:40px;line-height:1.05}
.panel p{margin:0;max-width:52ch}
.panel ol{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:8px;max-width:54ch}
.bar{display:flex;align-items:center;gap:14px}
.bar .track{flex:1;height:28px;border:3px solid var(--ink)}
.bar .fill{height:100%;width:0;background:var(--ink)}
.bar .pct{flex:none;width:5ch;text-align:right;font-weight:700}
.result{display:flex;flex-direction:column;gap:4px;padding:20px;background:var(--ink);color:var(--paper)}
.result .big{font:700 26px/1.15 var(--f);text-transform:uppercase;overflow-wrap:anywhere}
.actions{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-top:auto}
.field{display:flex;flex-direction:column;gap:4px;font:700 12px/1.3 var(--f);text-transform:uppercase}
.field input{height:44px;padding:0 10px;background:var(--paper);border:3px solid var(--ink);font:700 16px var(--f)}
.dfoot{padding:12px 24px;border-top:3px solid var(--ink)}

.drawer{flex:0 1 560px;min-width:0;min-height:100%;display:flex;flex-direction:column;gap:22px;padding:24px;background:var(--card);border-left:3px solid var(--ink)}
.drawer .head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.drawer h1{font-size:22px;line-height:1.2;overflow-wrap:anywhere}
.drawer p{margin:0}
.boxed{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;padding:14px;border:3px solid var(--ink)}
.hrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:14px 0;border-top:3px dashed var(--ink)}
.hrow:first-of-type{border-top-style:solid}
.hrow .what{flex:1 1 200px;min-width:0}
.hrow .links{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px 16px}
.close{flex:none;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:3px solid var(--ink);font:700 20px/1 var(--f);cursor:pointer}
.close:hover{background:var(--ink);color:var(--paper)}

.setup{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:24px}
.setup>.shead,.setup>.pips{padding:10px 14px;background:var(--paper);border:3px solid var(--ink)}
.shead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 24px}
.stitle{font:700 20px/1 var(--f);text-transform:uppercase}
.setup .card{display:flex;flex-direction:column;gap:18px;min-height:420px;padding:28px;background:var(--card);border:3px solid var(--ink)}
.setup .card h2{font-size:28px;line-height:1.15}
.setup .card p{margin:0;max-width:54ch}
.pips{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pip{height:10px;border:3px solid var(--ink)}
.pip.on{background:var(--ink)}
.choice{display:flex;align-items:center;gap:12px;min-height:52px;padding:0 14px;border:3px solid var(--ink);font-weight:700;text-transform:uppercase;cursor:pointer}
.choice.on{background:var(--ink);color:var(--paper)}
.choice input{width:20px;height:20px;accent-color:currentColor}
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:110px;padding:16px;text-align:center;border:3px dashed var(--ink)}
.list{margin:0;padding:0;list-style:none;border-top:3px solid var(--ink)}
.list li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;padding:10px 0;border-bottom:3px dashed var(--ink)}
.nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:18px;border-top:3px solid var(--ink)}

/* footer: as the flasher's */
.foot{margin-top:56px;padding:24px 0 40px;border-top:3px solid var(--ink);font-size:13px;color:var(--ink)}
.foot .wrap{flex-direction:column;gap:10px}
.foot p{max-width:none}

@media (max-width:640px){
  .steps{border-right:0;border-bottom:3px solid var(--ink)}
  .device .dname{font-size:28px}
  .panel h2.huge{font-size:30px}
  .overlay{padding:16px 12px}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none}
  .btn:hover{transform:none}
}