/* Nightstills – nattlig tidningsstil. Varm svart botten, benvitt papper i texten,
   ett enda mässingsguld som accent. Platta ytor och hårlinjer i stället för
   skuggor och toning. Barlow Condensed i rubriker, IBM Plex Sans i text och
   IBM Plex Mono i siffror. Alla typsnitt ligger i /fonts. */

@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  --botten: #0d0c0a;
  --yta: #131210;
  --yta-2: #181714;
  --yta-3: #1f1d19;
  --kant: rgba(233, 226, 208, .11);
  --kant-2: rgba(233, 226, 208, .22);
  --text: #ebe6d8;
  --text-2: #a8a290;
  --text-3: #766f60;
  --accent: #cfa349;
  --accent-2: #e3c07a;
  --accent-mjuk: rgba(207, 163, 73, .11);
  --accent-glod: rgba(207, 163, 73, .45);
  --pa-accent: #15110a;
  --gron: #86b07f;
  --rod: #d4594c;
  --rod-ljus: #e8897d;
  --bla: #86a3bd;
  --r: 3px;
  --r-s: 2px;
  --r-xs: 2px;
  --display: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --brod: 'IBM Plex Sans', system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}


* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: var(--kant-2) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--kant-2); border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; }
html { scrollbar-gutter: stable; }

