/* Åsiktsvägar — en tryckt linjekarta: elfenbenspapper, bläck, tre linjefärger.
   Serif (Fraunces) för åsikter, kondenserad sans i kapitäler för mekanismer. */
:root {
  --papper: #f3eee2; --papper-2: #ebe4d3; --kort: #fbf8f1;
  --blak: #1d1b17; --blak-2: #4a453c; --blak-3: #8a8274; --hårlinje: #d6ccb6;
  --l0: #1c6470; --l1: #c2402a; --l2: #c08a17;
  --varning: #a3361f;
  --serif: 'Fraunces', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, sans-serif; --kond: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papper: #15130f; --papper-2: #1d1a15; --kort: #221f19;
    --blak: #ece5d6; --blak-2: #c3baa8; --blak-3: #8c8475; --hårlinje: #3a352c;
    --l0: #4fa8b5; --l1: #e56a52; --l2: #e0ad3d; --varning: #ef8a74; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papper: #15130f; --papper-2: #1d1a15; --kort: #221f19;
  --blak: #ece5d6; --blak-2: #c3baa8; --blak-3: #8c8475; --hårlinje: #3a352c;
  --l0: #4fa8b5; --l1: #e56a52; --l2: #e0ad3d; --varning: #ef8a74; color-scheme: dark;
}
html { background: var(--papper); }
body { margin: 0; background: var(--papper); color: var(--blak); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--l1); outline-offset: 2px; }
h2, h3, h4 { margin: 0; }
.l0 { --lc: var(--l0); } .l1 { --lc: var(--l1); } .l2 { --lc: var(--l2); }

.top { display: flex; align-items: center; gap: 12px; padding: 14px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--hårlinje); }
.brand { display: flex; align-items: center; gap: 10px; font: 600 19px var(--serif); color: var(--blak); text-decoration: none; }
.mark { width: 28px; height: 16px; fill: none; stroke: var(--blak); stroke-width: 1.6; }
.mark circle { fill: var(--blak); stroke: none; }
.spacer { flex: 1; }
.tag { font: 500 13px var(--kond); letter-spacing: .06em; text-transform: uppercase; color: var(--blak-3); }
.ghost { background: transparent; border: 1px solid var(--hårlinje); padding: 6px 12px; border-radius: 999px; font: 500 13px var(--kond); letter-spacing: .06em; text-transform: uppercase; color: var(--blak-2); text-decoration: none; cursor: pointer; }
.ghost:hover { border-color: var(--blak); color: var(--blak); }
.primary { background: var(--blak); color: var(--papper); border: 0; padding: 12px 24px; border-radius: 999px; font: 600 14px var(--kond); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.primary:disabled { opacity: .45; cursor: wait; }

main { max-width: 1400px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 40px) 80px; }
.lbl { display: block; font: 600 12px var(--kond); letter-spacing: .16em; text-transform: uppercase; color: var(--blak-3); margin-bottom: 8px; }
.liten { font-size: 13px; color: var(--blak-3); }

.fraga { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: end; }
.falt textarea { width: 100%; box-sizing: border-box; background: var(--kort); border: 1px solid var(--hårlinje); border-radius: 4px; padding: 14px 16px; font: 300 21px/1.35 var(--serif); resize: vertical; }
.falt textarea:focus { border-color: var(--blak); outline: none; }
.pil { font: 300 34px var(--serif); color: var(--blak-3); padding-bottom: 28px; }
.knapprad { grid-column: 1 / -1; display: flex; justify-content: flex-end; align-items: center; gap: 16px; }
.status { flex: 1; color: var(--blak-2); font-size: 14px; }
.notis { margin-top: 18px; padding: 12px 16px; border-left: 3px solid var(--l1); background: var(--kort); }
.marke { font: 600 12px var(--kond); letter-spacing: .16em; text-transform: uppercase; color: var(--blak-3); margin: 34px 0 0; }

