/*
 * PhiloWorks Kundeportal – kundeside.
 *
 * Farver, fonte, radius og knapper er hentet direkte fra temaet på
 * philoworks.dk (wp-content/themes/PhiloWorks/style.css), så portalen
 * matcher hovedsiden. Koral-farven er målt i logoet (logo-transparent-tekst-side.png).
 */

:root {
	/* Fra philoworks.dk */
	--pwk-bg: #fff7f8;
	--pwk-primary: #2c2463;
	--pwk-primary-hover: #1e1847;
	--pwk-accent: #c5b8f0;
	--pwk-accent-dark: #a99de0;
	--pwk-accent-light: #eceaff;
	--pwk-grey-light: #ddd;
	--pwk-grey-mid: #b6b6b6;
	--pwk-grey-dark: #6b6b6b;
	--pwk-white: #ffffff;
	--pwk-r: 16px;
	--pwk-r-lg: 28px;
	--pwk-max: 1520px; /* Bredere end philoworks.dk (1160px) – portalen er et arbejdsværktøj med video */
	--pwk-gutter: clamp(16px, 3.5vw, 56px);
	--pwk-font-display: 'Playfair Display', Georgia, serif;
	--pwk-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Fra logoet */
	--pwk-coral: #e37f7c;
	--pwk-coral-light: #fbe4e3;
	--pwk-coral-dark: #a9423f;

	/* Afledte */
	--pwk-shadow: 0 8px 36px rgba(44, 36, 99, .08);
	--pwk-shadow-strong: 0 8px 36px rgba(44, 36, 99, .14);
	--pwk-btn-shadow: 0 4px 20px rgba(44, 36, 99, .28);
	--pwk-error: #b3261e;
}

*, *::before, *::after { box-sizing: border-box; }

/* HTML-attributten hidden skal altid skjule – også elementer, der har display: flex/grid i CSS'en. */
[hidden] { display: none !important; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--pwk-bg);
	color: var(--pwk-primary);
	font-family: var(--pwk-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; }

.pwk-wrap {
	width: 100%;
	max-width: var(--pwk-max);
	margin: 0 auto;
	padding: 0 var(--pwk-gutter);
}

.pwk-muted { color: var(--pwk-grey-dark); font-size: .875rem; }

/* ── Knapper (samme som .btn / .btn-primary / .btn-outline på philoworks.dk) ── */
.pwk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	min-height: 44px;
	padding: .85rem 1.9rem;
	border: 2px solid transparent;
	border-radius: 100px;
	font-family: var(--pwk-font-body);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition: all .3s cubic-bezier(.4, 0, .2, 1);
}
.pwk-btn--primary {
	background: var(--pwk-primary);
	color: var(--pwk-white);
	box-shadow: var(--pwk-btn-shadow);
}
.pwk-btn--primary:hover,
.pwk-btn--primary:focus-visible {
	background: var(--pwk-primary-hover);
	box-shadow: 0 8px 32px rgba(44, 36, 99, .4);
	transform: translateY(-2px);
}
.pwk-btn--outline {
	background: transparent;
	border-color: var(--pwk-primary);
	color: var(--pwk-primary);
}
.pwk-btn--outline:hover { background: var(--pwk-primary); color: var(--pwk-white); }
.pwk-btn--sm { padding: .7rem 1.4rem; }
.pwk-btn:focus-visible { outline: 3px solid var(--pwk-accent); outline-offset: 3px; }

/* ── Pills / labels ── */
.pwk-pill {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .4rem 1rem;
	background: rgba(197, 184, 240, .18);
	border: 1px solid rgba(197, 184, 240, .55);
	border-radius: 100px;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .05em;
}
.pwk-pill::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pwk-accent-dark);
}

.pwk-label {
	margin: 0;
	font-family: var(--pwk-font-body);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pwk-grey-dark);
}

/* Lille mærkat oven på et billede/en video (som .w-flag på philoworks.dk) */
.pwk-flag {
	position: absolute;
	top: .8rem;
	left: .8rem;
	z-index: 2;
	padding: .35rem .8rem;
	border-radius: 100px;
	background: rgba(255, 255, 255, .92);
	color: var(--pwk-primary);
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: .04em;
	box-shadow: 0 4px 14px rgba(44, 36, 99, .2);
	pointer-events: none;
}

