/* Petri — samtalshusets form från Frinans (skal.css, samtalshuset.css) och
   dess två teman, Natt och Dag (farg.css). Färgerna bor i tokens; reglerna
   nedan talar bara tokennamn. */

@font-face { font-family:'Familjen Grotesk'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('/statiskt/fonts/familjengrotesk-var-latin.woff2') format('woff2'); }
@font-face { font-family:'Instrument Sans'; font-style:normal; font-weight:400 700;
  font-display:swap; src:url('/statiskt/fonts/instrumentsans-var-latin.woff2') format('woff2'); }
@font-face { font-family:'Newsreader'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/statiskt/fonts/newsreader-400-opsz-latin.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('/statiskt/fonts/ibmplexmono-400-latin.woff2') format('woff2'); }
@font-face { font-family:'IBM Plex Mono'; font-style:normal; font-weight:500;
  font-display:swap; src:url('/statiskt/fonts/ibmplexmono-500-latin.woff2') format('woff2'); }

:root, [data-tema="natt"] {
  --rd:#0e0c0a; --bg:#100e0c; --sf:#191712; --rs:#221f19; --rs2:#2c2821;
  --dv:rgba(255,247,235,.05); --ln:rgba(255,247,235,.09); --ln2:rgba(255,247,235,.17);
  --tx:#f5f1ea; --dm:rgba(245,241,234,.66); --ft:rgba(245,241,234,.44);
  --gn:#7ec99e; --am:#e0954e; --amb:rgba(224,149,78,.14); --bu:#8fb3ea; --rod:#e08a72;
  --skugga:0 16px 40px rgba(0,0,0,.38); --tacke:rgba(0,0,0,.55);
  color-scheme:dark;
}
[data-tema="dag"] {
  --rd:#fefcf8; --bg:#f7f4ee; --sf:#fffefb; --rs:#f0ece3; --rs2:#e6e0d4;
  --dv:rgba(26,20,14,.06); --ln:rgba(26,20,14,.11); --ln2:rgba(26,20,14,.2);
  --tx:#1c1813; --dm:rgba(28,24,19,.7); --ft:rgba(28,24,19,.48);
  --gn:#2f7d55; --am:#b96c22; --amb:rgba(185,108,34,.1); --bu:#2a5fa8; --rod:#a94a35;
  --skugga:0 16px 40px rgba(60,45,25,.13); --tacke:rgba(0,0,0,.55);
  color-scheme:light;
}

