/* Path: 12/css/panels.css */
/* ============================================================
   PANELER – TILSTAND OG INTERAKSJON
   Eier IKKE layout (bredde / posisjon / viewport)
============================================================ */

/* ------------------------------------------------------------
   GRUNNLEGGENDE PANEL
------------------------------------------------------------ */
.panel {
	display: block;

	/* Åpen/lukket styres via transform (JS) */
	transform: translateX(100%);
	pointer-events: none; /* default: ikke interaktiv */

	/* Visuell demping når inaktiv */
	opacity: 0.35;
	transition: opacity 2.6s ease-out;

	/* Visuell separasjon */
	box-shadow: 0 0 0 rgba(0, 0, 0, 0);

	/* Lag over innhold, men under globale overlays */
	z-index: 1001;
}

/* ------------------------------------------------------------
   AKTIVE TILSTANDER
------------------------------------------------------------ */
.panel.open,
.panel.pinned {
	pointer-events: auto;
}

/* Full oppmerksomhet */
.panel.open,
.panel.attention,
.panel:hover {
	opacity: 1;
	transition: opacity 2.25s ease-in;
}

/* ------------------------------------------------------------
   FESTET PANEL
------------------------------------------------------------ */
.panel.pinned {
	position: fixed; /* tilstand, ikke layout */
	box-shadow: 0 0 0 2px rgba(44, 123, 229, 0.15);
}

/* ------------------------------------------------------------
   PIN-IKON
------------------------------------------------------------ */
.panel-pin {
	opacity: 0.4;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.2s, color 0.2s;
}

.panel-pin:hover {
	opacity: 0.8;
}

.panel.pinned .panel-pin {
	opacity: 1;
	color: #2c7be5; /* blå = aktiv */
	transform: rotate(-20deg);
}

/* ------------------------------------------------------------
   PANEL-HEADER
------------------------------------------------------------ */
.panel-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.25rem 0.5rem;
}

/* ------------------------------------------------------------
   LUKK-KNAPP
------------------------------------------------------------ */
.panel-close {
	background: none;
	border: none;
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
	color: #000;
	opacity: 0.7;
	padding: 0.25rem 0.5rem;
}

.panel-close:hover,
.panel-close:focus {
	opacity: 1;
}

/* Skjul close-knapp når hover er tilgjengelig (desktop) */
@media (hover: hover) {
	.panel-close {
		display: none;
	}
}