/* Webbpanelen på paralakerp.com/admins: samma färger, typsnitt och sidhuvud som resten av sajten.
   Laddas sist, efter panelens egna stilar. */
:root {
  color-scheme: dark;
  --site-bg: oklch(13.5% .012 255); --site-card: oklch(18.3% .014 255); --site-muted: oklch(22.5% .018 255);
  --site-fg: oklch(97.5% .003 255); --site-fg2: oklch(70% .022 255); --site-border: oklch(28% .022 255);
  --site-primary: oklch(62% .19 255); --site-primary-fg: oklch(98.5% .002 255); --site-eu: oklch(50% .2 262);
  --site-danger: oklch(66.5% .181 25);
  --font-display: "Anton", Impact, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
html, body.web { height: 100%; overflow: hidden; }
body.web { margin: 0; color: var(--site-fg); font-family: 'Inter', system-ui, sans-serif; background-color: var(--site-bg);
  background-image: radial-gradient(900px 520px at 78% -10%, color-mix(in oklab, var(--site-primary) 22%, transparent), transparent 66%),
    radial-gradient(760px 460px at 0% 4%, color-mix(in oklab, var(--site-eu) 26%, transparent), transparent 64%);
  background-repeat: no-repeat; background-attachment: fixed; }
.hidden { display: none !important; }

/* panelens tokens → sajtens palett (blå accent i stället för grön) */
body.web {
  --mg-bg: oklch(13.5% .012 255); --mg-side: oklch(15.5% .013 255); --mg-card: oklch(18.3% .014 255); --mg-card2: oklch(20.5% .016 255); --mg-card3: oklch(24% .018 255);
  --mg-line: color-mix(in oklab, var(--site-border) 70%, transparent); --mg-line2: var(--site-border);
  --mg-text: var(--site-fg); --mg-text2: var(--site-fg2); --mg-muted: oklch(58% .02 255);
  --mg-green: var(--site-primary); --mg-green2: oklch(68% .19 255); --mg-green-soft: color-mix(in oklab, var(--site-primary) 16%, transparent);
  --mg-blue: var(--site-primary); --mg-blue-soft: color-mix(in oklab, var(--site-primary) 16%, transparent);
}

/* ── Sidhuvud (som sajtens) ── */
#webbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 50; display: flex; align-items: center; gap: 20px; padding: 0 20px;
  background: color-mix(in oklab, var(--site-bg) 85%, transparent); backdrop-filter: blur(24px); border-bottom: 1px solid var(--site-border); box-sizing: border-box; }
.wb-brand { font-family: var(--font-display); font-size: 20px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--site-fg); text-decoration: none; white-space: nowrap; }
.wb-brand span { color: var(--site-primary); }
.wb-sub { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .2em; color: var(--site-primary); white-space: nowrap; }
.wb-l { display: flex; align-items: center; gap: 14px; flex: none; }
.wb-m { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }
.wb-pill { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--site-fg2); border: 1px solid var(--site-border); background: color-mix(in oklab, var(--site-card) 70%, transparent); white-space: nowrap; }
.wb-pill.on { color: var(--site-primary-fg); background: var(--site-primary); border-color: var(--site-primary); }
.wb-pill.bad { color: #fecaca; background: color-mix(in oklab, var(--site-danger) 16%, transparent); border-color: color-mix(in oklab, var(--site-danger) 45%, transparent); }
.wb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--site-fg2); }
.wb-dot.ok { background: oklch(78% .13 165); box-shadow: 0 0 8px oklch(78% .13 165); }
.wb-r { display: flex; align-items: center; gap: 12px; flex: none; }
.wb-av { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--site-muted); display: inline-flex; align-items: center; justify-content: center; color: var(--site-fg2); font-size: 12px; }
.wb-who { display: flex; flex-direction: column; line-height: 1.2; }
.wb-who b { font-size: 13px; color: var(--site-fg); }
.wb-who small { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--site-fg2); }
.wb-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--site-border); background: transparent;
  color: var(--site-fg); font-family: var(--font-mono); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; cursor: pointer; }