* { box-sizing:border-box }
html, body { height:100% }
body {
  margin:0; background:var(--bg); color:var(--tx);
  font-family:'Familjen Grotesk','Instrument Sans',system-ui,sans-serif;
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
button, input, textarea { font:inherit; color:inherit }
button { cursor:pointer }
[hidden] { display:none !important }
.mono { font-family:'IBM Plex Mono',ui-monospace,monospace }

/* ── ramen ───────────────────────────────────────────────────────────── */
.app { display:flex; height:100vh; height:100dvh; overflow:hidden }

.sido {
  width:274px; flex:none; display:flex; flex-direction:column; position:relative;
  background:var(--rs); border-right:1px solid var(--ln); overflow:hidden;
}
.sidotopp { display:flex; align-items:center; gap:10px; padding:16px 22px 12px }
.marke { font-family:Newsreader,Georgia,serif; font-size:22px; letter-spacing:-.01em; color:var(--tx); text-decoration:none }
.nyfraga {
  display:flex; align-items:center; gap:10px; margin:2px 12px 14px; height:38px; padding:0 12px;
  border-radius:999px; border:1px solid var(--ln2); background:transparent; color:var(--tx);
  font-size:14px; font-weight:500; text-align:left;
}
.nyfraga:hover { background:var(--rs2) }
.listrubrik {
  padding:0 4px 7px 22px; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ft);
}
.listor {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; padding:0 12px 12px;
  display:flex; flex-direction:column; gap:1px; scrollbar-width:thin; scrollbar-color:var(--ln2) transparent;
}
.topic {
  position:relative; display:flex; align-items:center; gap:8px; width:100%; min-height:34px;
  padding:7px 11px; border:none; border-radius:8px; background:transparent; font-size:13.5px;
  line-height:1.35; color:var(--dm); text-decoration:none;
}
.topic .titel { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.topic:hover { background:var(--rs2); color:var(--tx) }
.topic.aktiv { background:var(--rs2); color:var(--tx); font-weight:500 }
.topic.olast { color:var(--tx); font-weight:600 }
.topic .radmeny-knapp {
  flex:none; width:22px; height:22px; display:none; place-items:center; padding:0;
  border:none; border-radius:6px; background:transparent; color:var(--ft);
}
.topic:hover .radmeny-knapp, .topic.aktiv .radmeny-knapp { display:grid }
.topic .radmeny-knapp:hover { background:var(--rs); color:var(--tx) }
.olastprick { flex:none; width:7px; height:7px; border-radius:50%; background:var(--am) }
.tomrad { padding:8px 11px; font-size:13px; color:var(--ft) }

.sidofot { padding:10px 6px 12px; border-top:1px solid var(--ln) }
.duknapp {
  display:flex; align-items:center; gap:10px; width:100%; padding:6px 10px;
  border:1px solid transparent; border-radius:14px; background:transparent; text-align:left;
}
.duknapp:hover { background:var(--rs2) }
.avatar {
  flex:none; width:30px; height:30px; border-radius:50%; background:var(--rs2);
  display:grid; place-items:center; font-size:12px; font-weight:600; color:var(--dm);
}
.duknapp .txt { flex:1; min-width:0; display:flex; flex-direction:column; overflow:hidden; white-space:nowrap }
.duknapp .namn { font-size:13px; font-weight:500; line-height:1.35; overflow:hidden; text-overflow:ellipsis }
.duknapp .adress { font-size:11.5px; color:var(--ft); line-height:1.35; overflow:hidden; text-overflow:ellipsis }

.meny {
  position:absolute; z-index:40; min-width:220px; padding:7px; display:flex; flex-direction:column; gap:2px;
  background:var(--sf); border:1px solid var(--ln2); border-radius:14px; box-shadow:var(--skugga);
}
.meny .rad {
  display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 11px;
  border:none; border-radius:9px; background:transparent; font-size:13.5px; color:var(--tx);
}
.meny .rad:hover { background:var(--rs) }
.meny .rad .hoger { margin-left:auto; color:var(--ft); font-size:12px }
.meny .rad.vald .hoger { color:var(--gn) }
.meny .rad.fara { color:var(--rod) }
.meny hr { border:none; border-top:1px solid var(--ln); margin:5px 2px }
.meny .avd { padding:7px 11px 3px; font-family:'IBM Plex Mono',monospace; font-size:9.5px; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ft) }
.meny input { width:100%; padding:7px 10px; border:1px solid var(--ln2); border-radius:9px; background:var(--rs); outline:none }
.meny .knappar { display:flex; gap:6px; padding:4px 2px 0 }
.meny .knappar button { flex:1; padding:6px 10px; border:1px solid var(--ln2); border-radius:9px; background:transparent; font-size:13px }
.meny .knappar button.fara { color:var(--rod); border-color:var(--rod) }
.meny .info { padding:2px 11px 6px; font-size:12.5px; color:var(--dm) }
.dropup { left:12px; right:12px; bottom:66px }
#radmeny { position:fixed; width:240px; z-index:70 }

/* ── chatten ─────────────────────────────────────────────────────────── */
main { flex:1; min-width:0; display:flex; flex-direction:column; position:relative }
.rulle { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:var(--ln2) transparent }
.mitten { max-width:760px; margin:0 auto; padding:32px 28px 8px; min-width:0 }

.start { min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 28px; gap:10px; text-align:center }
.start h1 { font-family:Newsreader,Georgia,serif; font-weight:400; font-size:clamp(28px,4.4vw,38px); line-height:1.18; letter-spacing:-.015em; margin:0 }
.start p { margin:0; font-size:14.5px; color:var(--dm); max-width:52ch; line-height:1.6 }

.trad { display:flex; flex-direction:column; gap:20px; padding-bottom:8px }
.tur { display:flex; flex-direction:column; min-width:0 }
.tur.du { align-items:flex-end }
.tur .vem { font-size:11.5px; color:var(--ft); margin:0 6px 3px }
.tur.du .bubbla {
  max-width:82%; padding:9px 15px; border-radius:18px 18px 5px 18px; background:var(--rs);
  border:1px solid var(--ln); white-space:pre-wrap; overflow-wrap:anywhere;
}
.tur.du.vantar .bubbla { opacity:.6 }
.tur.du .skickas { font-size:11px; color:var(--ft); margin:3px 6px 0 }
.tur.terminal .bubbla { border-style:dashed }

