/* Tolips Mobilgalleri — app-web-8-inline-edit.css
   7.10.18: den tidigare app-web.css är uppdelad i åtta filer. De läses in
   i nummerordning och innehåller exakt samma regler i samma ordning som
   förut, så ingenting i utseendet ändras.
   Innehåll: Borttagning av dolda filer och den snabba redigeringen i appen. */

/* 7.10.13: borttagning av dolda filer. Knapparna ligger i en egen ruta med
   avstånd till Återställ, så ingen trycker fel på mobilen. */
.tmg-app-test-hidden-note{
	margin:6px 0 0;
}
.tmg-app-test-purge{
	display:grid;
	gap:10px;
	margin-top:14px;
	padding:12px;
	border:1px solid #e0c3c3;
	border-radius:12px;
	background:#fdf6f6;
}
.tmg-app-test-purge p.description{
	margin:0;
}
.tmg-app-test-purge form{
	margin:0;
}
.tmg-app-test-purge .button,
.tmg-app-test-purge .tmg-app-test-editor-delete{
	width:100%;
	min-height:44px;
	text-align:center;
}
.tmg-app-test-purge .tmg-app-test-editor-delete{
	margin-top:0;
	border:1px solid #d9a7a7;
	border-radius:8px;
	background:#fff;
	padding:10px 12px;
}
.app-mobilwebb-admin-theme-dark .tmg-app-test-purge{
	border-color:#6a3d48!important;
	background:#241823!important;
}
.app-mobilwebb-admin-theme-dark .tmg-app-test-purge p.description{
	color:#e5d3d8!important;
}
.app-mobilwebb-admin-theme-dark .tmg-app-test-purge .tmg-app-test-editor-delete{
	border-color:#6a3d48!important;
	background:#1f141c!important;
	color:#ffb6c0!important;
}

/* 7.10.15: diskret penna och papperskorg. Vita ikoner på en mörk, svagt
   genomskinlig platta som ligger i hörnet av bilden eller filmkortet. */
.app-mobilwebb-film{position:relative}
.app-mobilwebb-media-tools{
	position:absolute;
	top:8px;
	right:8px;
	z-index:2;
	display:flex;
	/* 7.20.1: utan plattorna bakom ikonerna såg mellanrummet större ut än det
	   var. Pennan flyttas närmare papperskorgen. */
	gap:0;
}
.app-mobilwebb-media-tools.is-lightbox{
	top:max(12px,env(safe-area-inset-top,0px));
	left:max(12px,env(safe-area-inset-left,0px));
	right:auto;
	z-index:3;
}
/* 7.20.0: ingen ring och ingen platta bakom penna och papperskorg. Ikonerna
   står fritt på bilden och håller sig läsbara med en skugga i stället. */
.app-mobilwebb-media-tool{
	display:grid;
	place-items:center;
	width:28px;
	height:34px;
	padding:0;
	border:0;
	border-radius:0;
	background:transparent;
	color:#fff;
	opacity:.82;
	cursor:pointer;
	transition:opacity .15s ease;
	filter:drop-shadow(0 1px 3px rgb(0 0 0 / .55));
}
/* 7.20.3: ikonerna ska ligga intill varandra, oavsett hur stor knappens ruta
   är i det sammanhanget. Den andra knappen dras därför in mot den första. */
.app-mobilwebb-media-tool+.app-mobilwebb-media-tool{margin-left:-3px}
.app-mobilwebb-media-tools.is-lightbox .app-mobilwebb-media-tool{
	width:40px;
	height:40px;
}
.app-mobilwebb-media-tool:hover,
.app-mobilwebb-media-tool:focus-visible{
	opacity:1;
	background:transparent;
}
.app-mobilwebb-media-tool:focus-visible{
	outline:2px solid #fff;
	outline-offset:2px;
}
.app-mobilwebb-media-tool svg{display:block}

