/* skal-lab/plats/kort.css — platskortets skelett (nio block, docs/PLATSKORT_MOCKUP.md), delat av /karta (karta.html, inuti .lk-pk) och mockupen
   (mockup/platskort.html, fristående .pk). Bara tokens ur css/ny.css + lab.css; kortets mått = kartans (--lk-panel-w, radie 18). */

.pk__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.pk__chips .lk-chip { padding: 4px 9px; cursor: default; }
.pk, .lk-pk { --sl-tb-rod: #d71d24; --sl-tb-gron: #148541; --sl-tb-bla: #007db8; --sl-ptag: #ec619f; --sl-tvar: #e3861e; --sl-buss: #d71d24; --sl-blabuss: #0089ca; }
[data-linje="tb-rod"] { --linje: var(--sl-tb-rod); } [data-linje="tb-gron"] { --linje: var(--sl-tb-gron); } [data-linje="tb-bla"] { --linje: var(--sl-tb-bla); }
[data-linje="ptag"] { --linje: var(--sl-ptag); } [data-linje="tvar"] { --linje: var(--sl-tvar); } [data-linje="buss"] { --linje: var(--sl-buss); } [data-linje="blabuss"] { --linje: var(--sl-blabuss); }
.pk__chips .lk-chip[data-linje] { background: var(--linje); color: #fff; font-weight: 600; min-width: 30px; justify-content: center; }

/* ---------- kortet: en yta, nio block ---------- */
.pk { position: relative; width: var(--lk-panel-w); max-width: 100%; border-radius: 18px; background: color-mix(in srgb, var(--fg-1) 6%, var(--s-deep)); box-shadow: inset 0 0 0 1px var(--w-10), 0 8px 28px rgba(0,0,0,.14); overflow: hidden; } /* --s-panel är kartans glas (30 % svart) och syns inte på sidans egen bakgrund: här en solid, lätt lyft yta i båda lägena */
.pk__kropp { padding: 8px 24px 24px; }
/* dator: kortet är alltid lika högt som kartpanelen (.lk-kort: 100 % minus 2 × --lk-inset), huvudet står, kroppen scrollar innanför */
@media (min-width: 768px) {
  .pk { display: flex; flex-direction: column; height: calc(100dvh - 2 * var(--lk-inset)); }
  .pk .pk__kropp { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* bara mockupens .pk: i kartpanelen (.lk-pk) var kroppen en icke-scrollbar contain-yta som åt hjulet, panelen rullade bara över bilden */
  /* fotokort: hela kortet rullar så bilden försvinner uppåt, huvudet fastnar i toppen och rundlarna står kvar (Apple Maps) */
  .pk--foto { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .pk--foto .pk__huvud { position: sticky; top: 0; z-index: 1; background: inherit; }
  .pk--foto .pk__kropp { flex: none; overflow: visible; }
  .pk--foto .pk__rundlar { position: sticky; top: 16px; z-index: 2; align-self: flex-end; height: 0; margin-right: 24px; }
}
.pk__kropp > * + * { margin-top: 24px; } /* alla barn, inte bara .pk__block: de dolda vy-sektionerna (display none) ligger emellan och bröt annars luften före Fakta */
.pk__kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--fg-8); }
.pk__kicker small { font: inherit; letter-spacing: inherit; text-transform: none; color: var(--fg-7); margin-left: auto; }

/* huvudet: stigen uppåt, namnet, nivå och kod, rundlar */
.pk__huvud { position: relative; padding: 20px 24px 4px; } /* samma sidopadding som kroppen: huvudet låg kant i kant med kortet */
.pk__stig { display: flex; align-items: start; gap: 3px; margin: 0 72px 10px 0; font: var(--type-meta); color: var(--fg-6); } /* hopfälld: de två leden närmast ovanför, en rad; chevronen fäller ut hela kedjan */
.pk__stig svg { width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; color: var(--fg-8); transition: transform var(--lk-t) var(--lk-ease); }
.pk__stig button { display: grid; place-items: center; width: 20px; height: 20px; margin: -2px 0 0 -4px; padding: 0; border: 0; border-radius: 6px; background: none; color: inherit; cursor: pointer; }
.pk__stig button:hover { background: var(--w-08); }
.pk__stig button:hover svg { color: var(--fg-4); }
.pk__stig[data-hel] button svg { transform: rotate(180deg); }
.pk__stig ol { display: flex; flex-wrap: wrap; gap: 2px 0; min-width: 0; margin: 0; padding: 0; list-style: none; }
.pk__stig li:not(:nth-last-child(-n+2)) { display: none; }
.pk__stig[data-hel] li { display: block; }
.pk__stig li:last-child:not(:first-child)::before, .pk__stig[data-hel] li + li::before { content: '›'; margin: 0 5px; color: var(--fg-8); }
.pk__stig a { color: var(--fg-5); text-decoration: none; }
.pk__stig a:hover { color: var(--fg-2); }
.pk__namn { margin: 0 72px 4px 0; font: var(--type-display); letter-spacing: -0.01em; color: var(--fg-1); }
.pk__sub { margin: 0; color: var(--fg-6); font: var(--type-meta); }
.pk__sub b { font-weight: 500; color: var(--fg-4); }
/* specrad: tre hjältesiffror under namnet (Booli: "139 m² · 6 rum"), siffran tung och enheten lätt */
.pk__spec { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; color: var(--fg-6); font: var(--type-meta); font-variant-numeric: var(--numeric); }
.pk__spec span { white-space: nowrap; } /* luft i stället för punkt: en radbrytning lämnade en ensam · först på raden */
.pk__spec b { margin-right: 3px; font: var(--type-label); color: var(--fg-2); }
/* länkraden: helsidan (pil höger) och objektets egen webbplats (pil upp höger, öppnas i ny flik) */
.pk__lankar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; font: var(--type-label); }
.pk__lank { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; background: var(--w-08); color: var(--fg-3); text-decoration: none; }
.pk__lank:hover { background: var(--w-12); color: var(--fg-1); }
.pk__lank--var { background: var(--aw-20); color: var(--fg-1); } /* vår egen helsida är huvudvägen: tonad accent, inte fylld (fylld = det valda) */
.pk__lank--var:hover { background: var(--aw-24); }
.pk__lank svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* foto + brief: bara områdeskort (län, kommun, tätort). Bilden full bredd överst, rundlarna lägger sig på den */
.pk--foto .pk__huvud { padding-top: 14px; }
.pk__foto { margin: 0; }
.pk__bild { position: relative; aspect-ratio: 5 / 2; background: linear-gradient(165deg, var(--w-15), var(--w-045) 80%); }
.pk__bild .pk__att { position: absolute; left: 24px; bottom: 10px; margin: 0; background: rgba(0,0,0,.35); color: rgba(255,255,255,.75); }
.pk__foto figcaption { padding: 6px 24px 0; color: var(--fg-7); font: var(--type-meta); }
.pk--foto .pk__rundlar button { background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(8px); }
.pk--foto .pk__rundlar button:hover { background: rgba(0,0,0,.5); }
.pk__brief { margin: 0; color: var(--fg-4); font: var(--type-label); line-height: 1.45; }
.pk__rundlar { position: absolute; top: 16px; right: 24px; display: flex; gap: 8px; }
.pk__rundlar button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: var(--w-08); color: var(--fg-4); cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
.pk__rundlar button:hover { background: var(--w-12); }
.pk__rundlar svg, .pk__rad svg, .pk__brickor svg, .pk__tom svg, .pk__knapp svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* rader: ikon · etikett (· meta under) · värde högerställt med tabular-nums */
.pk__rader { display: grid; margin: 0 -8px; }
.pk__rad { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 8px; border-radius: 10px; color: var(--fg-3); font: var(--type-label); }
.pk__rad:hover { background: var(--w-06); }
/* §färg: ikonen sitter i en tonad ruta (iOS Inställningar). Kategorifärg = Okabe-Ito ur NYTT_KARTLAGER §0.5 (CB-säker); mixas mot --fg-1 så samma token läses i båda teman. Neutral ruta utan kategori */
.pk, .lk-pk { --k-folk: #0072b2; --k-natur: #009e73; --k-trafik: #56b4e9; --k-hus: #e69f00; --k-risk: #d55e00; --k-plan: #cc79a7; }
.pk__rad > span:first-child { display: grid; place-items: center; --k: var(--fg-5); }
.pk__rad > span:first-child svg { box-sizing: border-box; width: 24px; height: 24px; padding: 5px; border-radius: 7px; color: color-mix(in oklab, var(--k) 80%, var(--fg-1)); background: color-mix(in oklab, var(--k) 16%, transparent); }
.pk__rad .k-folk { --k: var(--k-folk); } .pk__rad .k-natur { --k: var(--k-natur); } .pk__rad .k-trafik { --k: var(--k-trafik); }
.pk__rad .k-hus { --k: var(--k-hus); } .pk__rad .k-risk { --k: var(--k-risk); } .pk__rad .k-plan { --k: var(--k-plan); }
.pk__rad[data-linje] > span:first-child svg { color: #fff; background: var(--linje); }
.pk__rad small { display: block; margin-top: 2px; color: var(--fg-7); font: var(--type-meta); }
.pk__rad .pk__v { text-align: right; font-variant-numeric: var(--numeric); color: var(--fg-2); white-space: nowrap; }
.pk__rad .pk__v small { text-align: right; }
.pk__rad .pk__v.pk__v--upp { color: var(--a-2b); }
.pk__rad a { color: inherit; text-decoration: none; }
a.pk__rad:hover .pk__v, button.pk__rad:hover .pk__v { color: var(--fg-1); }
/* raden som dörr (nyckeltal): en knapp med liten pil i höger kant, öppnar Om siffran */
button.pk__rad { grid-template-columns: 24px minmax(0, 1fr) auto 8px; width: 100%; border: 0; background: none; text-align: left; cursor: pointer; }
button.pk__rad::after { content: ''; grid-area: 1 / 4; width: 6px; height: 6px; justify-self: end; border: solid var(--fg-7); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
button.pk__rad:hover::after { border-color: var(--fg-4); }
/* visa alla: rad fem och framåt ligger i en native details under de fyra första */
.pk__mer > summary { display: flex; align-items: center; gap: 4px; padding: 8px 8px 2px 44px; list-style: none; cursor: pointer; color: var(--fg-6); font: var(--type-meta); }
.pk__mer > summary::-webkit-details-marker { display: none; }
.pk__mer > summary:hover { color: var(--fg-3); }
.pk__mer > summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--lk-t) var(--lk-ease); }
.pk__mer[open] > summary svg { transform: rotate(180deg); }
.pk__mer > summary span:last-child, .pk__mer[open] > summary span:first-child { display: none; }
.pk__mer[open] > summary span:last-child { display: inline; }
/* temachips i Nyckeltal: ett tema i taget, fyra rader per tema */
.pk__teman { margin: 0 0 8px; }
.pk__teman .lk-chip { cursor: pointer; }
.pk__rader[hidden] { display: none; }
/* om siffran: stor siffra, tio år, definition och källa */
.pk__stor { margin: 0 0 12px; font: var(--type-display-lg); letter-spacing: -0.01em; color: var(--fg-1); font-variant-numeric: var(--numeric); }
.pk__stor small { display: block; margin-top: 2px; font: var(--type-meta); letter-spacing: 0; color: var(--fg-6); }
.pk__om { margin-top: 14px; }
.pk__knapp--lugn { background: var(--w-08); color: var(--fg-3); }
.pk__knapp--lugn:hover { background: var(--w-12); }

/* attrapp: ett märke på raden + streckad bakgrund, aldrig bara en färgton */
.pk__att { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: var(--w-10); color: var(--fg-5); font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; vertical-align: 2px; }
.pk__rad--att { background: repeating-linear-gradient(135deg, var(--w-045) 0 6px, transparent 6px 14px); }
.pk__rad--att .pk__v { color: var(--fg-5); }
.pk__rad--att + .pk__rad--att { margin-top: 4px; } /* två streckade rader i följd (Analys) flöt ihop till en yta */

/* tomt block: kickern står kvar så ordningen aldrig ändras; texten säger vad som skulle fylla det */
.pk__tom { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--w-06); color: var(--fg-6); font: var(--type-meta); }
.pk__tom > span:first-child { display: grid; place-items: center; padding-top: 1px; color: var(--fg-8); }
.pk__tom b { display: block; margin-bottom: 2px; font: var(--type-label); color: var(--fg-5); }

/* nyckeltal mot nivån ovanför: stapel = platsens värde i förhållande till referensen */
.pk__bar { grid-column: 2 / -1; height: 4px; margin-top: -4px; margin-bottom: 2px; border-radius: 2px; background: var(--w-08); overflow: hidden; }
.pk__bar i { display: block; height: 100%; width: var(--p, 50%); border-radius: 2px; background: var(--a-4); }
.pk__bar--ref { position: relative; }
.pk__bar--ref::after { content: ''; position: absolute; top: -2px; bottom: -2px; left: var(--ref, 50%); width: 1px; background: var(--fg-6); }

/* tid: reglage + staplar (år eller timme). Staplarna är data (en kategori, en färg); markerat band i accent */
.pk__tid { display: grid; gap: 8px; }
.pk__tid + .pk__rader { margin-top: 14px; } /* Analys: luft mellan årsaxeln och raderna, samma mått som .pk__om */
.pk__staplar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 2px; height: 44px; }
.pk__staplar i { display: block; height: var(--h, 20%); border-radius: 2px 2px 0 0; background: var(--w-14); }
.pk__staplar i.nu { background: var(--a-4); }
.pk__tidax { display: flex; justify-content: space-between; color: var(--fg-7); font: var(--type-meta); font-variant-numeric: var(--numeric); }
.pk__reglage { width: 100%; margin: 0; accent-color: var(--accent); }