.text { overflow-wrap:anywhere; line-height:1.62 }
.text > :first-child { margin-top:0 }
.text > :last-child { margin-bottom:0 }
.text p, .text ul, .text ol, .text blockquote, .text pre, .text .tabell { margin:0 0 .75em }
.text h3, .text h4, .text h5 { margin:1.1em 0 .45em; font-size:15.5px; font-weight:600; line-height:1.35 }
.text h3 { font-size:17px }
.text ul, .text ol { padding-left:1.4em }
.text li { margin:.18em 0 }
.text a { color:var(--bu) }
.text code { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:.86em; background:var(--rs); border:1px solid var(--ln); border-radius:5px; padding:.08em .35em }
.text pre { background:var(--rs); border:1px solid var(--ln); border-radius:10px; padding:11px 13px; overflow-x:auto; line-height:1.5 }
.text pre code { background:none; border:0; padding:0; font-size:12.5px }
.text blockquote { border-left:2px solid var(--ln2); padding-left:12px; color:var(--dm) }
.text hr { border:none; border-top:1px solid var(--ln); margin:1em 0 }
.text .tabell { overflow-x:auto }
.text table { border-collapse:collapse; font-size:13.5px }
.text th, .text td { border:1px solid var(--ln); padding:5px 9px; text-align:left; vertical-align:top }
.text th { background:var(--rs); font-weight:600 }

.steg { font-size:12.5px; color:var(--ft) }
.steg summary { cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:6px; padding:2px 0 }
.steg summary::-webkit-details-marker { display:none }
.steg summary::before { content:'›'; display:inline-block; transition:transform .12s ease }
.steg[open] summary::before { transform:rotate(90deg) }
.steg ol { list-style:none; margin:4px 0 0; padding:0 0 0 12px; border-left:1px solid var(--ln) }
.steg li { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:11.5px; line-height:1.55; padding:1px 0 1px 8px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--dm) }
.steg li b { font-weight:500; color:var(--tx) }

.markering { display:flex; align-items:center; gap:12px; font-size:12px; color:var(--ft); text-align:center }
.markering::before, .markering::after { content:''; flex:1; border-top:1px solid var(--ln) }
.markering span { max-width:70%; white-space:pre-wrap }

.arbetar { display:flex; align-items:center; gap:9px; font-size:13px; color:var(--dm) }
.snurra { flex:none; width:13px; height:13px; border-radius:50%; border:1.6px solid var(--ln2); border-top-color:var(--am); animation:snurra .8s linear infinite }
@keyframes snurra { to { transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .snurra { animation-duration:2.4s } }

/* ── skrivrutan ──────────────────────────────────────────────────────── */
.komponistrad { flex:none; padding:10px 28px 14px }
.komponistram { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:7px }
.komponist {
  display:flex; align-items:flex-end; gap:8px; padding:9px 10px 9px 16px;
  border-radius:24px; border:1px solid var(--ln2); background:var(--rs);
}
.komponist textarea {
  flex:1; min-width:0; max-height:220px; border:none; background:transparent; resize:none;
  font-size:15px; line-height:1.5; outline:none; padding:6px 2px; overflow-y:auto; white-space:pre-wrap; overflow-wrap:break-word;
}
.komponist textarea::placeholder { color:var(--ft) }
.rundknapp {
  flex:none; width:32px; height:32px; display:grid; place-items:center; padding:0;
  border:none; border-radius:50%; background:transparent; color:var(--dm);
}
.rundknapp:hover { background:var(--rs2); color:var(--tx) }
.rundknapp.skicka { background:var(--tx); color:var(--bg) }
.rundknapp.skicka:disabled { background:var(--rs2); color:var(--ft); cursor:default }
.rundknapp.stoppa { border:1px solid var(--ln2) }

.fot { display:flex; align-items:center; gap:4px; padding:0 8px; font-size:12px; color:var(--ft); position:relative }
.fot .modell { padding:3px 6px }
.fot .litenknapp { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border:none; border-radius:999px; background:transparent; color:var(--ft); font-size:12px }
.fot .litenknapp:hover { background:var(--rs); color:var(--tx) }
.fot .hogerdel { margin-left:auto; display:flex; align-items:center; gap:4px }
.ring { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--dm) }
.ring svg { display:block; transform:rotate(-90deg) }
.ring .spar { stroke:var(--ln2) }
.ring .fyllning { stroke:currentColor; transition:stroke-dasharray .4s ease }
.ring.varm { color:var(--am) }
.ring.het { color:var(--rod) }
.effortmeny { left:0; bottom:26px }

