/* mark.css – markpipelinen: trappan, kartan, tavlan och platsens sida. Följer Pulse-profilen (tokens.css). */

/* ---- stegchip: siffra i stegets färg */
.mchip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 3px;border-radius:var(--radius-full);border:1px solid var(--border);background:var(--surface);color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap}
.mchip i{font-style:normal;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--c);color:#fff;font-size:10.5px;font-weight:700}

/* ---- trappan */
.mtrappa{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.mtrappa li{min-width:0}
.mtrappa button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;height:100%;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"nr n" "v v" "l l" "k k";gap:2px 8px;align-content:start;
  padding:12px 12px 10px;background:var(--surface);border:1px solid var(--border);border-top:4px solid var(--c);border-radius:var(--radius-lg);position:relative}
.mtrappa li:not(:last-child) button::after{content:"";position:absolute;right:-7px;top:50%;width:8px;height:8px;border-top:2px solid var(--skala);border-right:2px solid var(--skala);transform:translate(0,-50%) rotate(45deg);z-index:1;background:var(--surface)}
.mtrappa button:hover{border-color:var(--border-strong);border-top-color:var(--c)}
.mtrappa button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mtrappa button[aria-pressed="true"]{background:color-mix(in srgb,var(--c) 10%,var(--surface));border-color:var(--c)}
.mt-nr{grid-area:nr;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--c);color:#fff;font-size:11.5px;font-weight:700}
.mt-n{grid-area:n;font-size:12.5px;line-height:16px;font-weight:600;color:var(--ink);align-self:center}
.mt-v{grid-area:v;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums;margin-top:6px}
.mt-l{grid-area:l;font-size:12px;color:var(--ink-muted)}
.mt-k{grid-area:k;font-size:11.5px;color:var(--ink-muted);border-top:1px solid var(--border);padding-top:6px;margin-top:6px}

.mk-verktyg{flex-wrap:wrap;gap:8px}
.mk-verktyg .grow{flex:1 1 200px;min-width:0}

/* ---- karta + lista */
.mk-split{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}
.mk-kartkort{padding:0;overflow:hidden;position:relative}
.mk-kh{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:10px 12px;border-bottom:1px solid var(--border)}
.mk-karta{height:380px;border-radius:var(--radius-md);background:var(--surface-raised);position:relative;z-index:0}
.mk-karta.stor{height:min(68vh,640px);border-radius:0}
.mk-karta.liten{height:260px}
.mk-karta.placera,.mk-karta.placera .leaflet-interactive{cursor:crosshair}
.mk-legd{border-top:1px solid var(--border);padding:8px 12px;font-size:12px}
.mk-legd summary{cursor:pointer;color:var(--ink-muted);font-weight:600}
.mleg{display:flex;flex-wrap:wrap;gap:4px 14px;padding-top:8px;align-items:center}
.mleg b{flex-basis:100%;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-top:6px}
.mleg span{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.pt{display:inline-block;width:12px;height:12px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);border:1.5px solid #fff;box-shadow:0 0 0 1px var(--border)}
.pt.rund{border-radius:50%;transform:none}
.ln{display:inline-block;width:22px;height:var(--w);border-radius:3px;background:var(--c)}
.mlager{display:flex;flex-wrap:wrap;gap:6px}
.mlager button{all:unset;cursor:pointer;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--radius-full);border:1px solid var(--border);color:var(--ink-muted);background:var(--surface)}
.mlager button[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.mlager button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mk-tips{position:absolute;left:50%;top:62px;transform:translateX(-50%);z-index:500;background:var(--nav);color:var(--ink-on-dark);padding:8px 10px 8px 14px;border-radius:var(--radius-md);display:flex;gap:10px;align-items:center;box-shadow:var(--shadow-overlay);font-size:13px}
.mk-tips .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}

.mk-sida{display:flex;flex-direction:column;gap:8px;min-width:0}
.mk-kortlista{display:flex;flex-direction:column;gap:8px;max-height:min(72vh,700px);overflow:auto;padding-right:2px}

