.page{max-width:960px;margin:0 auto;padding:30px var(--gut) 80px}
h1{font:700 30px/1 var(--dot);letter-spacing:.04em;margin:0 0 6px;color:var(--ink);text-shadow:0 0 12px rgba(120,180,255,.18)}
.row{display:grid;grid-template-columns:18px 290px 12px 110px minmax(0,1fr) 230px;gap:0 16px;align-items:center;min-height:46px;border-top:1px solid rgba(206,222,240,.07)}
.sec + .row{border-top:0}
.row .g{color:var(--dim)}
.row .n{color:var(--ink);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .n small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-left:8px}
.dot{width:7px;height:7px;border-radius:50%;background:rgba(206,222,240,.85);box-shadow:0 0 6px rgba(206,222,240,.4)}
.dot.late{background:rgba(206,222,240,.35);box-shadow:none}
.dot.stale{background:var(--wait);box-shadow:0 0 8px rgba(240,180,76,.5)}
.dot.off{background:none;box-shadow:inset 0 0 0 1px var(--faint)}
.row .t{font-size:12px;color:var(--body);font-variant-numeric:tabular-nums;white-space:nowrap}
.row.stale .t,.row.stale .g{color:var(--wait)}
.hbs{display:grid;grid-template-columns:repeat(48,1fr);gap:1px;height:12px;cursor:help}
.hbs i{background:rgba(206,222,240,.07)}
.hbs i.on{background:rgba(206,222,240,.5)}
.row .x{justify-self:end;display:flex;gap:8px;min-width:100px;justify-content:flex-end}
.row .x .btn{height:30px;font-size:11px;color:var(--dim)}
.row .x .btn.go{color:var(--ink)}
.row.ask{border:0;box-shadow:inset 0 0 0 1px rgba(240,180,76,.45);padding:0 12px;margin:14px 0 4px;grid-template-columns:18px 170px 12px minmax(0,1fr) auto}
.row.ask .g{color:var(--wait)}
.row.ask code{font:700 15px var(--dot);letter-spacing:.12em;color:var(--wait)}
.row.ask a{color:var(--ink);font-size:12px;justify-self:end}
.row.gone .n,.row.gone .t{color:var(--faint)}
h1 + .addb{margin-left:auto}
.hd{display:flex;align-items:center;gap:20px;margin-bottom:6px}
.hd h1{margin:0}
.hd .btn{margin-left:auto}
.row .n .o{font-size:10.5px;color:var(--faint);margin-left:10px;letter-spacing:.02em}
.add{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:18px 30px;align-items:center;margin:16px 0 4px;padding:18px 20px;box-shadow:inset 0 0 0 1px rgba(240,180,76,.45)}
.add .kind{grid-column:1/-1;display:flex;gap:0;box-shadow:inset 0 0 0 1px var(--line);justify-self:start}
.add .kind button{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;padding:7px 12px;color:var(--faint);display:inline-flex;align-items:center;gap:8px}
.add .kind button.on{color:var(--ink);background:rgba(206,222,240,.09)}
.add canvas{display:block}
.add .qrw{padding:10px;background:#e9e7e1;line-height:0}
.add .code{font:700 44px/1 var(--dot);letter-spacing:.14em;color:var(--wait);text-shadow:0 0 18px rgba(240,180,76,.25)}
.add .ttl{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-variant-numeric:tabular-nums}
.add .ttl svg{flex:none}
.add .cmd{margin-top:14px;font-size:12.5px;color:var(--body);padding:8px 10px;background:#000;box-shadow:inset 0 0 0 1px rgba(206,222,240,.12);display:inline-block}
.add .cmd i{font-style:normal;color:var(--faint)}
.add .x{position:absolute;right:14px;top:12px;color:var(--faint);font-size:18px;line-height:1}
.add .x:hover{color:var(--ink)}
.add .to{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:10px;color:var(--faint);font-size:11px;letter-spacing:.12em;text-transform:uppercase;padding-left:22px;border-left:1px dotted rgba(206,222,240,.2)}
.add .to span{display:flex;align-items:center;gap:10px}
.cas{grid-column:1/-1;display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap;margin:2px 0 10px 34px;padding:10px 12px;box-shadow:inset 0 0 0 1px rgba(224,116,95,.35)}
.cas .lbl{font-size:10px;color:var(--flag)}
.cas label{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--body);cursor:pointer}
.cas input{appearance:none;width:13px;height:13px;margin:0;box-shadow:inset 0 0 0 1px rgba(206,222,240,.5);display:inline-grid;place-items:center}
.cas input:checked::after{content:'';width:7px;height:7px;background:var(--ink)}
.cas .btn{margin-left:auto;height:32px;font-size:11.5px}
@media (max-width:720px){
  .add{grid-template-columns:auto minmax(0,1fr);padding:16px 14px;gap:16px}
  .add .to{display:none}
  .add .code{font-size:30px}
  .row .n{white-space:normal}
  .row .n .o{display:block;margin:2px 0 0;white-space:normal}
  .cas{margin-left:0}
  .cas .btn{margin-left:0}
  .row{grid-template-columns:18px minmax(0,1fr) 10px auto auto;gap:0 10px}
  .row .hbs,.row .sp{display:none}
  .row .n small{display:none}
  .row.ask{grid-template-columns:18px minmax(0,1fr) auto auto}
  .row.ask .dot{display:none}
  .row .x .btn{padding:0 9px}
}
.add .cmd{max-width:100%;overflow-wrap:anywhere;font-size:11.5px}
.add #link{display:block;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .n small{white-space:nowrap}
.err{color:var(--flag)}
/* an enrollment code is 9 characters (XXXX-XXXX): one line at any width */
.add .code{white-space:nowrap}
@media (max-width:720px){.add .code{font-size:24px;letter-spacing:.1em}}