/* RPV brand tokens — cool palette, same as the sibling desks. */
@font-face { font-family: 'Geist'; src: url('/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
:root {
  --midnight:#0D1B2A; --slate:#1C3A52; --steel:#2E5F80; --horizon:#4A90B8;
  --terracotta:#C4622D; --action-hover:#A8521F; --sand:#BFD6E8;
  --cream:#F3F6F9; --mist:#EEF2F5; --stone:#5C7284; --stone-2:#8FA3B1; --charcoal:#2C3E4A; --white:#fff;
  --border:#E1E8EE; --line-2:#D0DBE3; --info-bg:#D4E5F5;
  --ok:#2D7A4F; --warn:#B87333; --danger:#B83232;
  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --sh-md:0 2px 8px rgba(13,27,42,.06);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:16px}
body{
  margin:0; background-color:var(--cream); color:var(--charcoal);
  background-image:linear-gradient(rgba(44,62,74,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(44,62,74,.045) 1px, transparent 1px);
  background-size:28px 28px;
  font:400 15px/1.6 'Geist',system-ui,-apple-system,sans-serif; -webkit-font-smoothing:antialiased;
}
a{color:var(--steel)}
h1,h2,h3{margin:0; font-weight:600; letter-spacing:.01em; color:var(--midnight)}
.muted{color:var(--stone)} .small{font-size:13px}

header{
  background:var(--midnight); color:var(--white); border-bottom:2px solid var(--horizon);
  background-image:repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 10px);
  padding:0 32px; min-height:56px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.brand{display:flex; align-items:baseline; gap:10px; color:var(--white); text-decoration:none}
.brand .mark{font-weight:600; letter-spacing:.02em}
.brand .mark i, .mark i{color:var(--horizon); font-style:normal}
.brand .name{font-weight:500}
.brand .tag{font-size:11px; color:var(--stone-2); letter-spacing:.1em; text-transform:uppercase}
.head-right{display:flex; gap:16px; font-size:13px; color:var(--stone-2); align-items:center}
.head-right a{color:var(--sand); text-decoration:none}
.head-right a:hover{color:var(--white)}
#banner{background:var(--info-bg); color:var(--slate); padding:10px 32px; font-size:14px}

main{max-width:1120px; margin:0 auto; padding:32px}
.hero{margin-bottom:28px}
.hero h1{font-size:26px; font-weight:500}
.hero p{color:var(--stone); margin:6px 0 16px}
#q{width:100%; max-width:560px; padding:11px 14px; font:inherit; border:1px solid var(--line-2); border-radius:var(--r-md); background:var(--white)}
#q:focus{outline:2px solid var(--horizon); outline-offset:1px}

h2.cat{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin:28px 0 10px; font-weight:600}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:12px}
.card{display:flex; flex-direction:column; gap:6px; background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:16px; text-decoration:none; color:inherit; box-shadow:var(--sh-md); transition:border-color .15s, transform .15s}
.card:hover{border-color:var(--horizon); transform:translateY(-1px)}
.card-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.card-top b{color:var(--midnight); font-weight:600}
.card p{margin:0; font-size:14px; color:var(--charcoal); flex:1}
.card .meta{font-size:12px; color:var(--stone)}
.aud{font-size:11px; padding:1px 7px; border-radius:var(--r-sm); white-space:nowrap; background:var(--mist); color:var(--stone)}
.aud-md{background:#F6E4D9; color:var(--action-hover)}
.aud-restricted{background:var(--info-bg); color:var(--slate)}

.hits{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.hits a{display:grid; grid-template-columns:70px 180px 1fr; gap:12px; background:var(--white); border:1px solid var(--border);
  border-radius:var(--r-md); padding:10px 14px; text-decoration:none; color:inherit; align-items:baseline}
.hits a:hover{border-color:var(--horizon)}
.hits .kind{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--stone)}
.hits b{color:var(--midnight); font-weight:600}
.empty{background:var(--white); border:1px dashed var(--line-2); border-radius:var(--r-lg); padding:24px; color:var(--stone)}

.back{display:inline-block; margin-bottom:16px; text-decoration:none; font-size:14px}
.app-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px; margin-bottom:24px; flex-wrap:wrap}
.app-head h1{font-size:30px; font-weight:500; margin:4px 0}
.lead{margin:0; color:var(--stone); max-width:640px}
.cat-chip{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone)}
.btn{display:inline-block; background:var(--terracotta); color:var(--white); text-decoration:none; padding:10px 18px; border-radius:var(--r-md); font-weight:500; white-space:nowrap}
.btn:hover{background:var(--action-hover)}

.layout{display:grid; grid-template-columns:220px 1fr; gap:24px; align-items:start}
.toc{position:sticky; top:16px; display:flex; flex-direction:column; gap:2px; font-size:14px}
.toc b{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); margin-bottom:6px}
.toc a{text-decoration:none; padding:3px 0; color:var(--steel)}
.toc a.sub{padding-left:12px; font-size:13px; color:var(--stone)}
.toc a:hover{color:var(--midnight)}
.body{display:grid; gap:16px; min-width:0}
.panel{background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:20px 24px; box-shadow:var(--sh-md)}
.panel h2{font-size:18px; font-weight:500; margin-bottom:10px}
.panel p{margin:0 0 8px}