/* ---- kartnålen: profilens droppe */
.mpin{background:none;border:0}
.mpin span{display:grid;place-items:center;width:26px;height:26px;margin:0 2px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--c);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,47,108,.35);transition:transform .12s}
.mpin span i{transform:rotate(45deg);font-style:normal;color:#fff;font-weight:700;font-size:12px;font-family:var(--font-sans)}
.mpin.av span{filter:grayscale(1);opacity:.6}
.mpin.hl span,.mpin:hover span{transform:rotate(-45deg) scale(1.25)}
.mk-pop{display:flex;flex-direction:column;gap:6px;font-family:var(--font-sans);font-size:12.5px;min-width:200px}
.mk-pop img{width:100%;height:110px;object-fit:cover;border-radius:var(--radius-md)}
.mk-pop b{font-size:14px;color:var(--ink)}
.mk-pop .btn{align-self:flex-start;color:var(--on-action)}
.leaflet-container{font-family:var(--font-sans)}

/* ---- platskortet */
.mkort{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px;padding:8px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);cursor:pointer}
.mkort:hover{border-color:var(--border-strong)}
.mkort:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mkort.pausad,.mkort.avbruten{opacity:.7}
.mkort.dragging{opacity:.4}
.mk-foto{width:76px;height:76px;object-fit:cover;border-radius:var(--radius-md);background:var(--surface-raised)}
.mk-foto.tom{display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,var(--surface));border-left:3px solid var(--c)}
.mk-foto.tom .bik{width:24px;height:24px}
.mk-b{min-width:0;display:flex;flex-direction:column;gap:4px}
.mk-t{display:flex;gap:6px;align-items:center;justify-content:space-between}
.mk-t b{color:var(--ink);font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-n{display:flex;align-items:center;gap:6px;font-size:11.5px;margin-top:2px}
.mk-n > span:first-child{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-n .ok{color:var(--good);font-weight:600}
.mk-n .avatar{width:20px;height:20px;font-size:10px}

/* ---- tavlan */
.mtavla{display:grid;grid-template-columns:repeat(6,minmax(220px,1fr));gap:10px;overflow-x:auto;padding-bottom:10px;align-items:start}
.mcol{background:var(--surface-raised);border:1px solid var(--border);border-top:4px solid var(--c);border-radius:var(--radius-lg);padding:8px;display:flex;flex-direction:column;gap:8px;min-height:160px}
.mcol.over{background:color-mix(in srgb,var(--c) 12%,var(--surface-raised));border-color:var(--c)}
.mcol header{display:flex;gap:8px;align-items:flex-start;padding:2px 2px 6px}
.mcol header b{display:block;font-size:12.5px;color:var(--ink);line-height:16px}
.mcol header .n{margin-left:auto;font-weight:700;color:var(--ink-muted);font-size:12px}
.mcol .mt-nr{flex:none}
.mcol .mkort{grid-template-columns:minmax(0,1fr)}
.mcol .mk-foto{display:none}

/* ---- platsens sida */
.mk-hfoto{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;flex:none}
.mk-process{display:flex;flex-direction:column;gap:14px}
.mstegare{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;counter-reset:s}
.mstegare li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:0 4px;font-size:12px;color:var(--ink-muted)}
.mstegare li::before{content:"";position:absolute;top:14px;left:calc(-50% + 16px);right:calc(50% + 16px);height:3px;border-radius:2px;background:var(--border)}
.mstegare li:first-child::before{display:none}
.mstegare li.klar::before,.mstegare li.nu::before{background:var(--c)}
.ms-nr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--border);background:var(--surface);color:var(--ink-muted);font-weight:700;font-size:13px;position:relative;z-index:1}
.mstegare li.klar .ms-nr{background:var(--c);border-color:var(--c);color:#fff}
.mstegare li.nu .ms-nr{border-color:var(--c);color:var(--ink);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}
.mstegare li b{color:var(--ink);font-weight:600;line-height:15px}
.mstegare li:not(.klar):not(.nu) b{color:var(--ink-muted);font-weight:500}
.mk-nasta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px;border-top:1px solid var(--border);padding-top:14px}
.mk-nasta h3{margin:4px 0;font-size:17px}
.mk-nasta p{margin:0;color:var(--ink-body)}
.mkrav{list-style:none;margin:8px 0 12px;padding:0;display:flex;flex-direction:column;gap:6px}
.mkrav li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13.5px}
.mkrav .ck{flex:none;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;border:2px solid var(--border-strong);font-size:11px;font-weight:700}
.mkrav li.ok{color:var(--ink-muted)}
.mkrav li.ok .ck{background:var(--good);border-color:var(--good);color:#fff}
.lank{all:unset;cursor:pointer;color:var(--ink);font-weight:600;border-bottom:1px solid var(--accent);font-size:13px}
.lank:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mk-klar{display:flex;gap:12px;align-items:center;border-top:1px solid var(--border);padding-top:14px}
.mk-klar .bik{width:28px;height:28px}

.mk-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:16px;align-items:start}
.mk-v,.mk-h{display:flex;flex-direction:column;gap:16px;min-width:0}
.mk-v .mlager{margin-bottom:8px}
.mk-ritbar{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;padding:8px 10px;margin-bottom:8px;border-radius:var(--radius-md);background:var(--info-bg);font-size:13px}
.mk-ritbar span{flex:1 1 200px}

