Context Navigation

style.css@ dd80030

main

Last change on this file since dd80030 was d5b9d2a, checked in by roboburr <roboburr@…>, 3 months ago

Fix: bottom tab scrolls with the page on mobile (overflow-x hidden→clip)

body (and on mobile body+html) had overflow-x:hidden. hidden automatically sets
the other axis to overflow:auto → body becomes a scroll container → position:fixed
(the bottom tab) becomes relative to it and scrolls along (visible e.g. on the
admin list). overflow-x:clip clips horizontally without creating that scroll context;
hidden stays as fallback for iOS <16. CSS cache-buster v6.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

Property mode set to 100644

File size: 125.7 KB

Line
1	/* ============================================================
2	LOKALE FONTS — SIL OFL 1.1 licensed, self-hosted
3	Geen third-party requests, geen privacy-leak naar Google.
4	Variable WOFF2 bestanden onder /assets/fonts/
5	Licenses in /assets/fonts/licenses/
6	============================================================ */
7	@font-face {
8	font-family: 'Fraunces';
9	font-style: normal;
10	font-display: swap;
11	font-weight: 100 900;
12	src: url('/assets/fonts/fraunces-latin-full-normal.woff2') format('woff2-variations');
13	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
14	}
15	@font-face {
16	font-family: 'Fraunces';
17	font-style: italic;
18	font-display: swap;
19	font-weight: 100 900;
20	src: url('/assets/fonts/fraunces-latin-full-italic.woff2') format('woff2-variations');
21	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
22	}
23	@font-face {
24	font-family: 'Literata';
25	font-style: normal;
26	font-display: swap;
27	font-weight: 400 700;
28	src: url('/assets/fonts/literata-latin-opsz-normal.woff2') format('woff2-variations');
29	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
30	}
31	@font-face {
32	font-family: 'Literata';
33	font-style: italic;
34	font-display: swap;
35	font-weight: 400 700;
36	src: url('/assets/fonts/literata-latin-opsz-italic.woff2') format('woff2-variations');
37	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
38	}
39	@font-face {
40	font-family: 'Plus Jakarta Sans';
41	font-style: normal;
42	font-display: swap;
43	font-weight: 400 700;
44	src: url('/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
45	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
46	}
47	@font-face {
48	font-family: 'Plus Jakarta Sans';
49	font-style: italic;
50	font-display: swap;
51	font-weight: 400 700;
52	src: url('/assets/fonts/plus-jakarta-sans-latin-wght-italic.woff2') format('woff2-variations');
53	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
54	}
55
56	/* PrutCMS publieke stijl — editorial-ish, geen emoji-UI */
57
58	:root {
59	--font-display: 'Fraunces', Georgia, serif;
60	--font-body: 'Literata', Georgia, serif;
61	--font-ui: 'Plus Jakarta Sans', system-ui, sans-serif;
62	--font-mono: ui-monospace, Menlo, Consolas, monospace;
63	--radius: 8px; --transition: 180ms cubic-bezier(.4,0,.2,1);
64	--safe-top: env(safe-area-inset-top, 0); --safe-bot: env(safe-area-inset-bottom, 0);
65	color-scheme: light dark;
66	}
67
68	/* ============================================================
69	PALETTES — elk palette definieert alleen bg/tekst/rand shades.
70	--accent wordt LOS ingesteld via de accent-kleur config (inline in template).
71	Palette-selector: <html data-palette="forest"> en optioneel data-theme="dark"\|"light".
72	Als geen data-palette = Sage default.
73	============================================================ */
74
75	/* ── SAGE (default) ── warme crème ── */
76	:root,
77	[data-palette="sage"] {
78	--paper: #faf8f3; --paper-2: #f2ede0;
79	--ink: #1a1a1a; --ink-soft: #3d3833; --ink-muted: #6b6560; --ink-faint: #a8a29e;
80	--rule: #e8e2d5; --rule-2: #d4ccb8;
81	}
82	@media (prefers-color-scheme: dark) {
83	:root:not([data-theme="light"]):not([data-palette]),
84	[data-palette="sage"]:not([data-theme="light"]) {
85	--paper: #1c1a17; --paper-2: #252220;
86	--ink: #f4ede0; --ink-soft: #d4ccb8; --ink-muted: #a8a29e; --ink-faint: #6b6560;
87	--rule: #3d3833; --rule-2: #4d4740;
88	}
89	}
90	[data-theme="dark"]:not([data-palette]),
91	[data-theme="dark"][data-palette="sage"] {
92	--paper: #1c1a17; --paper-2: #252220;
93	--ink: #f4ede0; --ink-soft: #d4ccb8; --ink-muted: #a8a29e; --ink-faint: #6b6560;
94	--rule: #3d3833; --rule-2: #4d4740;
95	}
96
97	/* ── PAPER ── minimalistisch wit → zwart ── */
98	[data-palette="paper"] {
99	--paper: #ffffff; --paper-2: #f4f4f5;
100	--ink: #09090b; --ink-soft: #27272a; --ink-muted: #52525b; --ink-faint: #a1a1aa;
101	--rule: #e4e4e7; --rule-2: #d4d4d8;
102	}
103	@media (prefers-color-scheme: dark) {
104	[data-palette="paper"]:not([data-theme="light"]) {
105	--paper: #0a0a0a; --paper-2: #18181b;
106	--ink: #fafafa; --ink-soft: #d4d4d8; --ink-muted: #a1a1aa; --ink-faint: #71717a;
107	--rule: #27272a; --rule-2: #3f3f46;
108	}
109	}
110	[data-theme="dark"][data-palette="paper"] {
111	--paper: #0a0a0a; --paper-2: #18181b;
112	--ink: #fafafa; --ink-soft: #d4d4d8; --ink-muted: #a1a1aa; --ink-faint: #71717a;
113	--rule: #27272a; --rule-2: #3f3f46;
114	}
115
116	/* ── OCEAN ── koel blauw-grijs → diep navy ── */
117	[data-palette="ocean"] {
118	--paper: #f0f6fb; --paper-2: #dce9f4;
119	--ink: #0f1e2e; --ink-soft: #1e3a52; --ink-muted: #475569; --ink-faint: #94a3b8;
120	--rule: #c7d9ea; --rule-2: #a8c0d6;
121	}
122	@media (prefers-color-scheme: dark) {
123	[data-palette="ocean"]:not([data-theme="light"]) {
124	--paper: #0a1929; --paper-2: #152a3f;
125	--ink: #e0f2fe; --ink-soft: #bfdbfe; --ink-muted: #93c5fd; --ink-faint: #64748b;
126	--rule: #1e3a52; --rule-2: #2a4a68;
127	}
128	}
129	[data-theme="dark"][data-palette="ocean"] {
130	--paper: #0a1929; --paper-2: #152a3f;
131	--ink: #e0f2fe; --ink-soft: #bfdbfe; --ink-muted: #93c5fd; --ink-faint: #64748b;
132	--rule: #1e3a52; --rule-2: #2a4a68;
133	}
134
135	/* ── FOREST ── olijfgroen → donker bos ── */
136	[data-palette="forest"] {
137	--paper: #f2f6ed; --paper-2: #e1ead6;
138	--ink: #1a2e15; --ink-soft: #2d4a26; --ink-muted: #5a6f52; --ink-faint: #8aa080;
139	--rule: #ccddbd; --rule-2: #adc396;
140	}
141	@media (prefers-color-scheme: dark) {
142	[data-palette="forest"]:not([data-theme="light"]) {
143	--paper: #0d1f12; --paper-2: #1a331e;
144	--ink: #dcf2d0; --ink-soft: #b8d8a8; --ink-muted: #8aad7c; --ink-faint: #5a7a50;
145	--rule: #2d4a30; --rule-2: #3d5e42;
146	}
147	}
148	[data-theme="dark"][data-palette="forest"] {
149	--paper: #0d1f12; --paper-2: #1a331e;
150	--ink: #dcf2d0; --ink-soft: #b8d8a8; --ink-muted: #8aad7c; --ink-faint: #5a7a50;
151	--rule: #2d4a30; --rule-2: #3d5e42;
152	}
153
154	/* ── STONE ── beige bruin → koffie ── */
155	[data-palette="stone"] {
156	--paper: #f5f0e8; --paper-2: #e7ddce;
157	--ink: #2b2218; --ink-soft: #4a3a2a; --ink-muted: #78614a; --ink-faint: #a8927b;
158	--rule: #d6c6ac; --rule-2: #bda98a;
159	}
160	@media (prefers-color-scheme: dark) {
161	[data-palette="stone"]:not([data-theme="light"]) {
162	--paper: #1a130b; --paper-2: #2d2416;
163	--ink: #f5e9d5; --ink-soft: #d4c0a3; --ink-muted: #a8927b; --ink-faint: #786452;
164	--rule: #3d2f1e; --rule-2: #534029;
165	}
166	}
167	[data-theme="dark"][data-palette="stone"] {
168	--paper: #1a130b; --paper-2: #2d2416;
169	--ink: #f5e9d5; --ink-soft: #d4c0a3; --ink-muted: #a8927b; --ink-faint: #786452;
170	--rule: #3d2f1e; --rule-2: #534029;
171	}
172
173	/* ── MIDNIGHT ── lavendel → donker paars ── */
174	[data-palette="midnight"] {
175	--paper: #f3f1f8; --paper-2: #e3ddf0;
176	--ink: #1e1a2e; --ink-soft: #332c4d; --ink-muted: #5e5478; --ink-faint: #9288a8;
177	--rule: #d4cae3; --rule-2: #b8a9cc;
178	}
179	@media (prefers-color-scheme: dark) {
180	[data-palette="midnight"]:not([data-theme="light"]) {
181	--paper: #0f0a1f; --paper-2: #1c1432;
182	--ink: #e9def7; --ink-soft: #c4b5d9; --ink-muted: #9d88b8; --ink-faint: #6b5a85;
183	--rule: #2d1f4a; --rule-2: #3d2b5e;
184	}
185	}
186	[data-theme="dark"][data-palette="midnight"] {
187	--paper: #0f0a1f; --paper-2: #1c1432;
188	--ink: #e9def7; --ink-soft: #c4b5d9; --ink-muted: #9d88b8; --ink-faint: #6b5a85;
189	--rule: #2d1f4a; --rule-2: #3d2b5e;
190	}
191
192	/* ── SUNSET ── roze crème → diep paars-roze ── */
193	[data-palette="sunset"] {
194	--paper: #fdf4f3; --paper-2: #f7e1dc;
195	--ink: #2e1618; --ink-soft: #4d282b; --ink-muted: #7a4a4e; --ink-faint: #b08589;
196	--rule: #ebcac3; --rule-2: #d9a8a0;
197	}
198	@media (prefers-color-scheme: dark) {
199	[data-palette="sunset"]:not([data-theme="light"]) {
200	--paper: #1f0a14; --paper-2: #321525;
201	--ink: #fce7f3; --ink-soft: #f0c5d3; --ink-muted: #c896a8; --ink-faint: #8a6878;
202	--rule: #4a1f35; --rule-2: #5e2d43;
203	}
204	}
205	[data-theme="dark"][data-palette="sunset"] {
206	--paper: #1f0a14; --paper-2: #321525;
207	--ink: #fce7f3; --ink-soft: #f0c5d3; --ink-muted: #c896a8; --ink-faint: #8a6878;
208	--rule: #4a1f35; --rule-2: #5e2d43;
209	}
210
211	/* ── CREAM ── warm papier → caramel-donker ── */
212	[data-palette="cream"] {
213	--paper: #fefaf0; --paper-2: #f5ebd5;
214	--ink: #2a1f0f; --ink-soft: #4a3820; --ink-muted: #786140; --ink-faint: #ad9068;
215	--rule: #e8d9b0; --rule-2: #d1bc8a;
216	}
217	@media (prefers-color-scheme: dark) {
218	[data-palette="cream"]:not([data-theme="light"]) {
219	--paper: #1a1208; --paper-2: #2e2012;
220	--ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
221	--rule: #3d2c16; --rule-2: #523d1f;
222	}
223	}
224	[data-theme="dark"][data-palette="cream"] {
225	--paper: #1a1208; --paper-2: #2e2012;
226	--ink: #fef3d6; --ink-soft: #e0cfa0; --ink-muted: #b0996b; --ink-faint: #7a6848;
227	--rule: #3d2c16; --rule-2: #523d1f;
228	}
229
230	/* Accent-tint wordt berekend uit --accent, zodat hij meegaat bij elke accent-keuze.
231	Wordt in template inline gezet; hier alleen een fallback. */
232	:root { --accent: #c2410c; --accent-soft: #ea580c; --accent-tint: #fef2e8; }
233
234	* { box-sizing: border-box; }
235	html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
236	body {
237	margin: 0;
238	/* clip i.p.v. hidden: hidden zet overflow-y automatisch op 'auto' → de body
239	wordt een scroll-container → op mobiel schuift position:fixed (bottom-tab)
240	mee bij scrollen. clip clipt horizontaal zonder dat effect. */
241	overflow-x: hidden; /* fallback oudere browsers */
242	overflow-x: clip;
243	}
244	body:not(.admin) {
245	min-height: 100dvh;
246	background: var(--paper); color: var(--ink);
247	font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
248	font-feature-settings: "liga" 1, "kern" 1, "onum" 1;
249	-webkit-font-smoothing: antialiased;
250	/* v9.4 — Sticky footer: body als flex-kolom, main groeit, footer onderaan */
251	display: flex;
252	flex-direction: column;
253	}
254	body:not(.admin) #pcms-main { flex: 1 0 auto; }
255	body:not(.admin) .site-footer { flex-shrink: 0; }
256	body:not(.admin)::before {
257	content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
258	background: radial-gradient(ellipse at top, color-mix(in srgb, var(--accent) 3%, transparent), transparent 60%),
259	radial-gradient(ellipse at bottom right, color-mix(in srgb, var(--accent) 4%, transparent), transparent 55%);
260	}
261	::selection { background: var(--accent-tint); color: var(--accent); }
262
263	h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 450; line-height: 1.15; letter-spacing: -0.015em; margin: 0; text-wrap: balance; font-variation-settings: "opsz" 144, "SOFT" 50; }
264	h1 { font-size: clamp(2rem, 4vw + 1rem, 3.5rem); letter-spacing: -0.022em; }
265	h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2.25rem); margin: 1.5rem 0 .4rem; }
266	h3 { font-size: 1.375rem; margin: 1.25rem 0 .3rem; }
267	p { margin: 0 0 .85em; text-wrap: pretty; hyphens: auto; }
268	a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; transition: color var(--transition), text-decoration-color var(--transition); }
269	a:hover { color: var(--accent); text-decoration-color: var(--accent); }
270	a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; text-decoration: none; }
271	blockquote { margin: 2em 0; padding: .25em 0 .25em 1.25em; border-left: 2px solid var(--accent); font-family: var(--font-display); font-style: italic; font-size: 1.15em; color: var(--ink-soft); }
272	code { font-family: var(--font-mono); font-size: .9em; padding: .15em .4em; background: var(--paper-2); border: 1px solid var(--rule); border-radius: 4px; }
273	pre { font-family: var(--font-mono); font-size: .85rem; padding: 1.25em 1.5em; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--radius); overflow-x: auto; line-height: 1.5; }
274	pre code { padding: 0; background: none; border: none; }
275	hr { border: 0; border-top: 1px solid var(--rule); margin: 3em auto; max-width: 4rem; }
276
277	/* Container — schaalt mee met schermgrootte.
278	42rem default (optimale leesbreedte voor tekst),
279	breder op HD/2.5K/4K waar je meer ademruimte hebt.
280	Grid-view heeft z'n eigen bredere variant (zie .feed-grid). */
281	/* Container max-width schaalt per schermformaat.
282	42rem is optimale leesbreedte voor tekst. Op grotere schermen
283	ademruimte geven zonder uitwaaieren. Grid apart geregeld. */
284	.container { max-width: 42rem; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2rem); }
285
286	/* Laptop / Full HD — 1440px viewport of groter */
287	@media (min-width: 1440px) {
288	.container { max-width: 56rem; }
289	}
290	/* Desktop / QHD 2.5K — 1920px viewport of groter */
291	@media (min-width: 1920px) {
292	.container { max-width: 72rem; }
293	}
294	/* 4K UHD — 2560px viewport of groter */
295	@media (min-width: 2560px) {
296	.container { max-width: 88rem; }
297	}
298
299	/* Grid-view tiles: Instagram-feel. Max-width schaalt met gekozen kolommen zodat
300	tegels niet te groot of te klein worden. */
301	@media (min-width: 1200px) {
302	body[data-grid-cols="4"] .feed-grid.container { max-width: 80rem; }
303	body[data-grid-cols="3"] .feed-grid.container { max-width: 64rem; }
304	body[data-grid-cols="2"] .feed-grid.container { max-width: 48rem; }
305	}
306	@media (min-width: 1920px) {
307	body[data-grid-cols="4"] .feed-grid.container { max-width: 96rem; }
308	}
309
310	.icon { width: 1.125em; height: 1.125em; flex-shrink: 0; vertical-align: -0.15em; stroke: currentColor; fill: none; display: inline-block; }
311
312	/* Masthead */
313	.masthead {
314	border-bottom: 1px solid var(--rule);
315	padding: calc(1rem + var(--safe-top)) 0 1rem;
316	/* GEEN backdrop-filter hier: een voorouder met backdrop-filter blokkeert de
317	frosted blur van het user-menu-dropdown eronder. Masthead is toch bijna
318	dekkend, dus solide bg i.p.v. blur. */
319	background: color-mix(in srgb, var(--paper) 94%, transparent);
320	position: sticky; top: 0; z-index: 20;
321	}
322	.masthead-inner { display: flex; align-items: center; justify-content: flex-end; gap: 1.5rem; }
323	.masthead-brand { min-width: 0; flex: 1 1 auto; overflow: hidden; }
324	.site-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 500; font-variation-settings: "opsz" 72, "SOFT" 100; letter-spacing: -0.015em; text-decoration: none; color: var(--ink); line-height: 1; display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
325	.site-title:hover { color: var(--accent); }
326	/* v9.0 — nav-home icon (replaces site-title text in nav) */
327	.nav-home {
328	display: inline-flex; align-items: center; justify-content: center;
329	width: 2.25rem; height: 2.25rem;
330	color: var(--ink-soft); text-decoration: none;
331	border-radius: 6px; border: 1px solid transparent;
332	transition: all var(--transition);
333	}
334	.nav-home:hover { color: var(--ink); background: var(--paper-2); border-color: var(--rule); }
335	.nav-home .icon { width: 1.15rem; height: 1.15rem; }
336	.top-nav { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
337	.nav-link, .nav-btn {
338	font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
339	color: var(--ink-soft); text-decoration: none;
340	padding: .5rem .85rem; border-radius: 6px;
341	background: transparent; border: 1px solid transparent;
342	cursor: pointer;
343	display: inline-flex; align-items: center; gap: .4rem;
344	min-height: 2.25rem;
345	transition: all var(--transition);
346	}
347	.nav-link:hover, .nav-btn:hover { color: var(--ink); background: var(--paper-2); border-color: var(--rule); }
348	.nav-link-muted { color: var(--ink-muted); }
349	.nav-label { display: none; }
350	@media (min-width: 560px) { .nav-label { display: inline; } }
351
352	/* Article */
353	main { padding-top: 2rem; }
354	.page { padding-block: 2rem 3rem; }
355	page-container { display: block; font-size: 1.125rem; line-height: 1.75; }
356	page-container h1 { font-size: clamp(2rem, 5vw + 1rem, 3.75rem); margin-bottom: 1rem; letter-spacing: -0.025em; }
357	page-container img, page-container iframe, page-container video { max-width: 100%; height: auto; display: block; margin: 2rem auto; border-radius: var(--radius); }
358	page-container audio { width: 100%; margin: 1.5rem 0; }
359	page-container figure { margin: 2rem 0; }
360	page-container figcaption { font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); text-align: center; margin-top: .5rem; }
361	page-container[contenteditable="true"] { outline: 2px dashed var(--accent); outline-offset: .5rem; border-radius: var(--radius); }
362
363	.empty { text-align: center; padding: 4rem 1rem; }
364	.empty h1 { font-size: 2rem; }
365	.empty p { color: var(--ink-muted); }
366
367	/* Embeds */
368	.pcms-embed, .folio-embed { margin: 2rem 0; }
369	.pcms-embed iframe, .folio-embed iframe { width: 100%; display: block; border: 0; border-radius: var(--radius); }
370
371	/* Article footer */
372	.article-footer { display: flex; justify-content: center; padding-top: 2rem; margin-top: 2rem; border-top: 1px solid var(--rule); }
373
374	/* Buttons */
375	.button {
376	font-family: var(--font-ui); font-size: .875rem; font-weight: 500;
377	padding: .6rem 1.1rem; min-height: 2.5rem;
378	display: inline-flex; align-items: center; gap: .5rem;
379	background: var(--ink); color: var(--paper);
380	border: 1px solid var(--ink);
381	border-radius: 6px;
382	text-decoration: none; cursor: pointer;
383	transition: all var(--transition);
384	}
385	.button:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
386	.button-ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
387	.button-ghost:hover { background: var(--paper-2); border-color: var(--accent); color: var(--accent); }
388
389	/* Pagination */
390	.pagination {
391	display: grid;
392	grid-template-columns: 1fr 1fr;
393	gap: 1rem;
394	padding-block: 2rem 4rem;
395	margin-top: 2rem;
396	border-top: 1px solid var(--rule);
397	}
398	a.pagination-item {
399	display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
400	border: 2px solid var(--rule-2, var(--rule));
401	border-radius: var(--radius);
402	text-decoration: none; transition: all .15s ease; font-size: .9rem;
403	background: var(--paper-2);
404	min-height: 5rem;
405	min-width: 0;
406	overflow: hidden;
407	cursor: pointer;
408	box-shadow: 0 1px 0 rgba(0,0,0,.02);
409	-webkit-tap-highlight-color: color-mix(in srgb, var(--accent) 30%, transparent);
410	position: relative;
411	}
412	.pagination-item:not(a) {
413	display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem;
414	border: 1px dashed var(--rule); border-radius: var(--radius);
415	font-size: .9rem; background: transparent; min-height: 5rem;
416	min-width: 0; overflow: hidden;
417	}
418	.pagination-next { flex-direction: row-reverse; text-align: right; }
419	a.pagination-item:hover {
420	border-color: var(--accent);
421	background: color-mix(in srgb, var(--accent) 5%, var(--paper-2));
422	transform: translateY(-2px);
423	box-shadow: 0 4px 12px rgba(0,0,0,.08);
424	}
425	a.pagination-item:active {
426	transform: translateY(0);
427	transition-duration: .05s;
428	}
429	.pagination-disabled { opacity: .5; cursor: default; font-style: italic; }
430	.pagination-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; flex: 1; }
431	.pagination-label {
432	display: block; font-family: var(--font-ui); font-size: .7rem; font-weight: 700;
433	letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
434	margin-bottom: .15rem;
435	}
436	.pagination-slug {
437	display: block; font-size: .72rem; color: var(--ink-muted);
438	opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
439	font-style: italic;
440	}
441	.pagination-title {
442	display: block; font-family: var(--font-display); font-weight: 600; color: var(--ink);
443	font-variation-settings: "opsz" 72; font-style: normal;
444	line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
445	font-size: 1.05rem;
446	text-decoration: underline;
447	text-decoration-color: var(--rule-2, var(--rule));
448	text-decoration-thickness: 1px;
449	text-underline-offset: 3px;
450	transition: text-decoration-color .15s;
451	}
452	a.pagination-item:hover .pagination-title {
453	text-decoration-color: var(--accent);
454	}
455	.pagination .icon {
456	width: 1.75em; height: 1.75em; flex-shrink: 0;
457	color: var(--accent);
458	transition: transform .15s;
459	}
460	a.pagination-prev:hover .icon { transform: translateX(-4px); }
461	a.pagination-next:hover .icon { transform: translateX(4px); }
462
463	/* Pinned-targets → accent-tint en dikkere rand voor duidelijkheid */
464	.pagination-item.is-pinned {
465	background: color-mix(in srgb, var(--accent) 8%, var(--paper-2));
466	border-color: color-mix(in srgb, var(--accent) 45%, var(--rule));
467	}
468	a.pagination-item.is-pinned:hover {
469	background: color-mix(in srgb, var(--accent) 15%, var(--paper-2));
470	border-color: var(--accent);
471	}
472
473	@media (max-width: 800px) { .pagination { grid-template-columns: 1fr; } }
474
475	/* Footer */
476	.site-footer { padding: 2rem 0 calc(2rem + var(--safe-bot)); border-top: 1px solid var(--rule); margin-top: 4rem; font-family: var(--font-ui); font-size: .85rem; color: var(--ink-muted); }
477	.site-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; align-items: center; }
478	.site-footer a { color: var(--ink-muted); text-decoration-color: var(--rule); }
479	.site-footer a:hover { color: var(--accent); }
480	.site-footer-links { display: flex; gap: 1rem; }
481	.sep { color: var(--ink-faint); margin: 0 .5rem; }
482	.footer-tagline { font-style: italic; opacity: .8; }
483
484	@media print {
485	.masthead, .pagination, .site-footer, .article-footer, .top-nav { display: none; }
486	body { background: #fff; color: #000; }
487	}
488	@media (prefers-reduced-motion: reduce) { , ::before, *::after { transition: none !important; animation: none !important; } }
489
490	/* ============================================================
491	V7 ADDITIONS — post metadata UI + audio player + post-images
492	============================================================ */
493
494	/* Post header */
495	.post-header { margin: 0 0 2rem; }
496	.post-cover {
497	margin: 0 0 1.5rem;
498	border-radius: 8px;
499	overflow: hidden;
500	background: color-mix(in srgb, var(--fg) 4%, transparent);
501	}
502	.post-cover img {
503	display: block;
504	width: 100%;
505	height: auto;
506	max-height: 50vh;
507	object-fit: cover;
508	}
509	.post-title { font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.15; margin: 0 0 .5rem; letter-spacing: -.02em; }
510
511	/* Pin banner — duidelijk zichtbaar dat een post gepind is */
512	.post-pin-banner {
513	display: inline-flex;
514	align-items: center;
515	gap: .5rem;
516	background: color-mix(in srgb, var(--accent) 14%, transparent);
517	border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
518	color: var(--accent);
519	padding: .4rem .8rem;
520	border-radius: 999px;
521	font-size: .75rem;
522	font-weight: 600;
523	text-transform: uppercase;
524	letter-spacing: .08em;
525	margin: 0 0 .85rem;
526	line-height: 1;
527	}
528	.post-pin-banner-icon { font-size: 1rem; line-height: 1; }
529	.post-pin-banner-sep { opacity: .5; }
530	.post-pin-banner-pos { opacity: .85; }
531	.post-date {
532	color: var(--fg-muted, #888);
533	font-size: .85rem;
534	letter-spacing: .05em;
535	text-transform: uppercase;
536	margin: 0 0 1.5rem;
537	}
538
539	/* Post-images in content (resize + align) */
540	.post-image {
541	margin: 1.5rem 0;
542	}
543	.post-image img {
544	display: block;
545	height: auto;
546	border-radius: 6px;
547	max-width: 100%;
548	}
549	.post-image figcaption {
550	font-size: .85rem;
551	color: var(--fg-muted, #888);
552	margin-top: .5rem;
553	font-style: italic;
554	text-align: center;
555	}
556	.post-image--small img { max-width: 240px; }
557	.post-image--medium img { max-width: 440px; }
558	.post-image--large img { max-width: 720px; }
559	.post-image--full img { width: 100%; max-width: 100%; }
560	.post-image--left { text-align: left; }
561	.post-image--left img { margin-left: 0; margin-right: auto; }
562	.post-image--center { text-align: center; }
563	.post-image--center img { margin-left: auto; margin-right: auto; }
564	.post-image--right { text-align: right; }
565	.post-image--right img { margin-left: auto; margin-right: 0; }
566
567	/* Mini-player + bottom-tab clearance: applied to .pcms-main so the footer
568	is NOT pushed below the viewport bottom. The bars are position:fixed so
569	they overlap whatever they sit on top of; the padding ensures the last
570	content row isn't covered. Footer naturally follows main and now sits
571	exactly at viewport-bottom on short pages (sticky footer flex). */
572	.pcms-main { padding-bottom: 5.5rem; }
573	body.has-audio-player .pcms-main { padding-bottom: 5.5rem; }
574
575	/* ============================================================
576	AUDIO PLAYER v7.1 — SVG iconen, thema-aware, geen emoji
577	============================================================ */
578	.audio-player {
579	position: fixed;
580	left: 0; right: 0; bottom: 0;
581	background: color-mix(in srgb, var(--paper, #fff) 96%, var(--ink, #000));
582	border-top: 1px solid var(--rule, rgba(0,0,0,.1));
583	color: var(--ink, #222);
584	z-index: 1000;
585	backdrop-filter: blur(12px);
586	-webkit-backdrop-filter: blur(12px);
587	box-shadow: 0 -4px 20px rgba(0,0,0,.04);
588	}
589	[data-theme="dark"] .audio-player {
590	background: color-mix(in srgb, var(--paper, #1a1a1a) 92%, #fff);
591	box-shadow: 0 -4px 20px rgba(0,0,0,.3);
592	}
593	.audio-player-inner {
594	display: grid;
595	grid-template-columns: minmax(0, 1.6fr) auto minmax(180px, 2fr) auto;
596	gap: 1rem;
597	align-items: center;
598	padding: .65rem 1.25rem;
599	max-width: 1400px;
600	margin: 0 auto;
601	}
602
603	/* v9.0 — Clickable trigger dat cover + meta combineert zodat klikken erop sheet opent */
604	.audio-player-expand-trigger {
605	display: flex;
606	align-items: center;
607	gap: .65rem;
608	min-width: 0;
609	background: none;
610	border: none;
611	padding: 0;
612	margin: 0;
613	cursor: pointer;
614	color: inherit;
615	text-align: left;
616	font: inherit;
617	border-radius: 6px;
618	transition: background .15s;
619	}
620	.audio-player-expand-trigger:hover {
621	background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
622	}
623
624	/* Cover art */
625	.audio-player-cover {
626	width: 48px; height: 48px;
627	border-radius: 4px;
628	background: linear-gradient(135deg,
629	var(--accent, #c2410c),
630	color-mix(in srgb, var(--accent, #c2410c) 55%, #000));
631	background-size: cover;
632	background-position: center;
633	flex-shrink: 0;
634	position: relative;
635	}
636	.audio-player-cover.has-image {
637	background-blend-mode: normal;
638	}
639
640	/* Meta — titel + artiest */
641	.audio-player-meta {
642	min-width: 0;
643	display: flex;
644	flex-direction: column;
645	gap: 2px;
646	}
647	.audio-player-title-wrap {
648	overflow: hidden;
649	white-space: nowrap;
650	position: relative;
651	}
652	.audio-player-title {
653	display: inline-block;
654	font-family: var(--font-ui, inherit);
655	font-weight: 600;
656	font-size: .9rem;
657	line-height: 1.3;
658	letter-spacing: -.01em;
659	color: var(--ink, inherit);
660	white-space: nowrap;
661	}
662	.audio-player-title.is-overflowing {
663	animation: audio-title-marquee 6s ease-in-out infinite alternate;
664	}
665	@keyframes audio-title-marquee {
666	0%, 8% { transform: translateX(0); }
667	92%, 100% { transform: translateX(calc(-1 * var(--audio-shift, 0px))); }
668	}
669	.audio-player-artist {
670	font-family: var(--font-ui, inherit);
671	font-size: .74rem;
672	line-height: 1.3;
673	color: var(--ink-muted, rgba(0,0,0,.55));
674	white-space: nowrap;
675	overflow: hidden;
676	text-overflow: ellipsis;
677	}
678
679	/* Controls — prev / play / next */
680	.audio-player-controls {
681	display: flex;
682	gap: .1rem;
683	align-items: center;
684	}
685	.audio-btn {
686	background: transparent;
687	border: none;
688	color: inherit;
689	cursor: pointer;
690	padding: .5rem;
691	border-radius: 50%;
692	transition: background .15s, color .15s, transform .08s;
693	display: inline-flex;
694	align-items: center;
695	justify-content: center;
696	position: relative;
697	}
698	.audio-btn svg {
699	width: 18px; height: 18px;
700	display: block;
701	}
702	.audio-btn:hover { background: color-mix(in srgb, var(--ink, #000) 8%, transparent); }
703	.audio-btn:active { transform: scale(.94); }
704	.audio-btn-play {
705	background: var(--accent, #c2410c);
706	color: #fff;
707	width: 38px; height: 38px;
708	padding: 0;
709	}
710	.audio-btn-play:hover {
711	background: color-mix(in srgb, var(--accent, #c2410c) 85%, #fff);
712	}
713	[data-theme="dark"] .audio-btn-play:hover {
714	background: color-mix(in srgb, var(--accent, #c2410c) 85%, #000);
715	}
716	.audio-btn-play svg { width: 16px; height: 16px; }
717	.audio-btn-play .icon-pause { display: none; }
718	.audio-player.is-playing .audio-btn-play .icon-play { display: none; }
719	.audio-player.is-playing .audio-btn-play .icon-pause { display: block; }
720
721	/* Progress bar */
722	.audio-player-progress {
723	display: flex;
724	gap: .75rem;
725	align-items: center;
726	min-width: 0;
727	}
728	.audio-time {
729	font-size: .7rem;
730	color: var(--ink-muted, rgba(0,0,0,.55));
731	font-variant-numeric: tabular-nums;
732	min-width: 2.7em;
733	text-align: center;
734	}
735	.audio-seek {
736	flex: 1;
737	min-width: 0;
738	cursor: pointer;
739	padding: .5rem 0;
740	position: relative;
741	}
742	.audio-seek-bar {
743	height: 3px;
744	background: color-mix(in srgb, var(--ink, #000) 12%, transparent);
745	border-radius: 2px;
746	overflow: hidden;
747	transition: height .15s;
748	}
749	.audio-seek:hover .audio-seek-bar { height: 5px; }
750	.audio-seek-fill {
751	height: 100%;
752	background: var(--accent, #c2410c);
753	width: 0%;
754	transition: width .1s linear;
755	}
756
757	/* Volume — popup on hover */
758	.audio-player-volume {
759	position: relative;
760	display: flex;
761	align-items: center;
762	}
763	.audio-btn .icon-mute { display: none; }
764	.audio-player.is-muted .audio-btn .icon-vol { display: none; }
765	.audio-player.is-muted .audio-btn .icon-mute { display: block; }
766	.audio-volume-popup {
767	position: absolute;
768	bottom: calc(100% + 8px);
769	left: 50%;
770	transform: translateX(-50%) scale(.95);
771	transform-origin: bottom center;
772	background: var(--paper, #fff);
773	border: 1px solid var(--rule, rgba(0,0,0,.1));
774	border-radius: 8px;
775	padding: .75rem .5rem;
776	box-shadow: 0 4px 16px rgba(0,0,0,.15);
777	opacity: 0;
778	pointer-events: none;
779	transition: opacity .15s, transform .15s, visibility .15s;
780	height: 110px;
781	visibility: hidden;
782	}
783	/* Invisible bridge tussen knop en popup zodat hover niet breekt */
784	.audio-volume-popup::after {
785	content: '';
786	position: absolute;
787	bottom: -12px;
788	left: -10px;
789	right: -10px;
790	height: 16px;
791	}
792	[data-theme="dark"] .audio-volume-popup {
793	background: color-mix(in srgb, var(--paper, #111) 92%, #fff);
794	}
795	.audio-player-volume:hover .audio-volume-popup,
796	.audio-player-volume:focus-within .audio-volume-popup,
797	.audio-player-volume.is-open .audio-volume-popup {
798	opacity: 1;
799	visibility: visible;
800	transform: translateX(-50%) scale(1);
801	pointer-events: auto;
802	}
803	.audio-volume-popup input[type=range] {
804	/* Standard vertical slider — replaces deprecated -webkit-appearance: slider-vertical. */
805	writing-mode: vertical-lr;
806	direction: rtl;
807	width: 6px;
808	height: 90px;
809	accent-color: var(--accent, #c2410c);
810	/* Grotere hit-area via pseudo-touch padding */
811	padding: 0 12px;
812	box-sizing: content-box;
813	cursor: pointer;
814	}
815
816	/* Mobile */
817	@media (max-width: 720px) {
818	.audio-player-inner {
819	/* v9.0 — 3 cols: expand-trigger (cover+meta) \| controls \| volume */
820	grid-template-columns: minmax(0, 1fr) auto auto;
821	gap: .5rem;
822	padding: .5rem .8rem;
823	}
824	.audio-player-progress {
825	display: none;
826	}
827	.audio-player-cover { width: 40px; height: 40px; }
828	.audio-btn-play { width: 34px; height: 34px; }
829	body.has-audio-player .pcms-main { padding-bottom: 4.2rem; }
830	/* Verberg titel-artiest op bijzonder smal, verstop volume op mobile */
831	.audio-player-volume { display: none; }
832	}
833
834	/* Ultra-small schermen (iPhone 4 = 320px; iPhone SE 1st gen = 320px;
835	iPhone mini ~360px). v9.3 — alles vanaf 320px moet werken; daaronder
836	accepteren we wel/niet. */
837	@media (max-width: 380px) {
838	.audio-player-inner {
839	gap: .35rem;
840	padding: .4rem .6rem;
841	}
842	.audio-player-expand-trigger {
843	gap: .45rem;
844	}
845	.audio-player-cover { width: 36px; height: 36px; }
846	.audio-player-title { font-size: .88rem; }
847	.audio-player-artist { font-size: .72rem; }
848	.audio-player-controls { gap: .15rem; }
849	.audio-btn { width: 30px; height: 30px; }
850	.audio-btn svg { width: 16px; height: 16px; }
851	.audio-btn-play { width: 32px; height: 32px; }
852	.audio-btn-play svg { width: 18px; height: 18px; }
853
854	/* v9.3 — Tracklist compact op smalle telefoons.
855	Leader 28×28, kleinere gap, padding strakker. Tijd in monoscript blijft
856	leesbaar; titel krijgt 5-10px meer ruimte. */
857	.pat-row {
858	grid-template-columns: 28px 1fr auto;
859	gap: .5rem;
860	padding: .45rem .65rem;
861	}
862	.pat-row .pat-num,
863	.pat-row .pat-cover {
864	width: 28px;
865	height: 28px;
866	}
867	.pat-row::before {
868	left: .65rem;
869	width: 28px; height: 28px;
870	-webkit-mask-size: 22px 22px;
871	mask-size: 22px 22px;
872	}
873	.pat-row .pat-title { font-size: .92rem; }
874	.pat-row .pat-artist { font-size: .74rem; }
875	.pat-row .pat-duration { font-size: .74rem; }
876
877	/* v9.3 — Album binnen post: cover + tracks compacter */
878	.post-album-cover {
879	width: 90px;
880	height: 90px;
881	}
882	.post-album-header {
883	gap: .65rem;
884	padding: .65rem;
885	}
886	.post-album-title { font-size: 1rem; }
887
888	/* v9.3 — Profile-header bovenin compacter */
889	.profile-photo {
890	width: 48px !important;
891	height: 48px !important;
892	}
893	.profile-content {
894	gap: .65rem;
895	}
896
897	/* v9.3 — Install-app modal: minder padding, kleinere knoppen */
898	.install-modal-inner {
899	padding: 1rem;
900	}
901	.install-app-btn {
902	padding: .55rem 1rem;
903	font-size: .9rem;
904	}
905
906	/* v9.3 — Forceer niets schuift horizontaal weg.
907	clip i.p.v. hidden: clipt zonder een scroll-container te maken, zodat
908	position:fixed (bottom-tab) niet meeschuift bij scrollen op mobiel. */
909	body, html {
910	overflow-x: hidden; /* fallback iOS <16 */
911	overflow-x: clip;
912	}
913	}
914
915	/* iPhone 4 / iPhone SE 1st gen / iPhone 5/5s (320px) — strakste niveau */
916	@media (max-width: 340px) {
917	.audio-player-inner {
918	padding: .35rem .5rem;
919	}
920	.audio-player-artist { display: none; }
921	.audio-player-cover { width: 32px; height: 32px; }
922	body.has-audio-player .pcms-main { padding-bottom: 3.6rem; }
923	/* Expand-sheet wat strakker */
924	.audio-sheet-panel {
925	padding: .5rem 1rem 1.5rem;
926	}
927	.audio-sheet-title { font-size: 1.2rem; }
928	.audio-sheet-artist { font-size: .9rem; }
929	.audio-sheet-play { width: 60px; height: 60px; }
930	.audio-sheet-play svg { width: 26px; height: 26px; }
931	.audio-sheet-btn { width: 42px; height: 42px; }
932	.audio-sheet-btn svg { width: 24px; height: 24px; }
933	.audio-sheet-controls { gap: 1rem; }
934
935	/* v9.3 — Op iPhone 4 (320px): tracklist nog strakker */
936	.pat-row {
937	grid-template-columns: 26px 1fr auto;
938	gap: .4rem;
939	padding: .4rem .55rem;
940	}
941	.pat-row .pat-num,
942	.pat-row .pat-cover {
943	width: 26px;
944	height: 26px;
945	}
946	.pat-row::before {
947	left: .55rem;
948	width: 26px; height: 26px;
949	-webkit-mask-size: 20px 20px;
950	mask-size: 20px 20px;
951	}
952	.pat-row .pat-artist {
953	display: none; /* op extreem smal weglaten ten gunste van titel */
954	}
955	.pat-row .pat-title { font-size: .9rem; }
956	.pat-row .pat-duration { font-size: .72rem; }
957
958	/* Container padding reduceren voor max content-breedte */
959	.container {
960	padding-inline: 1rem !important;
961	}
962
963	/* Post-cover (de grote bovenste) krimpen */
964	.post-cover {
965	max-height: 200px;
966	}
967	}
968
969	/* ============================================================
970	v9.0 — Audio player expand-sheet (Spotify-style "now playing")
971	Slide-up half-screen met grote cover, track info, big controls
972	============================================================ */
973	.audio-sheet {
974	position: fixed;
975	inset: 0;
976	z-index: 1100;
977	pointer-events: none;
978	opacity: 0;
979	transition: opacity .25s ease;
980	}
981	.audio-sheet.is-open {
982	pointer-events: auto;
983	opacity: 1;
984	}
985	.audio-sheet-backdrop {
986	position: absolute;
987	inset: 0;
988	/* v9.3 — Blur en overlay-dim allebei via CSS-variabele --pcms-sheet-progress
989	(1 = volledig, 0 = weg). JS update tijdens drag; CSS-transition pakt
990	open/close af. Sterke blur (24px) zodat 't effect goed zichtbaar is. */
991	background: rgb(0 0 0 / calc(.4 * var(--pcms-sheet-progress, 1)));
992	backdrop-filter: blur(calc(24px * var(--pcms-sheet-progress, 1)));
993	-webkit-backdrop-filter: blur(calc(24px * var(--pcms-sheet-progress, 1)));
994	transition: background .25s ease,
995	backdrop-filter .25s ease,
996	-webkit-backdrop-filter .25s ease;
997	will-change: backdrop-filter, background;
998	}
999	/* Tijdens drag: instant updates vanuit JS, geen transition */
1000	.audio-sheet-panel.is-dragging ~ .audio-sheet-backdrop,
1001	.audio-sheet-backdrop.is-dragging {
1002	transition: none;
1003	}
1004	.audio-sheet-panel {
1005	position: absolute;
1006	left: 0; right: 0; bottom: 0;
1007	background: var(--paper, #fff);
1008	border-top-left-radius: 20px;
1009	border-top-right-radius: 20px;
1010	box-shadow: 0 -20px 60px rgba(0, 0, 0, .25);
1011	padding: .75rem 1.5rem 2rem;
1012	max-height: 85vh;
1013	overflow-y: auto;
1014	/* v9.2.1 — scroll blijft binnen panel, geen chaining naar body (iOS-proof) */
1015	overscroll-behavior: contain;
1016	touch-action: pan-y;
1017	/* Hide scrollbar but keep scrollable */
1018	scrollbar-width: none; /* Firefox */
1019	-ms-overflow-style: none; /* IE/Edge */
1020	transform: translateY(100%);
1021	transition: transform .3s cubic-bezier(.22, .9, .3, 1),
1022	opacity .3s cubic-bezier(.22, .9, .3, 1);
1023	display: flex;
1024	flex-direction: column;
1025	gap: 1rem;
1026	color: var(--ink);
1027	}
1028	.audio-sheet-panel::-webkit-scrollbar {
1029	display: none; /* Chrome/Safari */
1030	}
1031	/* Body scroll lock wanneer sheet open is */
1032	body.audio-sheet-locked {
1033	overflow: hidden;
1034	}
1035	.audio-sheet.is-open .audio-sheet-panel {
1036	transform: translateY(0);
1037	}
1038
1039	/* v9.3 — Drag-zone: pill bovenaan + cover. Hele strook is touch-target voor
1040	swipe-down-to-close. Pull-to-refresh is uitgeschakeld op html-niveau dus
1041	geen interferentie. Onder de cover (info/progress/controls/queue) werkt
1042	normale touch — knoppen, scroll in queue, etc. */
1043	.audio-sheet-drag-zone {
1044	flex-shrink: 0;
1045	display: flex;
1046	flex-direction: column;
1047	align-items: stretch;
1048	gap: 1rem;
1049	/* v9.3 — touch-action: pan-y staat verticale scroll toe (zodat queue
1050	eronder scrollt als gebruiker omhoog veegt over cover). Onze JS
1051	detecteert intent: alleen omlaag-swipe vanaf de top sluit de sheet,
1052	omhoog-swipe = scroll. */
1053	touch-action: pan-y;
1054	user-select: none;
1055	-webkit-user-select: none;
1056	cursor: grab;
1057	margin: -.75rem -1.5rem 0;
1058	padding: .75rem 1.5rem 0;
1059	}
1060	.audio-sheet-drag-zone:active { cursor: grabbing; }
1061
1062	/* v9.4 — Drag alleen actief op touch-only apparaten (telefoons).
1063	Desktop met muis + tablets met muis-cursor → geen drag-grip,
1064	gebruiker sluit via × pill-knop bovenin of klik op backdrop. */
1065	@media (hover: hover) and (pointer: fine) {
1066	.audio-sheet-drag-zone {
1067	touch-action: auto;
1068	cursor: default;
1069	pointer-events: none;
1070	}
1071	/* Pill blijft klikbaar als sluit-knop */
1072	.audio-sheet-drag-zone .audio-sheet-handle {
1073	pointer-events: auto;
1074	cursor: pointer;
1075	}
1076	}
1077
1078	/* Pill (handle) gecentreerd boven de cover */
1079	.audio-sheet-drag-zone .audio-sheet-handle {
1080	margin: 0 auto .25rem;
1081	}
1082
1083	/* Tijdens dragging: panel volgt vinger realtime; geen transition */
1084	.audio-sheet-panel.is-dragging {
1085	transition: none;
1086	will-change: transform;
1087	}
1088	[data-theme="dark"] .audio-sheet-panel {
1089	background: var(--paper, #1a1a1a);
1090	box-shadow: 0 -20px 60px rgba(0, 0, 0, .5);
1091	}
1092	/* Drag-handle + close button in één */
1093	.audio-sheet-handle {
1094	display: block;
1095	width: 48px;
1096	height: 4px;
1097	border-radius: 2px;
1098	background: color-mix(in srgb, var(--ink, #000) 25%, transparent);
1099	border: none;
1100	margin: 0 auto .5rem;
1101	padding: 0;
1102	cursor: pointer;
1103	flex-shrink: 0;
1104	position: relative;
1105	}
1106	.audio-sheet-handle::before {
1107	content: "";
1108	position: absolute;
1109	/* v9.3 — Drag-strip wrapper neemt nu de hit-area-rol over. ::before
1110	blijft als kleine extra padding voor click-comfort. */
1111	inset: -10px -20px;
1112	}
1113	.audio-sheet-handle:hover {
1114	background: color-mix(in srgb, var(--ink, #000) 45%, transparent);
1115	}
1116	/* Grote cover */
1117	.audio-sheet-cover {
1118	width: 100%;
1119	max-width: 360px;
1120	aspect-ratio: 1/1;
1121	margin: 0 auto;
1122	border-radius: 12px;
1123	background: linear-gradient(135deg,
1124	var(--accent, #c2410c),
1125	color-mix(in srgb, var(--accent, #c2410c) 55%, #000));
1126	background-size: cover;
1127	background-position: center;
1128	box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
1129	flex-shrink: 0;
1130	}
1131	[data-theme="dark"] .audio-sheet-cover {
1132	box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
1133	}
1134	.audio-sheet-info {
1135	text-align: center;
1136	padding: 0 1rem;
1137	}
1138	.audio-sheet-title {
1139	font-family: var(--font-display, inherit);
1140	font-size: 1.5rem;
1141	font-weight: 600;
1142	line-height: 1.2;
1143	margin: 0 0 .25rem;
1144	letter-spacing: -0.01em;
1145	color: var(--ink);
1146	}
1147	.audio-sheet-artist {
1148	font-size: 1rem;
1149	color: var(--ink-muted, var(--ink));
1150	opacity: .7;
1151	}
1152	.audio-sheet-album {
1153	margin-top: .35rem;
1154	font-size: .82rem;
1155	opacity: .5;
1156	text-transform: uppercase;
1157	letter-spacing: .05em;
1158	}
1159	.audio-sheet-album:empty { display: none; }
1160	/* Progress + time */
1161	.audio-sheet-progress {
1162	display: grid;
1163	grid-template-columns: auto 1fr auto;
1164	gap: .6rem;
1165	align-items: center;
1166	padding: 0 .5rem;
1167	}
1168	.audio-sheet-progress .audio-seek { width: 100%; }
1169	.audio-sheet-progress .audio-time {
1170	font-size: .78rem;
1171	opacity: .55;
1172	}
1173	/* Grote controls */
1174	.audio-sheet-controls {
1175	display: flex;
1176	align-items: center;
1177	justify-content: center;
1178	gap: 1.75rem;
1179	}
1180	.audio-sheet-btn {
1181	width: 48px;
1182	height: 48px;
1183	padding: 0;
1184	}
1185	.audio-sheet-btn svg { width: 28px; height: 28px; }
1186	.audio-sheet-play {
1187	width: 72px;
1188	height: 72px;
1189	border-radius: 50%;
1190	background: var(--accent, #c2410c);
1191	color: var(--paper, #fff);
1192	border: none;
1193	cursor: pointer;
1194	display: inline-flex;
1195	align-items: center;
1196	justify-content: center;
1197	transition: transform .1s;
1198	}
1199	.audio-sheet-play:hover { transform: scale(1.05); }
1200	.audio-sheet-play:active { transform: scale(.95); }
1201	.audio-sheet-play svg { width: 30px; height: 30px; }
1202	.audio-sheet-play .icon-pause { display: none; }
1203	/* v9.2.1 — sheet staat nu als sibling van .audio-player buiten de balk,
1204	dus ancestor-selector .audio-player.is-playing werkt niet meer voor de
1205	sheet. JS zet is-playing ook rechtstreeks op sheet.play (regel 551 app.js). */
1206	.audio-sheet-play.is-playing .icon-play { display: none; }
1207	.audio-sheet-play.is-playing .icon-pause { display: block; }
1208	/* v9.2.1 — fallback: als sheet buiten alle ancestors zit, tag body */
1209	body.audio-is-playing .audio-sheet-play .icon-play { display: none; }
1210	body.audio-is-playing .audio-sheet-play .icon-pause { display: block; }
1211
1212	/* v9.3 — Loading state: roterende spiraal (het roboburr logo).
1213	Button-achtergrond wordt transparant, play/pause svgs verbergen, en de
1214	spiraal verschijnt als roterende background via ::after pseudo-element.
1215	Cool-effect: zachte hue-drift geeft de kleur een levend gevoel. */
1216	.audio-player.is-loading .audio-btn-play,
1217	.audio-player.is-loading .audio-sheet-play,
1218	body.audio-is-loading .audio-sheet-play,
1219	.pat-row.is-loading {
1220	pointer-events: none;
1221	}
1222	.audio-player.is-loading .audio-btn-play,
1223	.audio-player.is-loading .audio-sheet-play,
1224	body.audio-is-loading .audio-sheet-play {
1225	background: transparent;
1226	box-shadow: none;
1227	}
1228
1229	/* v9.3 — Play/pause-icons in de player-knoppen faden smooth uit/in tijdens
1230	loading. Pseudo-spiraal faded tegelijkertijd in (geen instant pop). */
1231	.audio-btn-play > svg,
1232	.audio-sheet-play > svg {
1233	transition: opacity .35s cubic-bezier(.4, 0, .2, 1),
1234	transform .35s cubic-bezier(.4, 0, .2, 1);
1235	}
1236	.audio-player.is-loading .audio-btn-play > svg,
1237	.audio-player.is-loading .audio-sheet-play > svg,
1238	body.audio-is-loading .audio-sheet-play > svg {
1239	opacity: 0;
1240	transform: scale(.7);
1241	}
1242	.pat-row.is-loading .pat-play-icon > svg,
1243	.pat-row.is-loading .pat-num,
1244	.pat-row.is-loading .pat-cover {
1245	opacity: 0;
1246	}
1247
1248	/* v9.3 — Spiraal als pseudo-element, ALTIJD aanwezig met opacity 0 default.
1249	Bij is-loading faden 'ie smooth in (opacity + scale-bounce), bij klaar
1250	faden 'ie weer uit. Pure accent-kleur, geen hue-drift. */
1251	.audio-player .audio-btn-play,
1252	.audio-player .audio-sheet-play,
1253	.pat-row .pat-play-icon {
1254	position: relative;
1255	}
1256	.audio-btn-play::after,
1257	.audio-sheet-play::after {
1258	content: "";
1259	position: absolute;
1260	inset: 0;
1261	background-color: var(--accent, #c2410c);
1262	-webkit-mask: url('/assets/spinner.svg') center/contain no-repeat;
1263	mask: url('/assets/spinner.svg') center/contain no-repeat;
1264	opacity: 0;
1265	transform: scale(.6);
1266	transition: opacity .4s cubic-bezier(.4, 0, .2, 1),
1267	transform .4s cubic-bezier(.34, 1.56, .64, 1);
1268	pointer-events: none;
1269	animation: pcms-spiral-spin 1.2s linear infinite paused;
1270	will-change: opacity, transform;
1271	}
1272	.audio-player.is-loading .audio-btn-play::after,
1273	.audio-player.is-loading .audio-sheet-play::after,
1274	body.audio-is-loading .audio-sheet-play::after {
1275	opacity: 1;
1276	transform: scale(1);
1277	animation-play-state: running;
1278	}
1279	/* Pat-row keeps its existing ::before spinner from earlier change.
1280	Voor backward-compat als oude HTML nog .pat-play-icon::after spinner had */
1281	.pat-row.is-loading .pat-play-icon::after {
1282	content: "";
1283	position: absolute;
1284	inset: 0;
1285	background-color: var(--accent, #c2410c);
1286	-webkit-mask: url('/assets/spinner.svg') center/contain no-repeat;
1287	mask: url('/assets/spinner.svg') center/contain no-repeat;
1288	opacity: 1;
1289	animation: pcms-spiral-spin 1.2s linear infinite;
1290	pointer-events: none;
1291	}
1292	@keyframes pcms-spiral-spin {
1293	to { transform: scale(1) rotate(-360deg); }
1294	}
1295	/* Queue list */
1296	.audio-sheet-queue {
1297	margin-top: .5rem;
1298	padding-top: 1rem;
1299	border-top: 1px solid var(--rule);
1300	}
1301	.audio-sheet-queue-label {
1302	font-size: .75rem;
1303	text-transform: uppercase;
1304	letter-spacing: .08em;
1305	opacity: .5;
1306	font-weight: 600;
1307	margin-bottom: .5rem;
1308	padding: 0 .5rem;
1309	}
1310	.audio-sheet-queue-list {
1311	list-style: none;
1312	padding: 0;
1313	margin: 0;
1314	display: flex;
1315	flex-direction: column;
1316	gap: 2px;
1317	}
1318	.audio-sheet-queue-item {
1319	display: flex;
1320	align-items: center;
1321	gap: .75rem;
1322	padding: .5rem .6rem;
1323	border-radius: 6px;
1324	cursor: pointer;
1325	transition: background .15s;
1326	background: none;
1327	border: none;
1328	width: 100%;
1329	color: inherit;
1330	font: inherit;
1331	text-align: left;
1332	}
1333	.audio-sheet-queue-item:hover {
1334	background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
1335	}
1336	.audio-sheet-queue-item.is-current {
1337	background: color-mix(in srgb, var(--accent, #c2410c) 14%, transparent);
1338	color: var(--accent, #c2410c);
1339	}
1340	.audio-sheet-queue-cover {
1341	width: 36px;
1342	height: 36px;
1343	border-radius: 4px;
1344	background-size: cover;
1345	background-position: center;
1346	background-color: var(--rule);
1347	flex-shrink: 0;
1348	}
1349	.audio-sheet-queue-meta {
1350	flex: 1;
1351	min-width: 0;
1352	display: flex;
1353	flex-direction: column;
1354	}
1355	.audio-sheet-queue-title {
1356	font-size: .9rem;
1357	font-weight: 500;
1358	overflow: hidden;
1359	text-overflow: ellipsis;
1360	white-space: nowrap;
1361	}
1362	.audio-sheet-queue-artist {
1363	font-size: .75rem;
1364	opacity: .55;
1365	overflow: hidden;
1366	text-overflow: ellipsis;
1367	white-space: nowrap;
1368	}
1369	.audio-sheet-queue-duration {
1370	font-family: ui-monospace, monospace;
1371	font-size: .72rem;
1372	opacity: .5;
1373	flex-shrink: 0;
1374	}
1375
1376	/* Desktop: sheet is max 480px wide and centered for bigger screens */
1377	@media (min-width: 720px) {
1378	.audio-sheet-panel {
1379	left: 50%;
1380	right: auto;
1381	width: 480px;
1382	transform: translate(-50%, 100%);
1383	border-top-left-radius: 20px;
1384	border-top-right-radius: 20px;
1385	}
1386	.audio-sheet.is-open .audio-sheet-panel {
1387	transform: translate(-50%, 0);
1388	}
1389	}
1390
1391	/* v9.2.1 — Mobiel: sheet is fullscreen, alleen te sluiten via handle-knop bovenin.
1392	Geen rounded corners, volledige viewport, safe-area voor notches/status bar. */
1393	@media (max-width: 719.98px) {
1394	.audio-sheet-panel {
1395	inset: 0;
1396	max-height: none;
1397	border-top-left-radius: 0;
1398	border-top-right-radius: 0;
1399	box-shadow: none;
1400	padding-top: calc(.75rem + env(safe-area-inset-top, 0px));
1401	padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
1402	}
1403	/* v9.3 — Backdrop blijft visible op mobile zodat drag-gesture de blur
1404	laat doorschemeren naar helder. */
1405	}
1406
1407	/* ============================================================
1408	Mobile masthead + pagination
1409	============================================================ */
1410	@media (max-width: 600px) {
1411	.masthead-inner { gap: .35rem; }
1412	.site-title { font-size: 1.2rem; }
1413	.site-subtitle { display: none; }
1414	.top-nav { gap: .1rem; }
1415	.nav-label { display: none; }
1416	.nav-btn, .nav-link {
1417	padding: .4rem .45rem;
1418	min-width: 38px;
1419	justify-content: center;
1420	}
1421	.pagination { flex-direction: column; gap: .5rem; }
1422	.pagination-item { width: 100%; }
1423	}
1424	@media (max-width: 400px) {
1425	.masthead { padding: calc(.5rem + var(--safe-top)) 0 .5rem; }
1426	.masthead-inner { gap: .25rem; }
1427	.site-title { font-size: 1.05rem; }
1428	.nav-btn, .nav-link {
1429	padding: .35rem .3rem;
1430	min-width: 34px;
1431	}
1432	.nav-btn .icon, .nav-link .icon { width: 1rem; height: 1rem; }
1433	/* PWA-install knop verbergen op klein scherm — kan ook via menu */
1434	.nav-install-btn { display: none !important; }
1435	}
1436	@media (max-width: 340px) {
1437	.site-title { font-size: .95rem; }
1438	.nav-btn, .nav-link { padding: .3rem .25rem; min-width: 30px; }
1439	/* Theme-toggle verbergen op ultra-klein — kan via user-menu */
1440	[data-pcms-theme-toggle] { display: none; }
1441	}
1442
1443	.post-date-ago {
1444	margin-left: .5em;
1445	opacity: .6;
1446	font-size: .9em;
1447	font-style: italic;
1448	text-transform: none;
1449	letter-spacing: 0;
1450	}
1451
1452	/* HTMX loading indicator — subtle progress-bar aan de top van de content */
1453	.pcms-loading {
1454	position: fixed;
1455	top: 0; left: 0;
1456	height: 2px;
1457	width: 0%;
1458	background: var(--accent, #c2410c);
1459	z-index: 9999;
1460	transition: width .3s ease, opacity .2s;
1461	opacity: 0;
1462	pointer-events: none;
1463	}
1464	.pcms-loading.htmx-request {
1465	opacity: 1;
1466	width: 80%;
1467	transition: width 6s cubic-bezier(.1,.9,.2,1), opacity .2s;
1468	}
1469	/* subtile fade wanneer content gewisseld wordt */
1470	#pcms-main.htmx-swapping {
1471	opacity: .5;
1472	transition: opacity .15s;
1473	}
1474
1475	/* Masthead brand group (site-title + optional tagline) */
1476	.masthead-brand { display: flex; flex-direction: column; gap: 2px; }
1477	.site-subtitle {
1478	font-family: var(--font-ui, inherit);
1479	font-size: .75rem;
1480	color: var(--ink-muted, rgba(0,0,0,.55));
1481	letter-spacing: 0;
1482	line-height: 1.3;
1483	}
1484
1485	/* ============================================================
1486	v7.3 — TAGS, TYPE, ARCHIEF, ZOEK, RELATED, SPECIAL VIEWS
1487	============================================================ */
1488
1489	/* Post-meta row — datum + type-chip + tags samen onder de titel */
1490	.post-meta {
1491	display: flex;
1492	flex-wrap: wrap;
1493	align-items: center;
1494	gap: .5rem .85rem;
1495	margin-top: .5rem;
1496	}
1497	.post-meta .post-date { margin: 0; }
1498
1499	/* Type-chip (groter, als een label) */
1500	.post-type-chip {
1501	display: inline-flex;
1502	align-items: center;
1503	padding: .2rem .6rem;
1504	background: color-mix(in srgb, var(--accent) 10%, transparent);
1505	color: var(--accent);
1506	border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
1507	border-radius: 999px;
1508	font-family: var(--font-ui);
1509	font-size: .72rem;
1510	font-weight: 600;
1511	text-decoration: none;
1512	letter-spacing: .04em;
1513	text-transform: uppercase;
1514	transition: background .15s;
1515	}
1516	.post-type-chip:hover { background: color-mix(in srgb, var(--accent) 20%, transparent); }
1517
1518	/* Tag-chips — klein, subtiel, gelinkt */
1519	.post-tags, .post-list-tags {
1520	display: inline-flex;
1521	flex-wrap: wrap;
1522	gap: .3rem;
1523	}
1524	.tag-chip {
1525	display: inline-block;
1526	padding: .15rem .55rem;
1527	background: color-mix(in srgb, var(--ink) 5%, transparent);
1528	color: var(--ink-muted);
1529	border-radius: 999px;
1530	font-family: var(--font-ui);
1531	font-size: .72rem;
1532	font-weight: 500;
1533	text-decoration: none;
1534	transition: background .15s, color .15s;
1535	}
1536	.tag-chip:hover {
1537	background: color-mix(in srgb, var(--accent) 12%, transparent);
1538	color: var(--accent);
1539	}
1540
1541	/* ============================================================
1542	SPECIAL PAGES (archief, tag, type, zoek)
1543	============================================================ */
1544	.special-page .post-header { margin-bottom: 2rem; }
1545	.special-eyebrow {
1546	font-size: .72rem;
1547	color: var(--ink-muted);
1548	text-transform: uppercase;
1549	letter-spacing: .12em;
1550	margin: 0 0 .25rem;
1551	}
1552
1553	/* Archief: jaar-overzicht */
1554	.archive-years {
1555	display: flex;
1556	flex-direction: column;
1557	gap: 2rem;
1558	}
1559	.archive-year h2 {
1560	font-family: var(--font-display);
1561	font-size: 1.75rem;
1562	margin: 0 0 .75rem;
1563	}
1564	.archive-year h2 a {
1565	color: var(--ink);
1566	text-decoration: none;
1567	}
1568	.archive-year h2 a:hover { color: var(--accent); }
1569	.archive-year h2 .admin-muted { font-size: .9rem; font-weight: normal; color: var(--ink-muted); }
1570	.archive-months {
1571	list-style: none;
1572	padding: 0; margin: 0;
1573	display: grid;
1574	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
1575	gap: .5rem;
1576	}
1577	.archive-months li {
1578	display: flex;
1579	align-items: center;
1580	gap: .4rem;
1581	padding: .55rem .75rem;
1582	background: color-mix(in srgb, var(--ink) 3%, transparent);
1583	border-radius: var(--radius);
1584	transition: background .15s;
1585	}
1586	.archive-months li:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
1587	.archive-months a {
1588	color: var(--ink);
1589	text-decoration: none;
1590	font-weight: 500;
1591	font-size: .95rem;
1592	}
1593	.archive-months .admin-muted { font-size: .75rem; color: var(--ink-muted); margin-left: auto; }
1594
1595	/* Archief: jaar drill-down */
1596	.archive-month-list {
1597	display: flex;
1598	flex-direction: column;
1599	gap: 2rem;
1600	}
1601	.archive-month h2 {
1602	font-family: var(--font-display);
1603	font-size: 1.35rem;
1604	margin: 0 0 .5rem;
1605	padding-bottom: .35rem;
1606	border-bottom: 1px solid var(--rule);
1607	}
1608	.archive-month h2 a {
1609	color: var(--ink);
1610	text-decoration: none;
1611	}
1612	.archive-month h2 a:hover { color: var(--accent); }
1613
1614	/* Compact post-list (gebruikt in archief drill-down per maand) */
1615	.post-compact-list {
1616	list-style: none;
1617	padding: 0; margin: 0;
1618	display: flex;
1619	flex-direction: column;
1620	}
1621	.post-compact-list li {
1622	border-bottom: 1px solid var(--rule);
1623	}
1624	.post-compact-list li:last-child { border-bottom: none; }
1625	.post-compact-list a {
1626	display: grid;
1627	grid-template-columns: 3em 1fr;
1628	gap: .75rem;
1629	padding: .6rem .2rem;
1630	text-decoration: none;
1631	color: var(--ink);
1632	transition: background .12s;
1633	border-radius: 4px;
1634	}
1635	.post-compact-list a:hover {
1636	background: color-mix(in srgb, var(--accent) 6%, transparent);
1637	}
1638	.post-compact-date {
1639	color: var(--ink-muted);
1640	font-size: .8rem;
1641	align-self: center;
1642	}
1643	.post-compact-title { font-weight: 500; font-size: 1rem; align-self: center; }
1644	.post-compact-list.large a { grid-template-columns: 4em 1fr; padding: .8rem .3rem; }
1645	.post-compact-list.large .post-compact-title { font-family: var(--font-display); font-size: 1.15rem; }
1646	.post-compact-excerpt {
1647	grid-column: 2;
1648	color: var(--ink-muted);
1649	font-size: .88rem;
1650	line-height: 1.5;
1651	}
1652
1653	/* Post-list (gebruikt in tag / type / zoek pagina's) */
1654	.post-list {
1655	list-style: none;
1656	padding: 0; margin: 0;
1657	display: flex;
1658	flex-direction: column;
1659	gap: 1.5rem;
1660	}
1661	.post-list-item {
1662	display: grid;
1663	grid-template-columns: 120px 1fr;
1664	gap: 1.25rem;
1665	padding-bottom: 1.5rem;
1666	border-bottom: 1px solid var(--rule);
1667	}
1668	.post-list-item:last-child { border-bottom: none; }
1669	.post-list-item:has(> .post-list-cover + .post-list-body) { grid-template-columns: 120px 1fr; }
1670	.post-list-item:not(:has(.post-list-cover)) { grid-template-columns: 1fr; }
1671	.post-list-cover {
1672	display: block;
1673	aspect-ratio: 1;
1674	overflow: hidden;
1675	border-radius: var(--radius);
1676	}
1677	.post-list-cover img {
1678	width: 100%; height: 100%;
1679	object-fit: cover;
1680	display: block;
1681	}
1682	.post-list-body { display: flex; flex-direction: column; gap: .35rem; }
1683	.post-list-meta {
1684	color: var(--ink-muted);
1685	font-size: .75rem;
1686	display: flex; gap: .35rem; align-items: center;
1687	}
1688	.post-list-title {
1689	font-family: var(--font-display);
1690	font-size: 1.3rem;
1691	font-weight: 450;
1692	margin: 0;
1693	line-height: 1.2;
1694	}
1695	.post-list-title a {
1696	color: var(--ink);
1697	text-decoration: none;
1698	}
1699	.post-list-title a:hover { color: var(--accent); }
1700	.post-list-excerpt {
1701	color: var(--ink-muted);
1702	font-size: .95rem;
1703	margin: 0;
1704	line-height: 1.5;
1705	}
1706
1707	/* Zoek-formulier binnen special view */
1708	.search-form {
1709	display: flex;
1710	gap: .5rem;
1711	margin-bottom: 2rem;
1712	}
1713	.search-form input[type=search] {
1714	flex: 1;
1715	padding: .75rem 1rem;
1716	background: var(--paper-2);
1717	border: 1px solid var(--rule);
1718	border-radius: var(--radius);
1719	font: inherit;
1720	color: var(--ink);
1721	}
1722	.search-form input[type=search]:focus {
1723	outline: none;
1724	border-color: var(--accent);
1725	box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
1726	}
1727
1728	/* ============================================================
1729	SEARCH OVERLAY (masthead → full-screen zoekbalk)
1730	============================================================ */
1731	.search-overlay {
1732	position: fixed;
1733	inset: 0;
1734	background: color-mix(in srgb, var(--ink) 50%, transparent);
1735	z-index: 1500;
1736	display: flex;
1737	justify-content: center;
1738	align-items: flex-start;
1739	padding-top: 10vh;
1740	backdrop-filter: blur(6px);
1741	-webkit-backdrop-filter: blur(6px);
1742	}
1743	.search-overlay[hidden] { display: none; }
1744	.search-overlay-form {
1745	width: min(90vw, 600px);
1746	background: var(--paper);
1747	border-radius: calc(var(--radius) * 1.5);
1748	padding: .75rem 1rem;
1749	display: flex;
1750	align-items: center;
1751	gap: .6rem;
1752	box-shadow: 0 20px 60px rgba(0,0,0,.3);
1753	border: 1px solid var(--rule);
1754	}
1755	.search-overlay-form .icon {
1756	width: 1.2rem; height: 1.2rem;
1757	color: var(--ink-muted);
1758	flex-shrink: 0;
1759	}
1760	.search-overlay-form input[type=search] {
1761	flex: 1;
1762	background: transparent;
1763	border: none;
1764	font-family: var(--font-body);
1765	font-size: 1.1rem;
1766	color: var(--ink);
1767	padding: .5rem 0;
1768	}
1769	.search-overlay-form input[type=search]:focus { outline: none; }
1770	.search-overlay-form .nav-btn {
1771	background: transparent;
1772	border: none;
1773	color: var(--ink-muted);
1774	cursor: pointer;
1775	font-size: 1.25rem;
1776	line-height: 1;
1777	padding: .3rem .5rem;
1778	}
1779	.search-overlay-form .nav-btn:hover { color: var(--ink); }
1780	body.search-open { overflow: hidden; }
1781
1782	/* ============================================================
1783	RELATED POSTS (onder elke post-view)
1784	============================================================ */
1785	.related-posts {
1786	margin-top: 2.5rem;
1787	padding-top: 2rem;
1788	border-top: 1px solid var(--rule);
1789	}
1790	.related-title {
1791	font-family: var(--font-mono);
1792	font-size: .7rem;
1793	color: var(--ink-muted);
1794	text-transform: uppercase;
1795	letter-spacing: .12em;
1796	margin: 0 0 1rem;
1797	}
1798	.related-grid {
1799	list-style: none;
1800	padding: 0; margin: 0;
1801	display: grid;
1802	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
1803	gap: 1rem;
1804	}
1805	.related-grid a {
1806	display: flex;
1807	flex-direction: column;
1808	gap: .5rem;
1809	text-decoration: none;
1810	color: var(--ink);
1811	border: 1px solid var(--rule);
1812	border-radius: var(--radius);
1813	overflow: hidden;
1814	transition: border-color .15s, transform .15s;
1815	height: 100%;
1816	}
1817	.related-grid a:hover {
1818	border-color: color-mix(in srgb, var(--accent) 50%, var(--rule));
1819	transform: translateY(-2px);
1820	}
1821	.related-cover {
1822	display: block;
1823	aspect-ratio: 16/10;
1824	background-size: cover;
1825	background-position: center;
1826	background-color: var(--paper-2);
1827	}
1828
1829	/* v9.4 — Wanneer related-cover ook .grid-tile-gradient class heeft (lege cover
1830	fallback), erft 'ie automatisch de hue/gradient/title styling van grid-tiles.
1831	Geen aparte related-cover-gradient meer nodig. */
1832	.related-body {
1833	display: flex;
1834	flex-direction: column;
1835	gap: .25rem;
1836	padding: .6rem .75rem .9rem;
1837	}
1838	.related-meta { color: var(--ink-muted); font-size: .7rem; }
1839	.related-name {
1840	font-family: var(--font-display);
1841	font-weight: 450;
1842	font-size: 1rem;
1843	line-height: 1.25;
1844	}
1845
1846	/* ============================================================
1847	MOBILE TWEAKS voor v7.3
1848	============================================================ */
1849	@media (max-width: 600px) {
1850	.post-list-item { grid-template-columns: 1fr; }
1851	.post-list-cover { aspect-ratio: 16/9; }
1852	.archive-months { grid-template-columns: repeat(2, 1fr); }
1853	.related-grid { grid-template-columns: 1fr; }
1854	.search-overlay { padding-top: 4vh; }
1855	}
1856
1857	/* ============================================================
1858	v7.4 — PROFILE HEADER + VIEW SWITCHER + GRID + POST-TYPE LAYOUTS
1859	MOBILE-FIRST — belangrijkste eis
1860	============================================================ */
1861
1862	/* -------- PROFILE HEADER (Optie C: full op home, compact op post/special) -------- */
1863
1864	.profile-header {
1865	background: var(--paper-2, var(--paper));
1866	border-bottom: 1px solid var(--rule);
1867	transition: padding .25s ease, background .2s;
1868	}
1869	/* Mobiel default = full-mode padding */
1870	.profile-header { padding: 1.25rem 0; }
1871	.profile-header-inner {
1872	display: flex;
1873	gap: .9rem;
1874	align-items: flex-start;
1875	}
1876
1877	.profile-photo {
1878	flex-shrink: 0;
1879	width: 80px;
1880	height: 80px;
1881	border-radius: 50%;
1882	overflow: hidden;
1883	display: block;
1884	background: var(--paper);
1885	border: 2px solid var(--rule);
1886	transition: width .25s ease, height .25s ease, border-color .2s;
1887	text-decoration: none;
1888	}
1889	.profile-photo:hover { border-color: var(--accent); }
1890	.profile-photo img {
1891	width: 100%; height: 100%;
1892	object-fit: cover;
1893	display: block;
1894	}
1895	.profile-photo-fallback {
1896	display: flex;
1897	align-items: center;
1898	justify-content: center;
1899	width: 100%; height: 100%;
1900	background: var(--accent);
1901	color: var(--paper);
1902	font-family: var(--font-display);
1903	font-weight: 700;
1904	font-size: 2.2rem;
1905	text-transform: uppercase;
1906	line-height: 1;
1907	transition: font-size .25s ease;
1908	}
1909
1910	.profile-info {
1911	flex: 1;
1912	min-width: 0;
1913	display: flex;
1914	flex-direction: column;
1915	gap: .3rem;
1916	}
1917	.profile-name {
1918	margin: 0;
1919	font-family: var(--font-display);
1920	font-size: 1.2rem;
1921	font-weight: 500;
1922	line-height: 1.15;
1923	transition: font-size .25s ease;
1924	}
1925	.profile-name a {
1926	color: var(--ink);
1927	text-decoration: none;
1928	}
1929	.profile-name a:hover { color: var(--accent); }
1930	.profile-bio {
1931	margin: 0;
1932	color: var(--ink-muted);
1933	font-size: .92rem;
1934	line-height: 1.45;
1935	max-height: 200px;
1936	overflow: hidden;
1937	transition: max-height .25s ease, margin .25s ease, opacity .2s;
1938	}
1939	.profile-links {
1940	list-style: none;
1941	padding: 0;
1942	margin: .15rem 0 0;
1943	display: flex;
1944	flex-wrap: wrap;
1945	gap: .4rem;
1946	max-height: 50px;
1947	overflow: hidden;
1948	transition: max-height .25s ease, margin .25s ease, opacity .2s;
1949	}
1950	.profile-links li { margin: 0; }
1951	.profile-links a {
1952	display: inline-flex;
1953	align-items: center;
1954	justify-content: center;
1955	width: 40px;
1956	height: 40px;
1957	border-radius: 50%;
1958	background: color-mix(in srgb, var(--ink) 5%, transparent);
1959	color: var(--ink-muted);
1960	text-decoration: none;
1961	transition: background .15s, color .15s;
1962	}
1963	.profile-links a:hover {
1964	background: color-mix(in srgb, var(--accent) 15%, transparent);
1965	color: var(--accent);
1966	}
1967	.profile-links .icon { width: 1.1rem; height: 1.1rem; }
1968
1969	/* -------- COMPACT MODE: op post + special pages -------- */
1970
1971	.on-post .profile-header,
1972	.on-special .profile-header {
1973	padding: .5rem 0;
1974	}
1975	.on-post .profile-photo,
1976	.on-special .profile-photo {
1977	width: 36px;
1978	height: 36px;
1979	border-width: 1px;
1980	}
1981	.on-post .profile-photo-fallback,
1982	.on-special .profile-photo-fallback {
1983	font-size: 1rem;
1984	}
1985	.on-post .profile-name,
1986	.on-special .profile-name {
1987	font-size: 1rem;
1988	align-self: center;
1989	}
1990	.on-post .profile-bio,
1991	.on-special .profile-bio,
1992	.on-post .profile-links,
1993	.on-special .profile-links {
1994	display: none;
1995	}
1996	.on-post .profile-header-inner,
1997	.on-special .profile-header-inner {
1998	align-items: center;
1999	justify-content: flex-start;
2000	gap: .6rem;
2001	}
2002	.on-post .profile-info,
2003	.on-special .profile-info {
2004	flex: 0 1 auto;
2005	min-width: 0;
2006	}
2007	.on-post .profile-name,
2008	.on-special .profile-name {
2009	text-align: left;
2010	}
2011
2012	/* -------- DESKTOP: meer ruimte, grotere foto -------- */
2013	@media (min-width: 768px) {
2014	.profile-header { padding: 2rem 0; }
2015	.profile-photo { width: 120px; height: 120px; }
2016	.profile-photo-fallback { font-size: 3.2rem; }
2017	.profile-name { font-size: 1.5rem; }
2018	.profile-bio { font-size: 1rem; }
2019	.profile-header-inner { gap: 1.5rem; }
2020	.on-post .profile-header,
2021	.on-special .profile-header { padding: .6rem 0; }
2022	.on-post .profile-photo,
2023	.on-special .profile-photo { width: 42px; height: 42px; }
2024	/* Compact mode: gap blijft klein, ook op desktop */
2025	.on-post .profile-header-inner,
2026	.on-special .profile-header-inner { gap: .75rem; }
2027	.on-post .profile-name,
2028	.on-special .profile-name { font-size: 1.1rem; }
2029	}
2030
2031	/* -------- VIEW SWITCHER -------- */
2032	.view-switcher-wrap {
2033	border-bottom: 1px solid var(--rule);
2034	background: var(--paper);
2035	/* Bottom margin gives breathing room between the switcher bar and the
2036	first post. margin-top staat in shared-styles.ejs (de winnende inline
2037	<style>) — symmetrisch op 1.5rem. */
2038	margin-bottom: 1.5rem;
2039	}
2040	.view-switcher {
2041	display: flex;
2042	justify-content: center;
2043	gap: .35rem;
2044	/* Slimmer bar — was .6rem, now .35rem so the bar reads as a divider
2045	rather than a row of weight equal to the header. */
2046	padding: .35rem 0;
2047	}
2048	.view-switch-btn {
2049	display: inline-flex;
2050	align-items: center;
2051	gap: .4rem;
2052	padding: .35rem .85rem; /* was .55rem 1rem */
2053	min-height: 32px; /* was 44px */
2054	background: transparent;
2055	border: 1px solid var(--rule);
2056	border-radius: 999px;
2057	color: var(--ink-muted);
2058	font-family: var(--font-ui);
2059	font-size: .82rem; /* was .85rem */
2060	cursor: pointer;
2061	transition: all .15s;
2062	}
2063	.view-switch-btn:hover {
2064	color: var(--ink);
2065	border-color: var(--ink-muted);
2066	}
2067	/* Actieve state: puur afgeleid van body[data-feed-view]. Geen .is-active class meer.
2068	Niet op de Archive-pagina: daar is geen "huidige" timeline/grid-keuze, dus beide
2069	knoppen blijven neutraal (grijs). */
2070	body[data-feed-view="timeline"]:not(.on-archive) .view-switch-btn[data-view="timeline"],
2071	body[data-feed-view="grid"]:not(.on-archive) .view-switch-btn[data-view="grid"] {
2072	background: var(--ink);
2073	color: var(--paper);
2074	border-color: var(--ink);
2075	}
2076	.view-switch-btn .icon { width: 1rem; height: 1rem; }
2077
2078	/* -------- FEED TOGGLE VIA BODY --------
2079	Grid-modus werkt op de feed (home, cirkel). Het ARCHIEF negeert de grid-keuze
2080	bewust: dat is altijd de chronologische jaar/maand-lijst (de switcher is daar
2081	grijs en springt bij klik terug naar de feed). Post-pagina's tonen de
2082	feed-timeline article sowieso altijd. Alle andere body-classes negeren
2083	data-feed-view en houden timeline visible. */
2084	body.on-home[data-feed-view="grid"] .feed-timeline,
2085	body.on-home[data-feed-view="grid"] .pagination,
2086	body.on-home[data-feed-view="grid"] .related-posts,
2087	body.on-home[data-feed-view="grid"] .article-footer,
2088	body.on-cirkel[data-feed-view="grid"] .feed-timeline {
2089	display: none !important;
2090	}
2091	/* Grid-sectie alleen zichtbaar op de feed in grid-mode (NIET op archief) */
2092	.feed-grid { display: none; }
2093	body.on-home[data-feed-view="grid"] .feed-grid,
2094	body.on-cirkel[data-feed-view="grid"] .feed-grid { display: block; }
2095
2096	/* -------- GRID VIEW TILES (Instagram-stijl) -------- */
2097	.feed-grid {
2098	padding: 1rem 0 2rem;
2099	}
2100	.grid-tiles {
2101	display: grid;
2102	gap: 4px;
2103	grid-template-columns: repeat(2, 1fr);
2104	}
2105	.grid-tile {
2106	position: relative;
2107	display: block;
2108	aspect-ratio: 1;
2109	background-size: cover;
2110	background-position: center;
2111	background-color: var(--paper-2);
2112	overflow: hidden;
2113	text-decoration: none;
2114	color: var(--ink);
2115	transition: transform .2s;
2116	cursor: pointer;
2117	-webkit-tap-highlight-color: rgba(0,0,0,.1);
2118	}
2119	.grid-tile:hover { transform: scale(0.98); }
2120	.grid-tile-overlay {
2121	position: absolute;
2122	inset: 0;
2123	padding: .6rem;
2124	display: flex;
2125	align-items: flex-end;
2126	background: linear-gradient(to top, rgba(0,0,0,.65) 0%, rgba(0,0,0,0) 50%);
2127	opacity: 0;
2128	transition: opacity .2s;
2129	pointer-events: none; /* klik moet naar de <a> eronder gaan, niet naar de overlay */
2130	}
2131	.grid-tile-overlay strong {
2132	color: #fff;
2133	font-family: var(--font-display);
2134	font-size: .9rem;
2135	font-weight: 500;
2136	line-height: 1.15;
2137	display: -webkit-box;
2138	-webkit-line-clamp: 3;
2139	-webkit-box-orient: vertical;
2140	overflow: hidden;
2141	}
2142	@media (hover: hover) {
2143	.grid-tile:hover .grid-tile-overlay { opacity: 1; }
2144	}
2145	@media (hover: none) {
2146	/* Op touch-devices altijd overlay tonen zodat titels zichtbaar zijn */
2147	.grid-tile-overlay { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,0) 70%); }
2148	}
2149
2150	.grid-tile-gradient {
2151	background-image: none;
2152	background-color: hsl(var(--tile-hue, 30), 40%, 85%);
2153	background-image: linear-gradient(135deg, hsl(var(--tile-hue, 30), 45%, 88%), hsl(calc(var(--tile-hue, 30) + 30), 35%, 75%));
2154	display: flex;
2155	align-items: center;
2156	justify-content: center;
2157	padding: 1rem;
2158	text-align: center;
2159	}
2160	[data-theme="dark"] .grid-tile-gradient,
2161	.grid-tile-gradient[data-theme="dark"] {
2162	background-image: linear-gradient(135deg, hsl(var(--tile-hue, 30), 30%, 18%), hsl(calc(var(--tile-hue, 30) + 30), 25%, 12%));
2163	}
2164	.grid-tile-title {
2165	font-family: var(--font-display);
2166	font-size: 1rem;
2167	font-weight: 500;
2168	color: var(--ink);
2169	line-height: 1.2;
2170	display: -webkit-box;
2171	-webkit-line-clamp: 4;
2172	-webkit-box-orient: vertical;
2173	overflow: hidden;
2174	z-index: 1;
2175	}
2176
2177	.grid-tile-pin {
2178	position: absolute;
2179	top: .5rem;
2180	right: .5rem;
2181	display: inline-flex;
2182	align-items: center;
2183	gap: .25rem;
2184	padding: .2rem .55rem;
2185	background: var(--accent);
2186	color: #fff;
2187	border-radius: 999px;
2188	font-family: var(--font-ui);
2189	font-size: .65rem;
2190	font-weight: 700;
2191	text-transform: uppercase;
2192	letter-spacing: .06em;
2193	z-index: 3;
2194	box-shadow: 0 2px 6px rgba(0,0,0,.3);
2195	pointer-events: none;
2196	}
2197	.grid-tile-pin::before {
2198	content: "📌";
2199	font-size: .9em;
2200	line-height: 1;
2201	}
2202	/* Pinned-tile overall highlight: accent border + subtle inner glow */
2203	.grid-tile.is-pinned {
2204	outline: 3px solid var(--accent);
2205	outline-offset: -3px;
2206	z-index: 1;
2207	}
2208	.grid-tile.is-pinned:hover {
2209	outline-offset: -2px;
2210	}
2211	.grid-tile-type {
2212	position: absolute;
2213	top: .4rem;
2214	left: .4rem;
2215	padding: .15rem .5rem;
2216	background: rgba(0,0,0,.55);
2217	color: #fff;
2218	border-radius: 999px;
2219	font-family: var(--font-ui);
2220	font-size: .6rem;
2221	font-weight: 600;
2222	text-transform: uppercase;
2223	letter-spacing: .05em;
2224	z-index: 2;
2225	}
2226
2227	@media (min-width: 600px) {
2228	.grid-tiles { grid-template-columns: repeat(3, 1fr); }
2229	}
2230	@media (min-width: 900px) {
2231	.grid-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
2232	}
2233
2234	/* -------- POST-TYPE SPECIFIEKE LAYOUTS -------- */
2235
2236	/* Foto-post: beeld prominent, geen titel bovenaan, caption onder */
2237	.feed-timeline[data-post-type="foto"] .post-title {
2238	font-size: 1.1rem;
2239	color: var(--ink-muted);
2240	font-weight: 400;
2241	}
2242	.feed-timeline[data-post-type="foto"] .post-cover {
2243	margin: 0 -1rem 1rem;
2244	border-radius: 0;
2245	}
2246	.feed-timeline[data-post-type="foto"] .post-cover img {
2247	width: 100%;
2248	border-radius: 0;
2249	}
2250
2251	/* Post-caption onder de cover */
2252	.post-caption {
2253	font-family: var(--font-body);
2254	font-size: 1rem;
2255	color: var(--ink);
2256	line-height: 1.5;
2257	margin: 0 0 1.25rem;
2258	padding: 0 0 1rem;
2259	border-bottom: 1px solid var(--rule);
2260	white-space: pre-wrap;
2261	}
2262	.feed-timeline[data-post-type="foto"] .post-caption {
2263	font-size: 1.05rem;
2264	margin-top: -.5rem;
2265	padding-bottom: 1.25rem;
2266	}
2267
2268	/* Audio/video posts — type-chip helder, content eronder zoals normaal */
2269	.feed-timeline[data-post-type="audio"] .post-title,
2270	.feed-timeline[data-post-type="video"] .post-title {
2271	font-size: 1.5rem;
2272	}
2273
2274	@media (min-width: 768px) {
2275	.feed-timeline[data-post-type="foto"] .post-cover {
2276	margin: 0 0 1.5rem;
2277	border-radius: var(--radius);
2278	}
2279	}
2280
2281	/* -------- ADMIN EDIT-BUTTON op post-view (alleen zichtbaar voor ingelogde admin) -------- */
2282	.post-edit-btn {
2283	position: absolute;
2284	top: 1rem;
2285	right: 1rem;
2286	display: inline-flex;
2287	align-items: center;
2288	justify-content: center;
2289	width: 44px;
2290	height: 44px;
2291	background: var(--paper);
2292	border: 1px solid var(--rule);
2293	border-radius: 50%;
2294	color: var(--ink-muted);
2295	text-decoration: none;
2296	box-shadow: 0 2px 8px rgba(0,0,0,.08);
2297	transition: background .15s, color .15s, transform .15s, border-color .15s;
2298	z-index: 10;
2299	}
2300	.post-edit-btn:hover {
2301	background: var(--accent);
2302	border-color: var(--accent);
2303	color: var(--paper);
2304	transform: scale(1.05);
2305	}
2306	.post-edit-btn .icon {
2307	width: 1.1rem;
2308	height: 1.1rem;
2309	}
2310	/* Zorg dat de article relative is zodat absolute positionering werkt */
2311	.feed-timeline { position: relative; }
2312
2313	@media (min-width: 768px) {
2314	.post-edit-btn {
2315	top: 1.5rem;
2316	right: 1.5rem;
2317	}
2318	}
2319
2320	/* ============================================================
2321	v8.0 — ACCENT SPAN + POST-TABLE (published posts)
2322	============================================================ */
2323	.post span.accent,
2324	.post-content span.accent,
2325	article span.accent,
2326	page-container span.accent {
2327	color: var(--accent);
2328	font-weight: 500;
2329	}
2330
2331	.post-table,
2332	article table.post-table {
2333	width: 100%;
2334	max-width: 100%;
2335	border-collapse: collapse;
2336	margin: 1.25rem 0;
2337	font-size: .95rem;
2338	display: block;
2339	overflow-x: auto;
2340	-webkit-overflow-scrolling: touch;
2341	}
2342	.post-table thead { background: color-mix(in srgb, var(--accent) 10%, transparent); }
2343	.post-table th,
2344	.post-table td {
2345	padding: .6rem .8rem;
2346	text-align: left;
2347	border: 1px solid var(--rule);
2348	vertical-align: top;
2349	}
2350	.post-table th {
2351	font-family: var(--font-ui);
2352	font-weight: 600;
2353	font-size: .88rem;
2354	color: var(--ink);
2355	letter-spacing: .02em;
2356	}
2357	.post-table tbody tr:nth-child(even) {
2358	background: color-mix(in srgb, var(--ink) 3%, transparent);
2359	}
2360	@media (min-width: 700px) {
2361	.post-table { display: table; overflow: visible; }
2362	}
2363
2364	/* ============================================================
2365	v8.0 fix — grid-cols picker (desktop only) + grid col overrides
2366	============================================================ */
2367
2368	/* Switcher-wrap bevat nu ook de cols-picker; layout side-by-side */
2369	.view-switcher-wrap .container {
2370	display: flex;
2371	align-items: center;
2372	justify-content: center;
2373	gap: 1rem;
2374	flex-wrap: wrap;
2375	}
2376
2377	/* Solo / Cirkel scope-switcher (alleen in circle-modus) — segmented toggle, centraal.
2378	Hoge specificiteit (+ !important op tekst) zodat 'ie globale link-stijlen wint. */
2379	.view-switcher-wrap .feed-scope {
2380	display: inline-flex;
2381	background: var(--paper-2);
2382	border: 1px solid var(--rule);
2383	border-radius: 999px;
2384	padding: 3px;
2385	}
2386	.view-switcher-wrap .feed-scope-btn {
2387	display: inline-flex;
2388	align-items: center;
2389	padding: .32rem .95rem;
2390	min-height: 30px;
2391	border: none !important;
2392	border-radius: 999px !important;
2393	background: transparent !important;
2394	color: var(--ink-muted) !important;
2395	font-family: var(--font-ui);
2396	font-size: .82rem;
2397	font-weight: 500 !important;
2398	text-decoration: none !important;
2399	cursor: pointer;
2400	transition: all .15s;
2401	}
2402	.view-switcher-wrap .feed-scope-btn:hover { color: var(--ink) !important; }
2403	.view-switcher-wrap .feed-scope-btn.is-active {
2404	background: var(--ink) !important;
2405	color: var(--paper) !important;
2406	}
2407
2408	.grid-cols-picker {
2409	display: none; /* default hidden — desktop + grid-active maakt 'm zichtbaar */
2410	gap: 2px;
2411	padding: 0;
2412	}
2413	.grid-cols-btn {
2414	display: inline-flex;
2415	align-items: center;
2416	justify-content: center;
2417	min-width: 36px;
2418	height: 32px;
2419	padding: 0 .6rem;
2420	background: transparent;
2421	border: 1px solid var(--rule);
2422	color: var(--ink-muted);
2423	font-family: var(--font-ui);
2424	font-size: .85rem;
2425	font-weight: 500;
2426	cursor: pointer;
2427	transition: all .12s;
2428	}
2429	.grid-cols-btn:first-child { border-radius: 999px 0 0 999px; }
2430	.grid-cols-btn:last-child { border-radius: 0 999px 999px 0; }
2431	.grid-cols-btn:not(:first-child):not(:last-child) { border-left: none; border-right: none; }
2432	.grid-cols-btn:hover { color: var(--ink); }
2433	/* Active state puur via body[data-grid-cols] — geen is-active-class meer. */
2434	body[data-grid-cols="2"] .grid-cols-btn[data-cols="2"],
2435	body[data-grid-cols="3"] .grid-cols-btn[data-cols="3"],
2436	body[data-grid-cols="4"] .grid-cols-btn[data-cols="4"] {
2437	background: var(--ink);
2438	color: var(--paper);
2439	border-color: var(--ink);
2440	}
2441
2442	/* Desktop + grid-view → toon cols-picker (op de home-feed; niet op archief) */
2443	@media (min-width: 600px) {
2444	body.on-home[data-feed-view="grid"] .grid-cols-picker {
2445	display: inline-flex;
2446	}
2447	}
2448
2449	/* Kolom-overrides op desktop. Mobiel negeert dit (staat vast op 2). */
2450	@media (min-width: 600px) {
2451	body.on-home[data-grid-cols="2"] .grid-tiles { grid-template-columns: repeat(2, 1fr); }
2452	body.on-home[data-grid-cols="3"] .grid-tiles { grid-template-columns: repeat(3, 1fr); }
2453	body.on-home[data-grid-cols="4"] .grid-tiles { grid-template-columns: repeat(4, 1fr); }
2454	}
2455
2456	/* Gradient-tile: iets meer contrast voor light + dark mode zodat titel altijd leesbaar is */
2457	.grid-tile-gradient {
2458	background-image: linear-gradient(135deg,
2459	hsl(var(--tile-hue, 30), 55%, 72%),
2460	hsl(calc(var(--tile-hue, 30) + 40), 45%, 60%));
2461	}
2462	[data-theme="dark"] .grid-tile-gradient {
2463	background-image: linear-gradient(135deg,
2464	hsl(var(--tile-hue, 30), 40%, 30%),
2465	hsl(calc(var(--tile-hue, 30) + 40), 30%, 18%));
2466	}
2467	.grid-tile-gradient .grid-tile-title {
2468	color: #fff;
2469	text-shadow: 0 1px 3px rgba(0,0,0,.25);
2470	}
2471	[data-theme="dark"] .grid-tile-gradient .grid-tile-title {
2472	color: #fff;
2473	text-shadow: 0 1px 2px rgba(0,0,0,.5);
2474	}
2475
2476	/* ============================================================
2477	v8.0.2 — COMPACT DESIGN OVERRIDES
2478	Tighter masthead, padding, margins overall. Profiel-header
2479	collapse/expand blijft zoals 'ie was.
2480	============================================================ */
2481
2482	/* Masthead: compacter */
2483	.masthead { padding: calc(.55rem + var(--safe-top)) 0 .55rem; }
2484	.masthead-inner { gap: 1rem; }
2485	.site-title { font-size: 1.25rem; }
2486	.nav-link, .nav-btn { padding: .4rem .7rem; min-height: 2rem; font-size: .82rem; }
2487
2488	/* Main content padding */
2489	main { padding-top: 1rem; }
2490	.page { padding-block: 1rem 1.75rem; }
2491
2492	/* View switcher-bar strakker */
2493	.view-switcher { padding: .4rem 0; gap: .3rem; }
2494	.view-switch-btn { padding: .4rem .85rem; min-height: 38px; font-size: .8rem; }
2495	.grid-cols-btn { min-width: 32px; height: 28px; padding: 0 .5rem; font-size: .8rem; }
2496
2497	/* Post header spacing terug */
2498	.post-header { margin: 0 0 1.25rem; }
2499	.post-title { margin-bottom: .35rem; }
2500	.post-meta { font-size: .78rem; }
2501	.post-tags { margin-top: .6rem; gap: .3rem; }
2502	.post-tag { font-size: .7rem; padding: .15rem .55rem; }
2503
2504	/* Article footer + pagination compacter */
2505	.article-footer { padding-top: 1.25rem; margin-top: 1.5rem; }
2506	.pagination { padding-block: 1.25rem 2rem; margin-top: 1.5rem; }
2507	.pagination-item { padding: .75rem .95rem; min-height: 4rem; }
2508	.pagination-title { font-size: .95rem; }
2509
2510	/* Site footer compacter */
2511	.site-footer { padding: 1.25rem 0 calc(1.25rem + var(--safe-bot)); margin-top: 2rem; font-size: .78rem; }
2512	.site-footer-inner { gap: .75rem; }
2513
2514	/* Profiel-header: full mode iets minder riant (compact mode blijft hetzelfde) */
2515	.profile-header { padding: 1rem 0; }
2516	.profile-photo { width: 72px; height: 72px; }
2517	.profile-photo-fallback { font-size: 1.8rem; }
2518	.profile-name { font-size: 1.2rem; }
2519	.profile-bio { font-size: .85rem; margin-top: .15rem; }
2520	.profile-links { margin-top: .5rem; gap: .4rem; }
2521	.profile-links a { width: 32px; height: 32px; }
2522
2523	@media (min-width: 768px) {
2524	.profile-header { padding: 1.35rem 0; }
2525	.profile-photo { width: 92px; height: 92px; }
2526	.profile-photo-fallback { font-size: 2.4rem; }
2527	.profile-name { font-size: 1.4rem; }
2528	.profile-bio { font-size: .95rem; }
2529	.profile-header-inner { gap: 1.1rem; }
2530	/* Compact-mode op desktop blijft klein zoals we hadden afgesproken */
2531	.on-post .profile-photo,
2532	.on-special .profile-photo { width: 42px; height: 42px; }
2533	}
2534
2535	/* Grid-tegels iets strakker gaten */
2536	.grid-tiles { gap: 3px; }
2537
2538	/* Post-cover margin */
2539	.post-cover { margin: 0 0 1rem; }
2540
2541	/* Audio player wat lichter */
2542	#pcms-audio-bar { padding: .55rem 1rem; }
2543
2544	/* v8.1 — pagination CTA + mobile tap target */
2545	.pagination-cta {
2546	display: inline-block;
2547	font-family: var(--font-ui);
2548	font-size: .72rem;
2549	font-weight: 600;
2550	color: var(--accent);
2551	margin-top: .35rem;
2552	letter-spacing: .02em;
2553	opacity: .9;
2554	}
2555	a.pagination-item:hover .pagination-cta { opacity: 1; }
2556
2557	/* Mobiel: nog meer tap-feedback + iets prominenter */
2558	@media (max-width: 640px) {
2559	a.pagination-item {
2560	padding: 1.1rem 1rem;
2561	min-height: 5.5rem;
2562	border-width: 2px;
2563	}
2564	a.pagination-item:active {
2565	background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
2566	transform: scale(.98);
2567	}
2568	.pagination-title { font-size: 1rem; }
2569	.pagination-cta { font-size: .75rem; }
2570	.pagination .icon { width: 1.5em; height: 1.5em; }
2571	}
2572
2573
2574
2575	/* v8.3 / v9.4 — PWA install button (alleen zichtbaar als browser install ondersteunt) */
2576	.nav-install-btn[hidden] { display: none; }
2577	.nav-install-btn {
2578	position: relative;
2579	display: inline-flex;
2580	align-items: center;
2581	justify-content: center;
2582	gap: .35rem;
2583	background: linear-gradient(135deg,
2584	var(--accent),
2585	color-mix(in srgb, var(--accent) 80%, #000));
2586	color: #fff;
2587	border: none;
2588	border-radius: .65rem;
2589	padding: .45rem .85rem;
2590	font-size: .8rem;
2591	font-weight: 600;
2592	line-height: 1;
2593	cursor: pointer;
2594	overflow: hidden;
2595	isolation: isolate;
2596	box-shadow:
2597	0 1px 0 rgba(255,255,255,.15) inset,
2598	0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
2599	transition:
2600	transform .15s cubic-bezier(.4, 0, .2, 1),
2601	box-shadow .2s ease,
2602	filter .15s ease;
2603	}
2604	.nav-install-btn::before {
2605	content: "";
2606	position: absolute;
2607	top: 0;
2608	left: -100%;
2609	width: 60%;
2610	height: 100%;
2611	background: linear-gradient(110deg,
2612	transparent 30%,
2613	rgba(255,255,255,.22) 50%,
2614	transparent 70%);
2615	z-index: -1;
2616	animation: pcmsInstallShimmer 4s ease-in-out infinite;
2617	pointer-events: none;
2618	}
2619	.nav-install-btn:hover {
2620	transform: translateY(-1px);
2621	filter: brightness(1.08);
2622	box-shadow:
2623	0 1px 0 rgba(255,255,255,.2) inset,
2624	0 4px 10px color-mix(in srgb, var(--accent) 50%, transparent);
2625	}
2626	.nav-install-btn:active { transform: translateY(0); }
2627	.nav-install-btn .icon {
2628	flex-shrink: 0;
2629	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
2630	}
2631	.nav-install-btn:hover .icon { transform: translateY(-1px); }
2632	@media (prefers-reduced-motion: reduce) {
2633	.nav-install-btn::before { animation: none; left: -100%; }
2634	.nav-install-btn:hover { transform: none; }
2635	.nav-install-btn:hover .icon { transform: none; }
2636	}
2637	/* Als PWA al draait (standalone mode) — verberg install-prompt knop volledig */
2638	@media all and (display-mode: standalone) {
2639	#pwa-install-btn { display: none !important; }
2640	}
2641
2642	/* ========== v8.9.9 — Privé-post indicators ========== */
2643	.post-private-banner {
2644	display: flex;
2645	align-items: center;
2646	gap: .6rem;
2647	padding: .75rem 1rem;
2648	background: color-mix(in srgb, #eab308 12%, var(--paper, #fff));
2649	border: 1px solid color-mix(in srgb, #eab308 40%, transparent);
2650	border-radius: 8px;
2651	margin: 0 0 1rem;
2652	font-size: .88rem;
2653	color: var(--ink, #1a1a1a);
2654	}
2655	.post-private-banner strong {
2656	color: #b45309;
2657	}
2658
2659	.grid-tile-private {
2660	position: absolute;
2661	top: 8px;
2662	left: 8px;
2663	padding: 3px 8px;
2664	background: rgba(0,0,0,0.7);
2665	color: #fde68a;
2666	font-size: .7rem;
2667	font-weight: 700;
2668	border-radius: 999px;
2669	z-index: 3;
2670	backdrop-filter: blur(4px);
2671	-webkit-backdrop-filter: blur(4px);
2672	}
2673
2674	/* ========== v8.9.10 — Social chip (inline in post-body) ========== */
2675	.social-chip {
2676	display: inline-flex;
2677	align-items: center;
2678	gap: .45rem;
2679	padding: .35rem .75rem;
2680	background: color-mix(in srgb, var(--accent) 10%, transparent);
2681	border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
2682	border-radius: 999px;
2683	color: var(--ink, #1a1a1a);
2684	text-decoration: none;
2685	font-family: var(--font-ui, system-ui);
2686	font-size: .85rem;
2687	font-weight: 600;
2688	line-height: 1.2;
2689	transition: all .15s;
2690	vertical-align: middle;
2691	margin: 0 .1rem;
2692	}
2693	.social-chip:hover {
2694	background: var(--accent);
2695	color: #fff;
2696	border-color: var(--accent);
2697	text-decoration: none;
2698	transform: translateY(-1px);
2699	box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 40%, transparent);
2700	}
2701	.social-chip .icon {
2702	width: 16px;
2703	height: 16px;
2704	flex-shrink: 0;
2705	}
2706	.social-chip-icon-only {
2707	width: 36px;
2708	height: 36px;
2709	padding: 0;
2710	justify-content: center;
2711	border-radius: 50%;
2712	}
2713	.social-chip-icon-only .icon {
2714	width: 18px;
2715	height: 18px;
2716	}
2717
2718	/* v8.9.34 — player hidden state + post audio blocks
2719	v9.3 — Hide-rules uitgeschakeld: mini-player blijft permanent zichtbaar
2720	zodat 'ie niet meer verdwijnt bij browser-back of navigatie. */
2721	.audio-player.is-hidden {
2722	/* display: none !important; */
2723	}
2724	body:not(.has-audio-player) #pcms-audio-player.is-hidden {
2725	/* display: none !important; */
2726	}
2727
2728	/* Post audio track — single track row in een post */
2729	/* Lokale audio-track — visueel consistent met .post-audio-external */
2730	.post-audio-track {
2731	display: flex;
2732	align-items: center;
2733	gap: .75rem;
2734	padding: .65rem .85rem;
2735	background: var(--paper-2, color-mix(in srgb, var(--ink) 4%, transparent));
2736	border: 1px solid var(--rule, rgba(0,0,0,.08));
2737	border-radius: 10px;
2738	margin: .75rem 0;
2739	transition: background .15s, border-color .15s;
2740	}
2741	.post-audio-track:hover {
2742	border-color: var(--accent, #c2410c);
2743	background: color-mix(in srgb, var(--accent, #c2410c) 5%, var(--paper-2, transparent));
2744	}
2745	.post-audio-track .pat-play {
2746	flex-shrink: 0;
2747	width: 42px;
2748	height: 42px;
2749	border-radius: 8px; /* zelfde rounded-square als pae-icon */
2750	border: none;
2751	background: var(--accent, #c2410c);
2752	color: var(--paper, #fff);
2753	cursor: pointer;
2754	display: inline-flex;
2755	align-items: center;
2756	justify-content: center;
2757	transition: transform .1s, background .15s;
2758	padding: 0;
2759	position: relative;
2760	overflow: hidden;
2761	}
2762	.post-audio-track .pat-play:hover { transform: scale(1.04); }
2763	.post-audio-track .pat-play:active { transform: scale(.96); }
2764	.post-audio-track .pat-play svg,
2765	.post-audio-track .pat-play .pat-sitelogo {
2766	width: 100%; height: 100%;
2767	position: absolute;
2768	top: 0; left: 0;
2769	transition: opacity .15s;
2770	}
2771	.post-audio-track .pat-play .icon-play,
2772	.post-audio-track .pat-play .icon-pause {
2773	width: 18px; height: 18px;
2774	position: absolute;
2775	top: 50%; left: 50%;
2776	transform: translate(-50%, -50%);
2777	fill: currentColor;
2778	opacity: 0; /* verborgen tot hover of is-current */
2779	}
2780	/* Site logo: object-cover binnen 42x42 box */
2781	.post-audio-track .pat-play .pat-sitelogo {
2782	object-fit: cover;
2783	opacity: 1;
2784	}
2785	.post-audio-track .pat-play .pat-sitelogo-fallback {
2786	padding: 11px; /* SVG music-note iets kleiner in box */
2787	opacity: 1;
2788	}
2789	/* Bij hover: site logo faded, play-icoon verschijnt */
2790	.post-audio-track:hover .pat-play .pat-sitelogo { opacity: 0.25; }
2791	.post-audio-track:hover .pat-play .icon-play { opacity: 1; }
2792	/* Bij current + playing: toon pause-icon */
2793	.post-audio-track.is-current .pat-play .pat-sitelogo { opacity: 0.25; }
2794	.post-audio-track.is-current .pat-play .icon-play { opacity: 1; }
2795	.post-audio-track.is-current.is-playing .pat-play .icon-play { opacity: 0; }
2796	.post-audio-track.is-current.is-playing .pat-play .icon-pause { opacity: 1; }
2797	.post-audio-track.is-current {
2798	border-color: var(--accent, #c2410c);
2799	background: color-mix(in srgb, var(--accent, #c2410c) 10%, transparent);
2800	}
2801	.post-audio-track .pat-meta {
2802	flex: 1;
2803	min-width: 0;
2804	display: flex;
2805	flex-direction: column;
2806	gap: 2px;
2807	}
2808	.post-audio-track .pat-title {
2809	display: block;
2810	font-weight: 600;
2811	color: var(--ink);
2812	font-size: .95rem;
2813	overflow: hidden;
2814	text-overflow: ellipsis;
2815	white-space: nowrap;
2816	}
2817	.post-audio-track .pat-artist {
2818	display: block;
2819	font-size: .78rem;
2820	color: var(--ink-muted, var(--ink));
2821	opacity: .65;
2822	overflow: hidden;
2823	text-overflow: ellipsis;
2824	white-space: nowrap;
2825	}
2826	.post-audio-track .pat-duration {
2827	flex-shrink: 0;
2828	font-family: ui-monospace, monospace;
2829	font-size: .8rem;
2830	opacity: .55;
2831	}
2832
2833	/* Album block in een post */
2834	.post-album {
2835	position: relative;
2836	border: 1px solid var(--rule, rgba(0,0,0,.1));
2837	border-radius: 14px;
2838	overflow: hidden;
2839	margin: 1.25rem 0;
2840	background: var(--paper-2, color-mix(in srgb, var(--ink) 3%, transparent));
2841	}
2842	.post-album-header {
2843	display: flex;
2844	gap: .75rem;
2845	padding: .55rem .7rem;
2846	align-items: center;
2847	}
2848	.post-album-cover {
2849	width: 120px;
2850	height: 120px;
2851	border-radius: 8px;
2852	background-size: cover;
2853	background-position: center;
2854	background-color: var(--rule);
2855	flex-shrink: 0;
2856	}
2857	/* v9.0 — Collage van track-covers als album-cover leeg is */
2858	.post-album-cover-collage {
2859	display: grid;
2860	grid-template-columns: 1fr 1fr;
2861	grid-template-rows: 1fr 1fr;
2862	gap: 0;
2863	overflow: hidden;
2864	background: transparent;
2865	}
2866	.post-album-cover-collage .post-album-cover-tile {
2867	background-size: cover;
2868	background-position: center;
2869	width: 100%;
2870	height: 100%;
2871	}
2872	/* Empty state: gradient met muziek-noot */
2873	.post-album-cover-empty {
2874	display: flex;
2875	align-items: center;
2876	justify-content: center;
2877	background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--paper-2)), color-mix(in srgb, var(--accent) 10%, var(--paper)));
2878	color: var(--accent, #c2410c);
2879	}
2880	.post-album-cover-empty svg {
2881	width: 42%;
2882	height: 42%;
2883	opacity: .55;
2884	}
2885	.post-album-info {
2886	flex: 1;
2887	min-width: 0;
2888	}
2889	.post-album-label {
2890	text-transform: uppercase;
2891	font-size: .68rem;
2892	letter-spacing: .1em;
2893	opacity: .55;
2894	margin: 0 0 .15rem;
2895	font-weight: 700;
2896	}
2897	.post-album-title {
2898	font-family: var(--font-display);
2899	font-size: 1.1rem;
2900	font-weight: 600;
2901	margin: 0 0 .1rem;
2902	line-height: 1.15;
2903	letter-spacing: -0.01em;
2904	}
2905	.post-album-artist {
2906	font-size: .88rem;
2907	opacity: .8;
2908	margin: 0 0 .12rem;
2909	line-height: 1.25;
2910	}
2911	.post-album-meta {
2912	font-size: .74rem;
2913	opacity: .55;
2914	margin: 0;
2915	line-height: 1.2;
2916	}
2917	.post-album-playall {
2918	margin-top: .75rem;
2919	padding: .45rem .9rem;
2920	background: var(--accent, #c2410c);
2921	color: var(--paper, #fff);
2922	border: none;
2923	border-radius: 6px;
2924	font-weight: 600;
2925	cursor: pointer;
2926	font-size: .88rem;
2927	display: inline-flex;
2928	align-items: center;
2929	gap: .35rem;
2930	}
2931	.post-album-playall:hover { filter: brightness(1.08); }
2932
2933	/* ============================================================
2934	v9.0 — Album cover clickable button
2935	============================================================ */
2936	.post-album-cover-btn {
2937	position: relative;
2938	background: none;
2939	border: none;
2940	padding: 0;
2941	margin: 0;
2942	cursor: pointer;
2943	flex-shrink: 0;
2944	border-radius: 8px;
2945	overflow: hidden;
2946	display: block;
2947	width: auto;
2948	/* v9.1 — voorkom mobile 300ms double-tap zoom delay, anders zou 2× snel klikken
2949	een zoom triggeren i.p.v. 2× click-events */
2950	touch-action: manipulation;
2951	-webkit-tap-highlight-color: transparent;
2952	}
2953	.post-album-cover-btn .post-album-cover {
2954	display: block;
2955	width: 76px;
2956	height: 76px;
2957	border-radius: 7px;
2958	background-size: cover;
2959	background-position: center;
2960	background-color: var(--rule);
2961	transition: transform .25s ease;
2962	}
2963	.post-album-cover-btn:hover .post-album-cover {
2964	transform: scale(1.04);
2965	}
2966	.post-album-cover-btn .post-album-cover-empty {
2967	background: linear-gradient(135deg,
2968	color-mix(in srgb, var(--accent, #c2410c) 35%, var(--paper)),
2969	color-mix(in srgb, var(--accent, #c2410c) 10%, var(--paper-2)));
2970	display: flex;
2971	align-items: center;
2972	justify-content: center;
2973	}
2974	.post-album-cover-btn .post-album-cover-empty svg {
2975	width: 28px;
2976	height: 28px;
2977	color: color-mix(in srgb, var(--accent, #c2410c) 60%, transparent);
2978	}
2979	/* Play overlay op hover */
2980	.post-album-cover-play {
2981	position: absolute;
2982	inset: 0;
2983	display: flex;
2984	align-items: center;
2985	justify-content: center;
2986	background: rgba(0, 0, 0, .35);
2987	opacity: 0;
2988	transition: opacity .2s ease;
2989	border-radius: 8px;
2990	pointer-events: none;
2991	}
2992	.post-album-cover-play svg {
2993	width: 48px;
2994	height: 48px;
2995	color: #fff;
2996	filter: drop-shadow(0 2px 8px rgba(0,0,0,.4));
2997	}
2998	.post-album-cover-btn:hover .post-album-cover-play,
2999	.post-album-cover-btn:focus-visible .post-album-cover-play {
3000	opacity: 1;
3001	}
3002
3003	/* ============================================================
3004	v1 P52 — Admin actions overlay (edit / delete)
3005	Only rendered when the viewer has god role. Sits top-right
3006	of the card so it doesn't compete with the cover play affordance.
3007	============================================================ */
3008	.post-album-actions {
3009	position: absolute;
3010	top: .4rem;
3011	right: .4rem;
3012	display: flex;
3013	gap: .25rem;
3014	z-index: 2;
3015	}
3016	.post-album-action {
3017	width: 28px;
3018	height: 28px;
3019	border-radius: 6px;
3020	border: 1px solid var(--rule);
3021	background: color-mix(in srgb, var(--paper) 78%, transparent);
3022	backdrop-filter: blur(8px);
3023	-webkit-backdrop-filter: blur(8px);
3024	color: var(--ink);
3025	display: inline-flex;
3026	align-items: center;
3027	justify-content: center;
3028	cursor: pointer;
3029	text-decoration: none;
3030	opacity: .65;
3031	padding: 0;
3032	transition: opacity .15s ease, transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
3033	-webkit-tap-highlight-color: transparent;
3034	}
3035	.post-album-action:hover,
3036	.post-album-action:focus-visible {
3037	opacity: 1;
3038	transform: translateY(-1px);
3039	outline: none;
3040	}
3041	.post-album-action.is-danger:hover,
3042	.post-album-action.is-danger:focus-visible {
3043	background: color-mix(in srgb, #c2410c 18%, var(--paper));
3044	border-color: color-mix(in srgb, #c2410c 45%, var(--rule));
3045	color: #c2410c;
3046	}
3047	.post-album-action svg {
3048	width: 15px;
3049	height: 15px;
3050	display: block;
3051	}
3052
3053	/* ============================================================
3054	v9.0 — Compacte tracklist (informatief, niet-klikbaar)
3055	============================================================ */
3056	.post-album-tracks {
3057	list-style: none;
3058	padding: 0;
3059	margin: 0;
3060	border-top: 1px solid var(--rule);
3061	}
3062	/* v9.4 — Playlist insert modal rows */
3063	.pli-row {
3064	display: flex;
3065	align-items: center;
3066	gap: .75rem;
3067	padding: .65rem .5rem;
3068	border-bottom: 1px solid var(--border);
3069	}
3070	.pli-row:last-child { border-bottom: none; }
3071	.pli-row-cover {
3072	width: 44px;
3073	height: 44px;
3074	border-radius: 6px;
3075	background-size: cover;
3076	background-position: center;
3077	background-color: color-mix(in srgb, var(--ink, #000) 8%, transparent);
3078	flex-shrink: 0;
3079	display: flex;
3080	align-items: center;
3081	justify-content: center;
3082	font-size: 1.4rem;
3083	}
3084	.pli-row-info {
3085	flex: 1;
3086	min-width: 0;
3087	}
3088	.pli-row-title {
3089	font-weight: 600;
3090	overflow: hidden;
3091	text-overflow: ellipsis;
3092	white-space: nowrap;
3093	}
3094	.pli-row-meta {
3095	font-size: .82rem;
3096	overflow: hidden;
3097	text-overflow: ellipsis;
3098	white-space: nowrap;
3099	}
3100	.post-playlist-placeholder {
3101	margin: 1rem 0;
3102	user-select: none;
3103	}
3104
3105	/* v9.4 — Generic modal classes (gebruikt door playlist-editor en andere modals) */
3106	.pcms-modal-backdrop {
3107	position: fixed;
3108	inset: 0;
3109	background: rgba(0, 0, 0, .6);
3110	display: flex;
3111	align-items: center;
3112	justify-content: center;
3113	z-index: 9000;
3114	padding: 1rem;
3115	box-sizing: border-box;
3116	overflow-y: auto;
3117	}
3118	.pcms-modal {
3119	background: var(--paper, #fff);
3120	color: var(--ink, #000);
3121	border-radius: 12px;
3122	width: 100%;
3123	max-width: 640px;
3124	max-height: calc(100vh - 2rem);
3125	display: flex;
3126	flex-direction: column;
3127	overflow: hidden;
3128	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
3129	}
3130	.pcms-modal-header {
3131	display: flex;
3132	align-items: center;
3133	justify-content: space-between;
3134	padding: 1rem 1.25rem;
3135	border-bottom: 1px solid var(--border);
3136	flex-shrink: 0;
3137	}
3138	.pcms-modal-header h3 { font-size: 1.1rem; }
3139	.pcms-modal-close {
3140	background: transparent;
3141	border: none;
3142	font-size: 1.6rem;
3143	line-height: 1;
3144	cursor: pointer;
3145	padding: .25rem .5rem;
3146	color: var(--fg-muted, #666);
3147	border-radius: 4px;
3148	}
3149	.pcms-modal-close:hover {
3150	background: color-mix(in srgb, var(--ink, #000) 8%, transparent);
3151	}
3152	.pcms-modal-body {
3153	padding: 1.25rem;
3154	overflow-y: auto;
3155	overscroll-behavior: contain;
3156	flex: 1;
3157	min-height: 0;
3158	}
3159	.pcms-modal-footer {
3160	display: flex;
3161	gap: .5rem;
3162	justify-content: flex-end;
3163	padding: .75rem 1.25rem;
3164	border-top: 1px solid var(--border);
3165	flex-shrink: 0;
3166	background: color-mix(in srgb, var(--ink, #000) 3%, transparent);
3167	}
3168
3169	/* On mobile: full-screen modal */
3170	@media (max-width: 600px) {
3171	.pcms-modal-backdrop {
3172	padding: 0;
3173	}
3174	.pcms-modal {
3175	border-radius: 0;
3176	max-width: 100%;
3177	max-height: 100vh;
3178	height: 100vh;
3179	}
3180	}
3181
3182	/* v9.4 — Media → Playlists tab */
3183	.playlists-page-header {
3184	display: flex;
3185	flex-wrap: wrap;
3186	gap: 1rem;
3187	align-items: center;
3188	justify-content: space-between;
3189	margin-bottom: 1.25rem;
3190	}
3191	.playlists-page-header > p { flex: 1; min-width: 200px; }
3192	.playlists-grid {
3193	display: grid;
3194	grid-template-columns: 1fr;
3195	gap: .75rem;
3196	}
3197	@media (min-width: 720px) {
3198	.playlists-grid { grid-template-columns: repeat(2, 1fr); }
3199	}
3200	@media (min-width: 1100px) {
3201	.playlists-grid { grid-template-columns: repeat(3, 1fr); }
3202	}
3203	.playlist-card {
3204	display: grid;
3205	grid-template-columns: 64px 1fr auto;
3206	gap: .75rem;
3207	align-items: center;
3208	padding: .75rem;
3209	border: 1px solid var(--border);
3210	border-radius: var(--radius);
3211	background: var(--paper, #fff);
3212	}
3213	.playlist-card-cover {
3214	width: 64px;
3215	height: 64px;
3216	border-radius: 8px;
3217	overflow: hidden;
3218	background-color: color-mix(in srgb, var(--ink, #000) 6%, transparent);
3219	display: flex;
3220	align-items: center;
3221	justify-content: center;
3222	}
3223	.playlist-card-cover img {
3224	width: 100%;
3225	height: 100%;
3226	object-fit: cover;
3227	}
3228	.playlist-card-cover-empty { font-size: 1.6rem; opacity: .5; }
3229	.playlist-card-info { min-width: 0; }
3230	.playlist-card-title {
3231	font-weight: 600;
3232	overflow: hidden;
3233	text-overflow: ellipsis;
3234	white-space: nowrap;
3235	}
3236	.playlist-card-artist,
3237	.playlist-card-meta {
3238	font-size: .82rem;
3239	overflow: hidden;
3240	text-overflow: ellipsis;
3241	white-space: nowrap;
3242	}
3243	.playlist-card-actions {
3244	display: flex;
3245	gap: .25rem;
3246	flex-shrink: 0;
3247	}
3248
3249	/* v9.4 — Playlist editor modal (mobile-friendly, single-column) */
3250	.pl-editor {
3251	/* Erft van .pcms-modal */
3252	}
3253	.pl-editor-meta {
3254	display: grid;
3255	grid-template-columns: 1fr;
3256	gap: .75rem;
3257	margin-bottom: 1rem;
3258	}
3259	@media (min-width: 560px) {
3260	.pl-editor-meta {
3261	grid-template-columns: 1fr 1fr;
3262	}
3263	.pl-editor-meta .pl-editor-field-full { grid-column: 1 / -1; }
3264	}
3265	.pl-editor-field {
3266	display: flex;
3267	flex-direction: column;
3268	gap: .25rem;
3269	min-width: 0;
3270	}
3271	.pl-editor-field span {
3272	font-size: .82rem;
3273	color: var(--fg-muted, #666);
3274	font-weight: 500;
3275	}
3276	.pl-editor-field input,
3277	.pl-editor-field select {
3278	width: 100%;
3279	box-sizing: border-box;
3280	padding: .5rem .65rem;
3281	font-size: .95rem;
3282	border: 1px solid var(--border);
3283	border-radius: 6px;
3284	background: var(--paper, #fff);
3285	color: var(--ink, #000);
3286	}
3287	.pl-editor-field input:focus,
3288	.pl-editor-field select:focus {
3289	outline: 2px solid var(--accent, #5a8a5a);
3290	outline-offset: -1px;
3291	}
3292	.pl-editor-section-title {
3293	margin: 1.25rem 0 .5rem;
3294	font-size: 1rem;
3295	font-weight: 600;
3296	}
3297	.pl-tracks-selected {
3298	border: 1px solid var(--border);
3299	border-radius: var(--radius);
3300	background: var(--paper, #fff);
3301	min-height: 60px;
3302	margin-bottom: 1rem;
3303	padding: .25rem;
3304	}
3305	.pl-tracks-empty {
3306	padding: 1.5rem;
3307	text-align: center;
3308	color: var(--fg-muted, #666);
3309	font-size: .9rem;
3310	}
3311	.pl-track-row {
3312	display: grid;
3313	grid-template-columns: 32px 36px 1fr auto;
3314	gap: .5rem;
3315	align-items: center;
3316	padding: .5rem;
3317	border-bottom: 1px solid var(--border);
3318	background: var(--paper, #fff);
3319	user-select: none;
3320	touch-action: pan-x;
3321	}
3322	.pl-track-row:last-child { border-bottom: none; }
3323	.pl-track-row.is-dragging {
3324	opacity: .55;
3325	transform: scale(.98);
3326	background: color-mix(in srgb, var(--accent, #5a8a5a) 10%, transparent);
3327	border-radius: 6px;
3328	}
3329	.pl-track-row.drop-target-above {
3330	box-shadow: inset 0 2px 0 0 var(--accent, #5a8a5a);
3331	}
3332	.pl-track-row.drop-target-below {
3333	box-shadow: inset 0 -2px 0 0 var(--accent, #5a8a5a);
3334	}
3335	.pl-track-handle {
3336	cursor: grab;
3337	font-size: 1.2rem;
3338	line-height: 1;
3339	color: var(--fg-muted, #666);
3340	display: flex;
3341	align-items: center;
3342	justify-content: center;
3343	height: 32px;
3344	width: 32px;
3345	border-radius: 4px;
3346	flex-shrink: 0;
3347	}
3348	.pl-track-handle:active { cursor: grabbing; }
3349	.pl-track-handle:hover {
3350	background: color-mix(in srgb, var(--ink, #000) 8%, transparent);
3351	}
3352	.pl-track-num {
3353	text-align: center;
3354	color: var(--fg-muted, #666);
3355	font-size: .85rem;
3356	width: 36px;
3357	}
3358	.pl-track-info {
3359	min-width: 0;
3360	overflow: hidden;
3361	}
3362	.pl-track-title {
3363	font-weight: 500;
3364	overflow: hidden;
3365	text-overflow: ellipsis;
3366	white-space: nowrap;
3367	}
3368	.pl-track-artist {
3369	font-size: .78rem;
3370	color: var(--fg-muted, #666);
3371	overflow: hidden;
3372	text-overflow: ellipsis;
3373	white-space: nowrap;
3374	}
3375	.pl-track-remove {
3376	background: transparent;
3377	border: none;
3378	cursor: pointer;
3379	padding: .35rem;
3380	border-radius: 4px;
3381	color: var(--fg-muted, #666);
3382	font-size: 1.2rem;
3383	line-height: 1;
3384	}
3385	.pl-track-remove:hover {
3386	background: color-mix(in srgb, #c00 12%, transparent);
3387	color: #c00;
3388	}
3389
3390	/* Available tracks panel */
3391	.pl-tracks-available-panel {
3392	border: 1px solid var(--border);
3393	border-radius: var(--radius);
3394	background: var(--paper, #fff);
3395	}
3396	.pl-tracks-available-search {
3397	padding: .5rem;
3398	border-bottom: 1px solid var(--border);
3399	}
3400	.pl-tracks-available-search input {
3401	width: 100%;
3402	box-sizing: border-box;
3403	}
3404	.pl-tracks-available-list {
3405	max-height: 30vh;
3406	overflow-y: auto;
3407	}
3408	.pl-track-row-available {
3409	display: grid;
3410	grid-template-columns: 1fr auto;
3411	gap: .5rem;
3412	align-items: center;
3413	padding: .5rem;
3414	border-bottom: 1px solid var(--border);
3415	cursor: pointer;
3416	}
3417	.pl-track-row-available:last-child { border-bottom: none; }
3418	.pl-track-row-available:hover {
3419	background: color-mix(in srgb, var(--accent, #5a8a5a) 8%, transparent);
3420	}
3421	.pl-track-row-available.is-already-added {
3422	opacity: .4;
3423	pointer-events: none;
3424	}
3425	.pl-track-add-btn {
3426	background: transparent;
3427	border: 1px solid var(--border);
3428	border-radius: 4px;
3429	padding: .25rem .5rem;
3430	cursor: pointer;
3431	font-size: .85rem;
3432	color: var(--accent, #5a8a5a);
3433	}
3434
3435	/* v9.3 — Tracklist items zijn nu klikbare <button class="pat-row"> binnen <li>.
3436	De LI is puur een container zonder visuele styling; alles gebeurt op de button. */
3437	.post-album-track-compact {
3438	padding: 0;
3439	margin: 0;
3440	border-bottom: 1px solid var(--rule);
3441	list-style: none;
3442	}
3443	.post-album-track-compact:last-child { border-bottom: none; }
3444
3445	.pat-row {
3446	display: grid;
3447	grid-template-columns: 32px 1fr auto;
3448	gap: .65rem;
3449	align-items: center;
3450	width: 100%;
3451	padding: .5rem .85rem;
3452	background: transparent;
3453	border: none;
3454	color: inherit;
3455	font: inherit;
3456	font-size: .82rem;
3457	text-align: left;
3458	cursor: pointer;
3459	position: relative;
3460	transition: background .15s ease;
3461	}
3462	.pat-row:hover {
3463	background: color-mix(in srgb, var(--ink, #000) 6%, transparent);
3464	}
3465	.pat-row:active { transform: scale(.995); }
3466	[data-theme="dark"] .pat-row:hover {
3467	background: color-mix(in srgb, var(--paper, #fff) 10%, transparent);
3468	}
3469
3470	/* Leader: track-nummer OF cover-thumb (afhankelijk van kind).
3471	v9.3 — pat-leader is altijd 32×32, met overgang voor spinner-vervanging. */
3472	.pat-row .pat-num,
3473	.pat-row .pat-cover {
3474	width: 32px;
3475	height: 32px;
3476	border-radius: 4px;
3477	flex-shrink: 0;
3478	transition: opacity .25s ease, transform .25s ease;
3479	}
3480	.pat-row .pat-num {
3481	font-family: ui-monospace, monospace;
3482	font-size: .8rem;
3483	opacity: .5;
3484	display: flex;
3485	align-items: center;
3486	justify-content: center;
3487	}
3488	.pat-row .pat-cover {
3489	background-size: cover;
3490	background-position: center;
3491	background-color: color-mix(in srgb, var(--ink, #000) 8%, transparent);
3492	}
3493
3494	/* v9.3 — Loading-spiraal als overlay op de leader-kolom.
3495	pat-num/pat-cover faden uit, spinner faded in via ::before. */
3496	.pat-row::before {
3497	content: "";
3498	position: absolute;
3499	left: .85rem; top: 50%;
3500	width: 32px; height: 32px;
3501	transform: translateY(-50%);
3502	color: var(--accent, #c2410c);
3503	background-color: currentColor;
3504	-webkit-mask: url('/assets/spinner.svg') center/26px 26px no-repeat;
3505	mask: url('/assets/spinner.svg') center/26px 26px no-repeat;
3506	opacity: 0;
3507	transition: opacity .25s ease;
3508	pointer-events: none;
3509	animation: pat-spinner-rotate 1.2s linear infinite;
3510	animation-play-state: paused;
3511	}
3512	.pat-row.is-loading::before {
3513	opacity: 1;
3514	animation-play-state: running;
3515	}
3516	.pat-row.is-loading .pat-num,
3517	.pat-row.is-loading .pat-cover {
3518	opacity: 0;
3519	transform: scale(.85);
3520	}
3521	@keyframes pat-spinner-rotate {
3522	from { transform: translateY(-50%) rotate(0deg); }
3523	to { transform: translateY(-50%) rotate(-360deg); }
3524	}
3525
3526	/* Meta-kolom */
3527	.pat-row .pat-meta {
3528	display: flex;
3529	flex-direction: column;
3530	min-width: 0;
3531	gap: 1px;
3532	overflow: hidden;
3533	}
3534	.pat-row .pat-title {
3535	font-weight: 500;
3536	overflow: hidden;
3537	text-overflow: ellipsis;
3538	white-space: nowrap;
3539	}
3540	.pat-row .pat-artist {
3541	font-size: .72rem;
3542	opacity: .6;
3543	overflow: hidden;
3544	text-overflow: ellipsis;
3545	white-space: nowrap;
3546	}
3547	.pat-row .pat-duration {
3548	font-family: ui-monospace, monospace;
3549	font-size: .72rem;
3550	opacity: .55;
3551	font-variant-numeric: tabular-nums;
3552	white-space: nowrap;
3553	}
3554	.pat-row .pat-duration-empty {
3555	opacity: .25;
3556	}
3557
3558	/* is-current — actieve track in de player */
3559	.pat-row.is-current {
3560	background: color-mix(in srgb, var(--accent, #c2410c) 12%, transparent);
3561	}
3562	.pat-row.is-current .pat-title,
3563	.pat-row.is-current .pat-artist { color: var(--accent, #c2410c); }
3564
3565	/* v9.3 — Marquee bij actief afspelen: titel scrollt heen-en-weer.
3566	--pat-shift wordt door JS gezet (= overflow in pixels). Bij 0 → geen
3567	beweging want translateX(0) blijft 0.
3568	Snelle cyclus (6s) met korte rust aan beide uiteinden (8%) zodat 't
3569	vlot voelt zonder onleesbaar te zijn. */
3570	.pat-row.is-current.is-playing .pat-title {
3571	animation: pat-title-marquee 6s ease-in-out infinite alternate;
3572	text-overflow: clip;
3573	overflow: visible;
3574	will-change: transform;
3575	}
3576	@keyframes pat-title-marquee {
3577	0%, 8% { transform: translateX(0); }
3578	92%, 100% { transform: translateX(calc(-1 * var(--pat-shift, 0px))); }
3579	}
3580
3581	/* ============================================================
3582	v9.0 — CSS-migratie voor OUDE opgeslagen albums
3583	Oude posts hebben <li class="post-audio-track"> met play-knoppen + cover-spans.
3584	We renderen die VISUEEL als compact, zonder de HTML aan te passen.
3585	============================================================ */
3586	.post-album-tracks .post-audio-track {
3587	display: grid;
3588	grid-template-columns: 28px 1fr auto;
3589	gap: .75rem;
3590	align-items: center;
3591	padding: .5rem .85rem;
3592	margin: 0;
3593	border: none;
3594	border-bottom: 1px solid var(--rule);
3595	background: transparent;
3596	border-radius: 0;
3597	cursor: default;
3598	font-size: .92rem;
3599	}
3600	.post-album-tracks .post-audio-track:last-child { border-bottom: none; }
3601	/* Verberg de cover-thumb en play-button in OUDE saved posts */
3602	.post-album-tracks .post-audio-track .pat-cover,
3603	.post-album-tracks .post-audio-track .pat-play {
3604	display: none !important;
3605	}
3606	.post-album-tracks .post-audio-track .pat-num {
3607	font-family: ui-monospace, monospace;
3608	font-size: .8rem;
3609	opacity: .45;
3610	text-align: center;
3611	width: auto;
3612	}
3613	.post-album-tracks .post-audio-track .pat-meta {
3614	display: flex;
3615	flex-direction: column;
3616	min-width: 0;
3617	gap: 1px;
3618	}
3619	.post-album-tracks .post-audio-track .pat-title {
3620	font-weight: 500;
3621	overflow: hidden;
3622	text-overflow: ellipsis;
3623	white-space: nowrap;
3624	}
3625	.post-album-tracks .post-audio-track .pat-artist {
3626	font-size: .78rem;
3627	opacity: .6;
3628	}
3629	.post-album-tracks .post-audio-track .pat-duration {
3630	font-family: ui-monospace, monospace;
3631	font-size: .78rem;
3632	opacity: .55;
3633	}
3634	.post-album-tracks .post-audio-track.is-current {
3635	background: color-mix(in srgb, var(--accent, #c2410c) 10%, transparent);
3636	}
3637	.post-album-tracks .post-audio-track.is-current .pat-num,
3638	.post-album-tracks .post-audio-track.is-current .pat-title {
3639	color: var(--accent);
3640	}
3641
3642	@media (max-width: 540px) {
3643	.post-album-header { flex-direction: column; }
3644	.post-album-cover-btn .post-album-cover { width: 100%; max-width: 240px; height: auto; aspect-ratio: 1/1; }
3645	}
3646	@media (max-width: 380px) {
3647	.post-album-header { padding: .75rem; gap: .75rem; }
3648	.post-album-cover-btn .post-album-cover { max-width: 180px; }
3649	.post-album-title { font-size: 1.15rem; }
3650	.post-album-meta { font-size: .8rem; }
3651	.post-album-track-compact,
3652	.post-album-tracks .post-audio-track {
3653	grid-template-columns: 24px 1fr auto;
3654	gap: .5rem;
3655	padding: .4rem .6rem;
3656	font-size: .85rem;
3657	}
3658	.post-album-track-compact .pat-duration,
3659	.post-album-tracks .post-audio-track .pat-duration {
3660	font-size: .72rem;
3661	}
3662	/* Queue items in expand-sheet */
3663	.audio-sheet-queue-item { padding: .4rem .45rem; gap: .55rem; }
3664	.audio-sheet-queue-cover { width: 32px; height: 32px; }
3665	.audio-sheet-queue-title { font-size: .85rem; }
3666	.audio-sheet-queue-artist { font-size: .7rem; }
3667	}
3668
3669	/* External track (SoundCloud / YouTube / Spotify / etc) — klikbaar maar link-naar-platform */
3670	.post-audio-external {
3671	display: flex;
3672	align-items: center;
3673	gap: .75rem;
3674	padding: .65rem .85rem;
3675	background: var(--paper-2, color-mix(in srgb, var(--ink) 4%, transparent));
3676	border: 1px solid var(--rule, rgba(0,0,0,.08));
3677	border-radius: 10px;
3678	margin: .75rem 0;
3679	text-decoration: none;
3680	color: var(--ink);
3681	transition: background .15s, border-color .15s;
3682	}
3683	.post-audio-external:hover {
3684	border-color: var(--accent);
3685	background: color-mix(in srgb, var(--accent) 5%, var(--paper-2, transparent));
3686	}
3687	.post-audio-external .pae-icon {
3688	flex-shrink: 0;
3689	width: 42px;
3690	height: 42px;
3691	border-radius: 8px;
3692	display: inline-flex;
3693	align-items: center;
3694	justify-content: center;
3695	background: var(--platform-color, #555);
3696	color: #fff;
3697	font-size: 1.2rem;
3698	}
3699	.post-audio-external .pae-icon-svg svg {
3700	width: 60%;
3701	height: 60%;
3702	fill: currentColor;
3703	}
3704	/* Per-platform vult de box net wat anders — brand-specifiek geoptimaliseerd */
3705	.post-audio-external[data-platform="soundcloud"] .pae-icon-svg svg { width: 72%; height: auto; }
3706	.post-audio-external[data-platform="spotify"] .pae-icon-svg svg { width: 72%; height: 72%; }
3707	.post-audio-external[data-platform="youtube"] .pae-icon-svg svg { width: 68%; height: auto; }
3708	.post-audio-external[data-platform="bandcamp"] .pae-icon-svg svg { width: 62%; height: auto; }
3709	.post-audio-external[data-platform="apple"] .pae-icon-svg svg { width: 58%; height: 58%; }
3710	.post-audio-external[data-platform="tidal"] .pae-icon-svg svg { width: 68%; height: auto; }
3711	.post-audio-external[data-platform="deezer"] .pae-icon-svg svg { width: 65%; height: auto; }
3712	.post-audio-external[data-platform="mixcloud"] .pae-icon-svg svg { width: 75%; height: auto; }
3713	.post-audio-external[data-platform="soundcloud"] .pae-icon { background: #ff5500; }
3714	.post-audio-external[data-platform="spotify"] .pae-icon { background: #1db954; }
3715	.post-audio-external[data-platform="youtube"] .pae-icon { background: #ff0000; }
3716	.post-audio-external[data-platform="bandcamp"] .pae-icon { background: #1da0c3; }
3717	.post-audio-external[data-platform="apple"] .pae-icon { background: #fa243c; }
3718	.post-audio-external[data-platform="tidal"] .pae-icon { background: #000; }
3719	.post-audio-external[data-platform="deezer"] .pae-icon { background: #a238ff; }
3720	.post-audio-external[data-platform="mixcloud"] .pae-icon { background: #314359; }
3721	.post-audio-external[data-platform="other"] .pae-icon { background: #555; }
3722	.post-audio-external .pae-meta {
3723	flex: 1;
3724	min-width: 0;
3725	display: flex;
3726	flex-direction: column;
3727	gap: 2px;
3728	}
3729	.post-audio-external .pae-title {
3730	display: block;
3731	font-weight: 600;
3732	overflow: hidden;
3733	text-overflow: ellipsis;
3734	white-space: nowrap;
3735	color: var(--ink);
3736	}
3737	.post-audio-external .pae-platform {
3738	display: block;
3739	font-size: .78rem;
3740	opacity: .65;
3741	text-transform: capitalize;
3742	}
3743	.post-audio-external .pae-go {
3744	flex-shrink: 0;
3745	opacity: .5;
3746	font-size: 1.1rem;
3747	}
3748
3749	/* =========================================================================
3750	v9.0 — Video player (inline)
3751	========================================================================= */
3752
3753	.post-video-figure {
3754	margin: 1.25rem 0;
3755	max-width: 100%;
3756	}
3757
3758	.post-video {
3759	display: block;
3760	width: 100%;
3761	max-width: 100%;
3762	height: auto;
3763	border-radius: 10px;
3764	background: #000;
3765	box-shadow: 0 4px 20px rgba(0,0,0,.15);
3766	}
3767
3768	.post-video-caption {
3769	margin-top: .5rem;
3770	font-size: .88rem;
3771	color: var(--ink-muted, color-mix(in srgb, var(--ink) 60%, transparent));
3772	text-align: center;
3773	line-height: 1.5;
3774	}
3775
3776	.post-video-caption strong {
3777	display: inline;
3778	font-weight: 600;
3779	color: var(--ink);
3780	}
3781
3782	@media (max-width: 640px) {
3783	.post-video-figure { margin: .75rem -.5rem; }
3784	.post-video { border-radius: 6px; }
3785	}
3786
3787	/* v9.3 — Floating "Bewerken" knop voor album-blokken in de post-editor.
3788	Verschijnt bij hover over een .post-album binnen #visual en wordt via JS
3789	geplaatst op de rechterbovenhoek van het blok. Niet in de opgeslagen HTML. */
3790	.pcms-album-edit-overlay {
3791	position: absolute;
3792	z-index: 1000;
3793	transform: translateX(-100%);
3794	display: inline-flex;
3795	align-items: center;
3796	gap: .35rem;
3797	padding: .35rem .7rem;
3798	background: var(--accent, #c2410c);
3799	color: #fff;
3800	border: none;
3801	border-radius: 6px;
3802	font-size: .82rem;
3803	font-weight: 600;
3804	cursor: pointer;
3805	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
3806	transition: transform .12s ease, box-shadow .12s ease;
3807	}
3808	.pcms-album-edit-overlay:hover {
3809	transform: translateX(-100%) translateY(-1px);
3810	box-shadow: 0 6px 16px rgba(0, 0, 0, .24);
3811	}
3812	.pcms-album-edit-overlay:active {
3813	transform: translateX(-100%) translateY(0);
3814	box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
3815	}
3816
3817	/* v9.3 — Drag-and-drop in de album-builder selected-lijst */
3818	.ab-selected-row { cursor: default; }
3819	.ab-selected-row .ab-drag-handle {
3820	display: inline-flex;
3821	align-items: center;
3822	justify-content: center;
3823	width: 18px;
3824	height: 100%;
3825	color: color-mix(in srgb, currentColor 40%, transparent);
3826	cursor: grab;
3827	user-select: none;
3828	font-size: .9rem;
3829	letter-spacing: -2px;
3830	flex-shrink: 0;
3831	}
3832	.ab-selected-row:hover .ab-drag-handle {
3833	color: color-mix(in srgb, currentColor 70%, transparent);
3834	}
3835	.ab-selected-row.is-dragging {
3836	opacity: .35;
3837	cursor: grabbing;
3838	}
3839	.ab-selected-row.is-dragging .ab-drag-handle { cursor: grabbing; }
3840	/* Drop-indicator lijnen boven/onder de target rij */
3841	.ab-selected-row.is-drag-target-before {
3842	box-shadow: 0 -2px 0 0 var(--accent, #c2410c) inset, 0 2px 0 0 var(--accent, #c2410c);
3843	/* Gebruik outline voor cross-browser zichtbaarheid */
3844	position: relative;
3845	}
3846	.ab-selected-row.is-drag-target-before::before {
3847	content: "";
3848	position: absolute;
3849	top: -1px; left: 0; right: 0;
3850	height: 2px;
3851	background: var(--accent, #c2410c);
3852	pointer-events: none;
3853	}
3854	.ab-selected-row.is-drag-target-after::after {
3855	content: "";
3856	position: absolute;
3857	bottom: -1px; left: 0; right: 0;
3858	height: 2px;
3859	background: var(--accent, #c2410c);
3860	pointer-events: none;
3861	}
3862	.ab-selected-row.is-drag-target-after { position: relative; }
3863
3864	/* v9.3 — Playlist fallback states (missing of empty playlist reference in post) */
3865	.post-playlist-missing, .post-playlist-empty {
3866	padding: 1rem;
3867	margin: .75rem 0;
3868	background: color-mix(in srgb, var(--accent, #c2410c) 8%, transparent);
3869	border: 1px dashed color-mix(in srgb, var(--accent, #c2410c) 30%, transparent);
3870	border-radius: 8px;
3871	font-size: .9rem;
3872	}
3873	.post-playlist-missing em, .post-playlist-empty em {
3874	opacity: .8;
3875	}
3876
3877	/* v9.3 — Install-app footer-knop */
3878	.site-footer-install {
3879	display: flex;
3880	justify-content: center;
3881	padding: 1rem 1rem 1.25rem;
3882	border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
3883	margin-top: .5rem;
3884	}
3885
3886	/* v9.4 — Cooler install-knop: gradient + shimmer + perfect centering.
3887	Twee kleur-stops voor diepte, animated shimmer-streep om aandacht te trekken,
3888	icon perfect verticaal gecentreerd via flex (was: net iets te hoog tov tekst). */
3889	.install-app-btn {
3890	position: relative;
3891	display: inline-flex;
3892	align-items: center;
3893	justify-content: center;
3894	gap: .55rem;
3895	padding: .8rem 1.6rem;
3896	background: linear-gradient(135deg,
3897	var(--accent, #c2410c),
3898	color-mix(in srgb, var(--accent, #c2410c) 80%, #000));
3899	color: #fff;
3900	border: none;
3901	border-radius: 999px;
3902	font: inherit;
3903	font-weight: 600;
3904	font-size: .95rem;
3905	line-height: 1;
3906	letter-spacing: .01em;
3907	cursor: pointer;
3908	overflow: hidden;
3909	isolation: isolate;
3910	box-shadow:
3911	0 1px 0 rgba(255,255,255,.15) inset,
3912	0 -2px 0 rgba(0,0,0,.1) inset,
3913	0 4px 14px color-mix(in srgb, var(--accent, #c2410c) 40%, transparent),
3914	0 1px 3px rgba(0,0,0,.18);
3915	transition:
3916	transform .15s cubic-bezier(.4, 0, .2, 1),
3917	box-shadow .2s ease,
3918	filter .15s ease;
3919	}
3920	.install-app-btn svg {
3921	flex-shrink: 0;
3922	/* subtle bounce-on-hover trigger, separate animation */
3923	transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
3924	}
3925	.install-app-btn span {
3926	line-height: 1;
3927	}
3928
3929	/* Shimmer-streep die langzaam over de knop loopt — "alive" effect */
3930	.install-app-btn::before {
3931	content: "";
3932	position: absolute;
3933	top: 0;
3934	left: -100%;
3935	width: 60%;
3936	height: 100%;
3937	background: linear-gradient(110deg,
3938	transparent 30%,
3939	rgba(255,255,255,.25) 50%,
3940	transparent 70%);
3941	z-index: -1;
3942	animation: pcmsInstallShimmer 4s ease-in-out infinite;
3943	pointer-events: none;
3944	}
3945	@keyframes pcmsInstallShimmer {
3946	0%, 35% { left: -100%; }
3947	65%, 100% { left: 200%; }
3948	}
3949
3950	.install-app-btn:hover {
3951	transform: translateY(-2px) scale(1.02);
3952	filter: brightness(1.06);
3953	box-shadow:
3954	0 1px 0 rgba(255,255,255,.2) inset,
3955	0 -2px 0 rgba(0,0,0,.1) inset,
3956	0 8px 24px color-mix(in srgb, var(--accent, #c2410c) 55%, transparent),
3957	0 2px 6px rgba(0,0,0,.2);
3958	}
3959	.install-app-btn:hover svg {
3960	transform: translateY(-2px);
3961	}
3962	.install-app-btn:active {
3963	transform: translateY(0) scale(.98);
3964	transition-duration: .05s;
3965	}
3966	.install-app-btn:focus-visible {
3967	outline: 2px solid var(--accent, #c2410c);
3968	outline-offset: 3px;
3969	}
3970
3971	/* Reduced motion: shimmer uit, alleen statisch */
3972	@media (prefers-reduced-motion: reduce) {
3973	.install-app-btn::before { animation: none; left: -100%; }
3974	.install-app-btn:hover { transform: none; }
3975	.install-app-btn:hover svg { transform: none; }
3976	}
3977
3978	/* Install-instructions modal */
3979	.install-modal {
3980	position: fixed;
3981	inset: 0;
3982	z-index: 10000;
3983	display: flex;
3984	align-items: center;
3985	justify-content: center;
3986	padding: 1rem;
3987	}
3988	.install-modal-backdrop {
3989	position: absolute;
3990	inset: 0;
3991	background: rgba(0,0,0,.55);
3992	backdrop-filter: blur(3px);
3993	}
3994	.install-modal-panel {
3995	position: relative;
3996	z-index: 1;
3997	background: var(--paper);
3998	color: var(--ink);
3999	border: 1px solid var(--rule);
4000	border-radius: 14px;
4001	padding: 1.5rem;
4002	max-width: 440px;
4003	width: 100%;
4004	max-height: 90vh;
4005	overflow-y: auto;
4006	box-shadow: 0 20px 60px rgba(0,0,0,.4);
4007	}
4008	.install-modal-panel h3 { font-size: 1.15rem; color: var(--ink); }
4009	.install-modal-panel h4 {
4010	margin: 1rem 0 .4rem;
4011	font-size: .92rem;
4012	letter-spacing: .03em;
4013	text-transform: uppercase;
4014	opacity: .7;
4015	color: var(--ink);
4016	}
4017	.install-modal-panel p { color: var(--ink); }
4018	.install-steps {
4019	margin: 0;
4020	padding-left: 1.35rem;
4021	display: flex;
4022	flex-direction: column;
4023	gap: .45rem;
4024	font-size: .95rem;
4025	line-height: 1.45;
4026	color: var(--ink);
4027	}
4028	.install-steps li::marker { color: var(--accent); font-weight: 700; }
4029	.install-apk-block {
4030	margin-top: 1.25rem;
4031	padding-top: 1rem;
4032	border-top: 1px dashed var(--rule);
4033	}
4034	.install-apk-link {
4035	display: inline-flex;
4036	align-items: center;
4037	margin-top: .4rem;
4038	padding: .6rem 1rem;
4039	background: var(--accent);
4040	color: #fff;
4041	border-radius: 8px;
4042	text-decoration: none;
4043	font-weight: 600;
4044	}
4045	.install-apk-link:hover { filter: brightness(1.08); }
4046	.install-modal-actions {
4047	display: flex;
4048	justify-content: flex-end;
4049	margin-top: 1.25rem;
4050	}
4051	.install-modal-actions .btn {
4052	padding: .5rem 1rem;
4053	background: var(--paper-2);
4054	border: 1px solid var(--rule);
4055	border-radius: 8px;
4056	color: var(--ink);
4057	cursor: pointer;
4058	font: inherit;
4059	font-weight: 500;
4060	}
4061	.install-modal-actions .btn:hover {
4062	background: color-mix(in srgb, var(--accent) 10%, var(--paper-2));
4063	border-color: var(--accent);
4064	color: var(--accent);
4065	}
4066
4067	@media (max-width: 520px) {
4068	.install-modal-panel { padding: 1.2rem; }
4069	.install-app-btn { width: 100%; justify-content: center; }
4070	}
4071
4072	/* v9.3 — Install-modal: choice-blocks met voor/nadelen */
4073	.install-choice {
4074	margin-top: 1.25rem;
4075	padding: 1rem;
4076	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
4077	border-radius: 10px;
4078	background: color-mix(in srgb, currentColor 3%, transparent);
4079	}
4080	.install-choice + .install-choice { margin-top: 1rem; }
4081	.install-choice h4 {
4082	margin: 0 0 .75rem;
4083	font-size: 1rem;
4084	letter-spacing: 0;
4085	text-transform: none;
4086	opacity: 1;
4087	}
4088	.install-pros-cons {
4089	display: flex;
4090	gap: 1rem;
4091	margin: .5rem 0 1rem;
4092	}
4093	.install-pros,
4094	.install-cons {
4095	flex: 1;
4096	min-width: 0;
4097	font-size: .85rem;
4098	line-height: 1.45;
4099	}
4100	.install-pros strong,
4101	.install-cons strong {
4102	display: block;
4103	margin-bottom: .35rem;
4104	font-size: .82rem;
4105	letter-spacing: .02em;
4106	}
4107	.install-pros strong { color: #16a34a; }
4108	.install-cons strong { color: #dc2626; }
4109	.install-pros ul,
4110	.install-cons ul {
4111	margin: 0;
4112	padding-left: 1.1rem;
4113	display: flex;
4114	flex-direction: column;
4115	gap: .25rem;
4116	}
4117	.install-pros li::marker { color: #16a34a; }
4118	.install-cons li::marker { color: #dc2626; }
4119
4120	.install-choice-cta {
4121	display: inline-flex;
4122	align-items: center;
4123	justify-content: center;
4124	gap: .35rem;
4125	margin-top: .5rem;
4126	padding: .7rem 1.1rem;
4127	background: var(--accent, #c2410c);
4128	color: #fff;
4129	border: none;
4130	border-radius: 8px;
4131	text-decoration: none;
4132	font: inherit;
4133	font-weight: 600;
4134	font-size: .95rem;
4135	cursor: pointer;
4136	transition: filter .12s ease;
4137	}
4138	.install-choice-cta:hover { filter: brightness(1.08); }
4139	.install-choice-note {
4140	margin: .5rem 0 0;
4141	padding: .6rem .8rem;
4142	background: color-mix(in srgb, currentColor 4%, transparent);
4143	border-left: 3px solid var(--accent, #c2410c);
4144	border-radius: 4px;
4145	font-size: .9rem;
4146	line-height: 1.45;
4147	}
4148
4149	@media (max-width: 520px) {
4150	.install-pros-cons { flex-direction: column; gap: .75rem; }
4151	}
4152
4153	/* v9.4 — Soft fade-overgang tussen posts bij navigatie.
4154	Fade-out is rustig (450ms): oude content vervaagt geleidelijk terwijl
4155	de scroll-naar-top loopt. Fade-in is snel (180ms) met een lichte blur-
4156	onscherp → scherp animatie zodat de nieuwe content niet abrupt verschijnt. */
4157	#pcms-main {
4158	transition: opacity .45s ease-out;
4159	}
4160	#pcms-main.is-pcms-transitioning-out {
4161	opacity: 0;
4162	}
4163	#pcms-main.is-pcms-transitioning-in {
4164	opacity: 0;
4165	filter: blur(6px);
4166	animation: pcmsFadeIn .18s ease-out forwards;
4167	will-change: opacity, filter;
4168	}
4169	@keyframes pcmsFadeIn {
4170	from { opacity: 0; filter: blur(6px); }
4171	to { opacity: 1; filter: blur(0); }
4172	}
4173
4174	/* Respecteer reduced-motion voorkeur (iOS/Android accessibility setting) */
4175	@media (prefers-reduced-motion: reduce) {
4176	#pcms-main {
4177	transition: opacity .15s ease-out;
4178	}
4179	#pcms-main.is-pcms-transitioning-in {
4180	filter: none;
4181	animation: none;
4182	opacity: 1;
4183	}
4184	}

Note: See TracBrowser for help on using the repository browser.

Context Navigation

source: Klonkt/src/assets/css/style.css@ dd80030

Download in other formats: