/* BridgeRP shared theme, Lucas's Implementation Handoff of 2026-10-15, pages 6 and 7:
   "One theme across every page". STAGING ONLY (?staging=1) until he says ship it.

   One stylesheet every first-party inner page loads (Sync Vault, artist pages and the
   store, the policies, the 404), scoped under html.sig, which rp-theme.js puts on <html>
   only on the test link. The pages already share one set of color variables, so the theme
   is mostly those variables re-pointed at the staging palette, plus the handful of dark
   surfaces each page hard coded. The homepage keeps its own block in rp-signal.css.

   Palette (page 6): base #214E62, deep #153F51, atmosphere #326678, mint #ABEEDF /
   #98E9D9, text #F0F8FB, secondary #A9CED9, border rgba(223,252,255,.30), Space Grotesk. */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/rp-brand/fonts/space-grotesk.woff2) format('woff2')}

html.sig{
  --ink:#214E62; --charcoal:#1C495C; --graphite:#2A5B6E; --line:rgba(223,252,255,.30); --line-soft:rgba(223,252,255,.16);
  --cloud:#F0F8FB; --soft:#A9CED9; --muted:#9CC3CF; --gold:#ABEEDF; --blue:#A6E5F5; --green:#8EECDA; --accent:#ABEEDF;
  --deep:#153F51; --atmo:#326678; --mint:#ABEEDF; --mint2:#98E9D9; --tx:#F0F8FB; --tx2:#A9CED9;
  --glass:linear-gradient(135deg,rgba(229,251,255,.16),rgba(201,237,251,.035));
  --surface:#1F4C5F; --well:#173F50;
  background:#214E62;
}
html.sig body{
  background:radial-gradient(80% 50% at 80% 0%,rgba(50,102,120,.75),transparent 70%),radial-gradient(60% 40% at 0% 0%,rgba(21,63,81,.6),transparent 70%),#214E62 !important;
  background-attachment:fixed;color:var(--tx);font-family:'Space Grotesk',Arial,sans-serif;
}
html.sig body:before{opacity:0!important}
html.sig h1,html.sig h2,html.sig h3,html.sig .display{font-family:'Space Grotesk',Arial,sans-serif}
html.sig ::selection{background:rgba(171,238,223,.35)}
html.sig :focus-visible{outline-color:var(--mint)}