/* ── terminalen ──────────────────────────────────────────────────────── */
.tacke { position:fixed; inset:0; z-index:80; background:var(--tacke); display:flex; align-items:center; justify-content:center; padding:20px }
.terminal {
  width:100%; max-width:980px; min-width:0; max-height:88vh; display:flex; flex-direction:column; gap:10px; padding:14px;
  background:var(--sf); border:1px solid var(--ln2); border-radius:16px; box-shadow:var(--skugga);
}
.terminal .huvud { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--dm) }
.terminal .huvud b { color:var(--tx); font-weight:500 }
.terminal pre {
  flex:1; min-height:200px; min-width:0; margin:0; overflow:auto; padding:12px; border-radius:10px; background:var(--rd);
  border:1px solid var(--ln); font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12px; line-height:1.45; white-space:pre;
}
.terminal .knappar { display:flex; flex-wrap:wrap; gap:6px }
.terminal .knappar button { padding:6px 12px; border:1px solid var(--ln2); border-radius:9px; background:transparent; font-size:13px }
.terminal .knappar button:hover { background:var(--rs) }
.terminal .knappar .hoger { margin-left:auto }
.terminal .anvisning { font-size:12px; color:var(--ft) }

.notis {
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90; max-width:min(560px,92vw);
  padding:10px 16px; border-radius:12px; background:var(--sf); border:1px solid var(--ln2); box-shadow:var(--skugga); font-size:13.5px;
}
.notis.fel { border-color:var(--rod) }

/* ── mobilen ─────────────────────────────────────────────────────────── */
.mobilmeny, .sidoskarm { display:none }
@media (max-width: 820px) {
  .sido { position:absolute; inset:0 auto 0 0; z-index:60; box-shadow:var(--skugga); transform:translateX(-105%); transition:transform .18s ease }
  .app.panel-oppen .sido { transform:none }
  .app.panel-oppen .sidoskarm { display:block; position:absolute; inset:0; z-index:55; background:var(--tacke) }
  .mobilmeny {
    display:grid; place-items:center; position:absolute; top:10px; left:12px; z-index:50; width:36px; height:36px;
    border:1px solid var(--ln2); border-radius:10px; background:var(--sf); color:var(--dm);
  }
  .mitten { padding:58px 16px 8px }
  .komponistrad { padding:8px 12px 12px }
  .tur.du .bubbla { max-width:90% }
}

/* ── inloggningen ────────────────────────────────────────────────────── */
.inloggning { min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:24px }
.inloggning form { width:min(360px,100%); display:flex; flex-direction:column; gap:14px; text-align:center }
.inloggning h1 { font-family:Newsreader,Georgia,serif; font-weight:400; font-size:38px; margin:0 0 4px; letter-spacing:-.015em }
.inloggning p { margin:0; color:var(--dm); font-size:14px }
.inloggning input {
  width:100%; height:46px; padding:0 16px; border-radius:999px; border:1px solid var(--ln2);
  background:var(--rs); outline:none; font-size:16px; text-align:center;
}
.inloggning input:focus { border-color:var(--tx) }
.inloggning input.kod { font-family:'IBM Plex Mono',monospace; letter-spacing:.3em; font-size:20px }
.inloggning button[type=submit] { height:44px; border:none; border-radius:999px; background:var(--tx); color:var(--bg); font-weight:500; font-size:15px }
.inloggning button[type=submit]:disabled { opacity:.5 }
.inloggning .lank { border:none; background:none; color:var(--ft); font-size:13px; text-decoration:underline }
.inloggning .fel { color:var(--rod); font-size:13.5px; min-height:1.2em }