body{background:#fff}
[hidden]{display:none!important}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}
nav{display:flex;align-items:center;gap:12px;padding:16px 0 20px}
nav .logo{font-size:20px;font-weight:bold;color:var(--m2)}
nav .logo b{color:var(--m4)}
nav .sp{flex:1}
nav a{color:var(--m1);text-decoration:none;border:1px solid var(--line);padding:5px 12px}
nav a:hover{background:#eef0f4}
nav a.cta{background:var(--sel);color:#fff;border-color:var(--sel);font-weight:bold}


.intro{padding:34px 0 26px;text-align:center}
.intro h1{font-size:42px;line-height:1.1;margin:0 0 8px;color:var(--m2);letter-spacing:-1px}
.intro p{color:var(--muted-ink);font-size:15px;margin:0}

/* the list — this IS the homepage, mIRC /list style */
.listwrap{border:1px solid var(--line);background:#fff;margin-bottom:22px}
.listwrap .bar{display:flex;align-items:center;gap:8px;padding:6px 10px;border-bottom:1px solid var(--line);
  color:var(--muted-ink);font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.listwrap .bar b{color:var(--m2)}
.listwrap .bar .sp{flex:1}
/* mIRC green (--m3, #009300) is 4.06:1 on white — under AA for 12px text. The palette slot
   itself is not touched (it is a MESSAGE colour); this one label gets a darker green. */
.listwrap .bar .live{color:#007a00}

.filter{display:flex;flex-wrap:wrap;gap:6px;padding:6px 10px;border-bottom:1px solid var(--line-soft)}
.cc{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;color:var(--m1);padding:2px 7px;font-family:inherit;font-size:13px;cursor:pointer;line-height:1}
.cc:hover{background:#eef0f4}
.cc.active{background:var(--sel);color:#fff;border-color:var(--sel)}
.cc .fl{width:20px;text-align:center}
.cc .ct{color:var(--muted-ink);font-size:12px}
.cc.active .ct{color:#fff}

/* The search is its own control, ABOVE the directory — not a row inside it. Sticky,
   because a thousand networks is 144,000px of page: buried in the list box at the top,
   the field scrolls away after one screen and there is no way back to it. */
.seekwrap{position:sticky;top:0;z-index:30;background:#fff;padding:10px 0 12px}
.seek{position:relative;display:flex;align-items:center;gap:8px;padding:8px 10px;
  border:1px solid var(--line);background:#fff}
.seek:focus-within{border-color:var(--sel);outline:1px solid var(--sel)}
.seek .eye{width:20px;text-align:center;color:var(--muted-ink);flex-shrink:0}
.qin{flex:1;min-width:0;appearance:none;background:#fff;border:0;outline:none;
  font-family:inherit;font-size:15px;color:var(--m1);padding:2px 0}
.qin::placeholder{color:var(--muted-ink)}
.qin::-webkit-search-decoration,.qin::-webkit-search-cancel-button{display:none}
.slash{font-family:inherit;font-size:11px;color:var(--muted-ink);border:1px solid var(--line-soft);
  padding:0 4px;pointer-events:none;flex-shrink:0}
.qx{border:1px solid var(--line);background:#fff;color:var(--m1);font-family:inherit;
  font-size:13px;line-height:1;padding:2px 6px;cursor:pointer;flex-shrink:0}
.qx:hover{background:#eef0f4}

/* suggestions overlay the list, never push it down */
.ac{position:absolute;top:100%;left:0;right:0;z-index:20;background:#fff;
  border:1px solid var(--line);border-top:0;max-height:44vh;overflow-y:auto}
.op{display:flex;align-items:baseline;gap:8px;padding:3px 10px;font-size:13px;cursor:pointer}
.op:hover{background:#eef0f4}
.op .k{width:14px;text-align:center;color:var(--muted-ink);flex-shrink:0}
.op .lb{color:var(--m2);font-weight:bold;white-space:nowrap}
.op .sb{color:var(--muted-ink);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the keyboard cursor: every child has to go readable on navy, .hit included */
.op.on{background:var(--sel)}
.op.on .k,.op.on .lb,.op.on .sb,.op.on .hit{color:#fff}

.cc.more{color:var(--muted-ink)}
.hit{color:var(--m4);font-weight:bold;background:transparent}
.empty .lnk{color:var(--sel);text-decoration:underline}
.capped{padding:8px 10px;text-align:center;color:var(--muted-ink);font-size:12px;
  border-top:1px solid var(--line-soft)}

.net{border-bottom:1px solid var(--line-soft);cursor:pointer}
.net:last-child{border-bottom:0}
.net:hover{background:#eef0f4}
.net:focus-visible{outline:2px solid var(--sel);outline-offset:-2px;background:#eef0f4}
.empty button.lnk{border:0;background:none;font:inherit;cursor:pointer}
#directory-status:not(:empty){padding:10px;color:var(--m4)}
.net-h{display:flex;align-items:center;gap:8px;padding:7px 10px}
.net-h .nm{font-weight:bold;color:var(--m2)}
.net-h .sp{flex:1}
.net-h .meta{color:var(--muted-ink);font-size:13px;white-space:nowrap}
.net-h .enter{color:var(--muted-ink);border:1px solid var(--line);padding:0 7px;font-size:13px}
.net:hover .enter{color:var(--sel);border-color:var(--sel)}
.net-h .flag{width:20px;text-align:center;flex-shrink:0;font-size:15px;line-height:1}
.dot{width:8px;height:8px;border-radius:50%;background:var(--m14);flex-shrink:0}
.dot.on{background:var(--m3)}

.chans{padding:0 10px 7px 26px}
.chan{display:flex;align-items:baseline;gap:8px;padding:1px 0;font-size:13px}
.chan .h{color:var(--muted-ink);font-weight:bold}
.chan .cn{color:var(--m1)}
.chan .tp{color:var(--muted-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.chan .co{color:var(--m3);white-space:nowrap}
.chan .co.z{color:var(--muted-ink)}
/* a channel that matched the query — accent sits in the .chans left padding, so the text
   never shifts relative to its non-matching siblings */
.chan.on-hit{box-shadow:-6px 0 0 -4px var(--m4)}
.more{color:var(--muted-ink);font-size:12px;padding:1px 0}

.empty,.loading{padding:26px 12px;text-align:center;color:var(--muted-ink);font-size:14px}
.empty a{color:var(--sel)}

footer{color:var(--muted-ink);font-size:13px;text-align:center;padding:20px 0;border-top:1px solid var(--line-soft)}
footer a{color:var(--muted-ink)}

@media (max-width:560px){
  .wrap{padding:0 12px} .intro{padding:24px 0 20px} .intro h1{font-size:28px;letter-spacing:-.5px}
  .net-h .meta{font-size:12px}
  .slash{display:none} .ac{max-height:50vh} .qin{font-size:13px}
}