.roles{width:100%; border-collapse:collapse; margin-top:12px; font-size:14px}
.roles th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--stone); font-weight:600; padding:6px 10px 6px 0; border-bottom:1px solid var(--border)}
.roles td{padding:8px 10px 8px 0; border-bottom:1px solid var(--mist); vertical-align:top}
.roles td:first-child{font-weight:500; width:34%; color:var(--midnight)}

.sections{margin:0; display:grid; gap:0}
.sections > div{padding:10px 0; border-bottom:1px solid var(--mist)}
.sections > div:last-child{border-bottom:0}
.sections dt{font-weight:600; color:var(--midnight); display:flex; gap:10px; flex-wrap:wrap; align-items:baseline}
.sections dt span{font-weight:400; font-size:13px; color:var(--stone)}
.sections dd{margin:2px 0 0}

.task{padding:12px 0; border-bottom:1px solid var(--mist)}
.task:last-child{border-bottom:0}
.task h3{font-size:16px; font-weight:500; display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
.task .who{font-size:11px; padding:1px 7px; border-radius:var(--r-sm); background:var(--mist); color:var(--stone); font-weight:500}
.task ol{margin:8px 0 0; padding-left:22px}
.task li{margin:3px 0}
.tips{margin:0; padding-left:20px}
.tips li{margin:6px 0}
:target{animation:flash 1.6s ease-out}
@keyframes flash{from{background:var(--info-bg)} to{background:transparent}}

/* sign-in gate */
body.gate{display:grid; place-items:center; min-height:100vh; padding:16px}
.box{background:var(--white); border:1px solid var(--border); border-radius:var(--r-lg); padding:32px; max-width:420px; width:100%; box-shadow:var(--sh-md)}
.box .mark{font-weight:600; margin-bottom:18px} .box .mark span{font-weight:500; color:var(--stone)}
.box h1{font-size:22px; font-weight:500; margin-bottom:8px}
.box .btn{display:block; text-align:center; margin-top:16px}
.box .btn.discord{background:#5865F2} .box .btn.discord:hover{background:#4752C4}
.box .alt{display:block; text-align:center; margin-top:14px; font-size:13px}

@media (max-width:760px){
  header{padding:10px 16px} #banner{padding:10px 16px}
  main{padding:20px 16px}
  .brand .tag{display:none}
  .layout{grid-template-columns:1fr} .toc{display:none}
  .hits a{grid-template-columns:1fr; gap:2px}
  .panel{padding:16px}
  .app-head h1{font-size:24px}
}