/* bot.net.ua, the switchboard: a painted metal panel where bots are jacks and
   links are patch cords, a rack with a strip per bot, and the chosen bot's
   passport. One light look on purpose, the colours of the panel. */

@font-face{font-family:"Martian Mono";src:url(/static/fonts/martian-mono-cyrillic.cd2f637019.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Martian Mono";src:url(/static/fonts/martian-mono-latin.debf915472.woff2) format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Golos Text";src:url(/static/fonts/golos-text-cyrillic.2f175b8fc4.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Golos Text";src:url(/static/fonts/golos-text-latin.f8d7109111.woff2) format("woff2");font-weight:400 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --panel:#dfe4dc;--plate:#eef1ea;--plate-hi:#f6f8f3;--ink:#1b201d;--mute:#5d665f;--rule:#b9c1b6;
  --red:#d23a2b;--yellow:#e2ab12;--blue:#1f5fbf;--green:#2d8a4b;--led:#36d26a;--led-off:#7a837c;--hole:#2a302c;
  --display:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  --body:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--panel)}
body{margin:0;background:var(--panel);color:var(--ink);font:16px/1.5 var(--body)}
a{color:var(--blue)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left));padding-right:max(16px,env(safe-area-inset-right))}
@media (min-width:760px){.wrap{padding-left:max(40px,env(safe-area-inset-left));padding-right:max(40px,env(safe-area-inset-right))}}
.scroll{overflow-x:auto}
.muted{color:var(--mute);margin:0}

/* a plate screwed to the panel */
.plate{background:var(--plate);border:2px solid var(--ink);border-radius:6px;position:relative}
.screws::before,.screws::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#c9cfc6,#6b736d);top:9px}
.screws::before{left:9px}
.screws::after{right:9px}

/* header and footer */
.top{display:flex;align-items:baseline;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding-block:22px 0}
.mark{font:700 15px var(--display);letter-spacing:.02em;color:var(--ink);text-decoration:none}
.mark span{color:var(--red)}
.meta{font:13px var(--display);color:var(--mute)}
.meta.stale{color:var(--red)}
.notice{margin:18px 0 0;padding:12px 16px;font-weight:600;border-color:var(--red)}
.foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-block:30px 26px;font:13px var(--display);color:var(--mute)}
.foot a{color:inherit}
.foot .egg{text-decoration:none}

