/* Layout och komponenter utöver Pico. Mobil-först: enkla staplade block som
   default, grid-layout tillkommer vid större skärmar. */

:root { font-size: 100%; }

/* align-items: flex-start så brand-länken stannar högst upp när .nav-right
   radbryter till flera rader på smal mobil, i stället för att centreras
   in bland de omslagna knapparna. */
/* Trimma headerhöjden: Pico ger <header> ~1rem vertikal padding och varje nav-<li>
   ~1rem (bara marginalen nollades, inte paddingen) -> headern blev ~128px hög. Nolla
   li-paddingen och stram åt header/nav-paddingen till en normal höjd. */
.site-header { padding-block: 0.35rem; }
.site-header nav { padding-block: 0.25rem; align-items: flex-start; }
.site-header nav li { padding-block: 0; }

.guide-text {
	white-space: pre-wrap;
	font-family: inherit;
	font-size: 0.9rem;
	max-height: 60vh;
	overflow-y: auto;
}

/* Live-preview av hotspot-markdown i editorn. */
.hs-text-preview { margin-top: 0.5rem; padding: 0.4rem 0.7rem; border: 1px dashed var(--pico-muted-border-color); border-radius: 0.3rem; max-height: 12rem; font-size: 0.9rem; }

/* Fullskärms-ark för expanderbara hotspots ("läs mer"). Delas av editor + runtime
   (motsvarande regler finns i viewer.css för bundle/publik vy). */