.wb-btn:hover { border-color: var(--site-primary); color: #fff; }
.wb-btn:focus-visible, .wl-btn:focus-visible, .wl-nav a:focus-visible { outline: 2px solid var(--site-primary); outline-offset: 2px; }

/* ── Panelen fyller sidan under sidhuvudet ── */
body.web #root { position: fixed; inset: 64px 0 0 0; background: transparent; align-items: stretch; justify-content: stretch; }
body.web:not(.web-app) #root { display: none; }
body.web .shell.mg, body.web.ui2 .shell.mg { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important;
  border-radius: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; }
body.web .shell.mg .sidenav { background: color-mix(in oklab, var(--site-bg) 70%, transparent) !important; box-shadow: none !important; border-right: 1px solid var(--site-border); }
body.web .ns-foot, body.web .tbtn[aria-label="Stäng"], body.web .xbtn, body.web .sidefoot { display: none !important; }   /* panelen stängs inte på webben */
body.web .shell.mg .ns-i.on { background: color-mix(in oklab, var(--site-primary) 14%, transparent) !important; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--site-primary) 35%, transparent) !important; }
body.web .shell.mg .ns-i.on::before { background: var(--site-primary) !important; box-shadow: 0 0 10px var(--site-primary) !important; }
body.web .shell.mg .ns-i.on i { background: var(--site-primary) !important; color: var(--site-primary-fg) !important; box-shadow: none !important; }
body.web .mg-brand .mg-bl { background: var(--site-primary) !important; color: var(--site-primary-fg) !important; box-shadow: none !important; }
body.web .sc.sc2 .tk2.on { border-color: color-mix(in oklab, var(--site-primary) 55%, transparent) !important; background: color-mix(in oklab, var(--site-primary) 12%, transparent) !important; box-shadow: none !important; }
body.web .sc.sc2 .tk2 .unread { background: var(--site-primary) !important; color: var(--site-primary-fg) !important; box-shadow: none !important; }
body.web .mg-hero { filter: hue-rotate(95deg) saturate(.9); }
body.web #toasts, body.web #alerts { top: 76px; }