/* Rutan för namnbyte och bekräftad borttagning. */
.app-mobilwebb-media-sheet{
	position:fixed;
	inset:0;
	z-index:2147483100;
	display:grid;
	place-items:center;
	padding:18px;
	background:rgb(4 6 12 / .72);
}
.app-mobilwebb-media-sheet-card{
	display:grid;
	gap:12px;
	box-sizing:border-box;
	width:min(420px,100%);
	max-height:calc(100dvh - 36px);
	padding:18px;
	border:1px solid var(--app-line,#3a4260);
	border-radius:16px;
	background:var(--app-surface,#141a2c);
	color:var(--app-text,#fff);
	box-shadow:0 18px 48px rgb(0 0 0 / .5);
	overflow:auto;
}
.app-mobilwebb-media-sheet-card h3{
	margin:0!important;
	font-size:17px;
	line-height:1.3;
}
.app-mobilwebb-media-sheet-text{
	margin:0!important;
	font-size:14px;
	line-height:1.45;
	opacity:.85;
}
.app-mobilwebb-media-sheet-name{
	width:100%;
	min-height:110px;
	padding:11px 12px;
	resize:vertical;
	border:1px solid var(--app-line,#3a4260);
	border-radius:10px;
	background:rgb(255 255 255 / .06);
	color:inherit;
	font-size:16px;
	line-height:1.4;
}
.app-mobilwebb-media-sheet-suggestions{display:grid;gap:6px;margin-top:-5px}
.app-mobilwebb-media-sheet-suggestions>small{font-size:12px;opacity:.7}
.app-mobilwebb-media-sheet-suggestions>div{display:flex;gap:7px;overflow-x:auto;padding:1px 1px 4px;scrollbar-width:none}
.app-mobilwebb-media-sheet-suggestions>div::-webkit-scrollbar{display:none}
.app-mobilwebb-media-sheet-suggestions button{flex:0 0 auto;max-width:220px;min-height:36px;padding:7px 11px;border:1px solid var(--app-line,#3a4260);border-radius:999px;background:rgb(255 255 255 / .06);color:inherit;font:600 13px/1.2 inherit;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 7.41.19: pris och förhandsvisningstid i samma dialog, för butikskort. */
.app-mobilwebb-media-sheet-field{display:grid;gap:6px;font-size:13px;opacity:.85}
.app-mobilwebb-media-sheet-field input{
	width:100%;
	min-height:46px;
	padding:11px 12px;
	border:1px solid var(--app-line,#3a4260);
	border-radius:10px;
	background:rgb(255 255 255 / .06);
	color:inherit;
	font-size:16px;
}
/* 7.20.1: bocken Radera helt i bekräftelserutan. */
.app-mobilwebb-media-sheet-purge{
	display:flex;
	align-items:flex-start;
	gap:10px;
	margin:0 0 4px;
	padding:10px 12px;
	border:1px solid var(--app-line,#3a4260);
	border-radius:12px;
	cursor:pointer;
}
.app-mobilwebb-media-sheet-purge input{width:20px;height:20px;flex:0 0 20px;margin:1px 0 0;accent-color:#c0505f}
.app-mobilwebb-media-sheet-purge span{display:grid;gap:2px}
.app-mobilwebb-media-sheet-purge strong{font-size:15px}
.app-mobilwebb-media-sheet-purge small{opacity:.75;font-size:13px;line-height:1.35}
.app-mobilwebb-media-sheet-actions{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:10px;
}
.app-mobilwebb-media-sheet-actions button{
	min-height:46px;
	padding:11px 14px;
	border-radius:10px;
	font-size:15px;
	font-weight:600;
	cursor:pointer;
}
.app-mobilwebb-media-sheet-cancel{
	border:1px solid var(--app-line,#3a4260);
	background:transparent;
	color:inherit;
}
.app-mobilwebb-media-sheet-save{
	border:1px solid var(--app-accent,#6b7cff);
	background:var(--app-accent,#6b7cff);
	color:#fff;
}
.app-mobilwebb-media-sheet-delete{
	border:1px solid #c0505f;
	background:#c0505f;
	color:#fff;
}
.app-mobilwebb-media-sheet-actions button:disabled{opacity:.55;cursor:not-allowed}
.app-mobilwebb-media-sheet-status{
	min-height:18px;
	margin:0!important;
	font-size:13px;
	opacity:.85;
}
.app-mobilwebb-media-sheet-status:empty{display:none}

/* 7.10.16: bildbrickan och dess verktygsikoner ligger i en gemensam ruta.
   Rutan är rutnätets barn, brickan fyller den och ikonerna läggs ovanpå. */
.app-mobilwebb-tile-cell{
	position:relative;
	display:block;
	min-width:0;
}
.app-mobilwebb-tile-cell>.app-mobilwebb-tile{
	width:100%;
}
/* 7.20.2: galleriets rutor har egna mått och en egen gap. Den satte tillbaka
   mellanrummet mellan pennan och papperskorgen. */
.app-mobilwebb-tile-cell .app-mobilwebb-media-tools{
	top:6px;
	right:6px;
	gap:0;
}
.app-mobilwebb-tile-cell .app-mobilwebb-media-tool{
	width:24px;
	height:28px;
}
.app-mobilwebb-tile-cell .app-mobilwebb-media-tool svg{
	width:15px;
	height:15px;
}

/* 7.21.0: plusknappen i sidhuvudet på Galleri, Butik, Video och Privat. Den
   ligger i kortets övre högra hörn och syns bara för den som får redigera. */
.app-mobilwebb-page-intro{position:relative}
.app-mobilwebb-add{
	position:absolute;
	top:10px;
	right:10px;
	display:grid;
	place-items:center;
	width:34px;
	height:34px;
	padding:0;
	/* 7.21.2: ingen ring och ingen platta, samma som penna och papperskorg.
	   Ikonen står fritt med en skugga som håller den läsbar. */
	border:0;
	border-radius:0;
	background:transparent;
	color:inherit;
	opacity:.85;
	cursor:pointer;
	list-style:none;
	filter:drop-shadow(0 1px 3px rgb(0 0 0 / .5));
	-webkit-appearance:none;
	appearance:none;
}
.app-mobilwebb-add::-webkit-details-marker{display:none}
.app-mobilwebb-add:hover,.app-mobilwebb-add:focus-visible{opacity:1}
.app-mobilwebb-add-choice{position:static}
.app-mobilwebb-add-menu{
	position:absolute;
	top:50px;
	right:10px;
	z-index:4;
	display:grid;
	gap:4px;
	min-width:150px;
	padding:6px;
	border:1px solid var(--app-line,#3a4260);
	border-radius:calc(var(--app-radius,12px) - 4px);
	background:var(--app-surface,#141a2c);
	box-shadow:0 14px 30px rgba(0,0,0,.3);
}
.app-mobilwebb-add-menu button{
	min-height:42px;
	padding:0 12px;
	border:0;
	border-radius:10px;
	background:transparent;
	color:inherit;
	font:inherit;
	text-align:left;
	cursor:pointer;
}
.app-mobilwebb-add-menu button:hover,.app-mobilwebb-add-menu button:focus-visible{background:color-mix(in srgb,var(--app-text,#fff) 10%,transparent)}

/* 7.25.0: ikonrad för de sociala kontona, överst i den privata sidans kort. */
/* 7.25.2: raden ligger i kortets övre vänstra hörn, i höjd med rubriken och
   mitt emot plusknappen — inte centrerad ovanför rubriken. */
.app-mobilwebb-social{
	position:absolute;
	top:10px;
	left:12px;
	right:56px;
	display:flex;
	flex-wrap:wrap;
	gap:12px;
	justify-content:flex-start;
	margin:0;
}
.app-mobilwebb-social-link{
	display:grid;
	place-items:center;
	width:30px;
	height:30px;
	color:inherit;
	opacity:.85;
	text-decoration:none;
	filter:drop-shadow(0 1px 3px rgb(0 0 0 / .45));
}
.app-mobilwebb-social-link:hover,.app-mobilwebb-social-link:focus-visible{opacity:1}

/* 7.27.4: reglerna för stor skärm ligger i den sist inlästa delen, med html
   först i selektorn. Både app-shell (del 3) och användarpanelen (del 4) sätter
   width med !important på samma element och läses in efter del 1, så tidigare
   försök förlorade på inläsningsordningen. */
.app-mobilwebb-desktop-note{display:none}
/* 7.32.0: telefonspalten gäller bara på riktigt stora skärmar. En telefon i
   liggande läge är bred men låg, och där ska appen fylla hela sidan. */
@media (min-width:900px) and (min-height:620px){
	html body.app-mobilwebb-page .app-mobilwebb,
	html .app-mobilwebb{
		width:var(--app-desktop-width,430px)!important;
		max-width:var(--app-desktop-width,430px)!important;
		min-width:0!important;
		/* Den naturligt skrollande appen centreras utan transform. Då fortsätter
		   position:fixed att betyda viewport även för bakgrundslagren. */
		left:auto!important;
		right:auto!important;
		margin:0 auto!important;
		transform:none;
		box-shadow:0 24px 70px rgb(0 0 0 / .45);
	}
	html .app-mobilwebb::before,
	html .app-mobilwebb::after,
	html .app-mobilwebb>.app-mobilwebb-bg-tint,
	html .app-mobilwebb>.app-mobilwebb-bg-video,
	html .app-mobilwebb>.app-mobilwebb-bg-effect,
	html .app-mobilwebb>.app-mobilwebb-fx-canvas{
		left:50%!important;
		right:auto!important;
		width:var(--app-desktop-width,430px)!important;
		/* Egen translate-egenskap komponeras med zoom-/drift-effektens transform. */
		translate:-50% 0;
	}
	html .app-mobilwebb .app-mobilwebb-desktop-note{
		display:block;
		box-sizing:border-box;
		margin:0;
		padding:14px 18px;
		border-bottom:1px solid var(--app-line,#3a4260);
		background:var(--app-surface,#141a2c);
		color:var(--app-text,#fff);
		font-size:13px;
		line-height:1.5;
		text-align:center;
		opacity:.85;
	}
	html .app-mobilwebb-nav{
		left:50%!important;
		right:auto!important;
		width:calc(var(--app-desktop-width,430px) - 48px)!important;
		transform:translateX(-50%) translateZ(0);
	}
}

/* 0.1.37: samtliga visuella effekter ska tillhöra bakgrunden, även de som
   tidigare höjdes över innehållet (bland annat kamerablixt och canvaslager). */
html .app-mobilwebb>.app-mobilwebb-bg-effect,
html .app-mobilwebb>.app-mobilwebb-fx-canvas{z-index:-2!important}