/* kartan: polkort | svg | polkort */
.kartrad { display: grid; grid-template-columns: minmax(170px, 250px) 1fr minmax(170px, 250px); align-items: center; margin-top: 22px; }
.polkort { margin: 0; background: var(--kort); border: 1.5px solid var(--blak); border-radius: 6px; padding: 16px 18px; position: relative; z-index: 1; }
.polkort p { margin: 0; font: 400 18px/1.35 var(--serif); overflow-wrap: anywhere; }
.polkort.mal { border-width: 2.5px; }
.kartram { overflow-x: auto; overflow-y: hidden; min-width: 0; }
#svg { display: block; margin: 0 auto; }
.linje { cursor: pointer; outline: none; }
.linje .spar, .linje .segment { fill: none; stroke: var(--lc); stroke-linecap: round; stroke-linejoin: round; }
.linje .spar { stroke-width: 4; }
.linje.vantar .spar { stroke-dasharray: 2 9; opacity: .6; }
.linje:not(.vald) { opacity: .32; transition: opacity .25s; }
.linje:not(.vald):hover, .linje:focus-visible { opacity: .75; }
.linje .station { fill: var(--kort); stroke: var(--blak); stroke-width: 2.5; }
.linje.vald .station { stroke: var(--lc); stroke-width: 3.5; }
.linje .etikett { font: 600 11px var(--kond); letter-spacing: .12em; text-transform: uppercase; fill: var(--blak-2); }
.linje.vald .etikett { fill: var(--blak); }
.bryt circle { fill: var(--kort); stroke: var(--varning); stroke-width: 2; }
.bryt path { fill: none; stroke: var(--varning); stroke-width: 2; }
.pol { fill: var(--blak); }
.ritas { stroke-dasharray: 3000; stroke-dashoffset: 3000; animation: ritas 1.4s ease-out forwards; }
@keyframes ritas { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .ritas { animation: none; stroke-dashoffset: 0; } }
.tankar { margin: 10px auto 0; max-width: 780px; min-height: 1.4em; font: italic 300 15px var(--serif); color: var(--blak-3); text-align: center; }

/* linjeväljare */
.linjer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }
.linjeknapp { text-align: left; display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; background: var(--kort); border: 1px solid var(--hårlinje); border-top: 5px solid var(--lc); border-radius: 4px; padding: 12px 14px; cursor: pointer; }
.linjeknapp.vald { border-color: var(--lc); box-shadow: 0 0 0 1px var(--lc); }
.linjeknapp .nr { grid-row: span 3; width: 30px; height: 30px; border-radius: 50%; background: var(--lc); color: var(--kort); display: grid; place-items: center; font: 600 15px var(--kond); }
.linjeknapp .namn { font: 600 18px var(--serif); }
.linjeknapp .bar { font: 600 11px var(--kond); letter-spacing: .12em; text-transform: uppercase; color: var(--lc); }
.linjeknapp .meta { font-size: 13px; color: var(--blak-3); }

/* under kartan: avstånd | steg */
.under { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; gap: 36px; margin-top: 36px; align-items: start; }
.avstand { position: sticky; top: 16px; }
.avstand h3 { font: 600 20px var(--serif); }
.avst { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 12px; }
.avst li { display: grid; grid-template-columns: 26px 1fr; gap: 2px 10px; }
.avst li.utanfor { opacity: .45; }
.ordn { grid-row: span 3; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--lc); display: grid; place-items: center; font: 600 12px var(--kond); }
.avst .typ { font: 600 11px var(--kond); letter-spacing: .12em; text-transform: uppercase; color: var(--blak-3); }
.avst .fr { font: 400 15px/1.35 var(--serif); }
.avst .ti { font: 400 15px/1.35 var(--serif); color: var(--blak-2); }

.vaghuvud h2 { font: 600 30px var(--serif); color: var(--lc); }
.tes { font: 300 19px/1.4 var(--serif); margin: 6px 0 0; }
.sammanf { color: var(--blak-2); margin: 10px 0 0; }
.vantar-text { color: var(--blak-3); font-style: italic; }
.felruta { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--varning); border-radius: 4px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.felruta p { margin: 0; flex: 1; color: var(--varning); }