.hs-sheet { position: fixed; inset: 0; z-index: 5000; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; }
.hs-sheet[hidden] { display: none; }
.hs-sheet-inner { position: relative; background: #fff; color: #1c2128; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; border-radius: 3px; padding: 2.2rem 2rem 1.6rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4); }
/* Pico (editor/preview) sätter color direkt på p/h/li -> slår arvet från .hs-sheet-inner
   och texten blev grå. Tvinga arket att ärva den mörka färgen. */
.hs-sheet-body p, .hs-sheet-body li, .hs-sheet-body h1, .hs-sheet-body h2, .hs-sheet-body h3, .hs-sheet-body h4, .hs-sheet-body blockquote { color: inherit; }
/* Återanvändbart centrerat stäng-kryss (ritat -> font-oberoende). Läggs som klass
   `close-x` på en position:relative/absolute-knapp med font-size:0. Se viewer.css. */
.close-x::before, .close-x::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: currentColor; }
.close-x::before { transform: translate(-50%, -50%) rotate(45deg); }
.close-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.hs-sheet-close { position: absolute; top: 0.5rem; right: 0.5rem; width: 30px; height: 30px; padding: 0; background: none; border: none; border-radius: 3px; font-size: 0; cursor: pointer; color: inherit; }
.hs-sheet-close:hover { background: rgba(0, 0, 0, 0.08); }
@media (max-width: 640px) {
	.hs-sheet { padding: 0; }
	.hs-sheet-inner { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; }
}
/* "Läs mer"-knapp i tooltipen för expanderbara hotspots (visas bara vid hover/tap). */
.hs-more { display: block; margin: 0 auto; background: #fff; color: #000; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 3px; padding: 0.25em 0.7em; font: inherit; font-size: 0.85em; font-weight: 600; cursor: pointer; }
.hs-more:hover { background: #f8f8f8; }
/* Ta bort pannellums lösa pil - rutan sitter tätt intill hotspoten i stället. */
.pnlm-tooltip:hover .hs-md::after { display: none; }
/* Utökat, kontinuerligt hover-område: osynlig brygga runt hotspoten och upp i
   glappet mot rutan, så man inte tappar hovern på väg mot "Läs mer". */
.pnlm-hotspot.pnlm-info.pnlm-tooltip::before { content: ""; position: absolute; left: -16px; right: -16px; top: -20px; bottom: -12px; }

/* Markdown i info-hotspot-tooltips. Bredare + normal radbrytning så korta ord
   inte bryts (pannellums default gav t.ex. "Test123" mellan 2 och 3). */
.pnlm-tooltip span.hs-md {
	/* Autopassad bredd: hela radens bredd (en rad ryms) upp till max, sedan wrap.
	   (Utan detta krymper abs-positionen till längsta ordet -> "Gå hit" bröts.) */
	width: max-content;
	max-width: 440px;
	text-align: left;
	white-space: normal;
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: none;
	line-height: 1.45;
}
/* Scen-hotspotens "leder till"-etikett: nedanför hotspoten (teaser ligger ovanför).
   Överrid pannellums default-span (margin-left:-220px, ingen left/top). */
.pnlm-tooltip span.hs-scenelabel { margin-left: 0; left: 50%; top: 44px; transform: translateX(-50%); max-width: 260px; white-space: nowrap; background: rgba(0, 0, 0, 0.72); font-size: 0.82em; padding: 3px 8px; }
/* Pekartriangeln i gapet OVANFÖR etiketten (pekar upp mot hotspoten), inte under. */
.pnlm-tooltip:hover span.hs-scenelabel::after { top: -13px; bottom: auto; border-color: transparent transparent rgba(0, 0, 0, 0.72) transparent; }
.hs-md p { margin: 0.3em 0; }
.hs-md p:first-child { margin-top: 0; }
.hs-md p:last-child { margin-bottom: 0; }
.hs-md h1, .hs-md h2, .hs-md h3, .hs-md h4 { margin: 0.4em 0 0.2em; font-size: 1.05em; }
.hs-md ul, .hs-md ol { margin: 0.3em 0; padding-left: 1.2em; }
.hs-md a { color: #7cc0ff; }
.hs-md img { display: block; max-width: 100%; height: auto; border-radius: 3px; }
.hs-md code { background: rgba(255, 255, 255, 0.18); padding: 0 0.3em; border-radius: 3px; }

/* Renderad markdown (arbetsgångstext, kommande hotspot-innehåll). */
.markdown-body { font-size: 0.92rem; max-height: 60vh; overflow-y: auto; line-height: 1.55; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 1rem 0 0.4rem; line-height: 1.25; }
.markdown-body h1 { font-size: 1.4rem; }
.markdown-body h2 { font-size: 1.2rem; }
.markdown-body h3 { font-size: 1.05rem; }
.markdown-body p, .markdown-body ul, .markdown-body ol { margin: 0.5rem 0; }
.markdown-body ul, .markdown-body ol { padding-left: 1.4rem; }
.markdown-body code { background: var(--pico-code-background-color, #eee); padding: 0.1em 0.35em; border-radius: 0.25rem; font-size: 0.88em; }
.markdown-body pre { background: var(--pico-code-background-color, #eee); padding: 0.7rem; border-radius: 0.35rem; overflow-x: auto; }
.markdown-body pre code { background: none; padding: 0; }
.markdown-body img { max-width: 100%; height: auto; border-radius: 0.3rem; }
.markdown-body a { word-break: break-word; }
.markdown-body table { border-collapse: collapse; }
.markdown-body th, .markdown-body td { border: 1px solid var(--pico-muted-border-color); padding: 0.3rem 0.5rem; }

.upload-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}
@media (min-width: 700px) {
	.upload-grid { grid-template-columns: 1fr 1fr; }
}

.notice { border-left: 4px solid var(--svk-warn); }

/* --- Team: medlems-åtgärdsmeny (⋯) ----------------------------------- */
.member-actions { margin: 0; }
.member-actions > summary { width: auto; padding: .1rem .6rem; margin: 0; line-height: 1; }
.member-actions ul { min-width: 190px; }
.member-actions li { padding: 0; }
.member-actions li form { margin: 0; }
.member-actions li form button.member-menu-item {
	display: block; width: 100%; text-align: left; margin: 0; border: 0; border-radius: 0;
	background: transparent; color: inherit; padding: .4rem .8rem; cursor: pointer; font-size: inherit;
}
.member-actions li form button.member-menu-item:hover { background: var(--pico-dropdown-hover-background-color, rgba(0,0,0,.06)); }
.member-actions li form button.member-menu-item.danger { color: var(--svk-danger, #b5342f); }
.member-switch { display: flex; align-items: center; gap: .5rem; padding: .4rem .8rem; margin: 0; cursor: pointer; }
.member-switch input { margin: 0; }

/* --- Redigerings-topbar (stegnav + lås-pill i EN full-bredd bar) ------- */
.editor-topbar {
	display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .6rem;
	padding: .4rem .8rem;
	background: var(--pico-background-color);
	border-bottom: 1px solid var(--pico-muted-border-color);
}
/* Fullscreen-stegen (plan/scenes/preview/translate) döljer site-header -> baren
   fixeras överst i stället. Upload ligger kvar i normalt dokumentflöde under
   site-header. */
body.plan-fullscreen .editor-topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 2000;
}
/* Baren finns ALLTID på fullscreen-sidorna (inte bara vid lås) -> reservera dess
   höjd alltid. JS mäter offsetHeight -> --topbar-h (radbryter t.ex. lås-pillen på
   smala skärmar, höjden varierar). */
body.plan-fullscreen main.plan-app {
	margin-top: var(--topbar-h, 0); height: calc(100vh - var(--topbar-h, 0px));
}
/* flex: 0 1 auto + min-width: 0 (inte "none") -> pillen FÅR krympa/radbryta sin
   text på smala skärmar i stället för att tvinga fram horisontell overflow
   (den längre "Utcheckad av X"-texten ryms annars inte vid 390px). */
.editor-topbar-lock { margin-left: auto; flex: 0 1 auto; min-width: 0; max-width: 100%; }
.editor-topbar-lock:empty { display: none; }
.lock-pill {
	display: flex; align-items: center; flex-wrap: wrap; gap: .3rem .5rem;
	max-width: 100%; box-sizing: border-box;
	padding: .3rem .7rem; border-radius: 1rem; font-size: .8rem; color: #fff;
}
.lock-pill.lock-mine { background: rgba(47, 111, 79, .92); }      /* du redigerar */
.lock-pill.lock-other { background: rgba(181, 52, 47, .95); font-weight: 600; }  /* låst av annan */
.lock-pill .lock-btn {
	margin: 0; width: auto; padding: .1rem .6rem; font-size: .75rem;
	background: rgba(255, 255, 255, .18); color: #fff; border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 1rem; cursor: pointer;
}
.lock-pill .lock-btn:hover { background: rgba(255, 255, 255, .3); }
/* Läsläge: tona ner + spärra formulär-spar (servern ger 409 som riktig garanti). */
body.editor-locked button[type="submit"] { opacity: .5; pointer-events: none; }

/* --- Projektlista: lista/kort-växel + kort ---------------------------- */
/* /editor: vänster arbetsyte-sidopanel + huvudyta. */
.editor-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.editor-main { flex: 1; min-width: 0; }
.editor-side { flex: none; width: 12rem; }
.ws-tabs { display: flex; flex-direction: column; gap: .15rem; position: sticky; top: 1rem; }
.ws-tab {
	display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
	padding: .45rem .6rem; border: 1px solid transparent; border-radius: var(--pico-border-radius);
	/* color: inherit -> Pico sätter --pico-color till vitt INUTI knappar, så var(--pico-color)
	   blir vit-på-vit; inherit tar body-textfärgen i stället. */
	background: none; color: inherit; font-size: .9rem; line-height: 1.2; cursor: pointer;
}
.ws-tab:hover { background: var(--pico-muted-border-color); }
.ws-tab.active { background: var(--svk-accent, #2f6f4f); color: #fff; }
.ws-tab-icon { width: 1.5rem; height: 1.5rem; flex: none; font-size: .7rem; }
.ws-tab-icon .avatar-initial { font-size: .7rem; }
.ws-tab-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-search {
	flex: 1; max-width: 22rem; margin: 0 auto 0 0; padding: .35rem .6rem; height: auto;
	font-size: .9rem;
}
.ws-empty { color: var(--pico-muted-color); padding: 1.5rem 0; text-align: center; }
.ws-hidden { display: none !important; }  /* slår .tour-card { display: flex } (samma specificitet, senare i filen) */
@media (max-width: 720px) {
	/* align-items: flex-start styr normalt korsaxeln (vertikalt) i radläge, men i
	   kolumnläge blir det horisontellt -> .editor-main krymper till innehållets
	   bredd (t.ex. den breda tabellen) i stället för att sträckas till full
	   bredd, vilket blåser ut hela sidan. Sträck ut i kolumnläge. */
	.editor-layout { flex-direction: column; align-items: stretch; }
	.editor-side { width: 100%; }
	.ws-tabs { flex-direction: row; flex-wrap: wrap; position: static; }
	.ws-tab { width: auto; }
}
.list-toolbar { display: flex; align-items: center; gap: .6rem; justify-content: flex-end; margin-bottom: .6rem; }
.view-toggle { display: inline-flex; width: auto; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden; }
.view-toggle .view-btn {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.1rem; height: 1.9rem; padding: 0; margin: 0; border: 0; border-radius: 0;
	background: transparent; color: var(--pico-muted-color); cursor: pointer;
}
.view-toggle .view-btn + .view-btn { border-left: 1px solid var(--pico-muted-border-color); }
.view-toggle .view-btn:hover { color: var(--pico-color); }
.view-toggle .view-btn.active { background: var(--svk-accent, #2f6f4f); color: #fff; }

#projects-views[data-view="table"] .tour-cards { display: none; }
#projects-views[data-view="cards"] .projects-table { display: none; }
/* Tabellen ryms inte på smal mobil (flera kolumner) - låt den skrolla
   horisontellt inom sig själv i stället för att blåsa ut hela sidan. */
#projects-views[data-view="table"] { overflow-x: auto; }

.tour-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.tour-card {
	border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius);
	overflow: hidden; display: flex; flex-direction: column; margin: 0;
}
.tour-card-thumb {
	position: relative; display: block; aspect-ratio: 16 / 9; background: var(--pico-code-background-color, #eee);
	overflow: hidden;
}
.tour-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tour-card-empty {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: var(--pico-muted-color); font-size: .85rem;
}
/* Live-pannellum vid hover ovanpå tumnageln - klick går ändå till länken. */
.tour-card-live { position: absolute; inset: 0; pointer-events: none; }
.tour-card-live .pnlm-container { background: transparent; }
.tour-card-body { padding: .6rem .7rem; display: flex; flex-direction: column; gap: .35rem; }
.tour-card-body .tour-name { font-weight: 600; }
.tour-card-meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .8rem; }
.tour-card-ws { color: var(--pico-muted-color); }
.tour-card-mod { color: var(--pico-muted-color); }
/* Utcheckad/låst tur: pil-badge med hänglås-ikon intill turnamn (list) resp. i kort-metan. */
.lock-badge {
	display: inline-flex; align-items: center; gap: .3em; font-size: .72rem; font-weight: 600;
	line-height: 1; padding: .2rem .45rem; border-radius: .35rem; white-space: nowrap;
	color: var(--svk-warn, #b5872b); background: color-mix(in srgb, var(--svk-warn, #b5872b) 18%, transparent);
	border: 1px solid color-mix(in srgb, var(--svk-warn, #b5872b) 55%, transparent);
}
/* Hänglås-ikon i badge-färgen (mask -> ärver currentColor, funkar även för lock-mine). */
.lock-badge::before {
	content: ""; width: .9em; height: .9em; flex: none; background: currentColor;
	-webkit-mask: var(--lock-svg) center/contain no-repeat; mask: var(--lock-svg) center/contain no-repeat;
}
:root { --lock-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a5 5 0 0 0-5 5v3H6a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8a2 2 0 0 0-2-2h-1V7a5 5 0 0 0-5-5zm-3 8V7a3 3 0 0 1 6 0v3H9z'/%3E%3C/svg%3E"); }
.lock-badge.lock-mine {
	color: var(--pico-muted-color); background: var(--pico-muted-border-color);
	border-color: var(--pico-muted-border-color);
}
/* Utcheckad av NÅGON ANNAN -> dämpa tumnagel + namn så turen läses som "inte redigerbar nu"
   (badgen själv förblir skarp; egen utcheckning dämpas inte). */
.lock-other .tour-name,
tr.lock-other td:first-child .tour-name { opacity: .5; }
.lock-other .tour-card-thumb { opacity: .45; }
.tour-card-body form { margin: 0; }
.tour-card-body form button { margin: 0; width: 100%; }

/* --- Versionshistorik ------------------------------------------------- */
.hist-nav { display: flex; gap: .5rem; margin-bottom: 1rem; }
.hist-blurb { color: var(--pico-muted-color); font-size: .9rem; max-width: 60ch; }
.restored-notice { border-left-color: var(--svk-ok, #2e7d32); }
.hist-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.hist-item {
	padding: .7rem .9rem; border: 1px solid var(--pico-muted-border-color);
	border-radius: var(--pico-border-radius); margin-bottom: .5rem;
}
.hist-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.hist-meta { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hist-time { font-weight: 600; }
.hist-hint { color: var(--pico-muted-color); font-size: .85rem; }
.hist-item form { margin: 0; flex-shrink: 0; }
.hist-item form button { margin: 0; }

/* Växel: jämför diffen mot föregående version eller mot nuläget */
.hist-basetoggle { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 .3rem; flex-wrap: wrap; }
.hist-basetoggle-label { font-size: .85rem; color: var(--pico-muted-color); }
.hist-basetoggle .base-btn {
	font-size: .8rem; padding: .2rem .7rem; margin: 0; width: auto;
	border: 1px solid var(--pico-muted-border-color); border-radius: 1rem;
	background: transparent; color: var(--pico-color); cursor: pointer;
}
.hist-basetoggle .base-btn.active {
	background: var(--svk-accent, #2f6f4f); color: #fff; border-color: var(--svk-accent, #2f6f4f);
}

/* Expanderbar semantisk diff per version */
.hist-diff { margin-top: .5rem; }
.hist-diff > summary {
	cursor: pointer; font-size: .85rem; color: var(--pico-muted-color);
	list-style-position: inside;
}
.hist-diff[open] > summary { margin-bottom: .4rem; }
.hist-diff-body { font-size: .85rem; }
.hist-diff-loading, .diff-empty { color: var(--pico-muted-color); }

/* Grupp-accordion (Scener, Karta, ...) - öppet som default */
.diff-group { margin: .2rem 0; }
.diff-group > summary.diff-group-title {
	cursor: pointer; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em;
	color: var(--pico-muted-color); font-weight: 600; padding: .15rem 0;
}
/* Nästlade nodlistor indenteras (utom gruppens direkta lista) */
.diff-nodes { margin: 0; }
.diff-node > .diff-nodes,
.diff-section > .diff-nodes,
.diff-item > .diff-nodes { padding-left: 1.3rem; }

.diff-line {
	padding: .05rem 0; line-height: 1.45;
	font-family: var(--pico-font-family-monospace, monospace);
	white-space: pre-wrap; word-break: break-word;
}
.diff-sym { display: inline-block; width: 1ch; font-weight: 700; text-align: center; }
.diff-add { color: var(--svk-ok, #2f6f4f); }
.diff-del { color: var(--svk-danger, #b02a37); }
.diff-chg { color: var(--svk-warn, #b5872b); }

/* Scen-accordion (kollapsat) */
.diff-node { margin: .05rem 0; }
.diff-node > summary.diff-summary { cursor: pointer; list-style-position: inside; }
.diff-node > summary.diff-summary::-webkit-details-marker { display: none; }

/* Sektionsrubrik inuti en scen (t.ex. Hotspots) */
.diff-section { margin: .25rem 0; }
.diff-section-title {
	font-size: .78rem; font-weight: 600; color: var(--pico-muted-color);
	margin: .15rem 0;
}

/* --- Planeringsvy (helskärm: vänsterpanel 100% hög + autopassande karta) - */

.plan-fullscreen .site-header { display: none; }

main.plan-app {
	max-width: none;
	padding: 0;
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
@media (min-width: 768px) {
	main.plan-app { flex-direction: row; }
}

.planner-side {
	flex: none;
	padding: 0.75rem 0.9rem;
	overflow-y: auto;
	border-bottom: 1px solid var(--pico-muted-border-color);
}
@media (min-width: 768px) {
	.planner-side {
		width: 21rem;
		height: 100vh;
		border-bottom: none;
		border-right: 1px solid var(--pico-muted-border-color);
	}
}

.plan-topnav {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-start; /* Pico ger nav space-between - packa vänster i stället */
	gap: 0.4rem;
	margin: 0;
}
.plan-heading { margin-bottom: 1rem; }
.plan-heading h2 { margin-bottom: 0.1rem; }
.plan-heading p { font-size: 0.85rem; color: var(--pico-muted-color); margin: 0; }

/* Hopfällbara panelgrupper (preview-steget): grupperar tema/beteende/publicera så
   panelen inte blir 4+ skärmar att skrolla. Öppet/stängt sparas i localStorage. */
.panel-group { border: 1px solid var(--pico-muted-border-color); border-radius: 0.4rem; margin-bottom: 0.6rem; overflow: hidden; }
.panel-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 0.75rem; font-weight: 600; background: var(--pico-card-sectioning-background-color, rgba(115, 130, 140, 0.06)); }
.panel-group > summary::-webkit-details-marker { display: none; }
.panel-group > summary::after { content: "\25BE"; color: var(--pico-muted-color); transition: transform 0.15s ease; }
.panel-group:not([open]) > summary::after { transform: rotate(-90deg); }
.panel-group > summary:hover { background: var(--pico-card-sectioning-background-color, rgba(115, 130, 140, 0.12)); }
.panel-group-body { padding: 0 0.75rem; }
/* Artiklar inuti en grupp = sektioner utan egen kort-chrome, delade av en tunn linje. */
.planner-side .panel-group-body article { border: none; box-shadow: none; background: none; margin: 0; padding: 0.7rem 0; border-top: 1px solid var(--pico-muted-border-color); }
.planner-side .panel-group-body article:first-child { border-top: none; }
/* Alltid synlig spar-rad längst ner i panelen (planner-side är skroll-container). */
.panel-save-bar { position: sticky; bottom: 0; margin: 0.4rem -0.9rem -0.75rem; padding: 0.55rem 0.9rem; background: var(--pico-background-color, #fff); border-top: 1px solid var(--pico-muted-border-color); }
.panel-save-bar .dirty-badge { margin-top: 0; }

.planner-map {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0.5rem;
}
.planner-map .map-stage { width: auto; max-width: 100%; max-height: 100%; }
.planner-map .map-stage img#map-image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
}

.planner-side article { margin-bottom: 1rem; }
.planner-side .hint { font-size: 0.85rem; color: var(--pico-muted-color); }

#save-map-btn, #save-tour-btn { background: var(--svk-ok); border-color: var(--svk-ok); }

.tool-row {
	display: flex;
	gap: 0.4rem;
	margin-bottom: 0.5rem;
}
.tool-row button {
	flex: 1;
	margin: 0;
	padding: 0.4rem 0.3rem;
	font-size: 0.85rem;
}
.tool-row button[aria-pressed="true"] {
	background: var(--svk-accent);
	color: var(--pico-primary-inverse);
	border-color: var(--svk-accent);
}

.graph-arrow { fill: var(--svk-edge); }

.unplaced-item { display: flex; gap: 0.3rem; align-items: stretch; }
.unplaced-item .arm-btn { flex: 1; }
.unplaced-item .del-fully {
	flex: none;
	width: 2.4rem;
	padding: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--svk-danger);
	border: 1px solid var(--svk-danger);
	color: #fff;
	font-size: 0.9rem;
	line-height: 1;
}
.unplaced-item .del-fully:hover { filter: brightness(1.1); }

#next-step-link[aria-disabled="true"] {
	pointer-events: none;
	opacity: 0.55;
}

.unplaced-list { list-style: none; padding: 0; margin: 0; }
.unplaced-list li { margin-bottom: 0.4rem; }
.unplaced-list button {
	width: 100%;
	text-align: left;
	padding: 0.4rem 0.7rem;
	margin: 0;
}
.unplaced-list button[aria-pressed="true"] {
	background: var(--svk-marker-armed);
	color: var(--pico-primary-inverse);
	border-color: var(--svk-marker-armed);
}

.planner-map { min-width: 0; }

.map-stage {
	position: relative;
	width: 100%;
	line-height: 0;
	background: var(--pico-card-background-color);
	border: 1px solid var(--pico-muted-border-color);
	touch-action: none;
	user-select: none;
}
.map-stage img#map-image {
	display: block;
	width: 100%;
	height: auto;
}
#edges-layer, #markers-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
#edges-layer { pointer-events: none; }

/* stroke-width sätts i user-units av plan.js (`--edge-sw` = 3/skala) så linjen blir
   konstant ~3px på skärmen oavsett kartstorlek/zoom. non-scaling-stroke biter inte på
   ancestor CSS-transformen och är därför borttagen. Fallback 3 innan JS hunnit sätta den. */
.graph-edge {
	stroke: var(--svk-edge);
	stroke-width: var(--edge-sw, 3);
}
.graph-rubber {
	stroke: var(--svk-rubber);
	stroke-width: var(--edge-sw, 3);
	stroke-dasharray: calc(var(--edge-sw, 3) * 2) calc(var(--edge-sw, 3) * 1.3);
}
/* Rubbern när ett släpp tar bort länken: heldragen röd ovanpå länken. */
.graph-rubber.removing {
	stroke: var(--svk-danger);
	stroke-width: 4;
	stroke-dasharray: none;
}
/* ✕ vid de två scenerna vars länk tas bort. */
.edge-remove-x {
	position: absolute;
	transform: translate(-50%, -50%);
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--svk-danger);
	color: #fff;
	border: 2px solid var(--pico-background-color);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: bold;
	pointer-events: none;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
	z-index: 5;
}

.scene-marker {
	position: absolute;
	width: 1.6rem;
	height: 1.6rem;
	margin-left: -0.8rem;
	margin-top: -0.8rem;
	border-radius: 50%;
	background: var(--svk-marker);
	border: 2px solid var(--pico-background-color);
	color: #fff;
	font-size: 0.75rem;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: grab;
	pointer-events: auto;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.scene-marker:active { cursor: grabbing; }
.scene-marker.linking-from { outline: 3px solid var(--svk-rubber); }

/* --- Toast --------------------------------------------------------------- */

#toast-container {
	position: fixed;
	bottom: 1rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	align-items: center;
	pointer-events: none;
}
.toast {
	background: var(--pico-contrast-background);
	color: var(--pico-contrast);
	padding: 0.5rem 1rem;
	border-radius: 0.4rem;
	opacity: 0;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-error { background: var(--svk-danger); color: #fff; }
.toast-ok { background: var(--svk-ok); color: #fff; }

/* Stegindikator (wizard) */
.stepper {
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
}
.stepper > span,
.stepper > a {
	padding: 0.3rem 0.8rem;
	border-radius: 999px;
	background: var(--pico-card-sectioning-background-color, #f0f0f0);
	text-decoration: none;
}
.stepper > [aria-current="step"] {
	background: var(--pico-primary, #0172ad);
	color: #fff;
	font-weight: 600;
}
.step-nav {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 1rem;
}
.step-nav [role="button"] {
	margin: 0;
}
.delete-btn {
	margin: 0;
	padding: 0.25rem 0.6rem;
	font-size: 0.85rem;
}

/* --- Hover-preview (auto-roterande mini-panorama) --- */
#scene-preview {
	position: fixed;
	z-index: 2000;
	width: 320px;
	pointer-events: none;
	display: none;
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
	background: #000;
}
/* Högre specificitet än pannellums .pnlm-container{height:100%} (som annars
   vinner och kollapsar rutan eftersom boxen saknar fast höjd). */
#scene-preview .scene-preview-inner { width: 320px; height: 180px; }
.scene-preview-cap {
	font-size: 0.8rem;
	padding: 0.2rem 0.55rem;
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
}
#scene-preview.pinned { box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6); outline: 2px solid var(--svk-accent); }
.scene-preview-actions {
	display: flex;
	gap: 0.3rem;
	padding: 0.35rem;
	background: rgba(0, 0, 0, 0.85);
}
.scene-preview-actions:empty { display: none; }
.scene-preview-btn {
	flex: 1;
	margin: 0;
	padding: 0.3rem 0.4rem;
	font-size: 0.8rem;
	border: none;
	border-radius: 0.3rem;
	background: #444;
	color: #fff;
	cursor: pointer;
}
.scene-preview-btn.danger { background: var(--svk-danger); }
tr[data-preview-scene] { cursor: help; }

/* --- Uppladdnings-overlay (async progress) --- */
#upload-overlay {
	position: fixed;
	inset: 0;
	z-index: 3000;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
#upload-overlay[hidden] { display: none; }
#upload-overlay article {
	max-width: 30rem;
	width: 100%;
	text-align: center;
	margin: 0;
}
#upload-overlay progress { width: 100%; }

/* Per-fil-status i uppladdnings-overlayn */
.upload-filelist {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	max-height: 40vh;
	overflow-y: auto;
	text-align: left;
	font-size: 0.85rem;
}
.ufile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.3rem 0.1rem;
	border-bottom: 1px solid var(--pico-muted-border-color);
}
.ufile-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 0 1 auto;
}
.ufile-bar {
	flex: 1;
	height: 0.5rem;
	min-width: 4rem;
	margin: 0;
}
.ufile-status {
	flex: none;
	min-width: 5.5rem;
	text-align: right;
	color: var(--pico-muted-color);
	font-variant-numeric: tabular-nums;
}
.ufile-uploading { color: var(--pico-primary); }
.ufile-done { color: var(--svk-ok); }
.ufile-error { color: var(--svk-danger); }

/* Förhandsvisning: scenbläddring + karta */
.scene-browse {
	position: absolute;
	bottom: 0.8rem; left: 50%;
	transform: translateX(-50%);
	z-index: 15;
	display: flex; align-items: center; gap: 0.5rem;
	background: rgba(0, 0, 0, 0.6);
	color: #fff;
	padding: 0.3rem 0.6rem;
	border-radius: 0.4rem;
	font-size: 0.9rem;
}
.scene-browse button { margin: 0; padding: 0.15rem 0.6rem; width: auto; }
/* Karta i preview: samma pannellum-kontrollstil och fäll in/ut-beteende som
   runtime-vieweren (WYSIWYG). Stäng-knappen i egen rad ovanför kartbilden så den
   aldrig täcker en kartprick. */
.preview-map {
	position: absolute;
	top: 4px; right: 4px;
	z-index: 15;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.55);
	padding: 4px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.preview-map[hidden] { display: none; }
.panorama-wrap .map-toggle {
	position: absolute; top: 4px; right: 4px; z-index: 16;
	height: 26px; padding: 0 12px; font-size: 14px; line-height: 24px;
	color: #000; background: #fff; border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px; cursor: pointer;
}
.panorama-wrap .map-toggle:hover { background: #f8f8f8; }
.panorama-wrap .map-toggle[hidden] { display: none; }
/* Förhandsvisningsspråk: flagg-overlay ovanpå panoramat, placerad under
   pannellums verktygsknappar av tour-preview.js (positionPreviewLangToggle) -
   SAMMA vita pannellum-kontrollstil som runtime-vieweren (.lang-toggle i
   viewer.css), inte editorns Pico-tema (mountLangDropdown defaultar annars
   dit, se .lang-dd-* ovan). */
.panorama-wrap .lang-dropdown-overlay { position: absolute; z-index: 16; }
.panorama-wrap .lang-dropdown-overlay[hidden] { display: none; }
.panorama-wrap .lang-dropdown-overlay .lang-dd-current {
	display: block; width: 30px; height: 24px; padding: 0;
	background: #fff; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 3px;
	cursor: pointer; overflow: hidden;
}
.panorama-wrap .lang-dropdown-overlay .lang-dd-current:hover { border-color: rgba(0, 0, 0, 0.7); }
.panorama-wrap .lang-dropdown-overlay .lang-dd-current img { display: block; width: 100%; height: 100%; object-fit: cover; }
.panorama-wrap .lang-dropdown-overlay .lang-dd-name { display: none; }
.panorama-wrap .lang-dropdown-overlay .lang-dd-menu {
	min-width: 150px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.panorama-wrap .lang-dropdown-overlay .lang-dd-item { font-size: 14px; padding: 7px 11px; color: #000; background: #fff; }
.panorama-wrap .lang-dropdown-overlay .lang-dd-item:hover { background: #f0f0f0; }
.panorama-wrap .lang-dropdown-overlay .lang-dd-item.active { background: #e8e8e8; font-weight: 600; }
.panorama-wrap .lang-dropdown-overlay .lang-dd-item img { width: 22px; height: 16px; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 1px; }
.preview-map .map-bar { display: flex; justify-content: flex-end; line-height: 0; }
.preview-map .map-close {
	position: relative;
	width: 26px; height: 26px; padding: 0; font-size: 0;
	color: #000; background: #fff; border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px; cursor: pointer;
}
.preview-map .map-close:hover { background: #f8f8f8; }
.preview-map[data-size="small"] { width: 160px; }
.preview-map[data-size="medium"] { width: 260px; }
.preview-map[data-size="large"] { width: 380px; }
.pv-map-inner { position: relative; line-height: 0; }
.preview-map img { display: block; width: 100%; height: auto; border-radius: 2px; }
#preview-map-dots { position: absolute; inset: 0; }
/* Temavariabler sätts live på .panorama-wrap av tour-preview.js. */
.panorama-wrap { --dot-color: #666666; --current-dot-color: #8b0000; }
.preview-dot {
	position: absolute;
	width: 12px; height: 12px;
	margin: -6px 0 0 -6px; padding: 0;
	border-radius: 50%;
	/* Fallback så prickar syns även utanför .panorama-wrap (t.ex. startscen-modalen)
	   där temavariablerna inte är definierade. */
	background: var(--dot-color, #666666); border: 2px solid #fff;
	cursor: pointer;
}
.preview-dot:hover { transform: scale(1.2); }
.preview-dot.current { background: var(--current-dot-color, #8b0000); }
/* Live-typsnitt i förhandsvisningen. Pannellum sätter font-family på
   .pnlm-container och ALL text (titel, info, hotspot-tooltips) ärver därifrån -
   så temats typsnitt måste override:a just containern, inte bara titelboxen. */
.panorama-wrap .pnlm-container { font-family: var(--tour-font, inherit) !important; }
/* Scennamn-box: 4px vänster + full 3px-radie + standard-padding (som runtime). */
.panorama-wrap .pnlm-panorama-info { left: 4px; border-radius: 3px; padding: 4px 8px; }
.panorama-wrap .pnlm-panorama-info .pnlm-title-box, .panorama-wrap .pnlm-panorama-info .pnlm-author-box { padding-left: 0; margin-bottom: 0; }
/* Branding-överlägg i förhandsvisningen (samma look som runtime men containad i
   wrap i stället för fixed). Storleks-/positionsklasserna delas med viewer.css. */
.panorama-wrap .tour-branding {
	position: absolute;
	z-index: 16;
	color: #fff;
	background: rgba(0, 0, 0, 0.4);
	border-radius: 3px;
	padding: 4px 8px;
	line-height: 1.3;
}
.panorama-wrap .tour-branding[hidden] { display: none; }
.panorama-wrap .tour-branding p { margin: 0.2em 0; }
.panorama-wrap .tour-branding p:first-child { margin-top: 0; }
.panorama-wrap .tour-branding p:last-child { margin-bottom: 0; }
.panorama-wrap .tour-branding img { display: block; max-width: 100%; height: auto; }
.panorama-wrap .tour-branding a { color: #7cc0ff; }
.tour-branding.branding-small { max-width: 130px; font-size: 0.8em; }
.tour-branding.branding-medium { max-width: 200px; font-size: 0.95em; }
.tour-branding.branding-large { max-width: 300px; font-size: 1.15em; }
.panorama-wrap .tour-branding.branding-bottom-left { bottom: 39px; left: 4px; }
.panorama-wrap .tour-branding.branding-bottom-right { bottom: 4px; right: 4px; }
.panorama-wrap .tour-branding.branding-top-left { top: 4px; left: 36px; }
.panorama-wrap .tour-branding.branding-top-right { top: 34px; right: 4px; }
.branding-opts { display: flex; gap: 0.8rem; margin-top: 0.4rem; }
.branding-opts label { flex: 1; margin-bottom: 0; }
.branding-sep { margin: 1rem 0 0.6rem; border: none; border-top: 1px solid var(--pico-muted-border-color, rgba(115, 130, 140, 0.3)); }
/* EasyMDE i preview-sidopanelen: Pico kapar --pico-color till vit på <button>, så
   ikonerna blir vita. Toolbaren är transparent -> kortytan är tema-styrd, sätt därför
   explicit tema-medveten färg (fast #2c3e50 var osynlig i dark mode, mörk-på-mörk).
   Samma mönster som hotspot-modalen (#hs-field-text). Hover-bg är fast ljus -> mörk. */
.planner-side .editor-toolbar button, .planner-side .editor-toolbar button i { color: var(--svk-editor-icon); }
.planner-side .editor-toolbar button:hover, .planner-side .editor-toolbar button.active,
.planner-side .editor-toolbar button:hover i, .planner-side .editor-toolbar button.active i { color: #1f2937; }

/* --- Mall-bibliotek (preset-library.js): /mallar-sidan + väljar-modal --- */
/* Bredare än login-formulär (ärver annars .login-section 26rem), som /media. */
.login-section.preset-manage { max-width: 64rem; }
.preset-section { margin-bottom: 1.5rem; }
.preset-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; }
.preset-section-head h3 { margin: 0; }
.preset-new { margin: 0; padding: 0.3rem 0.8rem; font-size: 0.9rem; white-space: nowrap; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 0.8rem; margin-top: 0.6rem; }
.preset-card { margin: 0; padding: 0.7rem; border: 1px solid var(--pico-muted-border-color, rgba(115, 130, 140, 0.3)); border-radius: 3px; display: flex; flex-direction: column; gap: 0.5rem; background: var(--pico-card-background-color, #fff); }
.preset-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.preset-card-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preset-star { flex: none; margin: 0; padding: 0.1rem 0.45rem; font-size: 0.72rem; line-height: 1.5; border: 1px solid var(--pico-muted-border-color, rgba(115, 130, 140, 0.4)); border-radius: 3px; background: none; color: var(--pico-muted-color); cursor: pointer; white-space: nowrap; }
.preset-star.active { background: var(--svk-accent, #1e73d8); border-color: transparent; color: #fff; }
.preset-theme-body { display: flex; flex-direction: column; gap: 0.4rem; }
.preset-swatches { display: flex; gap: 0.8rem; }
.preset-swatch { display: flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--pico-muted-color); }
.preset-swatch-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.25); }
.preset-font-sample { font-size: 1.15rem; line-height: 1.2; }
.preset-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.preset-badge { font-size: 0.72rem; padding: 0.1rem 0.4rem; border-radius: 3px; background: var(--pico-muted-border-color, rgba(115, 130, 140, 0.18)); color: var(--pico-color); }
/* Branding-kortets scen: neutral bakgrund där den renderade overlayn visas statiskt. */
.preset-brand-stage { min-height: 62px; display: flex; align-items: center; justify-content: center; padding: 0.6rem; border-radius: 3px; background: #6b7280; overflow: hidden; }
.preset-brand-stage .tour-branding { position: static; display: inline-block; max-width: 100%; color: #fff; background: rgba(0, 0, 0, 0.45); border-radius: 3px; padding: 4px 8px; line-height: 1.3; font-size: 0.9rem; }
.preset-brand-stage .tour-branding[hidden] { display: none; }
.preset-brand-stage .tour-branding p { margin: 0.15em 0; }
.preset-brand-stage .tour-branding p:first-child { margin-top: 0; }
.preset-brand-stage .tour-branding p:last-child { margin-bottom: 0; }
.preset-brand-stage .tour-branding img { display: block; max-width: 100%; height: auto; }
.preset-brand-stage .tour-branding a { color: #7cc0ff; }
.preset-card-actions { display: flex; gap: 0.4rem; margin-top: auto; }
/* Alla kort-knappar lika höga (samma padding/line-height) och delar bredden lika. */
.preset-card-actions button { flex: 1; margin: 0; padding: 0.3rem 0.5rem; font-size: 0.85rem; line-height: 1.4; }
/* Väljar-modal: samma help-modal-skal, bredare artikel för rutnätet. */
.preset-modal .preset-article { max-width: min(1000px, 94vw); width: min(1000px, 94vw); }
.preset-modal-body { max-height: 74vh; overflow-y: auto; }
/* Redigera-modal: kompakt formulär. */
.preset-edit-modal .preset-edit-article { max-width: min(560px, 94vw); width: min(560px, 94vw); max-height: 90vh; overflow-y: auto; }
.preset-edit-body { display: flex; flex-direction: column; gap: 0.6rem; }
.preset-edit-body label { display: block; font-size: 0.9rem; margin: 0; }
.preset-edit-body input[type="text"], .preset-edit-body input[type="number"], .preset-edit-body select, .preset-edit-body textarea { width: 100%; margin: 0.2rem 0 0; }
/* Coloris-färgfält: swatchen kvadratisk (aspect-ratio) och full inputhöjd, som editorn.
   Marginalen ligger på .clr-field (inte inputen) så swatchen inte sticker ut ovanför. */
.preset-edit-body .clr-field { display: block; width: 100%; margin-top: 0.2rem; }
.preset-edit-body .clr-field .coloris-input { width: 100%; margin: 0; padding-right: 2.8rem; }
.preset-edit-body .clr-field button { width: auto; aspect-ratio: 1; right: 1px; height: calc(100% - 2px); top: 1px; transform: none; border-radius: 3px; }
.pe-row { display: flex; gap: 0.8rem; }
.pe-row > label, .pe-row > .pe-field { flex: 1; }
.pe-field-label { display: block; font-size: 0.9rem; }
.pe-field .dir-toggle { margin: 0.2rem 0 0; }
.pe-switch { display: flex; align-items: center; gap: 0.5rem; margin: 0; }
.pe-switch input { margin: 0; width: auto; }
/* Rotationsfält utgråade när autorotate är av. */
.preset-edit-body .pe-disabled { opacity: 0.5; pointer-events: none; }
.preset-edit-tools button { margin: 0; padding: 0.2rem 0.7rem; }
.pe-preview { margin: 0.2rem 0; }
.preset-edit-actions { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.preset-edit-actions button { margin: 0; flex: 1; }

/* Tema: färgväljare */
.theme-colors { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.5rem; }
.theme-colors label { display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; margin: 0; }
.theme-colors input[type="color"] { width: 3rem; height: 1.6rem; padding: 0; margin: 0; }
/* Coloris-fält (ersätter native färgväljare) - håll dem smala i den täta tema-raden. */
.theme-colors .clr-field { width: 7.5rem; }
/* Coloris-swatchen ligger 30px till HÖGER -> pad texten åt höger så hela hex-koden
   syns (annars täcks sista siffran). Swatchen görs till en prydlig fyrkant. */
.theme-colors .coloris-input { width: 7.5rem; margin: 0; padding: 0.15rem 2.2rem 0.15rem 0.5rem; height: 1.9rem; font-size: 0.8rem; }
.theme-colors .clr-field button { width: auto; aspect-ratio: 1; right: 2px; height: calc(100% - 4px); top: 2px; transform: none; border-radius: 3px; }

/* Flerspråkighet: kryssrutor för turens språk (ordning = kryssordning) + en
   liten badge som visar plats/standard. Förhandsvisningsspråk-väljaren. */
.lang-checks { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.4rem; }
.lang-check { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.9rem; }
.lang-check input[type="checkbox"] { margin: 0; }
.lang-badge { margin-left: auto; font-size: 0.72rem; padding: 0.05rem 0.45rem; border-radius: 1rem; background: var(--pico-muted-border-color); color: var(--pico-muted-color); }
.lang-badge-default { background: var(--pico-primary); color: var(--pico-primary-inverse, #fff); }

/* Drag-och-släpp-lista för turens språk (ersätter de gamla lang-checks-raderna):
   draghandtag + kryssruta + flagga + namn + ev. standard/ordnings-badge. */
.lang-order-list { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.4rem; }
.lang-order-row {
	display: flex; align-items: center; gap: 0.5rem;
	padding: 0.3rem 0.4rem; border-radius: 3px; font-size: 0.9rem;
	background: var(--pico-card-background-color, #fff);
	border: 1px solid transparent;
}
.lang-order-row:hover { background: var(--pico-muted-border-color, rgba(115, 130, 140, 0.1)); }
.lang-order-row.dragging { opacity: 0.4; border: 1px dashed var(--pico-muted-border-color, rgba(115, 130, 140, 0.5)); }
.lang-order-handle { cursor: grab; color: var(--pico-muted-color); user-select: none; line-height: 1; flex: none; }
.lang-order-row input[type="checkbox"] { margin: 0; flex: none; }
.lang-order-flag { width: 22px; height: 16px; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 1px; flex: none; }
.lang-order-name { flex: 1; }

/* Återanvändbar flagg-dropdown (lang-dropdown.js), Pico-stil för editorns
   sidopanel/modaler (t.ex. branding-språkval, /mallar). Overlay-varianten på
   själva panoramat (.lang-dropdown-overlay) skrivs över längre ner så den
   matchar viewerns vita pannellum-kontrollstil i stället. */
.lang-dropdown { position: relative; display: inline-block; }
.lang-dd-current {
	display: flex; align-items: center; gap: 0.4rem; margin: 0;
	padding: 0.25rem 0.55rem; width: auto;
	border: 1px solid var(--pico-muted-border-color, rgba(115, 130, 140, 0.4));
	border-radius: 3px; background: var(--pico-card-background-color, #fff);
	/* --pico-contrast (INTE --pico-color): Pico ger obeklädda <button> en egen
	   lokal --pico-color (vit, avsedd för fyllda primärknappar) som annars slår
	   igenom här och gör texten osynlig mot den ljusa bakgrunden. */
	color: var(--pico-contrast); cursor: pointer; font-size: 0.85rem; line-height: 1.3;
}
.lang-dd-current:hover { border-color: var(--pico-primary); }
.lang-dd-current img { display: block; width: 22px; height: 16px; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 1px; flex: none; }
.lang-dd-name:empty { display: none; }
.lang-dropdown.open .lang-dd-current { border-color: var(--pico-primary); }
.lang-dd-menu {
	position: absolute; z-index: 40; top: calc(100% + 4px); left: 0;
	min-width: 150px; background: var(--pico-card-background-color, #fff);
	border: 1px solid var(--pico-muted-border-color, rgba(115, 130, 140, 0.4));
	border-radius: 3px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); overflow: hidden;
}
.lang-dd-menu[hidden] { display: none; }
.lang-dd-item {
	display: flex; align-items: center; gap: 0.5rem; width: 100%; margin: 0;
	padding: 0.4rem 0.6rem; border: none; background: none; font: inherit;
	/* --pico-contrast av samma anledning som .lang-dd-current ovan. */
	font-size: 0.85rem; color: var(--pico-contrast); text-align: left; cursor: pointer; border-radius: 0;
}
.lang-dd-item:hover { background: var(--pico-muted-border-color, rgba(115, 130, 140, 0.12)); }
.lang-dd-item.active { background: var(--pico-primary); color: var(--pico-primary-inverse, #fff); font-weight: 600; }
.lang-dd-item img { width: 22px; height: 16px; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 1px; flex: none; }

/* Branding-editorns språkval (ersätter de gamla hs-tabs-flikarna) - liten marginal
   under så EasyMDE inte klistrar sig mot dropdownen. */
.branding-lang-dd { margin-bottom: 0.5rem; }
.branding-lang-dd[hidden] { display: none; }

/* /mallar: branding-presetets språkrad + flaggindikatorer på korten. */
.pe-lang-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.2rem; }
.pe-lang-label { font-size: 0.9rem; }
.preset-lang-flags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.preset-lang-flags img { width: 20px; height: 14px; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 1px; }

/* Scentitel per språk (scen.js) + hotspot-modalens språkväljare. */
/* Scentitel: flagg-dropdown + EN inputruta på samma rad (>1 språk). */
/* Scentitel (>1 språk): flagg-dropdown OVANFÖR inputrutan (staplat), båda i full
   bredd, så både språkvalet och namnfältet får plats. */
.scene-title-row { display: flex; flex-direction: column; gap: 0.35rem; }
.scene-title-row input { margin: 0; width: 100%; }
.scene-title-langs[hidden] { display: none; }
.scene-title-langs .lang-dropdown { width: 100%; }
.scene-title-langs .lang-dd-current { width: 100%; justify-content: flex-start; }
.hs-lang-wrap { margin-bottom: 0.6rem; }
/* Hotspot-modalens "Visa på språk" (scene.js): bockrutor, en per turspråk. */
.hs-langs-wrap { margin-bottom: 0.6rem; }
.hs-langs-boxes { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.hs-langs-box { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0; font-size: 0.9rem; font-weight: normal; }
.hs-langs-box input { margin: 0; }

/* Login / inbjudan / admin */
.login-section { max-width: 26rem; margin: 2rem auto; }
.login-error { background: var(--svk-danger); color: #fff; padding: 0.5rem 0.7rem; border-radius: 0.3rem; font-size: 0.9rem; }
.logout-form { margin: 0; }
/* Stegnavigering: hamburgermeny + kompakta pil-/åtgärdsknappar. */
.step-menu { position: relative; display: inline-flex; margin: 0; }
.step-menu-btn, .step-arrow, .step-action {
	margin: 0; flex: none; display: inline-flex; align-items: center; justify-content: center;
	min-width: 2.4rem; height: 2.4rem; padding: 0 0.7rem; font-size: 1.05rem; line-height: 1;
	cursor: pointer; list-style: none; text-decoration: none;
	border: 1px solid var(--pico-secondary); border-radius: var(--pico-border-radius);
	background: var(--pico-secondary-background); color: var(--pico-secondary-inverse);
}
.step-action { font-size: 0.85rem; }
/* Pico:s a[role=button] (0,1,1) slår gruppregelns display -> tvinga inline-flex
   med högre specificitet så pilglyfen centreras vertikalt. */
.plan-topnav a.step-arrow, .plan-topnav a.step-action { display: inline-flex; align-items: center; justify-content: center; }
.step-menu-btn:hover, .step-arrow:hover, .step-action:hover { background: var(--pico-secondary-hover-background); color: var(--pico-secondary-inverse); }
details.step-menu > summary { list-style: none; }
/* Pico ger `details summary:not([role])` en mörk accordion-färg (0,1,2) som slår
   gruppregelns vita text -> ☰-glyfen blir mörk-på-slate i ljust läge. Högre
   specificitet återställer den vita färgen (som pilarna). */
details.step-menu > summary.step-menu-btn { color: var(--pico-secondary-inverse); }
details.step-menu > summary::-webkit-details-marker { display: none; }
details.step-menu > summary::marker { content: none; }
/* Pico lägger en chevron via summary::after - göm den (vi vill bara hamburgern). */
details.step-menu > summary::after { display: none; }
/* Pico ger summary bottenmarginal i [open] (accordion) -> nolla, annars trycks
   innehållet ner 16px när menyn fälls ut. Menyn är absolut och ska bara overlaya. */
.step-menu[open] > .step-menu-btn { margin-bottom: 0; }
.step-menu[open] > .step-menu-btn { background: var(--pico-secondary-hover-background); }
.step-menu-list { display: none; position: absolute; top: calc(100% + 0.3rem); left: 0; z-index: 3600; min-width: 13rem; flex-direction: column; padding: 0.3rem; background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }
.step-menu[open] > .step-menu-list { display: flex; }
.step-menu-item { display: block; padding: 0.45rem 0.6rem; border-radius: 0.25rem; font-size: 0.9rem; text-decoration: none; color: var(--pico-color); }
a.step-menu-item:hover { background: var(--pico-secondary-background); }
.step-menu-item.current { font-weight: 700; background: var(--pico-secondary-background); }
.step-menu-item.disabled { color: var(--pico-muted-color); cursor: not-allowed; }
.step-menu-home { font-weight: 600; }

/* Alltid synlig stegindikator: var man är + hela flödet, med fulla etiketter -
   baren är nu full bredd så platsbrist inte längre är ett problem på desktop.
   Etiketter göms på smal mobil (se media-query nedan); hamburgaren bär då bara
   Huvudmeny/Versionshistorik, inte stegen (de finns redan här som prickar). */
.step-indicator {
	display: flex; align-items: center; margin: 0; padding: 0; list-style: none;
	flex: 1 1 auto; min-width: 0; flex-wrap: wrap; row-gap: 0.2rem;
}
.step-item { display: flex; align-items: center; flex: none; }
/* Kopplingslinje mellan stegen. */
.step-item:not(:last-child)::after { content: ""; width: 0.9rem; height: 1px; flex: none; background: var(--pico-muted-border-color); }
.step-item > a, .step-item > span {
	display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.35rem;
	font-size: 0.88rem; text-decoration: none; white-space: nowrap; color: var(--pico-color);
}
.step-dot {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.78rem; font-weight: 600;
	border: 1px solid var(--pico-primary); color: var(--pico-primary); background: transparent;
}
.step-item > a:hover { color: var(--pico-primary); }
.step-item > a:hover .step-dot { background: var(--pico-primary); color: var(--pico-primary-inverse); }
/* Aktivt steg: fylld accent + fet etikett. */
.step-item.current > span { font-weight: 700; color: var(--pico-primary); }
.step-item.current .step-dot { background: var(--pico-primary); border-color: var(--pico-primary); color: var(--pico-primary-inverse); }
/* Inaktiverat (förutsättning saknas): dämpat. */
.step-item.disabled > span { color: var(--pico-muted-color); cursor: not-allowed; }
.step-item.disabled .step-dot { border-color: var(--pico-muted-border-color); color: var(--pico-muted-color); }
/* Smal mobil: platsbrist -> visa bara prickar+kopplingslinjer, göm etiketterna.
   Hamburgaren dubblerar då INTE stegen (borttaget ur menyn) - steppern bär dem
   själv, bara kompaktare. */
@media (max-width: 479.98px) {
	.step-item:not(:last-child)::after { width: 0.5rem; }
	.step-item .step-label { display: none; }
}

/* Byt slug: diskret utfällbar sektion på uppladdningssidan. */
.slug-settings { margin: 0.6rem 0 1.2rem; font-size: 0.9rem; border: 1px solid var(--pico-muted-border-color); border-radius: var(--pico-border-radius); overflow: hidden; }
.slug-settings > summary { cursor: pointer; list-style: none; padding: 0.7rem 1rem; font-weight: 600; background: var(--pico-secondary-background); display: flex; align-items: center; gap: 0.5rem; }
.slug-settings > summary::-webkit-details-marker { display: none; }
.slug-settings > summary::before { content: "\2699"; font-size: 1.05rem; }
.slug-settings > summary::after { content: "\25be"; margin-left: auto; opacity: 0.6; }
.slug-settings[open] > summary { border-bottom: 1px solid var(--pico-muted-border-color); }
.slug-settings[open] > summary::after { content: "\25b4"; }
.slug-form { margin: 0; padding: 0.6rem 1rem; max-width: 30rem; }
.slug-form + .slug-form { border-top: 1px dashed var(--pico-muted-border-color); }
.slug-form button { margin: 0; }
.move-workspace { margin: 0; padding: 0.6rem 1rem; max-width: 30rem; border-top: 1px dashed var(--pico-muted-border-color); }
.move-workspace select { margin-bottom: 0.4rem; }
.move-workspace button, .move-workspace form { margin: 0; }
.move-actions { display: flex; gap: 0.4rem; }
.move-actions form { margin: 0; }
.move-actions button { margin: 0; }
.lang-picker-section { margin: 0; padding: 0.6rem 1rem; max-width: 30rem; border-top: 1px dashed var(--pico-muted-border-color); }
.lang-picker-section h3 { margin-top: 0; }

/* Turnamn som primär öppna-länk i projektlistan. */
.tour-name { font-weight: 600; text-decoration: none; }
.tour-name:hover { text-decoration: underline; }

/* Radåtgärder i tabeller (Öppna + Ta bort sida vid sida). */
.row-actions { display: flex; gap: 0.5rem; align-items: center; }
.row-actions form { margin: 0; }
.row-actions .delete-btn { margin: 0; }

/* Inline fältvalidering: hint under fältet, röd via aria-invalid (Pico). */
.field-hint { display: block; color: var(--svk-danger); font-size: 0.8rem; margin: -0.5rem 0 0.6rem; }
.col-avatar { width: 3rem; text-align: center; }
.col-avatar .avatar-sm { display: inline-flex; }
.col-check { width: 2.5rem; text-align: center; }
.batch-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.batch-bar select, .batch-bar button { margin: 0; width: auto; }
.batch-count { color: var(--pico-muted-color); font-size: 0.9rem; }
.col-storage { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.storage-summary { color: var(--pico-muted-color); font-size: 0.9rem; margin-top: 0.4rem; }

/* Lagringsfliken (/admin/storage) */
.storage-totals { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; margin-bottom: 1.2rem; padding: 0.9rem 1.1rem; border: 1px solid var(--pico-muted-border-color); border-radius: 0.4rem; }
.storage-stat { display: flex; flex-direction: column; }
.storage-stat-num { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.storage-stat-label { color: var(--pico-muted-color); font-size: 0.8rem; }
.storage-refresh { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0 auto; }
.storage-refresh button { margin: 0; width: auto; }
.team-icon-row { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; }
.demo-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.demo-actions form { margin: 0; }
.demo-actions button { margin: 0; }
/* Bakgrundsjobb: feldetalj + persistent logg. */
.job-error {
	color: var(--svk-danger, #b5342f); font-size: .85rem; margin: .3rem 0 .6rem;
	white-space: pre-wrap; word-break: break-word;
	background: color-mix(in srgb, var(--svk-danger, #b5342f) 10%, transparent);
	border-left: 3px solid var(--svk-danger, #b5342f); padding: .5rem .7rem; border-radius: .3rem;
}
.job-log { margin-top: .8rem; font-size: .85rem; }
.job-log > summary { cursor: pointer; color: var(--pico-muted-color); }
.job-log-list { list-style: none; margin: .5rem 0 0; padding: 0; }
.job-log-item { display: flex; gap: .6rem; padding: .3rem 0; border-top: 1px solid var(--pico-muted-border-color); flex-wrap: wrap; }
.job-log-time { color: var(--pico-muted-color); font-variant-numeric: tabular-nums; white-space: nowrap; }
.job-log-kind { font-weight: 600; text-transform: uppercase; font-size: .72rem; align-self: center; }
.job-log-msg { flex: 1; min-width: 12rem; word-break: break-word; color: var(--svk-danger, #b5342f); }
.storage-section-h { font-size: 1.05rem; margin: 1.2rem 0 0.5rem; color: var(--pico-muted-color); }
/* Lagringskvot-mätare (team). */
.quota-bar { height: 8px; border-radius: 4px; background: var(--pico-muted-border-color); overflow: hidden; margin-bottom: 0.25rem; max-width: 14rem; }
.quota-fill { display: block; height: 100%; background: var(--pico-primary, #3b6ea5); border-radius: 4px; }
.quota-fill.quota-over { background: var(--svk-danger, #b5342f); }
.col-quota { min-width: 12rem; }
.quota-bar-lg { height: 12px; max-width: 100%; margin-bottom: 0.4rem; }
.storage-detail { margin-top: 0.6rem; }
.storage-detail > summary { cursor: pointer; }
.quota-form { display: flex; gap: 0.4rem; margin: 0; align-items: center; }
.quota-form input { width: 7rem; margin: 0; }
.quota-form button { margin: 0; white-space: nowrap; }
details.storage-user { border: 1px solid var(--pico-muted-border-color); border-radius: 0.4rem; margin-bottom: 0.5rem; padding: 0 0.9rem; }
details.storage-user > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0; cursor: pointer; font-weight: 600; }
.storage-user-total { font-variant-numeric: tabular-nums; white-space: nowrap; }
details.storage-user table { margin-bottom: 0.6rem; }
.storage-orphans { margin-top: 1.4rem; }
.invite-details summary { cursor: pointer; font-size: 0.85rem; }
.invite-link { width: 100%; margin-top: 0.3rem; font-family: ui-monospace, monospace; font-size: 0.78rem; }
.share-qr, .share-embed { margin-top: 0.9rem; }
.share-qr > label, .share-embed > label { display: block; font-size: 0.85rem; margin-bottom: 0.3rem; }
.qr-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.qr-row img { background: #fff; border-radius: 0.3rem; padding: 4px; }
.qr-row a { margin: 0; width: auto; }
#share-embed-copy { margin-top: 0.4rem; width: auto; }
.profile-ok { background: var(--svk-ok); color: #fff; padding: 0.5rem 0.7rem; border-radius: 0.3rem; font-size: 0.9rem; }

/* --- Nav höger: Admin-knapp + kontokort (M365-stil) --- */
.nav-right { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 0.6rem; margin: 0; }
.nav-right li { margin: 0; }
.nav-btn { margin: 0; padding: 0.4rem 0.9rem; font-size: 0.9rem; }
/* Temaväxel (theme.js): cyklar sol/måne/dator. Ärver nav-textfärgen. */
.tema-btn { background: none; border: none; color: inherit; cursor: pointer; padding: 0.2rem;
	margin: 0; line-height: 0; opacity: 0.85; display: inline-flex; align-items: center; width: auto; }
.tema-btn:hover { opacity: 1; }
.account { position: relative; }

.avatar {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	overflow: hidden;
	background: #5b6b8c;
	color: #fff;
	font-weight: 600;
	user-select: none;
}
.avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 2.1rem; height: 2.1rem; font-size: 0.9rem; }
/* Högre specificitet (.avatar.avatar-lg) än Pico:s [role=button] så
   role="button"-spanen inte får knapp-padding/line-height och blir oval. */
.avatar.avatar-lg { width: 4.5rem; height: 4.5rem; min-height: 0; font-size: 1.7rem; border: 0; cursor: pointer; padding: 0; line-height: 1; }
.avatar-xl { width: 7rem; height: 7rem; font-size: 2.6rem; }
/* Genomskinlig kamera-overlay på stora avataren, syns vid hover. */
.avatar-cam {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0, 0, 0, 0.45);
	opacity: 0; transition: opacity 0.15s ease;
}
.avatar-lg:hover .avatar-cam, .avatar-lg:focus-visible .avatar-cam { opacity: 1; }

.account-card {
	display: flex; align-items: center; gap: 0.5rem;
	margin: 0; padding: 0.25rem 0.6rem 0.25rem 0.3rem;
	background: transparent;
	border: 1px solid var(--pico-muted-border-color);
	border-radius: 2rem;
	color: inherit; cursor: pointer; width: auto;
}
.account-card:hover { background: var(--pico-secondary-background); }
.account-name { font-size: 0.9rem; max-width: 10rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-caret { font-size: 0.7rem; opacity: 0.7; }

.account-flyout {
	position: absolute; right: 0; top: calc(100% + 0.4rem);
	width: 22rem; max-width: calc(100vw - 1.5rem);
	background: var(--pico-background-color);
	border: 1px solid var(--pico-muted-border-color);
	border-radius: 0.5rem;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
	z-index: 2000; overflow: hidden;
}
.account-flyout[hidden] { display: none; }
.flyout-actions { display: flex; justify-content: flex-end; padding: 0.5rem 0.9rem 0; }
.linklike { background: none; border: 0; margin: 0; padding: 0; width: auto; color: var(--pico-primary); cursor: pointer; font-size: 0.85rem; }
.flyout-user { display: flex; gap: 1rem; align-items: center; padding: 0.4rem 0.9rem 1rem; }
.flyout-meta { min-width: 0; }
.flyout-name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flyout-email { color: var(--pico-muted-color); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flyout-link { display: inline-block; margin-top: 0.4rem; font-size: 0.9rem; }

/* Ändra foto-modal + interaktiv beskärning */
.avatar-modal-article { max-width: 26rem; text-align: center; }
.avatar-actions { display: flex; gap: 0.6rem; justify-content: center; margin: 0.6rem 0; }
.avatar-actions button { margin: 0; }
.crop-stage { position: relative; width: 260px; max-width: 100%; height: 260px; margin: 0.8rem auto; display: flex; align-items: center; justify-content: center; }
.crop-canvas { width: 260px; height: 260px; border-radius: 50%; touch-action: none; cursor: grab; background: #000; }
.crop-canvas:active { cursor: grabbing; }
.crop-controls { display: flex; align-items: center; gap: 0.6rem; justify-content: center; margin: 0.2rem 0 0.6rem; }
.crop-controls label { margin: 0; font-size: 0.9rem; }
.crop-controls input[type="range"] { flex: 1; max-width: 12rem; margin: 0; }
.crop-controls button { margin: 0; padding: 0.3rem 0.7rem; }

/* --- Admin: användardetalj --- */
.admin-avatar-card { display: flex; align-items: center; gap: 1rem; }
.admin-avatar-card p { margin: 0.2rem 0 0; }
.account-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.account-actions form { margin: 0; }
.account-actions button { margin: 0; }

/* --- Admin-vy: vänster kategorier + huvudyta --- */
.admin-layout { display: flex; gap: 1.5rem; align-items: flex-start; }
.admin-side { flex: none; width: 13rem; }
.admin-side-title { font-size: 1rem; margin: 0 0 0.5rem; }
.admin-side nav { display: flex; flex-direction: column; gap: 0.2rem; }
.admin-cat {
	display: block; padding: 0.45rem 0.7rem; border-radius: 0.3rem;
	color: var(--pico-color); text-decoration: none; font-size: 0.95rem;
}
.admin-cat:hover { background: var(--pico-secondary-background); }
.admin-cat.active { background: var(--pico-primary); color: #fff; }
.admin-main { flex: 1; min-width: 0; }
@media (max-width: 640px) {
	.admin-layout { flex-direction: column; }
	.admin-side { width: 100%; }
}

/* Tiling-status-badge (projektlista + hemsida) */
.tile-badge { font-size: 0.8rem; white-space: nowrap; }
.tile-none { display: none; }
.tile-running { color: var(--pico-primary); }
.tile-done { color: var(--svk-ok); }
.tile-partial { color: var(--pico-muted-color); }
.tile-error { color: var(--svk-danger); }
#upload-close { margin-top: 0.75rem; }
#upload-close[hidden] { display: none; }

/* --- Osparade ändringar (dirty state) --- */
.dirty-badge {
	background: var(--svk-warn);
	color: #1a1a1a;
	padding: 0.35rem 0.6rem;
	border-radius: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.5rem;
}
.dirty-badge[hidden] { display: none; }
#save-map-btn.has-changes, #save-tour-btn.has-changes {
	background: var(--svk-warn);
	border-color: var(--svk-warn);
	color: #1a1a1a;
}


/* --- Beredskapskoll + autospar-utkast + teckenförklaring --- */
.readiness { font-size: 0.85rem; margin: 0.4rem 0; }
.readiness:empty { display: none; }
.readiness.ok { color: var(--svk-ok); }
.readiness.warn { color: var(--svk-warn); font-weight: 600; }

/* Export-förvarningar: samlad readiness-ruta på export-steget (icke-blockerande). */
.export-readiness { border: 1px solid var(--svk-warn); border-radius: 0.4rem; padding: 0.6rem 0.8rem; margin: 0.5rem 0; background: color-mix(in srgb, var(--svk-warn) 8%, transparent); }
.export-readiness p { margin: 0.2rem 0; }
.export-readiness ul { margin: 0.3rem 0 0.2rem; padding-left: 1.2rem; font-size: 0.85rem; }
.export-readiness li { margin: 0.15rem 0; }
.export-originals { display: block; margin: 0.4rem 0 0.6rem; font-size: 0.9rem; }
/* Indrag via padding (inte margin) så texten håller sig inom border-box och inte
   klipps av panelbredden (margin-left krympte inte blockets bredd -> overflow). */
.export-originals .hint { display: block; margin: 0.1rem 0 0; padding-left: 1.7rem; }

/* Tema-/inställningsförinställningar (preview-steget). */
.preset-row { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.4rem; }
.preset-row select { flex: 1 1 12rem; min-width: 8rem; margin: 0; }
.preset-row button { margin: 0; width: auto; }
.preset-default-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.preset-default-label input { width: auto; margin: 0; }

.legend { font-size: 0.8rem; }
.legend b { letter-spacing: -1px; }

.draft-banner {
	border-left: 4px solid var(--svk-warn);
	background: var(--pico-card-sectioning-background-color);
	padding: 0.6rem 0.75rem;
	margin-bottom: 0.75rem;
}
.draft-banner p { margin: 0 0 0.5rem 0; font-size: 0.9rem; }
.draft-actions { display: flex; gap: 0.5rem; }
.draft-actions button { margin: 0; padding: 0.35rem 0.6rem; font-size: 0.85rem; }

/* --- Zoom/pan-layout: transformerat kartinnehåll, otransformerade markörer --- */
.planner-map {
	display: block;
	padding: 0;
	position: relative;
	overflow: hidden;
}
#map-stage {
	position: absolute;
	inset: 0;
	width: auto;
	max-width: none;
	max-height: none;
	border: none;
	background: var(--pico-card-background-color);
	touch-action: none;
	user-select: none;
	overflow: hidden;
}
#map-content {
	position: absolute;
	top: 0;
	left: 0;
	transform-origin: 0 0;
	line-height: 0;
	will-change: transform;
}
#map-content img#map-image {
	display: block;
	width: auto;
	height: auto;
	max-width: none;
	max-height: none;
}
#edges-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}
#markers-layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.map-controls {
	position: absolute;
	right: 0.6rem;
	bottom: 0.6rem;
	display: flex;
	gap: 0.3rem;
	z-index: 5;
}
.map-controls button { margin: 0; width: 2.4rem; padding: 0.35rem 0; }
.map-controls #fit-btn { width: auto; padding: 0.35rem 0.6rem; }

/* --- Sektionsrubrik med knapp + hjälp-modal --- */
.section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
}
.section-head h3 { margin: 0; }
.section-head button { margin: 0; padding: 0.2rem 0.55rem; font-size: 0.85rem; width: auto; }

.help-modal {
	position: fixed;
	inset: 0;
	z-index: 3500;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.help-modal[hidden] { display: none; }
.help-modal article { max-width: 30rem; width: 100%; margin: 0; max-height: 90vh; overflow-y: auto; }
.help-modal p { font-size: 0.9rem; margin: 0.45rem 0; }

/* Stylad bekräftelsedialog (ersätter native confirm()). */
.confirm-modal {
	position: fixed;
	inset: 0;
	z-index: 4000;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}
.confirm-modal[hidden] { display: none; }
.confirm-box { max-width: 26rem; width: 100%; margin: 0; }
.confirm-box h3 { margin: 0 0 0.5rem; }
.confirm-msg { font-size: 0.95rem; margin: 0 0 1rem; }
.confirm-actions { display: flex; gap: 0.6rem; justify-content: flex-end; }
.confirm-actions button { margin: 0; width: auto; }
.confirm-box.danger .confirm-ok { background: var(--svk-danger); border-color: var(--svk-danger); }

/* Startscen-väljare (modal med karta + hover-preview) */
.start-scene-btn { width: 100%; text-align: left; }
.start-modal-article { max-width: 46rem; }
.start-modal-tools { display: flex; gap: 0.5rem; align-items: center; }
.start-picker { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
/* Id-selektor -> högre specificitet än pannellums .pnlm-container{height:100%;
   width:100%} som annars kollapsar boxen (pannellum.css laddas efter app.css). */
#start-preview { width: 320px; height: 200px; flex: none; border-radius: 0.3rem; overflow: hidden; background: #000; }
.start-map { position: relative; flex: 1; min-width: 220px; line-height: 0; border: 1px solid var(--pico-muted-border-color); border-radius: 0.3rem; overflow: hidden; }
.start-map img { display: block; width: 100%; height: auto; }
#start-map-dots { position: absolute; inset: 0; }

/* Spara/släng-rad */
.save-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.save-row button { margin: 0; flex: 1; }
#discard-map-btn[hidden], #discard-tour-btn[hidden] { display: none; }

/* Rotationsriktnings-toggle med Vänster/Höger-etiketter */
#dir-label { margin-bottom: 0.2rem; }
/* Utgråade rotationsinställningar när autorotate är av (preview + mall-editor). */
.ar-dim { opacity: 0.5; pointer-events: none; }
.dir-toggle { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.dir-toggle input { margin: 0; }
.dir-toggle span { color: var(--pico-muted-color); font-size: 0.9rem; }
.dir-toggle span.active { color: var(--pico-color); font-weight: 600; }

/* --- Scenvy (kalibrering) --- */
.panorama-wrap { flex: 1; min-height: 0; position: relative; }
.panorama-wrap #panorama { position: absolute; inset: 0; }

/* Startriktnings-knappar (sätt/återställ). */
.btn-wrap { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.btn-wrap button { margin: 0; width: auto; }

/* Live yaw/pitch-indikator: centrerad ruta högst upp över panoramat. */
.view-readout { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 7; padding: 4px 8px; border-radius: 3px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.view-readout:empty { display: none; }

/* Överläggs-sliders för att sätta startriktning granulärt (yaw horisontellt,
   pitch vertikalt). Container släpper igenom klick; bara sliderna fångar. */
.view-sliders { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.view-slider { position: absolute; pointer-events: auto; accent-color: var(--svk-accent); cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); }
/* Högre specificitet (0,2,0) än Pico:s input:not([...]) (0,1,1) som annars tvingar
   width:100% -> horisontella slidern spiller ut, vertikala blir en fullbredds-box. */
.view-sliders .view-slider-h { left: 12%; width: 76%; height: auto; bottom: 14px; margin: 0; }
/* Vertikal slider = vanlig horisontell slider roterad -90° (renderar identiskt i
   alla webbläsare, till skillnad från writing-mode som ger jättethumb/olika utfall). */
.view-slider-v-wrap { position: absolute; left: 8px; top: 50%; width: 2rem; height: 220px; transform: translateY(-50%); pointer-events: none; }
.view-sliders .view-slider-v { position: absolute; top: 50%; left: 50%; width: 220px; height: 1.4rem; margin: 0; transform: translate(-50%, -50%) rotate(-90deg); }
.scene-nav { display: flex; gap: 0.4rem; margin-bottom: 0.5rem; }
.scene-nav button { flex: 1; margin: 0; }
.neighbor-list { display: flex; flex-direction: column; gap: 0.4rem; }
.neighbor-btn { width: 100%; margin: 0; text-align: left; }

/* --- Scenvy: hårkors, titel-label, res-toggle --- */
.crosshair {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 20;
}
.crosshair::before, .crosshair::after {
	content: "";
	position: absolute;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.9);
}
.crosshair::before { left: 50%; top: 0; width: 2px; height: 100%; transform: translateX(-50%); }
.crosshair::after { top: 50%; left: 0; height: 2px; width: 100%; transform: translateY(-50%); }

/* Scennamn nere-vänster i samma pannellum-stil som runtime/preview-scennamnet
   (4px kant, dark box, 3px radie, symmetrisk padding). */
.scene-title-label {
	position: absolute;
	left: 4px;
	bottom: 4px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 4px 8px;
	border-radius: 3px;
	font-size: 1rem;
	z-index: 20;
	pointer-events: none;
	max-width: 60%;
}
.scene-title-label:empty { display: none; }

.section-head { margin-bottom: 0.5rem; }
.fullres-label { display: block; margin: 0.5rem 0; }
.scene-nav { margin-top: 0.25rem; }

/* --- Scenvy: minikarta uppe till höger + grannrader med preview --- */
.scene-map {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 220px;
	max-width: 42%;
	border: 1px solid rgba(0, 0, 0, 0.4);
	border-radius: 3px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
	z-index: 15;
	background: #fff;
}
.scene-map img { display: block; width: 100%; height: auto; }
#scene-map-dots { position: absolute; inset: 0; pointer-events: none; }
.scene-dot {
	position: absolute;
	width: 9px; height: 9px;
	margin-left: -4.5px; margin-top: -4.5px;
	border-radius: 50%;
	background: var(--svk-marker);
	border: 1px solid #fff;
	box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
	pointer-events: auto;
	cursor: pointer;
}
.scene-dot:hover { transform: scale(1.25); }
/* Resize-handtag i nedre vänstra hörnet (kartan är fäst uppe till höger). */
.scene-map-resize {
	position: absolute;
	left: 0; bottom: 0;
	width: 16px; height: 16px;
	cursor: nesw-resize;
	background: linear-gradient(45deg, rgba(0,0,0,0.55) 0 40%, transparent 40%);
	z-index: 4;
}
.scene-dot.current, .scene-dot.highlight {
	width: 14px; height: 14px;
	margin-left: -7px; margin-top: -7px;
	z-index: 2;
}
.scene-dot.current { background: #1e73d8; }
.scene-dot.highlight { background: var(--svk-warn); z-index: 3; }

.neighbor-row { display: flex; gap: 0.4rem; align-items: stretch; }
.neighbor-row .neighbor-btn { flex: 1; margin: 0; text-align: left; }
.neighbor-peek {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	border: 1px solid var(--pico-muted-border-color);
	border-radius: 0.25rem;
	cursor: help;
	color: var(--pico-muted-color);
	font-size: 1.1rem;
	background: var(--pico-card-background-color);
}
.neighbor-peek:hover { color: var(--svk-accent); border-color: var(--svk-accent); }

/* Inställnings-knapp + modal */
.settings-article .settings-btn { width: 100%; margin: 0; }
.help-modal h4 { margin: 0.6rem 0 0.3rem; }
.preview-controls label { margin-bottom: 0.1rem; }

.neighbor-btn.calibrated {
	background: var(--svk-ok);
	border-color: var(--svk-ok);
	color: #fff;
}

.roll-row { display: flex; gap: 0.5rem; align-items: center; }
.roll-row input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; }
.roll-row .roll-num { flex: 0 0 5rem; width: 5rem; margin: 0; }

/* Auto-generera + inställnings-knapp i uppladdningssteget: fullbredd */
#generate-btn { width: 100%; }
.settings-inline .settings-btn { width: auto; }

/* --- Hotspot-lista i scenhanteringen --- */
/* Egen inre scroll så en scen med många hotspots inte gör hela panelen oändligt lång. */
.hotspot-list { list-style: none; padding: 0; margin: 0.5rem 0 0; max-height: 40vh; overflow-y: auto; }
.hotspot-list li.hint { padding: 0.3rem 0; }
.hotspot-item {
	border: 1px solid var(--pico-muted-border-color);
	border-radius: 0.3rem;
	padding: 0.4rem 0.5rem;
	margin-bottom: 0.4rem;
}
.hotspot-head-row { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; }
.hotspot-head-row .hotspot-label { flex: 1; min-width: 0; margin-bottom: 0; }
.hotspot-label { display: block; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Flagg-badge på språkbegränsade hotspots (hs.langs satt) i hotspot-listan. */
.hotspot-lang-badge { display: inline-flex; gap: 2px; flex: none; }
.hotspot-lang-badge img { width: 16px; height: 11px; object-fit: cover; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 1px; }
.hotspot-btns { display: flex; gap: 0.3rem; }

/* --- Översätt-steget (routes/translate.py, static/translate.js) --- */
.translate-progress { margin: 0 0 0.75rem; }
.translate-progress p { font-size: 0.85rem; margin: 0 0 0.25rem; }
.translate-mode-row { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.5rem; font-size: 0.82rem; }
.translate-mode-row label { margin: 0; font-weight: 600; color: var(--pico-muted-color); white-space: nowrap; }
.translate-mode-row select { width: auto; flex: 1; margin: 0; padding: 0.25rem 0.5rem; font-size: 0.82rem; }
.translate-filter-row { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.6rem; font-size: 0.82rem; }
.translate-filter-row label { margin: 0; font-weight: 600; color: var(--pico-muted-color); white-space: nowrap; }
.translate-filter-row select { width: auto; flex: 1; margin: 0; padding: 0.25rem 0.5rem; font-size: 0.82rem; }
.translate-gap-list { max-height: 52vh; overflow-y: auto; margin-bottom: 0.75rem; }

/* Scengrupper: <details>/<summary> - Pico ger redan pil/toggle-animation,
   vi lägger bara på egen rubrik-layout (namn + per-språk-räknare). */
.translate-scene-group {
	margin: 0 0 0.4rem;
	border: 1px solid var(--pico-muted-border-color);
	border-radius: 0.35rem;
	padding: 0.4rem 0.6rem;
}
.translate-scene-group summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 0; }
.translate-scene-group[open] summary { margin-bottom: 0.5rem; }
.translate-scene-group.done summary { opacity: 0.6; }
.translate-scene-name { display: flex; align-items: baseline; gap: 0.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.scene-id-tag { font-size: 0.7rem; font-weight: 400; color: var(--pico-muted-color); }
.translate-scene-counters { display: flex; align-items: center; gap: 0.35rem; flex: none; font-size: 0.75rem; font-weight: 400; }
.lang-counter { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.05rem 0.35rem; border-radius: 0.6rem; background: var(--pico-muted-border-color, rgba(115, 130, 140, 0.12)); }
.lang-counter img { width: 14px; height: 10px; }
.lang-counter.complete { background: color-mix(in srgb, var(--svk-accent) 18%, transparent); color: var(--svk-accent); }
.translate-scene-check { color: var(--svk-accent); font-weight: 700; }
.translate-group-hint { font-size: 0.78rem; color: var(--pico-muted-color); font-style: italic; margin: 0.2rem 0 0; }

.translate-gap-group { list-style: none; margin: 0; padding: 0; }
/* Under-rubrik per fält inom en scen (Scentitel / Hotspot N · teaser) så
   hotspotarnas rader grupperas tydligt. Ej klickbar. */
.translate-field-head {
	list-style: none;
	margin: 0.5rem 0 0.15rem;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--pico-muted-color);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.translate-field-head:first-child { margin-top: 0; }
.translate-gap-row {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.4rem;
	border-radius: 0.3rem;
	cursor: pointer;
	font-size: 0.82rem;
}
.translate-gap-group .translate-gap-row { padding-left: 0.7rem; }
.translate-gap-row:hover { background: var(--pico-muted-border-color, rgba(115, 130, 140, 0.1)); }
/* "Alla texter"-läget: redan översatta poster får en grön tonad bakgrund +
   bock-status. Deklareras FÖRE .active nedan så .active alltid vinner för en
   post som råkar vara både översatt och markerad. I "Saknade"-läget förekommer
   .is-translated aldrig (alla poster där är per definition oöversatta). */
.translate-gap-row.is-translated { background: color-mix(in srgb, var(--svk-accent) 8%, transparent); }
.translate-gap-row.is-translated:hover { background: color-mix(in srgb, var(--svk-accent) 14%, transparent); }
.translate-gap-row.active { background: var(--svk-accent); color: var(--pico-primary-inverse); }
.translate-gap-row .lang-order-flag { flex: none; }
.translate-row-status { flex: none; width: 1.1em; text-align: center; font-weight: 700; color: var(--svk-accent); }
.translate-gap-kind { flex: none; font-weight: 600; }
.translate-gap-snippet { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.85; }
.translate-gap-snippet.is-translated { font-style: italic; }

.translate-editor { border-top: 1px solid var(--pico-muted-border-color); padding-top: 0.6rem; }
.translate-field { margin-bottom: 0.6rem; }
.translate-field-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.82rem; font-weight: 600; margin-bottom: 0.25rem; }
.translate-source-text {
	font-size: 0.85rem;
	padding: 0.4rem 0.5rem;
	background: var(--pico-card-sectioning-background-color, rgba(115, 130, 140, 0.06));
	border-radius: 0.3rem;
	max-height: 12vh;
	overflow-y: auto;
}

/* Mediebibliotek-modal: bred - utnyttja skärmbredden (samma komponent som /media).
   .media-modal .media-article (0,2,0) måste slå .help-modal article (0,1,1). */
.media-modal .media-article { max-width: min(1400px, 94vw); width: 100%; }
.media-modal-body { max-height: 80vh; overflow-y: auto; }
.media-actions { margin: 0.4rem 0 0.8rem; }
.media-actions button { margin: 0; width: auto; }
/* Modalens grid ärver .media-manage-grid-layouten men får en egen skrollhöjd. */
.media-grid-scroll { max-height: 62vh; overflow-y: auto; padding-right: 0.2rem; }
.media-cell { position: relative; aspect-ratio: 1; border: 1px solid var(--pico-muted-border-color); border-radius: 0.3rem; overflow: hidden; }
.media-cell img { width: 100%; height: 100%; object-fit: cover; cursor: pointer; display: block; }
.media-cell img:hover { opacity: 0.85; }
.media-del { position: absolute; top: 2px; right: 2px; width: 1.5rem; height: 1.5rem; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; line-height: 1; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; font-size: 1.05rem; }
.media-del:hover { background: var(--svk-danger); }
.media-zoom { position: absolute; top: 2px; left: 2px; width: 1.5rem; height: 1.5rem; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; cursor: pointer; }
.media-zoom:hover { background: rgba(0, 0, 0, 0.85); }
.media-check { position: absolute; bottom: 4px; left: 4px; width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer; accent-color: var(--svk-accent, #4338ca); }
.media-manage-cell.selected .media-cell { outline: 3px solid var(--svk-accent, #4338ca); outline-offset: -3px; }

/* Batch-åtgärdsrad (syns när minst en bild är markerad). */
.media-batch { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; padding: 0.4rem 0.6rem; background: color-mix(in srgb, var(--svk-accent, #4338ca) 10%, transparent); border-radius: 0.4rem; }
.media-batch[hidden] { display: none; }
.media-batch-count { font-weight: 600; font-size: 0.85rem; }
.media-batch button { margin: 0; width: auto; }

/* Lightbox: fullstor förhandsvisning. Genomskinlig overlay (se dämpat innehåll
   bakom) + lätt blur, i stället för nästan helsvart. */
.media-lightbox { z-index: 6000; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.media-lb-img { max-width: 94vw; max-height: 90vh; object-fit: contain; border-radius: 4px; box-shadow: 0 6px 40px rgba(0, 0, 0, 0.6); }
.media-lb-close { position: fixed; top: 1rem; right: 1rem; width: 2.6rem; height: 2.6rem; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; border: none; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.6rem; cursor: pointer; }
.media-lb-close:hover { background: rgba(0, 0, 0, 0.9); }

/* Mediebibliotekets filter-väljare (både modal och hanteringsvy). */
.media-filter, .mgr-filter-wrap select { width: auto; margin: 0; display: inline-block; }
.lib-search-wrap { position: relative; flex: 1 1 16rem; min-width: 10rem; max-width: 26rem; }
/* Tokenized sökruta: chips + fri text i en box som ser ut som ett input-fält. */
.lib-search-box { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; width: 100%; padding: 0.25rem 0.5rem; min-height: 50px; background: var(--pico-form-element-background-color); border: var(--pico-border-width, 1px) solid var(--pico-form-element-border-color); border-radius: var(--pico-border-radius, 0.25rem); cursor: text; }
.lib-search-box:focus-within { border-color: var(--pico-primary); }
.lib-chips { display: contents; }
.lib-chip { display: inline-flex; align-items: center; gap: 0.15rem; background: color-mix(in srgb, var(--svk-accent) 16%, transparent); border-radius: 0.35rem; padding: 0.05rem 0.15rem 0.05rem 0.5rem; font-size: 0.82rem; white-space: nowrap; }
.lib-chip-x { margin: 0; padding: 0 0.3rem; width: auto; border: none; background: none; color: inherit; font-size: 1.05rem; line-height: 1; cursor: pointer; }
.lib-chip-x:hover { color: var(--svk-danger); }
.lib-search-box .lib-search-input { flex: 1 1 6rem; min-width: 6rem; height: auto; margin: 0; padding: 0.2rem; border: none; outline: none; background: transparent; box-shadow: none; }
.lib-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; margin-top: 3px; background: var(--pico-background-color); border: 1px solid var(--pico-muted-border-color); border-radius: 0.4rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); max-height: 16rem; overflow-y: auto; padding: 0.2rem; }
.lib-suggest[hidden] { display: none; }
.lib-suggest .lib-suggest-item { display: flex; gap: 0.5rem; align-items: baseline; width: 100%; box-sizing: border-box; text-align: left; margin: 0; padding: 0.4rem 0.7rem; background: none; border: none; border-radius: 0.3rem; color: inherit; cursor: pointer; }
.lib-suggest-item.active, .lib-suggest-item:hover { background: var(--pico-muted-border-color); }
.lib-suggest-item span { color: var(--pico-muted-color); font-size: 0.8rem; }
.media-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.media-hint, .mgr-hint { font-size: 0.8rem; margin: 0 0 0.5rem; }

/* Uppladdnings-progresslista (flera filer, en rad per fil med bar + status). */
.media-upload-progress { margin: 0 0 0.6rem; display: flex; flex-direction: column; gap: 0.3rem; }
.media-up-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 0.5rem; font-size: 0.82rem; }
.media-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-up-bar { width: 8rem; margin: 0; height: 0.5rem; }
.media-up-status { min-width: 5rem; text-align: right; color: var(--pico-muted-color); }
.media-up-status.ok { color: var(--svk-ok); }
.media-up-status.err { color: var(--svk-danger); }

/* /media-sidan: bredare än login-formulär (ärver .login-section 26rem annars). */
.login-section.media-manage { max-width: 64rem; }

/* Inbäddad hanteringsvy (/media): grid med metadata + användning per bild. */
.media-manage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.9rem; }
.media-manage-cell { margin: 0; }
.media-manage-cell .media-cell { aspect-ratio: 4 / 3; }
.media-manage-cell figcaption { margin-top: 0.35rem; font-size: 0.78rem; line-height: 1.35; }
.media-fname { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-manage-cell .media-meta { color: var(--pico-muted-color); }
.media-usage { margin-top: 0.15rem; word-break: break-word; }
.media-usage.media-unused { color: var(--pico-muted-color); font-style: italic; }
.media-crumb { display: block; }

/* Listvy: en rad per bild (liten thumb + metadata/användning bredvid). */
.media-manage-grid.media-list { display: block; }
.media-list .media-manage-cell { display: flex; align-items: center; gap: 1rem; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.media-list .media-cell { flex: 0 0 auto; width: 6rem; height: 4.2rem; aspect-ratio: auto; }
.media-list .media-manage-cell figcaption { margin-top: 0; flex: 1; display: flex; flex-direction: column; gap: 0.15rem; }
.media-crumb-sep { color: var(--pico-muted-color); }

/* Hotspot-modal: flikar (Teaser / Läs mer) + EasyMDE-editor. */
.hs-tabs { display: flex; justify-content: flex-start; gap: 0.3rem; margin-bottom: 0.6rem; border-bottom: 1px solid var(--pico-muted-border-color); }
.hs-tab { margin: 0; border: none; background: none; padding: 0.4rem 0.8rem; font-size: 0.9rem; cursor: pointer; color: var(--pico-muted-color); border-bottom: 2px solid transparent; width: auto; border-radius: 0; }
.hs-tab.active { color: var(--pico-primary); border-bottom-color: var(--pico-primary); font-weight: 600; }
.hs-tabpanel[hidden] { display: none; }
#hs-field-text .EasyMDEContainer { margin-bottom: 0.5rem; }
#hs-field-text .editor-toolbar { border-radius: 0.3rem 0.3rem 0 0; }
/* EasyMDE-toolbaren i hotspot-modalen: Pico gör <button> till en primärknapp och
   sätter DÄR om --pico-color till primary-inverse (vit) - så ikonerna blir vita,
   osynliga mot den ljusa kortbakgrunden i light mode (syns bara i dark mode).
   Toolbaren är transparent (kortytan är tema-styrd), så sätt explicit tema-medveten
   färg (kan inte använda var(--pico-color) - knappen har kapat den till vitt).
   Hover/active-bakgrunden är fast ljus (#fcfcfc, EasyMDE) -> alltid mörk då. */
#hs-field-text .editor-toolbar button, #hs-field-text .editor-toolbar button i { color: var(--svk-editor-icon); }
#hs-field-text .editor-toolbar button:hover, #hs-field-text .editor-toolbar button.active,
#hs-field-text .editor-toolbar button:hover i, #hs-field-text .editor-toolbar button.active i { color: #1f2937; }
.hs-btn { flex: 1; margin: 0; padding: 0.25rem 0.3rem; font-size: 0.78rem; }
.hs-danger { color: var(--svk-danger); border-color: var(--svk-danger); }

/* --- Hotspot pending-markör + modal --- */
.hs-pending {
	position: absolute; top: 50%; left: 50%;
	width: 20px; height: 20px; margin-left: -10px; margin-top: -10px;
	border-radius: 50%; border: 3px solid #fff;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.9); z-index: 21; pointer-events: none;
}
.hs-pending[hidden] { display: none; }
.hs-pending-info { background: rgba(47, 111, 79, 0.75); }
.hs-pending-url { background: rgba(30, 115, 216, 0.75); }
.hs-pending-scene { background: rgba(217, 79, 43, 0.75); }

.hs-modal-actions { display: flex; gap: 0.5rem; margin-top: 0.75rem; }
.hs-modal-actions button { margin: 0; flex: 1; }
#hs-field-scene-dir fieldset { margin: 0.4rem 0; }
#hs-tyaw-regen { margin: 0.3rem 0; }

/* Högre specificitet än pannellums .pnlm-container{height:100%} (som pannellum
   lägger på samma element och annars kollapsar rutan). */
#hs-field-scene-top .hs-scene-preview {
	width: 100%;
	height: 150px;
	margin: 0.4rem 0;
	border-radius: 0.3rem;
	overflow: hidden;
	background: #000;
}
.hs-scene-preview:empty { display: none; }

/* Scen-hotspots visar alltid vilken scen de länkar till (editorn) */
#panorama .pnlm-scene > span,
#panorama .pnlm-hotspot.pnlm-scene span { visibility: visible !important; }
/* ...men INTE förrän pannellum projicerat hotspoten (satt en transform) - annars
   blinkar etiketten i (0,0) uppe till vänster vid load. Högre specificitet (+klass)
   slår regeln ovan; markdown.js tar bort klassen vid första positionering. */
#panorama .pnlm-hotspot.pnlm-scene.hs-await-pos > span,
#panorama .pnlm-hotspot.pnlm-scene.hs-await-pos span { visibility: hidden !important; }

/* Pass 2: ring på närmaste hotspot + grab-markör */
#panorama .hs-nearest {
	box-shadow: 0 0 0 3px var(--svk-warn), 0 0 6px rgba(0, 0, 0, 0.7);
	border-radius: 50%;
}
.hs-pending-grab { background: rgba(181, 135, 43, 0.85); }