/* ── Inloggning (sajtens sidhuvud + kort) ── */
#weblogin { position: fixed; inset: 0; overflow-y: auto; }
.wl-head { position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--site-border); background: color-mix(in oklab, var(--site-bg) 85%, transparent); backdrop-filter: blur(24px); }
.wl-head-in { max-width: 80rem; margin: 0 auto; height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 24px; box-sizing: border-box; }
.wl-nav { margin-left: auto; display: flex; gap: 24px; }
.wl-nav a { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--site-fg2); text-decoration: none; }
.wl-nav a:hover { color: var(--site-fg); }
.wl-main { max-width: 80rem; margin: 0 auto; padding: 56px 20px 64px; box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 56px; align-items: center; min-height: calc(100vh - 64px); }
.wl-kick { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .28em; color: var(--site-primary); margin: 0; }
.wl-title { margin: 12px 0 0; font-family: var(--font-display); font-size: clamp(44px, 6vw, 72px); line-height: .95; text-transform: uppercase; letter-spacing: .02em; color: var(--site-fg); font-weight: 400; }
.wl-text { margin: 20px 0 0; max-width: 36rem; color: var(--site-fg2); line-height: 1.6; font-size: 15px; }
.wl-facts { margin: 28px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.wl-facts li { display: flex; gap: 12px; align-items: flex-start; color: var(--site-fg2); font-size: 14px; line-height: 1.5; }
.wl-facts i { color: var(--site-primary); margin-top: 3px; width: 16px; text-align: center; }
.wl-card { padding: 32px; border-radius: 1rem; background: var(--site-card); border: 1px solid var(--site-border); box-shadow: 0 24px 60px -28px oklch(0% 0 0 / .85); }
.wl-card h2 { margin: 10px 0 8px; font-family: var(--font-display); font-weight: 400; font-size: 32px; text-transform: uppercase; letter-spacing: .02em; color: var(--site-fg); }
.wl-lead { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: var(--site-fg2); }
.wl-err { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 18px; padding: 12px 14px; border-radius: .625rem; font-size: 13px; line-height: 1.5;
  color: #fecaca; background: color-mix(in oklab, var(--site-danger) 12%, transparent); border: 1px solid color-mix(in oklab, var(--site-danger) 40%, transparent); }
.wl-err i { margin-top: 3px; }
.wl-btn { width: 100%; height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; border: 0; background: var(--site-primary); color: var(--site-primary-fg);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; cursor: pointer; transition: filter .15s; }
.wl-btn:hover { filter: brightness(1.1); }
.wl-btn i { font-size: 15px; }
.wl-load { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; color: var(--site-fg2); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.wl-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--site-border); border-top-color: var(--site-primary); animation: wlspin .8s linear infinite; }
@keyframes wlspin { to { transform: rotate(360deg); } }
.wl-foot { margin: 18px 0 0; font-size: 12px; line-height: 1.55; color: oklch(58% .02 255); }
@media (max-width: 1023px) { .wl-nav { display: none; } .wl-main { grid-template-columns: 1fr; gap: 32px; padding-top: 36px; align-items: start; } }
@media (max-width: 900px) { .wb-m .wb-pill:not(.bad) { display: none; } .wb-sub { display: none; } }
@media (prefers-reduced-motion: reduce) { .wl-spin { animation: none; } }

/* ── Spectate-fliken ── */
.ws { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; padding-top: 8px; }
.ws-side { min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-side .in { flex: 1; }
.ws-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--site-fg2); }
.ws-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.ws-row { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: .75rem; background: var(--mg-card); border: 1px solid var(--mg-line); }
.ws-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-who b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-who small { font-size: 12px; color: var(--site-fg2); }
.ws-view { min-height: 0; display: flex; flex-direction: column; gap: 10px; border-radius: 1rem; border: 1px solid var(--mg-line); background: var(--mg-card); padding: 14px; }
.ws-cap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ws-cap > span:not(.ws-rec):not(.ws-time):not(.ws-whotag) { flex: 1; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--site-fg2); }
.ws-img { flex: 1; min-height: 0; width: 100%; object-fit: contain; border-radius: .5rem; background: #000; cursor: zoom-in; }
.ws-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; color: var(--site-fg2); padding: 24px; }
.ws-empty i { font-size: 28px; color: var(--site-primary); }
.ws-empty span { max-width: 420px; font-size: 13px; line-height: 1.5; }
@media (max-width: 900px) { .ws { grid-template-columns: 1fr; } .ws-view { min-height: 320px; } }
.ws-live { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.ws-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; border-radius: .5rem; background: #000; cursor: zoom-in; overflow: hidden; }
.ws-stage:fullscreen .ws-img { max-height: 100vh; }
.ws-wait { display: flex; align-items: center; gap: 10px; color: var(--site-fg2); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.ws-rec { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--site-danger); color: #fff; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.ws-rec::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: wsblink 1.2s steps(2) infinite; }
@keyframes wsblink { 50% { opacity: .2; } }
.ws-time { font-family: var(--font-mono); font-size: 11px; color: var(--site-fg2); }
.ws-st { flex: 1; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--site-fg2); }
@media (prefers-reduced-motion: reduce) { .ws-rec::before { animation: none; } }

/* Webben: panelen tonas INTE ned när musen lämnar fönstret (spelets MDT-beteende, body.away, hör bara till spelet). */
body.web.away .shell { opacity: 1 !important; }

/* ══ 2026-10-20: enklare och större (ägaren: "snyggare, större text, enklare") ══════════════════════════════
   · stadsbannern överst bort (tog ~150 px på varje sida, samma siffror finns på startsidan)
   · toppfältet: vanlig text i stället för små versaler, ingen dubblerad profil (panelens egen profilknapp finns) */
body.web .mg-hero { display: none !important; }
/* INGEN zoom på panelen: dess menyer placeras med getBoundingClientRect och hamnade då utanför skärmen (t.ex. "…" vid AI-hjälp).
   Större text = webbläsarens egen zoom (Ctrl +), som Chrome kommer ihåg per sida. */
#webbar { height: 56px; }
body.web #root { inset: 56px 0 0 0; }
body.web #toasts, body.web #alerts { top: 68px; }
.wb-sub { font-family: 'Inter', system-ui, sans-serif; font-size: 14px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--site-fg2); }
.wb-pill, .wb-btn { font-family: 'Inter', system-ui, sans-serif; font-size: 13.5px; font-weight: 600; text-transform: none; letter-spacing: 0; height: 34px; }
.wb-pill.off { color: var(--site-fg2); }