/* ── Avatarer ── */
.pwk-avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}
.pwk-avatar--client {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--pwk-coral);
	color: var(--pwk-white);
	font-weight: 600;
	font-size: .875rem;
}

/* ── Top-navigation ── */
.pwk-nav { padding: 1.5rem 0; }
.pwk-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.pwk-brand { display: inline-flex; align-items: center; gap: 1rem; }
.pwk-brand__logo { height: 36px; width: auto; display: block; }
.pwk-brand__sub {
	padding-left: 1rem;
	border-left: 1px solid var(--pwk-grey-light);
	color: var(--pwk-grey-dark);
	font-size: .875rem;
	font-weight: 500;
}
.pwk-nav__actions { display: flex; align-items: center; gap: 1.25rem; }
.pwk-client { display: inline-flex; align-items: center; gap: .6rem; font-size: .875rem; font-weight: 500; }

@media (max-width: 719px) {
	.pwk-brand__logo { height: 28px; }
	.pwk-brand__sub,
	.pwk-client__name { display: none; }
	.pwk-nav__actions { gap: .6rem; }
	.pwk-nav .pwk-btn--sm { padding: .6rem 1rem; }
}

/* ── Hovedindhold ── */
.pwk-main { flex: 1; padding-top: 2rem; padding-bottom: 5rem; }

.pwk-hero {
	display: grid;
	gap: 2rem;
	align-items: end;
	margin-bottom: 3rem;
}
@media (min-width: 900px) { .pwk-hero { grid-template-columns: 1fr minmax(340px, 420px); } }

.pwk-hero__title {
	margin: 1.4rem 0 0;
	font-family: var(--pwk-font-display);
	font-size: clamp(2.4rem, 5vw, 3.9rem);
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -.01em;
}
.pwk-hero__accent { display: block; color: var(--pwk-accent-dark); }

/* "Philip skriver"-boksen */
.pwk-note {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem 1.4rem;
	background: var(--pwk-white);
	border-radius: var(--pwk-r);
	box-shadow: var(--pwk-shadow-strong);
}
.pwk-note__from { margin: 0; font-weight: 600; font-size: .9rem; }
.pwk-note__text { margin: .2rem 0 0; color: var(--pwk-grey-dark); font-size: .875rem; }

.pwk-section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem 1rem;
	margin-bottom: 1.1rem;
}

/* ── Kort ── */
.pwk-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .pwk-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pwk-grid { grid-template-columns: repeat(3, 1fr); } }

.pwk-card {
	display: flex;
	flex-direction: column;
	padding: .75rem;
	background: var(--pwk-white);
	border-radius: var(--pwk-r-lg);
	box-shadow: var(--pwk-shadow);
	transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s;
}
.pwk-card:hover { transform: translateY(-3px); box-shadow: var(--pwk-shadow-strong); }