/* stegkorten fortsätter linjen lodrätt */
.kedja { list-style: none; margin: 22px 0 0; padding: 0 0 0 30px; position: relative; }
.kedja::before { content: ''; position: absolute; left: 11px; top: 14px; bottom: 14px; width: 4px; background: var(--lc); border-radius: 2px; }
.stegkort { position: relative; background: var(--kort); border: 1px solid var(--hårlinje); border-radius: 6px; padding: 16px 20px; margin-bottom: 16px; }
.stegkort::before { content: ''; position: absolute; left: -27px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: var(--kort); border: 3px solid var(--lc); }
.stegkort.hopp-stort { border-left: 5px solid var(--lc); }
.stegkort.kritisk { box-shadow: 0 0 0 2px var(--varning) inset; }
.steghuvud { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.stegnr { font: 600 13px var(--kond); color: var(--blak-3); }
.mek { font: 600 13px var(--kond); letter-spacing: .14em; text-transform: uppercase; color: var(--lc); }
.hopp { font-size: 12px; color: var(--blak-3); }
.brytmarke { font: 600 11px var(--kond); letter-spacing: .12em; text-transform: uppercase; color: var(--varning); }
.overgang { display: grid; gap: 4px; margin: 10px 0 14px; }
.overgang .fran { font: 300 16px/1.4 var(--serif); color: var(--blak-3); }
.overgang .till { font: 400 20px/1.35 var(--serif); }
.overgang .till::before { content: '→ '; color: var(--lc); }
.lager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--hårlinje); padding-top: 12px; }
.lager h4 { font: 600 12px var(--kond); letter-spacing: .14em; text-transform: uppercase; color: var(--blak-3); margin-bottom: 6px; }
.lager p { margin: 0 0 6px; }
.rad { font-size: 14px; color: var(--blak-2); }
.rad b { font-weight: 500; color: var(--blak); }
.rad.varning b { color: var(--varning); }
.kalla { margin-top: 10px; font-size: 14px; }
.kalla summary { cursor: pointer; color: var(--blak-3); }
.kallor { padding-left: 18px; color: var(--blak-2); }
.forbehall { margin-top: 30px; font: italic 300 15px var(--serif); color: var(--blak-3); }

@media (max-width: 1100px) { .under { grid-template-columns: 1fr; } .avstand { position: static; } }
@media (max-width: 760px) {
  .top { gap: 8px; padding: 12px 16px; }
  .brand { font-size: 17px; gap: 8px; }
  .ghost { padding: 6px 10px; font-size: 12px; }
  .tag { display: none; }
  .fraga { grid-template-columns: 1fr; }
  .pil { display: none; }
  .kartrad { grid-template-columns: 1fr; gap: 0; }
  .polkort { margin: 0 12px; }
  .linjer { grid-template-columns: 1fr; }
  .lager { grid-template-columns: 1fr; }
  .falt textarea { font-size: 18px; }
}

/* inloggning och inställningar */
.smal { max-width: 460px; margin: 12vh auto; }
.smal input, .inst input { width: 100%; box-sizing: border-box; background: var(--kort); border: 1px solid var(--hårlinje); border-radius: 4px; padding: 10px 12px; }
.login h1 { display: flex; align-items: center; gap: 10px; font: 600 26px var(--serif); margin: 0 0 6px; }
.login p.tagline { color: var(--blak-3); margin: 0 0 22px; font: 300 17px var(--serif); }
.login input { margin-bottom: 12px; }
.login .primary { width: 100%; }
.login .hint { color: var(--varning); font-size: 14px; min-height: 1.2em; margin: 12px 0 0; }
.inst { max-width: 980px; }
.inst h1 { font: 600 30px var(--serif); margin: 0 0 22px; }
.inst .panel { background: var(--kort); border: 1px solid var(--hårlinje); border-radius: 6px; padding: 20px 24px; margin-bottom: 20px; }
.inst .panel h2 { font: 600 14px var(--kond); letter-spacing: .1em; text-transform: uppercase; color: var(--blak-3); margin: 0 0 14px; }
.inst .panel p { margin: 8px 0; }
.inst .dim { color: var(--blak-3); font-size: 13px; }
.inst .nyckelrad { display: flex; gap: 10px; margin: 10px 0; align-items: center; }
.inst .nyckelrad input { flex: 1; }
.inst .vald { font-weight: 600; }
.inst .sparat { color: var(--blak-3); font-size: 13px; margin-left: 10px; }
.inst .efforts { display: flex; gap: 8px; margin-top: 10px; }
.inst table { width: 100%; border-collapse: collapse; font-size: 14px; }
.inst td, .inst th { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--hårlinje); }
.inst tr[data-id] { cursor: pointer; }
.inst tr.on { background: var(--papper-2); font-weight: 500; }
.inst .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabellram { max-height: 420px; overflow: auto; border: 1px solid var(--hårlinje); border-radius: 4px; }
.chip { background: transparent; border: 1px solid var(--hårlinje); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.chip.on { background: var(--blak); color: var(--papper); border-color: var(--blak); }
.testbox { padding: 12px 14px; border: 1px solid var(--hårlinje); border-radius: 4px; }
.testbox.ok { border-color: var(--l0); } .testbox.fel { border-color: var(--varning); color: var(--varning); }

/* personer */
.vem { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; } /* min-width: långa personnamn i väljaren får inte spräcka rutnätet på mobil */
.vem .lbl { margin: 0; }
.vem select { background: var(--kort); border: 1px solid var(--hårlinje); border-radius: 4px; padding: 9px 12px; max-width: 100%; min-width: 0; flex: 1 1 280px; }
.vemkort { margin: 10px 0 0 !important; font: 600 12px var(--kond) !important; letter-spacing: .12em; text-transform: uppercase; color: var(--blak-3); }
.anpassning { margin: 14px auto 0; max-width: 820px; font: 300 17px/1.45 var(--serif); text-align: center; }
.personnat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; margin-top: 18px; }
.personkort { background: var(--kort); border: 1px solid var(--hårlinje); border-radius: 6px; padding: 14px 16px; display: grid; gap: 6px; }
.personkort h3 { font: 600 19px var(--serif); }
.personkort .taggar { display: flex; flex-wrap: wrap; gap: 6px; }
.personkort .tagg { font: 600 11px var(--kond); letter-spacing: .1em; text-transform: uppercase; border: 1px solid var(--hårlinje); border-radius: 999px; padding: 2px 8px; color: var(--blak-2); }
.personkort .handling { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.redigerare { margin-top: 28px; background: var(--kort); border: 1px solid var(--blak); border-radius: 6px; padding: 18px 20px; }
.redigerare .falt2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.redigerare label { display: grid; gap: 4px; font-size: 14px; }
.redigerare input, .redigerare select, .redigerare textarea { background: var(--papper); border: 1px solid var(--hårlinje); border-radius: 4px; padding: 8px 10px; }
.redigerare textarea { width: 100%; box-sizing: border-box; min-height: 90px; }
.grundvalsval { display: flex; flex-wrap: wrap; gap: 6px; }
.sidrubrik { font: 600 30px var(--serif); margin: 8px 0 6px; } .liten-rubrik { font-size: 22px; margin-top: 34px; }

/* jämförelse */
.minikarta .linje { opacity: 1; }
.resa { grid-template-columns: 1fr auto 1fr; gap: 16px; }
.jamforrader { display: grid; gap: 14px; margin: 24px 0 12px; }
.jamforrad { display: grid; grid-template-columns: minmax(180px, 240px) minmax(220px, 420px) 1fr; gap: 20px; align-items: center; background: var(--kort); border: 1px solid var(--hårlinje); border-radius: 6px; padding: 14px 18px; color: inherit; text-decoration: none; }
.jamforrad:hover { border-color: var(--blak); }
.jamforrad h3 { font: 600 20px var(--serif); }
.jamforrad .anp { font: italic 300 14px/1.4 var(--serif); margin: 6px 0 0; }
.vagkol { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.vagkol li { border-left: 4px solid var(--lc); padding-left: 10px; display: grid; }
.vagkol .mek { font-size: 11px; }
.minikarta svg { display: block; }
@media (max-width: 900px) { .jamforrad { grid-template-columns: 1fr; } .resa { grid-template-columns: 1fr; } .resa .pil { display: none; } }

/* personrad */
.personrad { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.personrad .lbl { margin: 0; }
.personrad select { flex: 0 1 320px; min-width: 0; background: var(--kort); border: 1px solid var(--hårlinje); border-radius: 4px; padding: 7px 10px; }