/* nexusurls.store - the loss table
   Built to the reference: near black page, full bleed background behind a
   fixed width centred column, an old twelve column grid, one bright accent,
   flat surfaces with rounded corners and no shadows anywhere.
   Differences from the reference are deliberate: mint accent instead of amber,
   a slab face for headings instead of a geometric sans, its own class names,
   and the background is an abstract CSS field rather than artwork, because
   this site has no images and will not invent any. No banner across the top. */

:root{
  --bg:#0d1015;
  --bg2:#141920;
  --bg3:#1b212a;
  --edge:#2a323d;
  --edge2:#39434f;
  --txt:#d6dde5;
  --txt2:#98a3ae;
  --dim:#6d7884;
  --mint:#7ee787;
  --mint-dk:#4fb95e;
  --rose:#e56a6a;
  --gold:#e8c05a;
  --col:960px;
  --head:"Rockwell","Roboto Slab","Bookman Old Style","Bitstream Charter",Georgia,serif;
  --body:"Trebuchet MS","Segoe UI",Roboto,"DejaVu Sans",sans-serif;
  --mono:"Consolas","DejaVu Sans Mono","Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--txt);font:16px/1.72 var(--body);overflow-x:hidden;
  background:var(--bg);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(126,231,135,.09), transparent 62%),
    radial-gradient(760px 460px at 92% 4%, rgba(90,140,220,.08), transparent 60%),
    linear-gradient(180deg, #10151c 0%, var(--bg) 46%, #0a0d11 100%);
  background-attachment:fixed;
}
img{max-width:100%;height:auto}
a{color:var(--mint);text-decoration:none;border-bottom:1px solid rgba(126,231,135,.35)}
a:hover{color:#fff;border-bottom-color:var(--mint)}

/* the reference centres a fixed column over the background */
.col{width:var(--col);max-width:100%;margin:0 auto;padding:0 20px;min-width:0}

/* slim identity rule, deliberately not a banner */
.id{border-bottom:1px solid var(--edge)}
.id .col{padding-top:16px;padding-bottom:14px}
.id b{font:700 20px/1.2 var(--head);color:#fff;letter-spacing:.01em}
.id b em{color:var(--mint);font-style:normal}
.id span{display:block;margin-top:2px;font-size:14px;color:var(--dim)}

/* language switch, small and above the fold */
.langs{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.langs a{font:700 11.5px/1 var(--body);letter-spacing:.08em;text-transform:uppercase;
  border:1px solid var(--edge);border-radius:4px;padding:7px 11px;color:var(--txt2)}
.langs a:hover,.langs a.on{border-color:var(--mint);color:var(--mint)}

/* addresses */
.keys{border:1px solid var(--edge);border-radius:6px;background:var(--bg2);
  padding:20px;margin:22px 0}
.keys h2{margin:0 0 4px;font:700 15px/1.35 var(--head);letter-spacing:.05em;
  text-transform:uppercase;color:var(--mint);border:0;padding:0}
.keys > p{margin:0 0 15px;font-size:14.5px;color:var(--txt2);max-width:none}
.key{display:flex;flex-wrap:wrap;gap:10px;align-items:center;background:var(--bg);
  border:1px solid var(--edge);border-radius:5px;padding:10px 12px;margin-bottom:8px}
.key:last-of-type{margin-bottom:0}
.key code{flex:1 1 250px;min-width:0;font:13px/1.5 var(--mono);color:var(--txt);word-break:break-all}
.key button{flex:none;background:var(--mint);color:#0d1015;border:0;border-radius:5px;
  padding:9px 18px;font:700 12.5px/1.2 var(--body);cursor:pointer}
.key button:hover{background:#fff}
.keys .cav{margin:14px 0 0;font-size:13.5px;color:var(--dim)}

/* section links */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.tabs a{border:1px solid var(--edge);border-radius:5px;padding:9px 16px;
  font:700 13px/1.3 var(--body);color:var(--txt2);background:var(--bg2)}
.tabs a:hover,.tabs a.on{background:var(--mint);border-color:var(--mint);color:#0d1015}

/* type */
h1{font:700 clamp(27px,3.9vw,40px)/1.18 var(--head);color:#fff;margin:26px 0 10px}
.lede{font-size:18px;line-height:1.68;color:var(--txt2);margin:0 0 26px;max-width:72ch}
h2{font:700 clamp(21px,2.6vw,27px)/1.26 var(--head);color:#fff;margin:36px 0 12px;
  padding-bottom:8px;border-bottom:1px solid var(--edge)}
h3{font:700 17px/1.35 var(--head);color:var(--mint);margin:26px 0 7px}
p{margin:0 0 15px;max-width:74ch}
ul,ol{margin:0 0 17px;padding-left:22px;max-width:74ch}
li{margin-bottom:8px}
code{font:.9em var(--mono);background:var(--bg3);border-radius:3px;padding:2px 6px;color:var(--txt)}
strong,b{color:#fff;font-weight:700}

/* the ranked table, spine of the site */
.rank{border:1px solid var(--edge);border-radius:6px;overflow:hidden;margin:0 0 30px}
.rank a{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;
  border-bottom:1px solid var(--edge);background:var(--bg2);border-radius:0}
.rank a:last-child{border-bottom:0}
.rank a:hover{background:var(--bg3)}
.rank .n{flex:none;width:34px;font:700 20px/1.2 var(--head);color:var(--dim);text-align:right}
.rank .mid{flex:1 1 auto;min-width:0}
.rank .mid b{display:block;font:700 16.5px/1.35 var(--head);color:#fff;margin-bottom:2px}
.rank .mid span{display:block;font-size:14px;color:var(--txt2);line-height:1.55}
.rank .cost{flex:none;width:104px;text-align:right;font:700 12px/1.5 var(--body);
  letter-spacing:.05em;text-transform:uppercase}
.rank .cost.hi{color:var(--rose)}
.rank .cost.mid{color:var(--gold)}
.rank .cost.lo{color:var(--mint)}

/* the scoring panel on each entry */
.score{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--edge);border-radius:6px;
  overflow:hidden;margin:0 0 26px;padding:0}
.score div{flex:1 1 170px;padding:14px 16px;background:var(--bg2);
  border-right:1px solid var(--edge);min-width:0}
.score div:last-child{border-right:0}
.score dt{font:700 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);margin-bottom:7px}
.score dd{margin:0;font:700 17px/1.3 var(--head);color:#fff}
.score dd.hi{color:var(--rose)} .score dd.mid{color:var(--gold)} .score dd.lo{color:var(--mint)}

/* callouts */
.note{border:1px solid var(--edge);border-left:3px solid var(--mint);background:var(--bg2);
  border-radius:5px;padding:14px 18px;margin:22px 0;font-size:15.5px;max-width:74ch}
.note.stop{border-left-color:var(--rose)}
.note.care{border-left-color:var(--gold)}
.note b{display:block;margin-bottom:5px;color:#fff;
  font:700 12px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase}

/* tables scroll rather than widening the page */
.tw{overflow-x:auto;margin:0 0 22px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th,td{border:1px solid var(--edge);padding:10px 13px;text-align:left;vertical-align:top}
th{background:var(--bg3);color:#fff;font:700 12.5px/1.4 var(--body);
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
td{background:var(--bg2);color:var(--txt2)}
td b{color:var(--txt)}

/* numbered steps */
.steps{list-style:none;padding:0;counter-reset:s;max-width:74ch}
.steps li{position:relative;padding-left:42px;margin-bottom:14px;counter-increment:s}
.steps li::before{content:counter(s);position:absolute;left:0;top:1px;width:27px;height:27px;
  border-radius:5px;background:var(--mint);color:#0d1015;
  font:700 13px/27px var(--body);text-align:center}

/* prev / next */
.pn{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0;border-top:1px solid var(--edge);padding-top:18px}
.pn a{flex:1 1 240px;border:1px solid var(--edge);border-radius:6px;padding:12px 15px;
  background:var(--bg2);color:var(--txt2)}
.pn a:hover{border-color:var(--mint)}
.pn a em{display:block;font-style:normal;font:700 11px/1 var(--body);letter-spacing:.09em;
  text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.pn a b{color:#fff;font:700 16px/1.3 var(--head)}

.crumb{font-size:13px;color:var(--dim);margin:20px 0 0}
.crumb a{color:var(--txt2);border:0}

/* footer */
.foot{border-top:1px solid var(--edge);margin-top:48px;padding:34px 0 40px;background:var(--bg2)}
.foot h2{border:0;color:#fff;font:700 12px/1 var(--body);letter-spacing:.1em;
  text-transform:uppercase;margin:0 0 13px;opacity:.6}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.foot a{display:block;color:var(--txt2);font-size:14.5px;padding:4px 0;border:0}
.foot a:hover{color:#fff}
.foot .fine{margin:28px 0 0;padding-top:18px;border-top:1px solid var(--edge);
  color:var(--dim);font-size:13.5px;max-width:none}

@media (max-width:700px){
  body{font-size:15.5px}
  .keys{padding:15px}
  .key code{flex-basis:100%;font-size:12.5px}
  .rank a{flex-wrap:wrap}
  .rank .cost{width:auto;text-align:left;flex-basis:100%}
  .score div{flex-basis:100%;border-right:0;border-bottom:1px solid var(--edge)}
  .score div:last-child{border-bottom:0}
}