/* transapp — mörkt gränssnitt i samma språk som stackens övriga appar. */

:root {
  --bak: #14161a;
  --panel: #1b1e24;
  --panel2: #22262e;
  --linje: #2e333d;
  --text: #e6e8ec;
  --dampad: #939aa6;
  --accent: #7fb2ff;
  --ok: #6ede8a;
  --varn: #ffcc66;
  --fel: #ff8a80;

  /* Talarfärger. Åtta stycken, valda för att gå isär även för den som har
     svårt att skilja rött från grönt — ljushet och ton skiljer sig, inte
     bara kulören. Namnet står alltid utskrivet också; färgen är en genväg,
     aldrig den enda bäraren av vem som talar. */
  --t0: #7fb2ff;
  --t1: #ffb861;
  --t2: #6ede8a;
  --t3: #d99bff;
  --t4: #63d8d2;
  --t5: #ff9aa2;
  --t6: #c9d36b;
  --t7: #9aa8ff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bak);
  color: var(--text);
  font: 15px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

main { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 26px; margin: 8px 0 12px; }
h2 { font-size: 19px; margin: 32px 0 10px; border-bottom: 1px solid var(--linje); padding-bottom: 6px; }

code { background: var(--panel2); padding: 1px 5px; border-radius: 4px; font-size: 13px; }
.dampad { color: var(--dampad); }
.liten { font-size: 13px; }
.hoger { text-align: right; }

/* --- topp och botten --- */

.topp {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--linje);
}
.marke { font-weight: 700; letter-spacing: .04em; color: var(--text); font-size: 17px; }
.topp nav { display: flex; gap: 16px; }
.topp nav a { color: var(--dampad); }
.utform { margin-left: auto; }
.lank { background: none; border: none; color: var(--dampad); cursor: pointer; font: inherit; padding: 0; }
.lank:hover { color: var(--text); }

footer {
  max-width: 1100px; margin: 0 auto; padding: 20px; color: var(--dampad);
  font-size: 13px; border-top: 1px solid var(--linje);
}

/* --- knappar och formulär --- */