body {
  margin: 0; color: var(--text); background: var(--botten);
  font: 15px/1.55 var(--brod);
  -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
::selection { background: var(--accent); color: var(--pa-accent); }

h1, h2, h3 { font-family: var(--display); font-weight: 700; margin: 0; letter-spacing: .01em; text-transform: uppercase; line-height: 1.05; }
.doldt { display: none !important; }
.dampat { color: var(--text-2); }
.fel { color: var(--rod-ljus); min-height: 20px; margin: 10px 0 0; font-size: 13.5px; }

/* Etiketter är vanlig liten text, siffror står i mono */
.stat span, .nyckel span, .kassa span, .matare-etikett, .maskin-niva, .plats-etikett,
.marknadsland, .marknadsmax, .hero-etikett, .hero-post span { font-size: 12px; color: var(--text-3); }
.kassa b, .nyckel b, .stat b, .rad-tal, .plats-mangd, .plats-tid, .marknadspris,
.matvarden b, .kvalitet-ord, .marknad-tal, .hero-tal {
  font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

/* ---- inloggning ---- */
.grind { min-height: 100vh; display: grid; align-content: center; gap: 34px; padding: 40px 22px; width: min(460px, 100%); margin: 0 auto; }
.grind-marke { display: none; }
.grind-titel { font-size: clamp(54px, 15vw, 84px); font-weight: 700; line-height: .9; letter-spacing: .005em; color: var(--text); }
.grind-titel::after { content: ''; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 20px; }
.grind-slogan { margin: 18px 0 0; font: 600 18px var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.grind-under { color: var(--text-2); margin: 10px 0 0; font-size: 14.5px; }
.grind-ruta { background: var(--yta); border: 1px solid var(--kant-2); border-radius: var(--r); padding: 26px 24px; }
.grind-text { display: none; }
.grind-punkter { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--kant); display: grid; gap: 11px; }
.grind-punkter li { display: flex; align-items: baseline; gap: 14px; color: var(--text-2); font-size: 13.5px; }
.grind-punkter b { flex: 0 0 auto; color: var(--accent); font: 500 13px var(--mono); }
.vaxel { display: flex; gap: 0; border-bottom: 1px solid var(--kant); margin-bottom: 22px; }
.vaxel-knapp { flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent; margin: 0 22px -1px 0; color: var(--text-3); font: 600 14px var(--brod); padding: 8px 0; cursor: pointer; white-space: nowrap; }
.vaxel-knapp:hover { color: var(--text-2); }
.vaxel-knapp.aktiv { color: var(--text); border-bottom-color: var(--accent); }
.falt { display: block; margin-bottom: 16px; }
.falt span { display: block; font: 500 12.5px var(--brod); color: var(--text-2); margin-bottom: 6px; }

input, select {
  width: 100%; padding: 10px 12px; background: var(--botten); color: var(--text);
  border: 1px solid var(--kant-2); border-radius: var(--r-s); font: 15px var(--brod);
  transition: border-color .12s ease;
}
input::placeholder { color: var(--text-3); }
input:focus, select:focus { border-color: var(--accent); outline: none; }
input:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.glomt-rad { margin: 14px 0 0; }
.lankknapp { background: none; border: 0; color: var(--text-2); font: 500 13px var(--brod); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: 0; }
.lankknapp:hover { color: var(--accent); }

/* ---- topp ---- */
.masthuvud { position: sticky; top: 0; z-index: 10; padding: 0 28px; background: var(--botten); border-bottom: 1px solid var(--kant-2); }
.masthuvud-inner { max-width: 1260px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0 12px; }
.masthuvud-namn { font: 700 28px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.masthuvud-namn::after { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--accent); margin-left: 8px; vertical-align: 2px; }
.masthuvud-hoger { display: flex; align-items: center; gap: 14px; font-size: 13.5px; }
.spelarnamn { font-weight: 600; }
.online { color: var(--text-3); font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.online::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gron); }

.postlada { position: relative; display: grid; place-items: center; width: 34px; height: 32px; background: none; border: 1px solid var(--kant-2); border-radius: var(--r-xs); color: var(--text-2); cursor: pointer; padding: 0; }
.postlada svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }
.postlada:hover { color: var(--text); border-color: var(--text-3); }
.postlada.har-post { border-color: var(--accent); color: var(--accent); }
.postantal { position: absolute; top: -7px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; background: var(--rod); color: #fff; font: 500 10.5px var(--mono); }
.postantal:empty { display: none; }

.remsa { max-width: 1260px; margin: 0 auto; display: flex; align-items: stretch; gap: 0; padding: 0 0 12px; flex-wrap: wrap; }
.kassa { padding: 0 24px 0 0; margin-right: 24px; border-right: 1px solid var(--kant-2); }
.kassa b { display: block; font-size: 26px; font-weight: 500; line-height: 1.1; color: var(--accent); }
.kassa span { display: block; margin-top: 2px; }
.nyckeltal { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; align-items: center; }
.nyckeltal::-webkit-scrollbar { display: none; }
.nyckel { flex: 0 0 auto; padding: 2px 20px; border-left: 1px solid var(--kant); white-space: nowrap; }
.nyckel:first-child { border-left: 0; padding-left: 0; }
.nyckel b { display: block; font-size: 15px; font-weight: 500; }
.nyckel span { display: block; }

.matare { max-width: 1260px; margin: 0 auto; display: flex; align-items: center; gap: 22px; padding-bottom: 13px; }
.matare-post { flex: 1; }
.matare-etikett { display: flex; justify-content: space-between; }
.matare-etikett b { color: var(--text-2); font: 500 12px var(--mono); }
.stapel { height: 4px; background: var(--kant); margin-top: 6px; overflow: hidden; }
.stapel i { display: block; height: 100%; background: var(--accent); transition: width .3s ease; }
.stapel.hp i { background: var(--gron); }

.levelring { position: relative; flex: 0 0 44px; width: 44px; height: 44px; }
.levelring svg { width: 44px; height: 44px; transform: rotate(-90deg); }
.levelring circle { fill: none; stroke-width: 3; }
.levelring circle.ring-bas { stroke: var(--kant-2); }
.levelring circle.ring-fyll { stroke: var(--accent); stroke-linecap: butt; transition: stroke-dashoffset .35s ease; }
.levelring span { position: absolute; inset: 0; display: grid; place-items: center; font: 500 14px var(--mono); }

.genvagar { max-width: 1260px; margin: 0 auto; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 12px; }
.genvagar::-webkit-scrollbar { display: none; }
.genvagar:empty { display: none; }
.genvag { flex: 0 0 auto; background: none; border: 1px solid var(--kant-2); border-radius: var(--r-xs); color: var(--text-2); font: 500 12.5px var(--brod); padding: 6px 12px; cursor: pointer; }
.genvag:hover { color: var(--text); border-color: var(--text-3); }
.genvag.aktiv { background: var(--accent); border-color: var(--accent); color: var(--pa-accent); }

.notisrad { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 1260px; margin: 0 auto 12px; background: rgba(212,89,76,.1); border: 0; border-left: 3px solid var(--rod); color: var(--text); font: 500 13.5px var(--brod); text-align: left; padding: 10px 14px; cursor: pointer; }
.notisprick { flex: 0 0 auto; min-width: 22px; height: 20px; display: grid; place-items: center; background: var(--rod); color: #fff; font: 500 11.5px var(--mono); padding: 0 6px; }

/* ---- skal ---- */
.skal { max-width: 1260px; margin: 0 auto; padding: 28px 28px 110px; display: flex; gap: 40px; align-items: flex-start; }
.nav { width: 188px; flex: 0 0 188px; align-self: start; position: sticky; top: var(--topphojd, 132px); display: flex; flex-direction: column; gap: 0; padding-top: 28px; margin-top: -28px; max-height: calc(100vh - var(--topphojd, 132px)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid var(--kant); border-radius: 0; color: var(--text-2); font: 500 14px var(--brod); padding: 8px 12px; cursor: pointer; transition: color .12s ease, border-color .12s ease; }
.nav button svg { width: 17px; height: 17px; flex: 0 0 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; opacity: .75; }
.nav button span { flex: 1; }
.nav button:hover { color: var(--text); border-left-color: var(--text-3); }
.nav button.aktiv { color: var(--text); border-left-color: var(--accent); font-weight: 600; }
.nav button.aktiv svg { stroke: var(--accent); opacity: 1; }

.marke { font: 500 11px var(--mono); color: var(--text-3); border: 1px solid var(--kant-2); padding: 0 6px; line-height: 17px; }
.marke-klar { color: var(--gron); border-color: var(--gron); }
.marke-prick { padding: 0; width: 7px; height: 7px; background: var(--accent); border: 0; }
.nav button.aktiv .marke { color: var(--accent); border-color: var(--accent); }

.huvud { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; align-items: start; }
.spalt { min-width: 0; }
.spalt-sido { position: sticky; top: var(--topphojd, 132px); align-self: start; padding-top: 28px; margin-top: -28px; }
@media (max-width: 1240px) { .huvud { grid-template-columns: minmax(0, 1fr); } .spalt-sido { position: static; } }

/* ---- sidor och paneler ---- */
.ark { background: none; border: 0; margin-bottom: 30px; }
.ark-topp { padding: 0 0 14px; border-bottom: 2px solid var(--text); margin-bottom: 0; }
.ark-topp h1 { font-size: 40px; display: flex; align-items: center; }
.ark-topp p { margin: 10px 0 0; color: var(--text-2); font-size: 14.5px; max-width: 64ch; }
.ark-topp p:empty { display: none; }
.ark-kropp { padding: 22px 0 0; }
.spalt-sido .ark { margin-bottom: 26px; }
.spalt-sido .ark-topp { border-bottom: 1px solid var(--kant-2); padding-bottom: 8px; }
.spalt-sido .ark-topp h1 { font-size: 19px; letter-spacing: .1em; color: var(--text-2); }
.sidikon { display: none; }

.varning { margin: 0 0 18px; padding: 12px 15px; background: rgba(212,89,76,.09); border-left: 3px solid var(--rod); font-size: 14px; }
.kontaktvarning { margin: 0 0 16px; padding: 11px 15px; font-size: 13.5px; background: rgba(212,89,76,.09); border-left: 3px solid var(--rod); color: var(--rod-ljus); }

.underflikar { display: flex; gap: 26px; overflow-x: auto; scrollbar-width: none; padding: 0; margin: 0; border-bottom: 1px solid var(--kant); position: sticky; top: var(--topphojd, 132px); z-index: 3; background: var(--botten); }
.underflikar::-webkit-scrollbar { display: none; }
.underflikar:empty { display: none; }
.underflik { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 0; color: var(--text-3); font: 600 14px var(--brod); padding: 12px 0; cursor: pointer; }
.underflik:hover { color: var(--text-2); }
.underflik.aktiv { color: var(--text); border-bottom-color: var(--accent); }

/* ---- översikt ---- */
.hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; padding: 4px 0 26px; border-bottom: 1px solid var(--kant); margin-bottom: 26px; }
@media (max-width: 700px) { .hero { grid-template-columns: 1fr; gap: 22px; } }
.hero-tal { font-size: 52px; font-weight: 500; line-height: 1; margin-top: 8px; color: var(--accent); }
.hero-tal small { font-size: 18px; color: var(--text-2); margin-left: 6px; }
.hero-under { color: var(--text-2); font-size: 14px; margin-top: 12px; max-width: 46ch; }
.hero-hoger { display: grid; align-content: center; }
.hero-post { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--kant); }
.hero-post:last-child { border-bottom: 0; }
.hero-post b { font: 500 16px var(--mono); }

/* ---- rader ---- */
.rad { display: flex; align-items: center; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--kant); }
.rad:last-child { border-bottom: 0; }
.rad-text { flex: 1; min-width: 0; }
.rad-namn { font-size: 15px; font-weight: 600; }
.rad-under { color: var(--text-2); font-size: 13px; margin-top: 2px; }
.rad-tal { font-size: 15px; font-weight: 500; color: var(--accent); white-space: nowrap; }
.rad-knappar { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.rad.last { opacity: .38; }
.rad.last .rad-tal { color: var(--text-3); }

/* ---- avatarer ---- */
.avatar { position: relative; flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--r-xs); display: grid; place-items: center; overflow: hidden; }
.avatar svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; }
.avatar-bok { position: relative; z-index: 1; font: 700 18px/1 var(--display); color: #fff; }
.avatar-liten { width: 28px; height: 28px; }
.avatar-liten .avatar-bok { font-size: 14px; }
.avatar-stor { width: 68px; height: 68px; }
.avatar-stor .avatar-bok { font-size: 32px; }
.avatar-plats { background: var(--yta-3) !important; border: 1px solid var(--kant-2); }
.avatar-plats svg { display: none; }
.avatar-plats .avatar-bok { color: var(--text-2); font: 500 13px var(--mono); }
.plats-1 { background: var(--accent) !important; border-color: var(--accent); }
.plats-1 .avatar-bok { color: var(--pa-accent); }
.plats-2 { background: #b9b5a8 !important; border-color: #b9b5a8; }
.plats-2 .avatar-bok { color: #1b1914; }
.plats-3 { background: #a87344 !important; border-color: #a87344; }
.plats-3 .avatar-bok { color: #1d1308; }
.online-nu::after { content: ''; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; background: var(--gron); border: 2px solid var(--botten); }

.profilhuvud, .minsida-huvud { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--kant); }
.profilnamn { font: 700 34px var(--display); letter-spacing: .01em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }

/* ---- siffergrupper: en linjerad tabell i stället för kort ---- */
.rutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin-bottom: 26px; border-top: 1px solid var(--kant-2); border-left: 1px solid var(--kant); }
.rutnat-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 620px) { .rutnat-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { padding: 14px 16px; border-right: 1px solid var(--kant); border-bottom: 1px solid var(--kant); }
.stat b { display: block; font-size: 20px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
.stat span { display: block; margin-top: 3px; }

.brickor { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.bricka { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r); padding: 18px; }
.bricka-topp { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.bricka h3 { font-size: 21px; }
.bricka p { margin: 8px 0 12px; color: var(--text-2); font-size: 13.5px; }
.bricka.egen { border-color: var(--accent); }
.tagg { font: 500 11.5px var(--mono); color: var(--accent); border: 1px solid var(--accent-glod); padding: 1px 7px; white-space: nowrap; }

.matvarden { display: flex; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--kant); }
.matvarden div { flex: 1; }
.matvarden b { display: block; font-size: 15px; font-weight: 500; }
.matvarden span { display: block; font-size: 11.5px; color: var(--text-3); margin-top: 1px; }
.minstapel { height: 3px; background: var(--kant); margin-top: 7px; overflow: hidden; }
.minstapel i { display: block; height: 100%; background: var(--accent); }
.minstapel i.fara { background: var(--rod); }
.bricka .knapp-bred { margin-top: 16px; }
.bricka.last { opacity: .42; }
.omradesbricka .tagg { color: var(--text-2); border-color: var(--kant-2); }

.brodtext { margin: 0 0 18px; color: var(--text-2); max-width: 64ch; font-size: 14.5px; }
.tomt { color: var(--text-2); padding: 16px 0; font-size: 14px; border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant); }
.tomt-ikon { display: flex; align-items: center; gap: 14px; }
.tomtikon { flex: 0 0 auto; display: grid; place-items: center; }
.tomtikon svg { width: 18px; height: 18px; fill: none; stroke: var(--text-3); stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; }

.avsnitt { display: flex; align-items: baseline; gap: 14px; margin: 34px 0 12px; font: 700 22px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--text); }
.avsnitt::after { content: ''; flex: 1; height: 1px; background: var(--kant-2); transform: translateY(-4px); }
.avsnitt:first-child { margin-top: 0; }

/* ---- satsplatser och maskiner ---- */
.platser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
@media (max-width: 560px) { .platser { grid-template-columns: 1fr; } }
.plats { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r); padding: 16px; min-height: 112px; display: flex; flex-direction: column; justify-content: center; }
.plats-igang { border-color: var(--kant-2); }
.plats-klar { border-color: var(--gron); }
.plats-tom { color: var(--text-3); font: 500 13px var(--brod); text-align: center; }
.plats-mangd { font-size: 28px; font-weight: 500; line-height: 1; }
.plats-etikett { margin-top: 5px; }
.plats-tid { font-size: 14px; margin-top: 10px; color: var(--text-2); }
.plats-klar .plats-tid { color: var(--gron); }
.plats .stapel { margin-top: 10px; }
.plats-klarmarke { margin-top: 10px; font: 600 12px var(--brod); color: var(--gron); border: 1px solid var(--gron); padding: 4px; text-align: center; }

.maskin { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r); padding: 20px; margin-bottom: 18px; }
.maskin-redo { border-color: var(--kant-2); }
.maskin-topp { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.maskin-text { min-width: 0; }
.maskin-namn { font: 700 26px var(--display); letter-spacing: .01em; text-transform: uppercase; margin-top: 4px; }
.maskin-spec { color: var(--text-2); font-size: 14px; margin-top: 6px; }
.maskin-hinder { margin: 14px 0 0; color: var(--text-2); font-size: 13.5px; background: var(--botten); border-left: 2px solid var(--kant-2); padding: 10px 13px; }
.maskin .knapp-bred { margin-top: 16px; }
.maskin .stapel { margin-top: 16px; }

.status { flex: 0 0 auto; padding: 2px 9px; font: 500 12px var(--brod); border: 1px solid var(--kant-2); color: var(--text-2); }
.status-redo { color: var(--gron); border-color: var(--gron); }
.status-vantar { color: var(--accent); border-color: var(--accent-glod); }
.status-stopp { color: var(--rod-ljus); border-color: var(--rod); }

.kvalitet { margin-bottom: 18px; }
.kvalitet-rad { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.kvalitet-ord { font-size: 16px; }
.kvalitet .stapel { height: 7px; }

/* ---- knappar ---- */
.knapp { background: none; border: 1px solid var(--kant-2); border-radius: var(--r-xs); color: var(--text); font: 600 13px var(--brod); padding: 8px 15px; cursor: pointer; transition: background .12s ease, border-color .12s ease; }
.knapp:hover:not(:disabled) { background: var(--yta-3); border-color: var(--text-3); }
.knapp:active:not(:disabled) { transform: translateY(1px); }
.knapp:disabled { opacity: .35; cursor: not-allowed; }
.knapp-primar { background: var(--accent); border-color: var(--accent); color: var(--pa-accent); font-weight: 600; }
.knapp-primar:hover:not(:disabled) { background: var(--accent-2); border-color: var(--accent-2); }
.knapp-bred { width: 100%; padding: 11px; font-size: 14px; }
.knapp-fara { border-color: var(--rod); color: var(--rod-ljus); }
.knapp-fara:hover:not(:disabled) { background: rgba(212,89,76,.12); border-color: var(--rod); }
.knapp-spok { border-color: var(--kant); color: var(--text-2); padding: 6px 12px; font-size: 12.5px; font-weight: 500; }
.knapp-liten { padding: 6px 12px; font-size: 12.5px; }

.verktygsrad { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.verktygsrad input, .verktygsrad select { width: auto; flex: 1 1 140px; min-width: 120px; }

.segment { display: flex; gap: 0; border: 1px solid var(--kant-2); border-radius: var(--r-xs); margin-bottom: 18px; overflow: hidden; }
.segment button { flex: 1; background: none; border: 0; border-right: 1px solid var(--kant-2); color: var(--text-2); font: 500 13px var(--brod); padding: 9px 11px; cursor: pointer; line-height: 1.35; }
.segment button:last-child { border-right: 0; }
.segment button b { display: block; font: 600 13.5px var(--brod); }
.segment button:hover { color: var(--text); }
.segment button.aktiv { background: var(--text); color: var(--botten); }
.segment button.aktiv b { color: var(--botten); }

/* ---- val, kryss, rutnät ---- */
.valrutnat { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.valruta { text-align: left; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r); padding: 14px; cursor: pointer; color: var(--text); font: inherit; }
.valruta:hover { border-color: var(--text-3); }
.valruta.aktiv { border-color: var(--accent); }
.valruta b { display: block; font: 600 14px var(--brod); }
.valruta span { display: block; font-size: 12.5px; color: var(--text-2); margin-top: 4px; }
.valruta.liten { padding: 10px 12px; }
.valruta.liten b { font-size: 12.5px; }
.provkarta { display: flex; gap: 4px; margin-top: 11px; }
.provkarta i { width: 22px; height: 12px; border: 1px solid var(--kant-2); }
.kryss { display: flex; align-items: flex-start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--kant); cursor: pointer; }
.kryss input { width: 17px; height: 17px; flex: 0 0 17px; margin-top: 3px; accent-color: var(--accent); }
.kryss b { display: block; font-size: 14.5px; font-weight: 600; }
.kryss span { color: var(--text-2); font-size: 13px; }
.villkor { border-bottom: 0; padding: 2px 0 16px; }

.faltgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.faltruta { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r); padding: 12px 13px; }
.faltrad2 { display: flex; gap: 6px; margin-top: 8px; }
.faltrad2 input { min-width: 0; }
.faltrad2 .knapp { flex: 0 0 auto; padding: 7px 11px; }
.kopgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 620px) { .kopgrid { grid-template-columns: 1fr; } }
.kopruta { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r); padding: 14px; }
.kopetikett { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.kopetikett b { font-size: 14px; font-weight: 600; }
.kopetikett span { font: 500 12px var(--mono); color: var(--text-3); }
.kopsumma { margin-bottom: 12px; }

.checklista { display: grid; gap: 0; margin-bottom: 20px; border-top: 1px solid var(--kant); }
.checkrad { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--kant); font-size: 14.5px; }
.checkrad.klar { color: var(--text-3); }
.checkrad.klar span:nth-child(2) { text-decoration: line-through; text-decoration-color: var(--kant-2); }
.checkbox { width: 18px; height: 18px; flex: 0 0 18px; display: grid; place-items: center; border: 1px solid var(--text-3); font: 600 11px var(--mono); color: var(--botten); }
.checkrad.klar .checkbox { background: var(--gron); border-color: var(--gron); }
.checkrad span:nth-child(2) { flex: 1; }
.checkbelonig { font: 500 12px var(--mono); color: var(--accent); white-space: nowrap; }
.checkrad.klar .checkbelonig { color: var(--text-3); }

