/* PubVerse design system. Clean, white, thin geometric sans, cornflower-blue node accents.
   Inspired by the PubVerse wordmark (thin sans + blue node-graph glyph) and the 42 compass.
   Do NOT put any scoring-method detail in class names, comments, or content. */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&display=swap');

:root{
  --ink:#1b1f24; --muted:#6b7684; --bg:#ffffff; --paper:#f6f9fd; --panel:#ffffff;
  --line:#e4e9f0; --blue:#4a90d9; --blue-d:#2f6db0; --blue-l:#eaf2fb;
  --good:#2e9e6b; --warn:#d98a2b; --bad:#d1495b; --shadow:0 1px 3px rgba(27,31,36,.06),0 8px 28px rgba(47,109,176,.06);
  --shadow-lg:0 4px 6px rgba(27,31,36,.04),0 20px 40px rgba(47,109,176,.08);
  --r:14px; --r-s:9px; --maxw:1080px;
  --font:'Jost',-apple-system,'Segoe UI',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);font-weight:400;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--blue-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-weight:500;letter-spacing:.2px;line-height:1.2;margin:0 0 .5em}
h1{font-size:2rem;font-weight:300} h2{font-size:1.4rem} h3{font-size:1.08rem}
.muted{color:var(--muted)} .center{text-align:center}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* top bar */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-size:1.28rem;font-weight:400;letter-spacing:.5px;color:var(--ink)}
.brand img{height:26px}
.nav a.link{color:var(--muted);font-size:.95rem;letter-spacing:.3px;transition:color .15s}
.nav a.link:hover,.nav a.link.active{color:var(--ink);text-decoration:none}
.nav .spacer{flex:1}
.affil{font-size:.78rem;color:var(--muted);display:flex;align-items:center;gap:7px}
.affil img{height:20px;opacity:.85}

/* buttons + inputs */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--blue);background:var(--blue);color:#fff;
  font-family:var(--font);font-size:.98rem;font-weight:500;letter-spacing:.4px;padding:11px 22px;border-radius:var(--r-s);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s,transform .05s}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);text-decoration:none;box-shadow:0 2px 8px rgba(47,109,176,.25)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:#fff;color:var(--blue-d)} .btn.ghost:hover{background:var(--blue-l);box-shadow:none}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn.sm{padding:7px 14px;font-size:.86rem}
input,textarea,select{font-family:var(--font);font-size:1rem;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;width:100%;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-l)}
textarea{resize:vertical;min-height:180px;line-height:1.6}
label{display:block;font-size:.85rem;color:var(--muted);margin:0 0 6px;letter-spacing:.3px}

/* cards / panels */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:26px;transition:box-shadow .2s}
.card.hoverable:hover{box-shadow:var(--shadow-lg);border-color:var(--blue-l)}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.grid{display:grid;gap:18px}
.hero{padding:54px 0 30px;text-align:center}
.hero p.lede{font-size:1.12rem;color:var(--muted);max-width:680px;margin:0 auto}

/* feature cards (how it works section) */
.features{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin:30px 0}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;text-align:center;transition:box-shadow .2s,border-color .2s}
.feature:hover{box-shadow:var(--shadow-lg);border-color:var(--blue-l)}
.feature .ico{width:48px;height:48px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  background:var(--blue-l);border-radius:50%;font-size:1.3rem;color:var(--blue-d)}
.feature h3{margin:0 0 6px}
.feature p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.5}

/* stats bar */
.stats-bar{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;padding:24px 0;margin:20px 0}
.stat{text-align:center}
.stat .num{font-size:1.8rem;font-weight:300;color:var(--blue-d);letter-spacing:.5px}
.stat .lbl{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-top:2px}