.pwk-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	border-radius: var(--pwk-r);
	overflow: hidden;
	background: var(--pwk-primary);
	display: flex;
	align-items: center;
	justify-content: center;
}
.pwk-card__media video,
.pwk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pwk-card__media--video video { object-fit: contain; background: #0f0c24; }
.pwk-card__media--file { background: var(--pwk-accent-light); }
.pwk-card__ext { font-family: var(--pwk-font-display); font-weight: 900; font-size: 1.8rem; color: var(--pwk-accent-dark); }

.pwk-card__body {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	flex: 1;
	padding: 1rem .5rem .5rem;
}
.pwk-card__title {
	margin: 0;
	font-family: var(--pwk-font-display);
	font-size: 1.45rem;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.pwk-card__meta { margin: 0 0 1rem; color: var(--pwk-grey-dark); font-size: .875rem; }
.pwk-card__download { margin-top: auto; width: 100%; }

/* ── Status-mærkater (Klar til feedback = koral fra logoet, øvrige = lavendel) ── */
.pwk-status {
	display: inline-flex;
	align-items: center;
	padding: .35rem .85rem;
	border-radius: 100px;
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
	background: var(--pwk-accent-light);
	color: var(--pwk-primary);
}
.pwk-status--ready_for_feedback { background: var(--pwk-coral-light); color: var(--pwk-coral-dark); }
.pwk-card__media > .pwk-status {
	position: absolute;
	top: .8rem;
	left: .8rem;
	z-index: 2;
	box-shadow: 0 4px 14px rgba(44, 36, 99, .18);
}

/* ── Projektkort ── */
.pwk-grid > li { display: flex; }
.pwk-project { width: 100%; color: inherit; }
.pwk-project:focus-visible { outline: 3px solid var(--pwk-accent); outline-offset: 3px; }
.pwk-project__media { background: linear-gradient(135deg, var(--pwk-accent-light), var(--pwk-accent)); }
.pwk-project__media video { object-fit: cover; pointer-events: none; }
.pwk-project--in_production .pwk-project__media img,
.pwk-project--in_production .pwk-project__media video { filter: grayscale(1); } /* Som i mockuppet */
.pwk-project__initial {
	font-family: var(--pwk-font-display);
	font-size: 4rem;
	font-weight: 900;
	color: var(--pwk-white);
	opacity: .85;
}
.pwk-project .pwk-card__meta { margin-bottom: .75rem; }
.pwk-project__foot {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: auto 0 0;
	padding-top: .25rem;
	font-size: .8rem;
	color: var(--pwk-grey-dark);
}

/* ── Projektside ── */
.pwk-back {
	display: inline-block;
	margin-bottom: .6rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--pwk-grey-dark);
}
.pwk-back:hover { color: var(--pwk-primary); }
.pwk-project-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: 2rem;
}
.pwk-project-head__title {
	margin: 0;
	font-family: var(--pwk-font-display);
	font-size: clamp(2.2rem, 4.5vw, 3.2rem);
	font-weight: 900;
	line-height: 1.1;
}
.pwk-project-head p { margin: .3rem 0 0; }
.pwk-project-head__status { display: flex; align-items: center; gap: .8rem; }

/* ── Projektside: afspiller + sidepanel ("studio") ── */
.pwk-studio {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* minmax(0,…) så den vandrette klip-række ikke gør siden bredere end skærmen */
	gap: 1.5rem;
	align-items: start;
}
.pwk-studio__main,
.pwk-studio__side { min-width: 0; }
@media (min-width: 900px)  { .pwk-studio { grid-template-columns: minmax(0, 1fr) minmax(340px, 32%); } }
@media (min-width: 1400px) { .pwk-studio { grid-template-columns: minmax(0, 1fr) 460px; gap: 2rem; } }