/* ---- högerspalt ---- */
.marknadsgraf { padding: 12px 0; border-bottom: 1px solid var(--kant); }
.marknadsgraf svg { width: 100%; height: 44px; display: block; }
.marknadsgraf polyline { fill: none; stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.marknadsgraf .etikett-liten { display: block; margin-top: 8px; font-size: 12px; color: var(--text-3); }
.marknadslista { padding: 0; max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }
.marknadsrad { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; background: none; border: 0; border-bottom: 1px solid var(--kant); color: var(--text); font: inherit; text-align: left; padding: 10px 0; cursor: pointer; }
.marknadsrad:hover .marknadsnamn { color: var(--accent); }
.marknadsrad.last { opacity: .36; cursor: default; }
.marknadsnamn { font-size: 14px; font-weight: 600; display: flex; flex-direction: column; }
.marknadspris { font-size: 14px; font-weight: 500; color: var(--accent); text-align: right; display: flex; flex-direction: column; white-space: nowrap; }
.las { color: var(--text-3); font: 12px var(--mono); }
.marknadsfot { padding: 12px 0 4px; color: var(--text-2); font-size: 12.5px; }
.riskprick { width: 6px; height: 6px; flex: 0 0 6px; margin-left: 10px; }
.risk-lag { background: var(--gron); }
.risk-mellan { background: var(--accent); }
.risk-hog { background: var(--rod); }
.marknad-pil { font-size: 12px; margin-left: 5px; }
.upp { color: var(--gron); }
.ner { color: var(--rod-ljus); }

.handelser { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.handelser li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 9px 0 9px 11px; border-bottom: 1px solid var(--kant); border-left: 2px solid transparent; font-size: 13px; color: var(--text-2); }
.handelser li.bra { border-left-color: var(--gron); color: var(--text); }
.handelser li.daligt { border-left-color: var(--rod); color: var(--rod-ljus); }
.nar { color: var(--text-3); font: 11px var(--mono); white-space: nowrap; }

.chatt { list-style: none; margin: 0 0 16px; padding: 0; max-height: 340px; overflow-y: auto; background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r); }
.chatt li { padding: 10px 14px; border-bottom: 1px solid var(--kant); font-size: 14px; }
.chatt li:last-child { border-bottom: 0; }
.chattrad { display: flex; align-items: flex-start; gap: 12px; }
.chattrad.egen { background: var(--accent-mjuk); }
.chatt-text { min-width: 0; }
.chatt-text b { font-size: 13px; font-weight: 600; color: var(--accent); }