/* Spectate: spelarens ID syns tydligt + åtgärdsrad under bildens rubrik */
.ws-id { flex: none; min-width: 34px; height: 26px; padding: 0 8px; border-radius: 7px; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--site-primary-fg); background: var(--site-primary); }
.ws-whotag { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.ws-whotag b { font-size: 16px; }
.ws-whotag small { font-size: 12.5px; color: var(--site-fg2); }
.ws-acts { display: flex; flex-wrap: wrap; gap: 6px; }
/* Spelbilden kommer upp och ner från spelarens dator (WebGL läser texturen nerifrån); vänds här i stället för i
   spelets live.js så att ingen omstart av prrp_admin behövs. Rättas den i live.js måste raden tas bort. */
.ws-img { transform: scaleY(-1); }
.wb-notis.on { border-color: color-mix(in oklab, var(--site-primary) 55%, transparent); color: #fff; }
.ws-row { flex-wrap: wrap; }
.ws-who { flex: 1 1 140px; }

/* Livebild: bilden till vänster, "Runt spelaren" (ID, namn, avstånd) till höger */
.ws-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 12px; }
.ws-near { min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: .75rem; background: var(--mg-card); border: 1px solid var(--mg-line); }
.ws-nhead { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ws-nhead b { font-size: 14px; }
.ws-nhead small { font-size: 12px; color: var(--site-fg2); }
.ws-nlist { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.ws-nrow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--site-fg); text-align: left; cursor: pointer; }
.ws-nrow:hover:not(:disabled) { background: var(--mg-card2); border-color: var(--mg-line); }
.ws-nrow:disabled { cursor: default; }
.ws-nwho { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ws-nwho b { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-nwho small { font-size: 11.5px; color: var(--site-fg2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-ndist { flex: none; font-family: var(--font-mono); font-size: 12px; color: var(--site-fg2); }
.ws-nnote { font-size: 13px; color: var(--site-fg2); padding: 6px 2px; }
@media (max-width: 1200px) { .ws-body { grid-template-columns: minmax(0, 1fr); } .ws-near { max-height: 220px; } }
.ws-whotag { flex: none; }
.ws-whotag b { white-space: nowrap; }

/* ══ Åtgärder som kräver att du är inne i spelet: dolda när du inte är det ══ */
body.web .web-needs-ingame { display: none !important; }

/* ══ Levande knappar (ägaren: "varje klick ska kännas") ══════════════════════════════════════════════
   Mjuk upplyftning vid hovring, tydlig nedtryckning vid klick, och en kort våg från klickpunkten.
   Bara transform/opacity → ingen omlayout. Av för den som valt minskad rörelse i systemet. */
body.web button:not(:disabled), body.web .btn:not(:disabled), body.web [role=menuitem] {
  transition: transform .12s cubic-bezier(.2, .8, .2, 1), filter .12s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease; }
@media (hover: hover) { body.web .btn:not(:disabled):hover, body.web .mg-btn:not(:disabled):hover, body.web .wb-btn:hover { transform: translateY(-1px); filter: brightness(1.08); } }
body.web button:not(:disabled):active, body.web .btn:not(:disabled):active { transform: translateY(1px) scale(.965) !important; filter: brightness(.92); transition-duration: .05s; }
body.web .btn.danger:not(:disabled):hover, body.web .mg-btn.danger:not(:disabled):hover { box-shadow: 0 0 0 3px color-mix(in oklab, var(--site-danger) 22%, transparent); }
body.web .btn.primary:not(:disabled):hover, body.web .mg-btn.primary:not(:disabled):hover { box-shadow: 0 6px 18px color-mix(in oklab, var(--site-primary) 35%, transparent); }
.web-ripple { position: fixed; z-index: 9999; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; pointer-events: none;
  background: color-mix(in oklab, var(--site-primary) 55%, white); opacity: .45; animation: webripple .45s ease-out forwards; }
@keyframes webripple { to { transform: scale(9); opacity: 0; } }
body.web .busy { cursor: progress !important; }
@media (prefers-reduced-motion: reduce) { body.web button, body.web .btn { transition: none !important; } .web-ripple { display: none; } }

/* ══ Mobil (≤ 760 px) ════════════════════════════════════════════════════════════════════════════ */
.m-back { display: none; }
@media (max-width: 760px) {
  #webbar { gap: 8px; padding: 0 10px; }
  .wb-sub, .wb-m { display: none !important; }
  .wb-brand { font-size: 17px; }
  .wb-r { margin-left: auto; gap: 6px; }
  .wb-btn { font-size: 0 !important; gap: 0; width: 38px; padding: 0; justify-content: center; }
  .wb-btn i { font-size: 15px; }
  body.web .topbar2.mg-top { flex-wrap: wrap; height: auto !important; row-gap: 8px; padding-top: 8px; padding-bottom: 8px; }
  body.web .topbar2 .gsearch2 { order: 10; flex: 1 1 100%; width: auto !important; }
  body.web .topbar2 .gsearch2 kbd, body.web .topbar2 .mebtn .mn, body.web .topbar2 .tbtn[aria-label*="jälp"] { display: none !important; }
  body.web .topbar2 .dutybtn { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Ärenden: listan i full bredd; ett öppnat ärende tar hela skärmen, "Alla ärenden" går tillbaka */
  body.web .sc.sc2 { display: block !important; overflow-y: auto; }
  body.web .sc.sc2 > .col-list { width: 100% !important; max-width: none !important; }
  body.web:not(.m-open) .sc.sc2 > .col-main, body.web:not(.m-open) .sc.sc2 > .col-side { display: none !important; }
  body.web.m-open .sc.sc2 > .col-list { display: none !important; }
  body.web.m-open .sc.sc2 > .col-main { width: 100% !important; min-height: 70vh; }
  body.web.m-open .sc.sc2 > .col-side { width: 100% !important; max-width: none !important; margin-top: 12px; }
  body.web.m-open .sc.sc2 .thead, body.web.m-open .sc.sc2 .thead > * { flex-wrap: wrap !important; max-width: 100%; min-width: 0; height: auto !important; }
  body.web.m-open .sc.sc2 .thead .acts { flex-wrap: wrap !important; justify-content: flex-start !important; gap: 6px; }
  body.web.m-open .sc.sc2 .thead [class*='ctl'], body.web.m-open .sc.sc2 .thead .tmeta { flex-wrap: wrap !important; white-space: normal !important; }
  body.web.m-open .m-back { display: inline-flex; align-items: center; gap: 6px; position: fixed; left: 12px; bottom: 14px; z-index: 70; height: 42px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--site-border); background: var(--site-primary); color: var(--site-primary-fg); font-weight: 600; font-size: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
  /* Spectate: lista överst, bilden under */
  .ws { grid-template-columns: minmax(0, 1fr) !important; overflow-y: auto; }
  .ws-side { max-height: 46vh; }
  .ws-body { grid-template-columns: minmax(0, 1fr) !important; }
  .ws-stage { min-height: 220px; }
}
@media (max-width: 760px) {
  body.web.m-open .sc.sc2 .thead .acts { display: flex !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  body.web.m-open .sc.sc2 .thead .trow { width: 100% !important; overflow: visible !important; }
}

/* ══ Ljud (toppfältet) ═════════════════════════════════════════════════════════════════════════ */
.wb-ljud { position: relative; }
.wb-btn.on { border-color: color-mix(in oklab, var(--site-primary) 55%, transparent); color: #fff; }
.wb-btn.warn { border-color: oklch(75% .14 75); color: oklch(85% .12 80); }
.wb-ljudpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 80; width: min(320px, calc(100vw - 24px)); display: grid; gap: 12px; padding: 16px;
  border-radius: 12px; border: 1px solid var(--site-border); background: var(--mg-card, #16181d); color: var(--site-fg); box-shadow: 0 12px 32px rgba(0,0,0,.5);
  font-family: 'Inter', system-ui, sans-serif; font-size: 15px; }
.wb-ljudpop[hidden] { display: none; }
.wb-ljudh { font-size: 17px; font-weight: 700; }
.wb-ljudstat { font-size: 14px; color: var(--site-fg2); line-height: 1.45; }
.wb-ljudrow { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; line-height: 1.35; cursor: pointer; }
.wb-ljudrow.col { flex-direction: column; align-items: stretch; gap: 6px; }
.wb-ljudrow input[type=checkbox] { width: 22px; height: 22px; flex: none; accent-color: var(--site-primary); }
.wb-ljudrow input[type=range] { width: 100%; height: 32px; accent-color: var(--site-primary); }
.wb-ljudpop .btn { min-height: 44px; }
.wb-ljudnote { font-size: 13px; color: var(--site-fg2); line-height: 1.45; border-top: 1px solid var(--site-border); padding-top: 10px; }

/* ══ Mobil 2 (2026-10-20): dynamisk höjd, safe areas, 44 px klickytor, anslutningsläget syns ═════ */
.wl-main { min-height: calc(100dvh - 64px); }
.ws-stage:fullscreen .ws-img { max-height: 100dvh; }
#webbar { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
@media (max-width: 760px) {
  #webbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
  .wb-btn { width: 44px; height: 44px; }
  .wb-ljud .wb-btn { width: 44px; }
  .ws-nrow { min-height: 44px; }
  body.web .ws-acts .btn, body.web .ws-acts button { min-height: 44px; }
  .ws-side { max-height: 46dvh; }
  body.web.m-open .sc.sc2 > .col-main { min-height: 70dvh; }
  body.web.m-open .m-back { left: max(12px, env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)); height: 44px; }
  /* anslutningsläget får inte försvinna på mobil: bara problemläget visas, som en smal rad under toppfältet */
  .wb-m.wb-m-problem { display: flex !important; position: fixed; left: 0; right: 0; top: 56px; z-index: 49; justify-content: center; padding: 6px 10px;
    background: color-mix(in oklab, var(--site-danger) 22%, var(--site-bg)); border-bottom: 1px solid var(--site-border); overflow: visible; }
  body.web #root { padding-bottom: env(safe-area-inset-bottom); }
}