/* the staging bar, same as the homepage's */
.rpt-bar{display:none}
html.sig .rpt-bar{display:block;position:relative;z-index:60;background:#ABEEDF;color:#123F4C;font:700 11px 'Space Grotesk',Arial,sans-serif;letter-spacing:.14em;text-align:center;padding:8px 12px}
html.sig .rpt-bar a{color:#123F4C;margin-left:10px}

/* navigation shell */
html.sig .nav{background:rgba(21,63,81,.82);border-bottom-color:rgba(223,252,255,.18);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html.sig .wordmark small,html.sig .brand small{color:var(--tx2)}

/* glass surfaces: cards, panels, releases, rows, sheets */
html.sig .rel,html.sig .panel,html.sig .card,html.sig .res,html.sig .tile,html.sig .item,html.sig .drop,html.sig .rail,html.sig .toc{
  background:var(--glass),var(--surface);border-color:var(--line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
html.sig .panel,html.sig .rel,html.sig .card{border-radius:22px}
html.sig .panel.gold{background:linear-gradient(135deg,rgba(171,238,223,.14),rgba(171,238,223,.03)),var(--surface);border-color:rgba(171,238,223,.4)}
html.sig .sheetin{background:#1A4659;border-color:var(--line)}
html.sig .sheet{background:rgba(10,36,48,.62)}
html.sig .msg,html.sig .contract{background:var(--well);border-color:var(--line-soft);color:#D6ECF2}
html.sig .msg.mine{background:rgba(171,238,223,.08);border-color:rgba(171,238,223,.25)}
html.sig .tr{border-bottom-color:rgba(223,252,255,.1)}
html.sig .tr:hover{background:rgba(223,252,255,.05)}
html.sig .tbl td{border-top-color:rgba(223,252,255,.12)}
html.sig .filerow,html.sig .res .acts{border-top-color:rgba(223,252,255,.12)}
html.sig .now{background:#153F51}
html.sig .nowsh{background:linear-gradient(180deg,rgba(21,63,81,.35),rgba(21,63,81,.88) 60%,#153F51)}
html.sig .nowbg{background:radial-gradient(720px 470px at 28% 18%,rgba(171,238,223,.32),transparent 62%),radial-gradient(620px 430px at 80% 72%,rgba(166,229,245,.26),transparent 64%)}

/* header band on artist pages and the vault */
html.sig .hero,html.sig .head{background:radial-gradient(1000px 340px at 18% 0%,rgba(171,238,223,.16),transparent 62%),radial-gradient(900px 320px at 84% 12%,rgba(50,102,120,.6),transparent 60%),transparent}
html.sig .avatar{border-color:rgba(223,252,255,.3);box-shadow:0 18px 48px rgba(0,25,38,.45)}
html.sig .avatar.ph,html.sig .art.ph,html.sig .card .ph,html.sig .part.ph,html.sig .nowart.ph,html.sig .rowart{color:rgba(223,252,255,.4)}
html.sig .bio,html.sig .lede,html.sig article p,html.sig article ul,html.sig p{color:#D6ECF2}
html.sig .note,html.sig .muted,html.sig small{color:var(--tx2)}

/* fields: calm, readable, 12px radius */
html.sig input,html.sig select,html.sig textarea{background:var(--well);border-color:rgba(223,252,255,.28);color:var(--tx);border-radius:12px}
html.sig input::placeholder,html.sig textarea::placeholder{color:#8DB5C1}
html.sig input:focus,html.sig select:focus,html.sig textarea:focus{border-color:var(--mint);outline:none;box-shadow:0 0 0 3px rgba(171,238,223,.18)}

/* buttons: pale mint fill, dark teal text, 999px */
html.sig .btn{background:linear-gradient(120deg,#C9F6EC,var(--mint));color:#123F4C;border:1px solid rgba(240,255,252,.75);border-radius:999px}
html.sig .btn:hover{filter:brightness(1.04)}
html.sig .btn.ghost,html.sig .btn.sec{background:transparent;color:var(--tx);border:1px solid var(--line)}
html.sig .btn.ghost:hover,html.sig .btn.sec:hover{background:rgba(223,252,255,.08);border-color:rgba(171,238,223,.6)}
html.sig .tab .pip{color:#123F4C}
html.sig .play.on,html.sig .tbtn.main{background:var(--mint);color:#123F4C;border-color:var(--mint)}
html.sig .tbtn.main:hover{color:#123F4C}

/* chips, tags, pills, steps */
html.sig .kindtag,html.sig .tag.gold{border-color:rgba(171,238,223,.4)}
html.sig .chip,html.sig .tag.green,html.sig .verified.yes{border-color:rgba(142,236,218,.4)}
html.sig .chip.gen,html.sig .tag.blue{border-color:rgba(166,229,245,.4)}
html.sig .opt button.on,html.sig .gchip.on,html.sig .pill.on,html.sig .doc.on{background:rgba(171,238,223,.12);border-color:rgba(171,238,223,.6);color:var(--mint)}
html.sig .gchip:hover,html.sig .pill:hover,html.sig .social:hover,html.sig .doc:hover,html.sig .verified.no:hover,html.sig .x:hover{border-color:rgba(171,238,223,.5);background:rgba(223,252,255,.07)}
html.sig .chk.y i{background:rgba(142,236,218,.16)}
html.sig .chk.n i,html.sig .stg{color:#8DB5C1}
html.sig .steps i,html.sig .trk i,html.sig .bar{background:rgba(223,252,255,.16)}
html.sig .meta .sep{background:rgba(223,252,255,.4)}
html.sig .spin{border-color:rgba(223,252,255,.25);border-top-color:var(--mint)}
html.sig .res:hover{border-color:rgba(171,238,223,.5)}
html.sig article a,html.sig .lede a{color:var(--mint)}

/* footers */
html.sig footer{border-top-color:rgba(223,252,255,.18);color:var(--tx2)}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html.sig .rel,html.sig .panel,html.sig .card,html.sig .res,html.sig .tile,html.sig .item,html.sig .drop,html.sig .rail,html.sig .toc{background:#1F4C5F}
  html.sig .nav{background:#153F51}
}
@media print{html.sig body{background:#fff!important;color:#000}}

/* official logo in the shared navigation */
html.sig .rpt-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tx2)}
html.sig .rpt-logo{display:block;width:132px;height:auto}
html.sig .rpt-sub{font-size:9px;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--tx2);padding-left:12px;border-left:1px solid rgba(223,252,255,.25)}
@media(max-width:520px){html.sig .rpt-sub{display:none}html.sig .rpt-logo{width:116px}}

/* the branded 404 (its own small stylesheet) */
html.sig .k{color:var(--tx2)}
html.sig a.b{border-color:var(--line);color:var(--tx);border-radius:999px}
html.sig a.b:hover{background:rgba(223,252,255,.08)}
html.sig a.b.p{background:linear-gradient(120deg,#C9F6EC,var(--mint));color:#123F4C;border-color:rgba(240,255,252,.75)}
html.sig a:focus-visible{outline-color:var(--mint)}
html.sig small a{color:var(--mint)}
html.sig .rpt-bar.fx{position:fixed;left:0;right:0;top:0}
html.sig .player{background:rgba(21,63,81,.94);border-top-color:rgba(223,252,255,.22)}
/* footers carry the official logo too */
html.sig .foot img[src="/rp-mark.webp"]{content:url(/rp-brand/bridgerp-dark.svg);width:104px!important;height:auto}
html.sig .foot .brand{display:none}
html.sig .foot .tag{color:var(--tx2)}
@media(max-width:520px){html.sig .rpt-bar{font-size:9.5px;letter-spacing:.06em;padding:7px 8px}}
.rpt-404logo{display:none}
html.sig .rpt-404logo{display:inline-block;margin-bottom:34px}
html.sig .rpt-404logo img{display:block;width:140px;height:auto}