/* score readout */
.scorebar{display:flex;gap:14px;flex-wrap:wrap;margin:8px 0}
.metric{flex:1;min-width:150px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-s);padding:16px 18px;text-align:center;transition:box-shadow .2s}
.metric:hover{box-shadow:var(--shadow)}
.metric .v{font-size:2rem;font-weight:300;color:var(--blue-d)} .metric .k{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:1px}
.verdict{border-left:3px solid var(--blue);background:var(--blue-l);padding:14px 18px;border-radius:0 var(--r-s) var(--r-s) 0;margin:10px 0}
.tag{display:inline-block;font-size:.74rem;letter-spacing:.6px;text-transform:uppercase;padding:3px 10px;border-radius:20px;background:var(--blue-l);color:var(--blue-d)}
.tag.good{background:#e6f6ee;color:var(--good)} .tag.warn{background:#fdf1e3;color:var(--warn)} .tag.bad{background:#fbe9ec;color:var(--bad)}

/* inline error printed below the abstract box */
.err{background:#fbe9ec;border:1px solid #f3c6ce;color:#8f2c3b;border-radius:var(--r-s);padding:12px 16px;margin:10px 0;font-size:.92rem;display:none}
.err.show{display:block}
.counter{font-size:.8rem;color:var(--muted);text-align:right;margin-top:4px} .counter.over{color:var(--bad)}

/* tabs */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs button{background:none;border:none;border-bottom:2px solid transparent;color:var(--muted);font-family:var(--font);font-size:.98rem;padding:12px 18px;cursor:pointer;transition:color .15s,border-color .15s}
.tabs button:hover{color:var(--ink)}
.tabs button.active{color:var(--ink);border-bottom-color:var(--blue)}

/* the 42 compass spinner */
.compass-load{display:none;flex-direction:column;align-items:center;gap:14px;padding:34px}
.compass-load.show{display:flex}
.compass-load img{width:74px;height:74px;animation:spin 2.4s cubic-bezier(.5,.15,.5,.85) infinite}
.compass-load .cap{font-size:.9rem;color:var(--muted);letter-spacing:.4px}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.compass-load img{animation-duration:6s}}

/* login veil */
.veil{position:fixed;inset:0;z-index:100;background:var(--bg);display:flex;align-items:center;justify-content:center}
.veil .card{max-width:380px;width:92%;text-align:center}
.veil img.mark{height:34px;margin-bottom:8px}

/* table (haystack / needle lists) */
table{border-collapse:collapse;width:100%;font-size:.92rem}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
th{font-weight:500;color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.6px}
tr:hover td{background:var(--paper)}
.needle-row td:first-child{border-left:3px solid var(--blue)}

/* footer */
footer{border-top:1px solid var(--line);margin-top:60px;padding:30px 0;color:var(--muted);font-size:.85rem;background:var(--paper)}
footer .wrap{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
footer .foot-links{display:flex;gap:18px;flex-wrap:wrap}
footer .foot-links a{color:var(--muted)}
footer .foot-links a:hover{color:var(--blue-d)}
.nowrap{white-space:nowrap}

/* advisory (non-blocking) review warning under the score */
.warn-note{background:#fdf1e3;border:1px solid #f3d9b0;color:#8a5a1f;border-radius:var(--r-s);padding:11px 15px;margin-top:12px;font-size:.9rem}
.warn-note[hidden]{display:none}

/* fade-in animation for results */
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.fade-in{animation:fadeIn .35s ease-out}

/* ---- mobile ---- */
@media(max-width:720px){
  .wrap{padding:0 16px}
  .nav .wrap{gap:12px;height:auto;min-height:56px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .nav a.link{font-size:.9rem}
  .affil{display:none}
  /* keep the footer affiliate line visible on phones; only the nav/veil badge is decluttered */
  footer .affil{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
  .hero{padding:30px 0 18px} h1{font-size:1.6rem} h2{font-size:1.2rem}
  .card{padding:18px} .panel{padding:16px}
  .scorebar{gap:10px} .metric{min-width:calc(50% - 6px)} .metric .v{font-size:1.7rem}
  .tabs{overflow-x:auto;-webkit-overflow-scrolling:touch} .tabs button{padding:12px 12px;white-space:nowrap}
  .btn{padding:11px 18px}
  table{font-size:.84rem} th,td{padding:8px 8px}
  .veil .card{width:94%}
  .features{grid-template-columns:1fr}
  .stats-bar{gap:24px}
}
@media(max-width:460px){ .metric{min-width:100%} .brand{font-size:1.12rem} }