.pwk-player {
	position: relative;
	border-radius: 20px;
	overflow: hidden;
	background: #0f0c24;
	box-shadow: var(--pwk-shadow-strong);
}
.pwk-player__stage {
	aspect-ratio: 16 / 9;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pwk-player__stage video,
.pwk-player__stage img { width: 100%; height: 100%; object-fit: contain; display: block; background: #0f0c24; }
.pwk-player__file { color: var(--pwk-white); font-weight: 600; padding: 1rem; text-align: center; overflow-wrap: anywhere; }
.pwk-player__label {
	position: absolute;
	top: .8rem;
	left: .8rem;
	z-index: 2;
	max-width: calc(100% - 1.6rem);
	padding: .35rem .85rem;
	border-radius: 100px;
	background: rgba(44, 36, 99, .75);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	color: var(--pwk-white);
	font-size: .75rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
}

/* Klip-faner: rækker på desktop, vandret scroll på mobil */
.pwk-clips {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: .75rem;
	margin-top: 1rem;
}
@media (max-width: 639px) {
	.pwk-clips {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		padding-bottom: .4rem;
		margin-right: calc(-1 * var(--pwk-gutter));
		padding-right: var(--pwk-gutter);
	}
	.pwk-clip-tab { flex: 0 0 72%; scroll-snap-align: start; }
}
.pwk-clip-tab {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .65rem .8rem;
	background: var(--pwk-white);
	border: 2px solid var(--pwk-grey-light);
	border-radius: var(--pwk-r);
	transition: border-color .2s, box-shadow .2s;
}
.pwk-clip-tab:hover { border-color: var(--pwk-accent); }
.pwk-clip-tab.is-active { border-color: var(--pwk-primary); box-shadow: var(--pwk-shadow); }
.pwk-clip-tab:focus-visible { outline: 3px solid var(--pwk-accent); outline-offset: 2px; }
.pwk-clip-tab__thumb {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--pwk-accent-light);
	color: var(--pwk-primary);
	font-family: var(--pwk-font-display);
	font-weight: 900;
}
.pwk-clip-tab.is-active .pwk-clip-tab__thumb { background: var(--pwk-primary); color: var(--pwk-white); }
.pwk-clip-tab__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.pwk-clip-tab__title { font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwk-clip-tab__meta { font-size: .75rem; color: var(--pwk-grey-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwk-clip-tab__state { font-size: .75rem; font-weight: 600; color: var(--pwk-coral-dark); }
.pwk-clip-tab__state.is-approved { color: var(--pwk-primary); }
.pwk-clip-tab__state.is-approved::before { content: "✓ "; }

/* Sidepanel med handlinger (fase 4 tilføjer kommentarer her) */
.pwk-side-card {
	padding: 1.5rem;
	background: var(--pwk-white);
	border-radius: 20px;
	box-shadow: var(--pwk-shadow-strong);
}
@media (min-width: 900px) { .pwk-side-card { position: sticky; top: 1.5rem; } }
.pwk-side-card__title {
	margin: .5rem 0 .2rem;
	font-family: var(--pwk-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}
.pwk-side-card .pwk-muted { margin: 0; }
.pwk-approval {
	margin: 1.1rem 0 0;
	padding: .7rem .9rem;
	border-radius: 12px;
	background: var(--pwk-coral-light);
	color: var(--pwk-coral-dark);
	font-size: .85rem;
	font-weight: 600;
}
.pwk-approval.is-approved { background: var(--pwk-accent-light); color: var(--pwk-primary); }
.pwk-approval.is-approved::before { content: "✓ "; }
.pwk-side-card__actions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .6rem;
	margin-top: 1.1rem;
}
.pwk-side-card__actions form { display: contents; }
.pwk-side-card__actions .pwk-btn { width: 100%; padding-left: 1rem; padding-right: 1rem; white-space: normal; text-align: center; }
.pwk-side-card__error { margin: .8rem 0 0; color: var(--pwk-error); font-size: .85rem; font-weight: 500; }

/* ── Kommentarer (fase 4) ── */
.pwk-side-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.pwk-side-card__head .pwk-side-card__title { margin: 0; }
.pwk-side-card__clip { margin: .15rem 0 0 !important; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pwk-feed {
	list-style: none;
	margin: 1rem -.5rem 0;
	padding: 0 .5rem;
	max-height: 380px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.pwk-feed__empty { color: var(--pwk-grey-dark); font-size: .85rem; padding: .5rem 0 1rem; }

.pwk-comment {
	display: flex;
	gap: .7rem;
	padding: .6rem .4rem;
	border-radius: 12px;
	transition: background .4s;
}
.pwk-comment.is-reply { margin-left: 2.2rem; }
.pwk-comment.is-highlight { background: var(--pwk-accent-light); }
.pwk-avatar--sm { width: 32px; height: 32px; font-size: .8rem; }
.pwk-comment__body { min-width: 0; flex: 1; }
.pwk-comment__head { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; font-size: .85rem; }
.pwk-comment__time {
	padding: .1rem .55rem;
	border: 0;
	border-radius: 100px;
	background: var(--pwk-accent-light);
	color: var(--pwk-primary);
	font: inherit;
	font-size: .75rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	cursor: pointer;
}
.pwk-comment__time:hover { background: var(--pwk-accent); }
.pwk-comment__date { color: var(--pwk-grey-mid); font-size: .72rem; }
.pwk-comment__text { margin: .2rem 0 0; font-size: .9rem; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; color: var(--pwk-primary); }

.pwk-link-btn {
	padding: 0;
	border: 0;
	background: none;
	color: var(--pwk-grey-dark);
	font: inherit;
	font-size: .75rem;
	font-weight: 600;
	cursor: pointer;
}
.pwk-link-btn:hover { color: var(--pwk-primary); text-decoration: underline; }
.pwk-comment__reply { margin-top: .15rem; opacity: .8; }

/* Skrivefelt – "Ved 0:15"-knappen er send-knappen (som i mockuppet) */
.pwk-composer { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--pwk-grey-light); }
.pwk-composer__reply { margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; color: var(--pwk-grey-dark); }
.pwk-composer__reply::before { content: "↳ "; }
.pwk-comment__reply.is-active { color: var(--pwk-coral-dark); opacity: 1; }
.pwk-composer__row {
	display: flex;
	align-items: flex-end;
	gap: .4rem;
	padding: .35rem .35rem .35rem 1rem;
	border: 1px solid var(--pwk-grey-light);
	border-radius: 24px;
	background: var(--pwk-bg);
	transition: border-color .2s, box-shadow .2s;
}
.pwk-composer__row:focus-within { border-color: var(--pwk-accent-dark); box-shadow: 0 0 0 3px var(--pwk-accent-light); }
.pwk-composer textarea {
	flex: 1;
	min-width: 0;
	min-height: 36px;
	max-height: 160px;
	padding: .45rem 0;
	border: 0;
	background: transparent;
	color: var(--pwk-primary);
	font: inherit;
	font-size: .9rem;
	line-height: 1.4;
	resize: none;
}
.pwk-composer textarea:focus { outline: none; }
.pwk-timechip {
	flex: 0 0 auto;
	min-height: 36px;
	padding: .4rem .85rem;
	border: 0;
	border-radius: 100px;
	background: var(--pwk-coral);
	color: var(--pwk-white);
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	cursor: pointer;
	transition: background .2s;
}
.pwk-timechip:hover { background: var(--pwk-coral-dark); }
.pwk-timechip:disabled { opacity: .7; cursor: wait; }
.pwk-timechip:focus-visible { outline: 3px solid var(--pwk-accent); outline-offset: 2px; }

/* ── Afspiller-bar: afspil · tid · tidslinje med kommentar-prikker · længde · lyd · fuld skærm ── */
.pwk-player__stage video { cursor: pointer; }
.pwk-player__bigplay {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: 76px;
	height: 76px;
	margin: -38px 0 0 -38px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0; /* Trekantens tyngdepunkt ligger allerede i ikonets midte – ingen ekstra forskydning */
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--pwk-primary);
	box-shadow: 0 8px 30px rgba(15, 12, 36, .35);
	cursor: pointer;
	transition: transform .2s;
}
.pwk-player__bigplay svg { width: 30px; height: 30px; }
.pwk-player__bigplay:hover { transform: scale(1.06); }

.pwk-controls {
	display: flex;
	align-items: center;
	gap: .9rem;
	margin-top: .9rem;
}
.pwk-controls__play {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--pwk-primary);
	color: var(--pwk-white);
	box-shadow: var(--pwk-btn-shadow);
	cursor: pointer;
}
.pwk-controls__play:hover { background: var(--pwk-primary-hover); }
.pwk-controls__play svg { width: 18px; height: 18px; }
.pwk-controls .pwk-icon-pause,
.pwk-controls.is-playing .pwk-icon-play,
.pwk-controls .pwk-icon-muted,
.pwk-controls.is-muted .pwk-icon-sound { display: none; }
.pwk-controls.is-playing .pwk-icon-pause,
.pwk-controls.is-muted .pwk-icon-muted { display: block; }

.pwk-controls__time {
	flex: 0 0 auto;
	min-width: 2.6em;
	font-size: .85rem;
	font-weight: 500;
	font-variant-numeric: tabular-nums;
	color: var(--pwk-primary);
	text-align: center;
}
.pwk-controls__icon {
	flex: 0 0 auto;
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--pwk-primary);
	cursor: pointer;
}
.pwk-controls__icon:hover { background: var(--pwk-accent-light); }
.pwk-controls__icon svg { width: 20px; height: 20px; }
.pwk-controls button:focus-visible { outline: 3px solid var(--pwk-accent); outline-offset: 2px; }

/* Tidslinjen: høj klikflade, tynd skinne, prikker ovenpå */
.pwk-track {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 28px;
	display: flex;
	align-items: center;
	cursor: pointer;
	touch-action: none; /* Træk på mobil spoler i stedet for at scrolle siden */
}
.pwk-track:focus-visible { outline: 3px solid var(--pwk-accent); outline-offset: 2px; border-radius: 6px; }
.pwk-track__rail {
	position: relative;
	width: 100%;
	height: 6px;
	border-radius: 100px;
	background: var(--pwk-accent-light);
	overflow: hidden;
}
.pwk-track__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: var(--pwk-primary);
	border-radius: 100px;
}
.pwk-track__markers { position: absolute; inset: 0; pointer-events: none; }
.pwk-marker {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	margin: -7px 0 0 -7px;
	padding: 0;
	border: 2px solid var(--pwk-white);
	border-radius: 50%;
	background: var(--pwk-coral);
	box-shadow: 0 2px 6px rgba(44, 36, 99, .25);
	cursor: pointer;
	pointer-events: auto;
	transition: transform .15s;
}
.pwk-marker.is-staff { background: var(--pwk-accent-dark); }
.pwk-marker:hover, .pwk-marker:focus-visible { transform: scale(1.4); outline: none; z-index: 1; }

@media (max-width: 639px) {
	.pwk-controls { gap: .5rem; }
	.pwk-controls__play { width: 40px; height: 40px; }
	.pwk-controls [data-pwk-mute] { display: none; } /* Telefonens egne lydknapper bruges */
}
.pwk-btn:disabled { opacity: .6; cursor: wait; transform: none; }

/* ── Paneler: adgangskode, udløbet, fejl, tom ── */
.pwk-panel {
	max-width: 520px;
	margin: 6vh auto 0;
	padding: 2.6rem 2rem;
	text-align: center;
	background: var(--pwk-white);
	border-radius: var(--pwk-r-lg);
	box-shadow: var(--pwk-shadow-strong);
}
.pwk-panel--inline { max-width: none; margin: 0; text-align: left; padding: 1.8rem 2rem; }
.pwk-panel__title {
	margin: 1.2rem 0 .5rem;
	font-family: var(--pwk-font-display);
	font-size: clamp(2rem, 5vw, 2.6rem);
	font-weight: 900;
	line-height: 1.1;
}
.pwk-panel p { margin: 0; color: var(--pwk-grey-dark); }

.pwk-login { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }
.pwk-input {
	flex: 1 1 200px;
	min-height: 48px;
	padding: .7rem 1.2rem;
	border: 1px solid var(--pwk-grey-light);
	border-radius: 100px;
	background: var(--pwk-bg);
	color: var(--pwk-primary);
	font: inherit;
}
.pwk-input:focus { outline: none; border-color: var(--pwk-accent-dark); box-shadow: 0 0 0 3px var(--pwk-accent-light); }
.pwk-login .pwk-btn { flex: 0 0 auto; }
.pwk-error { color: var(--pwk-error) !important; margin-top: 1rem !important; font-weight: 500; }

/* Admin-noter (kun synlige for indloggede redaktører) */
.pwk-admin-note {
	margin: 1rem 0 0;
	padding: .8rem 1rem;
	background: #fff8e1;
	border: 1px solid #f0d58a;
	border-radius: 10px;
	color: #5c4400;
	font-size: .85rem;
	text-align: left;
	overflow-wrap: anywhere;
}

/* ── Footer ── */
.pwk-footer { padding: 2rem 0; border-top: 1px solid var(--pwk-grey-light); color: var(--pwk-grey-dark); font-size: .78rem; }
.pwk-footer__inner { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.pwk-footer a:hover { color: var(--pwk-primary); }

.pwk-sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
	.pwk-btn, .pwk-card { transition: none; }
	.pwk-btn--primary:hover, .pwk-card:hover { transform: none; }
}