:root
{
	--light:#F1E2C9;
	--dark:#323232;
	--page-ink:var(--light);		/* the page around the reader — resolved here, so #reader's themes, which redefine --light, don't reach it */
	--accent:#DC30D9;
	--word-mark:rgba(220,48,217,.25);		/* read-along word box, accent at 25% */
	--card:#F1EEE4;		/* word card in the sidebar */
	--read:#ED7672;		/* Lees on the start page tiles */

	--page-width:1400px;
	--page-padding-x:55px;
	--page-padding-y:45px;

	--reader-padding-y:40px;
	--reader-padding-x:80px;
	--text-width:760px;		/* max text width in the popover view, the column centred on the paper */
	--column-gap:80px;		/* between reader pages, only visible mid-swipe */
	
	--sidebar-padding-x:45px;
	
	--spacing:15px; /* to be used */
	--spacing-double:30px;
	
	--serif:'Source Serif 4',Georgia,serif;
	--sans:'Source Sans 3',system-ui,sans-serif;
	--mono:'IBM Plex Mono',ui-monospace,monospace;

	--default-font:sans-serif;
	--default-type:18px;
	--default-line:24px;
	
	--reader-type:24px;
	--reader-line:1.5;
	--reader-tracking:0em;		/* the three reader-* are set per reader from the settings panel, see App.setLook() */

	--paper-light:#FFFFFF;		/* reader themes: Licht / Tint / Donker, also the swatches in the panel */
	--paper-tint:#F1E2C9;
	--paper-dark:#000000;
	--ink-dark:#FFFFFF;
	--panel:rgba(255,252,245,.83);		/* settings panel, #FFFCF5 at 83% */
	--panel-shadow:8.56px 8.56px 17.12px 0 rgba(0,0,0,.1);

	--small-type:16px;
	--small-line:21px;
	
	--drop-shadow:10px 10px 20px 0 rgba(0, 0, 0, 0.10);

	--curve:cubic-bezier(.23,.34,.18,1);	
}

html
{
	height:100%;
	scroll-behavior: smooth;
}
body
{
	margin:0;
	padding:var(--page-padding-y) var(--page-padding-x);
	
	
	font-family:var(--default-font);
	font-size:var(--default-type);
	line-height:var(--default-line);
	font-weight:normal;
	font-style:normal;

	-webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	
	background-color:var(--dark);
	color:var(--light);
}
body.dark
{
/* 
	--light:#000000;
	--dark:#faf8f5;
	--accent:#0000FF;
 */
}

body *
{
	box-sizing: border-box;
  -moz-box-sizing: border-box;
}
.is-hidden,
[hidden]
{
	display:none !important;
}
.no-pointer-events
{
	pointer-events:none;
}
.pointer-events
{
	pointer-events:all;
}
.clickable
{
	cursor:pointer;
}
.dimmed
{
	opacity:.4;
}
.no-transition
{
	transition:none !important;
}
.no-scrollbar
{
	scrollbar-width: none; /* FF */
	-ms-overflow-style: none; /* Edge */
}
.no-scrollbar::-webkit-scrollbar
{
	display: none;
}
.flex
{
	display:flex;
}
.flex.center
{
	justify-content: center;
}
.flex-center-vertical
{
	align-items: center;
}
.flex-wrap
{
	flex-wrap:wrap;
}
.flex-break
{
	flex-basis:100%;
	height:0;
}
.clear:after
{
	content:'';
	display:table;
	clear:both;
}
.full-width
{
	width:100% !important;
}
.nowrap
{
	white-space:nowrap;
}
a
{
	color:inherit;
}


#reader
{
	position:relative;
	margin:auto;
	max-width:var(--page-width);
	height:calc(100vh - (2 * var(--page-padding-y)));
	
	display:flex;

	border-radius: 20px;
	box-shadow: var(--drop-shadow);
	
	background-color:var(--light);
	color:var(--dark);
	
	transition:background-color .4s ease 0s;
}