.mk-lagekpi{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.mk-lagekpi > div{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius-lg)}
.mk-lagekpi .v{font-size:26px;line-height:32px;font-weight:600;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.mk-lagekpi .l{font-size:12px;color:var(--ink-muted)}
.mk-g{display:block;height:6px;border-radius:3px;background:var(--surface-raised);overflow:hidden;margin-top:6px}
.mk-g i{display:block;height:100%;border-radius:3px}
.mk-klass{font-size:12px;font-weight:600;color:var(--ink)}
.mk-lagehamtar{display:grid;place-items:center;min-height:160px}
.mk-det{margin-top:12px}
.mk-det summary{cursor:pointer;font-weight:600;color:var(--ink);padding:4px 0}
.mk-vagar tr:hover td{background:var(--surface-raised)}
.mk-vf{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--c);margin-right:6px;vertical-align:-1px}

.mk-agare{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--border)}
.mk-agare:last-of-type{border-bottom:0}
.mk-agare b{color:var(--ink)}
.mk-ak{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:4px;font-size:13px}
.mk-ak a,.mk-ak span{display:inline-flex;align-items:center;gap:5px;color:var(--ink)}
.mk-af{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}

.mk-galleri{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;margin-bottom:10px}
.mk-galleri button{all:unset;cursor:zoom-in;aspect-ratio:1;border-radius:var(--radius-md);overflow:hidden;background:var(--surface-raised)}
.mk-galleri button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.mk-galleri img{width:100%;height:100%;object-fit:cover;display:block}
.mk-ljus{position:fixed;inset:0;z-index:60;background:rgba(0,20,48,.88);display:grid;place-items:center;padding:24px}
.mk-ljus figure{margin:0;max-width:min(1200px,100%);display:flex;flex-direction:column;gap:10px}
.mk-ljus img{max-width:100%;max-height:78vh;object-fit:contain;border-radius:var(--radius-md)}
.mk-ljus figcaption{color:#fff;font-size:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.mk-ljus figcaption .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.mk-ljus > button{all:unset;cursor:pointer;position:absolute;color:#fff;font-size:42px;line-height:1;padding:10px 16px}
.mk-lj-p{left:8px;top:50%;transform:translateY(-50%)}.mk-lj-n{right:8px;top:50%;transform:translateY(-50%)}.mk-lj-x{right:8px;top:8px}

.mk-lf{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.mk-lf .seg{align-self:flex-start}
.tl.hand .c{color:var(--ink-muted)}
.tl .chip .bik{width:13px;height:13px}
.mk-orsaker{display:flex;flex-direction:column;gap:6px}
.np-traff{display:flex;flex-direction:column;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
.np-traff button{all:unset;cursor:pointer;padding:8px 10px;font-size:13px;border-bottom:1px solid var(--border);display:flex;gap:6px;align-items:center}
.np-traff button:last-child{border-bottom:0}
.np-traff button:hover,.np-traff button:focus-visible{background:var(--surface-raised)}
.np-traff span{padding:8px 10px}
.np-agare{border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 12px 12px}
.np-agare legend{font-size:12px;font-weight:600;color:var(--ink-muted);padding:0 4px}

@media(max-width:1180px){
  .mtrappa{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mtrappa li:nth-child(3n) button::after{display:none}
  .mk-split{grid-template-columns:minmax(0,1fr)}
  .mk-kortlista{max-height:none}
  .mk-grid{grid-template-columns:minmax(0,1fr)}
  .mk-lagekpi{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .mtrappa{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mtrappa button::after{display:none}
  .mt-v{font-size:22px;line-height:28px}
  .mk-karta.stor{height:58vh}
  .mstegare{grid-template-columns:repeat(6,minmax(44px,1fr));overflow-x:auto}
  .mstegare li b{font-size:10.5px;line-height:13px}
  .mstegare li .muted{display:none}
  .mk-nasta{grid-template-columns:minmax(0,1fr)}
  .mk-lagekpi{grid-template-columns:minmax(0,1fr)}
  .mtavla{grid-template-columns:repeat(6,82vw)}
}