.bilmarke { width: 3px; height: 38px; flex: 0 0 3px; }
.bil-skrot { background: var(--text-3); }
.bil-ok { background: var(--bla); }
.bil-fin { background: var(--accent); }
.bil-topp { background: var(--rod); }
.bilmarke.skadad { opacity: .4; }

/* ---- dialog och palett ---- */
.dialogbak, .palettbak { position: fixed; inset: 0; z-index: 60; background: rgba(5,4,3,.78); display: grid; place-items: center; padding: 20px; }
.palettbak { align-items: start; padding-top: 12vh; }
.dialog, .palett { width: min(450px, 100%); background: var(--yta-2); border: 1px solid var(--kant-2); border-radius: var(--r); padding: 24px; }
.dialog p { margin: 0 0 22px; font-size: 15px; }
.dialogknappar { display: flex; gap: 9px; justify-content: flex-end; }
.palett { padding: 12px; }
.palett input { margin-bottom: 8px; }
.palettlista { display: grid; gap: 0; }
.palettrad { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; background: none; border: 0; color: var(--text); font: inherit; text-align: left; padding: 10px 12px; cursor: pointer; }
.palettrad:hover { background: var(--accent-mjuk); }
.palettrad b { font-size: 14px; font-weight: 600; }
.palettrad span { font-size: 12px; color: var(--text-3); }