.read
{
	position:relative;		/* positioning context for .word-mark */
	flex-basis:60%;
	min-width:0;		/* !!! flex items default to min-width:auto, which lets the pages' combined width push .read open */
	padding:var(--reader-padding-y) var(--reader-padding-x);

	display:flex;
	flex-direction:column;		/* header / article / footer, article takes the height that's left */

	/* border:1px dashed magenta; */
}
.read > .header,
.read > .footer
{
	flex-shrink:0;
}

.sidebar
{
	flex-basis:40%;
	flex-shrink:0;
	padding:0 var(--sidebar-padding-x);

	display:flex;
	flex-direction:column;		/* the card's area, and the remembered words under it when they show */

	/* border:1px dashed cyan; */
}
.card-area
{
	flex:1;
	min-height:0;

	display:flex;
	align-items:center;		/* the word card sits centred on the height that's there */
}

/* word memory (?memory=on): the explained words as outlined chips, bottom right of the sidebar — see App.rememberWord() */
.word-memory
{
	flex-shrink:0;
	padding:16px 0 28px;

	display:flex;
	flex-direction:row-reverse;		/* the oldest word bottom right: newer ones line up to its left... */
	flex-wrap:wrap-reverse;		/* ...and then in rows above it */
	gap:10px;
}
.word-memory[hidden]
{
	display:none;
}
.word-chip
{
	padding:2px 16px 4px;
	border:1px solid currentColor;
	border-radius:999px;
	background:none;
	color:inherit;		/* the reader's ink, so white on the dark paper */
	font-family:var(--reader-font);
	font-size:22px;
	line-height:1.3;
	cursor:pointer;
}
.word-chip:focus-visible
{
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* the paper shows at once, the text fades in once the app has laid it out — see the script at the top of #reader in index.php */
.read,
.settings-toggle,
.menu-link
{
	transition:opacity .3s;
}
#reader.loading .read,
#reader.loading .settings-toggle,
#reader.loading .menu-link
{
	opacity:0;
}

/* paged layout: a fixed-height single column, overflow spills into extra columns sideways — one column per page */

/* the scroll container: the article's overflow columns spill into it, the snap track sits beside them — see App.markPages() */
.pager
{
	flex:1;
	margin:45px 0;
	min-height:0;		/* same min-size trap as .read, now vertical */
	position:relative;		/* the snap track is placed in its scroll area */

	overflow-x:scroll;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
}
.pager.turning		/* our own page turn animating, see App.glideTo(): no snap pulling at each frame, no native scroll — which stops a swipe's momentum still running */
{
	overflow-x:hidden;
	scroll-snap-type:none;
}
.pager.dragging		/* a mouse or pen drag, see App.bindSwipe() — no snap either, and no selecting text on the way */
{
	scroll-snap-type:none;
	-webkit-user-select:none;
	user-select:none;
	cursor:grabbing;
}
.snap-point		/* one empty box per page — like swiperUI's slides */
{
	position:absolute;
	top:0;
	height:1px;
	pointer-events:none;
	scroll-snap-align:start;
	scroll-snap-stop:always;		/* one page per swipe, no flinging past several */
}

article
{
	height:100%;
	/* padding:50px 0; */

	column-count:1;
	column-width:1px;		/* !!! WebKit makes no multicol for column-count:1 alone (one tall column, 1 / 1 on iOS) — a width makes it one; count 1 still wins, so the column spans the article */
	column-gap:var(--column-gap);
	column-fill:auto;
	
	/* background-color:rgba(250,0,0,.1); */
	
}
article .chapter
{
	break-before:column;		/* each chapter starts on a new page, long ones flow on */
	/* background-color:rgba(250,0,0,.1); */
}
article .chapter::before		/* Firefox spacer, height set by App.alignChapters() — a sibling box, so the break can fall after it */
{
	content:'';
	display:block;
	height:var(--chapter-pad,0);
}
article h2
{
	break-after:avoid;		/* no heading alone at the bottom of a page */
}
article h1,
article h2:first-child
{
	margin-top:0;
}


article p
{
	orphans:2;
	widows:2;
}


/* header */

.header
{
	display:grid;
	grid-template-columns:1fr auto 1fr;		/* the play icon in the middle column is centred whatever sits beside it */
	align-items:center;
	column-gap:16px;
}
.header .slower
{
	justify-self:end;
}
.header .faster
{
	justify-self:start;
}

/* the label hangs outside the button's box, so only the icon counts for centring — and it's still one click target */
.read-aloud
{
	position:relative;
}
.read-aloud .label
{
	position:absolute;
	left:100%;
	margin-left:13px;		/* icon to label */
	white-space:nowrap;
}

/* speed steps only while speech runs, then sneller takes the label's place */
.rate-step
{
	gap:10px;		/* icon to label */
}
.rate-step,
.header.speaking .read-aloud .label
{
	visibility:hidden;
	opacity:0;
	transition:opacity .2s,visibility .2s;
}
.header.speaking .rate-step,
.read-aloud .label
{
	visibility:visible;
	opacity:1;
	transition:opacity .2s,visibility .2s;
}
.header.speaking .rate-step:disabled		/* slowest or fastest step reached */
{
	opacity:.4;
	cursor:default;
}
.read-aloud .icon-pause,
.read-aloud.paused .icon-play
{
	display:none;
}
.read-aloud.paused .icon-pause
{
	display:block;
}
.read-aloud:disabled		/* until the voices are in */
{
	opacity:.4;
	cursor:default;
}


/* read-along word: one box that glides along the line, placed by App.markWord() */

.word-mark
{
	position:absolute;
	left:0;
	top:0;

	border-radius:6px;
	background-color:var(--word-mark);
	mix-blend-mode:multiply;		/* on top of the text without dulling it — light backgrounds only */
	pointer-events:none;

	opacity:0;
	transition:transform .15s var(--curve),width .15s ease-out,height .15s ease-out,opacity .15s;
}
.word-mark.visible
{
	opacity:1;
}


/* page navigation */

.page-nav
{
	display:grid;
	grid-template-columns:1fr auto 1fr;		/* counter truly centred — space-between centres the gaps, and volgende is wider than vorige */
	align-items:center;
}
#page-prev
{
	justify-self:start;
}
#page-next
{
	justify-self:end;
}
.page-nav button,
.read-aloud,
.rate-step,
.settings-toggle,
.settings-reset,
.card-read
{
	display:flex;
	align-items:center;
	padding:0;
	border:0;
	background:none;
	font-family:inherit;
	font-size:inherit;
	line-height:inherit;
	color:inherit;
	cursor:pointer;
}
.page-nav,
.read-aloud,
.rate-step,
.settings-toggle,
.menu-link,
.settings-reset,
.card-read		/* after the reset above, which would otherwise put the body font back on the button */
{
	font-family:var(--mono);
	font-size:14px;
	line-height:1.195;
}
.page-nav button
{
	gap:8px;		/* arrow to label */
}
.page-nav button:disabled
{
	opacity:0;		/* keeps its space, so the counter stays centred */
	cursor:default;
}


/* typo */

/* the chosen font, for the text and for everything that previews it (slider labels) */
#reader
{
	--reader-font:var(--serif);
}
#reader[data-font="sans"]
{
	--reader-font:var(--sans);
}
#reader[data-font="mono"]
{
	--reader-font:var(--mono);
}
article
{
	font-family:var(--reader-font);
	font-size:var(--reader-type);
	line-height:var(--reader-line);
	letter-spacing:var(--reader-tracking);
}
article h2
{
	font-weight:500;
	line-height:1.3;
}










/* reader themes — the reader's colours come from --light (paper) and --dark (ink) */

#reader[data-theme="light"]
{
	--light:var(--paper-light);
}
#reader[data-theme="dark"]
{
	--light:var(--paper-dark);
	--dark:var(--ink-dark);
}
#reader[data-theme="dark"] .read img		/* black line icons on black paper */
{
	filter:invert(1);
}



/* settings panel: drops open from the Instellingen toggle, top right of the reader */

.settings		/* above the reader, on the page — open, the panel drops over the reader from there */
{
	position:absolute;
	top:calc(-1 * var(--page-padding-y));
	right:0;
	z-index:10;		/* over the sidebar's word card */
	width:373px;

	display:flex;
	flex-direction:column;

	border-radius:10.27px;
	transition:background-color .2s,box-shadow .2s,backdrop-filter .1s;
	
}
.settings.open
{
	background-color:var(--panel);
	backdrop-filter:blur(4px);
	box-shadow:var(--panel-shadow);
	color:#000;		/* the panel stays light in every reader theme */
}
.settings:not(.open)		/* the faded-out panel still takes its space: let clicks through to the word card below */
{
	pointer-events:none;
	color:var(--page-ink);
}
.icon-mask		/* an icon as a mask, so it takes the label's colour: light on the page, black in the open settings panel */
{
	width:24px;
	height:24px;
	flex-shrink:0;
	background-color:currentColor;
	-webkit-mask:var(--icon) center / contain no-repeat;
	mask:var(--icon) center / contain no-repeat;
}
.gear-icon
{
	--icon:url(/media/gear.svg);
}
.menu-icon
{
	--icon:url(/media/menu.svg);
}

/* Menu: top left above the reader, the counterpart of Instellingen — back to the prototype start page */
.menu-link
{
	position:absolute;
	top:calc(-1 * var(--page-padding-y));
	left:40px;
	height:var(--page-padding-y);

	display:flex;
	align-items:center;
	gap:10px;		/* icon to label, as with Instellingen */

	color:var(--page-ink);
	text-decoration:none;
}
.settings-toggle
{
	pointer-events:auto;
}
.settings-toggle
{
	align-self:flex-end;
	margin:calc((var(--page-padding-y) - 24px) / 2) 30px 0 0;		/* centred in the page's top margin (24px: the gear) */
	gap:10px;		/* gear to label */
}
.settings-panel
{
	padding:22px 33px 14px 42px;

	/* fades with the panel background; visibility flips only once the fade is done, so nothing collapses mid-fade */
	visibility:hidden;
	opacity:0;
	transition:opacity .2s,visibility .2s;

	display:flex;
	flex-direction:column;
	gap:20.5px;
}

/* font and theme: three buttons in a row, the chosen one outlined in accent */
.settings.open .settings-panel
{
	visibility:visible;
	opacity:1;
}
.settings-choice
{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20.5px;
}
/* voices: two per row, filled from what the browser has — the panel grows with them */
.settings-voices
{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:18px;
	margin-bottom:14.5px;		/* 35px to the fonts in the design */
}
.settings-voices button
{
	display:flex;
	align-items:center;
	gap:14px;
	min-width:0;
	height:40px;
	padding:0 10px;

	font-family:var(--mono);
	font-size:13.7px;
	text-transform:uppercase;
}
.settings-voices button span		/* long names ("Google mannelijke stem") get an ellipsis, the title has it all */
{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.settings-choice button
{
	height:51.36px;
	padding:0;
}
.settings-choice button,
.settings-voices button
{
	border:0;
	border-radius:8.56px;
	box-shadow:inset 0 0 0 .86px #000;		/* inset shadow, not border: the thicker chosen outline doesn't shift the content */

	background:none;
	color:#000;
	cursor:pointer;
}
.settings-choice button[aria-checked="true"],
.settings-voices button[aria-checked="true"]
{
	box-shadow:inset 0 0 0 1.71px var(--accent);
}
.settings-choice .font-serif,
.settings-choice .font-sans,
.settings-choice .font-mono
{
	font-size:36px;
	font-weight:500;
	line-height:1;
}
.settings-choice .font-serif
{
	font-family:var(--serif);
}
.settings-choice .font-sans
{
	font-family:var(--sans);
}
.settings-choice .font-mono
{
	font-family:var(--mono);
	font-weight:400;
}
.settings-choice .theme-light,
.settings-choice .theme-tint,
.settings-choice .theme-dark
{
	font-family:var(--mono);
	font-size:13.7px;
	text-transform:uppercase;
}
.settings-choice .theme-light
{
	background-color:var(--paper-light);
}
.settings-choice .theme-tint
{
	background-color:var(--paper-tint);
}
.settings-choice .theme-dark
{
	background-color:var(--paper-dark);
	color:var(--ink-dark);
}

/* sliders: small end left, large end right, thin track, round handle */
.settings-slider
{
	display:flex;
	flex-direction:column;
	gap:4px;
	margin-top:4px;
}
.settings-slider .ends
{
	display:flex;
	justify-content:space-between;
	align-items:flex-end;
	height:31px;

	font-family:var(--mono);
	font-size:16px;
	font-weight:400;		/* Plex Mono ships 400/700 only */
	line-height:1;
}
.slider-size .ends span:last-child
{
	font-size:27.4px;
}
.slider-tracking .ends span:last-child
{
	letter-spacing:5.4px;
	margin-right:-5.4px;		/* letter-spacing trails the last letter too */
}
.settings-slider input
{
	-webkit-appearance:none;
	appearance:none;
	width:100%;
	height:16px;
	margin:0;
	background:none;
	cursor:pointer;
}
.settings-slider input::-webkit-slider-runnable-track
{
	height:1.71px;
	background:#000;
}
.settings-slider input::-webkit-slider-thumb
{
	-webkit-appearance:none;
	width:15.4px;
	height:15.4px;
	margin-top:-6.85px;		/* centre on the track */
	border-radius:50%;
	background:#000;
}
.settings-slider input::-moz-range-track
{
	height:1.71px;
	background:#000;
}
.settings-slider input::-moz-range-thumb
{
	width:15.4px;
	height:15.4px;
	border:0;
	border-radius:50%;
	background:#000;
}
/* reset: icon under the middle column, label hanging to its right — like lees voor in the header */
.settings-reset
{
	position:relative;
	align-self:center;
	margin-top:32.5px;		/* 61px track to icon, the sliders' rhythm */
}
.settings-reset .label
{
	position:absolute;
	left:100%;
	margin-left:9px;
	white-space:nowrap;
}
.settings-reset:disabled		/* already standard */
{
	opacity:.4;
	cursor:default;
}
.settings-slider input:focus-visible
{
	outline:2px solid var(--accent);
	outline-offset:4px;
}



/* floating play/pause, small screens only */
.fab
{
	display:none;
	position:fixed;
	right:16px;
	bottom:calc(16px + env(safe-area-inset-bottom,0px));
	z-index:150;
}



/* word card: definition of the tapped word, in the sidebar */
.word-card
{
	position:relative;
	color:#000;		/* the card keeps its own light look in every reader theme */
	width:100%;
	min-height:min(270px,100%);		/* about half the design's 541px — grows with its content from there */
	max-height:100%;
	overflow-y:auto;		/* a very long explanation scrolls inside the card */
	padding:93px 40px 46px;		/* text clears the icon and the read button */
	transition:height .3s var(--curve);		/* when the content does outgrow it, see App.showPopover() */

	border-radius:20px;
	box-shadow:var(--drop-shadow);
	background-color:var(--card);

	font-family:var(--sans);
	font-size:21px;
	line-height:1.5;
}
.card-first		/* the question mark: back to the first page in defineMode 'meer', just an icon otherwise */
{
	position:absolute;		/* !!! the button, not just its icon: left in the flow, the empty button took a line and pushed the text down */
	left:10px;
	top:10px;
	padding:0;
	border:0;
	background:none;
	cursor:pointer;
}
.card-first:disabled
{
	cursor:default;
}
.card-first .icon
{
	display:block;		/* no inline gap under the image */
}

/* read-aloud of the card: icon centred on the card, label hanging to its right — like lees voor in the header */
.card-read
{
	position:absolute;
	top:40px;
	left:50%;
	margin-left:-16px;		/* half the icon */
}
.card-read .label
{
	position:absolute;
	left:100%;
	margin-left:11px;
	white-space:nowrap;
	color:#323232;
}
.card-read .icon-pause,
.card-read.playing .icon-play
{
	display:none;
}
.card-read.playing .icon-pause
{
	display:block;
}

/* defineMode 'meer' (?define=meer): the explanation a page at a time, see App.definitionPages() */
.word-card .word-type		/* zelfstandig naamwoord · de journaliste */
{
	margin:-1.2em 0 1.5em;		/* tucked under the word, h4 keeps a blank line */
	font-size:.8em;
	color:#555;
}
.word-card h5
{
	margin:0 0 .5em;
	font-size:inherit;
	font-weight:600;
}
.word-card h5:not(:first-child)
{
	margin-top:1.5em;
}
.word-card .definition .example + .example
{
	margin-top:1em;
}
.word-card .definition .example p + p		/* an example and what it shows belong together */
{
	margin-top:0;
}
.word-card .definition .gloss		/* → what the example shows — the arrow in CSS, so it isn't read aloud */
{
	font-style:normal;
}
.word-card .definition .gloss::before
{
	content:'→ ';
}
.word-card .definition .sense
{
	font-style:normal;
	font-weight:600;
}
.word-card .definition .quote		/* the sentence from the text, the word marked */
{
	font-style:normal;
	color:#555;
}
.word-card .definition .quote mark
{
	background:none;
	color:var(--accent);
}
.word-card .definition .related
{
	font-style:normal;
}
.word-card .definition .related + .related
{
	margin-top:.25em;
}
.word-card .definition .related strong::after
{
	content:' →';
}
.word-card .links a
{
	display:block;
	color:var(--accent);
}
.card-more		/* Vertel me meer: outlined, so it doesn't compete with Verder lezen */
{
	display:block;
	margin:2em auto 0;
	padding:6px 20px;
	border:0;
	border-radius:8px;
	box-shadow:inset 0 0 0 1px currentColor;
	background:none;
	color:inherit;
	font-family:var(--mono);
	font-size:14px;
	line-height:normal;
	text-transform:uppercase;
	cursor:pointer;
}
.card-more:hover
{
	box-shadow:inset 0 0 0 1.7px var(--accent);
}
.card-more[hidden]
{
	display:none;
}
.card-more:not([hidden]) + .card-resume		/* both showing: closer together */
{
	margin-top:1em;
}

/* Verder lezen: continues the read-aloud a word tap paused — like Lees on the start page tiles, the design has none yet */
.card-resume
{
	display:block;
	margin:2em auto 0;
	padding:6px 20px;
	border:0;
	border-radius:8px;
	background-color:var(--read);
	color:#F5F5F5;
	font-family:var(--mono);
	font-size:16px;
	line-height:normal;
	text-transform:uppercase;
	cursor:pointer;
	transition:filter .2s;
}
.card-resume:hover
{
	filter:brightness(1.1);
}
.card-resume[hidden]		/* display:block above would beat the hidden attribute */
{
	display:none;
}

.word-card h4
{
	margin:0 0 1.5em;		/* a blank line to the explanation */

	font-size:inherit;
	font-weight:700;
	color:var(--accent);
}
.word-card .definition p
{
	margin:0;
	font-style:italic;
}
.word-card .definition p + p
{
	margin-top:1.5em;
}
.word-card .definition .label		/* "Voorbeeld:" on its own line, upright */
{
	display:block;
	font-style:normal;
}
.word-card .definition.loading
{
	opacity:.8;
}
.word-card .definition.error
{
	color:#c62828;
}
.word-card .dots span
{
	animation:dot-pulse 1.4s ease-in-out infinite both;
}
.word-card .dots span:nth-child(2)
{
	animation-delay:.2s;
}
.word-card .dots span:nth-child(3)
{
	animation-delay:.4s;
}
@keyframes dot-pulse
{
	0%, 80%, 100% { opacity:.2; }
	40% { opacity:1; }
}
.word-card.resizing		/* no scrollbar flashing in while the height catches up */
{
	overflow:hidden;
}
@media (prefers-reduced-motion:reduce)
{
	.word-card .dots span
	{
		animation:none;
	}
	.word-card
	{
		transition:none;
	}
}



/* popover view: no sidebar, the word card opens over the text next to the tapped word — App.placePopover() sets left, top/bottom and max-height */
#reader[data-view="popover"]
{
	--popover-margin:16px;		/* card to the reader's edges, read by App.placePopover() too */
}
#reader[data-view="popover"] .read
{
	flex-basis:100%;
	max-width:calc(var(--text-width) + 2 * var(--reader-padding-x));		/* the padding comes on top of the text (border-box) */
	margin:0 auto;		/* centred on the reader's paper */
}
#reader[data-view="popover"] .sidebar
{
	flex-basis:0;
	padding:0;
}
#reader[data-view="popover"] .word-card
{
	position:absolute;		/* in #reader: the sidebar has no position of its own */
	z-index:5;		/* over the text and the word box, under the settings panel */
	width:min(420px,calc(100% - 2 * var(--popover-margin)));
	min-height:0;		/* just as high as its content */
	padding:72px 28px 28px;
	font-size:20px;
}
.card-arrow		/* popover view: the card's point towards its word, centred on the card's edge by App.placePopover() */
{
	position:absolute;
	z-index:6;		/* over the card's edge */
	width:14px;
	height:14px;
	transform:translate(-50%,-50%);
	pointer-events:none;
}
.card-arrow::before		/* a square turned on its corner, cut to the half outside the card — the half inside would cover the card's text */
{
	content:'';
	position:absolute;
	inset:0;
	border-radius:2px;
	background-color:var(--card);
	transform:rotate(45deg);
}
/* the cut: the half towards the point, plus a 2px sliver across the card's edge so no seam shows. The shadow follows that shape,
   down and to the right like the card's own — faint on top, fuller below */
.card-arrow[data-side="top"]
{
	filter:drop-shadow(0 -1px 2px rgba(0,0,0,.06));
}
.card-arrow[data-side="top"]::before
{
	clip-path:polygon(0 0,100% 0,100% 2px,2px 100%,0 100%);
}
.card-arrow[data-side="bottom"]
{
	filter:drop-shadow(1px 3px 3px rgba(0,0,0,.1));
}
.card-arrow[data-side="bottom"]::before
{
	clip-path:polygon(calc(100% - 2px) 0,100% 0,100% 100%,0 100%,0 calc(100% - 2px));
}
.card-arrow[hidden]
{
	display:none;
}
#reader[data-view="popover"] .card-read
{
	top:24px;
}



/* highlights: tapped word, read-along inside the word card */
::highlight(tap)
{
	color:var(--accent);
}
::highlight(speak-part)
{
	background-color:#ffeb3b;
}
::highlight(speak-word)
{
	text-decoration-line:underline;
	text-decoration-color:#e53935;
	text-decoration-thickness:2px;
}

/* start page (root index.php): a tile per text — number, type icon, title, Lees, and its explanation settings. See Overview.js */
.tiles
{
	display:grid;
	grid-template-columns:repeat(auto-fill,360px);
	align-items:start;		/* each tile as high as its own content */
	gap:50px 50px;
	padding:7px 0;		/* tiles at 52 from the top in the design, the body padding does the rest */
}
.tile
{
	position:relative;
	padding:143px 30px 43px;		/* the number and the icon sit in the top part */
	border-radius:20px;
	background-color:var(--paper-tint);		/* the reader's Tint paper */
	color:var(--dark);
}
.tile .nr		/* sticks out above the tile, as in the design */
{
	position:absolute;
	left:25px;
	top:-13px;
	font-family:var(--mono);
	font-size:120px;
	line-height:1.3;
}
.tile .icon		/* each at its own size and place in the design (frame Tiles settings) */
{
	position:absolute;
}
.tile .book
{
	top:31px;
	right:40px;
	width:88px;
}
.tile .news
{
	top:33px;
	right:34px;
	width:82px;
}
.tile .magazine
{
	top:34px;
	right:46px;
	width:78px;
}
.tile .intro		/* type, title and Lees, top aligned: a short title leaves room below Lees, so the settings line up across the tiles */
{
	min-height:174px;		/* type 17 + 10 + three title lines 96 + 20 + Lees 31 */
}
.tile .type
{
	margin:0;
	font-family:var(--mono);
	font-size:13px;
	line-height:1.3;
	text-transform:uppercase;
	opacity:.7;
}
.tile h2
{
	margin:10px 0 0;
	font-family:var(--serif);
	font-size:26px;
	font-weight:500;
	line-height:32px;
}
.tile .read
{
	display:inline-block;
	margin-top:20px;
	padding:6px 20px;
	border-radius:8px;
	background-color:var(--read);
	color:#F5F5F5;
	font-family:var(--mono);
	font-size:16px;
	line-height:normal;
	text-transform:uppercase;
	text-decoration:none;
	transition:filter .2s;
}
.tile .read:hover
{
	filter:brightness(1.1);
}

/* the settings: two per row, the chosen one in accent */
.tile .options
{
	margin-top:33px;
	padding-top:15px;
	border-top:1px solid currentColor;

	display:grid;
	grid-template-columns:repeat(2,1fr);
	justify-items:center;
	row-gap:28px;
}
.tile .options h3
{
	grid-column:1 / -1;
	margin:0 0 -2px;

	display:flex;
	align-items:center;
	gap:10px;

	font-family:var(--mono);
	font-size:13px;
	font-weight:400;
	line-height:1.3;
	text-transform:uppercase;
}
.info-icon
{
	--icon:url(/media/info.svg);
}
.option
{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:5px;
	padding:0;
	border:0;
	background:none;
	color:inherit;
	font-family:var(--mono);
	font-size:11px;
	line-height:1.3;
	cursor:pointer;
}
.option[aria-pressed="true"]
{
	color:var(--accent);
}
.option:disabled		/* woorden onthouden with bij woord: there's no sidebar to keep them in */
{
	opacity:.35;
	cursor:default;
}
.option:focus-visible,
.tile .read:focus-visible
{
	outline:2px solid var(--accent);
	outline-offset:4px;
}

/* their pictograms, drawn in the option's colour: a box, text lines (i) and the word card (b) */
.pic
{
	position:relative;
	width:31px;
	height:38px;
	border:1.5px solid currentColor;
	border-radius:4px;
}
.pic i,
.pic b
{
	position:absolute;
	background-color:currentColor;
}
.pic i
{
	left:4.5px;		/* 6px in the design, from the outside of the border */
	width:19px;
	height:2px;
}
.pic i:nth-child(1) { top:9.5px; }
.pic i:nth-child(2) { top:16.5px; }
.pic i:nth-child(3) { top:23.5px; }

.pic-sidebar,
.pic-popover
{
	width:55px;
}
.pic-sidebar i
{
	left:5.5px;
	width:21px;
}
.pic-sidebar b		/* the card beside the text */
{
	left:32.5px;
	top:7.5px;
	width:14px;
	height:20px;
	border-radius:2px;
}
.pic-popover i
{
	left:12.5px;
	width:27px;
}
.pic-popover i:nth-child(1) { top:5.5px; }
.pic-popover i:nth-child(2) { top:12.5px; }
.pic-popover i:nth-child(3) { top:19.5px; }
.pic-popover i:nth-child(4) { top:26.5px; }
.pic-popover b		/* the card over the text */
{
	left:18.5px;
	top:8.5px;
	width:15px;
	height:17px;
	border-radius:2px;
}
.pic-more i:nth-child(3)		/* two lines and a plus */
{
	left:10.5px;
	top:24.5px;
	width:7px;
}
.pic-more i:nth-child(4)
{
	left:13px;
	top:22px;
	width:2px;
	height:7px;
}
.pic-resume b		/* vanzelf verder: two lines, and play centred under them */
{
	left:11.5px;
	top:22.5px;
	width:7px;
	height:8px;
	clip-path:polygon(0 0,100% 50%,0 100%);
}
.pic-memory svg
{
	position:absolute;
	left:6.5px;
	top:6.5px;
}



/* responsive layouts */

@media (max-width:1200px)
{
	:root
	{
		--page-padding-x:25px;
		--page-padding-y:35px;
		
		--reader-padding-x:50px;
		--sidebar-padding-x:25px;

	}
}

/* below 900px: the popover view, see below — switched by App.applyView() (settings.viewBreakpoint), not by a media query here */


@media (max-width:600px)
{
	:root
	{
		--page-padding-x:5px;
		--page-padding-y:35px;

		--reader-padding-x:20px;

	}
	.tiles		/* start page: one tile per row, as wide as the screen */
	{
		grid-template-columns:1fr;
		padding:7px calc(15px - var(--page-padding-x));		/* 15px to the screen edges, the page padding included */
	}
	.tile .intro		/* one below the other, nothing to line up with */
	{
		min-height:0;
	}
}