/* källa: hopfälld (native details), kickern är summary med första källan + chevron; öppen visar dl: nyckel vänster, värde höger */
.pk__block--kalla > summary { list-style: none; cursor: pointer; margin: 0; }
.pk__block--kalla > summary::-webkit-details-marker { display: none; }
.pk__block--kalla > summary small { display: inline-flex; align-items: center; gap: 4px; }
.pk__block--kalla > summary svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--lk-t) var(--lk-ease); }
.pk__block--kalla[open] > summary svg { transform: rotate(180deg); }
.pk__block--kalla[open] > summary { margin-bottom: 8px; }
.pk__block--kalla > summary:hover small { color: var(--fg-4); }
.pk__kalla { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; font: var(--type-meta); color: var(--fg-4); }
.pk__kalla dt { color: var(--fg-7); }
.pk__kalla dd { margin: 0; }
.pk__kalla a { color: var(--fg-3); text-decoration: underline; text-decoration-color: var(--w-15); text-underline-offset: 2px; }
.pk__kalla .pk__brist { color: var(--fg-3); }

/* analysera vidare: fyra brickor, ingen fylld förrän man klickar */
.pk__brickor { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.pk__brickor :is(a, button) { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 6px 10px; border: 0; border-radius: 12px; background: var(--w-08); color: var(--fg-3); font: var(--type-meta); text-decoration: none; cursor: pointer; transition: background var(--lk-t) var(--lk-ease), transform 150ms ease-out; }
.pk__brickor :is(a, button):hover { background: var(--w-10); transform: translateY(-1px); }
.pk__brickor :is(a, button):active { transform: scale(.98); }
.pk__brickor svg { width: 18px; height: 18px; }
/* vald bricka tar accenten så länge dess vy är öppen */
.pk__brickor [aria-pressed="true"], .pk__brickor [aria-pressed="true"]:hover { background: var(--accent); color: var(--on-accent); }
.pk__kropp > [hidden] { display: none; }

/* vyerna bakom brickorna (attrapper) */
.pk__lista { margin: 0; padding: 0 0 0 20px; color: var(--fg-4); }
.pk__lista li + li { margin-top: 6px; }
.pk__lista b { color: var(--fg-2); }
.pk__kryss { display: grid; gap: 6px; color: var(--fg-4); }
.pk__kryss label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.pk__kryss input { margin: 0; accent-color: var(--accent); }
.pk__knapp { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 14px; border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: var(--type-meta); cursor: pointer; }
.pk__knapp:hover { background: var(--accent-hover, var(--accent)); }

@media (prefers-reduced-motion: reduce) { .pk__brickor :is(a, button) { transition-duration: 100ms; transform: none !important; } }

/* ---------- inuti kartpanelen (.lk-pk i karta.js): panelens eget huvud bär namn och stäng, så kortet är bara block i panelens bredd ---------- */
.lk-pk .pk__huvud { padding: 8px 16px 4px; }
.lk-pk > .pk__stig { margin: 4px 16px 10px; } /* stigen överst i kortet, ovanför fotot (kort.js), inte under tummarna */
.lk-pk .pk__kropp { padding: 8px 16px 12px; }
.lk-pk .pk__foto figcaption { padding-inline: 16px; }
.pk__kropp .lk-atg { margin-inline: 0; } /* handlingarna är block 1 i kortet: samma kant som raderna, inte panelens 12 px */
.pk__kropp .lk-atg--sma { margin-top: 8px; }