/* Wealthy Dropouts / Big Rock Energy - shared tool styling.
   Palette + type lifted from the landing page so the tools match. */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;600;700&family=Chakra+Petch:wght@600;700&family=Share+Tech+Mono&display=swap');

:root{
  --black:#070809; --steel:#14171a; --steel-2:#1d2226; --steel-3:#272d31;
  --silver:#d9ddd7; --silver-dim:#9aa39c; --muted:#6f776f;
  --ore:#46ff5e; --ore-deep:#13c24a; --laser:#b6ffc0;
  --line:rgba(150,168,158,.16); --line-soft:rgba(150,168,158,.08);
  --display:"Chakra Petch",system-ui,sans-serif;
  --mono:"Share Tech Mono",ui-monospace,monospace;
  --body:"Barlow",system-ui,sans-serif;
  --amber:#e9c46a; --red:#f0817a; --orange:#ff9d5c;
  --maxw:1180px;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--black); color:var(--silver);
      font-family:var(--body); font-size:15px; line-height:1.55; }
a{ color:var(--ore); }
::selection{ background:var(--ore); color:#04140a; }
code{ font-family:var(--mono); background:var(--black); border:1px solid var(--line);
      padding:2px 6px; color:var(--silver-dim); }

/* ---- page chrome ---- */
header{ padding:22px 28px 16px; border-bottom:1px solid var(--line);
        background:linear-gradient(var(--steel),var(--black));
        max-width:var(--maxw); margin:0 auto; }
h1{ margin:0; font-family:var(--display); font-weight:700; text-transform:uppercase;
    letter-spacing:.06em; font-size:20px; color:var(--silver); }
.sub{ margin-top:8px; font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); }
.wrap{ padding:20px 28px 48px; max-width:var(--maxw); margin:0 auto; }
footer{ color:var(--muted); font-family:var(--mono); font-size:11.5px; letter-spacing:.03em;
        padding:0 28px 36px; max-width:var(--maxw); margin:0 auto; }
footer b{ color:var(--silver-dim); }

/* ---- controls bar (prospects) ---- */
.bar{ display:flex; gap:18px; align-items:center; margin:0 0 14px;
      font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); }