/* ---- grafer ---- */
.graf { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px; }
.graf-topp { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.graf-topp b { font: 500 16px var(--mono); }
.graf svg { width: 100%; height: 60px; display: block; }
.graf polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.graf-fot { display: flex; justify-content: space-between; margin-top: 8px; font: 500 11px var(--mono); color: var(--text-3); }

.emojirad { display: flex; flex-wrap: wrap; gap: 4px; }
.emoji { background: none; border: 1px solid var(--kant); border-radius: var(--r-xs); font-size: 16px; line-height: 1; padding: 6px 8px; cursor: pointer; }
.emoji:hover { background: var(--yta-3); border-color: var(--kant-2); }

.bildval { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.bildknapp { background: none; border: 2px solid transparent; border-radius: var(--r-xs); padding: 2px; cursor: pointer; line-height: 0; }
.bildknapp:hover { border-color: var(--kant-2); }
.bildknapp.aktiv { border-color: var(--accent); }
input[type="range"] { accent-color: var(--accent); padding: 0; }

/* ---- laddning ---- */
.skelett { display: grid; gap: 10px; }
.skelett-rutnat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 620px) { .skelett-rutnat { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.skelett-ruta, .skelett-rad { background: var(--yta); border: 1px solid var(--kant); border-radius: var(--r-xs); }
.skelett-ruta { height: 62px; }
.skelett-rad { height: 44px; }
.tona > * { animation: none; }

/* ---- toast ---- */
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 40; display: flex; align-items: center; gap: 12px; transform: translate(-50%, 200%); max-width: min(460px, 92vw); background: var(--yta-3); border: 1px solid var(--kant-2); border-left: 3px solid var(--accent); border-radius: var(--r-xs); padding: 13px 16px; font-size: 14px; transition: transform .2s ease; }
.toast.visa { transform: translate(-50%, 0); }
.toast.bra { border-left-color: var(--gron); }
.toast.daligt { border-left-color: var(--rod); }
.toast-ikon { flex: 0 0 auto; width: 20px; height: 20px; display: grid; place-items: center; background: var(--accent); color: var(--pa-accent); font: 600 11px var(--mono); }
.toast.bra .toast-ikon { background: var(--gron); }
.toast.daligt .toast-ikon { background: var(--rod); color: #fff; }
@media (prefers-reduced-motion: reduce) { .toast, .stapel i { transition: none; } }

/* ---- täthet ---- */

/* ---- statusrad: världshändelse och hetta ---- */
.lagesrad { display: grid; gap: 12px; margin-bottom: 22px; }
.handelse { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; padding: 11px 14px; border-left: 3px solid var(--accent); background: var(--accent-mjuk); font-size: 13.5px; color: var(--text-2); }
.handelse b { color: var(--text); font-weight: 600; }
.handelse em { margin-left: auto; font: normal 12px var(--mono); color: var(--text-3); }
.handelse-punkt { display: none; }
.hetta { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px 16px; padding: 13px 0; border-top: 1px solid var(--kant); border-bottom: 1px solid var(--kant); }
.hetta-text { display: grid; gap: 2px; min-width: 0; }
.hetta-text b { font-size: 14px; font-weight: 600; }
.hetta-text span { font-size: 12.5px; color: var(--text-3); }
.hetta-matare { grid-column: 1 / -1; height: 4px; background: var(--kant); overflow: hidden; }
.hetta-matare i { display: block; height: 100%; background: var(--gron); transition: width .6s ease; }
.hetta-sval .hetta-matare i { background: var(--bla); }
.hetta-varm .hetta-matare i { background: var(--accent); }
.hetta-het .hetta-matare i { background: var(--rod); }
@media (max-width: 560px) { .hetta { grid-template-columns: 1fr; } }

/* ---- mobil ---- */
@media (max-width: 820px) {
  .skal { flex-direction: column; padding: 0 16px 96px; margin-top: 18px; gap: 0; }
  .nav { position: fixed; inset: auto 0 0 0; width: auto; flex: none; z-index: 20; flex-direction: row; gap: 0; max-height: none; overflow-x: auto; background: var(--botten); border-top: 1px solid var(--kant-2); padding: 0 4px env(safe-area-inset-bottom); margin: 0; }
  .nav button { width: auto; flex: 0 0 auto; min-width: 72px; flex-direction: column; gap: 4px; align-items: center; font-size: 11px; padding: 9px 6px 8px; position: relative; border: 0; border-top: 2px solid transparent; }
  .nav button:hover { border-left-color: transparent; }
  .nav button.aktiv { border-left-color: transparent; border-top-color: var(--accent); }
  .nav button svg { width: 20px; height: 20px; flex-basis: 20px; }
  .nav button .marke { position: absolute; top: 3px; right: 50%; margin-right: -30px; font-size: 9.5px; padding: 0 4px; line-height: 14px; background: var(--botten); }
  .masthuvud { padding: 0 16px; }
  .masthuvud-namn { font-size: 23px; white-space: nowrap; }
  .masthuvud-hoger { gap: 10px; }
  .online { display: none; }
  .knapp-spok { white-space: nowrap; }
  .remsa { padding-bottom: 10px; }
  .kassa { padding-right: 16px; margin-right: 16px; }
  .nyckel { padding: 2px 14px; }
  .kassa b { font-size: 22px; }
  .ark-topp h1 { font-size: 32px; }
  .hero-tal { font-size: 40px; }
  .rad { flex-wrap: wrap; }
  .rad-knappar { width: 100%; justify-content: flex-start; }
}

/* finjusteringar */
.nav button .marke { flex: 0 0 auto; }
.marke:empty { width: 7px; height: 7px; padding: 0; line-height: 0; background: var(--accent); border: 0; }
.stat b.stat-langt { font-size: 16px; line-height: 1.5; }
.hetta .knapp { grid-column: 2; grid-row: 1; }

.mellanrum { height: 18px; }
.rad-under .stapel { margin-top: 7px; max-width: 360px; }
.chatt-text .nar { margin-left: 8px; }

.toast:not(.visa) { visibility: hidden; }