/* Medvetet mörkt: appen används i soffor, på bussar och framför kameror. */
:root {
  --scen: #1D1B18;
  --panel: #26231F;
  --linje: #3B3833;
  --text: #EDEAE3;
  --dov: #A39E93;
  --rida: #E08691;
  --rida-djup: #96313C;
  --markering: #D9A84E;
  --ok: #7FB58B;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--scen);
  color: var(--text);
  font-family: system-ui, "Segoe UI", sans-serif;
  font-size: 1.05rem;
  line-height: 1.55;
}
[hidden] { display: none !important; }
main { max-width: 42rem; margin: 0 auto; padding: 1.2rem 1.1rem 3rem; }
h1 { font-size: 1.9rem; margin: .4rem 0 .2rem; letter-spacing: .02em; }
.ingress { color: var(--dov); margin: 0 0 1.4rem; }
label { display: block; font-weight: 600; margin: 0 0 .4rem; }
textarea {
  width: 100%; min-height: 11rem;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--linje); border-radius: 8px;
  padding: .8rem; font-family: "Courier New", Courier, monospace; font-size: .95rem;
  resize: vertical;
}
textarea:focus, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 2px solid var(--rida); outline-offset: 2px;
}
button {
  font: inherit; cursor: pointer; border-radius: 8px;
  border: 1px solid var(--linje); background: var(--panel); color: var(--text);
  padding: .65rem 1rem; min-height: 44px;
}
button.primar {
  background: var(--rida-djup); border-color: var(--rida-djup);
  color: #FFF; font-weight: 700; width: 100%; padding: .9rem; font-size: 1.08rem;
}
button.primar:disabled { opacity: .45; cursor: default; }
button.lank { border: none; background: none; color: var(--rida); text-decoration: underline; padding: .4rem .2rem; min-height: 34px; }
.rad { margin: 1rem 0; }
.finstilt { color: var(--dov); font-size: .88rem; }
details { margin-top: 1.2rem; color: var(--dov); font-size: .9rem; }
summary { cursor: pointer; color: var(--text); }
.besked {
  background: var(--panel); border: 1px solid var(--linje);
  border-left: 3px solid var(--markering);
  border-radius: 0 8px 8px 0; padding: .8rem 1rem; margin: 1rem 0;
}

/* Vy 2: rollkvittot */
.kvitto { color: var(--dov); margin: .2rem 0 1rem; }
.roller { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .6rem; }
.roller li { margin: 0; }
.rollval {
  width: 100%; text-align: left; display: grid; gap: .15rem;
  padding: .7rem .9rem; border-radius: 10px;
}
.rollval[aria-pressed="true"] { border-color: var(--rida); background: #2E2320; }
.rollrad { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.rollnamn { font-weight: 700; font-family: "Courier New", Courier, monospace; }
.rollantal { color: var(--dov); font-size: .88rem; white-space: nowrap; }
.rollex { color: var(--dov); font-size: .88rem; font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.osaker-flagga { color: var(--markering); font-weight: 700; }
.verktyg { display: flex; flex-wrap: wrap; gap: .5rem .8rem; margin: .6rem 0 1.2rem; }
select {
  font: inherit; background: var(--panel); color: var(--text);
  border: 1px solid var(--linje); border-radius: 8px; padding: .55rem .6rem; min-height: 44px;
  max-width: 100%;
}
.valrad { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0; }
.kryss { display: flex; gap: .55rem; align-items: flex-start; margin: 1rem 0; }
.kryss input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; }

/* Vy 3: pluggläget */
#vy-plugg { display: flex; flex-direction: column; min-height: 100dvh; }
.topplist {
  display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; padding: .55rem .8rem; border-bottom: 1px solid var(--linje);
  position: sticky; top: 0; background: var(--scen); z-index: 2;
}
.topplist .steg { color: var(--dov); font-variant-numeric: tabular-nums; }
#scenyta {
  flex: 1; width: 100%; text-align: left; border: none; background: none;
  color: inherit; font: inherit; padding: 1rem 1.1rem 4.5rem; cursor: pointer;
  display: block; border-radius: 0;
}
.historik { color: var(--dov); }
.replik { margin: 0 0 1.05rem; max-width: 40rem; }
.replik .vem {
  font-family: "Courier New", Courier, monospace; font-weight: 700;
  font-size: .85rem; letter-spacing: .08em; display: block; margin-bottom: .1rem;
}
.replik .vad { white-space: pre-wrap; font-family: "Courier New", Courier, monospace; }
.replik.aktuell .vad { font-size: 1.18rem; }
.replik.min .vem::after { content: "  · din replik"; color: var(--rida); letter-spacing: 0; font-weight: 400; }
.maskerad { color: var(--rida); letter-spacing: .04em; }
.visaknapp { margin-left: .6rem; vertical-align: baseline; padding: .15rem .6rem; min-height: 34px; font-size: .85rem; }
.tips {
  position: fixed; left: 0; right: 0; bottom: .8rem; text-align: center;
  color: var(--dov); font-size: .9rem; pointer-events: none;
  transition: opacity .6s; text-shadow: 0 1px 4px var(--scen);
}
.rostband { padding: .45rem .8rem; font-size: .85rem; color: var(--dov); border-bottom: 1px solid var(--linje); }
.rostband.varning { color: var(--markering); }
.klartruta { text-align: center; padding: 3rem 1rem; }
.klartruta h2 { font-size: 1.6rem; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.rubrik2 { font-size: 1.4rem; }
.tajt { margin: 0; }
.vikt400 { font-weight: 400; }

.radio { color: var(--rida); font-size: 1.05em; }
.visaknapp { min-height: 44px; min-width: 64px; padding: .3rem .8rem; }
.replik.klickbar { cursor: pointer; }
.sidfot a { color: var(--rida); }
.rattning { margin: .2rem 0 1rem; color: var(--dov); font-size: .95rem; }
.rattning summary { cursor: pointer; color: var(--text); min-height: 44px; display: flex; align-items: center; }
.rattning .verktyg { margin-top: .6rem; }

/* tom felruta och tomt besked tar ingen plats: aria-live utan hidden-attribut */
#manusfel:empty, #ihopstatus:empty { display: none; }
.faq { margin-top: 1.6rem; }
.faq h2 { font-size: 1.05rem; margin: 0 0 .2rem; color: var(--dov); font-weight: 600; }
.faq details, .rattning { border-bottom: 1px solid var(--linje); }
.faq summary, .rattning summary {
  cursor: pointer; padding: .7rem 0; min-height: 44px;
  color: var(--text);
}
.faq details p { color: var(--dov); font-size: .95rem; }