button, .knapp {
  background: var(--accent); color: #10131a; border: none; border-radius: 7px;
  padding: 8px 14px; font: inherit; font-weight: 600; cursor: pointer;
  display: inline-block;
}
button:hover, .knapp:hover { filter: brightness(1.1); text-decoration: none; }
.andra {
  background: var(--panel2); color: var(--text); border: 1px solid var(--linje);
  font-weight: 500;
}
.farlig { border-color: #5a2d2d; color: var(--fel); }
.rad { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.radrubrik { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.radrubrik h1 { margin-bottom: 0; }

select, input[type=text], input[type=search], input[type=password] {
  background: var(--bak); border: 1px solid var(--linje); color: var(--text);
  padding: 7px 10px; border-radius: 7px; font: inherit;
}
.kryss { display: inline-flex; align-items: center; gap: 7px; }

.flash { list-style: none; padding: 0; margin: 0 0 16px; }
.flash li { padding: 9px 13px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--linje); }
.flash .fel { border-color: #5a2d2d; color: var(--fel); }

.ruta {
  background: var(--panel); border: 1px solid var(--linje); border-radius: 10px;
  padding: 14px 18px; margin: 16px 0;
}
.ruta.varn { border-color: #5c4a1f; }
.ruta.fel { border-color: #5a2d2d; }
.ruta p { margin: 0 0 8px; }
.ruta p:last-child { margin-bottom: 0; }

/* --- inloggning --- */

.inloggning { max-width: 380px; margin: 12vh auto; text-align: center; }
.inloggning form { display: flex; gap: 8px; margin-top: 18px; }
.inloggning input { flex: 1; }
.inloggning .fel { color: var(--fel); }
.gemensam-inloggning form { flex-direction: column; text-align: left; }
.gemensam-inloggning input { width: 100%; min-width: 0; }
.gemensam-inloggning button { margin-top: 10px; }

/* --- uppladdning --- */

.ladda { margin: 18px 0 8px; }
.slappyta {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 38px 20px; text-align: center; cursor: pointer;
  background: var(--panel); border: 2px dashed var(--linje); border-radius: 12px;
}
.slappyta:hover, .slappyta.over { border-color: var(--accent); background: var(--panel2); }
.slappyta input[type=file] { display: none; }
.slapptext { font-weight: 600; }
.valda { color: var(--accent); font-size: 13px; }

.installningar { display: flex; gap: 14px; align-items: end; flex-wrap: wrap; margin-top: 14px; }
.installningar label { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--dampad); min-width: 0; max-width: 100%; }
.installningar select { max-width: 100%; }
.installningar label.kryss { flex-direction: row; align-items: center; color: var(--text); font-size: 15px; }

/* --- fillistan --- */

table.lista { width: 100%; border-collapse: collapse; }
table.lista th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--dampad); font-weight: 600; padding: 6px 10px; border-bottom: 1px solid var(--linje);
}
table.lista td { padding: 9px 10px; border-bottom: 1px solid var(--linje); vertical-align: top; }
.marklapp {
  font-size: 11px; color: var(--dampad); border: 1px solid var(--linje);
  border-radius: 5px; padding: 1px 5px; margin-left: 6px;
}
.lage { font-size: 13px; }
.lage.ok { color: var(--ok); }
.lage.fel { color: var(--fel); }
.lage.kor { color: var(--varn); }

/* --- pågående arbete --- */

/* En stapel, en regel. Både uppladdningen, kön och jobbsidan använder samma
   markup — annars börjar de tre se olika ut vid första ändringen. */
.stapel {
  height: 8px; background: var(--panel2); border-radius: 5px; overflow: hidden; margin: 10px 0;
}
.stapel .fyll { height: 100%; background: var(--accent); transition: width .4s ease; }
.stapel.smal { height: 4px; margin: 6px 0 0; max-width: 160px; }

.uppladdning { margin-top: 14px; }
.uppladdning p { margin: 0; }

/* --- köpanelen --- */

.ruta.ko { margin: 18px 0 6px; }
.korad { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.konu { flex: 1 1 320px; min-width: 0; }
.konu strong { overflow-wrap: anywhere; }
.kosumma { flex: 0 0 auto; text-align: right; min-width: 170px; }
.kosumma p { margin: 0; }
.stort { font-size: 30px; font-weight: 700; line-height: 1.1; }

td.cell-lage { min-width: 170px; }
.inline { display: inline; }
button.liten, .knapp.liten { padding: 4px 9px; font-size: 12px; }

/* --- spelare och verktyg --- */

.spelarrad { margin: 18px 0 10px; }
.spelarrad audio { width: 100%; }
.spelarrad video { width: 100%; max-height: 55vh; background: #000; border-radius: 10px; }

.verktyg {
  display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  align-items: center; margin: 12px 0 6px;
}
.verktyg .grupp { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.verktyg .knapp { padding: 5px 11px; font-size: 13px; }

/* --- talare --- */

.talarpanel {
  background: var(--panel); border: 1px solid var(--linje); border-radius: 10px;
  padding: 12px 18px; margin: 14px 0;
}
.talarpanel summary { cursor: pointer; font-weight: 600; }
.namnform { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.talarnamn { display: flex; align-items: center; gap: 7px; }
.talarnamn .prick { width: 11px; height: 11px; border-radius: 50%; background: var(--farg, var(--dampad)); }
.talarnamn input { width: 150px; }

.talare-0 { --farg: var(--t0); }
.talare-1 { --farg: var(--t1); }
.talare-2 { --farg: var(--t2); }
.talare-3 { --farg: var(--t3); }
.talare-4 { --farg: var(--t4); }
.talare-5 { --farg: var(--t5); }
.talare-6 { --farg: var(--t6); }
.talare-7 { --farg: var(--t7); }

/* --- utskriften --- */

.utskrift { margin-top: 10px; }
.replik {
  display: grid; grid-template-columns: 62px 1fr; gap: 4px 12px;
  padding: 9px 12px 9px 10px; border-left: 3px solid transparent; border-radius: 0 8px 8px 0;
}
.replik.talare-0, .replik.talare-1, .replik.talare-2, .replik.talare-3,
.replik.talare-4, .replik.talare-5, .replik.talare-6, .replik.talare-7 {
  border-left-color: var(--farg);
}
.replik:hover { background: var(--panel); }
.replik.nu { background: var(--panel2); }
.replik .tid {
  background: none; border: none; color: var(--dampad); font: inherit; font-size: 12px;
  font-variant-numeric: tabular-nums; padding: 2px 0; text-align: left; cursor: pointer;
}
.replik .tid:hover { color: var(--accent); }
.replik .vem { font-size: 13px; font-weight: 600; color: var(--farg, var(--dampad)); }
.replik .text { margin: 0; grid-column: 2; }
.replik .tid { grid-row: 1 / span 2; }
.replik.dold { display: none; }
.replik mark { background: #4a4322; color: var(--text); border-radius: 3px; }

/* --- dikteringssidan --- */

.tillaggsrad { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 8px; }
.knapp.stor { padding: 11px 20px; font-size: 15px; }
kbd {
  background: var(--panel2); border: 1px solid var(--linje); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; font: inherit; font-size: 13px;
}
ol.steg { padding-left: 22px; }
ol.steg li { margin-bottom: 10px; }
ul.punkter { padding-left: 20px; }
ul.punkter li { margin-bottom: 8px; }
ul.punkter strong { color: var(--text); }
.nyckelrad { margin-bottom: 6px; }
.nyckelrad input { flex: 1; min-width: 260px; font-family: ui-monospace, monospace; font-size: 13px; }