/* hero and the board */
.hero{padding-block:clamp(24px,4vw,44px) 12px;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,48px);align-items:center}
h1{font:800 clamp(34px,5.4vw,64px)/1 var(--display);font-stretch:112.5%;letter-spacing:-.04em;margin:0 0 16px;text-wrap:balance}
.hero p{margin:0;color:var(--mute);max-width:46ch;font-size:clamp(16px,1.6vw,19px)}
.board{padding:10px}
.board svg{display:block;width:100%;height:auto;max-height:70vh}
.cord-under{fill:none;stroke:var(--ink);stroke-width:9;stroke-linecap:round;opacity:.9}
.cord{fill:none;stroke-width:6;stroke-linecap:round}
.cord.down{stroke-dasharray:2 9}
.jack .ring{fill:var(--plate);stroke:var(--ink);stroke-width:2.5}
.jack .hole{fill:var(--hole)}
.jack .led{fill:var(--led);stroke:var(--ink);stroke-width:1.5}
.jack .led.off{fill:var(--led-off)}
.jack .lbl{font:600 13px var(--display);fill:var(--ink)}
.jack .jsub{font:11px var(--display);fill:var(--mute)}
.jack:hover .ring{fill:#fff}
.jack.sel .ring{stroke:var(--red);stroke-width:4}
.jack:focus{outline:none}
.jack:focus-visible .ring{stroke:var(--blue);stroke-width:4}
@media (max-width:820px){.hero{grid-template-columns:minmax(0,1fr)}}

/* the rack */
.strip-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:clamp(28px,4vw,48px) 0 12px;flex-wrap:wrap}
h2{font:700 20px var(--display);margin:0;letter-spacing:-.02em}
.strip-head span{font:13px var(--display);color:var(--mute)}
.rack{display:grid;gap:8px}
.unit{display:grid;grid-template-columns:28px minmax(110px,1.1fr) minmax(90px,.8fr) minmax(110px,.9fr) minmax(200px,1.5fr) 34px;gap:14px;align-items:center;padding:12px 18px 12px 14px;background:var(--plate);border:2px solid var(--ink);border-radius:4px;color:inherit;text-decoration:none}
.unit:hover{background:var(--plate-hi)}
.unit[aria-current]{box-shadow:inset 6px 0 0 var(--red)}
.unit .led{width:12px;height:12px;border-radius:50%;background:var(--led);box-shadow:0 0 0 2px var(--ink),0 0 10px var(--led);justify-self:center}
.unit .led.off{background:var(--led-off);box-shadow:0 0 0 2px var(--ink)}
.unit .name{font:700 17px var(--display);letter-spacing:-.02em;overflow-wrap:anywhere}
.cell{font:13px var(--display);color:var(--mute);min-width:0}
.cell b{display:block;color:var(--ink);font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtext{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:3px}
.meter{height:10px;background:#cfd6cc;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden;display:flex}
.meter i{display:block;height:100%}
.meter .in{background:var(--blue)}
.meter .out{background:var(--yellow)}
.port{font:12px var(--display);color:var(--mute);text-align:right}
@media (max-width:820px){.unit{grid-template-columns:24px minmax(0,1fr) auto;row-gap:8px}.unit .cell{grid-column:2/4}.port{display:none}}

/* the passport */
.sheet{margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);scroll-margin-top:16px}
.sheet>div{padding:22px 24px}
.sheet>div+div{border-left:2px solid var(--ink)}
@media (max-width:820px){.sheet{grid-template-columns:minmax(0,1fr)}.sheet>div+div{border-left:0;border-top:2px solid var(--ink)}}
h3{font:700 26px var(--display);letter-spacing:-.03em;margin:0 0 14px;overflow-wrap:anywhere}
.kicker{font:12px var(--display);text-transform:uppercase;letter-spacing:.12em;color:var(--red);margin:0 0 6px}
.spec{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 18px;font-size:15px}
.spec dt{font:12px var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);padding-top:3px}
.spec dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.sub{font:12px var(--display);text-transform:uppercase;letter-spacing:.1em;color:var(--mute);margin:18px 0 8px}
.sub:first-child{margin-top:0}
.tags{display:flex;gap:6px;flex-wrap:wrap}
.tag{font:600 13px var(--display);border:1.5px solid var(--ink);border-radius:3px;padding:3px 7px;background:var(--panel)}
.tag.mod{font-weight:400;color:var(--mute);border-color:var(--rule)}
.tt{width:100%;border-collapse:collapse;font:13px var(--display);font-variant-numeric:tabular-nums}
.tt td,.tt th{padding:6px 0 6px 12px;border-bottom:1px solid var(--rule);text-align:right;white-space:nowrap}
.tt td:first-child,.tt th:first-child{text-align:left;padding-left:0}
.tt th{font-weight:400;color:var(--mute)}

/* the partyline */
.line{margin-top:22px;padding:18px 22px;display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap}
.line .lamp{width:14px;height:14px;border-radius:50%;background:var(--led-off);box-shadow:0 0 0 2px var(--ink)}
.line .lamp.on{background:var(--led);box-shadow:0 0 0 2px var(--ink),0 0 10px var(--led)}
.line b{font:700 16px var(--display)}
.line .who{display:flex;gap:6px;flex-wrap:wrap}

/* badges: a record held by one bot, a streak, something rare in the botnet */
.badges{display:flex;gap:4px;flex-wrap:wrap;margin:-6px 0 16px}
.badge{font:600 12px/1.4 var(--display);border:1.5px solid currentColor;border-radius:3px;padding:2px 7px;white-space:nowrap;background:var(--plate-hi)}
.badge.record{color:var(--red)}
.badge.mile{color:var(--green)}
.badge.rare{color:var(--blue)}

/* the passport's tape: a cell a day, oldest first */
.tape{display:grid;grid-template-columns:repeat(90,minmax(0,1fr));gap:1px;height:22px}
.tape i{display:block;background:var(--green);border-radius:1px}
.tape .dip,.legend .dip{background:var(--yellow)}
.tape .down,.legend .down{background:var(--red)}
.tape .unknown,.legend .unknown{background:var(--rule)}
.tape .none{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.tape-ends{display:flex;justify-content:space-between;margin:4px 0 0;font:11px var(--display);color:var(--mute)}
.legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;font:11px var(--display);color:var(--mute)}
.legend i{display:inline-block;width:10px;height:10px;margin-right:6px;vertical-align:-1px;background:var(--green);border-radius:1px}
.log{margin:0;padding:0;list-style:none;font:13px var(--display);font-variant-numeric:tabular-nums}
.log li{padding:4px 0;border-bottom:1px solid var(--rule)}
.log+.muted,.legend+.muted{margin-top:12px;font-size:14px}
@media (max-width:820px){.tape{height:18px}}