.link{ background:none; border:0; color:var(--ore); cursor:pointer; padding:0;
       font-family:var(--mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; }
.link:hover{ color:var(--laser); }
.status{ margin-left:auto; color:var(--ore); font-family:var(--mono); font-size:12px; }

/* ---- table ---- */
table{ border-collapse:collapse; width:100%; background:var(--steel); border:1px solid var(--line-soft); }
th{ text-align:center; background:var(--black); color:var(--ore); position:sticky; top:0;
    font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
    padding:11px 12px; border-bottom:1px solid var(--line); }
td{ padding:10px 12px; border-top:1px solid var(--line-soft); font-size:14px; text-align:center; }
tr:hover td{ background:var(--steel-2); }
.rank{ color:var(--muted); width:36px; font-family:var(--mono); }
.who a,.sys a{ color:var(--silver); text-decoration:none; font-weight:600; }
.who a:hover,.sys a:hover{ color:var(--ore); }
.region a{ color:var(--silver-dim); text-decoration:none; }
.region a:hover{ color:var(--ore); }
.region,.cat,.kind{ color:var(--silver-dim); font-family:var(--mono); font-size:12px; }
.num{ text-align:center; font-family:var(--mono); font-variant-numeric:tabular-nums; }
.strong{ font-weight:700; color:var(--silver); }
.good{ color:var(--ore); } .warn{ color:var(--amber); } .bad{ color:var(--red); }
.hot{ color:var(--orange); font-weight:700; }
.badge{ background:var(--ore); color:#04140a; font-family:var(--mono); font-size:9.5px; font-weight:700;
        padding:2px 6px; margin-left:7px; letter-spacing:.05em; vertical-align:middle;
        clip-path:polygon(0 0,100% 0,88% 100%,0 100%); }

/* ---- invite buttons + log ---- */
button.inv{ background:transparent; color:var(--ore); border:1px solid rgba(70,255,94,.4);
            padding:4px 13px; cursor:pointer; font-family:var(--mono); font-size:11.5px;
            text-transform:uppercase; letter-spacing:.06em; transition:background .15s,color .15s; }
button.inv:hover{ background:var(--ore); color:#04140a; }
.acts{ display:flex; gap:6px; justify-content:center; align-items:center; }
button.cmail, button.cmsg{ background:transparent; color:var(--silver-dim); border:1px solid var(--line);
  padding:4px 9px; cursor:pointer; font-family:var(--mono); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.05em; transition:border-color .15s, color .15s; }
button.cmail:hover, button.cmsg:hover{ border-color:var(--ore); color:var(--ore); }
#invited{ display:none; margin-top:24px; border-top:1px solid var(--line); padding-top:16px; }
#invited h3{ font-family:var(--display); text-transform:uppercase; letter-spacing:.04em;
             font-size:14px; color:var(--silver-dim); margin:0 0 10px; }
.restore{ color:var(--muted); font-family:var(--mono); font-size:11px; }

.empty{ padding:44px; text-align:center; color:var(--muted);
        background:var(--steel); border:1px solid var(--line-soft); }

/* ---- hub cards ---- */
.hub{ max-width:720px; margin:0 auto; padding:56px 24px 64px; }
a.card{ display:block; text-decoration:none; color:inherit; background:var(--steel);
        border:1px solid var(--line-soft); padding:22px 24px 22px 26px; margin-bottom:16px;
        position:relative; transition:transform .2s, border-color .2s; }
a.card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:46px; background:var(--ore); }
a.card:hover{ transform:translateY(-2px); border-color:var(--ore); }
.row{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.name{ font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.03em;
       font-size:16px; color:var(--silver); }
.lock{ font-family:var(--mono); font-size:11px; color:var(--muted); border:1px solid var(--line);
       padding:2px 9px; white-space:nowrap; }
.desc{ color:#a9b2a8; font-size:14px; margin-top:7px; }
a.card.secret::before{ background:var(--red); }
a.card.secret .name{ color:var(--red); letter-spacing:.14em; }
a.card.secret:hover{ border-color:var(--red); }
a.card.secret .lock{ color:var(--red); border-color:rgba(240,129,122,.4); }
a.card.soon{ opacity:.6; cursor:default; }
a.card.soon::before{ background:var(--muted); }
a.card.soon:hover{ transform:none; border-color:var(--line-soft); }
a.card.soon .name{ color:var(--silver-dim); }
.soonbadge{ font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
            color:#04140a; background:var(--amber); padding:2px 8px; white-space:nowrap; }
.workbench{ font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
            color:var(--muted); margin:30px 0 12px; border-top:1px solid var(--line); padding-top:18px; }

/* ---- lock gate ---- */
.gate{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.gate .card{ width:340px; background:var(--steel); border:1px solid var(--line);
             padding:32px 30px; text-align:center; position:relative; }
.gate .card::before{ content:""; position:absolute; left:0; top:0; height:3px; width:46px; background:var(--ore); }
.gate h1{ font-size:16px; }
.gate p{ font-family:var(--mono); font-size:12px; color:var(--muted); margin:8px 0 18px; }
input{ width:100%; padding:11px 13px; background:var(--black); border:1px solid var(--line);
       color:var(--silver); font-family:var(--mono); font-size:14px; }
input:focus{ outline:none; border-color:var(--ore); }
.gate button{ width:100%; margin-top:12px; padding:12px; background:var(--ore); border:0; color:#04140a;
              font-family:var(--display); font-weight:700; text-transform:uppercase; letter-spacing:.06em;
              cursor:pointer; clip-path:polygon(0 0,100% 0,97% 100%,0 100%); transition:background .15s; }
.gate button:hover{ background:var(--laser); }
.err{ color:var(--red); font-family:var(--mono); font-size:12px; min-height:16px; margin-top:12px; }

/* ---- shared top nav (injected by nav.js) ---- */
.topnav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:18px;
         height:54px; padding:0 28px; background:rgba(7,8,9,.88); backdrop-filter:blur(8px);
         border-bottom:1px solid var(--line); }
.topnav .brand{ display:flex; align-items:center; gap:9px; text-decoration:none;
                font-family:var(--display); font-weight:700; letter-spacing:.06em; font-size:13px; color:var(--silver); }
.topnav .tick{ font-family:var(--mono); color:#04140a; background:var(--ore); font-size:11px; font-weight:700;
               padding:3px 7px; letter-spacing:1px; clip-path:polygon(0 0,100% 0,92% 100%,0 100%); }
.topnav nav{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.topnav nav a{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
               color:var(--silver-dim); text-decoration:none; padding:7px 15px; border:1px solid var(--line);
               clip-path:polygon(0 0,100% 0,90% 100%,0 100%); transition:border-color .15s, color .15s, background .15s; }
.topnav nav a:hover{ border-color:var(--ore); color:var(--ore); }
.topnav nav a.cur{ background:var(--ore); color:#04140a; border-color:var(--ore); font-weight:700; }
@media(max-width:620px){ .topnav{ gap:10px; padding:0 14px; } .topnav .brandtext{ display:none; } .topnav nav{ gap:13px; } }

/* ---- ore calculator ---- */
.calcgrid{ display:grid; grid-template-columns:1fr 300px; gap:18px; align-items:start; margin-bottom:18px; }
textarea{ width:100%; min-height:260px; background:var(--black); border:1px solid var(--line); color:var(--silver);
          font-family:var(--mono); font-size:13px; line-height:1.5; padding:12px; resize:vertical; }
textarea:focus{ outline:none; border-color:var(--ore); }
.controls{ display:flex; flex-direction:column; gap:10px; }
.controls label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.controls input{ width:100%; padding:9px 11px; background:var(--black); border:1px solid var(--line); color:var(--silver); font-family:var(--mono); }
.effnote{ color:var(--muted); font-family:var(--mono); font-size:11px; line-height:1.5; }
.gobtn{ padding:12px; background:var(--ore); border:0; color:#04140a; font-family:var(--display); font-weight:700;
        text-transform:uppercase; letter-spacing:.06em; cursor:pointer; clip-path:polygon(0 0,100% 0,97% 100%,0 100%); }
.gobtn:hover{ background:var(--laser); }
.effpresets{ display:flex; flex-wrap:wrap; gap:6px; }
.effp{ background:transparent; color:var(--silver-dim); border:1px solid var(--line); padding:5px 9px;
       cursor:pointer; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; }
.effp:hover{ border-color:var(--ore); color:var(--ore); }
.matline{ color:var(--muted); font-family:var(--mono); font-size:11px; margin-top:3px; text-align:left; }
.totline{ display:flex; gap:28px; margin:14px 0; font-family:var(--mono); }
.totline .k{ color:var(--muted); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.totline .v{ color:var(--ore); font-size:20px; font-weight:700; }
.unmatched{ color:var(--amber); font-family:var(--mono); font-size:12px; margin-top:10px; }
@media(max-width:680px){ .calcgrid{ grid-template-columns:1fr; } }

/* ---- recruiting copy templates ---- */
.templates{ margin:0 0 24px; }
.thead{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
        color:var(--ore); margin:0 0 10px; }
.tnote{ color:var(--muted); text-transform:none; letter-spacing:0; }
.tpl{ background:var(--steel); border:1px solid var(--line-soft); margin-bottom:10px; position:relative; }
.tpl::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--ore); opacity:.5; }
.trow{ display:flex; align-items:center; justify-content:space-between; gap:10px;
       padding:8px 12px 8px 14px; border-bottom:1px solid var(--line-soft); }
.tlabel{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--silver-dim); }
.tbox{ margin:0; padding:13px 15px; white-space:pre-wrap; word-wrap:break-word;
       font-family:var(--body); font-size:13.5px; color:var(--silver); line-height:1.55; }

/* ---- kill log ---- */
.res{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.06em;
      padding:2px 8px; border:1px solid currentColor; }
.res.good{ color:var(--ore); } .res.bad{ color:var(--red); }
.kbadge{ font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em;
         color:var(--muted); border:1px solid var(--line); padding:1px 5px; margin-left:5px; }
.kbadge.npc{ color:var(--amber); }
.when{ color:var(--silver-dim); white-space:nowrap; }
.vcorp{ color:var(--muted); font-family:var(--mono); font-size:11px; }

/* ---- hover tooltips (data-tip on any element; used on table headers) ---- */
[data-tip]{ position:relative; }
th[data-tip]{ cursor:help; text-decoration:underline dotted rgba(70,255,94,.45); text-underline-offset:4px; }
[data-tip]:hover::after{
  content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 8px); transform:translateX(-50%);
  z-index:200; width:max-content; max-width:260px; white-space:normal; text-align:left;
  background:var(--black); color:var(--silver); border:1px solid var(--ore);
  font-family:var(--body); font-size:12px; font-weight:400; line-height:1.45; letter-spacing:0; text-transform:none;
  padding:8px 11px; box-shadow:0 6px 18px rgba(0,0,0,.55); pointer-events:none; }
[data-tip]:hover::before{
  content:""; position:absolute; left:50%; top:calc(100% + 3px); transform:translateX(-50%);
  border:5px solid transparent; border-bottom-color:var(--ore); z-index:200; pointer-events:none; }

/* ---- compressed toggle (reprocess reference) ---- */
.toggle{ display:flex; align-items:center; gap:10px; margin:2px 0 16px; font-family:var(--mono);
         font-size:12px; letter-spacing:.04em; color:var(--muted); }
.toggle button{ background:transparent; color:var(--silver-dim); border:1px solid var(--line);
  padding:6px 14px; cursor:pointer; font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; transition:border-color .15s,color .15s,background .15s; }
.toggle button:hover{ border-color:var(--ore); color:var(--ore); }
.toggle button.on{ background:var(--ore); color:#04140a; border-color:var(--ore); font-weight:700; }
/* compressed/uncompressed cells: default page state is compressed (body.compressed) */
.vcmp{ display:none; }
body.compressed .vunc{ display:none; }
body.compressed .vcmp{ display:inline; }

@media(max-width:760px){
  header,.wrap,footer{ padding-left:16px; padding-right:16px; }
  td,th{ padding:8px 9px; font-size:13px; }
}