/* ═══════════ RAIL v2 — unified site header (2026-09-23) ═══════════
   ONE header for every page: brand | mid | actions + unified menu.
   Load AFTER snes.css. Unika rr-*-klasser + !important där snes.css slåss.
   chat.html bär sin egen inline-kopia av rail-CSS (source of truth) — länka
   INTE detta ark där. Se docs/rail-v2-spec-2026-09-23.md. */
.rite-rail{
  display:grid !important; grid-template-columns:1fr auto 1fr !important; align-items:center;
  height:48px !important;
  background:linear-gradient(180deg,var(--stone-2),var(--stone)) !important;
  border:1px solid var(--edge) !important; border-top:1px solid var(--edge-hi) !important;
  box-shadow:none !important;
  padding:0 .8rem !important; gap:1rem; position:relative; z-index:5;
}
.rite-rail::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px; height:1px; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--gold-rgb),.55) 30%,rgba(var(--gold-rgb),.55) 70%,transparent);
}
.rr-brand{ display:flex; align-items:center; gap:.55rem; min-width:0; justify-self:start; }
.rr-sigil{
  width:22px; height:22px; border:1px solid var(--gold); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-bright); font-size:.8rem; cursor:pointer;
  box-shadow:0 0 8px rgba(var(--gold-rgb),.35) inset;
  transition:border-color .15s,color .15s,box-shadow .15s;
}
.rr-sigil:hover{ border-color:var(--gold-bright); color:var(--bone-bright);
  box-shadow:0 0 8px rgba(var(--gold-rgb),.35) inset,0 0 10px rgba(var(--gold-rgb),.35); }
.rr-name{
  font-family:var(--font-display); font-size:.82rem; letter-spacing:.14em;
  color:var(--bone-bright); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.rr-tag{
  font-family:var(--font-accent); font-size:.52rem; letter-spacing:.2em;
  color:var(--gold); border:1px solid rgba(var(--gold-rgb),.4);
  padding:.15rem .4rem; white-space:nowrap;
}
.rr-mid{ justify-self:center; display:flex; align-items:baseline; min-width:0; }
.rr-tally{
  justify-self:center; display:flex; align-items:baseline; gap:.7rem;
  font-family:var(--font-mono); font-size:.72rem; color:var(--bone-dim);
  white-space:nowrap; min-width:0;
}
.rr-tally .tv{ color:var(--gold-bright); font-weight:500; font-variant-numeric:tabular-nums; }
.rr-tally .sep{ color:var(--edge-hi); }
.rr-tally .warn{ color:var(--blood-bright); }
.rr-actions{
  display:flex; align-items:center; gap:.4rem; justify-self:end; justify-content:flex-end;
  flex-wrap:nowrap !important;
}
.rite-rail .rr-btn{
  width:50px; height:40px; padding:0 !important; flex-shrink:0; cursor:pointer;
  border:1px solid var(--edge) !important;
  background:var(--stone) !important;
  color:var(--bone-dim) !important;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s !important;
  font-size:1.05rem !important;
  box-shadow:none !important; text-shadow:none !important; filter:none !important;
}
.rite-rail .rr-btn:hover{
  border-color:var(--gold) !important; color:var(--gold-bright) !important;
  background:var(--stone) !important;
  box-shadow:0 0 10px rgba(var(--gold-rgb),.25) !important;
}
.rite-rail .rr-btn.on{ border-color:var(--gold) !important; color:var(--gold-bright) !important; }
.rite-rail .rr-btn.text-btn{
  width:auto; padding:0 .7rem !important;
  font-family:var(--font-display); font-size:.62rem !important; letter-spacing:.12em; text-transform:uppercase;
}
/* Profil-/användar-chip (login) */
.rite-rail .rr-btn#nav-user{ width:auto; padding:0 .7rem !important; gap:.35rem;
  font-family:var(--font-display); font-size:.62rem !important; letter-spacing:.12em; }
/* ── Unified menu ── */
.rr-menu{ position:relative; }
.rr-drop{
  position:absolute; top:calc(100% + .5rem); right:0; min-width:250px;
  background:linear-gradient(180deg,var(--stone-2),var(--stone));
  border:1px solid var(--gold); box-shadow:0 8px 30px rgba(0,0,0,.6);
  display:none; z-index:10000; flex-direction:column; padding:.3rem 0;
}
.rr-drop.open{ display:flex; }
.rr-drop a{
  display:flex; align-items:center; gap:.6rem; padding:.5rem .9rem;
  color:var(--bone); text-decoration:none;
  font-family:var(--font-display); font-size:.78rem; letter-spacing:.1em;
  border:none; background:none; transition:background .15s,transform .15s,color .15s;
}
.rr-drop a:hover{ background:rgba(var(--gold-rgb),.08); color:var(--gold-bright); transform:translateX(3px); }
.rr-drop a.cur{ color:var(--gold); box-shadow:inset 2px 0 0 var(--gold); }
.rr-ghead{
  font-family:var(--font-accent); font-size:.55rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); opacity:.85; padding:.5rem .9rem .15rem; user-select:none;
  border-top:1px solid var(--edge); margin-top:.25rem;
}
.rr-drop .rr-ghead:first-child{ border-top:none; margin-top:0; padding-top:.25rem; }
.rr-drop a[hidden]{ display:none; }

@media (max-width:900px){
  .rite-rail{ gap:.5rem !important; padding:0 .5rem !important; grid-template-columns:auto 1fr auto !important; }
  .rr-name{ display:none; }
  .rr-tally{ font-size:.62rem !important; gap:.45rem; }
  .rr-drop{ position:fixed; top:52px; right:.5rem; left:.5rem; min-width:0;
    max-height:calc(100dvh - 64px); overflow-y:auto; }
}
@media (max-width:640px){
  .rr-tag{ display:none; }
  .rr-tally{ font-size:.55rem; gap:.35rem; }
  .rr-actions{ gap:.25rem !important; }
  .rite-rail .rr-btn{ width:44px !important; height:38px !important; font-size:.95rem !important; }
  .rite-rail .rr-btn.text-btn{ width:auto !important; padding:0 .5rem !important; font-size:.56rem !important; }
  .rite-rail .rr-btn#nav-user{ display:none !important; }
}
@media (prefers-reduced-motion:no-preference){
  .rr-sigil{ animation:rail-candleflicker 4.2s ease-in-out infinite; }
}
@keyframes rail-candleflicker{ 0%,100%{opacity:1} 42%{opacity:.84} 58%{opacity:.95} 72%{opacity:.88} }
@media (prefers-reduced-motion:reduce){ .rr-sigil{ animation:none !important; } }