Context Navigation

style.css@ c3ad46d

main

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

Fix: horizontal clipping on html (not body) — no h-scroll + fixed bottom tab correct

Previous fix (overflow-x:clip on html) doesn't clip reliably at viewport level →
horizontal scroll returned + the fixed bar was mispositioned. Now:

html { overflow-x: hidden } → propagates to the viewport (no h-scroll), does NOT break position:fixed (html is the document scroller anyway).
body gets NO overflow-x → doesn't become a second scroll container → bottom tab stays fixed while scrolling.

CSS cache-buster v7.

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

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

Context Navigation

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

Download in other formats: